@view-transition { navigation: auto; }

:root {
  color-scheme: light;
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --surface-2: #EEF0F7;
  --line: #E3E6F0;
  --line-2: #CDD2E6;
  --ink: #12152B;
  --ink-2: #4A506B;
  --ink-3: #5A6079;
  --accent: #3A45C9;
  --accent-2: #2A33A0;
  --accent-soft: #E9ECFB;
  --bad: #B4420C;
  --bad-ink: #A33A0A;
  --bad-soft: #FDF1E8;
  --ok: #17885C;
  --ok-ink: #0F6B47;
  --ok-soft: #DDF2E8;
  --term: #151827;
  --term-2: #0F1220;
  --term-3: #1E2340;
  --term-line: #323963;
  --term-ink: #D9DDF2;
  --term-dim: #9AA1C4;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(#D6DAEC 1px, transparent 1px);
  background-size: 26px 26px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(246, 247, 251, .78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.nav.scrolled { border-color: var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.logo-mark { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; }
.logo-mark svg { display: block; overflow: visible; }
.logo-mark .s1, .logo-mark .s2 { transition: transform .5s var(--ease); }
.logo:hover .logo-mark .s1 { transform: translate(1.6px, -1.6px); }
.logo:hover .logo-mark .s2 { transform: translate(.8px, -.8px); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a.link { font-size: 14.5px; font-weight: 500; color: var(--ink); padding: 10px 14px; border-radius: 10px; transition: background .2s; }
.nav-links a.link:hover, .nav-links a.link[aria-current="page"] { background: rgba(58, 69, 201, .08); }
@media (max-width: 720px) { .nav-links a.link { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 14px; border: 1px solid transparent; font-size: 15.5px; font-weight: 600; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 14px 30px -14px rgba(58, 69, 201, .8); }
.btn-primary:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(58, 69, 201, .85); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); }
.btn-sm { height: 42px; padding: 0 16px; font-size: 14px; border-radius: 11px; }
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg.go { transform: translateX(3px); }

/* ---------- type ---------- */
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.h2 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.sec { padding: clamp(72px, 10vw, 136px) 0; position: relative; }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head.center { align-items: center; text-align: center; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(40px, 5vw, 64px) 0 0; text-align: center; overflow-x: clip; }
.hero::before { content: ""; position: absolute; inset: -68px 0 auto 0; height: 760px; background: radial-gradient(900px 460px at 50% 0%, #DCE1FB 0%, rgba(220, 225, 251, 0) 70%); pointer-events: none; z-index: -1; }
.sky { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 560px; pointer-events: none; z-index: -1; }
.board-pill { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--term-ink); background: var(--term); padding: 8px 14px 8px 12px; border-radius: 999px; }
.board-pill i { width: 8px; height: 8px; border-radius: 50%; background: #62D9A0; box-shadow: 0 0 0 0 rgba(98, 217, 160, .6); animation: ping 2s infinite; }
.board-pill b { font-weight: 500; color: #62D9A0; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(98, 217, 160, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(98, 217, 160, 0); } }
.hero h1 { margin: 24px auto 0; font-size: clamp(36px, 6.4vw, 84px); line-height: 1; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { margin: 22px auto 0; max-width: 56ch; }
.hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-meta { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hero-shot { position: relative; perspective: 2200px; }
.hero-shot .shot { transform: rotateX(var(--tilt, 10deg)) translateY(var(--lift, 0px)); transform-origin: 50% 0; transition: transform .1s linear; box-shadow: 0 60px 120px -50px rgba(26, 32, 90, .55), 0 0 0 1px rgba(26, 32, 90, .08); }

/* ---------- scaled product shots ---------- */
.shot { position: relative; border-radius: 18px; overflow: hidden; background: #ECEEF6; color: var(--ink); text-align: left; }
.shot-in { width: 1100px; transform-origin: 0 0; font-size: 12px; line-height: 1.4; }
.sh-top { display: flex; align-items: center; gap: 14px; padding: 9px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.sh-top .logo-mark { width: 24px; height: 24px; box-shadow: none; }
.sh-top .ttl { font-weight: 600; font-size: 13px; }
.sh-top .num { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.wps { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.wps span { display: inline-flex; align-items: center; gap: 6px; }
.wps span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #A9B0CF; box-sizing: border-box; }
.wps span.done { color: var(--accent); }
.wps span.done::before { background: var(--accent); border-color: var(--accent); }
.wps span.now { color: #fff; background: var(--accent); padding: 5px 11px; border-radius: 999px; font-weight: 600; }
.wps span.now::before { display: none; }
.wps span.now.hot { background: var(--bad); }
.wps span.now.safe { background: var(--ok-ink); }
.wps i { width: 24px; height: 2px; border-radius: 2px; background: #CBD0E6; }
.wps i.done { background: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.pill.warn { color: var(--bad-ink); background: #FCEBDD; }
.pill.ok { color: var(--ok-ink); background: var(--ok-soft); }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sh-body { display: flex; gap: 10px; padding: 10px; }

.ide { flex: 1; min-width: 0; display: flex; background: var(--term); border-radius: 14px; overflow: hidden; }
.ide-rail { width: 46px; background: var(--term-2); padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ide-rail i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--term-dim); }
.ide-rail i.on { background: #2B3157; color: #F1F3FC; }
.ide-side { width: 204px; background: #1A1E33; padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.tk { background: #252A48; border-radius: 10px; padding: 11px; display: flex; flex-direction: column; gap: 6px; }
.tk small { font-family: var(--mono); font-size: 9.5px; color: #AAB5FF; }
.tk b { font-size: 12px; font-weight: 600; color: #F1F3FC; line-height: 1.3; }
.tk span { font-size: 11px; color: #C5CAE6; line-height: 1.45; }
.tree { display: flex; flex-direction: column; font-size: 11px; color: #C5CAE6; }
.tree div { height: 23px; display: flex; align-items: center; padding: 0 8px 0 24px; border-radius: 6px; }
.tree div.d { padding-left: 8px; color: #F1F3FC; font-weight: 500; }
.tree div.on { background: #2B3157; color: #F1F3FC; }
.tree div b { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: #62D9A0; }
.tree div b.m { color: #F3BC86; }
.ide-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tabs { display: flex; gap: 2px; padding: 7px 8px 0; background: var(--term-2); font-size: 11px; color: var(--term-dim); }
.tabs span { padding: 7px 12px; border-radius: 8px 8px 0 0; font-family: var(--mono); }
.tabs span.on { background: var(--term); color: #F1F3FC; }
.diffbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid #252A44; font-size: 11px; color: var(--term-ink); }
.diffbar b { font-family: var(--mono); font-weight: 500; color: #62D9A0; margin-left: 6px; }
.code { flex: 1; padding: 10px 0; font-family: var(--mono); font-size: 11.5px; line-height: 22px; color: var(--term-ink); min-height: 330px; }
.cl { display: grid; grid-template-columns: 40px 16px 1fr; white-space: pre; }
.cl > i { font-style: normal; color: #8A92B8; text-align: right; padding-right: 12px; }
.cl > b { font-weight: 400; color: #62D9A0; }
.cl.add { background: rgba(64, 201, 134, .14); }
.k { color: #AAB5FF; } .s { color: #F3BC86; } .f { color: #84D8C6; }
.lens { display: flex; gap: 8px; padding: 2px 0 2px 56px; font-family: var(--mono); font-size: 10px; color: #AAB5FF; }
.lens span:first-child { color: #C5CAE6; border: 1px solid #3A4066; border-radius: 6px; padding: 1px 7px; }
.testbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--term-2); font-family: var(--mono); font-size: 11px; }
.testbar .pass { display: inline-flex; align-items: center; gap: 7px; color: #62D9A0; }
.testbar .acts { display: flex; gap: 8px; font-family: var(--sans); }
.fbtn { height: 30px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; color: #F1F3FC; border: 1px solid #5B66E8; }
.fbtn.fill { background: #5B66E8; }

.cop { width: 286px; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; }
.cop-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #ECEEF5; font-size: 13px; font-weight: 600; }
.cop-h i { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.cop-b { padding: 14px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bub { align-self: flex-end; max-width: 90%; background: var(--accent-soft); color: #1B2166; font-size: 12px; padding: 9px 12px; border-radius: 12px 12px 4px 12px; min-height: 35px; }
.bub .caret { display: inline-block; width: 1.5px; height: 13px; background: #1B2166; vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ans { font-size: 12px; line-height: 1.5; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchips span { font-family: var(--mono); font-size: 10px; color: #3A3F5C; background: var(--surface-2); padding: 5px 8px; border-radius: 7px; }
.fchips span b { color: var(--ok-ink); font-weight: 500; }
.qchips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.qchips span { font-size: 11px; font-weight: 500; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 11px; }
.cop-in { margin: 0 12px 12px; height: 38px; border: 1px solid var(--line-2); border-radius: 11px; background: #F8F9FC; display: flex; align-items: center; padding: 0 12px; font-size: 11.5px; color: var(--ink-3); }

/* hero play sequence */
.js .seq { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .play .seq { opacity: 1; transform: none; transition-delay: calc(var(--t, 0) * 1s); }
.js .cl.add { opacity: 0; }
.js .play .cl.add { opacity: 1; transition: opacity .3s; transition-delay: calc(2.9s + var(--i) * .09s); }

/* ---------- statement ---------- */
.statement { text-align: center; }
.statement .big { font-size: clamp(34px, 5.6vw, 72px); line-height: 1.02; font-weight: 600; letter-spacing: -.04em; text-wrap: balance; max-width: 16ch; margin: 0 auto; }
.statement .big span { color: #A9B0CF; transition: color .5s; }
.statement .big span.lit { color: var(--ink); }
.statement .big span.lit.a { color: var(--accent); }
.trio { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; text-align: left; }
.trio > div { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ease), box-shadow .3s; }
.trio > div:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(26, 32, 90, .4); }
.trio .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); }
.trio b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.trio span { font-size: 15px; color: var(--ink-2); }

/* ---------- route ---------- */
.route { position: relative; display: flex; flex-direction: column; gap: clamp(56px, 8vw, 104px); padding-left: 64px; }
.route-track { position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background-image: linear-gradient(#C3C9E2 60%, transparent 0); background-size: 2px 12px; }
.route-fill { position: absolute; left: 0; top: 0; width: 2px; height: var(--p, 0%); background: var(--accent); }
.route-plane { position: absolute; left: -17px; top: var(--p, 0%); width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(58, 69, 201, .8), 0 0 0 6px rgba(58, 69, 201, .12); }
.route-plane svg { transform: rotate(90deg); }
.stop { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.stop::before { content: ""; position: absolute; left: -51px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid #A9B0CF; transition: background .3s, border-color .3s, transform .3s var(--ease); }
.stop.passed::before { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.stop-txt { display: flex; flex-direction: column; gap: 12px; }
.stop-txt .n { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--accent); }
.stop-txt h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.stop-txt p { font-size: 17px; color: var(--ink-2); max-width: 34ch; }
.stop > * { min-width: 0; }
@media (max-width: 860px) { .stop { grid-template-columns: minmax(0, 1fr); } .route { padding-left: 48px; } .route-track { left: 11px; } .stop::before { left: -43px; } }
@media (max-width: 560px) {
  .v-map .row, .replay-row { flex-direction: column; gap: 8px; }
  .v-map .wire, .replay .wire { display: none; }
  .replay .node { flex: 0 0 auto; }
  .board-pill { font-size: 10px; letter-spacing: .05em; gap: 8px; padding: 7px 11px 7px 10px; }
  .board-pill .more { display: none; }
  .dock, .tiles { font-size: inherit; }
}

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -36px rgba(26, 32, 90, .42); }
.v-ticket { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.v-ticket .top { display: flex; justify-content: space-between; align-items: center; }
.v-ticket .id { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.v-ticket h4 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.v-ticket p { font-size: 15.5px; color: #3A3F5C; }
.v-ticket p mark { background: #FFE2CC; color: #7A2C06; padding: 2px 6px; border-radius: 6px; }
.crew { display: flex; align-items: center; gap: 10px; border-top: 1px solid #ECEEF5; padding-top: 14px; font-size: 13px; color: var(--ink-2); }
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; margin-left: -8px; border: 2px solid #fff; }
.av:first-child { margin-left: 0; }
.av.a { background: #DCE7F7; color: #1F3F73; } .av.b { background: #F6E3D3; color: #7A3410; } .av.c { background: var(--accent); color: #fff; }

.v-map { background: var(--term); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 60px -36px rgba(26, 32, 90, .6); }
.v-map .row { display: flex; align-items: stretch; gap: 0; }
.node { flex: 1; min-width: 0; background: var(--term-3); border: 1px solid var(--term-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; color: #F1F3FC; font-size: 14px; font-weight: 600; transition: border-color .3s, transform .3s var(--ease); }
.node:hover { border-color: #5B66E8; transform: translateY(-3px); }
.node svg { color: #AAB5FF; }
.node small { font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--term-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wire { position: relative; width: 34px; flex-shrink: 0; align-self: center; height: 2px; background: #3A4066; }
.wire::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #62D9A0; animation: travel 2.4s linear infinite; animation-delay: var(--wd, 0s); opacity: 0; }
@keyframes travel { 0% { left: -4px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 4px); opacity: 0; } }
.v-map .watch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--term-dim); }
.v-map .watch span { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; font-weight: 500; color: var(--term-ink); background: var(--term-3); border: 1px solid var(--term-line); padding: 6px 10px; border-radius: 9px; }

.v-cop { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.v-cop .bub { font-size: 15px; padding: 11px 14px; border-radius: 14px 14px 4px 14px; min-height: 0; }
.v-cop .ans { font-size: 15px; }
.v-cop .fchips span { font-size: 12px; padding: 6px 10px; }
.v-cop .tests { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--ok-ink); background: var(--ok-soft); padding: 10px 12px; border-radius: 10px; }

.v-check { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.v-check .tag { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--accent); }
.v-check .tag i { width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); display: grid; place-items: center; }
.v-check h4 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 13px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.opt:hover { border-color: var(--accent); transform: translateX(3px); }
.opt i { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 2px solid #A9B0CF; transition: border .2s; }
.opt[aria-checked="true"] { border-color: var(--accent); background: #F1F3FE; font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.opt[aria-checked="true"] i { border: 5px solid var(--accent); }
.opts { display: flex; flex-direction: column; gap: 8px; }
.v-check .note { font-family: var(--mono); font-size: 12px; color: var(--ink-2); min-height: 18px; }

/* ---------- live ---------- */
.live { background: var(--term); color: #F1F3FC; border-radius: 36px; margin: 0 12px; padding: clamp(56px, 8vw, 104px) 0; position: relative; overflow: hidden; }
.live::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#2B3157 1px, transparent 1px); background-size: 26px 26px; opacity: .7; pointer-events: none; }
.live .wrap { position: relative; }
.live .eyebrow { color: #AAB5FF; }
.live .lead { color: #C5CAE6; }
.toggle { display: inline-flex; padding: 5px; background: var(--term-2); border: 1px solid var(--term-line); border-radius: 14px; gap: 4px; }
.toggle button { height: 44px; padding: 0 20px; border: 0; border-radius: 10px; background: transparent; color: #C5CAE6; font-size: 14.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: background .25s, color .25s; }
.toggle button i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.toggle button[aria-pressed="true"][data-o="crash"] { background: var(--bad); color: #fff; }
.toggle button[aria-pressed="true"][data-o="safe"] { background: var(--ok-ink); color: #fff; }
.live-shot { margin-top: 36px; box-shadow: 0 0 0 3px var(--bad), 0 0 60px -6px rgba(180, 66, 12, .55), 0 50px 100px -40px rgba(0, 0, 0, .7); transition: box-shadow .5s; }
.live-shot.is-safe { box-shadow: 0 0 0 3px var(--ok), 0 0 60px -6px rgba(23, 136, 92, .5), 0 50px 100px -40px rgba(0, 0, 0, .7); }
.live-shot.jolt { animation: jolt .5s; }
@keyframes jolt { 20% { translate: -7px 2px; } 40% { translate: 6px -2px; } 60% { translate: -4px 1px; } 80% { translate: 3px 0; } }
.lv { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.banner { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; color: #fff; font-size: 13px; font-weight: 600; background: var(--bad); transition: background .4s; }
.banner small { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 400; opacity: .9; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; transition: background .4s, border-color .4s; }
.tile small { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.tile b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; transition: color .4s; }
.tile span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.tile.hot { background: var(--bad-soft); border-color: #F3CDB2; }
.tile.hot b, .tile b.hot { color: var(--bad-ink); }
.chart { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 10px; }
.chart-h { display: flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.chart-h span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 400; color: #3A3F5C; }
.chart-h span:first-of-type { margin-left: auto; }
.chart-h span i { width: 14px; height: 3px; border-radius: 2px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .ln { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.in .chart .ln, .chart.in .ln { animation: draw 2.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart .rev-crash, .chart .gap, .chart .rev-safe, .chart .viral { transition: opacity .5s; }
.chart .rev-safe { opacity: 0; }
.is-safe .chart .rev-safe { opacity: 1; }
.is-safe .chart .rev-crash, .is-safe .chart .gap, .is-safe .chart .viral { opacity: 0; }
.logs { background: var(--term); border-radius: 14px; padding: 12px 16px; font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--term-ink); white-space: pre; overflow: hidden; }
.logs small { display: block; font-size: 9.5px; letter-spacing: .1em; color: var(--term-dim); }
.logs b { font-weight: 400; color: #FFB489; transition: color .4s; }
.is-safe .logs b { color: #62D9A0; }
.chat { width: 286px; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; }
.chat-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid #ECEEF5; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.chat-h b { font-size: 10.5px; color: #fff; background: var(--bad); padding: 3px 8px; border-radius: 999px; transition: background .4s; }
.is-safe .chat-h b { background: var(--ok-ink); }
.msgs { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 9px; color: var(--ink); }
.msg .av { margin: 0; border: 0; width: 28px; height: 28px; flex-shrink: 0; }
.msg div { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.45; }
.msg div b { font-size: 11.5px; font-weight: 600; }
.msg div b small { font-family: var(--mono); font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.dock { display: flex; align-items: center; gap: 14px; margin: 0 10px 10px; padding: 12px 16px; background: #fff; border: 1px solid #D5DAF3; border-radius: 14px; color: var(--ink); }
.dock > b { font-size: 14px; font-weight: 600; }
.dock > small { font-family: var(--mono); font-size: 10.5px; color: var(--bad-ink); margin-right: 6px; transition: color .4s; }
.is-safe .dock > small { color: var(--ok-ink); }
.dock div { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dock div span { height: 38px; display: grid; place-items: center; border: 1px solid #B9C0DE; border-radius: 10px; font-size: 12px; font-weight: 600; }
.lv-root.is-safe .only-crash, .lv-root:not(.is-safe) .only-safe { display: none; }
.lv-root.is-safe .banner { background: var(--ok-ink); }

/* ---------- flight log ---------- */
.log-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.log-box { border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.log-box small { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.log-box span { font-size: 19px; font-weight: 500; line-height: 1.4; }
.log-box.t1 { background: var(--surface); border: 1px solid var(--line); } .log-box.t1 small { color: var(--ink-2); }
.log-box.t2 { background: var(--accent-soft); color: #1B2166; } .log-box.t2 small { color: var(--accent-2); }
.log-box.t3 { background: var(--term); color: #F1F3FC; } .log-box.t3 small { color: #AAB5FF; }
.log-box mark { background: #FFE2CC; color: #7A2C06; padding: 2px 6px; border-radius: 6px; }
.replay { margin-top: 14px; background: var(--term); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.replay-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: #AAB5FF; }
.replay-h span { font-family: var(--sans); font-size: 14px; letter-spacing: 0; color: #C5CAE6; }
.replay-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; row-gap: 10px; }
.replay .node { flex: 1 1 180px; gap: 10px; font-size: 16px; padding: 16px; }
.replay .node small { font-size: 11px; letter-spacing: .06em; color: #AAB5FF; display: flex; align-items: center; gap: 8px; overflow: visible; }
.replay .node em { margin-top: auto; font-style: normal; font-size: 13px; font-weight: 500; color: #FFB489; }
@media (max-width: 860px) { .replay .wire { display: none; } .replay-row { gap: 10px; } }
.stats { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.stat b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat b.hot { color: var(--bad-ink); }
.stat span { font-size: 14px; color: var(--ink-2); }

/* ---------- departures ---------- */
.board { background: var(--term); border-radius: 24px; padding: clamp(18px, 3vw, 30px); color: var(--term-ink); font-family: var(--mono); box-shadow: 0 40px 80px -44px rgba(26, 32, 90, .7); perspective: 1200px; }
.board-h, .board-r { display: grid; grid-template-columns: 70px minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1.2fr) 150px; gap: 14px; align-items: center; }
.board-h { font-size: 10.5px; letter-spacing: .14em; color: var(--term-dim); padding: 0 16px 12px; }
.board-r { background: var(--term-3); border: 1px solid var(--term-line); border-radius: 12px; padding: 15px 16px; margin-top: 8px; font-size: 14px; transform-origin: 50% 0; }
.js .board-r { opacity: 0; transform: rotateX(-80deg); transition: transform .7s var(--ease), opacity .5s; transition-delay: calc(var(--i) * .09s); }
.js .in .board-r { opacity: 1; transform: none; }
.board-r .t { font-family: var(--sans); font-size: 16px; font-weight: 600; color: #F1F3FC; }
.board-r .n { color: #AAB5FF; }
.board-r .st { justify-self: end; font-size: 11px; letter-spacing: .1em; padding: 6px 10px; border-radius: 8px; color: var(--term-dim); border: 1px solid var(--term-line); white-space: nowrap; }
.board-r .st.go { color: #0C2E1F; background: #62D9A0; border-color: #62D9A0; font-weight: 600; }
@media (max-width: 760px) { .board-h { display: none; } .board-r { grid-template-columns: 44px minmax(0, 1fr) auto; } .board-r .x { display: none; } }

/* ---------- levels ---------- */
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.level { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.level:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -36px rgba(26, 32, 90, .45); border-color: #C3C9E8; }
.epa { width: 56px; height: 76px; border-radius: 10px 10px 16px 16px; background: var(--term); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12px 10px; }
.epa i { height: 6px; border-radius: 2px; background: #AAB5FF; transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); transition-delay: calc(.2s + var(--i) * .12s); }
.in .epa i, .level:hover .epa i { transform: none; }
.level h3 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.level .yrs { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.level p { font-size: 16px; color: var(--ink-2); }

/* ---------- pricing ---------- */
.fares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; align-items: stretch; }
.fare { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.fare:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(26, 32, 90, .5); }
.fare.main { border: 2px solid var(--accent); box-shadow: 0 40px 80px -44px rgba(58, 69, 201, .7); }
.fare-top { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.fare-top .cls { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--ink-2); }
.fare-top .cls b { font-weight: 600; color: #fff; background: var(--accent); padding: 5px 10px; border-radius: 999px; letter-spacing: .08em; }
.fare-top h3 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.fare-top p { font-size: 15.5px; color: var(--ink-2); min-height: 46px; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font-size: 56px; font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.price span { font-size: 15px; color: var(--ink-2); }
.price-note { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); min-height: 19px; }
.fare-cut { position: relative; border-top: 2px dashed var(--line-2); }
.fare-cut::before, .fare-cut::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.fare-cut::before { left: -12px; clip-path: inset(0 0 0 50%); }
.fare-cut::after { right: -12px; clip-path: inset(0 50% 0 0); }
.fare.main .fare-cut::before, .fare.main .fare-cut::after { border: 2px solid var(--accent); top: -13px; }
.fare.main .fare-cut::before { left: -13px; } .fare.main .fare-cut::after { right: -13px; }
.fare-bot { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.fare-bot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fare-bot li { display: flex; gap: 10px; font-size: 15px; align-items: flex-start; }
.fare-bot li svg { flex-shrink: 0; margin-top: 4px; color: var(--accent); }
.fare-bot .btn { margin-top: auto; width: 100%; }
.bill { display: inline-flex; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; gap: 4px; }
.bill button { height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; display: inline-flex; align-items: center; gap: 8px; }
.bill button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bill button small { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ok-ink); background: var(--ok-soft); padding: 3px 7px; border-radius: 999px; }
.founding { margin-top: 22px; background: var(--term); color: #F1F3FC; border-radius: 24px; padding: clamp(24px, 4vw, 36px); display: flex; flex-wrap: wrap; align-items: center; gap: 24px; position: relative; overflow: hidden; }
.founding::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#2B3157 1px, transparent 1px); background-size: 26px 26px; opacity: .7; }
.founding > * { position: relative; }
.founding .txt { flex: 1 1 380px; display: flex; flex-direction: column; gap: 10px; }
.founding .txt small { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: #62D9A0; }
.founding .txt b { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.founding .txt span { font-size: 16px; color: #C5CAE6; }
.seats { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.seats-bar { height: 8px; border-radius: 99px; background: #2B3157; overflow: hidden; }
.seats-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: #62D9A0; transition: width 1.4s var(--ease) .3s; }
.in .seats-bar i { width: 100%; }
.seats small { font-family: var(--mono); font-size: 12px; color: #C5CAE6; }
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; transition: border-color .2s; }
.faq details[open] { border-color: #C3C9E8; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 62px; font-size: 17px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .25s var(--ease); flex-shrink: 0; margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { padding: 0 0 20px; font-size: 16px; color: var(--ink-2); max-width: 62ch; }
.teaser { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(28px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; box-shadow: 0 40px 80px -52px rgba(26, 32, 90, .5); }
.teaser .nums { display: flex; flex-wrap: wrap; gap: 14px 44px; }
.teaser .nums div { display: flex; flex-direction: column; gap: 2px; }
.teaser .nums small { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--ink-2); }
.teaser .nums b { font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.teaser .nums b span { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }

/* ---------- form ---------- */
.req { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
@media (max-width: 900px) { .req { grid-template-columns: 1fr; } }
.req-txt { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 110px; }
@media (max-width: 900px) { .req-txt { position: static; } }
.req-txt ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.req-txt li { display: flex; gap: 12px; align-items: center; }
.req-txt li i { width: 30px; height: 30px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
form.card { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; border-radius: 24px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; font-weight: 500; }
.field em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #FBFBFD; font-family: inherit; font-size: 15px; color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.field textarea { height: 92px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(58, 69, 201, .14); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; }
.choices legend { font-size: 13.5px; font-weight: 500; padding: 0; margin-bottom: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice label { display: flex; flex-direction: column; gap: 2px; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 13px; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.choice label b { font-size: 15px; font-weight: 600; }
.choice label small { font-size: 13px; color: var(--ink-2); }
.choice input:checked + label { border-color: var(--accent); background: #F1F3FE; box-shadow: inset 0 0 0 1px var(--accent); }
.choice input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; }
.form-msg { font-size: 14px; color: var(--bad-ink); min-height: 20px; }
.done-state { display: none; flex-direction: column; align-items: flex-start; gap: 14px; padding: 12px 0; }
.done-state .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-ink); display: grid; place-items: center; }
.done-state h3 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.done-state p { font-size: 16px; color: var(--ink-2); }
form.sent > *:not(.done-state) { display: none; }
form.sent .done-state { display: flex; animation: pop .5s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 36px 0 44px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; font-size: 14px; color: var(--ink-2); }
.foot-in nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-in a:hover { color: var(--accent); }

/* ---------- page hero (pricing) ---------- */
.phero { text-align: center; padding: clamp(56px, 8vw, 104px) 0 clamp(36px, 5vw, 56px); position: relative; }
.phero::before { content: ""; position: absolute; inset: -68px 0 auto 0; height: 560px; background: radial-gradient(800px 380px at 50% 0%, #DCE1FB 0%, rgba(220, 225, 251, 0) 70%); pointer-events: none; z-index: -1; }
.phero h1 { margin: 20px auto 0; font-size: clamp(42px, 6.4vw, 80px); line-height: 1; font-weight: 600; letter-spacing: -.045em; }
.phero .lead { margin: 20px auto 28px; }

/* ---------- cockpit hero ---------- */
.radar { position: absolute; left: 50%; top: -170px; width: 1040px; height: 1040px; margin-left: -520px; border-radius: 50%; pointer-events: none; z-index: -1; background: repeating-radial-gradient(circle, transparent 0 85px, rgba(58, 69, 201, .11) 85px 86px); -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 66%); mask-image: radial-gradient(circle, #000 28%, transparent 66%); }
.radar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(58, 69, 201, .1), rgba(58, 69, 201, .1)) 50% 0 / 1px 100% no-repeat, linear-gradient(rgba(58, 69, 201, .1), rgba(58, 69, 201, .1)) 0 50% / 100% 1px no-repeat; }
.radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(58, 69, 201, .2), rgba(58, 69, 201, 0) 24%); animation: sweep 8s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.sky #arc { animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.gains { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gains span { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink); background: rgba(255, 255, 255, .8); border: 1px solid var(--line); padding: 9px 14px 9px 10px; border-radius: 999px; }
.gains span i { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.gains svg.sep { color: #A9B0CF; align-self: center; }
@media (max-width: 720px) { .gains svg.sep { display: none; } }

.stage { position: relative; margin: clamp(34px, 4.6vw, 54px) 0 84px; }
.mcp { position: relative; z-index: 3; width: fit-content; max-width: 100%; margin: 0 auto 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 10px 18px 10px 10px; background: var(--term); border: 1px solid var(--term-line); border-radius: 18px; box-shadow: 0 24px 50px -22px rgba(18, 21, 43, .7); }
.lamps { display: flex; gap: 6px; }
.lamp { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; padding: 10px 13px; border-radius: 10px; background: var(--term-3); color: #6C7499; transition: background .35s, color .35s, box-shadow .35s; white-space: nowrap; }
.lamp i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stage[data-phase="ap"] .lamp.ap { background: #0E3A29; color: #62D9A0; box-shadow: 0 0 22px -2px rgba(98, 217, 160, .5); }
.stage[data-phase="caution"] .lamp.caution { background: #5A2206; color: #FFB489; box-shadow: 0 0 24px -2px rgba(255, 140, 70, .65); animation: alarm .7s steps(1) infinite; }
.stage[data-phase="control"] .lamp.you { background: #4651D8; color: #fff; box-shadow: 0 0 24px -2px rgba(91, 102, 232, .8); }
@keyframes alarm { 50% { background: #2A1104; color: #B8703F; box-shadow: none; } }
.mcp-cap { font-size: 14.5px; font-weight: 500; color: #F1F3FC; min-width: 268px; text-align: left; }
.mcp-cap span { display: none; }
.stage[data-phase="ap"] .mcp-cap [data-p="ap"], .stage[data-phase="caution"] .mcp-cap [data-p="caution"], .stage[data-phase="control"] .mcp-cap [data-p="control"] { display: inline-block; animation: capin .45s var(--ease); }
@keyframes capin { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 720px) { .lamp { font-size: 9px; padding: 8px 8px; gap: 5px; letter-spacing: .04em; } .mcp { padding: 8px; border-radius: 14px; } .mcp-cap { min-width: 0; text-align: center; font-size: 13.5px; padding: 0 6px 4px; } }

.hero-shot .shot { transition: transform .1s linear, box-shadow .5s; }
.stage[data-phase="caution"] .hero-shot .shot { box-shadow: 0 0 0 3px var(--bad), 0 0 70px -4px rgba(180, 66, 12, .6), 0 60px 120px -50px rgba(26, 32, 90, .55); }
.stage[data-phase="control"] .hero-shot .shot { box-shadow: 0 0 0 3px var(--accent), 0 0 70px -8px rgba(58, 69, 201, .55), 0 60px 120px -50px rgba(26, 32, 90, .55); }
.toast { position: absolute; z-index: 2; right: 3%; top: 16%; display: flex; gap: 10px; align-items: center; text-align: left; background: #fff; border: 1px solid #F3CDB2; border-radius: 14px; padding: 11px 14px; box-shadow: 0 24px 50px -20px rgba(120, 44, 6, .55); font-size: 13.5px; line-height: 1.35; opacity: 0; transform: translateX(24px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; }
.toast b { display: block; font-size: 12px; }
.toast .av { margin: 0; border: 0; flex-shrink: 0; background: #DDF2E8; color: #0F5539; }
.stage[data-phase="caution"] .toast { opacity: 1; transform: none; }
@media (max-width: 720px) { .toast { display: none; } }

.inst { position: absolute; z-index: 3; text-align: left; animation: bob 7s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -8px; } }
.inst.horizon { left: -34px; bottom: -58px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 14px 16px 14px 14px; display: flex; align-items: center; gap: 14px; box-shadow: 0 30px 60px -28px rgba(26, 32, 90, .55); }
.inst.horizon svg { width: 96px; height: 96px; display: block; }
.hz-ball { transform-origin: 60px 60px; transition: transform 1.3s var(--ease); }
.stage[data-phase="ap"] .hz-ball { animation: sway 6s ease-in-out infinite; }
.stage[data-phase="caution"] .hz-ball { transform: rotate(-27deg) translateY(15px); animation: shake .28s linear infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg) translateY(-2px); } 50% { transform: rotate(3deg) translateY(2px); } }
@keyframes shake { 0%, 100% { transform: rotate(-27deg) translateY(15px); } 50% { transform: rotate(-24.5deg) translateY(13px); } }
.hz-txt { display: flex; flex-direction: column; gap: 3px; min-width: 104px; }
.hz-txt small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--ink-2); }
.hz-txt b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; display: none; }
.stage[data-phase="ap"] .hz-txt [data-p="ap"], .stage[data-phase="caution"] .hz-txt [data-p="caution"], .stage[data-phase="control"] .hz-txt [data-p="control"] { display: block; }
.hz-txt [data-p="ap"] { color: var(--ok-ink); } .hz-txt [data-p="caution"] { color: var(--bad-ink); } .hz-txt [data-p="control"] { color: var(--accent); }
.inst.recorder { right: -34px; bottom: -64px; width: 300px; background: var(--term); border: 1px solid var(--term-line); border-radius: 22px; padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 30px 60px -24px rgba(18, 21, 43, .75); animation-delay: -3s; }
.rec-h { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--term-dim); margin-bottom: 2px; }
.rec-h span { display: inline-flex; align-items: center; gap: 6px; color: #FF8C6B; }
.rec-h span i { width: 7px; height: 7px; border-radius: 50%; background: #FF6B45; animation: blink 1.2s steps(1) infinite; }
.rec-r { display: flex; gap: 12px; font-size: 13.5px; color: #F1F3FC; transition: opacity .5s, transform .5s var(--ease); }
.rec-r time { font-family: var(--mono); font-size: 12px; color: var(--term-dim); padding-top: 1px; }
.rec-r.bad { color: #FFB489; } .rec-r.good { color: #62D9A0; }
.rec-miss { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--ink); background: #FFE2CC; border-radius: 10px; padding: 9px 11px; transition: opacity .5s, transform .5s var(--ease); }
.rec-miss b { color: #7A2C06; }
.stage[data-phase="ap"] [data-from="caution"], .stage[data-phase="ap"] [data-from="control"], .stage[data-phase="caution"] [data-from="control"] { opacity: .16; transform: translateX(6px); }
@media (max-width: 1290px) { .inst.horizon { left: 10px; } .inst.recorder { right: 10px; } }
@media (max-width: 860px) {
  .stage { margin-bottom: 20px; }
  .insts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
  .inst { position: static; animation: none; }
  .inst.recorder { width: auto; }
}

/* ---------- altitude tape ---------- */
.alt { position: fixed; right: 20px; top: 50%; z-index: 40; transform: translateY(-50%); display: none; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
@media (min-width: 1360px) { .js .alt { display: flex; } }
.alt-track { position: relative; width: 22px; height: 230px; background: repeating-linear-gradient(to bottom, #A9B0CF 0 1px, transparent 1px 23px) 50% 0 / 10px 100% no-repeat, repeating-linear-gradient(to bottom, #A9B0CF 0 1px, transparent 1px 115px) 50% 0 / 22px 100% no-repeat; border-top: 1px solid #A9B0CF; border-bottom: 1px solid #A9B0CF; }
.alt-plane { position: absolute; left: 50%; top: var(--sp, 0%); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(58, 69, 201, .8), 0 0 0 5px rgba(58, 69, 201, .12); }
.alt-plane svg { transform: rotate(90deg); }
.alt-read { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--mono); }
.alt-read b { font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.alt-read span { font-size: 9.5px; letter-spacing: .12em; color: var(--accent); writing-mode: vertical-rl; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js .seq, .js .cl.add, .js .board-r { opacity: 1; transform: none; }
  .chart .ln { stroke-dashoffset: 0; }
  .hero-shot .shot { transform: none; }
  .sky .fly { display: none; }
  .rec-r, .rec-miss { opacity: 1 !important; transform: none !important; }
}