/* --- FONTS ---------------------------------------------------------------
   Two self-hosted families, no CDN. Gilroy carries every Latin glyph; it has
   NO Georgian at all, so Georgian falls through to FiraGO by itself and one
   stack serves both languages.
   UPPERCASE GEORGIAN IS AN OPENTYPE FEATURE, NOT A CODEPOINT. FiraGO ships
   .case forms for all 43 Mkhedruli letters, so `font-feature-settings:"case"`
   renders true Mtavruli from ordinary Mkhedruli text. This is deliberately NOT
   the U+1C90 route: FiraGO has zero Mtavruli codepoints (verified), so baked
   Mtavruli would silently fall back to whatever Georgian face the visitor has.
   Written this way the worst case is lowercase, never tofu.
   -------------------------------------------------------------------------- */
@font-face{font-family:Gilroy;src:url(fonts/gilroy-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(fonts/gilroy-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(fonts/gilroy-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(fonts/gilroy-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(fonts/gilroy-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:FiraGO;src:url(fonts/firago-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:FiraGO;src:url(fonts/firago-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:FiraGO;src:url(fonts/firago-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:FiraGO;src:url(fonts/firago-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ============================================================================
   VOICEO — landing. ElevenLabs-grade light UI on the locked VOICEO brand.
   PALETTE LAW: the page is ink on paper. Green (#00D26A) is a LIVE signal, not
   a decoration — it appears on the live dot, the primary pill, the receipt
   mark, and nowhere else. Never green as body text (fails contrast).
   ELEVATION: hairlines only. The single exception is the floating voice widget,
   which is physically above the page and needs to read as an overlay.
   TYPE: Inter for Latin UI, Noto Sans Georgian for Georgian, Space Grotesk for
   the wordmark, numerals and unit tags only.
   MOTION: two durations, one ease. Everything animated sits inside the
   prefers-reduced-motion guard; the page is complete and usable without it.
   ========================================================================= */

:root{
  /* GROUND = neutral. Structure comes from the surface inversion further down
     (a card always sits one step off whatever it is on), not from a hue. */
  --paper:#FFFFFF;
  --paper-2:#FAFAFA;      /* alternating bands, and cards on white sections */
  --paper-3:#F1F1F2;      /* wells, console rail, receipts */
  --ink:#0A0A0B;
  --ink-2:#1C1C1F;        /* dark band ground */
  --muted:#4E4E57;        /* 8.3:1 on white, 7.2:1 on the console rail */
  --muted-2:#69696F;      /* 12px and under only — 4.7:1 on the console rail */
  --line:#E5E5E7;
  --line-strong:#D0D0D4;
  --live:#00D26A;
  --live-hover:#00BE60;
  --live-press:#00B95E;
  --live-text:#067A45;    /* green as TEXT — 5.6:1 on white, used once */
  /* SIGNAL PALETTE — the founder's five candy hexes, exactly as he set them.
     They are grounds for INK type; white type lives only on the ink pill and
     as white glass. Measured ink on each: blue 7.02, green 9.83, violet 6.05,
     orange 10.07, pink 6.94. White on each would be 2.82 / 2.01 / 3.27 / 1.97
     / 2.85 (fails AA), which is why no white glyph ever sits on the hue.
     Outside the bento only blue / orange / green recur, as non-text signals
     or as coin grounds carrying ink numerals. */
  --c-blue:#3B9DFF;
  --c-green:#00D26A;
  --c-violet:#9D90FF;   /* founder #8B7CFF lifted 8% → ink body 7.4:1 */
  --c-orange:#FFA534;
  --c-pink:#FF55DA;     /* founder #FF4FD8 lifted → ink body 7.1:1 */
  --pill-ink:#18181B;   /* the header island's ink; white on it = 17.7:1 */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;
  --t-fast:140ms;
  --t-med:220ms;
  --t-slow:420ms;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --wrap:1180px;
  --font: "Gilroy","FiraGO",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html{overflow-x:clip}          /* on the ROOT: body-level clip does not propagate */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-synthesis:none;
}
[hidden]{display:none !important}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(h1,h2,h3,h4,p,ul,ol,figure){margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:112px 0;border-top:1px solid var(--line)}
section[id],div[id]{scroll-margin-top:96px}
.section--flush{border-top:0}
.band{background:var(--paper-2)}

/* --- uppercase system ----------------------------------------------------
   One rule for every small label. `case` gives Georgian its Mtavruli, and
   text-transform gives English its caps; each language ignores the other's
   mechanism, so both are safe to declare together. Headlines take caps ONLY in
   Georgian — English headlines stay sentence case, which is the whole point of
   putting Gilroy Bold on them. */
.up,.kicker,.card__eyebrow,.lines__head,.receipt__eyebrow,.plan__name,.plan__tag,
.footer h4,.console__state,.turn__who,.step__no,.quote__tag,.vw__msg b,
.nav__cta,.nav__cta-m,.brand__name,.lang button{
  text-transform:uppercase;font-feature-settings:"case" 1;
}
html[lang="ka"] h1,html[lang="ka"] h2{font-feature-settings:"case" 1;letter-spacing:-.015em;line-height:1.06}
/* Georgian runs ~40% longer than English and `ch` is measured on the Latin zero,
   so the same ch cap that gives English two lines gives Georgian four */
html[lang="ka"] h2{max-width:26ch}

/* --- headline typography animation ---------------------------------------
   Each word rides up from behind its own baseline mask. The mask is padded and
   then negatively margined by the same amount, so the clip that creates the
   effect never eats a Georgian descender (ღ ჟ ყ ც) or a Gilroy ascender.
   The .anim class is added by JS only when motion is allowed, so with no JS
   and under prefers-reduced-motion the headings are simply present. */
.rv{display:inline-block;overflow:hidden;vertical-align:top;
    padding:.14em .04em .22em;margin:-.14em -.04em -.22em}
.rv > i{display:inline-block;font-style:inherit}

/* --- type ladder --------------------------------------------------------- */
.kicker{
  font-size:12px;letter-spacing:.16em;font-weight:600;
  color:var(--muted);display:inline-flex;align-items:center;gap:9px;
}
.kicker::before{content:"";width:5px;height:5px;border-radius:var(--r-pill);background:var(--line-strong)}
.kicker--live::before{background:var(--live)}
h1,.h1{
  font-size:clamp(2.7rem,6.6vw,5.2rem);line-height:1.0;letter-spacing:-.035em;
  font-weight:800;max-width:15ch;
}
h2,.h2{
  font-size:clamp(2.05rem,4vw,3.35rem);line-height:1.05;letter-spacing:-.03em;
  font-weight:700;max-width:19ch;margin-top:18px;
}
h3,.h3{font-size:1.28rem;line-height:1.3;letter-spacing:-.02em;font-weight:700}
.lede{font-size:19px;line-height:1.65;color:var(--muted);max-width:38em;margin-top:22px}
.sub{font-size:17px;line-height:1.65;color:var(--muted);max-width:42em;margin-top:18px}
.meta{font-size:13px;line-height:1.55;color:var(--muted)}
.num{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r-pill);font-size:15px;font-weight:700;
  padding:14px 26px 11px;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.btn--live{background:var(--live);color:#062A17}
.btn--live:hover{background:var(--live-hover)}
.btn--live:active{background:var(--live-press)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-hover)}
.btn--ghost{border:1px solid var(--line-strong);color:var(--ink);background:var(--paper)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper-3)}
.btn--sm{padding:10px 18px 7px;font-size:13.5px;letter-spacing:.04em}
.btn--lg{padding:17px 32px 14px;font-size:16px}

/* --- nav: the island -----------------------------------------------------
   One ink pill floating 14px off the top edge, the only dark object on the
   light page, so it reads as the control surface the rest of the page hangs
   from. The header strip itself is transparent and pointer-transparent — only
   the pill is a thing. Stuck or not, it looks the same: a floating object has
   no "stuck" state. */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:14px 0;pointer-events:none}
/* the island wakes up narrow and stretches to the grid once the page moves —
   one width transition, the same ease as everything else, nothing else changes */
.nav__row{
  max-width:960px;margin:0 auto;
  --nav-dur:1100ms;--nav-ease:cubic-bezier(.16,1,.3,1);
  transition:max-width var(--nav-dur) var(--nav-ease),background-color 800ms var(--nav-ease),
             border-color 800ms var(--nav-ease),color 800ms var(--nav-ease),
             backdrop-filter 800ms var(--nav-ease),-webkit-backdrop-filter 800ms var(--nav-ease);
  pointer-events:auto;position:relative;display:flex;align-items:center;gap:14px;height:58px;
  padding:0 10px 0 22px;border-radius:var(--r-pill);color:#fff;
  background:rgba(24,24,27,.96);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
}
.nav.is-stuck .nav__row{max-width:calc(var(--wrap) - 48px)}
/* at the top of the page the island has no body yet — ink type straight on the
   hero; the #18181B pill fades in and widens together on the first scroll.
   An open mobile menu forces the solid state so the card has something to hang from. */
.nav:not(.is-stuck):not(.is-open) .nav__row{
  background:rgba(24,24,27,0);border-color:rgba(255,255,255,0);color:var(--ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav:not(.is-stuck):not(.is-open) .brand__mark{color:var(--ink)}
.nav:not(.is-stuck):not(.is-open) .nav__links a{color:rgba(10,10,11,.66)}
.nav:not(.is-stuck):not(.is-open) .nav__links a:hover{color:var(--ink)}
.nav:not(.is-stuck):not(.is-open) .lang{background:rgba(10,10,11,.07)}
.nav:not(.is-stuck):not(.is-open) .nav__burger{border-color:rgba(10,10,11,.22)}
.nav:not(.is-stuck):not(.is-open) .nav__burger span{background:var(--ink)}
.nav .brand__mark,.nav__links a,.lang,.nav__burger,.nav__burger span{
  transition:background-color 800ms cubic-bezier(.16,1,.3,1),color 800ms cubic-bezier(.16,1,.3,1),border-color 800ms cubic-bezier(.16,1,.3,1);
}
.brand{display:flex;align-items:center;gap:12px;flex:none}
/* the mark = the founder's headset vector (Figma "Logo & Brand" 31:291), inline
   so it takes currentColor for the ink parts and var(--live) for the green
   bar + mic dot; white on the island, ink on paper */
.brand__mark{width:38px;height:35px;display:block;flex:none;color:var(--ink)}
.brand__mark .mark{width:100%;height:100%;display:block;overflow:visible}
.brand__mark .m-bar{transform-box:fill-box;transform-origin:center}
.brand__name{font-weight:800;font-size:17px;letter-spacing:.15em}
.nav .brand__mark{color:#fff}
.nav__links{display:flex;align-items:center;gap:28px;margin:0 auto}
.nav__links a{font-size:14.5px;color:rgba(255,255,255,.72);transition:color var(--t-fast) var(--ease)}
.nav__links a:hover{color:#fff}
.nav__right{margin-left:0;display:flex;align-items:center;gap:10px}
/* language = two flags in a darker well; the chosen one sits on ink */
.lang{display:flex;border-radius:var(--r-pill);padding:3px;background:#33333A;gap:2px}
.lang button{
  display:grid;place-items:center;padding:5px 9px;border-radius:var(--r-pill);
  transition:background var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);opacity:.55;
}
.lang button:hover{opacity:.85}
.lang button[aria-pressed="true"]{background:#18181B;opacity:1}
.flag{width:18px;height:13px;display:block}
.nav__burger{display:none;width:38px;height:38px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.18)}
.nav__burger span{display:block;width:15px;height:1.5px;background:#fff;margin:3px auto;border-radius:2px}
.nav__cta-m{display:none}
/* mobile menu: a second ink card hanging under the island */
.nav.is-open .nav__links{
  display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;
  flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 22px 16px;
  background:#18181B;border:1px solid rgba(255,255,255,.07);border-radius:22px;
}
.nav.is-open .nav__links a{padding:13px 0;font-size:16px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav.is-open .nav__links a:last-child{border-bottom:0}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

/* --- hero ---------------------------------------------------------------- */
.hero{padding:172px 0 24px;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.hero > .wrap{position:relative;z-index:1}
.hero__inner{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.hero h1{margin-top:22px;max-width:15ch}
html[lang="ka"] .hero h1{max-width:100%;font-size:clamp(2.4rem,5.8vw,4.6rem)}
.hero .lede{margin-inline:auto;text-align:center;max-width:34em}
.hero__ctas{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;justify-content:center}
.hero__note{margin-top:20px;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.dot-live{
  width:7px;height:7px;border-radius:var(--r-pill);background:var(--live);
  flex:none;position:relative;
}
.dot-live::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid var(--live);opacity:0;
}
/* --- hero circuit field ---------------------------------------------------
   Traces route in from the edges and terminate on pads, as if the headline were
   the chip they feed. Green pulses travel along them because green is this
   page's live signal — the field says "the line is carrying voice" and adds no
   new colour to do it. Everything here is decoration: pointer-events off, aria
   hidden, and under reduced motion the traces stay and the pulses stop. */
.hero__field{
  position:absolute;inset:-40px 0 auto;height:960px;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 62%,transparent 96%);
          mask-image:linear-gradient(#000 62%,transparent 96%);
}
.pcb{position:absolute;inset:0;width:100%;height:100%}
.pcb__t{fill:none;stroke:var(--line-strong);stroke-width:1.25;
        stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.pcb__pad{fill:var(--paper);stroke:var(--line-strong);stroke-width:1.25}
.pcb__p{fill:none;stroke:var(--live);stroke-width:2;stroke-linecap:round;
        stroke-dasharray:0 100;opacity:0}

.hero__glow{
  position:absolute;left:50%;top:0;width:min(1000px,100vw);height:520px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%,rgba(0,210,106,.09),transparent 70%);
  filter:blur(10px);
}

/* --- console (the hero product card) ------------------------------------- */
.console{
  margin-top:56px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--paper);overflow:hidden;text-align:left;
}
.console__top{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.console__dots{display:flex;gap:6px}
.console__dots i{width:9px;height:9px;border-radius:var(--r-pill);background:var(--line-strong);display:block}
.console__title{font-size:13px;color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console__state{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.12em;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px 3px;background:var(--paper);
  white-space:nowrap;flex:none;
}
.console__body{display:grid;grid-template-columns:264px 1fr}
.lines{border-right:1px solid var(--line);background:var(--paper-2)}
.lines__head{
  padding:14px 18px;border-bottom:1px solid var(--line);
  font-size:11.5px;letter-spacing:.12em;font-weight:600;color:var(--muted-2);
}
.line{
  width:100%;display:flex;align-items:center;gap:12px;padding:14px 18px;text-align:left;
  border-bottom:1px solid var(--line);transition:background var(--t-fast) var(--ease);
}
.line:hover{background:var(--paper-3)}
.line__no{
  font-size:12px;letter-spacing:.1em;font-weight:600;color:var(--muted-2);
  transition:color var(--t-fast) var(--ease);
}
.line__name{font-size:14.5px;font-weight:500;display:block}
.line__meta{font-size:12px;color:var(--muted-2);display:block;margin-top:1px}
.line[aria-checked="true"]{background:var(--paper)}
.line[aria-checked="true"] .line__no{color:var(--ink)}
.line[aria-checked="true"]::before{
  content:"";width:2px;align-self:stretch;background:var(--live);
  margin:-14px 0 -14px -18px;border-radius:0 2px 2px 0;
}
.stage{padding:26px 28px 24px;display:flex;flex-direction:column;min-height:330px}
.meter{display:flex;align-items:flex-end;gap:3px;height:52px}
.meter i{
  display:block;width:3px;border-radius:2px;background:var(--line-strong);height:6px;
  transform-origin:bottom;
}
.meter.is-live i{background:var(--live)}
.transcript{margin-top:22px;display:flex;flex-direction:column;gap:14px;flex:1}
.turn{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start}
html[lang="ka"] .turn{grid-template-columns:112px 1fr}
.turn__who{
  font-size:11px;letter-spacing:.12em;font-weight:600;color:var(--muted-2);
  padding-top:4px;
}
.turn__text{font-size:15.5px;line-height:1.6}
.turn--agent .turn__text{color:var(--ink)}
.turn--caller .turn__text{color:var(--muted)}
.receipt{
  margin-top:auto;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;
  display:flex;align-items:center;gap:12px;background:var(--paper-2);
}
.receipt__eyebrow{display:block;font-size:11.5px;letter-spacing:.12em;font-weight:600;color:var(--muted-2)}
.receipt__val{font-size:14.5px;font-weight:500;margin-top:2px}
.receipt__lat{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted-2);font-variant-numeric:tabular-nums}

/* --- marquee ------------------------------------------------------------- */
.marquee{overflow:hidden;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.marquee__track{display:flex;gap:44px;width:max-content}
.marquee__item{
  display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);white-space:nowrap;
}
.marquee__item i{width:4px;height:4px;border-radius:var(--r-pill);background:var(--line-strong);display:block}
.marquee{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* --- bento --------------------------------------------------------------- */
.grid{display:grid;gap:16px;margin-top:56px}
.bento{grid-template-columns:repeat(6,1fr)}
.card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--paper);
  transition:border-color var(--t-med) var(--ease),background var(--t-med) var(--ease),transform var(--t-med) var(--ease);
}
.card:hover{border-color:var(--line-strong)}
.card--wide{grid-column:span 3}
.card--third{grid-column:span 2}
.card--half{grid-column:span 3}
.card__eyebrow{font-size:11.5px;letter-spacing:.14em;font-weight:600;color:var(--muted-2)}
.card h3{margin-top:14px}
.card p{margin-top:10px;color:var(--muted);font-size:15px}
.card__well{
  margin-top:22px;border-radius:var(--r-md);background:var(--paper-3);border:1px solid var(--line);
  padding:18px;
}
.chip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:6px 12px 3px;font-size:13px;background:var(--paper);
  color:var(--muted);
}
.chips{display:flex;flex-wrap:wrap;gap:8px}


/* --- surface inversion ---------------------------------------------------
   The flatness came from white cards on a white ground with only a hairline
   between them. Cards now always sit one step away from whatever they are on:
   tinted on the white sections, white on the tinted bands. */
.card,.plan,.quote,.console,.step{background:var(--paper-2)}
.band .card,.band .plan,.band .quote,.band .console,.band .step{background:var(--paper)}
.card .card__well,.quote{border-color:var(--line-strong)}
.card__well{background:var(--paper-3)}
.band .card__well{background:var(--paper-2)}
.console__top,.lines{background:var(--paper-3)}
.band .console__top,.band .lines{background:var(--paper-2)}
.stage{background:var(--paper)}
.band .stage{background:var(--paper-2)}
.receipt{background:var(--paper-3)}
.band .receipt{background:var(--paper-2)}
.line[aria-checked="true"]{background:var(--paper)}
.band .line[aria-checked="true"]{background:var(--paper-2)}
.verts{background:var(--paper-2)}
.band .verts{background:var(--paper)}
.vert:hover{background:var(--paper-3)}
.band .vert:hover{background:var(--paper-2)}

/* --- colour ---------------------------------------------------------------
   The bento is where the page spends its colour: the founder's five candy
   hexes at full strength, edge to edge. INK type on every one (7.0 / 9.8 /
   6.1 / 10.1 / 6.9), wells one shade deeper, chips and booking rows as white
   glass carrying ink at 17:1+. White lives only where it can be read: on the
   ink eyebrow pill (the header island at label scale, 17.7:1) and as the
   glass. A soft white light in the top-right corner gives each flat hex the
   same mesh DNA as the section grounds; it only ever raises ink contrast.
   White on the hexes themselves would be 2.82 / 2.01 / 3.27 / 1.97 / 2.85,
   so no white glyph touches the candy directly. Outside the bento the hues
   recur ONLY as small non-text signals and as coin grounds with ink numerals. */
/* 2026-08-23: "feels heavy" — the full-strength hexes are gone. Each card is now
   a pale tint of its hue (16% over white) carrying two blurred blobs of the
   hue itself in the corners: the aurora language at card scale. The hue stays
   loud in the glow, the reading surface stays near-white, ink type everywhere. */
.card--color{
  --cbg:var(--c-blue);
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:stretch;
  background:color-mix(in srgb,var(--cbg) 14%,#fff);
  border-color:color-mix(in srgb,var(--cbg) 28%,#fff);color:var(--ink);
}
.card--color::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 210px at 100% 0%,color-mix(in srgb,var(--cbg) 62%,#fff),transparent 72%),
    radial-gradient(46% 180px at 0% 100%,color-mix(in srgb,var(--cbg) 34%,#fff),transparent 72%);
  filter:blur(18px);transform:translateZ(0);
}
.card--color:hover{border-color:color-mix(in srgb,var(--cbg) 48%,#fff)}
.card--blue{--cbg:var(--c-blue)}
.card--green{--cbg:var(--c-green)}
.card--violet{--cbg:var(--c-violet)}
.card--orange{--cbg:var(--c-orange)}
.card--pink{--cbg:var(--c-pink)}

/* eyebrow = the white the founder asked for, on the only ground that carries
   it: an ink pill with a live dot in the card's own hue. Same object as the
   header island, label-sized. White on #18181B = 17.7:1. */
.card--color .card__eyebrow{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:7px 11px 4px 10px;border-radius:var(--r-pill);
  background:var(--pill-ink);color:#fff;
  font-size:11px;letter-spacing:.14em;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.card--color .card__eyebrow::before{
  content:"";width:6px;height:6px;border-radius:var(--r-pill);background:var(--cbg);flex:none;
  margin-top:-2px;
}
/* type hierarchy on colour: three tiers by weight and size, one ink. */
.card--color h3{
  margin-top:18px;color:var(--ink);
  font-size:1.375rem;line-height:1.22;letter-spacing:-.022em;font-weight:700;
  text-wrap:balance;
}
.card--color p{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.55;font-weight:400;max-width:56ch}
.card--color p:has(+ .card__well){margin-bottom:22px}

/* well = the card one shade deeper (12% ink over the hue). Nothing is typed
   directly on it; it exists to give the glass something to sit on. It rides
   margin-top:auto so wells in one grid row bottom-align. */
/* no well any more ("double containers are too much") — chips and rows sit
   straight on the card; the well only keeps the bottom-align job */
.card--color .card__well{margin-top:auto;padding:0;background:transparent;border:0;border-radius:0}
/* chips and rows = white glass, ink type, white hairline. Blended over the
   well the glass lands at #E7F1FB / #E0F7EC / #EFEDFB / #FBF2E6 / #FBE9F7,
   so ink on it measures 17.1 to 17.9 on every card. Same object as the chips
   on the light cards (white chip, hairline edge). */
.card--color .chip{
  background:#fff;border-color:color-mix(in srgb,var(--cbg) 32%,#fff);
  color:var(--ink);font-weight:600;font-size:13px;
}
.card__row{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:500;line-height:1.35;color:var(--ink);
  padding:12px 16px 10px;border-radius:var(--r-md);
  background:#fff;border:1px solid color-mix(in srgb,var(--cbg,var(--line)) 32%,#fff);
  font-variant-numeric:tabular-nums;
}
.card__row + .card__row{margin-top:8px}
/* the receipt mark on the glass is ink: white would vanish on the glass and
   green would be 1.7:1 on it. */
.card--color .dot-live{background:var(--cbg)}
.card--color .dot-live::after{border-color:var(--cbg)}

/* signals: blue → orange → green (success) */
.step:nth-child(1){--sc:var(--c-blue)} .step:nth-child(2){--sc:var(--c-orange)} .step:nth-child(3){--sc:var(--c-green)}
.vert:nth-child(3n+1){--sc:var(--c-blue)} .vert:nth-child(3n+2){--sc:var(--c-orange)} .vert:nth-child(3n+3){--sc:var(--c-green)}
.quote:nth-child(1){--sc:var(--c-blue)} .quote:nth-child(2){--sc:var(--c-orange)} .quote:nth-child(3){--sc:var(--c-green)}
.marquee__item:nth-child(3n+1) i{background:var(--c-blue)} .marquee__item:nth-child(3n+2) i{background:var(--c-orange)}
.marquee__item:nth-child(3n+3) i{background:var(--c-green)}

/* --- steps --------------------------------------------------------------- */
.steps{grid-template-columns:repeat(3,1fr);counter-reset:step}
.step{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px 30px;background:var(--paper);
  transition:border-color var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.step:hover{border-color:var(--line-strong);transform:translateY(-2px)}
/* the steps band carries its own living mesh (same blobs as the hero) instead
   of the quiet static tint — "too white" was the verdict on the static one */
.band--mesh{position:relative;isolation:isolate;overflow:hidden}
.band--mesh .mesh{z-index:-1}
.mesh--band i{opacity:.62}
.mesh--band .mesh__clear{background:radial-gradient(50% 40% at 28% 18%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%)}
html[data-theme] .band--mesh::before{display:none}
.step__no{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:2px 10px 0;border-radius:var(--r-pill);
  background:var(--sc,var(--paper-3));color:var(--ink);font-size:11.5px;letter-spacing:.12em;font-weight:700}
.step h3{margin-top:18px}
.step p{margin-top:10px;color:var(--muted);font-size:15px}

/* --- verticals ----------------------------------------------------------- */
.verts{grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.vert{padding:26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background var(--t-fast) var(--ease)}
.vert:hover{background:var(--paper-2)}
.verts .vert:nth-child(4n){border-right:0}
.verts .vert:nth-last-child(-n+4){border-bottom:0}
.vert h3{font-size:16px;display:flex;align-items:center;gap:10px}
.vert h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--sc,var(--line-strong));flex:none}
.vert p{margin-top:8px;font-size:13.5px;color:var(--muted)}

/* --- proof (doesn't invent) ---------------------------------------------- */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
/* the three exchanges sit in one rounded panel with a static aurora tint — a
   transcript lifted off the page — and each exchange is white glass on it */
.quotes{
  display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-xl);
  position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);
}
.quotes::before{
  content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;opacity:.7;
  background:
    radial-gradient(42% 50% at 10% 15%,var(--m1),transparent 70%),
    radial-gradient(40% 50% at 95% 10%,var(--m2),transparent 70%),
    radial-gradient(45% 55% at 80% 100%,var(--m4),transparent 70%),
    radial-gradient(35% 45% at 15% 100%,var(--m5),transparent 70%);
  filter:blur(40px);background-size:100% 100%;
}
.quote{
  border:1px solid rgba(10,10,11,.09);border-radius:var(--r-md);padding:18px 20px 18px 22px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.quote__q{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.quote__q::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--sc,var(--line-strong));flex:none}
.quote__a{font-size:16px;margin-top:8px;font-weight:500;line-height:1.5}
.quote__tag{
  margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  letter-spacing:.08em;color:var(--live-text);
}

/* --- stats band ---------------------------------------------------------- */
.dark{background:var(--ink-2);color:#fff;border-radius:var(--r-xl);padding:64px 56px}
.dark h2{color:#fff}
.dark .sub{color:#AFAFB8}
.stats{grid-template-columns:repeat(4,1fr);margin-top:48px;gap:32px}
.stat__v{font-size:clamp(2.2rem,3.6vw,3.1rem);letter-spacing:-.035em;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.stat__l{font-size:13.5px;color:#AFAFB8;margin-top:8px;line-height:1.5}
.dark .stat{border-top:1px solid #2E2E34;padding-top:20px}

/* --- pricing ------------------------------------------------------------- */
/* 2026-08-23: three packages + monthly/yearly switch (his Higgsfield reference:
   quota box, struck price, CTA, savings line, then ✓/✕ list with chips). */
.bill{display:inline-flex;margin-top:34px;padding:4px;border-radius:var(--r-pill);background:var(--paper-3);border:1px solid var(--line);gap:2px}
.bill button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 7px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--muted);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.bill button[aria-pressed="true"]{background:var(--pill-ink);color:#fff}
.bill button em{font-style:normal;font-size:11px;letter-spacing:.06em;padding:4px 8px 2px;border-radius:var(--r-pill);background:var(--live);color:#062A17;font-weight:700}
.plans{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(7,auto);max-width:1120px;margin-inline:auto;margin-top:36px;gap:0 14px}
.plans .p-year{display:none}
.plans[data-bill="year"] .p-year{display:inline}
.plans[data-bill="year"] .p-month{display:none}
.plan{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px 26px;display:grid;grid-template-rows:subgrid;grid-row:span 7}
.plan--hero{border-color:var(--ink);position:relative}
.plan__tag{position:absolute;top:-13px;left:22px;font-size:11px;letter-spacing:.12em;font-weight:700;padding:7px 11px 5px;border-radius:var(--r-pill);background:var(--live);color:#062A17;line-height:1}
.plan__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan__name{font-size:12.5px;letter-spacing:.16em;font-weight:700;color:var(--ink)}
.plan__desc{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.5}
.plan__quota{margin-top:10px;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--muted)}
.plan__quota b{color:var(--ink);font-weight:700}
.plan__quota .num{font-variant-numeric:tabular-nums}
.plan__price{display:flex;align-items:baseline;gap:8px;margin-top:22px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.plan__price s{font-size:1rem;font-weight:600;color:var(--muted-2);text-decoration-thickness:1.5px;margin-left:auto}
.plan__amt{font-size:2.5rem;letter-spacing:-.04em;font-weight:800;line-height:1}
.plan__per{font-size:14px;color:var(--muted);letter-spacing:0}
.plan .btn{margin-top:20px;width:100%}
.plan__foot{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}
.plan__feats{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;flex:1}
.plan__feats li{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.45;color:var(--ink)}
.plan__feats li::before{content:"";width:16px;height:16px;margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.5 2.5 5.5-5.8' fill='none' stroke='%2300A254' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.plans__note{margin-top:22px;font-size:13px;color:var(--muted);max-width:60ch;margin-inline:auto}
/* Business: calls-per-month slider inside the quota box (his Higgsfield Ultra reference) */
.qslider{margin-top:12px}
.qslider input{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0;cursor:pointer;display:block}
.qslider input::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--live) 0,var(--live) var(--p,0%),var(--line-strong) var(--p,0%),var(--line-strong) 100%)}
.qslider input::-moz-range-track{height:4px;border-radius:2px;background:var(--line-strong)}
.qslider input::-moz-range-progress{height:4px;border-radius:2px;background:var(--live)}
.qslider input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:var(--r-pill);
  background:#fff;border:2px solid var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12);transition:transform var(--t-fast) var(--ease)}
.qslider input::-moz-range-thumb{width:18px;height:18px;border-radius:var(--r-pill);background:#fff;border:2px solid var(--ink)}
.qslider input:hover::-webkit-slider-thumb,.qslider input:active::-webkit-slider-thumb{transform:scale(1.08)}
.qslider input:focus-visible{outline:none}
.qslider input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(0,210,106,.35)}
.qslider__ticks{display:flex;justify-content:space-between;margin-top:2px;padding:0 2px;font-size:11px;letter-spacing:.02em;color:var(--muted-2);font-variant-numeric:tabular-nums}
.qslider__ticks span{flex:0 0 auto}

/* --- faq ----------------------------------------------------------------
   Heading on the left, questions on the right, both on the same grid — the
   list used to float centred under a left-aligned title. Each row carries its
   numeral and a coin that flips ink when open; the answer slides on height,
   driven from app.js so the transition runs in every browser. */
.faq__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:start}
.faq__head{position:sticky;top:112px}
.faq{margin:0;border-top:1px solid var(--line);counter-reset:faq}
.faq details{border-bottom:1px solid var(--line);counter-increment:faq}
.faq summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr 34px;
  align-items:center;gap:14px;padding:22px 0;
  font-size:17.5px;font-weight:500;line-height:1.45;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:counter(faq,decimal-leading-zero);
  font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;transition:color var(--t-fast) var(--ease);
}
.faq summary::after{
  content:"";width:34px;height:34px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2l4 4 4-4' fill='none' stroke='%230A0A0B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform var(--t-slow) var(--ease-out),background-color var(--t-med) var(--ease),border-color var(--t-med) var(--ease);
}
.faq summary:hover::after{border-color:var(--ink)}
.faq summary:hover::before{color:var(--ink)}
.faq details.is-open summary::before{color:var(--ink)}
.faq details.is-open summary::after{
  transform:rotate(180deg);border-color:var(--ink);
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.faq__a{padding:0 48px 26px 58px;color:var(--muted);font-size:15.5px;line-height:1.7;overflow:hidden}
.faq__a.is-anim{transition:height var(--t-slow) var(--ease-out),opacity var(--t-slow) var(--ease-out)}

/* --- closing ------------------------------------------------------------- */
.closing{text-align:center;display:flex;flex-direction:column;align-items:center}
.closing h2{max-width:18ch}
.closing .lede{text-align:center;margin-inline:auto}

/* --- footer -------------------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding:64px 0 40px;background:var(--paper-2)}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.footer h4{font-size:12px;letter-spacing:.14em;color:var(--muted-2);font-weight:600}
.footer ul{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.footer a{font-size:14px;color:var(--muted);transition:color var(--t-fast) var(--ease)}
.footer a:hover{color:var(--ink)}
.footer__bottom{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted);
}
.footer__sig{margin-left:auto;display:flex;align-items:center;gap:8px}

/* --- floating voice widget ----------------------------------------------- */
.vw{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80;
  /* The panel grew a call button and can now outgrow a short viewport (a laptop
     with the browser chrome, or any phone in landscape). Bounding it here and
     letting the transcript take the squeeze keeps the two controls that matter —
     the call button and the state — on screen instead of clipped off the top. */
  max-height:calc(100dvh - 56px);display:flex;flex-direction:column;justify-content:flex-end}
.vw__panel{max-height:calc(100dvh - 56px);display:flex;flex-direction:column}
.vw__panel .vw__log{flex:1 1 auto;min-height:0}
.vw__pill{
  display:flex;align-items:center;gap:14px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 22px 10px 10px;
  box-shadow:0 1px 2px rgba(10,10,11,.05),0 14px 40px rgba(10,10,11,.10);
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
.vw__pill:hover{box-shadow:0 1px 2px rgba(10,10,11,.06),0 18px 48px rgba(10,10,11,.14)}
.vw__grip{display:grid;grid-template-columns:repeat(2,3px);gap:3px;opacity:.4}
.vw__grip i{width:3px;height:3px;border-radius:var(--r-pill);background:var(--muted);display:block}
.vw__mic{
  width:40px;height:40px;border-radius:var(--r-pill);background:var(--live);
  display:grid;place-items:center;flex:none;position:relative;
}
.vw__mic svg{width:17px;height:17px;fill:#062A17}
.vw__label{font-size:15px;font-weight:500}
.vw__panel{
  width:340px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(10,10,11,.05),0 20px 56px rgba(10,10,11,.14);
  overflow:hidden;
}
.vw__head{display:flex;align-items:center;gap:11px;padding:13px 14px}
.vw__title{font-size:14.5px;font-weight:500}
.vw__hang{
  margin-left:auto;width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;
  transition:background var(--t-fast) var(--ease);
}
.vw__hang:hover{background:var(--paper-3)}
.vw__hang svg{width:17px;height:17px;fill:#C0392B;stroke:none}
.vw__min{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;transition:background var(--t-fast) var(--ease)}
.vw__min:hover{background:var(--paper-3)}
.vw__min svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:1.7}
.vw__stage{padding:6px 14px 20px;text-align:center}
/* --- the orb ---------------------------------------------------------------
   The face of the call: a soft gradient sphere in the aurora family that
   breathes with the voice (--amp, fed by app.js from real RMS). Drawn with
   soft-stop radial gradients and translate3d drift ONLY — no filter:blur, so
   it costs nothing on a phone. The grain is one static SVG-noise tile. */
.orb{
  --amp:0;--gain:.1;
  position:relative;width:168px;aspect-ratio:1;margin:16px auto 2px;
  border-radius:var(--r-pill);overflow:hidden;
  background:linear-gradient(125deg,#7ED6A4 8%,#9CD9FF 92%);
  transform:scale(calc(1 + var(--amp)*var(--gain))) translateZ(0);
  transition:transform 110ms linear,opacity var(--t-fast) var(--ease);
}
.orb__b{position:absolute;inset:-28%;border-radius:var(--r-pill);will-change:transform;transition:scale 110ms linear}
.orb__b1{background:radial-gradient(closest-side at 36% 56%,#2FBF6C 0%,#2FBF6C 26%,rgba(47,191,108,0) 68%);animation:orbDrift1 11s var(--ease) infinite alternate}
.orb__b2{background:radial-gradient(closest-side at 74% 44%,#52C6FF 0%,rgba(82,198,255,0) 62%);animation:orbDrift2 9s var(--ease) infinite alternate;animation-delay:-3s}
.orb__b3{background:radial-gradient(closest-side at 70% 84%,#2E6BE6 0%,rgba(46,107,230,0) 58%);animation:orbDrift3 13s var(--ease) infinite alternate;animation-delay:-7s}
.orb__b4{background:radial-gradient(closest-side at 78% 28%,#EFFFF6 0%,rgba(239,255,246,0) 52%);animation:orbDrift2 8s var(--ease) infinite alternate;animation-delay:-5s}
.orb__grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.6;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:140px;
}
@keyframes orbDrift1{from{transform:translate3d(-7%,4%,0)}to{transform:translate3d(9%,-6%,0)}}
@keyframes orbDrift2{from{transform:translate3d(6%,-5%,0)}to{transform:translate3d(-8%,7%,0)}}
@keyframes orbDrift3{from{transform:translate3d(4%,7%,0)}to{transform:translate3d(-6%,-8%,0)}}
/* Idle: the line is not open yet — quiet, desaturated, slow. */
.orb--idle{filter:saturate(.45);opacity:.68}
.orb--idle .orb__b{animation-duration:18s,18s,18s}
/* Connecting: a soft ring reaches out while the handshake runs. */
.orb--connecting::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-pill);
  border:2px solid rgba(255,255,255,.75);animation:orbRing 1.5s var(--ease) infinite;
}
@keyframes orbRing{0%{opacity:.8;transform:scale(.82)}75%,100%{opacity:0;transform:scale(1.04)}}
/* Thinking: the weather speeds up while it decides what to say. */
.orb--thinking .orb__b1{animation-duration:3.2s}
.orb--thinking .orb__b2{animation-duration:2.6s}
.orb--thinking .orb__b3{animation-duration:3.8s}
.orb--thinking .orb__b4{animation-duration:2.9s}
/* Speaking: --amp is the REAL speaker output level (playback analyser). The
   whole sphere swells and glows with it, and app.js moves the blobs inline
   every frame — orbit speed, radius and swell all voice-driven, ElevenLabs
   style. Keyframes MUST be off here or they override the inline transforms. */
.orb--speaking{
  --gain:.14;
  filter:saturate(calc(1.08 + var(--amp)*.35)) brightness(calc(1 + var(--amp)*.1));
}
.orb--speaking .orb__b{animation:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .orb,.orb__b,.orb--connecting::after{animation:none!important;transition:none}
  .orb{transform:none}
}
.vw__state{margin-top:14px;font-size:14px;color:var(--muted)}
.vw__hint{
  margin:4px 14px 12px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted-2);text-align:center;
}

/* --- the call control -----------------------------------------------------
   The one primary action in the panel, and the only thing that spends money —
   so it is a deliberate press, never a side effect of opening the widget. It
   hides itself once the line is live: during a call the only controls that make
   sense are hang up and minimise, both already in the header. */
.vw__call{
  display:block;width:calc(100% - 28px);margin:0 14px 14px;
  border-radius:var(--r-sm);padding:11px 16px 9px;
  font-size:15px;font-weight:700;letter-spacing:.01em;
  background:var(--live);color:#062A17;
  transition:background var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.vw__call:hover{filter:brightness(.97)}
.vw__call[disabled]{opacity:.55;cursor:default}
.vw__call[hidden]{display:none}

/* The typed lane needs a live session, so it is inert until one exists. Shown
   rather than hidden: a form that vanishes reads as a bug, one that is visibly
   waiting reads as a sequence. */
.vw__form.is-off{opacity:.45;pointer-events:none}

/* Invisible Turnstile draws nothing; this only reserves a mount point and keeps
   its iframe from ever pushing the panel's layout around if it becomes visible. */
.vw__turnstile{display:flex;justify-content:center}
.vw__turnstile:empty{display:none}

/* The pill carries a live call while the panel is collapsed — minimise is not
   hang up, and without this the visitor has no way to tell the line is open. */
.vw__pill.is-live .vw__mic::after{
  content:"";position:absolute;inset:-4px;border-radius:var(--r-pill);
  border:2px solid var(--live);animation:vwLive 1.6s var(--ease) infinite;
}
@keyframes vwLive{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.28)}}

.vw__form{display:none;gap:8px;padding:0 14px 14px}
.vw__input{
  flex:1;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font-size:14px;
  background:var(--paper);color:var(--ink);min-width:0;
  transition:border-color var(--t-fast) var(--ease);
}
.vw__input::placeholder{color:var(--muted-2)}
.vw__input:focus{outline:none;border-color:var(--ink)}
.vw__send{
  border-radius:var(--r-sm);padding:9px 16px 6px;font-size:14px;font-weight:700;
  background:var(--paper-3);color:var(--muted);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.vw__send.is-ready{background:var(--live);color:#062A17}
/* The orb IS the call view: no transcript, no typed lane (his call, 08-26).
   The rows still accumulate in the hidden log — the machinery stays intact. */
.vw__log{display:none}
.vw__log{
  max-height:132px;overflow-y:auto;text-align:left;padding:0 14px 4px;
  flex-direction:column;gap:9px;
}
.vw__msg{font-size:13.5px;line-height:1.5}
.vw__msg b{display:block;font-size:11px;letter-spacing:.08em;color:var(--muted-2);font-weight:600;margin-bottom:2px}
.vw__msg--caller{color:var(--muted)}
.vw[hidden]{display:none}


/* ==========================================================================
   V2 — ANIMATED MESH THEMES. The page keeps its neutral surfaces (every card,
   every line of text sits on solid paper), and colour lives in the GROUNDS
   between them as slow, blurred, drifting radial blobs. That is the split that
   keeps it scannable: colour is atmosphere, never the reading surface.
   data-theme="aurora" is set statically on <html>; the rgb/sunset/lime alternates
   were cut 2026-08-23 once aurora was chosen. The accent is the brand green.
   The founder's hero-veil rule applies: no flat scrim — legibility comes from
   blur, opacity and a radial clearing behind the type, never a white plate.
   ======================================================================== */
:root{
  --accent:var(--live);            /* primary CTA fill */
  --accent-2:var(--live-hover);    /* gradient end / hover */
  --accent-ink:#062A17;            /* text on accent */
  --m1:transparent;--m2:transparent;--m3:transparent;--m4:transparent;--m5:transparent;
  --mesh-a:.75;                    /* hero blob opacity */
  --mesh-band:.5;                  /* grey-band tint strength */
}
:root[data-theme="aurora"]{
  --m1:#5DFFC3; --m2:#3EC5FF; --m3:#8A7CFF; --m4:#C6FFF0; --m5:#6FE3FF;
  --accent:var(--live); --accent-2:var(--live-hover); --accent-ink:#062A17; --mesh-a:.78;
}

/* --- mesh field (hero + closing, animated) -------------------------------- */
.mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.mesh i{
  position:absolute;display:block;border-radius:50%;
  width:42vw;height:42vw;min-width:380px;min-height:380px;max-width:820px;max-height:820px;
  filter:blur(56px);opacity:var(--mesh-a);will-change:transform;transform:translateZ(0);backface-visibility:hidden;
  background:radial-gradient(circle at 50% 50%,var(--c) 0%,transparent 66%);
}
.mesh i:nth-child(1){--c:var(--m1);left:-12%;top:-18%}
.mesh i:nth-child(2){--c:var(--m2);right:-14%;top:-22%}
.mesh i:nth-child(3){--c:var(--m3);left:18%;bottom:-30%}
.mesh i:nth-child(4){--c:var(--m4);right:10%;bottom:-26%}
.mesh i:nth-child(5){--c:var(--m5);left:38%;top:-30%;width:34vw;height:34vw}
/* radial clearing behind the type column — colour at the edges, paper in the middle */
/* the clearing behind the type + the melt into the page below, painted as one
   STATIC layer above the blobs. Doing it with mask-image on the moving container
   cost ~55fps because the mask had to be re-applied every frame. */
.mesh__clear{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(58% 44% at 50% 38%,var(--paper) 0%,rgba(255,255,255,.72) 42%,rgba(255,255,255,0) 76%),
    linear-gradient(rgba(255,255,255,0) 52%,rgba(255,255,255,.55) 80%,var(--paper) 100%);
}
.mesh--close .mesh__clear{
  background:radial-gradient(58% 58% at 50% 50%,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 72%);
}
html:not([data-theme]) .mesh{display:none}
html[data-theme] .hero__glow{display:none}

/* --- band tint (static, cheap) -------------------------------------------- */
html[data-theme] .band{position:relative;isolation:isolate;overflow:hidden}
html[data-theme] .band::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:var(--mesh-band);pointer-events:none;
  background:
    radial-gradient(40% 55% at 8% 20%,var(--m1),transparent 70%),
    radial-gradient(38% 50% at 92% 10%,var(--m2),transparent 70%),
    radial-gradient(45% 55% at 85% 95%,var(--m4),transparent 70%),
    radial-gradient(35% 45% at 15% 100%,var(--m5),transparent 70%);
  filter:blur(40px) saturate(1.05);
  inset:-30%;background-size:100% 100%;will-change:transform;
  -webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.55) 50%,#000);
          mask-image:linear-gradient(#000,rgba(0,0,0,.55) 50%,#000);
}
html[data-theme] .band{background:var(--paper)}
html[data-theme] .band .card:not(.card--color),html[data-theme] .band .plan,html[data-theme] .band .quote,html[data-theme] .band .step{
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* --- dark stats card: mesh in saturated theme colours over ink ------------ */
html[data-theme] .dark{position:relative;overflow:hidden;isolation:isolate}
html[data-theme] .dark::before{
  content:"";position:absolute;inset:-20%;z-index:-1;opacity:.55;pointer-events:none;
  background:
    radial-gradient(35% 45% at 10% 15%,var(--m1),transparent 70%),
    radial-gradient(32% 40% at 95% 20%,var(--m3),transparent 70%),
    radial-gradient(38% 45% at 70% 100%,var(--m5),transparent 70%),
    radial-gradient(30% 40% at 25% 95%,var(--m4),transparent 70%);
  filter:blur(60px);will-change:transform;
}
html[data-theme] .dark .stat{border-top-color:rgba(255,255,255,.18)}

/* --- accent pair drives the primary controls ------------------------------ */
html[data-theme] .btn--live{background:var(--accent);color:var(--accent-ink)}
html[data-theme] .btn--live:hover{background:var(--accent-2)}
html[data-theme] .btn--live:active{background:var(--accent-2);filter:brightness(.96)}
html[data-theme] .vw__mic{background:var(--accent)}
html[data-theme] .vw__mic svg{fill:var(--accent-ink)}
html[data-theme] .vw__send.is-ready{background:var(--accent);color:var(--accent-ink)}
html[data-theme] .vw__call{background:var(--accent);color:var(--accent-ink)}
html[data-theme] .vw__pill.is-live .vw__mic::after{border-color:var(--accent)}
html[data-theme] .plan__tag{background:var(--accent);color:var(--accent-ink)}


/* --- reveal + motion ----------------------------------------------------- */
/* the fade runs for everyone (a fade is not "motion"); only the 14px slide and
   the word masks are gated on prefers-reduced-motion. html.js is set by app.js
   so a no-JS visit still sees everything. Founder on an iPhone with Reduce
   Motion on: "animate-in on mobile just appears" — this is why. */
[data-reveal]{opacity:1}
html.js [data-reveal]{opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
html.js [data-reveal].in{opacity:1}
html.js [data-reveal].has-rv{opacity:1;transition:none}

@media (prefers-reduced-motion: no-preference){
  .anim .rv > i{transform:translateY(115%);opacity:0}
  .anim .rv-in .rv > i,
  .anim [data-reveal].in .rv > i{
    transform:none;opacity:1;
    transition:transform 820ms cubic-bezier(.16,1,.3,1),opacity 480ms ease;
    transition-delay:calc(var(--i,0) * 58ms);
  }
  /* a split heading carries its own reveal — don't also slide the block */
  [data-reveal].has-rv{opacity:1;transform:none;transition:none}
  .anim .kicker{opacity:0;letter-spacing:.34em;
    transition:opacity 520ms ease 60ms,letter-spacing 900ms cubic-bezier(.16,1,.3,1) 60ms}
  .anim .kicker.in,.anim .kicker.rv-in{opacity:1;letter-spacing:.16em}
  html.js [data-reveal]{transform:translateY(14px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
  html.js [data-reveal].in{transform:none}
  .btn:hover{transform:translateY(-1px)}
  .card:hover,.step:hover{transform:translateY(-2px)}
  .dot-live::after{animation:ring 2.4s var(--ease) infinite}
  @keyframes ring{0%{transform:scale(1);opacity:.5}70%{opacity:0}100%{transform:scale(2.4);opacity:0}}
  .marquee__track{animation:slide 38s linear infinite}
  .marquee:hover .marquee__track{animation-play-state:paused}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .meter i{transition:transform 90ms linear,background var(--t-fast) var(--ease)}
  .turn{animation:settle 340ms var(--ease-out) both}
  @keyframes settle{from{opacity:0}to{opacity:1}}
  .vw__pill:hover{transform:translateY(-2px)}
  .vw__panel{animation:pop 260ms var(--ease-out) both}
  @keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .hero__inner>*:not(h1):not(.kicker){animation:rise 520ms var(--ease-out) both}
  .hero__inner>*:nth-child(1){animation-delay:0ms}
  .hero__inner>*:nth-child(2){animation-delay:70ms}
  .hero__inner>*:nth-child(3){animation-delay:140ms}
  .hero__inner>*:nth-child(4){animation-delay:210ms}
  .hero__inner>*:nth-child(5){animation-delay:280ms}
  .console{animation:rise 620ms var(--ease-out) 350ms both}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .mesh i{animation:drift var(--dur,11s) ease-in-out var(--del,0s) infinite alternate}
  .mesh i:nth-child(1){--dur:10s;--del:-3s}
  .mesh i:nth-child(2){--dur:13s;--del:-8s}
  .mesh i:nth-child(3){--dur:11s;--del:-5s}
  .mesh i:nth-child(4){--dur:14s;--del:-11s}
  .mesh i:nth-child(5){--dur:9s;--del:-6s}
  @keyframes drift{
    0%  {transform:translate3d(0,0,0)}
    30% {transform:translate3d(22vw,13vh,0)}
    62% {transform:translate3d(-18vw,24vh,0)}
    100%{transform:translate3d(11vw,-13vh,0)}
  }
    html[data-theme] .band::before{animation:bandflow 14s ease-in-out infinite alternate}
  html[data-theme] .dark::before{animation:bandflow 12s ease-in-out -5s infinite alternate}
  @keyframes bandflow{
    0%  {transform:translate3d(-4%,-3%,0)}
    50% {transform:translate3d(5%,4%,0)}
    100%{transform:translate3d(-2%,6%,0)}
  }
  @keyframes sheen{0%{background-position:0 0}50%{background-position:100% 0}100%{background-position:0 0}}
  .pcb__p{
    opacity:1;stroke-dasharray:5 95;stroke-dashoffset:100;
    animation:pulse var(--t,5s) linear var(--d,0s) infinite;
  }
  @keyframes pulse{
    0%{stroke-dashoffset:100;opacity:0}
    6%{opacity:1}
    88%{opacity:1}
    100%{stroke-dashoffset:0;opacity:0}
  }
  /* the three bars of the mark breathe like a level meter — the old tile did the same */
  .brand__mark .m-bar{animation:bar 1.8s var(--ease) infinite}
  .brand__mark .m-bar:nth-of-type(1){animation-delay:0ms}
  .brand__mark .m-bar--mid{animation-name:barmid;animation-delay:220ms}
  .brand__mark .m-bar:nth-of-type(3){animation-delay:440ms}
  @keyframes bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.45)}}
  @keyframes barmid{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.78)}}
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1020px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .card--wide,.card--half{grid-column:span 2}
  .card--third{grid-column:span 2}
  .verts{grid-template-columns:repeat(2,1fr)}
  .verts .vert{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .verts .vert:nth-child(2n){border-right:0}
  .verts .vert:nth-last-child(-n+2){border-bottom:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:900px){
  .section{padding:80px 0}
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav__row{padding:0 8px 0 16px}
  .nav__right{margin-left:auto}
  .console__body{grid-template-columns:1fr}
  .lines{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .lines__head{display:none}
  .line{flex:0 0 78%;scroll-snap-align:start;border-bottom:0;border-right:1px solid var(--line)}
  .line[aria-checked="true"]::before{display:none}
  .line[aria-checked="true"]{box-shadow:inset 0 -2px 0 var(--live)}
  .proof{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:520px;gap:14px}
  .plan{display:flex;flex-direction:column;grid-row:auto}
  .dark{padding:44px 28px;border-radius:var(--r-lg)}
  .faq__grid{grid-template-columns:1fr;gap:28px}
  .faq__head{position:static}
}
@media (max-width:640px){
  /* a circuit field behind a three-line headline on a 390px screen is noise,
     not atmosphere — the glow carries the hero on its own down here */
  .pcb{display:none}
  .hero__field{height:520px}
  /* the floating widget pill is the mobile CTA — the nav one would push the row wide */
  .nav__cta{display:none}
  .nav__cta-m{display:inline-flex !important;align-items:center;justify-content:center;
    background:var(--live);color:#062A17 !important;border-radius:var(--r-pill);
    padding:12px 20px !important;font-size:15px;font-weight:600;margin-top:10px;border-bottom:0 !important}
  .nav{padding:10px 0}
  .nav__row{height:54px;padding:0 8px 0 14px}
  .section{padding:64px 0}
  .hero{padding:128px 0 16px}
  .wrap{padding:0 18px}
  .lede{font-size:17px}
  .bento{grid-template-columns:1fr}
  .card--wide,.card--half,.card--third{grid-column:span 1}
  .verts{grid-template-columns:1fr}
  .verts .vert{border-right:0;border-bottom:1px solid var(--line)}
  .verts .vert:last-child{border-bottom:0}
  .stats{grid-template-columns:1fr;gap:20px}
  .footer__grid{grid-template-columns:1fr}
  .stage{padding:20px 18px;min-height:280px}
  .turn{grid-template-columns:56px 1fr;gap:10px}
  html[lang="ka"] .turn{grid-template-columns:1fr;gap:2px}
  html[lang="ka"] .turn__who{padding-top:0}
  .vw{left:16px;right:16px;bottom:16px;transform:none}
  .vw__panel{width:auto}
  .vw__pill{justify-content:center}
  .footer__sig{margin-left:0}
  .plan__price{font-size:2.5rem}
  .faq summary{grid-template-columns:30px 1fr 32px;gap:10px;padding:18px 0;font-size:16.5px}
  .faq summary::after{width:32px;height:32px}
  .faq__a{padding:0 0 22px 40px}
  .quotes{padding:12px;border-radius:var(--r-lg)}
}

/* --- mobile performance ----------------------------------------------------
   2026-08-23, founder: "on mobile the website feels super weird and glitchy".
   Phones choke on the desktop effects stack: five blur(56px) blobs animating
   under a backdrop-blurred fixed nav, blurred band tints sliding, glass cards
   re-blurring over moving colour. ≤900px every blur that MOVES is removed and
   backdrop-filter goes entirely; colour and drift stay, the radial gradient
   is already soft without the blur. Static blurs are rastered once, so the
   card corner lights and the proof panel keep a smaller blur. */
@media (max-width:900px){
  .mesh i{filter:none;opacity:calc(var(--mesh-a) * .72);width:92vw;height:92vw;min-width:0;min-height:0;
    background:radial-gradient(circle at 50% 50%,var(--c) 0%,transparent 62%)}
  .mesh i:nth-child(5){display:none}
  html[data-theme] .band::before,html[data-theme] .dark::before{animation:none;filter:blur(30px)}
  html[data-theme] .band .card:not(.card--color),html[data-theme] .band .plan,
  html[data-theme] .band .quote,html[data-theme] .band .step,.quote{
    backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.94)}
  .nav__row{backdrop-filter:none;-webkit-backdrop-filter:none;
    transition:background-color 800ms var(--nav-ease),border-color 800ms var(--nav-ease),color 800ms var(--nav-ease)}
  .nav.is-stuck .nav__row,.nav.is-open .nav__row{background:rgba(24,24,27,.98)}
  .card--color::before{filter:none}
  .quotes::before{filter:blur(24px)}
  .console,.vw__pill,.vw__panel{backdrop-filter:none;-webkit-backdrop-filter:none}
}