/* ============================================================
   ПОТОК · Лендинг «Сливки» — светлая редакторская айдентика
   cream paper · forest green · terracotta · Playfair + Manrope
   ============================================================ */
:root{
  --bg:#F6F2E9; --bg-2:#EFE9DA; --bg-3:#E9E1CE;
  --surface:#FFFFFF; --surface-2:#FBF8F0;
  --ink:#221E17; --ink-2:#6B6557; --ink-3:#978F7C;
  --border:#E6DFCD; --border-2:#DBD2BD;
  --forest:#2C5C49; --forest-hover:#23493A; --forest-deep:#16261F; --forest-2:#1B2A24;
  --terra:#BE5A33; --terra-soft:#F3E2D6;
  --mint:#BFE6D7; --mint-soft:#E7EEE7; --on-forest:#F2EFE6; --on-forest-2:#A8C3B6;
  --gold:#C99A3F;
  --ease:cubic-bezier(.22,.7,.25,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1200px;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sh-1:0 1px 2px rgba(40,30,15,.05),0 10px 28px rgba(40,30,15,.06);
  --sh-2:0 4px 10px rgba(40,30,15,.07),0 24px 60px rgba(40,30,15,.11);
  --sh-3:0 12px 30px rgba(40,30,15,.12),0 40px 90px rgba(40,30,15,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:450;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
/* paper grain lives on the body background above — never overlays content */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.05}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:1}
.alt{color:var(--terra)}
.alt-i{color:var(--forest);font-style:italic}
em{font-style:italic}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;white-space:nowrap;
  font-family:var(--sans);font-weight:600;font-size:16px;line-height:1;
  padding:15px 28px;border-radius:999px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--forest);color:var(--on-forest)}
.btn-primary:hover{background:var(--forest-hover);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--border-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--forest);transform:translateY(-2px)}
.btn-on-dark{background:var(--mint);color:var(--forest-deep)}
.btn-on-dark:hover{background:#cdeede;transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.btn-ghost-dark{background:transparent;color:var(--on-forest);box-shadow:inset 0 0 0 1.5px rgba(242,239,230,.28)}
.btn-ghost-dark:hover{box-shadow:inset 0 0 0 1.5px var(--mint);transform:translateY(-2px)}

/* ---------------- topbar ---------------- */
.topbar{background:var(--forest-deep);color:var(--on-forest);font-size:13.5px;
  display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 20px;text-align:center;
  font-family:var(--mono);letter-spacing:.01em;position:relative;z-index:60}
.topbar a{color:var(--mint);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.topbar .arr{transition:transform .2s}
.topbar a:hover .arr{transform:translateX(4px)}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:50;padding:16px 0;transition:padding .3s var(--ease)}
.nav-inner{max-width:calc(var(--maxw) - 16px);margin:0 auto;padding:10px 12px 10px 22px;
  display:flex;align-items:center;gap:24px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,var(--sh-1);transition:box-shadow .3s,background .3s}
.nav.scrolled{padding:8px 0}
.nav.scrolled .nav-inner{background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:var(--sh-2)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:23px;letter-spacing:-.01em}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--terra);margin-left:-3px;margin-top:10px}
.brand svg{flex:none}
.nav-links{display:flex;gap:2px;margin-left:6px}
.nav-links a{padding:9px 14px;border-radius:999px;font-size:15px;color:var(--ink-2);font-weight:550;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:var(--bg-2)}
.nav-spacer{flex:1}
.nav-sign{font-size:15px;font-weight:600;color:var(--ink-2);padding:9px 8px}
.nav-sign:hover{color:var(--ink)}
.nav-cta{padding:12px 22px;font-size:15px}
.nav-burger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:8px}

/* ---------------- hero ---------------- */
.hero{position:relative;padding:54px 0 30px;overflow:clip}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center}
.wedge{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  padding:8px 15px;border-radius:999px;background:var(--mint-soft);color:var(--forest);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--forest) 16%,transparent);margin-bottom:26px;
  font-family:var(--mono);letter-spacing:.02em}
