/* ══════════════════════════════════════════════════════════════
   Rokid Nexus — site
   Dark editorial-optical. The HUD's green is used as light,
   never as a theme. Copper carries the roadmap's "in flight".
   ══════════════════════════════════════════════════════════════ */

:root {
  --ink:        #05070a;
  --ink-1:      #090d12;
  --ink-2:      #0d1319;
  --line:       rgba(233, 244, 238, .09);
  --line-soft:  rgba(233, 244, 238, .05);
  --paper:      #edf2ef;
  --muted:      #97a39e;
  --faint:      #6a7570;

  --glow:       #3cf07b;
  --glow-deep:  #17c757;
  --copper:     #e8a45f;
  --slate:      #7d8ea3;
  --never:      #cf7b6d;

  /* the renderer's own values, kept honest */
  --phosphor:   #71ff97;
  --hud-muted:  #7e9585;
  --hud-dim:    #47584d;
  --hud-edge:   #1d3226;

  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --serif:   "Newsreader", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1200px;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1rem, .55vw + .88rem, 1.115rem);
  line-height: 1.62;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: -20vh -10vw;
  z-index: -2;
  background:
    radial-gradient(46vw 46vw at 76% 4%,  rgba(60, 240, 123, .10), transparent 62%),
    radial-gradient(40vw 40vw at 6% 62%,  rgba(125, 142, 163, .085), transparent 66%),
    radial-gradient(60vw 40vw at 50% 108%, rgba(232, 164, 95, .06), transparent 68%);
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(60, 240, 123, .26); color: #fff; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 3px; }

/* ─────────────────────────  type  ───────────────────────── */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 620;
  letter-spacing: -.032em;
  line-height: 1.03;
  margin: 0;
  font-variation-settings: "opsz" 42;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .705rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--glow);
  margin: 0 0 1.5rem;
  opacity: .92;
}

code {
  font-family: var(--mono);
  font-size: .84em;
  color: var(--glow);
  background: rgba(60, 240, 123, .07);
  border: 1px solid rgba(60, 240, 123, .16);
  border-radius: 4px;
  padding: .07em .34em;
}

/* ─────────────────────────  nav  ───────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: .85rem var(--pad);
  background: rgba(5, 7, 10, .62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background .4s;
}
.nav.is-stuck { border-bottom-color: var(--line); background: rgba(5, 7, 10, .86); }

.nav__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.02em;
  margin-right: auto;
}
.nav__brand img { border-radius: 8px; }

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2rem);
  font-family: var(--display);
  font-size: .875rem;
  font-weight: 480;
  color: var(--muted);
}
.nav__links a { transition: color .25s; }
.nav__links a:hover { color: var(--paper); }

.nav__cta {
  font-family: var(--display);
  font-size: .84rem;
  font-weight: 560;
  padding: .5rem 1rem;
  border: 1px solid rgba(60, 240, 123, .32);
  border-radius: 999px;
  color: var(--glow);
  white-space: nowrap;
  transition: background .3s, box-shadow .3s, transform .3s;
}
.nav__cta:hover { background: rgba(60, 240, 123, .1); box-shadow: 0 0 26px -6px rgba(60, 240, 123, .5); }

@media (max-width: 940px) { .nav__links { display: none; } }

/* ─────────────────────────  hero  ───────────────────────── */

.hero {
  position: relative;
  padding: clamp(3.5rem, 9vw, 8rem) var(--pad) clamp(4rem, 10vw, 9rem);
  overflow: hidden;
}

.hero__field {
  position: absolute;
  top: 50%;
  right: -14vw;
  width: min(1100px, 96vw);
  aspect-ratio: 1;
  transform: translateY(-52%);
  z-index: -1;
}
.hero__field svg { width: 100%; height: 100%; }
.hero__field .rings circle { fill: none; stroke: rgba(60, 240, 123, .14); stroke-width: 1; }
.hero__field .rings circle:nth-child(2) { stroke-dasharray: 3 9; }
.hero__field .mesh line { stroke: rgba(60, 240, 123, .17); stroke-width: 1; }
.hero__field .nodes circle { fill: var(--glow); filter: drop-shadow(0 0 7px rgba(60, 240, 123, .85)); }
.hero__field .nodes .n0 { animation: pulse 5.5s ease-in-out infinite; }
.hero__field .nodes .n1 { animation: pulse 5.5s ease-in-out .6s infinite; }
.hero__field .nodes .n2 { animation: pulse 5.5s ease-in-out 1.5s infinite; }
.hero__field .nodes .n3 { animation: pulse 5.5s ease-in-out 2.4s infinite; }
.hero__field .nodes .n4 { animation: pulse 5.5s ease-in-out 3.3s infinite; }

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

