/* Volta — concept site by Nexora.
   Night-time Kuala Lumpur and the bike's own three paints: a dark road for the hero, features and finance,
   a stone ground for the bikes, range and test ride, and one band of Volt lime. Behind the bike the city's
   traffic streams past as light trails, white one way and red the other. Schibsted Grotesk throughout.
   Motion is transform and opacity only; the 360° bike is pre-rendered frames. */

:root {
  --night: #0e1110;
  --graphite: #1a1e1c;
  --graphite-2: #232826;
  --graphite-3: #2f3532;
  --stone: #e9e7e1;
  --stone-2: #dcd9d1;
  --stone-3: #cbc7bd;
  --ink: #121514;
  --ink-soft: #4a504c;
  --on-dark: #eceae4;
  --on-dark-soft: #a6aba5;
  --lime: #d4ef3f;
  --lime-2: #e3fb5a;
  --line-d: rgba(236, 234, 228, .1);
  --line-l: rgba(18, 21, 20, .12);
  --r-lg: 28px;
  --r-md: 20px;
  --m: clamp(16px, 3vw, 48px);
  --maxw: 1440px;
  --gap: clamp(96px, 10vw, 168px);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 84px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--night); color: var(--on-dark);
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ul, figure, fieldset { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.04em; line-height: .98; text-wrap: balance; }
h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
p { text-wrap: pretty; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.bikes :focus-visible, .commute :focus-visible, .ride :focus-visible, .app :focus-visible { outline-color: var(--ink); }

.frame { width: min(100% - 2 * var(--m), var(--maxw)); margin-inline: auto; }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--lime); color: var(--ink); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border-radius: 999px; border: 0; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .16s var(--ease), background-color .2s ease, box-shadow .3s ease, color .2s ease; }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 44px; padding: 0 22px; font-size: .9688rem; }
.btn-block { width: 100%; }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--stone); }
.btn-ghost { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(236, 234, 228, .3); }
@media (hover: hover) and (pointer: fine) {
  .btn-lime:hover { background: var(--lime-2); box-shadow: 0 10px 40px -10px rgba(212, 239, 63, .55); }
  .btn-ink:hover { background: #2a302d; }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--lime); color: var(--lime); }
}

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .35s ease, box-shadow .35s ease; }
/* solid rather than frosted: a blur behind the bar would be recomputed on every frame the trails and the bike move */
.nav.is-solid { background: rgba(14, 17, 16, .96); box-shadow: 0 1px 0 var(--line-d); }
.nav-in { width: min(100% - 2 * var(--m), var(--maxw)); height: 76px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--on-dark); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.045em; }
.logo svg { width: 32px; height: 29px; color: var(--lime); }
.nav-links { display: flex; gap: clamp(20px, 2.6vw, 40px); font-size: .9688rem; font-weight: 500; color: var(--on-dark); }
.nav-links a { position: relative; padding: 10px 0; text-decoration: none; opacity: .8; transition: opacity .2s ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; border-radius: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-links a.is-active { opacity: 1; }
.nav-links a.is-active::after { transform: scaleX(1); }
@media (hover: hover) { .nav-links a:hover { opacity: 1; } }
@media (max-width: 900px) { .nav-links { display: none; } .nav-in { height: 66px; } }

/* ---------- hero: the bike, with the city streaming past ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: 104px; overflow: clip; background: var(--night); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-glow { position: absolute; left: 66%; top: 50%; width: 78vw; aspect-ratio: 1.6; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 239, 63, .16), rgba(212, 239, 63, .05) 55%, transparent); animation: glow 6s ease-in-out infinite alternate; will-change: opacity; }
@keyframes glow { from { opacity: .6; } to { opacity: 1; } }
.trails { position: absolute; inset: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent 0 26%, rgba(0, 0, 0, .4) 40%, #000 60%); mask: linear-gradient(90deg, transparent 0 26%, rgba(0, 0, 0, .4) 40%, #000 60%); }
.trail { position: absolute; left: 0; height: var(--h, 2px); width: var(--w, 30vw); border-radius: 4px; opacity: 0; will-change: transform, opacity; }
.trail.t-white { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 70%, #fff); }
.trail.t-lime { background: linear-gradient(90deg, rgba(212, 239, 63, 0), rgba(212, 239, 63, .55) 70%, #ecff7a); }
.trail.t-red { background: linear-gradient(270deg, rgba(255, 60, 50, 0), rgba(255, 70, 60, .5) 70%, #ff8a7a); }
.hero-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to bottom, rgba(14, 17, 16, 0), rgba(10, 12, 11, .9)); }

.hero-grid { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 0; }
.hero-copy { position: relative; z-index: 2; padding: 24px 0; }
.hero-title { font-size: clamp(3.25rem, 1rem + 5.4vw, 6.75rem); line-height: .9; letter-spacing: -0.055em; max-width: 8.5ch; }
.hero-sub { margin-top: 28px; max-width: 36ch; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.45; color: var(--on-dark-soft); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-price { margin-top: 20px; font-size: .9375rem; color: var(--on-dark-soft); }
.hero-visual { position: relative; margin-left: -6vw; }
.hero-stage { position: relative; width: 100%; aspect-ratio: 1360 / 945; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.hero-stage.is-dragging { cursor: grabbing; }
.hero-stage:focus-visible { outline-offset: -14px; }
.tt-canvas, .tt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.hero-hint { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: -8px; font-size: .9063rem; color: var(--on-dark-soft); }
.hero-hint svg { width: 22px; height: 22px; }
.hero-stats { position: relative; z-index: 1; padding: 28px 0 32px; box-shadow: 0 -1px 0 var(--line-d); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stats div { display: flex; flex-direction: column-reverse; }
.stats dd { font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.875rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.stats dt { margin-top: 8px; font-size: .9063rem; color: var(--on-dark-soft); }
.stats-note { margin-top: 18px; font-size: .8125rem; color: var(--on-dark-soft); }
.js:not(.no-anim) .hero-stage { opacity: 0; scale: 1.06; animation: settle 1.3s var(--ease) .2s forwards; }
@keyframes settle { to { opacity: 1; scale: 1; } }
.hero.is-off .hero-glow { animation-play-state: paused; }

@media (max-width: 900px) {
  .hero { padding-top: 92px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(3rem, 14vw, 5.5rem); max-width: 9ch; }
  .hero-sub { margin-top: 20px; }
  .hero-cta { margin-top: 28px; }
  .hero-visual { margin: 16px -4vw 0; }
  .hero-glow { left: 50%; top: 66%; width: 140vw; }
  .trails { -webkit-mask: none; mask: none; top: 40%; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 22px; }
}
@media (max-width: 420px) { .hero-cta .btn { flex: 1 1 100%; } }

/* ---------- shared section heads ---------- */
.sec-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.sec-head h2, .app h2, .planner h2, .finance-copy h2, .faq-head h2 { font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.75rem); line-height: .95; letter-spacing: -0.05em; }
.sec-head p { max-width: 42ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }

