*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#060a12;
  --surface:#0d1321;
  --surface2:#141b2d;
  --surface3:#1c2541;
  --border:#1e2d50;
  --border-glow:rgba(56,189,248,0.15);
  --text:#e2e8f0;
  --text2:#8892b0;
  --text3:#5a6488;
  --accent:#38bdf8;
  --accent2:#818cf8;
  --accent3:#a78bfa;
  --accent-dim:rgba(56,189,248,0.08);
  --accent-glow:rgba(56,189,248,0.25);
  --success:#34d399;
  --warning:#fbbf24;
  --error:#ef4444;
  --glass:rgba(255,255,255,0.02);
  --glass2:rgba(255,255,255,0.04);
  --glass-border:rgba(255,255,255,0.05);
  --glass-border-hover:rgba(255,255,255,0.10);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --shadow-card:0 2px 20px rgba(0,0,0,0.2);
  --shadow-glow:0 0 40px rgba(56,189,248,0.08);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

/* ── LIGHT MODE ── */
.light,:root:has(.light){}
.light{
  --bg:#eef0f4;
  --surface:rgba(255,255,255,0.65);
  --surface2:rgba(255,255,255,0.78);
  --surface3:rgba(248,249,251,0.9);
  --border:#c8cdd6;
  --border-glow:rgba(56,189,248,0.15);
  --text:#0f172a;
  --text2:#475569;
  --text3:#94a3b8;
}
.light ::selection{background:rgba(56,189,248,0.2)}
.light nav.scrolled{background:color-mix(in srgb, var(--surface) 75%, transparent);border-color:var(--border-glow)}
.light .liquid-glass{background:rgba(255,255,255,0.55)}
.light .liquid-glass .glass-edge{border-color:rgba(0,0,0,0.04)}
.light .liquid-glass .glass-reflection{background:rgba(255,255,255,0.5)}
.light .liquid-glass::after{box-shadow:inset 0 -1px 0 rgba(0,0,0,0.03)}
.light .liquid-glass-hover:hover{
  border-color:rgba(56,189,248,0.25);
  box-shadow:0 8px 40px rgba(0,0,0,0.06),0 0 40px rgba(56,189,248,0.04),inset 0 1px 0 rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.7);
}
.light .hero-glass{background:rgba(255,255,255,0.6)}

html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}
::selection{background:rgba(56,189,248,0.3);color:#fff}
body{
  font-family:'Inter',-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  touch-action:manipulation;
}
.container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ── GLASS BACKGROUND ── */
.glass-bg{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;overflow:hidden;
}
.glass-bg svg{
  width:100%;height:100%;
  filter:blur(120px) saturate(1.2);
  opacity:0.30;
  mix-blend-mode:lighten;
  animation:glassDrift 20s ease-in-out infinite alternate;
}
@keyframes glassDrift{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.08) translate(-1%,1%)}
}
.glass-noise{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
  opacity:0.008;
  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)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:256px 256px;
}
.light .glass-noise{opacity:0.003}
.light .glass-bg svg{opacity:0.25;mix-blend-mode:normal}