/* Altifield — landing page. The palette is the film's: a warm canvas, white cards, colour only where it means
   something (icons, state). Graphite is the dark counterpart. */

@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --bg: #ECE9E5; --bg2: #E6E3DE;
  --card: #FFFFFF; --card2: #FBFAF8; --well: #F7F6F4; --tray: #F2F0EC; --track: #E4E1DC;
  --line: rgba(40, 32, 24, .07); --line2: rgba(40, 32, 24, .12);
  --ink: #262523; --ink2: #57534E; --ink3: #8F8A83; --ink4: #BDB8B1;
  --working: #E8912D; --input: #E5484D; --done: #2E9E62; --idle: #B3AEA7; --live: #3A66F0;
  --blue: #2F66E0; --purple: #7757D6; --green: #1E8A4A; --red: #CF3E47; --orange: #E8772D; --yellow: #E3B341;
  --accentA: #3A66F0; --accentB: #8B5CF6; --accentC: #E0567A;
  --shadow: 0 1px 1px rgba(60,45,30,.04), 0 4px 10px rgba(60,45,30,.05), 0 18px 40px -12px rgba(60,45,30,.14);
  --shadow-lg: 0 2px 2px rgba(60,45,30,.04), 0 12px 30px rgba(60,45,30,.08), 0 50px 90px -30px rgba(60,45,30,.28);
  --grain: .05;
  --radius: 14px;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151413; --bg2: #1A1917;
    --card: #1E1D1B; --card2: #232220; --well: #1A1917; --tray: #1B1A18; --track: #35332F;
    --line: rgba(255, 248, 240, .07); --line2: rgba(255, 248, 240, .11);
    --ink: #EDEAE4; --ink2: #B8B3AA; --ink3: #8C877F; --ink4: #5E5A54;
    --working: #F0A24E; --input: #F05A5E; --done: #3CC17C; --idle: #6A655E; --live: #6E8DF7;
    --blue: #7C9BFA; --purple: #A48BF5; --green: #56CF8D; --red: #F2777B; --orange: #F0905A; --yellow: #E8C35A;
    --accentA: #6E8DF7; --accentB: #A48BF5; --accentC: #F27A9B;
    --shadow: 0 1px 1px rgba(0,0,0,.2), 0 4px 10px rgba(0,0,0,.25), 0 18px 40px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 2px rgba(0,0,0,.2), 0 12px 30px rgba(0,0,0,.35), 0 50px 90px -30px rgba(0,0,0,.8);
    --grain: .07;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151413; --bg2: #1A1917;
  --card: #1E1D1B; --card2: #232220; --well: #1A1917; --tray: #1B1A18; --track: #35332F;
  --line: rgba(255, 248, 240, .07); --line2: rgba(255, 248, 240, .11);
  --ink: #EDEAE4; --ink2: #B8B3AA; --ink3: #8C877F; --ink4: #5E5A54;
  --working: #F0A24E; --input: #F05A5E; --done: #3CC17C; --idle: #6A655E; --live: #6E8DF7;
  --blue: #7C9BFA; --purple: #A48BF5; --green: #56CF8D; --red: #F2777B; --orange: #F0905A; --yellow: #E8C35A;
  --accentA: #6E8DF7; --accentB: #A48BF5; --accentC: #F27A9B;
  --shadow: 0 1px 1px rgba(0,0,0,.2), 0 4px 10px rgba(0,0,0,.25), 0 18px 40px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 2px rgba(0,0,0,.2), 0 12px 30px rgba(0,0,0,.35), 0 50px 90px -30px rgba(0,0,0,.8);
  --grain: .07;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
::selection { background: color-mix(in srgb, var(--live) 28%, transparent); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img, video, canvas, svg { display: block; }
.mono { font-family: var(--mono); font-feature-settings: "zero" 0; }
.c-mute { color: var(--ink3); } .c-blue { color: var(--blue); } .c-purple { color: var(--purple); }
.c-green { color: var(--done); } .c-orange { color: var(--working); }
.small { font-size: .82em; }
kbd {
  font-family: var(--mono); font-size: .78em; display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em;
  padding: 0 .35em; margin: 0 .08em; border-radius: 6px; background: var(--card); color: var(--ink);
  box-shadow: 0 1px 0 var(--line2), inset 0 -2px 0 var(--line2); border: 1px solid var(--line2); vertical-align: .08em;
}

.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: var(--grain); mix-blend-mode: multiply;
  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' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
:root[data-theme="dark"] .grain { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grain { mix-blend-mode: screen; } }
@keyframes grain { 0%{background-position:0 0} 20%{background-position:-37px 23px} 40%{background-position:41px -66px} 60%{background-position:-83px -19px} 80%{background-position:57px 71px} 100%{background-position:0 0} }

.wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }

