/* RECONVOLT — base tokens */
@font-face { font-family: 'Big Shoulders'; src: url(../fonts/big-shoulders-display-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Big Shoulders'; src: url(../fonts/big-shoulders-display-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; src: url(../fonts/instrument-sans-latin-standard-normal.woff2) format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; src: url(../fonts/instrument-sans-latin-ext-standard-normal.woff2) format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; }
@font-face { font-family: 'Red Hat Mono'; src: url(../fonts/red-hat-mono-latin-wght-normal.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  --carbon: #0b0c0e; --panel: #131417; --graphite: #1c1e22; --line: rgba(236, 232, 223, .12); --line-2: rgba(236, 232, 223, .22);
  --bone: #ece8df; --bone-2: rgba(236, 232, 223, .66); --bone-3: rgba(236, 232, 223, .42); --steel: #8a90a0;
  --amber: #ff6a23; --ember: #ffb07a; --amber-d: rgba(255, 106, 35, .14);
  --f-display: 'Big Shoulders', 'Arial Narrow', Impact, sans-serif; --f-text: 'Instrument Sans', system-ui, sans-serif; --f-mono: 'Red Hat Mono', ui-monospace, monospace;
  --ch: 14px; /* chamfer */
  --ease: cubic-bezier(.2, .7, .1, 1); --ease-io: cubic-bezier(.7, 0, .2, 1);
  --pad: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--carbon); color: var(--bone); font: 400 16px/1.55 var(--f-text); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--amber); color: var(--carbon); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.mono { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.display { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; line-height: .88; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.chamfer { clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch)); }

.btn { --c: var(--bone); display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 26px; font: 600 13px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; position: relative;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: background .3s, color .3s; }
.btn .ic { transition: transform .4s var(--ease); }
.btn:hover .ic { transform: translateX(4px); }
.btn-solid { background: var(--amber); color: #120903; }
.btn-solid:hover { background: var(--ember); }
.btn-line { background: var(--line-2); color: var(--bone); }
.btn-line::before { content: ''; position: absolute; inset: 1px; background: var(--carbon); clip-path: inherit; z-index: -1; transition: background .3s; }
.btn-line { isolation: isolate; }
.btn-line:hover::before { background: var(--graphite); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 11.5px; }

.lang { display: flex; border: 1px solid var(--line); }
.lang button { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; padding: 8px 10px; color: var(--bone-3); transition: color .2s, background .2s; }
.lang button.on { color: var(--carbon); background: var(--bone); }
.lang button:hover:not(.on) { color: var(--bone); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 30px; height: 26px; fill: var(--amber); }
.brand-word { width: 128px; height: 18px; fill: var(--bone); }
.back-link { color: var(--bone-3); }
.back-link:hover { color: var(--bone); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* RECONVOLT — onepager */
html { scroll-behavior: smooth; }
html.is-intro body { overflow: hidden; }
body { overflow-x: clip; }
.wrap { padding-left: var(--pad); padding-right: var(--pad); max-width: 1680px; margin: 0 auto; }
.kicker { display: flex; gap: 14px; align-items: center; color: var(--bone-3); margin: 0 0 28px; }
.kicker span:first-child { color: var(--amber); }
.kicker span:first-child::after { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--amber); vertical-align: middle; margin-left: 14px; }
.h2 { font-size: clamp(48px, 7.4vw, 128px); margin: 0 0 28px; }
.body { color: var(--bone-2); font-size: clamp(16px, 1.25vw, 19px); max-width: 52ch; margin: 0 0 32px; }
.label { color: var(--bone-3); display: block; margin-bottom: 10px; }
.fine { color: var(--bone-3); font-size: 13px; max-width: 70ch; margin: 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--ember); margin: 0 0 22px; }
.dot { width: 7px; height: 7px; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-d); animation: blink 2.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: radial-gradient(60% 60% at 50% 46%, #1a120d 0%, var(--carbon) 70%); display: grid; place-items: center; transition: opacity .9s var(--ease), visibility .9s; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-word { position: absolute; left: 50%; top: calc(50% + min(21vh, 27vw)); width: min(420px, 62vw); transform: translate(-50%, 0); opacity: 0; transition: opacity 1s .2s, letter-spacing 1s; }
.intro-word svg { width: 100%; height: auto; fill: var(--bone); }
.intro.is-word .intro-word { opacity: 1; }
.intro-meta { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; display: flex; justify-content: space-between; color: var(--bone-3); }
.intro-pct { color: var(--amber); }
.intro-skip { position: absolute; top: 24px; right: var(--pad); color: var(--bone-3); padding: 8px 0; }
.intro-skip:hover { color: var(--bone); }
.intro.is-out { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- header ---------- */
.head { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad);
  transition: transform .5s var(--ease), background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.head.is-solid { background: rgba(11, 12, 14, .82); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-color: var(--line); }
.head.is-hidden { transform: translateY(-100%); }
.nav { display: flex; gap: 34px; }
.nav a { font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-2); position: relative; padding: 8px 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--amber); transition: right .4s var(--ease); }
.nav a:hover { color: var(--bone); }
.nav a:hover::after { right: 0; }
.head-r { display: flex; align-items: center; gap: 14px; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; --mx: 0; --my: 0; --sp: 0; }
.hero-grid { position: absolute; inset: -10%; z-index: -3; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; opacity: .35;
  mask-image: radial-gradient(60% 55% at 60% 55%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(60% 55% at 60% 55%, #000 0%, transparent 75%);
  transform: translate3d(calc(var(--mx) * -10px), calc(var(--my) * -10px + var(--sp) * 80px), 0); }
.hero-word { position: absolute; inset: 0; z-index: -2; display: grid; place-items: center; pointer-events: none;
  transform: translate3d(calc(var(--mx) * -24px), calc(var(--my) * -16px + var(--sp) * 220px), 0); }
.hero-word span { font: 900 min(64vw, 92vh)/0.8 var(--f-display); letter-spacing: -.04em; color: rgba(255, 106, 35, .045); -webkit-text-stroke: 1px rgba(255, 140, 80, .22); transform: translateX(14%) translateY(-4%); }
.hero-glow { position: absolute; z-index: -2; left: 50%; top: 52%; width: 70vw; height: 50vw; transform: translate(-30%, -50%); background: radial-gradient(closest-side, rgba(255, 106, 35, .28), rgba(255, 106, 35, 0)); filter: blur(10px); }
.hero-car { position: absolute; z-index: -1; right: -6vw; bottom: -4vh; width: min(82vw, 152vh); aspect-ratio: 16/9;
  transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 10px + var(--sp) * -60px), 0) scale(calc(1 + var(--sp) * .08)); transition: filter .6s; }
.hero-car img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .6)); animation: carIn 1.8s var(--ease) both; animation-play-state: paused; }
html.is-ready .hero-car img { animation-play-state: running; }
@keyframes carIn { from { opacity: 0; transform: translate3d(6%, 4%, 0) scale(1.06); filter: brightness(.2) drop-shadow(0 40px 60px rgba(0,0,0,.6)); } }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
.hero-copy { position: absolute; z-index: 2; left: var(--pad); bottom: clamp(70px, 12vh, 140px); max-width: 760px; transform: translate3d(0, calc(var(--sp) * -120px), 0); opacity: calc(1 - var(--sp) * 1.6); }
.hero-copy h1 { font-size: clamp(60px, min(8.6vw, 15vh), 168px); margin: 0 0 28px; text-shadow: 0 10px 50px rgba(0, 0, 0, .45); }
.hero-copy h1 .ln { display: block; overflow: hidden; }
.hero-copy h1 .ln > span { display: block; transform: translateY(105%); transition: transform 1.2s var(--ease); }
html.is-ready .hero-copy h1 .ln > span { transform: none; }
html.is-ready .hero-copy h1 .ln:nth-child(2) > span { transition-delay: .12s; }
.hero-copy .lede { color: var(--bone-2); font-size: clamp(15px, 1.15vw, 18px); max-width: 46ch; margin: 0 0 34px; }
.hero-copy .eyebrow, .hero-copy .lede, .hero-copy .ctas { opacity: 0; transform: translateY(16px); transition: opacity 1s .4s, transform 1s .4s var(--ease); }
html.is-ready .hero-copy .eyebrow, html.is-ready .hero-copy .lede, html.is-ready .hero-copy .ctas { opacity: 1; transform: none; }
html.is-ready .hero-copy .ctas { transition-delay: .55s; }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-hud { position: absolute; inset: 96px var(--pad) 28px; z-index: 1; pointer-events: none; color: var(--bone-3); }
.hud { position: absolute; }
.hud.tl { top: 0; left: 0; } .hud.tr { top: 0; right: 0; } .hud.bl { bottom: 0; left: 0; display: none; } .hud.br { bottom: 0; right: 0; }
.hud::before { content: ''; position: absolute; width: 10px; height: 10px; border: 1px solid var(--bone-3); }
.hud.tl::before { left: -16px; top: -14px; border-right: 0; border-bottom: 0; } .hud.tr::before { right: -16px; top: -14px; border-left: 0; border-bottom: 0; }
.hud.br::before { right: -16px; bottom: -14px; border-left: 0; border-top: 0; }
.reticle { position: absolute; left: calc(62% + var(--mx) * 30px); top: calc(46% + var(--my) * 20px); width: 64px; height: 64px; transform: translate(-50%, -50%); border: 1px solid rgba(255, 106, 35, .5);
  clip-path: polygon(0 0, 30% 0, 30% 2px, 2px 2px, 2px 30%, 0 30%, 0 70%, 2px 70%, 2px calc(100% - 2px), 30% calc(100% - 2px), 30% 100%, 70% 100%, 70% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 70%, 100% 70%, 100% 30%, calc(100% - 2px) 30%, calc(100% - 2px) 2px, 70% 2px, 70% 0); transition: left .6s var(--ease), top .6s var(--ease); }
