/* Voxden — voxden.app
   One stylesheet for every page. Tokens are the app's own (src/app.css),
   so the site and the dashboard sit in the same room. Dark only. */

:root {
  --bg: #0a0c0f;
  --bg-2: #0e0e10;
  --panel: #161619;
  --panel-2: #1b1b1f;
  --border: #26262b;
  --text: #ececef;
  --muted: #8a8a92;
  --faint: #6a6a72;
  --mint: #9cf3c4;
  --mint-rgb: 156, 243, 196;
  --mint-strong: #83eaaf;
  --mint-light: #adfbd1;
  --gold: #e8c15c;
  --gold-rgb: 232, 193, 92;
  --gold-a: #f1d27a;
  --gold-b: #d4a437;
  --red: #e07070;

  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-mono: "Cascadia Code", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;

  --r-lg: 20px;
  --r: 12px;
  --r-sm: 8px;
  --max: 1160px;
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(var(--mint-rgb), .28); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- background: glow + grain, no banding ----------
   Two slow glows on a fixed layer, dithered by a tiled noise texture so
   the dark gradients never show 8-bit steps. Interpolated in oklab where
   the browser can, which also removes the grey band in the mint fade. */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.bg-glow {
  position: absolute; inset: -20%;
  background:
    radial-gradient(1100px 680px at 18% -6%, rgba(var(--mint-rgb), .11), transparent 62%),
    radial-gradient(900px 560px at 82% -4%, rgba(82, 142, 105, .10), transparent 64%),
    radial-gradient(900px 700px at 50% 108%, rgba(var(--mint-rgb), .05), transparent 62%);
  animation: drift 38s var(--ease-io) infinite alternate;
  will-change: transform;
}
@supports (background: linear-gradient(in oklab, red, blue)) {
  .bg-glow {
    background:
      radial-gradient(1100px 680px at 18% -6% in oklab, rgba(var(--mint-rgb), .11), transparent 62%),
      radial-gradient(900px 560px at 82% -4% in oklab, rgba(82, 142, 105, .10), transparent 64%),
      radial-gradient(900px 700px at 50% 108% in oklab, rgba(var(--mint-rgb), .05), transparent 62%);
  }
}
.bg-grain {
  position: absolute; inset: 0;
  background: url("grain.svg") repeat 0 0 / 160px 160px;
  opacity: .75;
  mix-blend-mode: normal;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.04); }
}

/* ---------- layout ---------- */
.wrap { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  font: 600 11px/1 var(--font-text); letter-spacing: .22em; text-transform: uppercase; color: var(--faint);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: rgba(var(--mint-rgb), .55); }
.h1, .h2, .h3 { font-family: var(--font-display); font-weight: 600; color: var(--text); text-wrap: balance; }
.h1 { font-size: clamp(42px, 6.2vw, 72px); line-height: 1.02; letter-spacing: -.035em; }
.h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -.028em; }
.h3 { font-size: clamp(19px, 2vw, 22px); line-height: 1.25; letter-spacing: -.015em; }
.lead { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: var(--muted); max-width: 56ch; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.accent { color: var(--mint); }
.gold { color: var(--gold); }
.small { font-size: 13.5px; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lead { margin-inline: auto; }
.stack > * + * { margin-top: 16px; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head.center { margin-inline: auto; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09) 18%, rgba(255, 255, 255, .09) 82%, transparent); border: 0; margin: 0; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
}
.nav.is-scrolled, .nav.is-open {
  background: rgba(10, 12, 15, .72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, .06);
}
.nav-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 600 17px/1 var(--font-display); letter-spacing: -.02em; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 6px 18px -8px rgba(var(--mint-rgb), .6); }
.nav-links { display: flex; gap: 6px; margin-inline: auto; }
.nav-links a {
  position: relative; padding: 8px 12px; border-radius: 8px;
  font-size: 14.5px; color: var(--muted);
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px;
  background: var(--mint); opacity: .8;
}
.nav-cta { margin-left: auto; }
.nav-burger {
  display: none; width: 40px; height: 40px; border-radius: 10px; margin-left: auto;
  place-items: center; color: var(--text);
}
.nav-burger span { display: block; width: 18px; height: 1.5px; background: currentColor; margin: 2.5px 0; transition: transform .25s var(--ease), opacity .2s; }
.nav.is-open .nav-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
.nav-sheet {
  display: none; position: absolute; left: 0; right: 0; top: var(--nav-h);
  padding: 8px var(--gutter) 20px;
  background: rgba(10, 12, 15, .92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nav-sheet a { display: block; padding: 12px 6px; font-size: 16px; color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, .05); }
.nav-sheet .btn { margin-top: 14px; width: 100%; justify-content: center; }
.nav.is-open .nav-sheet { display: block; animation: sheet .28s var(--ease); }
@keyframes sheet { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 20px; border-radius: 999px;
  font: 600 15px/1 var(--font-text); letter-spacing: -.005em; white-space: nowrap;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .2s, border-color .2s, color .2s;
  will-change: transform;
}
.btn:active { transform: translateY(0) scale(.985) !important; }
.btn-primary {
  color: #0b1210;
  background: linear-gradient(180deg, var(--mint-light), var(--mint) 55%, var(--mint-strong));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 10px 28px -12px rgba(var(--mint-rgb), .65);
}
.btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #c2ffe0, var(--mint-light) 55%, var(--mint));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 4px rgba(var(--mint-rgb), .16), 0 6px 16px -10px rgba(var(--mint-rgb), .5);
}
.btn-primary .meta { font-weight: 500; color: rgba(11, 18, 16, .62); }
.btn-outline {
  color: var(--mint); background: rgba(var(--mint-rgb), .05);
  border: 1px solid rgba(var(--mint-rgb), .34);
}
.btn-outline:hover { background: rgba(var(--mint-rgb), .11); border-color: rgba(var(--mint-rgb), .55); transform: translateY(-1px); }
.btn-ghost { color: var(--muted); padding-inline: 8px; }
.btn-ghost:hover { color: var(--text); }
.btn-ghost .arrow { transition: transform .25s var(--ease); }
.btn-ghost:hover .arrow { transform: translateX(3px); }
.btn-gold {
  color: #1a1405;
  background: linear-gradient(135deg, var(--gold-a), var(--gold-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 28px -12px rgba(var(--gold-rgb), .7);
}
.btn-gold:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #f8e19a, var(--gold-a) 45%, var(--gold-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 0 0 4px rgba(var(--gold-rgb), .16), 0 6px 16px -10px rgba(var(--gold-rgb), .5);
}
/* A single light streak crosses the filled buttons as the cursor arrives:
   depth without a drop shadow, which smears on the dark ground. */
.btn-primary, .btn-gold { overflow: hidden; }
.btn-primary::after, .btn-gold::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 34%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg); opacity: 0;
  pointer-events: none;
}
.btn-primary:hover::after, .btn-gold:hover::after { animation: sheen .65s var(--ease) forwards; }
@keyframes sheen {
  0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.win-glyph { width: 15px; height: 15px; }

/* ---------- keycaps ---------- */
.kbd {
  display: inline-grid; place-items: center; min-width: 36px; height: 30px; padding: 0 9px;
  border-radius: 7px; color: var(--text);
  background: linear-gradient(180deg, #24242a, #18181c);
  border: 1px solid #2e2e35; border-bottom-width: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  font: 600 12.5px/1 var(--font-text);
  transition: transform .1s ease, border-bottom-width .1s ease, box-shadow .2s;
}
.kbd.is-down { transform: translateY(2px); border-bottom-width: 1px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 3px rgba(var(--mint-rgb), .12); }
.kbd-row { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.kbd-row .plus { color: var(--faint); }
.kbd-row .win-glyph { width: 13px; height: 13px; }

/* ---------- cards (spotlight follows the cursor) ---------- */
.card {
  position: relative; isolation: isolate;
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(var(--mint-rgb), .075), transparent 48%),
    linear-gradient(145deg, #19191d 0%, #141417 72%);
  border: 1px solid rgba(255, 255, 255, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 44px -32px rgba(0, 0, 0, .9);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--mint-rgb), .09), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease);
  pointer-events: none;
}
.card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--mint-rgb), .55), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease);
  pointer-events: none;
}
.card.is-lit::before, .card.is-lit::after { opacity: 1; }
.card-hover:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 28px 56px -30px rgba(0, 0, 0, .95); }
.card-pad { padding: clamp(22px, 2.6vw, 32px); }
.card-gold {
  border-color: rgba(var(--gold-rgb), .42);
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(var(--gold-rgb), .10), transparent 50%),
    linear-gradient(145deg, #1b1a16 0%, #141417 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(var(--gold-rgb), .12), 0 24px 56px -30px rgba(var(--gold-rgb), .35);
}
.card-gold::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--gold-rgb), .12), transparent 62%); }
.card-gold::after { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--gold-rgb), .7), transparent 65%); }

