/* ============================================================
   Audeo Labs — design system
   Palette: deep forest night, aurora green, glacial cyan, ember
   ============================================================ */

:root {
  --bg: #05080a;
  --bg-2: #0a1114;
  --ink: #e9f2ec;
  --ink-dim: #9aa7a0;
  --ink-faint: #57695f;
  --aurora: #6dffa8;
  --glacier: #67e8f9;
  --ember: #f5c66b;
  --line: rgba(233, 242, 236, 0.09);
  --line-strong: rgba(233, 242, 236, 0.18);
  --card: rgba(13, 22, 24, 0.55);
  --font-display: "Urbanist", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(109, 255, 168, 0.25); }

/* ---------- GPU canvas + grain ---------- */

#gpu-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* The weight matrix (js/matrix.js): the site's backdrop, over the field and
   under the grain. */
#matrix-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1.4%); }
  50% { transform: translate(1.6%, -1%); }
  75% { transform: translate(-1%, -1.8%); }
  100% { transform: translate(0, 0); }
}

/* The grain's box reached half a viewport past every edge: four viewports,
   all of which the compositor rasterizes (20 MB of GPU memory at 1440 x 900,
   100 MB on a 4K screen), for a travel of 4% at most. Where the browser can
   work it out, the box starts 44% of the viewport nearer on every side, in
   whole steps of 8px so that it sits on the same pixels as before. The tile
   is laid out from where the larger box began and the travel is the same
   distance, so the grain is the same, pixel for pixel. */
@supports (inset: round(down, 44svw, 8px)) {
  .grain {
    --grain-x: round(down, 44svw, 8px);
    --grain-y: round(down, 44svh, 8px);
    inset: calc(-50% + var(--grain-y)) calc(-50% + var(--grain-x));
    background-position: calc(-1 * var(--grain-x)) calc(-1 * var(--grain-y));
    animation-name: grain-shift-near;
  }
}

/* grain-shift's shares of the larger box, as distances: p% of a box that is
   2 x --grain narrower, plus p% of that 2 x --grain. */
@keyframes grain-shift-near {
  0% { transform: translate(0, 0); }
  25% { transform: translate(calc(-2% - 0.04 * var(--grain-x)), calc(1.4% + 0.028 * var(--grain-y))); }
  50% { transform: translate(calc(1.6% + 0.032 * var(--grain-x)), calc(-1% - 0.02 * var(--grain-y))); }
  75% { transform: translate(calc(-1% - 0.02 * var(--grain-x)), calc(-1.8% - 0.036 * var(--grain-y))); }
  100% { transform: translate(0, 0); }
}

main { position: relative; z-index: 2; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10; /* above main (z-index 2) so the hero can't swallow nav clicks */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  transition: background 0.4s var(--ease-out), backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}

.nav--scrolled {
  background: rgba(5, 8, 10, 0.72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: var(--line);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

/* The wordmark: inline SVG, letters in currentColor, LABS in aurora. */
.nav__word { height: 22px; width: auto; display: block; }

.nav__links { display: flex; gap: 2rem; }

.nav__links a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  transition: color 0.25s;
  position: relative;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--aurora);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.btn svg { width: 17px; height: 17px; }

.btn:hover { transform: translateY(-2px); border-color: rgba(233, 242, 236, 0.4); }
.btn:active { transform: translateY(0); }

.btn--solid {
  background: var(--aurora);
  border-color: var(--aurora);
  color: #04120a;
  font-weight: 600;
}

.btn--solid:hover {
  box-shadow: 0 0 34px rgba(109, 255, 168, 0.35);
  border-color: var(--aurora);
}

.btn--ghost:hover { background: rgba(233, 242, 236, 0.05); }

.nav__cta { padding: 0.5rem 1.1rem; font-size: 0.82rem; }

.text-link {
  color: var(--aurora);
  text-decoration: none;
  border-bottom: 1px solid rgba(109, 255, 168, 0.4);
  transition: border-color 0.25s, color 0.25s;
}

.text-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- Hero ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem clamp(1.2rem, 6vw, 6rem) 6rem;
  position: relative;
}