/* ---------- bikes: the configurator ---------- */
.bikes { padding-block: var(--gap); background: var(--stone); color: var(--ink); }
.bikes .sec-head p { color: var(--ink-soft); }
.model-tabs { position: relative; display: flex; gap: clamp(24px, 5vw, 72px); margin-top: 56px; box-shadow: inset 0 -1px 0 var(--line-l); overflow-x: auto; scrollbar-width: none; }
.model-tabs::-webkit-scrollbar { display: none; }
.mtab { position: relative; z-index: 1; padding: 0 0 18px; text-align: left; white-space: nowrap; }
.mtab b { display: block; font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: rgba(18, 21, 20, .3); transition: color .3s ease; }
.mtab span { display: block; margin-top: 8px; font-size: .9375rem; color: var(--ink-soft); }
.mtab.is-on b { color: var(--ink); }
@media (hover: hover) { .mtab:not(.is-on):hover b { color: rgba(18, 21, 20, .55); } }
.model-tabs .pill { position: absolute; left: 0; top: auto !important; bottom: 0; height: 3px !important; border-radius: 3px; background: var(--ink); pointer-events: none; }
.model-tabs .pill.ready { transition: transform .5s var(--ease), width .5s var(--ease); }
.model-tabs:not(.has-pill) .mtab.is-on { box-shadow: inset 0 -3px 0 var(--ink); }