/* ---------- badges, lists, chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font: 600 11px/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase;
}
.badge-mint { color: var(--mint); background: rgba(var(--mint-rgb), .1); border: 1px solid rgba(var(--mint-rgb), .28); }
.badge-gold { color: var(--gold); background: rgba(var(--gold-rgb), .1); border: 1px solid rgba(var(--gold-rgb), .4); }
.dots { display: grid; gap: 12px; }
.dots li { position: relative; padding-left: 22px; color: var(--text); font-size: 15px; line-height: 1.5; }
.dots li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 4px rgba(var(--mint-rgb), .14);
}
.dots-gold li::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .14); }
.dots-muted li { color: var(--muted); }

/* ---------- everywhere-you-type: quiet drifting names ---------- */
@media (hover: hover) {
}

/* ---------- reveal on scroll ---------- */
.reveal, [data-stagger] > * {
  opacity: 0; transform: translateY(14px); filter: blur(4px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-in, [data-stagger].is-in > * { opacity: 1; transform: none; filter: none; }
.reveal-scale { transform: translateY(12px) scale(.985); }

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(24px, 3vw, 40px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero .h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 30px; }
.hero-kbd { margin-top: 22px; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--faint); }

/* live demo: a fake editor, a real flow bar, text that types itself */
.demo { padding: 0; overflow: hidden; cursor: pointer; user-select: none; }
.demo-chrome { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--faint); font-size: 12.5px; }
.demo-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #2b2b31; }
.demo-chrome i:first-child { background: #3a3a41; }
.demo-chrome .demo-title { margin-left: 8px; }
.demo-body { position: relative; min-height: 340px; padding: 26px 28px 100px; background: linear-gradient(180deg, rgba(255, 255, 255, .012), transparent); }
.demo-text { font: 400 17px/1.7 var(--font-text); color: var(--text); min-height: 4.5em; white-space: pre-wrap; }
.demo-text .dim { color: var(--muted); }
.demo-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -.2em; background: var(--mint); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.demo-bar {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 8px 0 8px; border-radius: 999px;
  background: #0d0d11; border: 1px solid rgba(var(--mint-rgb), .22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 40px -18px rgba(0, 0, 0, .9), 0 0 32px -10px rgba(var(--mint-rgb), .35);
  transition: width .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease), border-color .4s, background-color .4s;
  width: 48px; overflow: visible;
}
.demo-bar[data-state="idle"] .demo-wave { opacity: 0; }
/* At rest only the sphere shows; the pill fades in around it as recording starts. */
.demo-bar[data-state="idle"] { background: transparent; border-color: transparent; box-shadow: none; }
.demo-bar[data-state="recording"], .demo-bar[data-state="thinking"] { width: 216px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 40px -18px rgba(0, 0, 0, .9), 0 0 42px -8px rgba(var(--mint-rgb), .6); border-color: rgba(var(--mint-rgb), .5); }
.demo-wave { display: flex; align-items: center; gap: 3px; height: 26px; flex: 0 0 auto; transition: opacity .3s; }
.demo-wave i {
  width: 3px; height: 3px; border-radius: 2px; background: var(--mint);
  transform-origin: center; transition: height .35s var(--ease);
  animation: wave .78s ease-in-out infinite alternate;
  animation-delay: calc(var(--n) * -73ms);
  animation-play-state: paused;
}
.demo-bar[data-state="recording"] .demo-wave i { animation-play-state: running; height: calc(6px + var(--a) * 18px); }
.demo-bar[data-state="thinking"] .demo-wave i { animation: think 1.1s var(--ease-io) infinite; animation-delay: calc(var(--n) * 40ms); height: 5px; }
@keyframes wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes think { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.demo-stop {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--mint-rgb), .1); opacity: 0; transition: opacity .3s;
}
.demo-stop::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--mint); }
.demo-bar[data-state="recording"] .demo-stop { opacity: 1; }
.demo-hint {
  position: absolute; left: calc(50% + 34px); bottom: 38px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  color: var(--faint); font-size: 12.5px;
  transition: opacity .3s;
}
.demo-hint .kbd { height: 24px; min-width: 28px; font-size: 11px; }
.demo:not([data-phase="idle"]) .demo-hint { opacity: 0; }
.demo-lang { margin-left: auto; animation: lang-in .35s var(--ease); }
@keyframes lang-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.demo-roster {
  height: 30px; overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .012);
}
.demo-roster-track {
  display: flex; gap: 18px; white-space: nowrap;
  padding: 0 16px;
  font-size: 11px; letter-spacing: .04em; color: var(--faint);
  animation: roster-slide 90s linear infinite;
}
.demo-roster-track span { flex: none; }
.demo-roster-track span.is-on { color: var(--mint); font-weight: 600; }
.demo:is(:hover, :focus-within) .demo-roster-track { animation-play-state: paused; }
@keyframes roster-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.demo-text[dir="rtl"] { text-align: right; }

