:root {
  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  color-scheme: dark;

  --bg: #0e141b;
  --bg-grid: rgba(148, 180, 215, .045);
  --glow-a: rgba(245, 181, 71, .075);
  --glow-b: rgba(69, 200, 182, .06);

  --surface: #141c26;
  --surface-2: #1a2431;
  --surface-3: #212e3e;
  --border: #263444;
  --border-strong: #37485d;

  --text: #e8eef5;
  --text-muted: #9db0c3;
  --text-faint: #647a90;

  --primary: #f5b547;          
  --primary-strong: #ffc869;
  --primary-ink: #251a04;
  --primary-soft: rgba(245, 181, 71, .13);
  --accent: #45c8b6;           
  --accent-soft: rgba(69, 200, 182, .13);
  --danger: #ef6d6d;
  --danger-soft: rgba(239, 109, 109, .12);
  --success: #5ecf8d;

  --focus-ring: 0 0 0 3px rgba(245, 181, 71, .28);
  --shadow-sm: 0 2px 8px rgba(2, 6, 12, .35);
  --shadow-md: 0 10px 30px rgba(2, 6, 12, .45);
  --shadow-lift: 0 18px 44px rgba(2, 6, 12, .5);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --header-h: 64px;
  --ease: cubic-bezier(.22, .9, .3, 1);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f1;
  --bg-grid: rgba(30, 60, 90, .055);
  --glow-a: rgba(233, 166, 51, .13);
  --glow-b: rgba(23, 160, 142, .09);
  --surface: #ffffff;
  --surface-2: #f4f6f3;
  --surface-3: #e9ede8;
  --border: #d9e0da;
  --border-strong: #b8c5bc;
  --text: #18222c;
  --text-muted: #54677a;
  --text-faint: #7d8fa0;
  --primary: #eda733;
  --primary-strong: #f7b84e;
  --primary-soft: rgba(237, 167, 51, .16);
  --accent: #159a88;
  --accent-soft: rgba(21, 154, 136, .13);
  --danger: #d94f4f;
  --danger-soft: rgba(217, 79, 79, .12);
  --success: #2f9e63;
  --focus-ring: 0 0 0 3px rgba(237, 167, 51, .3);
  --shadow-sm: 0 2px 8px rgba(30, 45, 60, .08);
  --shadow-md: 0 10px 30px rgba(30, 45, 60, .12);
  --shadow-lift: 0 18px 44px rgba(30, 45, 60, .16);
}


body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  transition: background .35s var(--ease), color .35s var(--ease);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 0%, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 85% at 50% 0%, #000 25%, transparent 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 480px at 6% -6%, var(--glow-a), transparent 70%),
    radial-gradient(820px 620px at 102% 104%, var(--glow-b), transparent 70%);
}

::selection { background: var(--primary); color: var(--primary-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }


.mono { font-family: var(--font-mono); }
.kicker {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .8rem;
}
.display-xl {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.35rem); line-height: 1.05; letter-spacing: -.02em;
}
.display-xl em { font-style: normal; color: var(--primary); }
.display-lg {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.015em;
}


.view { display: none; }
.view.active { display: block; animation: viewIn .35s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }


@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatY { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes popIn { from { opacity: 0; transform: scale(.85); } }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}