.wedge .lt{width:6px;height:6px;border-radius:50%;background:var(--forest);animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hero h1{font-size:clamp(42px,5.6vw,74px);line-height:1.02;margin-bottom:26px;letter-spacing:-.02em}
.hero-sub{font-size:clamp(18px,1.5vw,21px);color:var(--ink-2);max-width:520px;margin-bottom:34px;line-height:1.5}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}
.platforms{display:flex;gap:16px;align-items:center;color:var(--ink-3);font-size:13px;font-family:var(--mono);flex-wrap:wrap}
.platforms .pl{display:inline-flex;align-items:center;gap:7px}
.platforms .pl svg{width:15px;height:15px;opacity:.7}
.platforms .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3);opacity:.5}

/* ---- hero demo panel (the product, live) ---- */
.demo{position:relative;z-index:2}
.demo-card{background:var(--forest-2);border-radius:24px;padding:22px;box-shadow:var(--sh-3);
  position:relative;overflow:hidden}
.demo-card::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.04)}
.demo-target{display:flex;align-items:center;gap:10px;color:var(--on-forest-2);font-size:13px;
  font-family:var(--mono);margin-bottom:16px;letter-spacing:.01em}
.demo-target .tdot{width:9px;height:9px;border-radius:50%;background:#3FA07B}
.demo-target b{color:var(--on-forest);font-weight:600;font-family:var(--sans)}
.demo-screen{background:rgba(0,0,0,.18);border-radius:14px;padding:20px 20px 22px;min-height:172px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.demo-text{font-size:19px;line-height:1.55;color:var(--on-forest);font-family:var(--sans);min-height:88px}
.demo-text .fill{color:#C97C63;position:relative;transition:opacity .4s}
.demo-text .fill.strike{text-decoration:line-through;text-decoration-color:#C97C63;opacity:.5}
.demo-text .ins{color:var(--mint)}
.demo-text .hard{color:var(--mint);font-weight:600}
.demo-text .caret{display:inline-block;width:2px;height:1.05em;background:var(--mint);vertical-align:-3px;
  margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.demo-pill{display:flex;align-items:center;gap:14px;margin-top:18px;background:rgba(0,0,0,.22);
  border-radius:999px;padding:11px 18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.demo-pill .mic{width:34px;height:34px;border-radius:50%;background:var(--terra);flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;transition:background .3s}
.demo-pill.done .mic{background:var(--forest)}
.demo-pill .mic svg{width:17px;height:17px}
.wave{display:flex;align-items:center;gap:3px;height:30px;flex:1}
.wave i{width:3px;border-radius:2px;background:var(--mint);height:8px;transition:height .12s linear}
.demo-pill .status{font-family:var(--mono);font-size:12px;color:var(--on-forest-2);white-space:nowrap}
.demo-keys{font-family:var(--mono);font-size:11px;color:var(--on-forest-2);display:flex;gap:5px;align-items:center}
.kbd{background:rgba(255,255,255,.1);border-radius:5px;padding:3px 7px;font-size:11px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.3);color:var(--on-forest)}
/* orbiting app glyphs around the demo */
.demo-orbit{position:absolute;inset:-30px;pointer-events:none;z-index:1}
.orb{position:absolute;width:48px;height:48px;border-radius:14px;background:var(--surface);
  box-shadow:var(--sh-2);display:flex;align-items:center;justify-content:center;color:var(--forest);
  animation:float 6s var(--ease) infinite}
.orb svg{width:22px;height:22px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* ---------------- marquee ---------------- */
.marquee{overflow:hidden;background:var(--forest-2);color:var(--on-forest);
  transform:rotate(-1.6deg) scale(1.04);margin:36px 0 0;position:relative;z-index:1}
.marquee-track{display:flex;width:max-content;animation:marq 32s linear infinite;padding:15px 0}
.marquee-track span{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--on-forest);
  display:inline-flex;align-items:center;gap:34px;padding-left:34px}
.marquee-track span::after{content:"✶";color:var(--mint);font-style:normal;font-size:15px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------------- section scaffold ---------------- */
section{padding:96px 0;position:relative}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra);margin-bottom:18px;font-weight:600;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--terra);display:inline-block}
.center-head{text-align:center;max-width:720px;margin:0 auto 60px}
.center-head .eyebrow{justify-content:center}
.sec-title{font-size:clamp(32px,4.2vw,54px);line-height:1.06;letter-spacing:-.02em;margin-bottom:20px}
.sec-lead{font-size:19px;color:var(--ink-2);max-width:600px;line-height:1.5}
.center-head .sec-lead{margin:0 auto}

/* ---------------- app showcase ---------------- */
.show{background:var(--bg-2);overflow:clip}
.show-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:center}
.show-points{display:flex;flex-direction:column;gap:24px;margin-top:32px}
.show-pt{display:flex;gap:16px;align-items:flex-start}
.show-pt .pn{font-family:var(--mono);font-size:13px;color:var(--terra);font-weight:600;flex:none;
  width:30px;height:30px;border-radius:50%;background:var(--terra-soft);display:flex;align-items:center;justify-content:center;margin-top:2px}
.show-pt h4{font-family:var(--sans);font-weight:700;font-size:17px;margin-bottom:3px}
.show-pt p{font-size:15px;color:var(--ink-2);line-height:1.45}
/* the app mock */
.appwin{background:var(--surface);border-radius:20px;box-shadow:var(--sh-3);overflow:hidden;
  display:grid;grid-template-columns:200px 1fr;min-height:430px;position:relative}
.appwin .side{background:var(--surface-2);border-right:1px solid var(--border);padding:18px 14px;display:flex;flex-direction:column;gap:6px}
.aw-brand{font-family:var(--serif);font-weight:700;font-size:19px;display:flex;align-items:center;gap:2px;margin:4px 6px 14px}
.aw-brand .dot{width:5px;height:5px;border-radius:50%;background:var(--terra);margin-top:8px}
.aw-plan{font-size:11.5px;color:var(--ink-2);background:var(--bg-2);border-radius:999px;padding:6px 11px;margin:0 4px 12px;
  display:flex;align-items:center;gap:7px;font-weight:550}
.aw-plan .pd{width:6px;height:6px;border-radius:50%;background:var(--forest)}
.aw-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;font-size:14px;color:var(--ink-2);font-weight:550}
.aw-nav.on{background:var(--bg-2);color:var(--ink);font-weight:650}
.aw-nav svg{width:17px;height:17px;opacity:.8}
.appwin .main{padding:34px 34px 0;position:relative;overflow:hidden}
.aw-hi{font-family:var(--serif);font-size:38px;line-height:1.05;margin-bottom:24px}
.aw-hi em{color:var(--forest)}
.aw-cta{background:var(--forest-2);border-radius:16px;padding:24px 26px;color:var(--on-forest);position:relative;overflow:hidden}
.aw-cta h5{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--on-forest);margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aw-cta p{font-size:13.5px;color:var(--on-forest-2);max-width:330px;line-height:1.45}
.aw-cta .wave{margin-top:16px;width:100%;height:42px;opacity:.85;align-items:flex-end}
.aw-float{position:absolute;left:34px;bottom:-22px;background:var(--surface);border-radius:999px;
  box-shadow:var(--sh-2);padding:11px 18px;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--ink-2);font-family:var(--mono)}