/* ---------- proof strip ----------
   Three equal cards. Pointer light + a slight press-tilt; each icon
   has its own motion. Extra line is in the DOM so keyboard and tap
   see it, not only hover. */
.proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  align-items: stretch;
}
.proof li {
  --mx: 50%; --my: 30%;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 100%; padding: 22px 22px 20px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(var(--mint-rgb), .22);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--mint-rgb), .06), transparent 48%),
    linear-gradient(165deg, #16161a 0%, #121216 72%);
  color: var(--muted); font-size: 15px; line-height: 1.5;
  outline: none; cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 36px -28px rgba(0, 0, 0, .8);
  transform: perspective(860px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .45s var(--ease), border-color .35s, background .35s, box-shadow .45s var(--ease);
}
.proof li::before {
  content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1px;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(var(--mint-rgb), .7), transparent 58%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease);
  pointer-events: none;
}
.proof li b { color: var(--text); font-weight: 600; }
.proof-copy { display: grid; gap: 8px; }
.proof-more {
  display: block; min-height: 1.4em;
  color: var(--mint-light); font-size: 13.5px; line-height: 1.4;
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.proof li:is(:hover, :focus, :focus-visible) {
  border-color: rgba(var(--mint-rgb), .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 40px -24px rgba(var(--mint-rgb), .28);
  transition: transform .15s ease-out, border-color .35s, background .35s, box-shadow .45s var(--ease);
}
.proof li:is(:hover, :focus, :focus-visible)::before { opacity: 1; }
.proof li:is(:hover, :focus, :focus-visible) .proof-more { opacity: 1; transform: none; }
.proof li:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.proof-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--mint);
  background: rgba(var(--mint-rgb), .1);
  border: 1px solid rgba(var(--mint-rgb), .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: background .35s, border-color .35s, box-shadow .35s, transform .4s var(--ease);
}
.proof li:is(:hover, :focus, :focus-visible) .proof-icon {
  background: rgba(var(--mint-rgb), .16);
  border-color: rgba(var(--mint-rgb), .4);
  box-shadow: 0 0 0 4px rgba(var(--mint-rgb), .1);
  transform: translateZ(10px);
}
.proof-icon svg { width: 22px; height: 22px; }
.proof-icon-apps { grid-template-columns: 1fr 1fr; gap: 4px; padding: 12px; place-items: stretch; }
.proof-icon-apps i {
  width: 100%; aspect-ratio: 1; border-radius: 3px;
  background: var(--mint); opacity: .85;
  transition: transform .45s var(--ease);
}
.proof li:is(:hover, :focus, :focus-visible) .proof-icon-apps i:nth-child(1) { transform: translate(-2px, -2px); }
.proof li:is(:hover, :focus, :focus-visible) .proof-icon-apps i:nth-child(2) { transform: translate(2px, -2px); }
.proof li:is(:hover, :focus, :focus-visible) .proof-icon-apps i:nth-child(3) { transform: translate(-2px, 2px); }
.proof li:is(:hover, :focus, :focus-visible) .proof-icon-apps i:nth-child(4) { transform: translate(2px, 2px); }
.proof-icon-engine { position: relative; }
.proof-icon-engine svg { position: absolute; inset: 0; margin: auto; transition: opacity .4s, transform .45s var(--ease); }
.proof-cloud { opacity: 0; transform: translateY(5px) scale(.9); }
.proof li:is(:hover, :focus, :focus-visible) .proof-gpu { opacity: 0; transform: translateY(-5px) scale(.9); }
.proof li:is(:hover, :focus, :focus-visible) .proof-cloud { opacity: 1; transform: none; }
.proof-glyphs {
  position: relative; width: 22px; height: 22px;
  font: 700 15px/22px var(--font-display); color: var(--mint);
}
.proof-glyphs span { position: absolute; inset: 0; text-align: center; opacity: 0; }
.proof-glyphs span:first-child { opacity: 1; }
.proof li:is(:hover, :focus, :focus-visible) .proof-glyphs span { animation: proof-glyph 2.4s var(--ease) infinite; }
.proof li:is(:hover, :focus, :focus-visible) .proof-glyphs span:nth-child(2) { animation-delay: .8s; }
.proof li:is(:hover, :focus, :focus-visible) .proof-glyphs span:nth-child(3) { animation-delay: 1.6s; }
@keyframes proof-glyph {
  0%, 28%, 100% { opacity: 0; transform: translateY(4px); }
  8%, 22% { opacity: 1; transform: none; }
}
@media (hover: none) {
  .proof-more { opacity: .85; transform: none; }
}

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { padding: 26px 26px 0; min-height: 300px; display: flex; flex-direction: column; }
.step-num { font: 600 13px/1 var(--font-mono); color: var(--mint); letter-spacing: .08em; margin-bottom: 18px; }
.step .h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; }
.step-art { margin-top: auto; padding-top: 26px; display: flex; align-items: flex-end; justify-content: center; min-height: 120px; }
.step-art .demo-bar { position: static; transform: none; width: 192px; margin-bottom: 26px; }
.step-art .demo-bar .demo-wave i { animation-play-state: running; height: calc(6px + var(--a) * 18px); }
.step-art .demo-bar .demo-stop { opacity: 1; }
.step-art .kbd { height: 40px; min-width: 48px; font-size: 14px; }
.step-art .win-glyph { width: 16px; height: 16px; }
.step-paste { width: 100%; margin: 0 -26px; padding: 16px 22px; background: #0f0f12; border-top: 1px solid rgba(255, 255, 255, .06); border-radius: 0 0 var(--r-lg) var(--r-lg); font: 400 14px/1.6 var(--font-text); color: var(--muted); }
.step-paste b { color: var(--text); font-weight: 500; }
.step-paste .demo-caret { height: 1em; }

/* ---------- feature split ---------- */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.split.flip .split-copy { order: 2; }
.split-copy .h2 { margin-bottom: 16px; }
.split-copy .lead { margin-bottom: 22px; }
.shot { padding: 10px; overflow: hidden; }
.shot img { width: 100%; height: auto; border-radius: calc(var(--r-lg) - 8px); border: 1px solid rgba(255, 255, 255, .06); }
.shot-fallback { aspect-ratio: 16 / 10; display: grid; place-items: center; color: var(--faint); font-size: 14px; border-radius: calc(var(--r-lg) - 8px); background: #0f0f12; }

/* Dictionary as a floating window. A slight tilt at rest that straightens
   under the cursor, so the text is always crisp when someone looks at it.
   Tilt lives on the inner card so .reveal transforms on the figure do not
   fight it. */
.shot-3d { background: none; border: 0; box-shadow: none; padding: 0; }
.shot-3d-stage {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 35%;
  padding: 8px 0 34px;
}
.shot-3d-stage::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 6px; height: 60px; z-index: -1;
  background: radial-gradient(60% 100% at 50% 100%, rgba(var(--mint-rgb), .22), transparent 70%);
  filter: blur(14px); opacity: .9;
  pointer-events: none;
}
.shot-3d-window {
  --tilt-x: 4deg;
  --tilt-y: -5deg;
  overflow: hidden; padding: 0; border-radius: 14px;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
  will-change: transform;
  background: #111216;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 30px 60px -28px rgba(0, 0, 0, .9),
    0 20px 50px -30px rgba(var(--mint-rgb), .3);
}
.shot-3d-window::before, .shot-3d-window::after { display: none; }
.shot-3d-window.is-lit {
  --tilt-x: 0deg; --tilt-y: 0deg;
  box-shadow:
    0 0 0 1px rgba(var(--mint-rgb), .22),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 40px 80px -30px rgba(0, 0, 0, .95),
    0 24px 60px -28px rgba(var(--mint-rgb), .42);
}
.shot-3d-chrome {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 14px;
  background: linear-gradient(180deg, #1c1c21, #141417);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.shot-3d-dots { display: flex; gap: 6px; }
.shot-3d-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a42; }
.shot-3d-dots i:nth-child(1) { background: #6a6a72; }
.shot-3d-dots i:nth-child(2) { background: rgba(var(--mint-rgb), .45); }
.shot-3d-dots i:nth-child(3) { background: var(--mint); box-shadow: 0 0 8px rgba(var(--mint-rgb), .35); }
.shot-3d-title {
  font: 600 11px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.shot-3d-window img {
  display: block; width: 100%; height: auto;
  border: 0; border-radius: 0;
}
.split-shot { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

/* ---------- local vs cloud ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.duo .h3 { margin: 14px 0 8px; }
.duo p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.duo-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--mint-rgb), .09); color: var(--mint); }
.duo-icon svg { width: 20px; height: 20px; }

/* ---------- pro ---------- */
.pro { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: clamp(28px, 5vw, 64px); align-items: center; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-amount { font: 600 clamp(44px, 5vw, 60px)/1 var(--font-display); letter-spacing: -.04em; }
.price-meta { color: var(--muted); font-size: 15px; }
.price-alt { margin-top: 6px; color: var(--faint); font-size: 13.5px; }
.pro-card .badge { position: absolute; top: 22px; right: 22px; }
.pro-card .h3 { margin-bottom: 14px; }
.pro-card .dots { margin: 22px 0 26px; }
.pro-card .btn { width: 100%; }
.pro-card .fine { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--faint); }
html[data-region="in"] .only-world, html[data-region="pending"] .only-world { display: none !important; }
html[data-region="world"] .only-in, html[data-region="pending"] .only-in { display: none !important; }
html:not([data-region-ready]) .only-in,
html:not([data-region-ready]) .only-world { visibility: hidden; }

/* ---------- faq ---------- */
.faq { max-width: 760px; margin-inline: auto; border-top: 1px solid rgba(255, 255, 255, .08); }
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 4px; text-align: left;
  font: 600 17px/1.35 var(--font-display); letter-spacing: -.01em; color: var(--text);
  transition: color .2s;
}
.faq-q:hover { color: var(--mint-light); }
.faq-q svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--faint); transition: transform .35s var(--ease), color .2s; }
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--mint); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 4px 22px; color: var(--muted); font-size: 15.5px; max-width: 64ch; }
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.faq a { color: var(--mint); border-bottom: 1px solid rgba(var(--mint-rgb), .35); }