.hero__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.8rem, 6.1vw, 5.3rem);
  font-weight: 680;
  line-height: .95;
  letter-spacing: -.045em;
  font-variation-settings: "opsz" 96;
  margin-bottom: 1.6rem;
}
.hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--glow);
  text-shadow: 0 0 46px rgba(60, 240, 123, .45);
}

.lede {
  font-size: clamp(1.06rem, .5vw + .95rem, 1.28rem);
  color: var(--muted);
  max-width: 34em;
  margin: 0 0 2.4rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.8rem; }

.btn {
  font-family: var(--display);
  font-weight: 570;
  font-size: .96rem;
  letter-spacing: -.01em;
  padding: .82rem 1.4rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, background .28s, border-color .28s;
}
.btn--solid {
  background: linear-gradient(180deg, var(--glow), var(--glow-deep));
  color: #04220f;
  box-shadow: 0 12px 40px -14px rgba(60, 240, 123, .75);
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 18px 46px -12px rgba(60, 240, 123, .85); }
.btn__meta { font-family: var(--mono); font-size: .68rem; opacity: .62; letter-spacing: .04em; }
.btn--ghost { border: 1px solid var(--line); color: var(--paper); background: rgba(255,255,255,.015); }
.btn--ghost:hover { border-color: rgba(60, 240, 123, .4); background: rgba(60, 240, 123, .05); transform: translateY(-2px); }

.hero__facts {
  list-style: none;
  padding: 1.4rem 0 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 460;
  color: var(--faint);
}
.hero__facts b {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -.03em;
  margin-right: .42rem;
  vertical-align: -.06em;
}

.hero__optic { position: relative; width: 100%; max-width: 372px; justify-self: end; margin-bottom: 2.5rem; }

.optic {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(60, 240, 123, .2);
  background: #000;
  transform: rotate(-1.4deg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 40px 90px -34px rgba(0,0,0,.95),
    0 0 90px -22px rgba(60, 240, 123, .42);
  transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.optic:hover { transform: rotate(-.5deg) scale(1.012); }
.optic img { width: 100%; }
.optic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 46%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.optic figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2.4rem .95rem .8rem;
  font-family: var(--mono);
  font-size: .59rem;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: rgba(237, 242, 239, .8);
  background: linear-gradient(transparent, rgba(3, 8, 5, .94));
}

.optic--phone {
  position: absolute;
  right: -14%;
  bottom: -3.4rem;
  width: 46%;
  transform: rotate(3.5deg);
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 70px -26px rgba(0,0,0,1);
}
.optic--phone img { width: 100%; height: auto; }
.optic--phone:hover { transform: rotate(1.6deg) scale(1.02); }
.optic--phone::after { background: linear-gradient(200deg, rgba(255,255,255,.05), transparent 40%); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__optic { max-width: 480px; margin-inline: auto; width: 100%; }
  .hero__field { right: -40vw; opacity: .6; }
}

/* ────────────────────────  sections  ──────────────────────── */

.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(4.5rem, 10vw, 8.5rem) var(--pad); position: relative; }
.section__head { max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head h2 { font-size: clamp(1.95rem, 4.2vw, 3.35rem); font-variation-settings: "opsz" 72; margin-bottom: 1.05rem; }
.section__sub { color: var(--muted); font-size: 1.06rem; margin: 0; max-width: 42em; }
.section__head--rail { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; max-width: none; }
.section__head--rail > div { max-width: 48rem; }

.tick {
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 14px rgba(60, 240, 123, .9);
  margin-bottom: 1.5rem;
  position: relative;
}
.tick::before {
  content: "";
  position: absolute;
  left: 4px; bottom: 100%;
  width: 1px; height: clamp(2.2rem, 6vw, 4.6rem);
  background: linear-gradient(transparent, rgba(60, 240, 123, .5));
}

/* ══════════════════  THE DISPLAY — live stage  ══════════════════ */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}

