*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #06080f;
      --bg2:       #0c0f1d;
      --bg3:       #101425;
      --card:      rgba(255,255,255,0.04);
      --border:    rgba(255,255,255,0.08);
      --cyan:      #00d4ff;
      --cyan-dim:  rgba(0,212,255,0.15);
      --pink:      #ff3366;
      --purple:    #7c3aed;
      --green:     #00e676;
      --yellow:    #ffd600;
      --text:      #e8eaf0;
      --muted:     #6b7280;
      --font:      'Poppins', sans-serif;
      --nav-bg:    rgba(6,8,15,0.80);
      --mega-bg:   #0d1120;
      --mega-col-bg: rgba(255,255,255,.025);
      --hero-grid: rgba(0,212,255,.035);
      --shadow-glow: rgba(0,212,255,.2);
      --toggle-track: rgba(255,255,255,0.1);
      --toggle-icon-bg: #292b31;
    }

    [data-theme="light"] {
      --bg:        #f0f4f8;
      --bg2:       #e4eaf2;
      --bg3:       #d8e0ec;
      --card:      rgba(255,255,255,0.8);
      --border:    rgba(0,0,0,0.08);
      --cyan:      #0088bb;
      --cyan-dim:  rgba(0,136,187,0.12);
      --text:      #0f172a;
      --muted:     #64748b;
      --nav-bg:    rgba(240,244,248,0.88);
      --mega-bg:   #ffffff;
      --mega-col-bg: rgba(0,0,0,.025);
      --hero-grid: rgba(0,136,187,.06);
      --shadow-glow: rgba(0,136,187,.2);
      --toggle-track: rgba(0,0,0,0.08);
      --toggle-icon-bg: #ffffff;
    }

    @media (prefers-color-scheme: light) {
      :root:not([data-theme]) {
        --bg:#f0f4f8;--bg2:#e4eaf2;--bg3:#d8e0ec;
        --card:rgba(255,255,255,0.8);--border:rgba(0,0,0,0.08);
        --cyan:#0088bb;--cyan-dim:rgba(0,136,187,0.12);
        --text:#0f172a;--muted:#64748b;
        --nav-bg:rgba(240,244,248,0.88);
        --mega-bg:#ffffff;--mega-col-bg:rgba(0,0,0,.025);
        --hero-grid:rgba(0,136,187,.06);
        --shadow-glow:rgba(0,136,187,.2);
        --toggle-track:rgba(0,0,0,0.08);
        --toggle-icon-bg:#ffffff;
      }
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.6;
      overflow-x: hidden;
      transition: background .35s, color .35s;
    }

    body::before {
      content:'';position:fixed;inset:0;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events:none;z-index:0;opacity:.35;
    }