/* ---------- cta band ---------- */
.cta { text-align: center; padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px); }
.cta .h2 { margin-bottom: 14px; }
.cta .lead { margin: 0 auto 28px; }
.cta .btn-row { justify-content: center; }

/* ---------- footer ---------- */
.footer { padding: 40px 0 44px; border-top: 1px solid rgba(255, 255, 255, .07); color: var(--faint); font-size: 13.5px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-links a { color: var(--muted); transition: color .2s; }
.footer-links a:hover { color: var(--text); }
.footer .brand { font-size: 15px; color: var(--text); }
.footer .brand-mark { width: 24px; height: 24px; border-radius: 6px; }

/* ---------- prose pages (privacy, terms, refunds, changelog) ---------- */
.prose { max-width: 720px; }
.prose h1 { font: 600 clamp(34px, 4.4vw, 48px)/1.08 var(--font-display); letter-spacing: -.03em; margin-bottom: 10px; }
.prose .updated { color: var(--faint); font-size: 14px; margin-bottom: 40px; }
.prose h2 { font: 600 24px/1.25 var(--font-display); letter-spacing: -.02em; margin: 44px 0 12px; }
.prose h3 { font: 600 18px/1.3 var(--font-display); margin: 28px 0 8px; }
.prose p, .prose li { color: var(--muted); font-size: 16px; line-height: 1.65; }
.prose p + p { margin-top: 14px; }
.prose ul { display: grid; gap: 8px; margin: 12px 0; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); opacity: .9; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--mint); border-bottom: 1px solid rgba(var(--mint-rgb), .35); }
.prose code { font: 500 .92em var(--font-mono); color: var(--text); background: rgba(255, 255, 255, .06); padding: 2px 6px; border-radius: 5px; }
.prose hr { margin: 36px 0; }