.hero__inner { max-width: 900px; position: relative; z-index: 1; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aurora);
  border: 1px solid rgba(109, 255, 168, 0.28);
  background: rgba(109, 255, 168, 0.06);
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 2.2rem;
}

.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aurora);
  box-shadow: 0 0 10px var(--aurora);
  animation: pulse 2.2s ease-in-out infinite;
  flex: none;
}

.hero__tag--ember {
  color: var(--ember);
  border-color: rgba(245, 198, 107, 0.32);
  background: rgba(245, 198, 107, 0.07);
}

.pulse-dot--ember { background: var(--ember); box-shadow: 0 0 10px var(--ember); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero__title {
  font-size: clamp(2.6rem, 7.2vw, 6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin-bottom: 1.8rem;
}

.hero__title > span { display: block; }
.nowrap { white-space: nowrap; }


/* Home: the headline shares the hero with the Kea-B console. The wave rests
   low on the screen (js/field.js), so the hero keeps its last row clear for
   it: the row takes what the viewport has left once the rest of the hero
   (--hero-rest: top padding, the copy and a little air) is in, between
   --wave-min and --wave-max. */
.hero--kea {
  --wave-min: 132px;
  --wave-max: 320px;
  --hero-rest: 37rem;
  padding-top: 5.6rem;
  padding-bottom: 0;
}
.hero--kea .kea {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  grid-template-rows: auto auto clamp(var(--wave-min), 100svh - var(--hero-rest), var(--wave-max));
  grid-template-areas:
    "copy  demo"
    "offer demo"
    "wave  wave";
  align-content: center;
  align-items: center;
  gap: 0 clamp(2rem, 4.5vw, 4rem);
}
.hero--kea .kea__copy { grid-area: copy; align-self: end; max-width: none; }
.hero--kea .kea__offer { grid-area: offer; align-self: start; }
.hero--kea .demo { grid-area: demo; }
.hero__wave { grid-area: wave; align-self: stretch; pointer-events: none; }

.hero--kea .hero__tag { margin-bottom: 1.5rem; }
.hero__title--kea { font-size: clamp(2.35rem, 4.6vw, 4.25rem); letter-spacing: -0.022em; margin-bottom: 1.5rem; }

/* The proof, straight under the claim. Each item carries its separator on its
   left and the list is clipped by the same width, so a line that wraps never
   starts or ends on a stray dot. */
.hero__proof {
  --sep: 1.5em;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.3rem;
  margin-left: calc(-1 * var(--sep));
  clip-path: inset(0 0 0 var(--sep));
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  margin-bottom: 1.7rem;
}
.hero__proof b { color: var(--ink); font-weight: 500; }
.hero__proof li { position: relative; padding-left: var(--sep); }
.hero__proof li::before {
  content: "·";
  position: absolute;
  left: 0;
  width: var(--sep);
  text-align: center;
  color: var(--ink-faint);
}
.hero__proof .fn-ref { font-size: 0.8em; }

.hero--kea .hero__sub { max-width: 44ch; margin-bottom: 1.5rem; }
.hero--kea .hero__actions { align-items: center; gap: 0.9rem 1.5rem; }
.hero--kea .hero__actions .text-link { font-size: 0.92rem; }

/* The Kea family, behind the hero console: copy beside its numbers. */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.about__copy .kea__lede { max-width: 56ch; }

.fn-ref { color: var(--aurora); text-decoration: none; font-size: 0.55em; vertical-align: super; margin-left: 0.08em; }
.footnote {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 78ch;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--ink-faint);
}
.about__copy .kea__lede:last-of-type { margin-bottom: 1.9rem; }

.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ember) 5%, #ff9d6b 55%, #ff7d5e 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  max-width: 560px;
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  margin-bottom: 2.6rem;
}