/* ---------- wordmark ---------- */
.wordmark { font-weight: 640; letter-spacing: -.055em; line-height: 1; white-space: nowrap; position: relative; display: inline-block; }
.wordmark.small { font-size: 22px; }
.wordmark.small .wm-dot { transform: scale(1.45); }
.wordmark.huge { font-size: clamp(88px, 19vw, 260px); }
.wm-i { position: relative; display: inline-block; }
.wm-i::after {
  content: ""; position: absolute; left: var(--tit-x, .02em); top: var(--tit-y, .05em); width: var(--tit-w, .13em); height: var(--tit-h, .13em);
  border-radius: 50%; background: currentColor; transition: opacity .2s;
}
.wm-i:has(.wm-dot)::after, .wm-i.lit::after { opacity: 0; }
.wm-dot {
  position: absolute; left: var(--tit-x, .02em); top: var(--tit-y, .05em); width: var(--tit-w, .13em); height: var(--tit-h, .13em);
  border-radius: 50%; background: var(--live); box-shadow: 0 0 0 .05em color-mix(in srgb, var(--live) 18%, transparent), 0 0 .5em color-mix(in srgb, var(--live) 60%, transparent);
}

/* ---------- nav ---------- */
.nav {
  position: fixed; z-index: 50; top: 12px; left: 50%; transform: translateX(-50%); width: min(1180px, 100% - 24px);
  display: flex; align-items: center; gap: 20px; padding: 9px 10px 9px 18px; border-radius: 16px;
  background: color-mix(in srgb, var(--card) 62%, transparent); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--line); box-shadow: 0 8px 30px -14px rgba(0,0,0,.18);
  transition: transform .5s var(--ease-out), opacity .5s;
}
.nav.hide { transform: translate(-50%, -140%); }
.nav-links { display: flex; gap: 4px; margin-left: 12px; }
.nav-links a { font-size: 14px; color: var(--ink2); padding: 6px 10px; border-radius: 8px; transition: background .2s, color .2s; }
.nav-links a:hover { background: var(--line); color: var(--ink); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.theme-toggle { width: 36px; height: 36px; border-radius: 10px; position: relative; overflow: hidden; }
.theme-toggle:hover { background: var(--line); }
.tt-sun, .tt-moon { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; transition: transform .6s var(--ease-spring), opacity .3s; }
.tt-sun { background: var(--ink); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--ink); }
.tt-moon { background: transparent; box-shadow: inset -5px -2px 0 0 var(--ink); transform: translateY(30px) rotate(-40deg); opacity: 0; }
:root[data-theme="dark"] .tt-sun { transform: translateY(-30px); opacity: 0; }
:root[data-theme="dark"] .tt-moon { transform: none; opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tt-sun { transform: translateY(-30px); opacity: 0; }
  :root:not([data-theme="light"]) .tt-moon { transform: none; opacity: 1; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border-radius: 11px; font-size: 14.5px; font-weight: 520;
  transition: transform .35s var(--ease-spring), background .2s, box-shadow .3s; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-lg { height: 50px; padding: 0 22px; border-radius: 14px; font-size: 16px; }
.btn-ink { background: var(--ink); color: var(--bg); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 10px 24px -10px rgba(0,0,0,.45); }
.btn-ink:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 16px 30px -10px rgba(0,0,0,.5); }
.btn-ghost { background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line2); }
.btn-ghost:hover { background: var(--card); transform: translateY(-1px); }
.play-glyph { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-right: -2px; }
.play-glyph.big { border-left-width: 22px; border-top-width: 14px; border-bottom-width: 14px; }

/* ---------- hero ---------- */
.hero { position: relative; height: 640vh; }
.hero-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-copy {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 90px 16px 40px; pointer-events: none; will-change: opacity, transform;
}
.hero-copy .btn, .hero-copy a { pointer-events: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 12px 6px 10px; border-radius: 99px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2);
  background: color-mix(in srgb, var(--card) 75%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px);
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); animation: ping 2s infinite; }
@keyframes ping { 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent)} 70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.display { font-size: clamp(44px, 8.2vw, 116px); line-height: .94; letter-spacing: -.045em; font-weight: 620; margin: 0; }
.serif-accent {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--accentA) 0%, var(--accentB) 55%, var(--accentC) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.display .serif-accent { font-size: 1.08em; }
.lede { max-width: 620px; margin: 26px auto 0; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink2); text-wrap: balance; }
.hero-ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.scroll-cue i { width: 1px; height: 38px; background: linear-gradient(var(--ink3), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: -1px; width: 3px; height: 10px; border-radius: 2px; background: var(--live); animation: drip 1.8s var(--ease-out) infinite; }
@keyframes drip { from { top: -10px; } to { top: 40px; } }

.hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink3); }
.hud > div:not(.altimeter) { position: absolute; display: flex; gap: 8px; align-items: center; }
.hud-tl { top: 84px; left: 24px; } .hud-tr { top: 84px; right: 24px; } .hud-bl { bottom: 22px; left: 24px; } .hud-br { bottom: 22px; right: 24px; }
.hud-sep { opacity: .5; }
.hud::before { content: ""; position: absolute; inset: 72px 14px 12px; border: 1px solid transparent;
  background: linear-gradient(var(--ink4), var(--ink4)) top left / 14px 1px no-repeat, linear-gradient(var(--ink4), var(--ink4)) top left / 1px 14px no-repeat,
  linear-gradient(var(--ink4), var(--ink4)) top right / 14px 1px no-repeat, linear-gradient(var(--ink4), var(--ink4)) top right / 1px 14px no-repeat,
  linear-gradient(var(--ink4), var(--ink4)) bottom left / 14px 1px no-repeat, linear-gradient(var(--ink4), var(--ink4)) bottom left / 1px 14px no-repeat,
  linear-gradient(var(--ink4), var(--ink4)) bottom right / 14px 1px no-repeat, linear-gradient(var(--ink4), var(--ink4)) bottom right / 1px 14px no-repeat; }
