/* ── Design Tokens ── */
:root {
  --bg:         #0a0d14;
  --bg2:        #0f1420;
  --surface:    #141929;
  --surface2:   #1a2035;
  --surface3:   #202640;
  --border:     rgba(99, 102, 241, 0.12);
  --border-h:   rgba(99, 102, 241, 0.30);
  --border-s:   rgba(99, 102, 241, 0.50);
  --text:       #e2e8f0;
  --text-2:     #94a3b8;
  --text-dim:   #475569;
  --indigo:     #6366f1;
  --indigo-h:   #818cf8;
  --indigo-d:   #4f46e5;
  --violet:     #8b5cf6;
  --emerald:    #10b981;
  --emerald-d:  #059669;
  --rose:       #f43f5e;
  --rose-d:     #e11d48;
  --amber:      #f59e0b;
  --gold:       #fbbf24;
  --cyan:       #06b6d4;
  --glow:       rgba(99, 102, 241, 0.18);
  --glow-s:     rgba(99, 102, 241, 0.06);
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --shadow:     0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-h:   0 12px 48px rgba(0, 0, 0, 0.55);
  --shadow-c:   0 0 0 1px var(--border);
  --t:          0.22s;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --sidebar-w:  224px;
  --header-h:   60px;
  --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-d:     'Playfair Display', Georgia, serif;
}

/* Light mode */
html.light {
  --bg:         #f8fafc;
  --bg2:        #f1f5f9;
  --surface:    #ffffff;
  --surface2:   #f8fafc;
  --surface3:   #f1f5f9;
  --border:     rgba(99, 102, 241, 0.14);
  --border-h:   rgba(99, 102, 241, 0.35);
  --border-s:   rgba(99, 102, 241, 0.55);
  --text:       #0f172a;
  --text-2:     #475569;
  --text-dim:   #94a3b8;
  --shadow:     0 4px 24px rgba(15, 23, 42, 0.08);
  --shadow-h:   0 12px 48px rgba(15, 23, 42, 0.14);
  --glow:       rgba(99, 102, 241, 0.12);
  --glow-s:     rgba(99, 102, 241, 0.04);
}

/* ── Reset + Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Section visibility ── */
.view { display: none; }
.view.active { display: block; }

/* ── Global keyframes ── */
@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(60px, -40px) scale(1.08); }
  66%       { transform: translate(-30px, 30px) scale(0.95); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  40%       { transform: translate(-50px, 60px) scale(0.92); }
  70%       { transform: translate(40px, -20px) scale(1.1); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes drawLine {
  from { stroke-dashoffset: var(--dash-len, 1000); }
  to   { stroke-dashoffset: 0; }
}
@keyframes growBar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes spinDot {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}