.stage__optic { position: sticky; top: 5.5rem; }

.hud {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 480 / 640;
  background: #000;
  border: 1px solid var(--hud-edge);
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--mono);
  color: var(--phosphor);
  box-shadow: 0 40px 90px -40px #000, 0 0 80px -26px rgba(60, 240, 123, .35);
  user-select: none;
}
.hud::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(0,0,0,.6));
}

/* home layer — always underneath, hidden only by a full surface */
.hud__home { position: absolute; inset: 0; transition: opacity 240ms cubic-bezier(.4,0,1,1); }
.hud__hint {
  position: absolute;
  top: 43%; left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-size: 3cqw;
  color: var(--hud-muted);
}
.hud__dock {
  position: absolute;
  top: 51%; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 4cqw;
  font-size: 3.4cqw;
  color: var(--hud-dim);
}
.hud__dock .on { color: var(--phosphor); }
.hud__status {
  position: absolute;
  left: 3.5cqw; right: 3.5cqw; top: 57%;
  display: flex;
  justify-content: space-between;
  font-size: 2.7cqw;
  color: var(--hud-muted);
}

/* every tier hides by default; a scene shows its own */
.hud__ambient, .hud__pin, .hud__act, .hud__notice, .hud__surface {
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms cubic-bezier(0,0,.2,1), transform 280ms cubic-bezier(0,0,.2,1), visibility 0s 280ms;
}
[data-scene="ambient"]  .hud__ambient,
[data-scene="pin"]      .hud__pin,
[data-scene="activity"] .hud__act,
[data-scene="notice"]   .hud__notice,
[data-scene="surface"]  .hud__surface {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ambient */
.hud__ambient {
  position: absolute;
  top: 26%; left: 6cqw; right: 6cqw;
  margin: 0;
  text-align: center;
  font-size: 4.4cqw;
  line-height: 1.4;
}
.hud__ambient span { transition: opacity 180ms linear; }
.hud.is-refreshing .hud__ambient span { opacity: 0; }

/* pin */
.hud__pin {
  position: absolute;
  top: 4cqw; right: 4cqw;
  padding: 1.6cqw 2.4cqw;
  border: 1px solid var(--hud-edge);
  font-size: 2.9cqw;
  color: var(--phosphor);
  background: #000;
  transform: translateY(-6px);
}
[data-scene="pin"] .hud__pin { transform: none; }

/* activity — one element, two forms */
.hud__act {
  position: absolute;
  top: 4cqw; right: 4cqw;
  width: 46%;
  height: 9cqw;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--hud-edge);
  border-radius: 2cqw;
  padding: 2cqw 2.6cqw;
  transition:
    width 280ms cubic-bezier(0,0,.2,1),
    height 280ms cubic-bezier(0,0,.2,1),
    opacity 280ms cubic-bezier(0,0,.2,1),
    visibility 0s 280ms;
}
[data-scene="activity"][data-step="1"] .hud__act { width: 92%; height: 46cqw; }

.hud__act-chip, .hud__act-panel { transition: opacity 280ms cubic-bezier(0,0,.2,1); }
.hud__act-chip { font-size: 3cqw; white-space: nowrap; overflow: hidden; }
.hud__act-chip .g { color: var(--phosphor); }
.hud__act-panel { position: absolute; inset: 2cqw 2.6cqw; opacity: 0; pointer-events: none; }
[data-scene="activity"][data-step="1"] .hud__act { padding-bottom: 3cqw; }
[data-scene="activity"][data-step="1"] .hud__act-chip { opacity: 0; }
[data-scene="activity"][data-step="1"] .hud__act-panel { position: static; opacity: 1; }

.hud__act-top { display: flex; align-items: baseline; gap: 2cqw; font-size: 3.8cqw; }
.hud__act-top b { font-weight: 700; }
.hud__act-bar { margin: 2.2cqw 0 1.6cqw; height: 1.2cqw; border: 1px solid var(--hud-edge); }
.hud__act-bar i { display: block; height: 100%; width: 62%; background: var(--phosphor); opacity: .75; }
.hud__act-sub { margin: 0; font-size: 2.8cqw; color: var(--hud-muted); }

