:root {
  --black: #070605;
  --ink: #100b09;
  --panel: #18110e;
  --steel: #2c211c;
  --volt: #ff5a1f;
  --volt-soft: #ffb066;
  --white: #fff8f3;
  --muted: #c4b5ad;
  --magenta: #ff3fb6;
  --orange: #ffbe0b;
  --cyan: #39d8ff;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --page: min(1180px, calc(100vw - 48px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; color: var(--white); background: var(--black); font-family: var(--body); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 12px 16px; color: var(--black); background: var(--volt); transform: translateY(-150%); font-weight: 950; }
.skip-link:focus { transform: none; }
.section-shell { width: var(--page); margin-inline: auto; }
.site-header { position: absolute; z-index: 20; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: var(--page); margin-inline: auto; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.road-mark, .studio-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.road-mark { justify-self: start; font-family: var(--display); font-size: .83rem; font-style: italic; }
.road-mark i { width: 7px; height: 36px; background: var(--volt); box-shadow: 6px 0 0 rgba(255,90,31,.3); transform: skew(-16deg); }
.road-mark span span { color: var(--volt); }
.studio-mark { justify-self: end; font-size: .62rem; }
.studio-mark img { width: 32px; height: 32px; object-fit: contain; }
.site-header nav { display: flex; gap: 25px; font-size: .59rem; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.site-header nav a { position: relative; padding: 10px 0; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 3px; height: 2px; background: var(--volt); transition: right .18s ease; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right: 0; }
.hero, .clash, .pressure, .finish { position: relative; min-height: 900px; overflow: hidden; background: var(--black); }
.hero { height: 100svh; max-height: 1080px; }
.hero-media, .hero-media img, .scene-media, .scene-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img, .scene-media img { object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,6,5,.98) 0%, rgba(7,6,5,.88) 34%, rgba(7,6,5,.2) 63%, rgba(7,6,5,.04)), linear-gradient(0deg, rgba(7,6,5,.75), transparent 42%); }
.lane-grid { position: absolute; inset: 0; opacity: .14; background: linear-gradient(90deg, transparent 49.8%, var(--volt) 50%, transparent 50.2%), repeating-linear-gradient(90deg, transparent 0 110px, rgba(255,255,255,.15) 111px 112px); mask-image: linear-gradient(90deg,#000,transparent 75%); transform: perspective(600px) rotateX(62deg) translateY(60%); transform-origin: bottom; }
.hero-content { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: var(--page); height: 100%; margin-inline: auto; padding-top: 70px; }
.status { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 23px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.55); color: var(--white); background: rgba(7,6,5,.64); font-size: .59rem; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; transform: skew(-8deg); }
.status span { width: 8px; height: 8px; background: var(--volt); box-shadow: 0 0 14px var(--volt); }
.hero h1 { display: flex; flex-direction: column; margin: 0; font-family: var(--display); font-size: clamp(6.5rem, 12.2vw, 12rem); line-height: .63; letter-spacing: -.05em; font-style: italic; transform: skew(-7deg); text-transform: uppercase; }
.hero h1 span:first-child { color: var(--white); }
.hero h1 span:last-child { margin-left: .18em; color: var(--volt); -webkit-text-stroke: 3px var(--black); text-shadow: 7px 7px 0 rgba(255,90,31,.2); }
.hero-line { margin: 43px 0 10px; font-family: var(--display); font-size: clamp(1.55rem, 2.8vw, 2.8rem); line-height: .94; letter-spacing: .03em; font-style: italic; transform: skew(-4deg); }
.hero-line strong { color: var(--volt); font-weight: inherit; }
.hero-copy { max-width: 610px; margin: 0; color: rgba(255,248,243,.8); font-size: clamp(.95rem, 1.25vw, 1.15rem); line-height: 1.62; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 50px; padding: 0 21px; border: 2px solid var(--volt); font-size: .67rem; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; transform: skew(-7deg); transition: color .18s ease, background .18s ease, translate .18s ease; }
.button:hover, .button:focus-visible { translate: 3px -3px; }
.button-volt { color: var(--black); background: var(--volt); box-shadow: 7px 7px 0 rgba(255,90,31,.24); }
.button-ghost { color: var(--white); border-color: rgba(255,255,255,.7); background: rgba(7,6,5,.55); box-shadow: 7px 7px 0 rgba(255,63,182,.28); }
.concept-note { max-width: 650px; margin: 22px 0 0; padding-left: 13px; border-left: 3px solid var(--volt); color: rgba(255,248,243,.58); font-size: .67rem; line-height: 1.52; }
.telemetry { position: absolute; z-index: 3; right: 4vw; bottom: 5vh; display: grid; grid-template-columns: 1fr 22px; gap: 10px 18px; width: 230px; padding: 18px; border: 1px solid rgba(255,255,255,.35); background: rgba(7,6,5,.7); backdrop-filter: blur(8px); transform: skew(-5deg); }
.telemetry span { color: var(--muted); font-size: .53rem; font-weight: 950; letter-spacing: .16em; }
.telemetry b { font-family: var(--display); font-size: 1.45rem; line-height: .84; }
.telemetry i { grid-column: 2; grid-row: 1/3; width: 8px; height: 100%; background: var(--volt); box-shadow: 0 0 20px rgba(255,90,31,.72); }
.signal-strip { display: flex; justify-content: center; align-items: center; gap: 34px; min-height: 76px; padding: 18px 24px; color: var(--black); background: var(--volt); border-block: 5px solid var(--black); }
.signal-strip p { margin: 0; font-family: var(--display); font-size: .9rem; font-style: italic; letter-spacing: .08em; }
.signal-strip p span { margin-right: 8px; color: #741c00; }
.signal-strip i { width: 56px; height: 2px; background: var(--black); transform: skew(-35deg); }
.kicker { margin: 0 0 18px; color: var(--volt); font-size: .64rem; font-weight: 950; letter-spacing: .19em; text-transform: uppercase; }
.kicker.light { color: var(--volt-soft); }
h2 { margin: 0; font-family: var(--display); font-size: clamp(3.8rem, 7vw, 7.4rem); line-height: .82; letter-spacing: -.025em; font-style: italic; transform: skew(-5deg); text-transform: uppercase; }
h2 em { color: var(--volt); font-style: inherit; -webkit-text-stroke: 1px var(--black); text-shadow: 4px 4px 0 rgba(255,90,31,.2); }
.road { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; align-items: center; padding-block: 130px 150px; }
.road-copy > p:not(.kicker) { margin: 31px 0 0; color: var(--muted); line-height: 1.75; }
.route-note { display: grid; grid-template-columns: auto 1fr; gap: 10px 17px; align-items: center; margin-top: 34px; padding: 15px 17px; border: 1px solid #463933; border-left: 5px solid var(--volt); background: var(--panel); transform: skew(-5deg); }
.route-note span { color: #927e74; font-size: .52rem; font-weight: 950; letter-spacing: .15em; }
.route-note b { font-size: .78rem; }
.road-frame { margin: 0; border: 2px solid #68534a; background: var(--panel); box-shadow: 16px 16px 0 rgba(255,90,31,.15); transform: skew(-2deg); }
.road-frame picture { display: block; aspect-ratio: 16/10; overflow: hidden; }
.road-frame img { width: 100%; height: 100%; object-fit: cover; }
.road-frame figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 14px 16px; font-size: .6rem; letter-spacing: .1em; }
.road-frame figcaption span { color: var(--volt); font-weight: 950; }
.road-frame figcaption b { color: var(--muted); }
.clash-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,6,5,.95), rgba(7,6,5,.43) 52%, rgba(7,6,5,.03) 76%), linear-gradient(0deg, rgba(7,6,5,.72), transparent 48%); }
.clash-copy, .pressure-copy, .finish-copy { position: relative; z-index: 2; padding-top: 105px; }
.clash-copy h2 { max-width: 760px; margin-top: 190px; font-size: clamp(5.5rem, 9.7vw, 10rem); line-height: .7; }
.clash-copy > p:last-child { max-width: 500px; margin-top: 39px; color: rgba(255,248,243,.76); line-height: 1.7; }
.code { padding-block: 130px 150px; }
.code header { display: grid; grid-template-columns: 1.12fr .88fr; column-gap: 7vw; align-items: end; }
.code header .kicker { grid-column: 1/-1; }
.code header > p:last-child { margin: 0 0 5px; color: var(--muted); line-height: 1.75; }
.code-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 70px; }
.code-grid article { min-height: 285px; padding: 26px 22px; border: 1px solid #493a34; border-top: 5px solid var(--volt); background: linear-gradient(145deg,var(--panel),#100b09); transform: skew(-2deg); }
.code-grid article:nth-child(2) { border-top-color: var(--cyan); transform: translateY(12px) skew(-2deg); }
.code-grid article:nth-child(3) { border-top-color: var(--magenta); }
.code-grid article:nth-child(4) { border-top-color: var(--orange); transform: translateY(12px) skew(-2deg); }
.code-grid span { display: block; margin-bottom: 45px; color: var(--volt); font-family: var(--display); font-size: 2.8rem; font-style: italic; }
.code-grid h3 { margin: 0 0 13px; font-family: var(--display); font-size: 1.35rem; font-style: italic; text-transform: uppercase; }
.code-grid p { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.pressure, .finish { min-height: 920px; }
.pressure-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,6,5,.05) 15%,rgba(7,6,5,.28) 49%,rgba(7,6,5,.96) 100%), linear-gradient(0deg,rgba(7,6,5,.76),transparent 46%); }
.pressure-copy { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.pressure-copy h2 { max-width: 750px; margin-top: 165px; font-size: clamp(5rem, 8.7vw, 9.2rem); line-height: .7; }
.pressure-copy > p:last-child { max-width: 500px; margin-top: 34px; color: rgba(255,248,243,.78); line-height: 1.7; }
.finish-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,6,5,.95),rgba(7,6,5,.37) 54%,rgba(7,6,5,.03) 78%),linear-gradient(0deg,rgba(7,6,5,.7),transparent 48%); }
.finish-copy h2 { max-width: 850px; margin-top: 175px; font-size: clamp(4.8rem, 8.5vw, 9rem); line-height: .7; }
.finish-copy > p:last-child { max-width: 480px; margin-top: 35px; color: rgba(255,248,243,.78); line-height: 1.7; }
.development { padding-block: 125px 140px; color: var(--black); background: var(--volt); border-block: 7px solid var(--black); }
.development-shell { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; align-items: center; }
.status.dark { color: var(--black); border-color: var(--black); background: rgba(255,255,255,.35); }
.status.dark span { background: var(--black); box-shadow: none; }
.development h2 em { color: var(--white); -webkit-text-stroke: 2px var(--black); text-shadow: 4px 4px 0 rgba(7,6,5,.25); }
.garage-note { padding: 52px 48px; border: 4px solid var(--black); color: var(--white); background: var(--panel); box-shadow: 13px 13px 0 rgba(7,6,5,.35); transform: skew(-3deg); }
.garage-label { color: var(--volt); font-size: .6rem; font-weight: 950; letter-spacing: .15em; }
.garage-note h3 { margin: 20px 0 17px; font-family: var(--display); font-size: 2rem; line-height: 1; font-style: italic; text-transform: uppercase; }
.garage-note p { color: var(--muted); line-height: 1.68; }
.garage-note .button { margin-top: 20px; }
.finale { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 650px; padding: 100px 24px; overflow: hidden; background: radial-gradient(circle at 50% 120%,rgba(255,90,31,.19),transparent 48%),var(--black); text-align: center; }
.finale::before { content: ""; position: absolute; inset: 0; opacity: .16; background: repeating-linear-gradient(108deg,transparent 0 37px,var(--volt) 38px 39px); }
.chevron { position: relative; z-index: 1; display: grid; place-items: center; width: 85px; height: 66px; margin-bottom: 25px; color: var(--black); background: var(--volt); font-family: var(--display); font-size: 2.7rem; transform: skew(-12deg); }
.finale > p { position: relative; z-index: 1; color: var(--muted); font-size: .66rem; font-weight: 950; letter-spacing: .2em; }
.finale h2 { position: relative; z-index: 1; font-size: clamp(4.2rem,8vw,8.3rem); }
.finale .button { position: relative; z-index: 1; margin-top: 38px; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 30px max(24px,calc((100vw - 1180px)/2)); color: #927e74; background: #030201; border-top: 1px solid #2c211c; font-size: .62rem; }
footer .studio-mark { color: var(--white); }
footer > a:last-child { color: var(--volt); font-weight: 950; text-transform: uppercase; }
@media (max-width:930px) {
  :root { --page: calc(100vw - 36px); }
  .site-header { grid-template-columns:1fr 1fr; }
  .site-header nav { display:none; }
  .road,.development-shell { grid-template-columns:1fr; }
  .road { gap:70px; }
  .code header { grid-template-columns:1fr; }
  .code header > p:last-child { margin-top:28px; }
  .code-grid { grid-template-columns:repeat(2,1fr); }
  .telemetry { display:none; }
}
@media (max-width:720px) {
  :root { --page: calc(100vw - 30px); }
  .site-header { padding-top:14px; }
  .road-mark { font-size:.68rem; }
  .studio-mark { font-size:.52rem; }
  .studio-mark img { width:28px; height:28px; }
  .hero { min-height:780px; max-height:940px; }
  .hero-media img { object-position:center center; }
  .hero-shade { background:linear-gradient(180deg,rgba(7,6,5,.96),rgba(7,6,5,.5) 28%,rgba(7,6,5,.02) 55%,rgba(7,6,5,.95) 100%); }
  .lane-grid { display:none; }
  .hero-content { justify-content:flex-start; padding-top:90px; }
  .status { margin-bottom:14px; padding:7px 11px; font-size:.51rem; }
  .hero h1 { font-size:clamp(5.1rem,25vw,7.2rem); line-height:.62; }
  .hero h1 span:last-child { margin-left:.06em; -webkit-text-stroke-width:2px; }
  .hero-line { margin-top:auto; font-size:1.45rem; }
  .hero-copy { max-width:96%; font-size:.83rem; line-height:1.48; }
  .hero-actions { margin-top:17px; gap:9px; }
  .button { min-height:44px; padding:0 14px; font-size:.57rem; }
  .concept-note { margin:15px 0 22px; font-size:.57rem; }
  .signal-strip { gap:14px; min-height:64px; padding:14px 10px; }
  .signal-strip p { font-size:.64rem; }
  .signal-strip p span { display:none; }
  .signal-strip i { width:22px; }
  h2 { font-size:clamp(3.5rem,16vw,5rem); }
  .road { padding-block:90px 105px; gap:58px; }
  .road-copy > p:not(.kicker) { font-size:.86rem; }
  .road-frame { box-shadow:8px 8px 0 rgba(255,90,31,.17); }
  .road-frame picture { aspect-ratio:4/5; }
  .road-frame figcaption { flex-direction:column; gap:5px; font-size:.54rem; }
  .clash,.pressure,.finish { min-height:820px; }
  .clash-shade,.pressure-shade,.finish-shade { background:linear-gradient(180deg,rgba(7,6,5,.78),transparent 42%,rgba(7,6,5,.95) 78%); }
  .clash-copy,.pressure-copy,.finish-copy { align-items:flex-start; padding-top:52px; text-align:left; }
  .clash-copy h2,.pressure-copy h2,.finish-copy h2 { margin-top:455px; font-size:clamp(4rem,18.5vw,5.8rem); }
  .clash-copy > p:last-child,.pressure-copy > p:last-child,.finish-copy > p:last-child { margin-top:23px; font-size:.83rem; }
  .code { padding-block:90px 105px; }
  .code header > p:last-child { font-size:.85rem; }
  .code-grid { gap:8px; margin-top:48px; }
  .code-grid article { min-height:225px; padding:18px 13px; }
  .code-grid article:nth-child(n) { transform:none; }
  .code-grid span { margin-bottom:27px; font-size:2.15rem; }
  .code-grid h3 { font-size:.98rem; }
  .code-grid p { font-size:.68rem; }
  .development { padding-block:90px 105px; }
  .development-shell { gap:55px; }
  .garage-note { padding:40px 27px 34px; box-shadow:8px 8px 0 rgba(7,6,5,.35); }
  .garage-note h3 { font-size:1.55rem; }
  .garage-note p { font-size:.83rem; }
  .finale { min-height:580px; }
  .finale h2 { font-size:clamp(3.8rem,17vw,5.3rem); }
  footer { flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; } }