.odo { color: var(--ink); background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line2); padding: 3px 7px; border-radius: 6px; font-size: 13px; letter-spacing: .06em; }
.altimeter { position: absolute; right: 26px; top: 50%; height: 44vh; transform: translateY(-50%); width: 40px; }
.alt-ticks { position: absolute; right: 0; top: 0; bottom: 0; width: 12px;
  background: repeating-linear-gradient(to bottom, var(--ink4) 0 1px, transparent 1px 9px); -webkit-mask: linear-gradient(transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.alt-ticks::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 20px; background: repeating-linear-gradient(to bottom, var(--ink3) 0 1px, transparent 1px 45px); transform: translateX(8px); clip-path: inset(0 8px 0 0); }
.alt-marker { position: absolute; right: 14px; top: 0; transform: translateY(-50%); display: flex; align-items: center; }
.alt-marker span { color: var(--live); background: color-mix(in srgb, var(--card) 85%, transparent); border: 1px solid color-mix(in srgb, var(--live) 40%, transparent); padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.alt-marker::after { content: ""; width: 0; height: 0; border-right: 6px solid var(--live); border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-left: 6px; order: 2; transform: rotate(180deg); }

.kinetic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.kinetic-left { align-items: flex-start; padding-left: max(32px, 7vw); text-align: left; }
.k-line { overflow: hidden; line-height: 1; padding: .04em .1em .12em; }
.k-line span { display: inline-block; transform: translateY(110%); will-change: transform; }
.k-sans { font-size: clamp(56px, 10.5vw, 168px); font-weight: 640; letter-spacing: -.05em; }
.k-heavy { font-weight: 760; }
.k-serif { font-family: var(--serif); font-style: italic; font-size: clamp(60px, 11.5vw, 184px); letter-spacing: -.02em; margin-top: -.18em; }
.k-serif span { background: linear-gradient(100deg, var(--accentA), var(--accentB) 60%, var(--accentC)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.kinetic-left .k-sans { font-size: clamp(44px, 7vw, 110px); }
.k-mute { color: var(--ink3); }
.keycap {
  position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 26px; display: grid; place-items: center; align-content: center; gap: 2px;
  background: linear-gradient(var(--card), var(--card2)); border: 1px solid var(--line2);
  box-shadow: 0 2px 0 var(--line2), 0 10px 0 -2px color-mix(in srgb, var(--ink) 18%, var(--bg)), 0 30px 50px -20px rgba(0,0,0,.4);
  opacity: 0; transform: scale(.4); pointer-events: none; will-change: transform, opacity;
}
.keycap b { font-size: 46px; font-weight: 600; line-height: 1; }
.keycap small { font-family: var(--mono); font-size: 11px; color: var(--ink3); letter-spacing: .1em; }
.keycap.check b { color: var(--done); }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(110px, 16vw, 200px) 0; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin: 0 0 22px; display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--ink4); }
.headline { font-size: clamp(42px, 6.6vw, 92px); line-height: .96; letter-spacing: -.045em; font-weight: 620; margin: 0; text-wrap: balance; }
.headline .serif-accent { font-size: 1.08em; }
.sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink2); max-width: 640px; margin: 28px 0 0; text-wrap: pretty; }
.caption { color: var(--ink3); font-size: 15px; margin-top: 26px; text-align: center; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- tiles (shared) ---------- */
.tile {
  background: linear-gradient(var(--card), var(--card2)); border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
.tile > header { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid var(--line); font-size: 13px; }
.t-name { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tile > footer { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-top: 1px solid var(--line); font-size: 12px; }
.t-body { padding: 12px 13px; font-size: 12.5px; }
.t-body.mono { font-size: 12px; line-height: 1.7; }
.ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.sd-working { background: var(--working); box-shadow: 0 0 0 3px color-mix(in srgb, var(--working) 22%, transparent); }
.sd-input { background: var(--input); box-shadow: 0 0 0 3px color-mix(in srgb, var(--input) 22%, transparent); animation: needs 1.2s ease-in-out infinite; }
.sd-done { background: var(--done); box-shadow: 0 0 0 3px color-mix(in srgb, var(--done) 22%, transparent); }
.sd-idle { background: var(--idle); }
.sd-live { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }
@keyframes needs { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--input) 0%, transparent); transform: scale(1.15); } }
.pill { font-family: var(--mono); font-size: 10.5px; padding: 3px 8px; border-radius: 99px; background: var(--tray); color: var(--ink2); letter-spacing: .02em; white-space: nowrap; }
.pill-working { background: color-mix(in srgb, var(--working) 15%, transparent); color: var(--working); }
.pill-input { background: color-mix(in srgb, var(--input) 14%, transparent); color: var(--input); }
.pill-done { background: color-mix(in srgb, var(--done) 14%, transparent); color: var(--done); }
.pill-live { background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); }
.bar { flex: 1; height: 4px; border-radius: 4px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--working); border-radius: inherit; transition: width .8s var(--ease-out); }
.caret { display: inline-block; width: 7px; height: 14px; background: var(--live); vertical-align: -2px; margin-left: 4px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.bub { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 6px 14px -6px rgba(0,0,0,.35); }
.bub svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bub-ink { background: #262523; } .bub-orange { background: #E8772D; } .bub-blue { background: #3A66F0; } .bub-purple { background: #7757D6; } .bub-yellow { background: #E3B341; }

/* ---------- surfaces ---------- */
.words { display: flex; flex-wrap: wrap; gap: 6px 34px; margin: 70px 0 64px; }
.word { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(34px, 5vw, 66px); font-weight: 620; letter-spacing: -.04em; overflow: hidden; padding: .08em 0 .12em; }
.word b { display: inline-block; font-weight: inherit; transform: translateY(110%); transition: transform 1s var(--ease-out); }
.word .bub { transform: scale(0); transition: transform .8s var(--ease-spring); width: 1.05em; height: 1.05em; }
.word .bub svg { width: 52%; height: 52%; }
.words.in .word b, .words.in .word .bub { transform: none; }
.words.in .word:nth-child(2) b, .words.in .word:nth-child(2) .bub { transition-delay: .12s; }
.words.in .word:nth-child(3) b, .words.in .word:nth-child(3) .bub { transition-delay: .24s; }
.words.in .word:nth-child(4) b, .words.in .word:nth-child(4) .bub { transition-delay: .36s; }

.board {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 64px 28px 72px; border-radius: 28px;
  background: radial-gradient(circle at 1px 1px, var(--line2) 1px, transparent 1.5px) 0 0 / 22px 22px, color-mix(in srgb, var(--bg2) 60%, transparent);
  border: 1px solid var(--line);
}
.board-head { position: absolute; top: 20px; left: 28px; display: flex; align-items: center; gap: 10px; }
.board-title { font-weight: 640; font-size: 20px; letter-spacing: -.02em; }
.bell { width: 10px; height: 10px; border-radius: 50%; background: var(--working); box-shadow: 0 0 0 4px color-mix(in srgb, var(--working) 22%, transparent); }
.board-meta { font-family: var(--mono); font-size: 11px; color: var(--ink3); margin-left: 6px; }
.board .tile { min-height: 250px; position: relative; z-index: 1; opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .9s var(--ease-out), transform 1s var(--ease-spring); }
.board.in .tile { opacity: 1; transform: none; }
.board.in .tile:nth-of-type(2) { transition-delay: .1s; } .board.in .tile:nth-of-type(3) { transition-delay: .2s; } .board.in .tile:nth-of-type(4) { transition-delay: .3s; }
.board .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); transition-delay: 0s; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.wires path { fill: none; stroke: var(--ink4); stroke-width: 1.5; stroke-dasharray: 5 6; }
.wires circle { fill: var(--live); }
.wire-label { position: absolute; z-index: 2; font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 99px; background: var(--card); border: 1px solid var(--line2); color: var(--ink2); opacity: 0; transform: scale(.7); transition: opacity .5s, transform .6s var(--ease-spring); }
.board.wired .wire-label { opacity: 1; transform: none; }
.t-chrome { display: flex; gap: 5px; align-items: center; padding: 8px 10px; background: var(--well); border-bottom: 1px solid var(--line); }
.t-chrome > span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); }
.url { margin-left: 6px; flex: 1; font-size: 10.5px; padding: 3px 8px; border-radius: 6px; background: var(--card); color: var(--ink3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.t-page { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pg-h { display: flex; justify-content: space-between; font-size: 12px; }
.spark { width: 100%; height: 56px; }
.spark-line { fill: none; stroke: var(--live); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2.2s var(--ease-out) .5s; }
.spark-fill { fill: color-mix(in srgb, var(--live) 12%, transparent); opacity: 0; transition: opacity 1.2s 1.4s; }
.board.in .spark-line { stroke-dashoffset: 0; } .board.in .spark-fill { opacity: 1; }
.pg-rows { display: grid; gap: 6px; } .pg-rows i { height: 7px; border-radius: 4px; background: var(--track); } .pg-rows i:nth-child(2) { width: 80%; } .pg-rows i:nth-child(3) { width: 60%; }
.reload { color: var(--live); }
.board.reloading .t-page { animation: reloadflash .7s var(--ease-out); }
@keyframes reloadflash { 0% { opacity: .2; filter: blur(2px); } 100% { opacity: 1; filter: none; } }
.cron { font-size: 20px; letter-spacing: -.02em; margin: 6px 0 14px; }
.runs { display: flex; gap: 5px; } .runs i { width: 14px; height: 22px; border-radius: 4px; background: var(--done); opacity: .85; }
.runs i.fail { background: var(--input); } .runs i.now { background: var(--track); position: relative; overflow: hidden; }
.runs i.now::after { content: ""; position: absolute; inset: 0; background: var(--working); transform: translateY(100%); animation: fillup 3s var(--ease-out) infinite; }
@keyframes fillup { 70%, 100% { transform: none; } }
.next { margin-top: 14px; font-size: 11px; }
.note h4 { margin: 2px 0 10px; font-size: 15px; letter-spacing: -.01em; }
.note ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 12.5px; }
.note li { display: flex; gap: 8px; align-items: center; }
.note li::before { content: ""; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--ink4); flex: none; }
.note li.done { color: var(--ink3); text-decoration: line-through; text-decoration-color: var(--ink4); }
.note li.done::before { background: var(--done); border-color: var(--done); }
.t-note { background: linear-gradient(color-mix(in srgb, var(--yellow) 6%, var(--card)), var(--card2)); }

/* ---------- zoom lab ---------- */
.lab { margin-top: 64px; display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: stretch; }
.lab-stage { position: relative; border-radius: 28px; overflow: hidden; min-height: 560px; border: 1px solid var(--line); background: var(--bg2); touch-action: none; cursor: grab; }
.lab-stage:active { cursor: grabbing; }
#labCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab-hud { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 10px; font-size: 11px; color: var(--ink3); letter-spacing: .06em; }
.lab-hud span { background: color-mix(in srgb, var(--card) 85%, transparent); border: 1px solid var(--line2); padding: 4px 8px; border-radius: 7px; }
.lab-hud span:first-child { color: var(--live); }
.lab-side { display: flex; flex-direction: column; gap: 18px; }
.levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.levels li { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 50%, transparent); transition: background .4s, border-color .4s, transform .5s var(--ease-spring), box-shadow .4s; display: grid; grid-template-columns: 1fr auto; row-gap: 4px; }
.levels b { font-size: 18px; letter-spacing: -.02em; }
.levels span { font-family: var(--mono); font-size: 11px; color: var(--ink3); align-self: center; }
.levels p { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink3); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease-out), opacity .4s; }
.levels li.on { background: var(--card); border-color: color-mix(in srgb, var(--live) 45%, transparent); box-shadow: var(--shadow); transform: translateX(-6px); }
.levels li.on p { max-height: 80px; opacity: 1; color: var(--ink2); }
.levels li.on b { color: var(--live); }
.slider { display: grid; gap: 10px; margin-top: auto; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); }
.slider span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--live), var(--accentB), var(--accentC)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--live), var(--accentB), var(--accentC)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--card); border: 1px solid var(--line2); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 1px solid var(--line2); box-shadow: 0 4px 12px rgba(0,0,0,.25); }