.hero__sub strong { color: var(--ink); font-weight: 500; }

.hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ---------- Ticker ---------- */

.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 0.9rem 0;
  background: rgba(5, 8, 10, 0.5);
  backdrop-filter: blur(6px);
}

.ticker__track {
  display: flex;
  gap: 2.4rem;
  width: max-content;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
  animation: ticker 36s linear infinite;
}

.ticker__track i { color: var(--aurora); font-style: normal; font-size: 0.55rem; align-self: center; }

@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */

.section {
  padding: clamp(5rem, 11vw, 9.5rem) clamp(1.2rem, 6vw, 6rem);
  max-width: 1280px;
  margin: 0 auto;
  scroll-margin-top: 4.5rem; /* keep anchored sections clear of the fixed nav */
}

.section__head {
  display: flex;
  gap: clamp(1rem, 3vw, 2.6rem);
  margin-bottom: clamp(2.6rem, 6vw, 4.5rem);
  align-items: baseline;
}

.section__index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--aurora);
  letter-spacing: 0.1em;
  flex: none;
}

.section__head h2 {
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

.section__head .dim { color: var(--ink-faint); font-weight: 400; }

/* The rotating phrase (js/typewriter.js). Hidden copies of every phrase hold
   the width of the widest, so the heading never reflows while the text changes. */
.type { display: inline-grid; }
.type > * { grid-area: 1 / 1; white-space: nowrap; }
.type__size { visibility: hidden; padding-right: 0.22em; }
.type__text { color: var(--ink); }
.type__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-left: 0.07em;
  vertical-align: -0.07em;
  background: var(--aurora);
  animation: type-caret 1.1s steps(1) infinite;
}
@keyframes type-caret { 50% { opacity: 0; } }

/* ---------- Technology grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
}

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  backdrop-filter: blur(10px);
  padding: 1.7rem 1.6rem 1.5rem;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.45s, background 0.45s;
}

.card:hover {
  transform: translateY(-5px);
  border-color: rgba(109, 255, 168, 0.35);
  background: rgba(15, 26, 28, 0.7);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(109, 255, 168, 0.09), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.card:hover::before { opacity: 1; }

.card__glyph { width: 44px; height: 44px; margin-bottom: 1.2rem; color: var(--aurora); }
.card__glyph svg { width: 100%; height: 100%; }

.card h3 { font-size: 1.18rem; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 0.6rem; }

.card p { color: var(--ink-dim); font-size: 0.92rem; font-weight: 400; line-height: 1.65; }

.card__tag {
  position: absolute;
  top: 1.2rem; right: 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

/* ---------- Use-case feature ---------- */

.usecase {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 17, 20, 0.85), rgba(6, 10, 12, 0.92));
  backdrop-filter: blur(14px);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(233, 242, 236, 0.06);
  transition: transform 0.45s var(--ease-out), border-color 0.45s;
  max-width: 760px;
}

.usecase:hover {
  transform: translateY(-4px);
  border-color: rgba(109, 255, 168, 0.4);
}

.usecase__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid rgba(245, 198, 107, 0.32);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}

.usecase h3 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}

.usecase p {
  color: var(--ink-dim);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 58ch;
}

.usecase__go {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aurora);
}

.usecase__go::after { content: " →"; }

/* ---------- CTA ---------- */

.section--cta { text-align: center; }

.cta {
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.4rem, 5vw, 4rem);
  background:
    radial-gradient(600px 300px at 50% -10%, rgba(109, 255, 168, 0.12), transparent 70%),
    var(--card);
  backdrop-filter: blur(12px);
}

.cta h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.05; margin-bottom: 1.2rem; }

.cta p { color: var(--ink-dim); font-weight: 400; max-width: 480px; margin: 0 auto 2.2rem; }