/* ---------- misc ---------- */
.kicker { color: var(--mint); font-weight: 600; }
.note { padding: 16px 18px; border-radius: var(--r); background: rgba(var(--mint-rgb), .06); border: 1px solid rgba(var(--mint-rgb), .18); color: var(--muted); font-size: 14.5px; }
.note b { color: var(--text); }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip .split-copy { order: 0; }
  .pro { grid-template-columns: 1fr; }
  .pro-card { max-width: 520px; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: grid; }
  .proof { grid-template-columns: 1fr; }
  .proof li { transform: none; }
  .shot-3d-stage { padding: 4px 0 18px; overflow: hidden; }
  .shot-3d-window { --tilt-x: 3deg; --tilt-y: -3deg; }
  .duo, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .demo-body { min-height: 300px; padding: 22px 20px 96px; }
  .demo-text { font-size: 16px; }
  .btn-row .btn-primary { width: 100%; }
  .hero .lead { max-width: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .demo-hint { left: 50%; bottom: 88px; transform: translateX(-50%); }
  .h1 { font-size: 40px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, [data-stagger] > * { opacity: 1; transform: none; filter: none; transition: none; }
  .bg-glow { animation: none; }
  .demo-wave i, .demo-caret { animation: none !important; }
  .btn, .card, .kbd, .proof li, .proof-icon { transition: none; }
  .btn-primary:hover::after, .btn-gold:hover::after { animation: none; }
  .proof li { transform: none; }
  .proof li:is(:hover, :focus-visible) .proof-icon { transform: none; }
  .proof-icon-apps i, .proof-gpu, .proof-cloud, .proof-glyphs span { animation: none !important; transition: none; }
  .proof-cloud { opacity: 0; transform: none; }
  .proof-gpu { opacity: 1; transform: none; }
  .proof li:is(:hover, :focus-visible) .proof-gpu { opacity: 1; }
  .proof li:is(:hover, :focus-visible) .proof-cloud { opacity: 0; }
  .proof-more { opacity: .85; transform: none; }
  .demo-roster-track, .demo-lang { animation: none; }
  .shot-3d-window { --tilt-x: 0deg; --tilt-y: 0deg; transform: none; transition: none; }
}

/* ---------- pricing page ----------
   Two plan cards that end on the same line no matter how long the
   feature list is, plus the payments line under them. .page-head is
   shared with the download page. */
.page-head { max-width: 760px; }
.page-head.center { margin-inline: auto; }
.page-head .h1 { margin-bottom: 20px; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: clamp(36px, 5vw, 56px) auto 0; }
.plan { position: relative; display: flex; flex-direction: column; }
.plan > .badge { position: absolute; top: 22px; right: 22px; }
.plan .h3 { padding-right: 62px; }
.plan-sub { margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.plan .price { margin-top: 22px; }
.plan .dots { margin: 26px 0 0; }
.plan-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .07); color: var(--muted); font-size: 14px; line-height: 1.55; }
.plan-foot { margin-top: auto; padding-top: 26px; }
.plan-foot .btn { width: 100%; }
.plan .fine { margin-top: 12px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--faint); }