/* ---------- fleet ---------- */
.fleet-grid-wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.fleet-copy .btn { margin-top: 34px; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; padding: 0; margin: 28px 0 0; font-size: 14px; color: var(--ink2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.fleet-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; perspective: 1400px; }
.fc { aspect-ratio: 1 / 1.08; border-radius: 13px; background: linear-gradient(var(--card), var(--card2)); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 11px; display: flex; flex-direction: column; gap: 6px; position: relative; transition: transform .7s var(--ease-spring), box-shadow .4s, opacity .4s; transform-style: preserve-3d; }
.fc .bub { width: 28px; height: 28px; } .fc .bub svg { width: 15px; height: 15px; }
.fc b { font-size: 11.5px; font-weight: 560; line-height: 1.25; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc .st { font-family: var(--mono); font-size: 10px; color: var(--ink3); display: flex; align-items: center; gap: 6px; }
.fc .bar { flex: none; margin-top: auto; }
.fc .sd { width: 7px; height: 7px; }
.fc.flip { animation: flip .7s var(--ease-out); }
@keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(.96); } 100% { transform: rotateY(0); } }
.fc.needs { box-shadow: 0 0 0 1.5px var(--input), 0 0 0 7px color-mix(in srgb, var(--input) 14%, transparent), var(--shadow-lg); }
.fc.needs::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--input) 45%, transparent); animation: halo 1.6s ease-out infinite; pointer-events: none; }
@keyframes halo { to { box-shadow: 0 0 0 18px transparent; } }
.fleet-cards.dim .fc:not(.needs) { opacity: .35; transform: scale(.94); }
.fleet-cards.dim .fc.needs { transform: scale(1.12); z-index: 2; }