.cta__form { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

.cta__form input {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink);
  background: rgba(5, 8, 10, 0.6);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.75rem 1.3rem;
  width: min(320px, 100%);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.cta__form input:focus { border-color: var(--aurora); box-shadow: 0 0 0 3px rgba(109, 255, 168, 0.15); }

.cta__via { display: flex; gap: 0.6rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 1.4rem; }
.cta__via[hidden] { display: none; }
.cta__via-label { flex-basis: 100%; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-dim); margin-bottom: 0.2rem; }

/* ---------- Footer ---------- */

.footer {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2rem;
  padding: 3.5rem clamp(1.2rem, 6vw, 6rem) 3rem;
  border-top: 1px solid var(--line);
  max-width: 1280px;
  margin: 0 auto;
}

.footer__col { display: flex; flex-direction: column; gap: 0.55rem; }

.footer__brand { font-weight: 600; font-size: 1.05rem; }

.footer__line { color: var(--ink-faint); font-size: 0.85rem; font-weight: 400; line-height: 1.6; }

.footer__head {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}

.footer__col a { color: var(--ink-dim); text-decoration: none; font-size: 0.88rem; transition: color 0.25s; }
.footer__col a:hover { color: var(--aurora); }

.footer__col--right { text-align: left; }

.footer__mono { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint); }

/* ---------- Kea-B live demo ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#gpu-canvas { transition: opacity 0.8s var(--ease-out); }
/* Kea-B has the GPU: the frozen field steps back. */
.field-paused #gpu-canvas { opacity: 0.5; }

.kea {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5.5vw, 5rem);
  align-items: start;
}

.kea__copy { max-width: 500px; }


.nowrap { white-space: nowrap; }

.kea__lede {
  color: var(--ink-dim);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.35vw, 1.13rem);
  line-height: 1.72;
  margin-bottom: 2.3rem;
}

.kea__lede--name { margin-bottom: 1.1rem; }
.kea__set { white-space: nowrap; }
.kea__t { color: var(--ink); font-weight: 600; }

.kea__tern {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--ink);
  background: rgba(233, 242, 236, 0.05);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.04em 0.36em;
  white-space: nowrap;
}

.kea__tern--neg { color: var(--glacier); border-color: rgba(103, 232, 249, 0.25); background: rgba(103, 232, 249, 0.06); }
.kea__tern--pos { color: var(--aurora); border-color: rgba(109, 255, 168, 0.25); background: rgba(109, 255, 168, 0.06); }

.kea__stats { list-style: none; border-top: 1px solid var(--line); margin-bottom: 1.9rem; }

.kea__stats li {
  display: grid;
  grid-template-columns: 7.4rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}

.kea__v {
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 2.3vw, 1.8rem);
  color: var(--aurora);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.kea__k { font-size: 0.88rem; color: var(--ink-dim); font-weight: 400; }

.kea__card {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aurora);
  text-decoration: none;
  transition: color 0.25s;
}

