:root {
  --bg: #050505;
  --panel: #0b0c0e;
  --text: #f2f2f2;
  --muted: #8c9097;
  --line: rgba(255,255,255,.14);
  --accent: #dfe6eb;
  --danger: #a71f22;
  --header-h: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.page-noise {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}
.progress-rail { position: fixed; top: 0; left: 0; z-index: 120; width: 100%; height: 2px; background: rgba(255,255,255,.06); }
.progress-rail span { display: block; width: 0; height: 100%; background: #fff; transform-origin: left; }

body.is-loading { overflow: hidden; height: 100vh; }

.loader { position: fixed; inset: 0; z-index: 200; }
.loader-panel { position: absolute; left: 0; width: 100%; height: 50.5%; will-change: transform; transition: transform .9s cubic-bezier(.83, 0, .17, 1); }
.loader-panel-top { top: 0; background: linear-gradient(180deg, #050505, #070809); }
.loader-panel-bottom { bottom: 0; background: linear-gradient(0deg, #050505, #070809); }
.loader-panel-top::after, .loader-panel-bottom::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); }
.loader-panel-top::after { bottom: 0; }
.loader-panel-bottom::after { top: 0; }
.loader--done { pointer-events: none; }
.loader--done .loader-panel-top { transform: translateY(-102%); }
.loader--done .loader-panel-bottom { transform: translateY(102%); transition-delay: .06s; }

.loader-content { position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: opacity .45s ease, transform .45s ease, filter .45s ease; }
.loader--done .loader-content { opacity: 0; transform: scale(1.05); filter: blur(10px); }
.loader-brand { font-family: "Space Grotesk", sans-serif; font-size: 22px; letter-spacing: .16em; color: #fff; }
.loader-brand span { color: var(--muted); font-weight: 500; }
.loader-tagline { margin: 14px 0 0; color: #73777c; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; }
.loader-track { position: relative; width: min(240px, 60vw); height: 1px; margin-top: 42px; background: rgba(255,255,255,.14); overflow: hidden; }
.loader-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fff, #dfe6eb, #fff); background-size: 200% 100%; animation: loader-shimmer 1.3s linear infinite; box-shadow: 0 0 12px rgba(255,255,255,.55); }
.loader-meta { display: flex; justify-content: space-between; width: min(240px, 60vw); margin-top: 13px; color: #70747a; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.loader-percent { font-family: "Space Grotesk"; }
@keyframes loader-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

body.is-loaded .site-header,
body.is-loaded .scroll-cue { animation: vm-rise .9s cubic-bezier(.22, 1, .36, 1) backwards; }
body.is-loaded .hero-intro { animation: vm-rise .9s cubic-bezier(.22, 1, .36, 1) .12s backwards; }
@keyframes vm-rise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

.site-header {
  position: fixed; z-index: 90; left: 0; right: 0; top: 0; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4vw;
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { background: rgba(5,5,5,.7); backdrop-filter: blur(18px); border-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 5px; font-family: "Space Grotesk", sans-serif; font-size: 14px; letter-spacing: .16em; width: max-content; }
.brand strong { font-weight: 500; color: var(--muted); }
.brand-mark { width: 22px; height: 10px; margin-right: 8px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; transform: skewX(-28deg); }
.desktop-nav { display: flex; gap: 34px; color: #b9bcc1; font-size: 12px; text-transform: uppercase; letter-spacing: .13em; }
.desktop-nav a:hover { color: #fff; }
.header-cta { justify-self: end; border: 1px solid rgba(255,255,255,.28); padding: 11px 17px; border-radius: 999px; font-size: 12px; letter-spacing: .06em; transition: .25s; }
.header-cta:hover { background: #fff; color: #050505; }

.scroll-experience { height: 620vh; position: relative; }
.sticky-stage { position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; background: #030303; }
.hero-video, .fallback-visual { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { z-index: 1; opacity: 0; transition: opacity .8s ease; filter: saturate(.8) contrast(1.08); }
.hero-video.ready { opacity: 1; }
.fallback-visual {
  z-index: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 53% 45%, #303237 0, #101114 28%, #050505 66%);
  overflow: hidden;
}
.fallback-visual::before { content:""; position:absolute; inset:0; background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.08) 43%, transparent 54%); transform: translateX(-100%); animation: sweep 7s ease-in-out infinite; }
.light-orbit { position:absolute; width:70vw; height:70vw; border:1px solid rgba(255,255,255,.12); border-radius:50%; filter: blur(.2px); }
.orbit-one { transform: rotateX(70deg) rotateZ(12deg); box-shadow: 0 0 80px rgba(255,255,255,.05); }
.orbit-two { width:44vw; height:44vw; transform: rotateX(65deg) rotateZ(-28deg); opacity:.6; }
.car-silhouette { position:absolute; left:50%; top:53%; width:min(64vw, 970px); height:min(18vw, 280px); transform:translate(-50%,-50%); background: linear-gradient(180deg,#282a2e 0,#090a0b 52%,#020202 100%); border-radius: 50% 58% 22% 18% / 70% 64% 24% 25%; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 55px 80px #000; clip-path: polygon(4% 66%, 12% 43%, 29% 25%, 54% 19%, 73% 29%, 89% 44%, 97% 63%, 95% 79%, 4% 80%); }
.car-silhouette::before { content:""; position:absolute; left:31%; top:15%; width:41%; height:38%; background:linear-gradient(130deg,#060708,#1c2024); clip-path:polygon(12% 16%,70% 4%,98% 94%,0 87%); border-top:1px solid rgba(255,255,255,.2); }
.car-silhouette::after { content:""; position:absolute; left:6%; top:51%; width:15%; height:4px; background:#e8f7ff; box-shadow:0 0 18px #d7f4ff, 58vw 0 18px #d7f4ff; border-radius:99px; }
.wheel { position:absolute; width:17%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#15171a 0 22%,#050505 23% 48%,#181a1d 50% 58%,#020202 60%); bottom:-22%; box-shadow:inset 0 0 0 1px #333; }
.wheel-left { left:17%; }.wheel-right{right:13%;}
.road-line { position:absolute; width:120%; height:2px; top:75%; background:linear-gradient(90deg,transparent,#888,transparent); opacity:.2; transform:perspective(600px) rotateX(70deg); }
@keyframes sweep { 0%,20%{transform:translateX(-110%)} 70%,100%{transform:translateX(110%)} }

.stage-vignette { position:absolute; inset:0; z-index:2; background:radial-gradient(circle at center,transparent 38%,rgba(0,0,0,.34) 78%,rgba(0,0,0,.72) 100%), linear-gradient(180deg,rgba(0,0,0,.42),transparent 25%,transparent 70%,rgba(0,0,0,.62)); pointer-events:none; }
.stage-grid { position:absolute; inset:0; z-index:2; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:8vw 8vw; mask-image:linear-gradient(180deg,transparent,black 35%,black 70%,transparent); }

.hero-intro, .scene-copy { position:absolute; z-index:5; transition: opacity .35s ease, transform .45s ease, filter .45s ease; }
.hero-intro { left:7vw; bottom:12vh; max-width:800px; }
.eyebrow { font-size:11px; letter-spacing:.22em; font-weight:600; color:#c0c4c8; margin:0 0 18px; }
.hero-intro h1 { font-family:"Space Grotesk",sans-serif; font-size:clamp(56px,8.4vw,150px); line-height:.83; letter-spacing:-.06em; margin:0; font-weight:600; }
em { font-style:normal; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.85); }
.hero-copy { max-width:520px; margin:28px 0 0; color:#b5b8bd; line-height:1.6; font-size:16px; }
.scroll-cue { margin-top:36px; display:flex; align-items:center; gap:13px; color:#9da0a5; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.scroll-cue span { position:relative; width:40px; height:1px; background:#666; overflow:hidden; }
.scroll-cue span::after { content:""; position:absolute; width:14px; height:1px; background:#fff; animation:cue 1.8s infinite; }
@keyframes cue { from{left:-14px} to{left:42px} }

.scene-copy { opacity:0; transform:translateY(24px); filter:blur(5px); max-width:520px; pointer-events:none; }
.scene-copy.visible { opacity:1; transform:translateY(0); filter:blur(0); pointer-events:auto; }
.scene-copy h2 { font-family:"Space Grotesk",sans-serif; font-size:clamp(44px,5.2vw,88px); letter-spacing:-.055em; line-height:.92; margin:0 0 22px; font-weight:600; }
.scene-copy > p:last-child { color:#b3b6ba; max-width:430px; line-height:1.65; }
.scene-index { display:block; margin-bottom:30px; color:#777b80; font-size:12px; font-family:"Space Grotesk"; }
.scene-01 { left:7vw; top:26vh; }
.scene-02 { right:7vw; top:22vh; text-align:right; }
.scene-02 > p:last-child { margin-left:auto; }
.scene-03 { left:7vw; bottom:17vh; }
.scene-04 { right:7vw; top:24vh; text-align:right; }
.scene-04 > p:last-child { margin-left:auto; }
.scene-final { left:7vw; top:26vh; max-width:760px; }
.scene-final h2 { font-size:clamp(52px,6.5vw,112px); }
.scene-actions { display:flex; gap:12px; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.button-primary { background:#fff; color:#050505; }
.button-ghost { border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px); }
.button:hover { transform:translateY(-2px); }

.stage-meta { position:absolute; z-index:6; left:4vw; right:4vw; bottom:24px; display:flex; justify-content:space-between; color:#70747a; font-size:9px; letter-spacing:.18em; }

.section { position:relative; padding:130px 7vw; }
.section-label { font-size:10px; letter-spacing:.22em; color:#777c82; margin-bottom:54px; }
.manifesto { background:#f0f1f2; color:#111214; }
.manifesto-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:8vw; align-items:start; }
.manifesto h2, .collection h2, .feature-content h2, .cta-section h2 { font-family:"Space Grotesk"; font-size:clamp(44px,5.6vw,92px); line-height:.96; letter-spacing:-.055em; margin:0; }
.manifesto-grid p { color:#555a60; line-height:1.8; max-width:620px; }
.manifesto-grid .lead { color:#16181b; font-size:clamp(21px,2.1vw,32px); line-height:1.35; margin-top:0; }
.spec-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:100px; background:#c9cbce; border:1px solid #c9cbce; }
.spec-strip article { background:#f0f1f2; padding:34px; min-height:220px; }
.spec-strip span { color:#8b8f94; font-size:11px; }.spec-strip strong{display:block;font-family:"Space Grotesk";font-size:22px;margin:50px 0 10px}.spec-strip p{font-size:13px;line-height:1.6;color:#64686d;margin:0}

.feature-stage { min-height:100vh; display:grid; grid-template-columns:1.15fr .85fr; gap:7vw; align-items:center; overflow:hidden; }
.feature-visual { position:relative; min-height:680px; display:grid; place-items:center; background:radial-gradient(circle,#1a1c20 0,#08090a 58%,#050505 72%); border:1px solid var(--line); }
.feature-ring { width:74%; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.18); box-shadow:0 0 90px rgba(255,255,255,.04), inset 0 0 90px rgba(255,255,255,.03); }
.feature-car { position:absolute; width:74%; height:28%; background:linear-gradient(180deg,#54585f,#101114 54%,#020202); clip-path:polygon(3% 68%,14% 39%,42% 18%,71% 26%,91% 51%,98% 70%,94% 82%,4% 82%); filter:drop-shadow(0 38px 26px #000); }
.feature-car::before{content:"";position:absolute;left:34%;top:16%;width:39%;height:35%;background:#0b0d10;clip-path:polygon(7% 16%,73% 0,100% 93%,0 90%);border-top:1px solid rgba(255,255,255,.25)}
.feature-wheel{position:absolute;width:17%;aspect-ratio:1;border-radius:50%;bottom:-6%;background:radial-gradient(circle,#222 0 24%,#050505 25% 55%,#2b2d31 57% 63%,#030303 65%)}.fw-1{left:18%}.fw-2{right:12%}
.measure { position:absolute; color:#8d9298; font-size:10px; letter-spacing:.2em; }
.measure::before { content:""; display:inline-block; width:52px; height:1px; background:#555; margin-right:10px; vertical-align:middle; }
.measure-a{left:5%;top:17%}.measure-b{right:5%;top:31%}.measure-c{left:9%;bottom:12%}
.feature-content > p:not(.eyebrow) { color:#9a9ea4; line-height:1.75; max-width:560px; }
.feature-content h2 { font-size:clamp(44px,4.6vw,78px); margin-bottom:28px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:60px; }
.metrics strong { font-family:"Space Grotesk"; font-size:clamp(30px,3.4vw,58px); letter-spacing:-.05em; }
.metrics strong span{font-size:13px;letter-spacing:0;color:#777;margin-left:4px}.metrics p{font-size:11px;color:#777;margin-top:8px;text-transform:uppercase;letter-spacing:.12em}

.collection { background:#0b0c0e; }
.collection-head { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:68px; }
.collection-head > p { color:#8d9197; line-height:1.7; max-width:390px; }
.model-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.model-card { position:relative; min-height:560px; overflow:hidden; padding:28px; border:1px solid var(--line); background:#08090a; transition:transform .35s ease,border-color .35s ease; outline:none; }
.model-card:hover,.model-card:focus{transform:translateY(-8px);border-color:rgba(255,255,255,.4)}
.model-glow { position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.11); filter:blur(70px); left:50%; top:34%; transform:translate(-50%,-50%); opacity:.55; }
.model-tag { font-size:9px; letter-spacing:.2em; color:#8b8f95; }
.mini-car { position:absolute; top:30%; left:50%; transform:translate(-50%,-50%); width:88%; height:150px; background:linear-gradient(180deg,#5c6066,#0b0c0d 58%,#020202); filter:drop-shadow(0 34px 24px #000); }
.mini-car.coupe{clip-path:polygon(2% 67%,14% 43%,39% 24%,69% 28%,91% 49%,98% 68%,95% 79%,4% 80%)}
.mini-car.gt{clip-path:polygon(2% 67%,14% 40%,38% 19%,72% 27%,92% 50%,98% 68%,95% 79%,4% 80%)}
.mini-car.suv{height:180px;clip-path:polygon(2% 66%,11% 35%,30% 18%,74% 18%,91% 39%,98% 67%,95% 80%,4% 80%)}
.mini-car i { position:absolute; width:18%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#222 0 23%,#050505 25% 55%,#25272a 57% 64%,#020202 65%); bottom:-7%; }.mini-car i:first-child{left:17%}.mini-car i:last-child{right:12%}
.model-card h3 { position:absolute; left:28px; bottom:105px; margin:0; font-family:"Space Grotesk"; font-size:40px; letter-spacing:-.04em; }
.model-card p { position:absolute; left:28px; bottom:59px; color:#888d93; font-size:13px; }
.model-link { position:absolute; left:28px; bottom:25px; color:#d5d7da; font-size:11px; text-transform:uppercase; letter-spacing:.13em; }.model-link b{margin-left:8px}

.cta-section { min-height:82vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; overflow:hidden; }
.cta-section h2 { font-size:clamp(48px,6.6vw,112px); position:relative; z-index:1; }
.cta-section > p:not(.eyebrow,.form-status){color:#858a90;max-width:560px;line-height:1.7;position:relative;z-index:1}
.cta-orbit{position:absolute;width:65vw;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 150px rgba(255,255,255,.04);}
.interest-form{position:relative;z-index:1;display:flex;width:min(560px,90vw);margin-top:34px;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px;background:rgba(255,255,255,.035);backdrop-filter:blur(10px)}
.interest-form input{flex:1;background:transparent;border:0;color:white;padding:0 20px;outline:none}.interest-form button{border:0;border-radius:999px;background:#fff;color:#050505;padding:15px 22px;font-size:12px;font-weight:600;cursor:pointer}.form-status{min-height:22px;color:#b7bbc0;font-size:12px}

.site-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-top:1px solid var(--line); padding:34px 4vw; color:#73777c; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.site-footer p:last-child{text-align:right}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width: 900px) {
  :root{--header-h:70px}
  .site-header{grid-template-columns:1fr auto;padding:0 20px}.desktop-nav{display:none}.header-cta{font-size:10px;padding:10px 13px}
  .scroll-experience{height:540vh}.hero-intro{left:22px;right:22px;bottom:13vh}.hero-intro h1{font-size:clamp(50px,16vw,86px)}.hero-copy{font-size:14px;max-width:85%}
  .scene-copy,.scene-01,.scene-02,.scene-03,.scene-04,.scene-final{left:22px;right:22px;top:auto;bottom:15vh;text-align:left;max-width:none}.scene-copy > p:last-child,.scene-02 > p:last-child,.scene-04 > p:last-child{margin-left:0;max-width:85%}.scene-copy h2{font-size:clamp(42px,12vw,68px)}
  .scene-final{bottom:14vh}.scene-actions{flex-wrap:wrap}.stage-meta{left:20px;right:20px}.stage-meta span:nth-child(2){display:none}
  .section{padding:90px 22px}.manifesto-grid,.feature-stage{grid-template-columns:1fr}.manifesto-grid{gap:50px}.spec-strip{grid-template-columns:1fr;margin-top:70px}.spec-strip article{min-height:auto}.spec-strip strong{margin-top:22px}
  .feature-visual{min-height:500px}.feature-content{padding-top:20px}.metrics{grid-template-columns:1fr 1fr}.metrics>div:last-child{grid-column:1/-1}
  .collection-head{display:block}.collection-head>p{margin-top:30px}.model-grid{grid-template-columns:1fr}.model-card{min-height:500px}
  .site-footer{grid-template-columns:1fr;gap:18px;text-align:left}.site-footer p:last-child{text-align:left}
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