/* ---------- mcp ---------- */
.mcp-stage { position: relative; margin-top: 64px; display: grid; grid-template-columns: 1.1fr .5fr 1fr; align-items: center; min-height: 380px; }
.mcp-term { min-height: 330px; }
.mcp-stage > *, .fleet-grid-wrap > *, .phone-wrap > *, .lab > *, .flow > * { min-width: 0; }
#mcpLog .ln { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-out); }
#mcpLog .ln.on { opacity: 1; transform: none; }
.mcp-wire { width: 100%; height: 100px; overflow: visible; }
.mcp-wire path { fill: none; stroke: var(--ink4); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-out); }
.mcp-stage.wired .mcp-wire path { clip-path: inset(0 0 0 0); }
.mcp-label { left: 55%; top: calc(50% - 30px); transform: translateX(-50%) scale(.7); }
.mcp-stage.wired .mcp-label { opacity: 1; transform: translateX(-50%); }
.mcp-browser { min-height: 280px; opacity: 0; transform: translateX(-60px) scale(.6) rotate(-4deg); transform-origin: left center; transition: opacity .5s, transform 1s var(--ease-spring); }
.mcp-stage.opened .mcp-browser { opacity: 1; transform: none; }
.t-page.bars { flex-direction: row; align-items: flex-end; gap: 8px; padding: 18px 16px; min-height: 160px; }
.t-page.bars i { flex: 1; height: calc(var(--h) * 100%); min-height: 6px; border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--live), color-mix(in srgb, var(--live) 40%, transparent)); transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease-spring); }
.mcp-stage.opened .t-page.bars i { transform: none; }
.mcp-stage.opened .t-page.bars i:nth-child(n) { transition-delay: calc(var(--h) * .5s); }
.mcp-ask { position: absolute; left: 50%; bottom: -10px; transform: translate(-50%, 20px); opacity: 0; display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line2); box-shadow: var(--shadow-lg); font-size: 12.5px; transition: opacity .4s, transform .6s var(--ease-spring); z-index: 3; }
.mcp-stage.asking .mcp-ask { opacity: 1; transform: translate(-50%, 0); }
.ask-btns { display: flex; gap: 6px; }
.ask-btns span, .ask-btns b { padding: 6px 10px; border-radius: 8px; background: var(--tray); font-weight: 500; white-space: nowrap; }
.ask-btns b { background: var(--live); color: #fff; transition: transform .2s; }
.mcp-stage.allowed .ask-btns b { transform: scale(.92); }

/* ---------- automations ---------- */
.flow { position: relative; margin-top: 70px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(24px, 10vw, 140px); align-items: center; padding: 120px 0 40px; }
.flow-wires { position: absolute; left: 0; right: 0; top: 120px; height: calc(100% - 160px); width: 100%; overflow: visible; pointer-events: none; }
.flow-wires path { fill: none; stroke: var(--ink4); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.pulse { fill: var(--purple); opacity: 0; filter: drop-shadow(0 0 6px var(--purple)); }
.node { padding: 18px; gap: 8px; min-height: 170px; position: relative; z-index: 1; transition: transform .6s var(--ease-spring), box-shadow .4s; }
.node b { font-size: 16px; letter-spacing: -.01em; margin-top: 6px; }
.node .mono { font-size: 11.5px; }
.node.hit { transform: scale(1.05); box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 50%, transparent), var(--shadow-lg); }
.n-agent .bar { margin-top: auto; flex: none; }
.n-agent .bar i { width: 0; }
.n-note { background: linear-gradient(color-mix(in srgb, var(--yellow) 7%, var(--card)), var(--card2)); opacity: .35; transform: scale(.94); transition: opacity .6s, transform .8s var(--ease-spring); }
.n-note.on { opacity: 1; transform: none; }
.n-note ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink2); display: grid; gap: 4px; }
.n-note li { min-height: 1.4em; }
.n-note li:empty::before { content: ""; display: inline-block; width: 70%; height: 7px; border-radius: 4px; background: var(--track); vertical-align: middle; }
.clock { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 6px; font-size: clamp(48px, 7vw, 86px); font-weight: 600; letter-spacing: -.04em; }
.clock-d { display: inline-block; background: var(--card); border: 1px solid var(--line2); border-radius: 14px; padding: 0 .16em; box-shadow: var(--shadow); line-height: 1.15; position: relative; overflow: hidden; }
.clock-d.tick { animation: tick .55s var(--ease-out); }
@keyframes tick { 0% { transform: rotateX(0); } 45% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
.colon { color: var(--ink3); animation: blink 1s steps(1) infinite; }

/* ---------- phone ---------- */
.phone-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; color: var(--ink2); font-size: 15.5px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks li::before { content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--done) 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%232E9E62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.soon { margin-top: 26px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); display: inline-flex; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--ink4); }
.phone-stage { position: relative; height: 640px; }
.mac-card { position: absolute; left: 0; top: 70px; width: 300px; transform: rotate(-3deg); z-index: 0; transition: box-shadow .4s; }
.mac-card .t-body { line-height: 1.8; }
.mac-card.ok { box-shadow: 0 0 0 2px color-mix(in srgb, var(--done) 50%, transparent), var(--shadow-lg); }
.iphone {
  position: absolute; right: 4%; top: 0; width: 300px; height: 620px; border-radius: 52px; padding: 11px; z-index: 1;
  background: linear-gradient(145deg, #3A3936, #1A1918 40%, #2C2B29); box-shadow: 0 0 0 1.5px #55524D inset, 0 40px 80px -30px rgba(0,0,0,.55), 0 20px 40px -20px rgba(0,0,0,.4);
}
.island { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 92px; height: 27px; border-radius: 20px; background: #000; z-index: 5; }
.screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: var(--bg); color: var(--ink); }
.status { display: flex; justify-content: space-between; padding: 17px 28px 0; font-size: 13px; font-weight: 600; }
.sig { width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .8; position: relative; }
.sig::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: var(--done); border-radius: 1px; }
.ph-title { text-align: center; margin-top: 18px; display: grid; gap: 2px; }
.ph-title b { font-size: 15px; }
.ph-title span { font-size: 11.5px; color: var(--ink3); display: inline-flex; gap: 5px; align-items: center; justify-content: center; }
.ph-title i { width: 6px; height: 6px; border-radius: 50%; background: var(--done); }
.ph-canvas { margin: 18px 14px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: radial-gradient(circle at 1px 1px, var(--line2) 1px, transparent 1.5px) 0 0 / 14px 14px; padding: 10px; border-radius: 16px; }
.ph-canvas i { aspect-ratio: 1 / .8; border-radius: 9px; background: var(--card); box-shadow: var(--shadow); position: relative; }
.ph-canvas i::before { content: ""; position: absolute; left: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--working); }
.ph-canvas i.hot { box-shadow: 0 0 0 1.5px var(--input), var(--shadow); }
.ph-canvas i.hot::before { background: var(--input); animation: needs 1.2s infinite; }
.phone-stage.allowed .ph-canvas i.hot { box-shadow: var(--shadow); } .phone-stage.allowed .ph-canvas i.hot::before { background: var(--working); animation: none; }
.banner {
  position: absolute; left: 10px; right: 10px; top: 54px; display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 20px; z-index: 4;
  background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 30px -10px rgba(0,0,0,.35);
  transform: translateY(-140%); transition: transform .7s var(--ease-spring);
}
.phone-stage.banner-in .banner { transform: none; }
.app-ico { width: 32px; height: 32px; border-radius: 8px; background: #262523; position: relative; flex: none; }
.app-ico::after { content: ""; position: absolute; inset: 0; margin: auto; width: 11px; height: 11px; border-radius: 50%; background: #3A66F0; }
.banner b { display: block; font-size: 12.5px; } .banner span { font-size: 11.5px; color: var(--ink2); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74%; border-radius: 30px 30px 0 0; padding: 10px 18px 18px; z-index: 3;
  background: var(--card); box-shadow: 0 -10px 40px rgba(0,0,0,.18); transform: translateY(105%); transition: transform .8s var(--ease-spring);
  display: flex; flex-direction: column; gap: 6px;
}
.phone-stage.sheet-in .sheet { transform: none; }
.grab { width: 36px; height: 5px; border-radius: 3px; background: var(--ink4); margin: 0 auto 8px; }
.sh-k { font-size: 12px; color: var(--ink3); }
.sh-t { font-size: 19px; letter-spacing: -.02em; line-height: 1.15; }
.sh-pill { align-self: flex-start; font-size: 12px; color: var(--input); background: color-mix(in srgb, var(--input) 12%, transparent); padding: 4px 10px; border-radius: 99px; margin: 4px 0 6px; }
.sh-req { background: var(--tray); border-radius: 16px; padding: 12px; display: grid; gap: 10px; }
.sh-req > b { font-size: 14px; }
.sh-cmd { background: var(--card); border-radius: 10px; padding: 9px 11px; font-size: 13px; }
.sh-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-btns span { text-align: center; padding: 10px 0; border-radius: 99px; font-size: 14px; font-weight: 520; background: var(--card); transition: transform .2s; }
.sh-btns .deny { color: var(--input); }
.sh-btns .allow { background: #2F7BF6; color: #fff; }
.phone-stage.press .sh-btns .allow { transform: scale(.93); }
.faceid { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--card) 40%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; pointer-events: none; border-radius: inherit; }
.faceid svg { width: 76px; height: 76px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; padding: 14px; box-sizing: content-box; border-radius: 22px; background: color-mix(in srgb, var(--card) 85%, transparent); box-shadow: var(--shadow-lg); }
.fi-check { stroke: var(--done); stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .5s var(--ease-out); }
.fi-face { transition: opacity .2s; }
.phone-stage.face .faceid { opacity: 1; }
.phone-stage.face svg { animation: scan 1s var(--ease-out); }
@keyframes scan { 0% { transform: scale(.85); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.phone-stage.face-ok .fi-check { stroke-dashoffset: 0; } .phone-stage.face-ok .fi-face { opacity: 0; }
.sh-done { margin-top: auto; display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--done); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); }
.sh-done .ok { width: 18px; height: 18px; border-radius: 50%; background: var(--done); position: relative; }
.sh-done .ok::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.phone-stage.allowed .sh-done { opacity: 1; transform: none; }

/* ---------- film ---------- */
.player { position: relative; margin-top: 60px; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg2); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.player video { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; color: var(--ink); background: color-mix(in srgb, var(--bg) 18%, transparent); transition: opacity .5s, background .3s; }
.play .play-glyph { width: 88px; height: 88px; border: 0; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-lg); display: grid; place-items: center; margin: 0; position: relative; transition: transform .5s var(--ease-spring); }
.play .play-glyph::after { content: ""; border-left: 22px solid var(--ink); border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.play:hover .play-glyph { transform: scale(1.08); }
.play .mono { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: color-mix(in srgb, var(--card) 80%, transparent); padding: 6px 12px; border-radius: 99px; }
.player.playing .play { opacity: 0; pointer-events: none; }
.frame-marks i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--ink3); opacity: .6; }
.frame-marks i:nth-child(1) { top: 16px; left: 16px; border-width: 1px 0 0 1px; } .frame-marks i:nth-child(2) { top: 16px; right: 16px; border-width: 1px 1px 0 0; }
.frame-marks i:nth-child(3) { bottom: 16px; left: 16px; border-width: 0 0 1px 1px; } .frame-marks i:nth-child(4) { bottom: 16px; right: 16px; border-width: 0 1px 1px 0; }
.film-more { display: flex; justify-content: center; margin-top: 26px; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,9,8,.86); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 24px; }
.lightbox[hidden], [data-film][hidden] { display: none !important; }
.lightbox video { width: min(1280px, 100%); max-height: 86vh; border-radius: 18px; box-shadow: 0 40px 100px rgba(0,0,0,.6); background: #000; }
.lb-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 28px; background: rgba(255,255,255,.12); }