.config-stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8.2; max-height: 74svh; margin-top: 28px; overflow: hidden; border-radius: var(--r-lg); background: var(--night); transition: background-color .6s ease; }
.config-stage::after { content: ""; position: absolute; left: 50%; bottom: 6%; width: 70%; height: 22%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 239, 63, .16), transparent); pointer-events: none; }
.config-stage[data-paint="graphite"] { background: var(--stone-2); }
.config-stage[data-paint="graphite"]::after { background: radial-gradient(closest-side, rgba(18, 21, 20, .14), transparent); }
.ghost { position: absolute; left: 50%; top: 46%; translate: -50% -50%; font-size: clamp(5rem, 1rem + 15vw, 16rem); font-weight: 800; letter-spacing: -0.065em; line-height: 1; white-space: nowrap; color: rgba(236, 234, 228, .055); pointer-events: none; transition: color .6s ease, opacity .3s ease; }
.config-stage[data-paint="graphite"] .ghost { color: rgba(18, 21, 20, .06); }
.ghost.is-out { opacity: 0; }
.config-img { position: relative; z-index: 1; width: min(80%, 1080px); height: auto; transition: opacity .25s ease, transform .55s var(--ease); }
.config-img.is-out { opacity: 0; transform: translateX(-24px); }
.config-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 56px; margin-top: 36px; align-items: start; }
.cp-name h3 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.045em; }
.cp-name p { margin-top: 10px; max-width: 34ch; color: var(--ink-soft); }
.m-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.m-specs div { padding-left: 16px; box-shadow: inset 1.5px 0 0 var(--line-l); }
.m-specs dt { font-size: .875rem; color: var(--ink-soft); }
.m-specs dd { margin-top: 6px; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.paints-label { font-size: .9375rem; color: var(--ink-soft); }
.paints-label b { color: var(--ink); font-weight: 700; }
.paint-row { display: flex; gap: 10px; margin-top: 12px; }
.paint { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; transition: box-shadow .25s var(--ease); }
.paint i { width: 34px; height: 34px; border-radius: 50%; transition: transform .2s var(--ease); }
.paint.is-on { box-shadow: inset 0 0 0 2px var(--ink); }
.paint:active i { transform: scale(.88); }
.p-lime { background: var(--lime); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.p-graphite { background: #2b302d; }
.p-bone { background: #f3eee2; box-shadow: inset 0 0 0 1px var(--stone-3); }
.m-buy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 20px 20px 28px; border-radius: var(--r-md); background: var(--stone-2); }
.m-buy strong { display: block; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.m-buy span { display: block; margin-top: 6px; font-size: .9375rem; color: var(--ink-soft); }
@media (max-width: 960px) {
  .config-panel { grid-template-columns: 1fr; gap: 28px; }
  .m-specs { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .config-stage { aspect-ratio: 4 / 3; }
  .config-img { width: 92%; }
}
@media (max-width: 480px) { .m-buy { padding: 20px; } .m-buy .btn { width: 100%; } }

/* ---------- film ---------- */
.film { position: relative; display: flex; align-items: flex-end; height: min(92svh, 920px); min-height: 520px; overflow: hidden; background: var(--graphite); color: #fff; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 10, 9, .82), rgba(8, 10, 9, .1) 60%); }
.film-copy { position: relative; z-index: 1; padding-bottom: clamp(44px, 8svh, 96px); }
.film-copy h2 { font-size: clamp(3.5rem, 1rem + 8vw, 9rem); line-height: .88; letter-spacing: -0.06em; }
.film-copy p { margin-top: 24px; max-width: 40ch; font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); line-height: 1.4; }

/* ---------- moving light in the dark sections ---------- */
.parts, .finance, .faq { position: relative; overflow: clip; }
.sec-glow { position: absolute; z-index: 0; width: 64vmax; aspect-ratio: 1; border-radius: 50%; pointer-events: none; will-change: transform; }
.g1 { left: -24vmax; top: -10vmax; background: radial-gradient(closest-side, rgba(212, 239, 63, .1), transparent 70%); animation: drift 34s ease-in-out infinite alternate; }
.g2 { right: -26vmax; top: 40%; background: radial-gradient(closest-side, rgba(255, 255, 255, .06), transparent 70%); animation: drift 42s ease-in-out -12s infinite alternate-reverse; }
.g3 { right: -20vmax; top: -20vmax; background: radial-gradient(closest-side, rgba(212, 239, 63, .12), transparent 70%); animation: drift 38s ease-in-out infinite alternate; }
.g4 { left: -28vmax; bottom: -30vmax; background: radial-gradient(closest-side, rgba(212, 239, 63, .08), transparent 70%); animation: drift 46s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vw, 10vh, 0) scale(1.15); } }
.parts > .frame, .finance > .frame, .faq > .frame { position: relative; z-index: 1; }
.is-off .sec-glow { animation-play-state: paused; }

/* ---------- features ---------- */
.parts { padding-block: var(--gap); background: var(--night); }
.parts .sec-head p, .feat p:not(.feat-stat) { color: var(--on-dark-soft); }
.feat-stat { font-size: clamp(3.25rem, 1.8rem + 4vw, 6rem); font-weight: 800; letter-spacing: -0.06em; line-height: .9; color: var(--lime); }
.feat-stat small { font-size: .32em; font-weight: 700; letter-spacing: -0.02em; color: var(--on-dark); }
.feat h3 { margin-top: 18px; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); }
.feat h3 + p { margin-top: 12px; max-width: 42ch; font-size: 1.0625rem; line-height: 1.55; }
.feat-img { overflow: hidden; border-radius: var(--r-lg); background: var(--graphite); }
.feat-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
@media (hover: hover) and (pointer: fine) { .feat:hover .feat-img img { scale: 1.035; } }
.feat-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; margin-top: clamp(56px, 6vw, 96px); }
.feat-split .feat-img { aspect-ratio: 6 / 5; }
.feat-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.feat-flip .feat-img { order: 2; }
.feat-battery { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px clamp(32px, 4vw, 72px); align-items: center; margin-top: 24px; padding: clamp(32px, 5vw, 72px); overflow: hidden; border-radius: var(--r-lg); background: var(--graphite); }
.feat-pack { position: relative; display: grid; place-items: center; min-height: 240px; }
.feat-pack::before { content: ""; position: absolute; width: 80%; height: 60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 239, 63, .22), transparent); }
.feat-pack img { position: relative; width: min(100%, 640px); height: auto; rotate: -7deg; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); animation: hover 6s ease-in-out infinite alternate; }
@keyframes hover { to { transform: translateY(-12px); } }
.feat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.feat-card { padding: 16px 16px 36px; border-radius: var(--r-lg); background: var(--graphite); }
.feat-card .feat-img { aspect-ratio: 4 / 3; border-radius: var(--r-md); margin-bottom: 28px; }
.feat-card > :not(.feat-img) { margin-inline: 16px; }
.feat-card .feat-stat { font-size: clamp(2.75rem, 1.8rem + 2.6vw, 4.5rem); }
@media (max-width: 860px) {
  .feat-split, .feat-flip, .feat-battery { grid-template-columns: 1fr; }
  .feat-flip .feat-img { order: 0; }
  .feat-pair { grid-template-columns: 1fr; }
  .feat-pack { min-height: 180px; }
}