/* notice */
.hud__notice {
  position: absolute;
  top: 3cqw; left: 4%; right: 4%;
  background: #000;
  border: 1px solid var(--hud-edge);
  border-radius: 2cqw;
  padding: 2.6cqw 3cqw;
  transform: translateY(-8%);
}
[data-scene="notice"] .hud__notice { transform: none; }
[data-scene="notice"][data-step="3"] .hud__notice {
  opacity: 0;
  transform: translateY(-6%);
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(.4,0,1,1);
}
.hud__notice .t { margin: 0; font-size: 4cqw; font-weight: 700; }
.hud__notice .b { margin: 1.2cqw 0 0; font-size: 3.1cqw; color: var(--hud-muted); line-height: 1.45; }
.hud__notice .f { margin: 1.6cqw 0 0; font-size: 2.7cqw; color: var(--hud-muted); }

.hud__row { display: flex; gap: 1.8cqw; margin-top: 2cqw; }
[data-scene="notice"][data-step="2"] .hud__row { opacity: 0; transition: opacity 240ms cubic-bezier(.4,0,1,1); }
.hud__chip {
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  border: 1px solid var(--hud-edge);
  border-radius: 1cqw;
  padding: 1.1cqw 1.8cqw;
  font-size: 2.7cqw;
  color: var(--hud-muted);
  white-space: nowrap;
  transition: color 180ms linear, border-color 180ms linear;
}
.hud__chip.sel { border-color: var(--phosphor); border-width: 2px; padding: calc(1.1cqw - 1px) calc(1.8cqw - 1px); color: var(--phosphor); }

/* surface */
.hud__surface { position: absolute; inset: 0; background: #000; padding: 5cqw 4cqw; transform: scale(.985); }
[data-scene="surface"] .hud__surface { transform: none; }
[data-scene="surface"] .hud__home { opacity: 0; }
.hud__surface-title { margin: 0 0 5cqw; font-size: 4.4cqw; font-weight: 700; color: #fff; }
.hud__surface ul { list-style: none; margin: 0; padding: 0; }
.hud__surface li { display: flex; align-items: center; gap: 2.4cqw; margin-bottom: 3.2cqw; font-size: 3.2cqw; }
.hud__surface .ln {
  min-width: 8cqw;
  text-align: center;
  background: var(--phosphor);
  color: #000;
  border-radius: 2cqw;
  padding: .4cqw 1cqw;
  font-weight: 700;
}
.hud__surface .dest { flex: 1; color: #dfe9e2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hud__surface .eta { color: var(--phosphor); font-weight: 700; }
.hud__surface .eta.now { color: var(--phosphor); }
.hud__surface-foot { margin: 5cqw 0 0; text-align: center; font-size: 2.7cqw; color: var(--hud-dim); }

.stage__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--faint);
  text-transform: uppercase;
}
.stage__toggle {
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .32rem .8rem;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}
.stage__toggle:hover { color: var(--glow); border-color: rgba(60, 240, 123, .4); }

/* the tier list */
.stage__tiers { list-style: none; margin: 0; padding: 0; counter-reset: tier; }
.stage__tiers li { border-top: 1px solid var(--line-soft); }
.stage__tiers li:last-child { border-bottom: 1px solid var(--line-soft); }
.stage__tiers button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 1.15rem 1.2rem 1.15rem 1.6rem;
  position: relative;
  transition: background .4s;
}
.stage__tiers button::before {
  content: "";
  position: absolute;
  left: 0; top: 1.55rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--faint);
  transition: background .4s, box-shadow .4s, transform .4s;
}
.stage__tiers b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: -.02em;
  display: block;
  margin-bottom: .3rem;
  transition: color .4s;
}
.stage__tiers span { color: var(--muted); font-size: .99rem; display: block; max-width: 44em; }
.stage__tiers li.is-live { background: linear-gradient(90deg, rgba(60, 240, 123, .06), transparent 70%); }
.stage__tiers li.is-live button::before { background: var(--glow); box-shadow: 0 0 12px rgba(60, 240, 123, .9); transform: scale(1.25); }
.stage__tiers li.is-live b { color: var(--glow); }
.stage__tiers button:hover b { color: var(--paper); }
.stage__tiers li.is-live button:hover b { color: var(--glow); }