/* ---------- principles ---------- */
.principles { padding-top: 40px; }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pcard { padding: 26px 22px; border-radius: 22px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 55%, transparent); display: grid; gap: 10px; align-content: start; transition: transform .6s var(--ease-spring), box-shadow .4s, background .4s; }
.pcard:hover { transform: translateY(-6px); background: var(--card); box-shadow: var(--shadow-lg); }
.pnum { font-size: 40px; letter-spacing: -.04em; color: var(--ink); line-height: 1; margin-bottom: 14px; background: linear-gradient(100deg, var(--accentA), var(--accentB)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcard b { font-size: 17px; letter-spacing: -.015em; }
.pcard p { margin: 0; color: var(--ink3); font-size: 14.5px; }
.pgrid .pcard:nth-child(2) { transition-delay: .08s; } .pgrid .pcard:nth-child(3) { transition-delay: .16s; } .pgrid .pcard:nth-child(4) { transition-delay: .24s; }

/* ---------- access ---------- */
.access { padding-bottom: 120px; overflow: hidden; }
.access-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.big-mark { position: relative; }
.hop-dot { position: absolute; width: var(--tit-w, .13em); height: var(--tit-h, .13em); border-radius: 50%; background: var(--live); font-size: clamp(88px, 19vw, 260px); left: 0; top: 0; box-shadow: 0 0 .4em color-mix(in srgb, var(--live) 70%, transparent); will-change: transform; }
.tagline { font-size: clamp(20px, 2.6vw, 32px); letter-spacing: -.02em; margin: 18px 0 0; color: var(--ink2); }
.access-ctas { display: flex; gap: 12px; margin-top: 42px; flex-wrap: wrap; justify-content: center; }
.fine { margin-top: 36px; font-size: 11px; letter-spacing: .14em; color: var(--ink3); }
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .board { grid-template-columns: repeat(2, 1fr); padding: 70px 16px 30px; gap: 16px; }
  .lab { grid-template-columns: 1fr; }
  .lab-stage { min-height: 420px; }
  .levels { grid-template-columns: 1fr 1fr; }
  .levels li.on { transform: none; }
  .fleet-grid-wrap, .phone-wrap { grid-template-columns: minmax(0, 1fr); }
  .mcp-stage { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mcp-wire { height: 70px; transform: rotate(90deg); width: 70px; margin: 0 auto; }
  .mcp-label { top: auto; left: 50%; display: none; }
  .mcp-ask { position: relative; left: auto; bottom: auto; transform: translateY(20px); margin: 20px auto 0; width: max-content; max-width: 100%; flex-wrap: wrap; }
  .mcp-stage.asking .mcp-ask { transform: none; }
  .pgrid { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr; padding-top: 130px; gap: 34px; }
  .flow-wires { display: none; }
  .phone-stage { height: 660px; max-width: 460px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { padding-left: 14px; }
  .nav .btn-ink { height: 34px; padding: 0 12px; font-size: 13px; }
  .hud-tr, .altimeter, .hud-br { display: none; }
  .hud-tl { top: 76px; left: 18px; } .hud-bl { left: 18px; bottom: 18px; }
  .hud::before { inset: 66px 8px 8px; }
  .board { grid-template-columns: 1fr; }
  .board .tile { min-height: 0; }
  .wire-label { display: none; }
  .levels { grid-template-columns: 1fr; }
  .levels p { display: none; }
  .levels li { padding: 12px 14px; }
  .fleet-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fc:nth-child(n+13) { display: none; }
  .pgrid { grid-template-columns: 1fr; }
  .phone-stage { height: 640px; }
  .mac-card { width: 240px; top: 420px; left: 0; z-index: 2; transform: rotate(-2deg); }
  .iphone { right: 50%; transform: translateX(50%) scale(.92); transform-origin: top center; }
  .kinetic-left { padding: 92px 0 0 20px; justify-content: flex-start; }
  .kinetic-left .k-sans { font-size: 40px; }
  .lightbox { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .grain { display: none; }
}