.aw-float .mic{width:30px;height:30px;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center}
.aw-float .mic svg{width:15px;height:15px}

/* ---------------- features bento ---------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(196px,auto);gap:18px}
.cell{position:relative;border-radius:22px;padding:30px;overflow:hidden;display:flex;flex-direction:column;
  background:var(--surface);box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cell:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.cell h3{font-size:24px;margin-bottom:9px;letter-spacing:-.01em}
.cell p{font-size:15px;color:var(--ink-2);line-height:1.5}
.cell .ic{width:42px;height:42px;border-radius:12px;background:var(--mint-soft);color:var(--forest);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cell .ic svg{width:21px;height:21px}
.cell.dark{background:var(--forest-2);color:var(--on-forest)}
.cell.dark h3{color:var(--on-forest)}
.cell.dark p{color:var(--on-forest-2)}
.cell.dark .ic{background:rgba(191,230,215,.14);color:var(--mint)}
.cell.tint{background:var(--terra-soft)}
.cell.tint .ic{background:#eccdb9;color:var(--terra)}
/* spans */
.c-ai{grid-column:span 4;grid-row:span 2}
.c-dict{grid-column:span 2;grid-row:span 2}
.c-snip{grid-column:span 2}
.c-lang{grid-column:span 2}
.c-data{grid-column:span 2}
.c-key{grid-column:span 4}
/* AI before/after mini demo */
.ba{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:22px}
.ba-row{background:rgba(0,0,0,.2);border-radius:12px;padding:13px 16px;font-size:14.5px;line-height:1.5;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.ba-row .tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:6px}
.ba-raw .tag{color:#C97C63}
.ba-clean .tag{color:var(--mint)}
.ba-raw s{color:#C97C63;opacity:.7}
.ba-clean{color:var(--on-forest)}
/* dictionary chips */
.chips{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:20px}
.chip{font-size:13px;font-family:var(--mono);background:var(--bg-2);color:var(--ink-2);
  padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--border)}
.chip.hot{background:var(--mint-soft);color:var(--forest);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--forest) 20%,transparent)}
/* lang switch */
.langsw{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.langsw .seg{display:flex;background:var(--bg-2);border-radius:999px;padding:4px;box-shadow:inset 0 0 0 1px var(--border)}
.langsw .seg b{padding:6px 13px;border-radius:999px;font-weight:600;font-size:12px}
.langsw .seg b.on{background:var(--forest);color:var(--on-forest)}
/* keycaps */
.keycaps{margin-left:auto;display:flex;align-items:center;gap:8px}
.keycap{font-family:var(--mono);font-size:14px;font-weight:600;background:var(--surface-2);
  box-shadow:inset 0 -2px 0 var(--border-2),0 1px 2px rgba(0,0,0,.06);border-radius:9px;padding:11px 15px;color:var(--ink)}
.keycap.tap{animation:tap 2.4s var(--ease) infinite}
@keyframes tap{0%,84%,100%{transform:translateY(0);box-shadow:inset 0 -2px 0 var(--border-2),0 1px 2px rgba(0,0,0,.06)}88%{transform:translateY(2px);box-shadow:inset 0 0 0 var(--border-2)}}
.kplus{color:var(--ink-3)}
/* data shield motif */
.shield{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:12px}
/* latency vs analogs (dark big cell) */
.lat{margin-top:auto;display:flex;flex-direction:column;gap:13px;padding-top:24px}
.lat-row{display:flex;align-items:center;gap:13px;font-size:13px}
.lat-row .ll{width:138px;flex:none;color:var(--on-forest-2)}
.lat-track{flex:1;height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.lat-track i{display:block;height:100%;width:0;border-radius:999px;transition:width 1.3s var(--ease-out)}
.lat-track i.us{background:linear-gradient(90deg,var(--mint),#8fd6bb)}
.lat-track i.them{background:rgba(255,255,255,.22)}
.lat-row .lv{font-family:var(--mono);font-size:12px;color:var(--on-forest);width:48px;text-align:right;flex:none}
.lat-badge{margin-top:18px;align-self:flex-start;font-family:var(--mono);font-size:12.5px;font-weight:600;
  color:var(--forest-deep);background:var(--mint);padding:9px 15px;border-radius:999px}
.lat-note{margin-top:11px;font-size:11.5px;color:var(--on-forest-2);opacity:.8}
/* dark-cell chips (universal-input) */
.cell.dark .chip{background:rgba(255,255,255,.08);color:var(--on-forest);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.appchips{margin-top:auto}
.keycap-note{font-family:var(--mono);font-size:11px;color:var(--ink-3);align-self:center;margin-left:2px}
/* light latency comparison (in speed section) */
.latcmp{max-width:680px;margin:30px auto 0;background:var(--surface);border-radius:20px;padding:28px 30px;box-shadow:var(--sh-1)}
.latcmp-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.latcmp-head b{font-family:var(--sans);font-weight:700;font-size:16px}
.latcmp-badge{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--forest);background:var(--mint-soft);
  padding:7px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--forest) 18%,transparent)}
.lc-row{display:flex;align-items:center;gap:13px;font-size:14px;margin-bottom:12px}
.lc-row .lc-l{width:170px;flex:none;color:var(--ink-2)}
.lc-track{flex:1;height:12px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.lc-track i{display:block;height:100%;width:0;border-radius:999px;transition:width 1.3s var(--ease-out)}
.lc-track i.us{background:var(--forest)}
.lc-track i.them{background:color-mix(in srgb,var(--ink-3) 55%,transparent)}
.lc-row .lc-v{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);width:52px;text-align:right;flex:none}
.lc-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:12px;color:var(--ink-3);line-height:1.5}
/* languages block */
.langs-grid{max-width:840px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.langs-grid .chip{font-size:14px;padding:9px 15px}
.langs-grid .chip.more{background:var(--forest);color:var(--on-forest);box-shadow:none}
.shield .fz{font-family:var(--mono);font-size:11px;color:var(--forest);background:var(--mint-soft);
  padding:6px 11px;border-radius:999px;font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--forest) 18%,transparent)}