.kea__cards { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.kea__card::after { content: " ↗"; }
.kea__card:hover { color: var(--ink); }

/* The console has no panel of its own: its controls sit straight on the page,
   over the matrix and the field. */
.demo {
  --lvl: 0;
  /* The radius of the field's disk around "Try Kea-B": the DISK_* numbers in
     js/field.js. Reduced motion has no disk (see below). */
  --disk: min(33vh, 48vw, 320px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.demo__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-height: 300px;
}

.demo__panel { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.demo__panel[hidden] { display: none; }
.demo__panel--center { align-items: center; text-align: center; }
.demo__panel--in { animation: demo-in 0.55s var(--ease-out) both; }

@keyframes demo-in { from { opacity: 0; transform: translateY(8px); } }

.demo__try {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The note a phone gets: below the disk (whose outline rarely reaches its full
   radius), without moving the button off the disk's centre. */
.demo__note {
  position: absolute;
  top: calc(50% + 0.9 * var(--disk) + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 24ch;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ember);
  border: 1px solid rgba(245, 198, 107, 0.28);
  background: rgba(245, 198, 107, 0.06);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
}

/* "Try Kea-B": a small mint circle with its label under it, at the centre of
   the field's disk. The disk's dark centre is drawn around the button's box,
   so its padding is the room the two get in there. */
.demo__load {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border: 0;
  border-radius: 1.6rem;
  background: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.demo__disc {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  color: #04120a;
  background: var(--aurora);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.demo__disc svg { width: 25px; height: 25px; }
.demo__load:hover .demo__disc { transform: scale(1.05); box-shadow: 0 0 0 7px rgba(109, 255, 168, 0.12), 0 0 44px rgba(109, 255, 168, 0.4); }
.demo__load:active .demo__disc { transform: scale(0.97); }

.demo__link {
  font: inherit;
  color: var(--ink-dim);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  cursor: pointer;
  padding: 0;
  transition: color 0.25s, border-color 0.25s;
}

.demo__link:hover { color: var(--ink); border-bottom-color: var(--ink-dim); }
.demo__link[hidden] { display: none; }

.demo__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.demo__msg { font-size: 1.02rem; line-height: 1.6; color: var(--ink); max-width: 48ch; }
.demo__msg--center { margin-bottom: 1.3rem; }

.demo__notice {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ember);
  text-align: center;
  border: 1px solid rgba(245, 198, 107, 0.24);
  background: rgba(245, 198, 107, 0.05);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  animation: demo-in 0.45s var(--ease-out) both;
}

.demo__notice[hidden] { display: none; }

/* Loading */

.load { width: 100%; max-width: 380px; margin: 0 auto; }

.load__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

.load__phase { font-size: 1.08rem; font-weight: 500; letter-spacing: -0.01em; }

.load__count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.load__bar {
  position: relative;
  height: 3px;
  margin: 1rem 0 0.85rem;
  border-radius: 99px;
  background: rgba(233, 242, 236, 0.08);
  overflow: hidden;
}

.load__bar span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--glacier), var(--aurora));
  box-shadow: 0 0 14px rgba(109, 255, 168, 0.7);
  transition: transform 0.25s linear;
}

/* Verifying and compiling have little or nothing to count: a light sweeps the
   whole bar meanwhile, filled or not, so it is never dark while work goes on. */
.demo[data-phase="verify"] .load__bar::after,
.demo[data-phase="compile"] .load__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(233, 255, 242, 0.75), transparent);
  background-size: 30% 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.1s linear infinite;
}

/* Compiling (or packing, on the CPU) reports nothing until it is done, in one
   burst. The fill creeps forward meanwhile: a guess, not a measurement. */
.demo[data-phase="compile"] .load__bar span { animation: load-creep 4s cubic-bezier(0.15, 0.6, 0.3, 1) both; }
@keyframes load-creep { from { transform: scaleX(0); } to { transform: scaleX(0.92); } }

@keyframes shimmer { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.load__row--sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* Record button */

.rec {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  color: #04120a;
  background: var(--aurora);
  box-shadow: 0 0 0 7px rgba(109, 255, 168, 0.1), 0 0 44px rgba(109, 255, 168, 0.28);
  transition: transform 0.35s var(--ease-out), background 0.35s, color 0.35s, box-shadow 0.35s;
}

.rec > * { grid-area: 1 / 1; }
.rec:hover { transform: scale(1.04); box-shadow: 0 0 0 9px rgba(109, 255, 168, 0.14), 0 0 60px rgba(109, 255, 168, 0.42); }
.rec:active { transform: scale(0.97); }
.rec:disabled { cursor: progress; }

.rec__mic { width: 30px; height: 30px; }
.rec__stop { display: none; width: 22px; height: 22px; border-radius: 5px; background: currentColor; }

.rec__ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(109, 255, 168, 0.26);
  pointer-events: none;
  animation: rec-breathe 3.2s ease-in-out infinite;
}