.stage__foot {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-left: 1.15rem;
  border-left: 1px solid rgba(60, 240, 123, .35);
  color: var(--muted);
  font-size: 1rem;
  max-width: 60em;
}
.stage__foot b { color: var(--paper); font-weight: 400; }
.stage__foot a { color: var(--glow); border-bottom: 1px solid rgba(60, 240, 123, .3); }

@media (max-width: 940px) {
  .stage { grid-template-columns: 1fr; }
  .stage__optic { position: static; max-width: 340px; margin: 0 auto; }
}

/* ═══════════════════  PLUGINS — horizontal rail  ═══════════════════ */

.rail__nav { display: flex; gap: .5rem; flex-shrink: 0; }
.rail__nav button {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
.rail__nav button:hover { color: var(--glow); border-color: rgba(60, 240, 123, .4); background: rgba(60, 240, 123, .06); }

.rail {
  display: flex;
  gap: clamp(.9rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: .3rem calc(var(--pad) + .3rem) 1.4rem;
  margin: 0 calc(var(--pad) * -1);
}
.rail::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 clamp(215px, 23vw, 268px);
  scroll-snap-align: center;
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(13, 19, 25, .7), rgba(7, 10, 14, .7));
  transition: border-color .4s, transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .5s;
}
.slide:hover {
  border-color: rgba(60, 240, 123, .3);
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -34px #000, 0 0 60px -30px rgba(60, 240, 123, .45);
}
.slide img { width: 100%; aspect-ratio: 480 / 640; background: #000; border-bottom: 1px solid var(--line-soft); }
.slide figcaption, .slide--text div { padding: 1rem 1.1rem 1.25rem; }
.slide b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  display: block;
  margin-bottom: .35rem;
}
.slide span { color: var(--muted); font-size: .94rem; display: block; }
/* the two plugins with nothing to screenshot get a drawn card instead */
.slide--card {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(60, 240, 123, .1), transparent 62%),
    linear-gradient(180deg, rgba(14, 22, 28, .85), rgba(6, 9, 13, .9));
  position: relative;
}
.slide--card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(60, 240, 123, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 240, 123, .055) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 70% at 50% 12%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 70% at 50% 12%, #000 20%, transparent 72%);
  pointer-events: none;
}
.slide__mark {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 1.6rem;
  color: var(--glow);
  position: relative;
}
.slide__mark svg {
  width: min(58%, 128px);
  height: auto;
  opacity: .62;
  filter: drop-shadow(0 0 18px rgba(60, 240, 123, .35));
  transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.3,1);
}
.slide--card:hover .slide__mark svg { opacity: .92; transform: translateY(-3px); }
.slide__tag {
  display: inline-block !important;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--glow) !important;
  border: 1px solid rgba(60, 240, 123, .3);
  border-radius: 999px;
  padding: .2rem .55rem;
  margin-bottom: .7rem;
}
.slide--card figcaption { border-top: 1px solid var(--line-soft); position: relative; }

.grid__foot {
  margin: clamp(1.2rem, 3vw, 2rem) 0 0;
  color: var(--muted);
  font-size: 1rem;
  max-width: 54em;
  padding-left: 1.15rem;
  border-left: 1px solid rgba(60, 240, 123, .35);
}
.grid__foot b { color: var(--paper); font-weight: 400; font-family: var(--display); font-size: .95em; }

@media (max-width: 700px) {
  .section__head--rail { flex-direction: column; align-items: flex-start; }
  .rail__nav { display: none; }
}

/* ─────────────────────────  setup  ───────────────────────── */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.steps li { position: relative; padding-top: 2.6rem; }
.steps li::before {
  content: "";
  position: absolute;
  top: 1.02rem; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(60, 240, 123, .45), rgba(60, 240, 123, .06));
}
.steps__n {
  position: absolute;
  top: 0; left: 0;
  width: 2.05rem; height: 2.05rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  border: 1px solid rgba(60, 240, 123, .45);
  color: var(--glow);
  font-family: var(--mono);
  font-size: .78rem;
  box-shadow: 0 0 22px -6px rgba(60, 240, 123, .7);
}
.steps h3 { font-size: 1.14rem; margin-bottom: .5rem; }
.steps p { margin: 0; color: var(--muted); font-size: .98rem; }

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

