/* ════════════════════════════════════════════════════════════════════
   THEME · tokens, two coordinated themes, base, glass, buttons
   Dark  = Cinematic Midnight   ·   Light = Pearl Glass
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --fs-xs: clamp(.72rem, .70rem + .1vw, .78rem);
  --fs-sm: clamp(.84rem, .82rem + .1vw, .92rem);
  --fs-base: clamp(.97rem, .94rem + .15vw, 1.06rem);
  --fs-lg: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-h3: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --fs-h2: clamp(2.1rem, 1.4rem + 3.2vw, 4rem);
  --fs-hero: clamp(2.7rem, min(1.2rem + 5.6vw, 10.5vh + .5rem), 7.2rem);
  --lh-tight: 1.04;
  --lh-body: 1.65;

  /* spacing */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 7rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --maxw: 1240px;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* shape */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .18s; --dur-2: .35s; --dur-3: .7s; --dur-4: 1.1s;

  /* layers */
  --z-bg: -1; --z-particles: 0; --z-progress: 70; --z-header: 50; --z-dock: 45;
  --z-assistant: 60; --z-tour: 65; --z-modal: 100; --z-toast: 120;

  --blur: 18px;
  --header-h: 68px;
  --dock-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ── Cinematic Midnight (dark) ─────────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080C18;
  --bg-2: #0D1424;
  --surface-solid: #111B2D;
  --glass: rgba(20, 30, 52, .52);
  --glass-strong: rgba(14, 22, 40, .82);
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .22);
  --hi: rgba(255, 255, 255, .08);                 /* inner top highlight */
  --text: #F4F6FC;
  --muted: #A5B1C7;
  --accent: #8585FF;
  --accent-rgb: 133, 133, 255;
  --accent-2: #64D9EE;
  --accent-2-rgb: 100, 217, 238;
  --accent-ink: #A9A9FF;                          /* accent used as TEXT on --bg */
  --on-accent: #0A0E1C;                           /* text on accent fills */
  --shadow-1: 0 8px 30px rgba(0, 0, 0, .35);
  --shadow-2: 0 30px 80px rgba(0, 0, 0, .55);
  --aurora-op: .30;
  --focus: #9EE9F7;
}