/* ---------------- accuracy / WER ---------------- */
.acc{background:var(--forest-2);color:var(--on-forest);overflow:clip}
.acc .eyebrow{color:var(--mint)}.acc .eyebrow::before{background:var(--mint)}
.acc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.acc h2{color:var(--on-forest)}
.acc .sec-lead{color:var(--on-forest-2)}
.bars{display:flex;flex-direction:column;gap:24px;margin-top:38px}
.bar-row .bl{display:flex;justify-content:space-between;margin-bottom:10px;font-size:15px;font-weight:600;color:var(--on-forest)}
.bar-row .bl .n{font-family:var(--mono);color:var(--on-forest-2);font-weight:500}
.bar-track{height:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bar-fill{height:100%;border-radius:999px;width:0;transition:width 1.4s var(--ease-out)}
.bar-row.us .bar-fill{background:linear-gradient(90deg,var(--mint),#8fd6bb)}
.bar-row.them .bar-fill{background:rgba(255,255,255,.22)}
.acc-card{background:rgba(0,0,0,.22);border-radius:24px;padding:40px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.acc-big{font-family:var(--serif);font-size:clamp(72px,9vw,108px);font-weight:600;line-height:.9;color:var(--mint)}
.acc-big small{font-size:.4em;color:var(--on-forest-2);font-family:var(--sans);font-weight:500;letter-spacing:0}
.acc-card .lab{font-size:15px;color:var(--on-forest-2);margin-top:14px;max-width:300px}
.wer-note{font-size:13px;color:var(--on-forest-2);margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);line-height:1.55}
.wer-note b{color:var(--on-forest)}

/* ---------------- speed (typing race) ---------------- */
.race{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.lane{border-radius:22px;padding:34px;position:relative;overflow:hidden}
.lane.kbd{background:var(--surface);box-shadow:var(--sh-1)}
.lane.voice{background:var(--forest-2);color:var(--on-forest)}
.lane .who{font-size:17px;font-weight:700;margin-bottom:22px;display:flex;align-items:center;gap:10px;font-family:var(--sans)}
.lane .who svg{width:20px;height:20px}
.lane.voice .who{color:var(--on-forest)}
.fillbar{height:10px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin-bottom:18px}
.lane.voice .fillbar{background:rgba(255,255,255,.1)}
.fillbar i{display:block;height:100%;width:0;border-radius:999px;transition:width 2.4s linear}
.lane.kbd .fillbar i{background:var(--ink-3)}
.lane.voice .fillbar i{background:linear-gradient(90deg,var(--mint),#8fd6bb)}
.speed-num{font-family:var(--serif);font-size:clamp(48px,6vw,76px);font-weight:600;line-height:1}
.lane.voice .speed-num{color:var(--mint)}
.speed-unit{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-top:6px}
.lane.voice .speed-unit{color:var(--on-forest-2)}

/* ---------------- reviews ---------------- */
.reviews{background:var(--bg-2)}
.tcols{columns:3;column-gap:20px}
.tcard{break-inside:avoid;background:var(--surface);border-radius:18px;padding:26px;margin-bottom:20px;
  box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.tcard .stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:12px}
.tcard p{font-size:16px;margin-bottom:18px;line-height:1.5;color:var(--ink)}
.tcard .who{display:flex;align-items:center;gap:12px}
.tcard .av{width:42px;height:42px;border-radius:50%;background:var(--forest);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--on-forest);font-weight:600;font-family:var(--serif)}
.tcard .av .av-i{display:block;transform:translateY(.08em);font-size:16px}
.tcard .who b{font-size:14.5px;display:block;font-family:var(--sans)}
.tcard .who span{font-size:13px;color:var(--ink-2)}

/* ---------------- pricing ---------------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.price{background:var(--surface);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;
  box-shadow:var(--sh-1);position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.price:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.price.feat-plan{background:var(--forest-2);color:var(--on-forest)}
.price.feat-plan .pname,.price.feat-plan .pcost{color:var(--on-forest)}
.price.feat-plan .ptag,.price.feat-plan li{color:var(--on-forest-2)}
.price.feat-plan .pcost small{color:var(--on-forest-2)}
.plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--terra);color:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:5px 12px;border-radius:999px;white-space:nowrap}
.price .pname{font-size:17px;font-weight:700;margin-bottom:6px;font-family:var(--sans)}
.price .ptag{font-size:13px;color:var(--ink-2);margin-bottom:20px;min-height:34px;line-height:1.4}
.price .pcost{font-family:var(--serif);font-size:42px;font-weight:600;line-height:1}
.price .pcost small{font-size:14px;color:var(--ink-2);font-family:var(--sans);font-weight:500}
.price ul{list-style:none;margin:24px 0;display:flex;flex-direction:column;gap:12px;flex:1}
.price li{font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.price li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--forest)}
.price.feat-plan li svg{color:var(--mint)}
.price .btn{width:100%;justify-content:center}

/* ---------------- final + footer ---------------- */
.final{background:var(--forest-2);color:var(--on-forest);text-align:center;overflow:clip;position:relative}
.final .ring2{position:absolute;left:50%;top:50%;width:760px;height:760px;transform:translate(-50%,-50%);
  opacity:.12;animation:spin 60s linear infinite}
.final .ring2 text{font-family:var(--mono);font-size:13px;fill:var(--mint);letter-spacing:.22em}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.final h2{font-size:clamp(38px,6vw,72px);margin-bottom:14px;color:var(--on-forest);line-height:1.02}
.final p{color:var(--on-forest-2);font-size:19px;margin-bottom:34px;max-width:480px;margin-left:auto;margin-right:auto}
.final .hero-cta{justify-content:center}
footer{background:var(--forest-deep);color:var(--on-forest);padding:72px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:52px}
.foot-brand .brand{color:var(--on-forest)}
.foot-brand p{opacity:.6;font-size:14.5px;margin-top:16px;max-width:280px;line-height:1.5}
.foot-grid h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.5;margin-bottom:18px;
  font-family:var(--mono);font-weight:600}
.foot-grid a{display:block;color:var(--on-forest);opacity:.72;font-size:14.5px;margin-bottom:11px;transition:opacity .2s}
.foot-grid a:hover{opacity:1}
.foot-bot{border-top:1px solid rgba(242,239,230,.14);padding-top:26px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-size:13px;opacity:.55;font-family:var(--mono)}

/* ---------------- flow divider ---------------- */
.flowline{width:100%;height:40px;color:var(--border-2);overflow:hidden}
.flowline svg{width:100%;height:100%}
.flowline path{stroke-dasharray:8 10;animation:dash 18s linear infinite}
@keyframes dash{to{stroke-dashoffset:-360}}

/* ---------------- reveal (visible by default; hidden only when JS enables anim) ---------------- */
.reveal{opacity:1;transform:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0)*80ms)}
html.anim .reveal:not(.in){opacity:0;transform:translateY(28px);transition:none}

/* ---------------- responsive ---------------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .demo{max-width:520px;margin:0 auto;width:100%}
  .show-grid,.acc-grid{grid-template-columns:1fr;gap:40px}
  .nav-links{display:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .c-ai,.c-key{grid-column:span 2}
  .c-dict,.c-snip,.c-lang,.c-data{grid-column:span 1}
  .c-ai{grid-row:span 1}.c-dict{grid-row:span 1}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .tcols{columns:2}
  .race{grid-template-columns:1fr}
  .appwin{grid-template-columns:1fr}.appwin .side{display:none}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  section{padding:68px 0}
  .hero{padding:32px 0 10px}
  .bento{grid-template-columns:1fr}
  .c-ai,.c-key,.c-dict,.c-snip,.c-lang,.c-data{grid-column:span 1}
  .price-grid{grid-template-columns:1fr}
  .tcols{columns:1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-cta{display:none}
  .hero-cta{width:100%}.hero-cta .btn{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  html.anim .reveal:not(.in){opacity:1;transform:none}
  html{scroll-behavior:auto}
}