.pay-line { display: flex; align-items: flex-start; gap: 12px; max-width: 720px; margin: clamp(26px, 3vw, 34px) auto 0; color: var(--faint); font-size: 13.5px; line-height: 1.65; }
.pay-line svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 3px; color: var(--muted); }
.pay-line strong { color: var(--muted); font-weight: 600; }

@media (max-width: 768px) {
  .plans { grid-template-columns: 1fr; max-width: 520px; }
}

/* ---------- download page ----------
   The release meta line, a CSS recreation of the SmartScreen screen
   (no images), and the first-run list. */
.dl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 24px 0 28px; color: var(--muted); font-size: 14px; }
.dl-meta > span + span::before { content: "·"; margin-right: 12px; color: var(--faint); }
.dl-note { margin-top: 16px; color: var(--faint); font-size: 13.5px; }
.dl-note-block { margin-top: clamp(20px, 3vw, 28px); max-width: 820px; }
.dl-note-block p { color: inherit; }
.dl-fine { margin-top: 32px; max-width: 760px; color: var(--faint); font-size: 13.5px; line-height: 1.7; }
.dl-fine a { color: var(--mint); border-bottom: 1px solid rgba(var(--mint-rgb), .35); }
.dl-fine code { font: 500 .92em var(--font-mono); color: var(--muted); background: rgba(255, 255, 255, .05); padding: 2px 6px; border-radius: 5px; }
.dl-file {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  padding: 10px 14px; border-radius: 10px;
  background: #0f0f12; border: 1px solid rgba(255, 255, 255, .08);
  color: var(--muted); font: 500 13px/1.2 var(--font-mono); word-break: break-all;
}
.dl-file svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--mint); }

.ss-steps .step { padding-bottom: 26px; }
.ss {
  width: 100%; max-width: 320px; border-radius: 8px; overflow: hidden;
  color: #fff; background: #0a6cbe;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .95);
}
.ss-top { display: flex; gap: 12px; padding: 16px 16px 14px; }
.ss-shield { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; color: rgba(255, 255, 255, .92); }
.ss-copy { min-width: 0; }
.ss-title { font: 600 15px/1.25 var(--font-display); letter-spacing: -.01em; }
.ss-text { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.ss-meta { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .92); word-break: break-word; }
.ss-meta span { color: rgba(255, 255, 255, .64); }
.ss-link { display: inline-block; margin-top: 12px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.ss-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0 16px 16px; }
.ss-btn { display: inline-grid; place-items: center; height: 28px; padding: 0 14px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .1); font-size: 11.5px; }

.after { display: grid; max-width: 780px; }
.after li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .075); }
.after li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .075); }
.after-n { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--mint-rgb), .1); border: 1px solid rgba(var(--mint-rgb), .28); color: var(--mint); font: 600 13px/1 var(--font-mono); }
.after .h3 { margin-bottom: 8px; }
.after p { max-width: 62ch; color: var(--muted); font-size: 15px; }
.after-kbd { margin-top: 16px; }

@media (max-width: 768px) {
  .page-head .btn-lg { flex-wrap: wrap; white-space: normal; height: auto; min-height: 52px; padding: 13px 22px; line-height: 1.35; text-align: center; }
  .after li { gap: 14px; padding: 20px 0; }
}

/* ---------- download page: the first-run walkthrough ----------
   One card: the four steps down the left, a small "desktop" on the right
   where a cursor plays the sequence (installer file, the blue warning,
   More info, Run anyway, Voxden installing). The dialog's own controls
   work, each step can be jumped to, and the whole thing replays. */