@keyframes rec-breathe {
  0%, 100% { transform: scale(0.94); opacity: 0.35; }
  50% { transform: scale(1.06); opacity: 1; }
}

.rec__spin {
  display: none;
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(103, 232, 249, 0.12);
  border-top-color: var(--glacier);
  animation: spin 0.85s linear infinite;
}

@keyframes spin { to { transform: rotate(1turn); } }

.demo[data-state="recording"] .rec {
  color: #1d0804;
  background: #ff7d5e;
  box-shadow:
    0 0 0 calc(7px + var(--lvl) * 14px) rgba(255, 125, 94, 0.13),
    0 0 calc(34px + var(--lvl) * 54px) rgba(255, 125, 94, 0.38);
  transition: transform 0.35s var(--ease-out), background 0.35s, color 0.35s, box-shadow 0.09s linear;
}

.demo[data-state="recording"] .rec__ring {
  border-color: rgba(255, 125, 94, 0.4);
  animation: none;
  transform: scale(calc(1 + var(--lvl) * 0.3));
  opacity: calc(0.35 + var(--lvl) * 0.65);
  transition: transform 0.09s linear, opacity 0.09s linear;
}

.demo[data-state="recording"] .rec__mic { display: none; }
.demo[data-state="recording"] .rec__stop { display: block; }

.demo[data-state="transcribing"] .rec,
.demo[data-state="arming"] .rec {
  color: var(--glacier);
  background: rgba(103, 232, 249, 0.07);
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.22);
  transform: none;
}

.demo[data-state="transcribing"] .rec__ring,
.demo[data-state="arming"] .rec__ring { display: none; }
.demo[data-state="transcribing"] .rec__spin,
.demo[data-state="arming"] .rec__spin { display: block; }

.rec__meta { display: flex; flex-direction: column; align-items: center; }
.rec__label { margin-top: 1.55rem; font-size: 1.06rem; font-weight: 500; letter-spacing: -0.01em; }

.rec__timer {
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.demo[data-state="recording"] #kea-elapsed { color: #ff9d85; }

.rec__private {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.rec__private svg { width: 12px; height: 12px; color: var(--aurora); }

.rec__limit {
  margin-top: 0.75rem;
  visibility: hidden;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 0.4s;
}

.demo[data-state="recording"] .rec__limit { opacity: 1; visibility: visible; }

/* Result */

.demo__panel[data-panel="result"] { justify-content: flex-start; }

.result__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }

.result__src {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result__text {
  font-size: clamp(1.14rem, 1.75vw, 1.4rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--ink);
  overflow-wrap: break-word;
}

.result__text .w {
  display: inline-block;
  animation: word-in 0.6s var(--ease-out) both;
  animation-delay: var(--t, 0ms);
}

@keyframes word-in {
  from { opacity: 0; transform: translateY(0.4em); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

.result__empty { color: var(--ink-faint); }

.result__stats {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.25rem;
  margin-top: 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--ink-faint);
  animation: demo-in 0.6s var(--ease-out) both;
  animation-delay: var(--t, 0ms);
}

.result__stats span:not(:last-child)::after { content: "·"; margin: 0 0.6rem; color: var(--ink-faint); }
.result__stats b { color: var(--ink); font-weight: 500; }
.result__stats span:nth-child(3) b { color: var(--aurora); }

.result__credit {
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.6;
  color: var(--ink-faint);
  opacity: 0.8;
  animation: demo-in 0.6s var(--ease-out) both;
  animation-delay: var(--t, 0ms);
}

.result__credit[hidden] { display: none; }
.result__credit a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.result__credit a:hover { color: var(--ink-dim); }

.result__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }

.btn--sm { padding: 0.55rem 1.05rem; font-size: 0.82rem; }
.btn--sm svg { width: 15px; height: 15px; }

/* Sample chips */

.samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 0.75rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.samples[hidden] { display: none; }
.demo[data-state="result"] .samples { justify-content: flex-start; }

.samples__label { font-size: 0.8rem; color: var(--ink-faint); }
.samples__chips { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 0.5rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1;
  color: var(--ink-dim);
  background: rgba(233, 242, 236, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.5rem 0.8rem 0.5rem 0.65rem;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s, opacity 0.25s, transform 0.3s var(--ease-out);
}

.chip > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; line-height: 1.25; margin: -0.15em 0; }
.chip svg { width: 9px; height: 9px; flex: none; color: var(--aurora); }
.chip__len { font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-faint); }
.chip:hover { color: var(--ink); border-color: rgba(109, 255, 168, 0.45); background: rgba(109, 255, 168, 0.06); transform: translateY(-1px); }
.chip--on { color: var(--ink); border-color: rgba(109, 255, 168, 0.55); background: rgba(109, 255, 168, 0.08); }
.chip:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* Unsupported: precomputed transcripts */

.pre { margin-top: 1.5rem; }
.pre[hidden] { display: none; }

.pre__list {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.pre__item { border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem 1rem; background: rgba(233, 242, 236, 0.02); }
.pre__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-bottom: 0.45rem; }
.pre__title { font-size: 0.9rem; font-weight: 500; }
.pre__meta { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-faint); }
.pre__text { font-size: 0.92rem; font-weight: 400; line-height: 1.6; color: var(--ink-dim); }
.pre__credit { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.6rem; line-height: 1.6; color: var(--ink-faint); opacity: 0.8; }