/* ─────────────────────────  roadmap  ───────────────────────── */

.section--roadmap { border-top: 1px solid var(--line-soft); }
.road { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.road__group {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  scroll-margin-top: 5.5rem;
}
.road__group:target .chip { box-shadow: 0 0 0 4px rgba(60, 240, 123, .1); }
.road__meta p { color: var(--muted); font-size: .95rem; margin: .95rem 0 0; max-width: 22em; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .38rem .8rem .38rem .68rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.chip--shipped   { color: var(--glow); background: rgba(60, 240, 123, .07); }
.chip--building  { color: var(--copper); background: rgba(232, 164, 95, .07); }
.chip--next      { color: var(--slate); background: rgba(125, 142, 163, .07); }
.chip--exploring { color: var(--faint); background: rgba(255,255,255,.02); }

.road__items { list-style: none; margin: 0; padding: 0 0 0 1.85rem; border-left: 1px solid var(--line); position: relative; }
.road__items li { position: relative; padding: 0 0 2.1rem; }
.road__items li:last-child { padding-bottom: 0; }
.road__items li::before {
  content: "";
  position: absolute;
  left: -2.2rem;
  top: .5em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--faint);
}
.road__items h3 { font-size: 1.14rem; margin-bottom: .4rem; font-weight: 580; }
.road__items p { margin: 0; color: var(--muted); font-size: 1rem; max-width: 44em; }
.road__tech {
  margin-top: .75rem !important;
  padding-left: .9rem;
  border-left: 1px solid var(--line);
  color: var(--faint) !important;
  font-size: .94rem !important;
}
.road__tech code { font-size: .8em; }

[data-state="shipped"]   .road__items li::before { background: var(--glow);   border-color: var(--glow);   box-shadow: 0 0 12px rgba(60, 240, 123, .8); }
[data-state="building"]  .road__items li::before { background: var(--copper); border-color: var(--copper); box-shadow: 0 0 12px rgba(232, 164, 95, .7); }
[data-state="next"]      .road__items li::before { border-color: var(--slate); }
[data-state="shipped"]   .road__items { border-left-color: rgba(60, 240, 123, .28); }
[data-state="building"]  .road__items { border-left-color: rgba(232, 164, 95, .28); }
[data-state="building"]  .road__tech { border-left-color: rgba(232, 164, 95, .3); }

.road__items--compact li { padding-bottom: 1.1rem; }
.road__items--compact h3 { font-weight: 500; font-size: 1.04rem; color: var(--paper); margin-bottom: .15rem; }
.road__items--compact p { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--faint); text-transform: uppercase; }

.nogo {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(232, 164, 95, .06), transparent 60%),
    rgba(13, 19, 25, .5);
  max-width: 62rem;
}
.nogo h3 { font-size: 1.3rem; margin-bottom: .8rem; }
.nogo p { margin: 0; color: var(--muted); }
.nogo b { color: var(--paper); font-weight: 400; font-family: var(--display); font-size: .96em; }

@media (max-width: 860px) { .road__group { grid-template-columns: 1fr; } }

/* ─────────────────────────  build  ───────────────────────── */

.section--build { border-top: 1px solid var(--line-soft); padding-bottom: clamp(3rem, 6vw, 5rem); }

.build {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.build__steps { list-style: none; margin: 0; padding: 0; }
.build__steps li { padding: 0 0 2.2rem 3.4rem; position: relative; }
.build__steps li:last-child { padding-bottom: 0; }
.build__n {
  position: absolute;
  left: 0; top: .1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--glow);
  opacity: .7;
}
.build__steps h3 { font-size: 1.2rem; margin-bottom: .45rem; }
.build__steps p { margin: 0; color: var(--muted); font-size: 1rem; max-width: 40em; }