/* ── Pearl Glass (light) ───────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F4F0;
  --bg-2: #ECEEF5;
  --surface-solid: #FFFFFF;
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .86);
  --border: rgba(30, 40, 70, .12);
  --border-strong: rgba(30, 40, 70, .24);
  --hi: rgba(255, 255, 255, .9);
  --text: #171B2B;
  --muted: #565E72;
  --accent: #5357D0;
  --accent-rgb: 83, 87, 208;
  --accent-2: #2B7F98;
  --accent-2-rgb: 43, 127, 152;
  --accent-ink: #4348C0;
  --on-accent: #FFFFFF;
  --shadow-1: 0 8px 30px rgba(40, 50, 90, .10);
  --shadow-2: 0 30px 80px rgba(40, 50, 90, .22);
  --aurora-op: .20;
  --focus: #3B3FB8;
}

/* ── Accent palettes (user choice). Each has dark + light values. ──── */
[data-accent="ice"][data-theme="dark"]   { --accent:#5CCFE6; --accent-rgb:92,207,230;  --accent-2:#8585FF; --accent-2-rgb:133,133,255; --accent-ink:#7FDDF0; --on-accent:#06151A; }
[data-accent="ice"][data-theme="light"]  { --accent:#0F6F88; --accent-rgb:15,111,136;  --accent-2:#5357D0; --accent-2-rgb:83,87,208;   --accent-ink:#0B627A; --on-accent:#fff; }
[data-accent="rose"][data-theme="dark"]  { --accent:#FF86A8; --accent-rgb:255,134,168; --accent-2:#C79BFF; --accent-2-rgb:199,155,255; --accent-ink:#FFA3BF; --on-accent:#1C0710; }
[data-accent="rose"][data-theme="light"] { --accent:#B8325E; --accent-rgb:184,50,94;   --accent-2:#7A45C4; --accent-2-rgb:122,69,196;  --accent-ink:#A82A54; --on-accent:#fff; }
[data-accent="amber"][data-theme="dark"] { --accent:#FFC25C; --accent-rgb:255,194,92;  --accent-2:#FF8FA3; --accent-2-rgb:255,143,163; --accent-ink:#FFD083; --on-accent:#1A1100; }
[data-accent="amber"][data-theme="light"]{ --accent:#9A5C00; --accent-rgb:154,92,0;    --accent-2:#B8325E; --accent-2-rgb:184,50,94;   --accent-ink:#8A5200; --on-accent:#fff; }
/* hidden palette, unlocked by an easter egg */
[data-accent="matrix"][data-theme="dark"]  { --accent:#4DFF9A; --accent-rgb:77,255,154; --accent-2:#B6FF5C; --accent-2-rgb:182,255,92; --accent-ink:#7DFFB5; --on-accent:#03140A; }
[data-accent="matrix"][data-theme="light"] { --accent:#0B7A3E; --accent-rgb:11,122,62;  --accent-2:#3F7A00; --accent-2-rgb:63,122,0;    --accent-ink:#096834; --on-accent:#fff; }

/* ── Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-tap-highlight-color: transparent; }
html[data-motion="off"] { scroll-behavior: auto; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body);
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
body.is-locked { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: .005em; }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); letter-spacing: .02em; }
.muted { color: var(--muted); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 200; padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 600; transition: top var(--dur-1); }
.skip-link:focus { top: 1rem; }
::selection { background: rgba(var(--accent-rgb), .35); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* ── Ambient background (behind everything, pointer-events none) ───── */
#aurora { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; overflow: hidden; background:
  radial-gradient(1200px 700px at 80% -10%, rgba(var(--accent-rgb), .10), transparent 60%),
  radial-gradient(900px 600px at -10% 60%, rgba(var(--accent-2-rgb), .08), transparent 60%), var(--bg); }
#aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--aurora-op); will-change: transform; animation: drift 34s ease-in-out infinite alternate; }
#aurora i:nth-child(1) { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax; background: rgb(var(--accent-rgb)); }
#aurora i:nth-child(2) { width: 38vmax; height: 38vmax; right: -14vmax; top: 22vh; background: rgb(var(--accent-2-rgb)); animation-duration: 44s; animation-delay: -9s; }
#aurora i:nth-child(3) { width: 32vmax; height: 32vmax; left: 24vw; bottom: -22vmax; background: rgb(var(--accent-rgb)); opacity: calc(var(--aurora-op) * .7); animation-duration: 52s; animation-delay: -18s; }
@keyframes drift { to { transform: translate3d(7vw, 5vh, 0) scale(1.14); } }
html[data-aurora="off"] #aurora i { display: none; }
html[data-motion="calm"] #aurora i { animation-duration: 120s; }
html[data-motion="off"] #aurora i { animation: none; }
@media (max-width: 700px) { #aurora i { filter: blur(56px); } #aurora i:nth-child(3) { display: none; } }

#particles { position: fixed; inset: 0; z-index: var(--z-particles); width: 100%; height: 100%; pointer-events: none; opacity: .9; }
html[data-particles="off"] #particles, html[data-motion="off"] #particles { display: none; }
#progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-progress); transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); pointer-events: none; }
#main, .footer { position: relative; z-index: 1; }
#main { overflow-x: clip; }

/* ── Glass primitives (used sparingly: nav, dock, featured panels) ─── */
.glass, .glass-strong {
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--hi);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5);
  backdrop-filter: blur(var(--blur)) saturate(1.5);
}
.glass-strong { background: var(--glass-strong); --blur: 28px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong { background: var(--surface-solid); }
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.4rem; min-height: 46px; border-radius: var(--r-pill);
  font-weight: 550; font-size: var(--fs-sm); letter-spacing: .01em; white-space: nowrap;
  color: var(--text); background: var(--glass); border: 1px solid var(--border-strong);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .6); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .ic { width: 1.1em; height: 1.1em; }
.btn-primary { color: var(--on-accent); border-color: transparent; background: linear-gradient(135deg, var(--accent), rgb(var(--accent-2-rgb))); box-shadow: 0 10px 28px rgba(var(--accent-rgb), .30); }
.btn-primary:hover { box-shadow: 0 14px 36px rgba(var(--accent-rgb), .42); border-color: transparent; }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 40px; padding: .55rem 1rem; }
.link-btn { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent-ink); font-weight: 550; font-size: var(--fs-sm); padding: .4rem 0; border-bottom: 1px solid transparent; }
.link-btn:hover { border-bottom-color: currentColor; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text); transition: background var(--dur-1), transform var(--dur-2) var(--ease); }
.icon-btn:hover { background: rgba(var(--accent-rgb), .14); }
.icon-btn:active { transform: scale(.94); }
.btn-primary.icon-btn { color: var(--on-accent); }
.ic { width: 20px; height: 20px; flex: none; }
.ic-lg { width: 30px; height: 30px; }
.ic-sun { display: none; } .ic-moon { display: inline-flex; }
[data-theme="dark"] .ic-sun { display: inline-flex; } [data-theme="dark"] .ic-moon { display: none; }

/* ── Reveal on scroll (content is visible without JS / with reduced motion) ── */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
html[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Reduced motion: honour the OS even before the user picks anything */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]):not([data-motion="calm"]) * { animation: none !important; transition-duration: .01ms !important; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }