/* ── CSS Variables for Theming ── */
         :root {
            --bg-body: #0b0e14;
            --bg-card: rgba(255,255,255,0.05);
            --bg-card-hover: rgba(255,255,255,0.08);
            --border-card: rgba(255,255,255,0.08);
            --border-card-hover: rgba(255,255,255,0.15);
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --text-inverse: #0b0e14;
            --bg-sidebar: rgba(15,23,42,0.92);
            --border-sidebar: rgba(255,255,255,0.06);
            --input-bg: rgba(255,255,255,0.05);
            --input-border: rgba(255,255,255,0.1);
            --input-focus: rgba(59,130,246,0.3);
            --badge-bg: rgba(59,130,246,0.15);
            --badge-text: #93bbfc;
            --badge-border: rgba(59,130,246,0.2);
            --progress-track: rgba(255,255,255,0.08);
            --social-color: #64748b;
            --social-hover: #f1f5f9;
            --footer-border: rgba(255,255,255,0.05);
            --overlay-bg: rgba(0,0,0,0.6);
            --menu-toggle-bg: rgba(255,255,255,0.05);
            --menu-toggle-border: rgba(255,255,255,0.1);
            --menu-toggle-color: #f1f5f9;
            --glass-backdrop: blur(12px);
            --transition: 0.3s ease;
         }

         /* ── Light Theme ── */
         html.light {
            --bg-body: #f1f5f9;
            --bg-card: rgba(255,255,255,0.7);
            --bg-card-hover: rgba(255,255,255,0.85);
            --border-card: rgba(255,255,255,0.3);
            --border-card-hover: rgba(255,255,255,0.5);
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #94a3b8;
            --text-inverse: #f1f5f9;
            --bg-sidebar: rgba(255,255,255,0.92);
            --border-sidebar: rgba(0,0,0,0.06);
            --input-bg: rgba(0,0,0,0.03);
            --input-border: rgba(0,0,0,0.1);
            --input-focus: rgba(59,130,246,0.2);
            --badge-bg: rgba(59,130,246,0.08);
            --badge-text: #2563eb;
            --badge-border: rgba(59,130,246,0.15);
            --progress-track: rgba(0,0,0,0.08);
            --social-color: #94a3b8;
            --social-hover: #0f172a;
            --footer-border: rgba(0,0,0,0.05);
            --overlay-bg: rgba(0,0,0,0.3);
            --menu-toggle-bg: rgba(0,0,0,0.03);
            --menu-toggle-border: rgba(0,0,0,0.1);
            --menu-toggle-color: #0f172a;
            --glass-backdrop: blur(12px);
         }

         /* ── Base Styles ── */
         /* * { margin:0; padding:0; box-sizing:border-box; } */
         body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-body);
            color: var(--text-primary);
            transition: background var(--transition), color var(--transition);
            min-height: 100vh;
         }

         /* ── Glassmorphism ── */
         .glass {
            background: var(--bg-card);
            backdrop-filter: var(--glass-backdrop);
            -webkit-backdrop-filter: var(--glass-backdrop);
            border: 1px solid var(--border-card);
            transition: background var(--transition), border-color var(--transition);
         }
         .glass:hover {
            background: var(--bg-card-hover);
            border-color: var(--border-card-hover);
         }

         /* ── Sidebar ── */
         .sidebar {
            background: var(--bg-sidebar);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-right: 1px solid var(--border-sidebar);
            transition: background var(--transition), border-color var(--transition);
         }
         .sidebar-mobile {
            background: var(--bg-sidebar);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            transition: background var(--transition), transform 0.3s ease;
         }
         html.light .sidebar-mobile { background: var(--bg-sidebar); }

         /* ── Text Colors ── */
         .text-theme-primary { color: var(--text-primary); }
         .text-theme-secondary { color: var(--text-secondary); }
         .text-theme-muted { color: var(--text-muted); }
         .border-theme { border-color: var(--border-card); }
         .border-theme-sidebar { border-color: var(--border-sidebar); }

         /* ── Progress Bar ── */
         .progress-track {
            background: var(--progress-track);
            transition: background var(--transition);
            overflow: hidden;
         }
         .progress-bar-custom {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            height: 6px;
            border-radius: 9999px;
            width: 0;
            transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: width;
         }

         /* ── Timeline ── */
         .timeline-item {
            position: relative;
            padding-left: 1.5rem;
            border-left: 2px solid rgba(59,130,246,0.25);
            transition: border-color 0.3s;
         }
         .timeline-item:hover { border-left-color: #3b82f6; }
         .timeline-item::before {
            content: '';
            position: absolute;
            left: -6px;
            top: 4px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
         }

         /* ── Buttons ── */
         .btn-primary {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            color: #fff;
            padding: 0.6rem 1.8rem;
            border-radius: 0.75rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 14px rgba(59,130,246,0.3);
            display: inline-block;
            text-decoration: none;
         }
         .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(59,130,246,0.4); }

         .btn-outline {
            background: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border-card);
            padding: 0.6rem 1.8rem;
            border-radius: 0.75rem;
            font-weight: 600;
            transition: all 0.2s;
            display: inline-block;
            text-decoration: none;
         }
         .btn-outline:hover {
            background: var(--bg-card);
            border-color: var(--border-card-hover);
         }

         /* ── Form ── */
         .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: 0.75rem;
            color: var(--text-primary);
            transition: border-color 0.2s, box-shadow 0.2s, background var(--transition);
         }
         .form-control:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px var(--input-focus);
         }
         .form-control::placeholder { color: var(--text-muted); }

         /* ── Badge ── */
         .badge-glow {
            background: var(--badge-bg);
            color: var(--badge-text);
            padding: 0.2rem 0.8rem;
            border-radius: 9999px;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            border: 1px solid var(--badge-border);
            transition: all var(--transition);
         }

         /* ── Social Icons ── */
         .social-icon {
            color: var(--social-color);
            transition: color 0.2s, transform 0.2s;
         }
         .social-icon:hover {
            color: var(--social-hover);
            transform: scale(1.1);
         }

         /* ── Menu Toggle ── */
         .menu-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 0.75rem;
            background: var(--menu-toggle-bg);
            border: 1px solid var(--menu-toggle-border);
            color: var(--menu-toggle-color);
            cursor: pointer;
            transition: all var(--transition);
         }
         .menu-toggle:hover { opacity: 0.8; }

         /* ── Overlay ── */
         .overlay {
            position: fixed;
            inset: 0;
            background: var(--overlay-bg);
            z-index: 999;
            display: none;
            transition: background var(--transition);
         }
         .overlay.active { display: block; }

         /* ── Footer ── */
         .footer-border { border-top: 1px solid var(--footer-border); }

         /* ── Mobile Top Bar ── */
         .topbar {
            background: var(--bg-sidebar);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-sidebar);
            transition: background var(--transition), border-color var(--transition);
         }

         /* ── Scrollbar ── */
         .scrollbar-hide {
            scrollbar-width: none;
            -ms-overflow-style: none;
         }
         .scrollbar-hide::-webkit-scrollbar {
            display: none;
         }

         /* ── Print ── */
         @media print {
            .sidebar, .sidebar-mobile, .topbar, .overlay { display: none !important; }
            .glass { background: #fff !important; color: #000 !important; border: 1px solid #ddd !important; backdrop-filter: none !important; }
            body { background: #fff !important; }
            .progress-bar-custom { background: #3b82f6; }
            .badge-glow { background: #e0e7ff; color: #1e40af; border-color: #bfdbfe; }
            .btn-primary { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .progress-bar-custom { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
         }

         /* ── Responsive tweaks ── */
         @media (max-width: 767px) {
            .sidebar { display: none; }
         }
         @media (min-width: 768px) {
            .topbar { display: none; }
         }






/* When the parent section becomes visible (AOS adds .aos-animate) */
.aos-animate .progress-bar-custom {
  width: var(--target-width);
}