/* ---------- app: one band of Volt lime ---------- */
.app { padding-block: clamp(88px, 9vw, 150px); overflow: clip; background: var(--lime); color: var(--ink); }
.app-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.app-copy > p { margin-top: 24px; max-width: 40ch; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
.ticks { display: grid; gap: 14px; margin-top: 32px; }
.ticks li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.ticks svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--ink); color: var(--lime); }
.app-phone { display: grid; place-items: center; }
.phone { width: min(320px, 82vw); padding: 20px 16px; border-radius: 44px; background: #0c0e0d; color: var(--on-dark); font-size: .875rem; line-height: 1.3; box-shadow: 0 0 0 8px #161a18, 0 28px 44px -18px rgba(20, 30, 0, .5); rotate: -5deg; animation: float 7s ease-in-out infinite alternate; }
@keyframes float { to { transform: translateY(-14px); } }
.ph-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 4px 0; }
.ph-top b { font-weight: 700; }
.ph-lock { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 700; font-size: .8125rem; }
.ph-lock svg { width: 12px; height: 12px; }
.ph-batt { margin-top: 14px; padding: 14px; border-radius: 18px; background: #1b201d; }
.ph-batt strong { display: block; font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--lime); }
.ph-batt small { font-size: 1rem; }
.ph-batt span { display: block; margin-top: 6px; color: var(--on-dark-soft); }
.ph-batt i { display: block; height: 6px; margin-top: 12px; overflow: hidden; border-radius: 3px; background: #343a37; }
.ph-batt em { display: block; height: 100%; border-radius: 3px; background: var(--lime); }
.ph-map { margin-top: 8px; padding: 10px; border-radius: 18px; background: #151a17; }
.ph-map svg { width: 100%; height: auto; }
.ph-row { margin-top: 8px; padding: 10px 14px; border-radius: 16px; background: #1b201d; }
.ph-row span, .ph-row small { display: block; font-size: .8125rem; color: var(--on-dark-soft); }
.ph-row b { display: block; font-weight: 600; }
.ph-toggle { position: relative; }
.ph-switch { position: absolute; right: 14px; top: 50%; width: 36px; height: 22px; margin-top: -11px; border-radius: 11px; background: var(--lime); }
.ph-switch::after { content: ""; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
@media (max-width: 860px) { .app-grid { grid-template-columns: 1fr; } .app-phone { margin-top: 16px; } }

/* ---------- range planner ---------- */
.commute { padding-block: var(--gap); background: var(--stone); color: var(--ink); }
.commute-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
.planner-intro { margin-top: 24px; max-width: 42ch; color: var(--ink-soft); }
.seg { margin-top: 26px; }
.seg legend { margin-bottom: 10px; font-size: .9375rem; font-weight: 600; }
.seg label { position: relative; display: inline-block; margin: 0 6px 6px 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--stone-2); font-weight: 600; transition: background-color .2s ease, color .2s ease, transform .16s var(--ease); }
.seg label:active span { transform: scale(.96); }
.seg input:checked + span { background: var(--ink); color: var(--stone); }
.seg input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .seg input:not(:checked) + span:hover { background: var(--stone-3); } }
.readout { margin-top: 40px; }
.readout p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.readout strong { font-size: clamp(4rem, 2.6rem + 4.4vw, 7.5rem); font-weight: 800; letter-spacing: -0.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.readout strong b { display: inline-block; font-weight: 800; }
.readout span { font-size: 1.125rem; color: var(--ink-soft); }
.range-bar { height: 12px; margin-top: 22px; overflow: hidden; border-radius: 6px; background: var(--stone-2); }
.range-bar i { display: block; width: 100%; height: 100%; border-radius: 6px; background: var(--ink); transform: scaleX(.47); transform-origin: left; transition: transform .8s var(--ease); }
.routes { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--night); color: var(--on-dark); }
.routes h3 { font-size: 1.375rem; }
.route-list { margin-top: 16px; }
.route { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 0; box-shadow: 0 1px 0 var(--line-d); }
.route:last-child { box-shadow: none; }
.route img { width: 64px; height: 64px; object-fit: cover; border-radius: 16px; }
.route b { display: block; font-weight: 600; }
.route div span { display: block; margin-top: 2px; font-size: .875rem; color: var(--on-dark-soft); }
.route em { display: flex; align-items: baseline; gap: 6px; font-style: normal; }
.route em span { font-size: .875rem; color: var(--on-dark-soft); }
.trips { display: inline-block; min-width: 1.2ch; font-style: normal; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--lime); text-align: right; font-variant-numeric: tabular-nums; }
.trips.bump, .readout b.bump { animation: bump .45s var(--ease); }
@keyframes bump { 0% { transform: translateY(-8px); opacity: .2; } 100% { transform: none; opacity: 1; } }
.routes-note { margin-top: 16px; font-size: .8438rem; color: var(--on-dark-soft); }
@media (max-width: 960px) { .commute-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .route { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; } .route img { width: 52px; height: 52px; } }

/* ---------- finance ---------- */
.finance { padding-block: var(--gap); background: var(--night); }
.finance-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 112px); align-items: center; }
.finance-copy > p { margin-top: 24px; max-width: 42ch; color: var(--on-dark-soft); }
.finance .ticks svg { background: var(--lime); color: var(--ink); }
.calc { padding: clamp(28px, 3.4vw, 48px); border-radius: var(--r-lg); background: var(--graphite); box-shadow: inset 0 0 0 1px var(--line-d); }
.calc .seg:first-child { margin-top: 0; }
.calc .seg legend { color: var(--on-dark-soft); font-weight: 500; }
.calc .seg span { background: var(--graphite-3); }
.calc .seg input:checked + span { background: var(--lime); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .calc .seg input:not(:checked) + span:hover { background: #3a413d; } }
.calc-out { margin: 30px 0 28px; padding-top: 26px; box-shadow: 0 -1px 0 var(--line-d); }
.calc-big { display: flex; align-items: baseline; gap: 12px; }
.calc-big strong { font-size: clamp(3rem, 2rem + 3vw, 5rem); font-weight: 800; letter-spacing: -0.055em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-big span { font-size: 1.125rem; color: var(--on-dark-soft); }
.calc-sub { margin-top: 12px; max-width: 44ch; font-size: .9375rem; color: var(--on-dark-soft); }
@media (max-width: 960px) { .finance-grid { grid-template-columns: 1fr; } }

/* ---------- test ride ---------- */
.ride { padding-block: var(--gap); background: var(--stone); color: var(--ink); }
.ride .sec-head p { color: var(--ink-soft); }
.showrooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.room img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.room figcaption { margin-top: 18px; }
.room h3 { font-size: 1.5rem; margin-bottom: 6px; }
.room p { font-size: 1rem; color: var(--ink-soft); }
.book { margin-top: 32px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--night); color: var(--on-dark); }
.book-h { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.625rem); }
.book-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin-top: 24px; }
.field span { display: block; margin-bottom: 8px; font-size: .9375rem; color: var(--on-dark-soft); }
.field input, .field select { width: 100%; height: 56px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--graphite-2); color: var(--on-dark); font-size: 16px; appearance: none; -webkit-appearance: none; }
.field select { padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23eceae4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 22px center; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #ff7a6a; }
.form-note { margin-top: 18px; padding: 14px 20px; border-radius: 14px; background: var(--graphite-2); font-size: .9688rem; }
@media (max-width: 1080px) { .book-fields { grid-template-columns: 1fr 1fr; } .book-fields .btn { grid-column: 1 / -1; } }
@media (max-width: 860px) { .showrooms { grid-template-columns: 1fr 1fr; } .room:first-child { grid-column: 1 / -1; } .room:first-child img { aspect-ratio: 16 / 9; } }
@media (max-width: 520px) { .showrooms, .book-fields { grid-template-columns: 1fr; } }

/* ---------- questions ---------- */
.faq { padding-block: var(--gap); background: var(--night); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
.faq-head > p { margin-top: 24px; max-width: 38ch; color: var(--on-dark-soft); }
.faq-head a { color: var(--on-dark); text-underline-offset: 4px; }
.ask { display: flex; align-items: center; gap: 18px; margin-top: 36px; padding: 14px 22px 14px 14px; border-radius: var(--r-md); background: var(--graphite); }
.ask img { flex: none; width: 76px; height: 76px; object-fit: cover; border-radius: 14px; }
.ask b { display: block; font-weight: 700; }
.ask span { display: block; margin-top: 4px; font-size: .9375rem; color: var(--on-dark-soft); }
.q { box-shadow: 0 1px 0 var(--line-d); }
.q summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; list-style: none; cursor: pointer; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 600; letter-spacing: -0.015em; }
.q summary::-webkit-details-marker { display: none; }
.q summary svg { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--graphite-2); color: var(--lime); transition: transform .35s var(--ease), background-color .2s ease; }
.q[open] summary svg { transform: rotate(45deg); background: var(--lime); color: var(--ink); }
.q p { padding: 0 64px 26px 0; max-width: 62ch; color: var(--on-dark-soft); }
.q[open] p { animation: open .45s var(--ease) both; }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 960px) { .faq-grid { grid-template-columns: 1fr; } .q p { padding-right: 0; } }