.code {
  margin-top: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(11, 16, 21, .95), rgba(6, 9, 12, .95));
  box-shadow: 0 30px 70px -44px #000;
  max-width: 42rem;
}
.code__bar {
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  background: rgba(255,255,255,.018);
}
.code pre { margin: 0; padding: 1.1rem 1rem; overflow-x: auto; font-family: var(--mono); font-size: .78rem; line-height: 1.8; color: #c9d4ce; }
.code code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.code .k { color: var(--copper); }
.code .f { color: #9fd7ff; }
.code .s { color: var(--glow); }

.build__aside {
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: radial-gradient(90% 60% at 100% 0%, rgba(60, 240, 123, .07), transparent 70%), rgba(13, 19, 25, .55);
  position: sticky;
  top: 5.5rem;
}
.build__aside h3 { font-size: 1.1rem; margin-bottom: .8rem; }
.build__aside > p { color: var(--faint); font-size: .93rem; margin: 1.2rem 0 1.4rem; }
.build__aside .btn { width: 100%; justify-content: center; font-size: .9rem; padding: .7rem 1rem; }

.build__links { list-style: none; margin: 0; padding: 0; }
.build__links a {
  display: block;
  padding: .75rem 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--display);
  font-weight: 520;
  font-size: .98rem;
  transition: color .3s, padding-left .3s;
}
.build__links li:last-child a { border-bottom: 1px solid var(--line-soft); }
.build__links a span { display: block; font-family: var(--serif); font-weight: 300; font-size: .88rem; color: var(--faint); }
.build__links a:hover { color: var(--glow); padding-left: .5rem; }

@media (max-width: 900px) {
  .build { grid-template-columns: 1fr; }
  .build__aside { position: static; }
}

/* ─────────────────  latest strip, under the hero  ───────────────── */

.latest {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(90deg, rgba(60, 240, 123, .05), rgba(13, 19, 25, .5) 40%);
}
.latest__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: .85rem var(--pad);
  display: flex;
  align-items: center;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
}
.latest__tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--glow);
  border: 1px solid rgba(60, 240, 123, .35);
  border-radius: 999px;
  padding: .26rem .7rem;
  white-space: nowrap;
}
.latest p { margin: 0; flex: 1 1 22rem; color: var(--muted); font-size: .95rem; }
.latest b { color: var(--paper); font-weight: 400; font-family: var(--display); font-size: .94em; }
.latest code { font-size: .78em; }
.latest a { color: var(--glow); white-space: nowrap; font-family: var(--display); font-size: .9rem; font-weight: 520; }
.latest a:hover { text-decoration: underline; }

.hero__facts--lead {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 1.5rem;
  margin-bottom: 2.1rem;
}
.hero__facts--lead b { font-size: 2.1rem; }

/* the roadmap board, layout B's hero */

.boardwrap { max-width: var(--wrap); margin: 0 auto; padding: clamp(2rem, 4vw, 3.2rem) var(--pad) 0; }
.boardwrap .board { margin-top: 0; }

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.4rem;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
}
.board__cell {
  padding: 1.15rem 1.2rem 1.25rem;
  background: linear-gradient(180deg, rgba(13, 19, 25, .8), rgba(7, 10, 14, .8));
  transition: background .4s;
  position: relative;
}
.board__cell::before {
  content: "";
  position: absolute;
  left: 1.2rem; top: 0;
  width: 2.2rem; height: 2px;
  background: currentColor;
  opacity: .9;
}
.board__cell[data-state="shipped"]   { color: var(--glow); }
.board__cell[data-state="building"]  { color: var(--copper); }
.board__cell[data-state="next"]      { color: var(--slate); }
.board__cell[data-state="exploring"] { color: var(--faint); }
.board__cell:hover { background: linear-gradient(180deg, rgba(19, 28, 24, .95), rgba(9, 13, 18, .95)); }