/* Focus */

.demo :focus-visible,
.kea__copy a:focus-visible,
.kea__offer a:focus-visible {
  outline: 2px solid var(--glacier);
  outline-offset: 3px;
}

.rec:focus-visible { outline-offset: 22px; }
.demo:focus { outline: none; }

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}

.reveal--in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .demo { --disk: 6.2rem; } /* no disk: the note sits just under the button */
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track, .grain, .pulse-dot { animation: none; }
  html { scroll-behavior: auto; }
  .rec__ring, .demo__panel--in, .demo__notice, .result__stats,
  .result__text .w, .load__bar::after { animation: none !important; }
  .rec__spin { animation-duration: 2.4s; }
  .result__credit { animation: none !important; }
  #gpu-canvas, .load__bar span { transition: none; }
  .type__caret { display: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .kea, .hero--kea .kea, .about { grid-template-columns: minmax(0, 1fr); }
  .kea__copy { max-width: 620px; }
  /* One column: the wave rests in a row between the headline and the console,
     and the offer follows the console so the demo stays near the top. */
  .hero--kea { --wave-min: 72px; --wave-max: 104px; padding-bottom: 3.5rem; }
  .hero--kea .kea {
    grid-template-rows: auto minmax(var(--wave-min), var(--wave-max)) auto auto;
    grid-template-areas: "copy" "wave" "demo" "offer";
  }
  .hero--kea .kea__copy { max-width: 620px; }
  .hero--kea .hero__proof { margin-bottom: 0; }
  .hero--kea .kea__offer { margin-top: 2.2rem; }
  /* The note under the disk needs the room the idle panel does not have. */
  .demo[data-state="idle"]:has(.demo__note:not([hidden])) { padding-bottom: max(0px, calc(0.9 * var(--disk) - 2rem)); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .hero__proof { font-size: 0.74rem; }
  .kea__stats li { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.9rem; }
  .demo__body { min-height: 230px; }
  /* A phone's disk is small: the button keeps its proportions and gets more room in the dark centre. */
  .demo__load { gap: 0.85rem; padding: 2.4rem; font-size: 1.2rem; }
  .demo__disc { width: 52px; height: 52px; }
  .demo__disc svg { width: 22px; height: 22px; }
  .rec { width: 76px; height: 76px; }
  .result__head { flex-direction: column; gap: 0.35rem; }
  .result__src { white-space: normal; }
}

@media (max-width: 400px) {
  .hero__title--kea { font-size: 2.1rem; }
}