/* ---------- footer: the name across the last photograph ---------- */
.foot-photo { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; overflow: hidden; color: var(--on-dark); background: var(--night); }
.foot-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.48) saturate(.9); }
.foot-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14, 17, 16, .9), rgba(14, 17, 16, 0) 40%, rgba(14, 17, 16, .55)); }
.foot-top { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; padding-top: clamp(64px, 8vw, 120px); }
.foot-big { max-width: 12ch; margin-bottom: 28px; font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: .95; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 5vw, 80px); }
.foot-cols nav, .foot-cols div { display: flex; flex-direction: column; gap: 2px; }
.foot-cols h3 { margin-bottom: 10px; font-size: .9375rem; font-weight: 700; letter-spacing: 0; color: var(--on-dark-soft); }
.foot-cols a, .foot-cols span { padding: 5px 0; text-decoration: none; }
@media (hover: hover) { .foot-cols a:hover { color: var(--lime); } }
.clock { font-weight: 700; color: var(--lime); font-variant-numeric: tabular-nums; }
.foot-mark { position: relative; padding: 48px 0 36px; }
.foot-word { display: block; font-size: min(26vw, 44svh); font-weight: 800; letter-spacing: -0.07em; line-height: .76; text-decoration: none; transform: translateX(-0.04em); }
.foot-mark p { margin-top: 28px; max-width: 70ch; font-size: .875rem; color: var(--on-dark-soft); }
.credits { padding: 22px max(0px, calc(100% - 120ch)) 36px 0; font-size: .8125rem; line-height: 1.6; color: var(--on-dark-soft); }
@media (max-width: 760px) { .foot-photo { min-height: 92svh; } .foot-word { font-size: 32vw; } }

/* ---------- entrances ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.no-anim .reveal, .js.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (max-width: 640px) { .js .reveal { transform: translateY(16px); transition-duration: .65s; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero-stage { animation: none !important; opacity: 1 !important; scale: 1 !important; }
  .hero-glow, .sec-glow, .phone, .feat-pack img { animation: none !important; }
  .trails { display: none; }
  .config-img, .ghost, .model-tabs .pill.ready, .range-bar i { transition: none; }
}
.no-anim .hero-stage { animation: none !important; opacity: 1 !important; scale: 1 !important; }