.board b {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: currentColor;
  display: inline-block;
  margin-right: .5rem;
  line-height: 1;
}
.board span {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.board i {
  display: block;
  margin-top: .6rem;
  font-style: normal;
  font-size: .88rem;
  color: var(--faint);
  line-height: 1.45;
}

@media (max-width: 820px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .board { grid-template-columns: 1fr; } }

/* ────────────────────  non-goals, promoted  ──────────────────── */

.nogo--promo {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
}
.chip--never { color: var(--never); background: rgba(207, 123, 109, .07); }
.nogo__meta p { color: var(--muted); font-size: .95rem; margin: .95rem 0 0; max-width: 22em; }

.nogo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2.4rem;
}
.nogo__list li { position: relative; padding-left: 1.5rem; }
.nogo__list li::before {
  content: "✕";
  position: absolute;
  left: 0; top: .1em;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--never);
  opacity: .8;
}
.nogo__list h3 { font-size: 1.06rem; margin-bottom: .3rem; font-weight: 570; }
.nogo__list p { margin: 0; color: var(--muted); font-size: .97rem; }

@media (max-width: 860px) {
  .nogo--promo { grid-template-columns: 1fr; }
  .nogo__list { grid-template-columns: 1fr; }
}

/* ─────────────────────────  get started  ───────────────────────── */

.section--start { border-top: 1px solid var(--line-soft); padding-bottom: clamp(3rem, 6vw, 5rem); }

.gs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.gs__title {
  font-size: 1.28rem;
  margin-bottom: 1.3rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line-soft);
}
.gs__steps { list-style: none; margin: 0; padding: 0; counter-reset: gs; }
.gs__steps li {
  counter-increment: gs;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 1.05rem;
  color: var(--muted);
  font-size: 1rem;
}
.gs__steps li::before {
  content: counter(gs, decimal-leading-zero);
  position: absolute;
  left: 0; top: .28em;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--glow);
  opacity: .75;
}
.gs__steps b { color: var(--paper); font-weight: 400; font-family: var(--display); font-size: .97em; }
.gs__note { color: var(--faint); font-size: .93rem; margin: 1.3rem 0 0; }
.gs__note a { color: var(--glow); }
.gs__note a:hover { text-decoration: underline; }

@media (max-width: 820px) { .gs { grid-template-columns: 1fr; } }

/* ─────────────────────────  docs page  ───────────────────────── */

.docs { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--pad) clamp(3rem, 7vw, 6rem); }
.docs__intro { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.docs__intro h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1rem; font-variation-settings: "opsz" 80; }
.docs__intro p { color: var(--muted); margin: 0 0 .8rem; }

.docs__group { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.docs__group > h2 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: 1.4rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line-soft);
}

.doc {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background .35s;
}
.doc:hover { background: linear-gradient(90deg, rgba(60, 240, 123, .045), transparent 60%); }
.doc__name { font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -.02em; }
.doc__name a { transition: color .3s; }
.doc__name a:hover { color: var(--glow); }
.doc__path { display: block; font-family: var(--mono); font-size: .7rem; color: var(--faint); margin-top: .3rem; letter-spacing: .02em; }
.doc__what { color: var(--muted); font-size: 1rem; margin: 0; }
.doc__what b { color: var(--paper); font-weight: 400; font-family: var(--display); font-size: .95em; }

@media (max-width: 720px) { .doc { grid-template-columns: 1fr; gap: .5rem; } }

/* ─────────────────────────  footer  ───────────────────────── */

.foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad) 3.5rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem 3rem;
  align-items: center;
}
.foot__brand { display: flex; align-items: center; gap: .85rem; }
.foot__brand img { border-radius: 9px; }
.foot__brand b { font-family: var(--display); font-weight: 600; display: block; font-size: 1rem; }
.foot__brand span { color: var(--faint); font-size: .85rem; }

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: flex-end;
  font-family: var(--display);
  font-size: .9rem;
  color: var(--muted);
}
.foot__links a { transition: color .25s; }
.foot__links a:hover { color: var(--glow); }

.foot__legal {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  color: var(--faint);
  font-size: .82rem;
}

@media (max-width: 760px) {
  .foot { grid-template-columns: 1fr; }
  .foot__links { justify-content: flex-start; }
}

/* ─────────────────────────  motion  ───────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .85s cubic-bezier(.2,.7,.3,1) calc(var(--i, 0) * 90ms),
    transform .85s cubic-bezier(.2,.7,.3,1) calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .optic, .slide, .btn, .rail { transition: none; }
  .rail { scroll-behavior: auto; }
}