.ssd { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; }
.ssd-steps { display: grid; align-content: start; padding: clamp(18px, 2.4vw, 28px); gap: 4px; }
.ssd-step button {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: baseline;
  width: 100%; padding: 14px 14px; border-radius: 12px; text-align: left;
  border: 1px solid transparent; transition: background .25s, border-color .25s, opacity .25s;
  opacity: .55;
}
.ssd-step button .step-num { grid-row: 1 / span 2; margin: 0; padding-top: 3px; }
.ssd-step button b { font: 600 16px/1.3 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.ssd-step button > span:last-child { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ssd-step button > span:last-child strong { color: var(--text); font-weight: 600; }
.ssd-step button:hover { opacity: .85; background: rgba(255, 255, 255, .03); }
.ssd[data-step="1"] .ssd-step[data-go="1"] button, .ssd[data-step="2"] .ssd-step[data-go="2"] button,
.ssd[data-step="3"] .ssd-step[data-go="3"] button, .ssd[data-step="4"] .ssd-step[data-go="4"] button {
  opacity: 1; background: rgba(var(--mint-rgb), .06); border-color: rgba(var(--mint-rgb), .22);
}
.ssd-stage {
  position: relative; min-height: 400px; overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, .06);
  background:
    radial-gradient(600px 300px at 70% 0%, rgba(var(--mint-rgb), .07), transparent 60%),
    linear-gradient(180deg, #101216, #0b0d11);
}
.ssd-desk { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px); background-size: 22px 22px; opacity: .6; }
.ssd-file {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px;
  background: #15171c; border: 1px solid rgba(255, 255, 255, .1); color: var(--text); font: 500 13px/1.2 var(--font-mono);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.ssd-file svg { width: 20px; height: 20px; color: var(--mint); }
.ssd-win {
  position: absolute; left: 50%; top: 50%; max-width: 340px; transform: translate(-50%, -50%) scale(.94); opacity: 0;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.ssd-win .ss-link, .ssd-win .ss-btn { font: inherit; font-size: 12px; color: #fff; cursor: pointer; }
.ssd-win .ss-btn { font-size: 11.5px; }
.ssd-win .ss-link { background: none; border: 0; padding: 0; }
.ssd-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.ssd-more > * { overflow: hidden; }
.ssd-run { display: none; }
.ssd-install {
  position: absolute; left: 50%; top: 50%; width: min(300px, 82%); transform: translate(-50%, -50%) scale(.94); opacity: 0;
  padding: 22px 22px 20px; border-radius: 16px; text-align: center;
  background: #15171c; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(var(--mint-rgb), .06);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.ssd-install img { width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 11px; }
.ssd-install-title { font: 600 15px/1.3 var(--font-display); }
.ssd-install-sub { display: none; margin-top: 6px; color: var(--muted); font-size: 13px; }
.ssd-install-sub .kbd { height: 22px; min-width: 26px; font-size: 11px; }
.ssd-install-sub .win-glyph { width: 11px; height: 11px; }
.ssd-bar { height: 4px; margin-top: 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ssd-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mint-strong), var(--mint-light)); transition: width 1.6s var(--ease-io); }

/* phases */
.ssd[data-phase="warn"] .ssd-file, .ssd[data-phase="more"] .ssd-file, .ssd[data-phase="install"] .ssd-file, .ssd[data-phase="done"] .ssd-file { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.ssd[data-phase="warn"] .ssd-win, .ssd[data-phase="more"] .ssd-win { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ssd[data-phase="more"] .ssd-more { grid-template-rows: 1fr; }
.ssd[data-phase="more"] .ssd-moreinfo { display: none; }
.ssd[data-phase="more"] .ssd-run { display: inline-grid; }
.ssd[data-phase="install"] .ssd-install, .ssd[data-phase="done"] .ssd-install { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ssd[data-phase="install"] .ssd-bar i { width: 100%; }
.ssd[data-phase="done"] .ssd-bar { display: none; }
.ssd[data-phase="done"] .ssd-install-title { display: none; }
.ssd[data-phase="done"] .ssd-install-sub { display: block; }

/* the cursor and its click ripple */
.ssd-cursor {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 3; pointer-events: none;
  transform: translate(60%, 80%); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
  transition: transform .7s var(--ease), opacity .3s;
}
.ssd-click {
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 2; pointer-events: none;
  border-radius: 50%; border: 2px solid var(--mint); opacity: 0; transform: translate(-50%, -50%) scale(.4);
}
.ssd-click.is-on { animation: ssd-click .5s var(--ease) forwards; }
@keyframes ssd-click { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
.ssd-stage.is-live .ssd-cursor { opacity: 0; }

@media (max-width: 900px) {
  .ssd { grid-template-columns: 1fr; }
  .ssd-stage { min-height: 360px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
  .ssd-steps { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .ssd-cursor { display: none; }
  .ssd-file, .ssd-win, .ssd-install, .ssd-more, .ssd-bar i { transition: none; }
}

/* ---------- everywhere you type: one row of apps, drifting right to left ----------
   Brand marks are the official monochrome paths from the Simple Icons set;
   apps whose owners withhold their mark are left out rather than imitated.
   Chips lift and take their brand colour under the cursor. */
.apps { position: relative; overflow: hidden; padding: 6px 0 10px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.apps-belt { display: flex; width: max-content; animation: apps-drift 70s linear infinite; will-change: transform; }
.apps-track { display: flex; gap: 12px; padding-right: 12px; }
.apps:hover .apps-belt { animation-play-state: paused; }
@keyframes apps-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.app {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025);
  color: var(--muted); font-size: 14.5px; white-space: nowrap; cursor: default;
  transition: transform .3s var(--ease), color .25s, border-color .25s, background .25s, box-shadow .3s var(--ease);
}
.app svg { width: 18px; height: 18px; fill: currentColor; opacity: .85; transition: color .25s, opacity .25s; }
.app:hover {
  transform: translateY(-4px) scale(1.05); color: var(--text);
  border-color: color-mix(in oklab, var(--brand, var(--mint)) 55%, transparent);
  background: color-mix(in oklab, var(--brand, var(--mint)) 10%, transparent);
  box-shadow: 0 14px 28px -16px color-mix(in oklab, var(--brand, var(--mint)) 70%, transparent);
}
.app:hover svg { color: var(--brand, var(--mint)); opacity: 1; }
@media (max-width: 768px) { .app { height: 40px; font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) {
  .apps-belt { animation: none; width: auto; }
  .apps-track { flex-wrap: wrap; }
  .apps-track + .apps-track { display: none; }
  .apps { -webkit-mask: none; mask: none; }
}



/* ---------- footer: where to find Sounak ---------- */
.footer-social { display: flex; gap: 6px; }
.footer-social a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  color: var(--muted); border: 1px solid transparent;
  transition: color .2s, border-color .2s, background .2s, transform .3s var(--ease);
}
.footer-social a svg { width: 17px; height: 17px; fill: currentColor; }
.footer-social a:hover { color: var(--text); border-color: rgba(var(--mint-rgb), .35); background: rgba(var(--mint-rgb), .06); transform: translateY(-2px); }
@media (max-width: 768px) { .footer-social { order: 3; } }

/* ---------- the orb in the demo bars: the flow bar's own material ----------
   Halo, particles and processing echoes are lifted from src/flow-styles.css;
   the per-frame variables come from orb-demo.js. */
.demo-bar-logo { position: relative; flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; overflow: visible; }
.demo-orb-wrap {
  position: relative; width: 40px; height: 40px;
  transform: translate3d(var(--orb-x, 0px), var(--orb-y, 0px), 0) scale(var(--orb-scale, .8));
  will-change: transform;
}
.demo-orb-wrap::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: radial-gradient(ellipse closest-side at 38% 34%, rgba(167, 245, 200, .42) 5%, rgba(117, 224, 165, .17) 45%, rgba(87, 194, 138, 0) 100%),
    radial-gradient(circle closest-side, rgba(117, 224, 165, .22) 18%, rgba(97, 204, 147, .12) 55%, rgba(87, 194, 138, .03) 80%, rgba(87, 194, 138, 0) 100%);
  opacity: var(--orb-halo-opacity, .18);
  transform: translate3d(var(--orb-halo-x, 0px), var(--orb-halo-y, 0px), 0) rotate(var(--orb-halo-turn, 0deg)) scale(var(--orb-halo-scale, 1));
}
.demo-orb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; }
.orb-processing-echoes { position: absolute; inset: 0; width: 40px; height: 40px; overflow: visible; pointer-events: none; transform: rotate(var(--orb-processing-turn, 0deg)); z-index: 2; }
.orb-processing-echoes g { transform-box: view-box; transform-origin: center; }
.orb-processing-echoes path { fill: none; stroke-width: .65; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.orb-echo-a { opacity: var(--orb-echo-a-opacity, 0); transform: scale(var(--orb-echo-a-scale, .78)); stroke: #8dffd7; filter: drop-shadow(0 0 1.3px rgba(82, 243, 190, .55)); }
.orb-echo-b { opacity: var(--orb-echo-b-opacity, 0); transform: scale(var(--orb-echo-b-scale, .78)); stroke: #8ce3ff; filter: drop-shadow(0 0 1.3px rgba(80, 201, 247, .5)); }
.orb-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.demo-bar > .demo-bar-logo, .demo-bar > .demo-wave, .demo-bar > .demo-stop { position: relative; z-index: 1; }
.orb-particle {
  position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #eafbef 8%, #b1e5bf 40%, rgba(144, 216, 160, .15) 76%, transparent);
  box-shadow: 0 0 3px rgba(149, 229, 173, .38);
  opacity: 0; transform: translate(-50%, -50%) scale(.6);
}
.demo-bar[data-state="thinking"] .orb-particle {
  background: radial-gradient(circle at 32% 26%, #e3faf0 5%, #96c8b7 27%, #1d3b31 56%, rgba(128, 185, 163, .4) 78%, transparent 100%);
  box-shadow: 0 0 2px rgba(170, 225, 203, .3);
}

/* ---------- hero, centred, over the sound field ----------
   The copy sits centred above a full-width demo. Behind both, a canvas
   ribbon (site-motion.js) folds with the demo's voice; a still SVG stands
   in when the canvas is off. The page glow and grain stay underneath. */
.hero { position: relative; isolation: isolate; padding-bottom: clamp(40px, 5vw, 72px); }
.hero-stack { position: relative; z-index: 1; display: grid; gap: clamp(40px, 5vw, 60px); }
.hero-copy-center { text-align: center; max-width: 780px; margin-inline: auto; }
.hero-copy-center .eyebrow { justify-content: center; }
.hero-copy-center .lead { margin-inline: auto; }
.hero-copy-center .btn-row { justify-content: center; }
.hero-copy-center .hero-kbd { justify-content: center; }
.hero-stack .demo { width: min(100%, 940px); margin-inline: auto; }
.soundwave { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.soundwave::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(89, 122, 105, .1), transparent 70%); }
.soundwave-form { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.soundwave-form[data-ambient] { animation: soundwave-breathe 14s ease-in-out infinite alternate; }
@keyframes soundwave-breathe { from { transform: translate3d(-1%, 0, 0) scale(1.02); } to { transform: translate3d(1%, 0, 0) scale(1.05); } }

/* ---------- closing ---------- */
.closing-section { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(72px, 9vw, 130px); }
.closing-section > .wrap { position: relative; z-index: 1; }
.closing-section > .soundwave { inset: -12% 0; }
.closing-section .cta { border-color: rgba(255, 255, 255, .1); }

/* ---------- page intros on the inner pages ---------- */
.page-intro { position: relative; isolation: isolate; }

@media (max-width: 768px) {
  .hero-stack { gap: 30px; }
  .hero-copy-center .btn-row .btn-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .soundwave-form[data-ambient] { animation: none; } }

/* Feature showcase, enhanced: chapters stack in the left column, the shared
   preview stage sits in the right one and stays put while they scroll. */
@media (min-width: 981px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .feature-showcase.is-scroll-driven .feature-chapter { grid-column: 1; }
  .feature-showcase.is-scroll-driven .feature-stage { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
}
/* The field begins beneath the hero copy, so the buttons and keycaps sit on
   clean ground and the ribbon folds behind the demo instead. */
section.hero > .soundwave { top: 400px; }
@media (max-width: 768px) { section.hero > .soundwave { top: 460px; } }

/* The hero demo sits on the sound field: no heavy drop shadow, which read
   as a dark slab where it fell on the lit wing of the ribbon. */
.hero-stack .demo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 0 1px rgba(0, 0, 0, .35); }
.hero-stack .demo.card-hover:hover { transform: none; }