:root{
      --bg-dark: #0f1724;     /* deep soft dark */
      --panel: #0b1320;
      --muted: #9aa4b2;
      --accent: #7c3aed;      /* indigo-ish */
      --accent-2: #60a5fa;    /* soft blue */
      --gold: #FBAF28;
    }

    /* Force dark background for whole document */
    html.dark, body { background: var(--bg-dark); color: #e6eef8; }

    /* ---------- Top Scroll Progress Bar (dark) ---------- */
    #scrollBar {
      position: fixed; top: 0; left: 0; height: 4px; width: 0%;
      z-index: 9999;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      box-shadow: 0 2px 8px rgba(2,6,23,0.6);
    }

    /* ---------- Fade-up animation ---------- */
    .fade-up { opacity: 0; transform: translateY(18px); transition: all .72s cubic-bezier(.2,.9,.2,1); }
    .fade-up.show { opacity: 1; transform: translateY(0); }

    /* ---------- Header ---------- */
    #header { background: linear-gradient(180deg, rgba(6,10,20,0.6), rgba(6,10,20,0.4)); border-bottom: 1px solid rgba(255,255,255,0.03); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .28s ease, background .2s ease; z-index:9998; }
    #header.hide { transform: translateY(-110%); }

    /* ---------- Cards ---------- */
    .card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)); border: 1px solid rgba(255,255,255,0.03); border-radius: 12px; }
    .card-hover { transition: transform .28s ease, box-shadow .28s ease; }
    .card-hover:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(2,6,23,0.6); }

    /* ---------- Cursor (soft glow) ---------- */
    .cursor-dot, .cursor-glow {
      position: fixed; pointer-events: none; z-index: 99999; transform: translate(-50%,-50%); transition: width .12s ease, height .12s ease, opacity .12s ease, transform .12s ease;
    }
    .cursor-dot { width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,0.95); box-shadow: 0 4px 14px rgba(124,58,237,0.18); }
    .cursor-glow { width:56px; height:56px; border-radius:50%; background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, rgba(96,165,250,0.06) 40%, transparent 60%); opacity: .95; transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s; }
    .cursor-expand { transform: translate(-50%,-50%) scale(1.9); opacity: 1 !important; }

    /* ---------- Small helpers ---------- */
    .focus-ring:focus { outline: 3px solid rgba(124,58,237,0.12); outline-offset: 2px; }
    a { color: inherit; }
    img { max-width:100%; display:block; }

    /* Responsive container widths */
    .max-w-8xl { max-width: 1280px; margin-left:auto; margin-right:auto; }