.reticle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: var(--amber); }
.hero-scroll { position: absolute; z-index: 2; right: var(--pad); bottom: 70px; display: flex; align-items: center; gap: 14px; color: var(--bone-3); writing-mode: vertical-rl; }
.hero-scroll i { width: 1px; height: 64px; background: linear-gradient(var(--amber), transparent); animation: drop 2.2s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- ticker ---------- */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: var(--panel); }
.ticker-track { display: flex; width: max-content; animation: tick 46s linear infinite; }
.ticker-track span { font: 600 13px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 20px 36px; color: var(--bone-2); white-space: nowrap; display: flex; align-items: center; gap: 36px; }
.ticker-track span::after { content: ''; width: 9px; height: 9px; background: var(--amber); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- manifest ---------- */
.manifest { padding-top: clamp(120px, 18vh, 220px); padding-bottom: clamp(120px, 18vh, 220px); }
.manifest-text { font: 600 clamp(30px, 4.3vw, 76px)/1.08 var(--f-text); letter-spacing: -.025em; margin: 0; max-width: 22ch; }
.manifest-text .w { color: rgba(236, 232, 223, .14); transition: color .35s; }
.manifest-text .w.on { color: var(--bone); }
.manifest-text em { font-style: normal; }
.manifest-text em .w.on { color: var(--amber); }

/* ---------- anatomy ---------- */
.anat { position: relative; height: 760vh; }
.anat-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: radial-gradient(70% 60% at 62% 55%, #17181b 0%, var(--carbon) 70%); }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.anat-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.anat-lines line { stroke: var(--amber); stroke-width: 1; }
.anat-lines circle { fill: var(--amber); }
.anat-head { position: absolute; top: 100px; left: 0; right: 0; }
.anat-steps { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); width: min(440px, 38vw); }
.anat-steps li { position: absolute; left: 0; top: 0; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .6s, transform .8s var(--ease); }
.anat-steps li.on { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.anat-steps li.prev { transform: translateY(calc(-50% - 40px)); }
.anat-steps li.next { transform: translateY(calc(-50% + 40px)); }
.anat-steps .mono { color: var(--amber); margin: 0 0 18px; }
.anat-steps h3 { font: 800 clamp(40px, 4.6vw, 82px)/.9 var(--f-display); text-transform: uppercase; margin: 0 0 22px; }
.anat-steps p:last-child { color: var(--bone-2); margin: 0; font-size: 17px; max-width: 40ch; }
.anat-rail { position: absolute; left: var(--pad); bottom: 40px; display: flex; align-items: center; gap: 18px; color: var(--bone-3); }
.anat-rail::before { content: ''; width: 180px; height: 1px; background: var(--line-2); }
.anat-rail i { position: absolute; left: 0; width: 180px; height: 1px; background: var(--amber); transform-origin: left; transform: scaleX(0); }
.anat-tags { position: absolute; inset: 0; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; gap: 10px; align-items: center; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone);
  padding: 8px 12px; background: rgba(11, 12, 14, .72); border: 1px solid var(--line-2); backdrop-filter: blur(8px); transition: opacity .4s; white-space: nowrap; }
.tag b { color: var(--amber); font-weight: 600; }
.anat-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 12px; justify-items: center; color: var(--bone-3); transition: opacity .6s; }
.anat-load i { width: 160px; height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.anat-load i::after { content: ''; position: absolute; inset: 0; background: var(--amber); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .3s; }
.anat-load.is-done { opacity: 0; }

/* ---------- numbers ---------- */
.numbers { padding-top: clamp(100px, 16vh, 200px); padding-bottom: clamp(80px, 12vh, 160px); }
.num-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.num { padding: 40px 28px 44px 0; border-bottom: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.num:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.num b { font-size: clamp(72px, 9vw, 160px); font-variant-numeric: tabular-nums; }
.num span { color: var(--bone-2); font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- gallery ---------- */
.gal { position: relative; height: 420vh; }
.gal-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 110px 0 40px; }
.gal-head { display: flex; justify-content: space-between; align-items: end; width: 100%; max-width: none; }
.gal-head .h2 { margin: 0; font-size: clamp(40px, 5vw, 88px); }
.gal-track { display: flex; gap: 24px; align-items: center; padding: 0 var(--pad); will-change: transform; }
.gal-item { flex: 0 0 auto; width: min(52vh, 70vw); margin: 0; }
.gal-item.g-wide { width: min(112vh, 86vw); }
.gal-img { aspect-ratio: 4/5; overflow: hidden; position: relative; background: var(--panel); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.g-wide .gal-img { aspect-ratio: 16/9.6; }
.gal-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15) translateX(var(--gx, 0)); transition: transform .2s linear; }
.g-blue .gal-img { background: radial-gradient(80% 70% at 50% 60%, #1d2a4a 0%, #0b0f1b 75%); }
.g-amber .gal-img { background: radial-gradient(80% 70% at 50% 65%, #7a2d0c 0%, #1a0b05 75%); }
.g-dark .gal-img { background: linear-gradient(180deg, #202226, #0e0f11); }
.g-blue img, .g-amber img, .g-dark img { object-fit: contain; transform: scale(1.02) translateX(var(--gx, 0)); }
.gal-item figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; color: var(--bone-3); }
.gal-item figcaption span:first-child { color: var(--amber); }
.gal-progress { margin: 0 var(--pad); height: 1px; background: var(--line); position: relative; }
.gal-progress i { position: absolute; inset: 0; background: var(--amber); transform-origin: left; transform: scaleX(0); }

/* ---------- silent ---------- */
.silent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 120px); align-items: center; padding-top: clamp(120px, 16vh, 220px); padding-bottom: clamp(100px, 14vh, 200px); }
.db { display: grid; gap: 22px; }
.db-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 90px; gap: 18px; align-items: center; color: var(--bone-2); font-size: 15px; }
.db-row i { height: 14px; background: repeating-linear-gradient(90deg, var(--bone-3) 0 3px, transparent 3px 7px); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease); clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0); }
.db.on .db-row i { transform: scaleX(1); }
.db-row.is-r4 { color: var(--bone); }
.db-row.is-r4 i { background: repeating-linear-gradient(90deg, var(--amber) 0 3px, transparent 3px 7px); }
.db-row b { color: var(--bone-3); font-weight: 500; text-align: right; }
.db-row.is-r4 b { color: var(--amber); }
.db-scale { display: grid; grid-template-columns: repeat(5, 1fr) 0; margin-left: 188px; margin-right: 108px; color: var(--bone-3); font-size: 10px; border-top: 1px solid var(--line); padding-top: 8px; }

/* ---------- power ---------- */
.power { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; min-height: 100svh; background: linear-gradient(180deg, var(--carbon), var(--panel) 30%, var(--panel) 70%, var(--carbon)); overflow: hidden; }
.power-img { position: relative; height: 100%; min-height: 60vh; }
.power-img img { position: absolute; left: -10%; top: 50%; width: 120%; max-width: none; transform: translateY(calc(-50% + var(--py, 0) * 1px)); filter: drop-shadow(0 30px 50px rgba(0,0,0,.7)); }
.power-cable { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.power-cable path { fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 6 10; animation: flow 1.2s linear infinite; opacity: var(--on, 0); transition: opacity .6s; filter: drop-shadow(0 0 6px var(--amber)); }
@keyframes flow { to { stroke-dashoffset: -32; } }
.power-copy { padding-top: 120px; padding-bottom: 120px; max-width: 720px; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chip { display: inline-flex; gap: 10px; align-items: center; padding: 11px 16px; border: 1px solid var(--line-2); font-size: 14px; color: var(--bone-2); transition: all .25s; }
.chip b { font: 500 11px/1 var(--f-mono); color: var(--bone-3); }
.chip:hover { border-color: var(--bone-3); color: var(--bone); }
.chip[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #140a04; }
.chip[aria-pressed="true"] b { color: #140a04; }
.power-out { display: grid; grid-template-columns: auto auto 1fr; gap: 36px; align-items: end; border-top: 1px solid var(--line); padding-top: 24px; }
.power-out b { font-size: clamp(40px, 4vw, 64px); font-variant-numeric: tabular-nums; }
.gauge { height: 6px; background: var(--line); position: relative; align-self: center; margin-top: 30px; }
.gauge i { position: absolute; inset: 0; background: var(--amber); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease), background .3s; }
.gauge.over i { background: #e0402a; }
.gauge span { position: absolute; right: 0; top: -22px; color: var(--bone-3); font-size: 10px; }

/* ---------- missions ---------- */
.missions { padding-top: clamp(120px, 16vh, 220px); padding-bottom: clamp(80px, 12vh, 160px); }
.ms-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.ms { position: relative; min-height: 520px; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--panel); isolation: isolate;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.ms-img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: var(--bp); transform: scale(1.18); transition: transform 1.2s var(--ease), filter .6s; filter: grayscale(.85) brightness(.55); }
.ms-alpha { background-size: 190%; background-repeat: no-repeat; background-color: #16171a; }
.ms-sand { background-color: #2a1d10; }
.ms::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,12,14,0) 20%, rgba(11,12,14,.92) 78%); }
.ms:hover .ms-img { transform: scale(1.08); filter: grayscale(0) brightness(.7); }
.ms-n { position: absolute; top: 24px; left: 28px; color: var(--amber); font-size: 13px; }
.ms h3 { font: 800 clamp(28px, 2.4vw, 40px)/.95 var(--f-display); text-transform: uppercase; margin: 0 0 14px; }
.ms p { color: var(--bone-2); font-size: 15px; margin: 0 0 22px; }
.ms-go { display: flex; gap: 10px; align-items: center; color: var(--bone); border-top: 1px solid var(--line-2); padding-top: 16px; }
.ms:hover .ms-go { color: var(--amber); }

/* ---------- cost ---------- */
.cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); padding-top: clamp(100px, 14vh, 200px); padding-bottom: clamp(100px, 14vh, 200px); border-top: 1px solid var(--line); }
.sliders { display: grid; gap: 26px; }
.sliders label { display: grid; grid-template-columns: 1fr auto; gap: 12px; color: var(--bone-2); font-size: 15px; }
.sliders output { color: var(--bone); }
.sliders input { grid-column: 1 / -1; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; --p: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--amber) var(--p), var(--line-2) var(--p)); }
input[type=range]::-moz-range-track { height: 2px; background: linear-gradient(90deg, var(--amber) var(--p), var(--line-2) var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; background: var(--bone); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 0; background: var(--bone); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cost-out { align-self: center; display: grid; gap: 40px; }
.bars { display: grid; gap: 22px; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; color: var(--bone-3); }
.bar i { grid-column: 1 / -1; grid-row: 2; height: 44px; background: var(--graphite); transform-origin: left; transition: transform .7s var(--ease); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.bar.is-r4 i { background: var(--amber); }
.bar b { color: var(--bone); font-size: 14px; }
.cost-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cost-kpis > div { padding: 22px 16px 0 0; }
.cost-kpis > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.cost-kpis b { font-size: clamp(32px, 3.2vw, 54px); font-variant-numeric: tabular-nums; }
.cost-kpis > div:first-child b { color: var(--amber); }

/* ---------- tools ---------- */
.tools { padding-top: clamp(80px, 12vh, 160px); padding-bottom: clamp(120px, 16vh, 220px); }
.tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tool { position: relative; padding: 36px 30px 30px; min-height: 340px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.tool::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--amber-d), transparent 60%); opacity: 0; transition: opacity .5s; }
.tool:hover::before { opacity: 1; }
.ic-l { width: 40px; height: 40px; fill: none; stroke: var(--amber); stroke-width: 1.3; margin-bottom: auto; }
.tool h3 { font: 800 clamp(30px, 2.6vw, 44px)/1 var(--f-display); text-transform: uppercase; margin: 60px 0 12px; }
.tool p { color: var(--bone-2); font-size: 15px; margin: 0 0 26px; }
.tool > .mono { color: var(--bone-3); display: flex; justify-content: space-between; align-items: center; }
.tool > .mono::after { content: '→'; font-size: 16px; transition: transform .4s var(--ease); }
.tool:hover > .mono { color: var(--amber); }
.tool:hover > .mono::after { transform: translateX(6px); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-top: 60px; overflow: hidden; }
.foot-word { padding: 0 var(--pad); }
.foot-word svg { width: 100%; height: auto; fill: none; stroke: rgba(236, 232, 223, .16); stroke-width: 1; }
.foot-row { display: flex; align-items: center; gap: 32px; padding-top: 40px; padding-bottom: 40px; justify-content: space-between; flex-wrap: wrap; max-width: none; }
.foot-row .fine { flex: 1; min-width: 240px; }
.foot-nav { display: flex; gap: 28px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.foot-nav a { color: var(--bone-2); }
.foot-nav a:hover { color: var(--amber); }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .ms-grid, .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .silent, .cost { grid-template-columns: minmax(0, 1fr); }
  .power { grid-template-columns: minmax(0, 1fr); }
  .power-img { min-height: 46vh; }
  .power-copy { padding-top: 0; }
}
@media (max-width: 720px) {
  .head { height: 64px; gap: 10px; }
  .brand-word { display: none; }
  .head .btn-sm { padding: 0 12px; }
  .hero { min-height: 600px; }
  .hero-car { width: 172vw; right: -62vw; top: 64px; bottom: auto; }
  .hero-word span { font-size: 92vw; transform: translate(10%, -30%); }
  .hero-copy { bottom: 32px; right: var(--pad); }
  .hero-copy .lede { font-size: 15px; margin-bottom: 24px; }
  .ctas .btn { height: 46px; }
  .hero-copy h1 { font-size: 19vw; }
  .hero-hud .tr, .hero-scroll, .reticle { display: none; }
  .anat { height: 680vh; }
  .anat-steps { width: auto; right: var(--pad); top: auto; bottom: 90px; transform: none; }
  .anat-steps li { top: auto; bottom: 0; transform: none; }
  .anat-steps li.on, .anat-steps li.prev, .anat-steps li.next { transform: none; }
  .anat-steps h3 { font-size: 40px; }
  .anat-steps p:last-child { font-size: 15px; }
  .anat-steps li::before { content: ''; position: absolute; inset: -20px -16px -20px; z-index: -1; background: linear-gradient(180deg, rgba(11,12,14,0), rgba(11,12,14,.85) 30%); }
  .anat-head { top: 80px; }
  .num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num { padding: 28px 16px 30px 0 !important; border-left: 0 !important; }
  .num:nth-child(2n) { padding-left: 16px !important; border-left: 1px solid var(--line) !important; }
  .num b { font-size: 64px; }
  .gal { height: 360vh; }
  .gal-item { width: 76vw; } .gal-item.g-wide { width: 88vw; }
  .db-row { grid-template-columns: 110px minmax(0, 1fr) 72px; font-size: 13px; gap: 10px; }
  .db-scale { margin-left: 120px; margin-right: 82px; }
  .power-out { grid-template-columns: 1fr 1fr; gap: 20px; }
  .gauge { grid-column: 1 / -1; }
  .ms-grid, .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .ms { min-height: 380px; }
  .cost-kpis { grid-template-columns: minmax(0, 1fr); }
  .cost-kpis > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 18px; }
  .tool { min-height: 260px; }
  .foot-nav { flex-wrap: wrap; gap: 18px; }
}