/* ============================================================
   Hellflash home: "The car is the menu", Studio world (28 Oct 2026)
   A calm light studio, ink type, black pills; the car's paint is the colour.
   The garage sequence is a sticky stage driven by home.js; without
   JS or with reduced motion the same markup lays out as a static page.
   ============================================================ */

@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
}

/* camera variables do not inherit, so scrubbing the camera never restyles its children */
@property --s{syntax:"<number>";inherits:false;initial-value:1}
@property --fx{syntax:"<number>";inherits:false;initial-value:.5}
@property --fy{syntax:"<number>";inherits:false;initial-value:.5}
@property --px{syntax:"<number>";inherits:false;initial-value:.5}
@property --py{syntax:"<number>";inherits:false;initial-value:.5}

:root{
  --bg:#ecebe7;
  --bg-2:#f4f3f0;
  --card:#ffffff;
  --card-2:#f7f6f3;
  --line:rgba(17,17,17,.09);
  --line-2:rgba(17,17,17,.17);
  --ink:#111111;
  --ink-2:#4a4945;
  --ink-3:#62615c;
  --accent:#2453c9;             /* the car's paint: leader lines, dots, gains, the x-ray glow */
  --hot:var(--accent);
  --on-hot:#ffffff;
  --shadow:0 24px 48px -28px rgba(30,28,24,.38),0 2px 6px -2px rgba(30,28,24,.08);
  --disp:"Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --maxw:1200px;
  --gutter:24px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --sec-pad:clamp(88px,11vw,150px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:96px;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--disp);font-weight:400;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#c4c2bb;border-radius:20px;border:3px solid var(--bg)}
html{scrollbar-color:#c4c2bb var(--bg);caret-color:var(--ink);accent-color:var(--ink)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hot{color:inherit}
.wrap{
  max-width:var(--maxw);margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:8px}
.skip{
  position:fixed;left:16px;top:-60px;z-index:90;padding:10px 16px;border-radius:999px;
  background:var(--ink);color:#fff;font-weight:700;transition:transform .2s var(--ease-out);
}
.skip:focus{transform:translateY(76px)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1;
  padding:14px 20px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,box-shadow 240ms ease;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 12px 24px -16px rgba(17,17,17,.7)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(17,17,17,.24)}
.btn-sm{font-size:14px;padding:10px 16px}
.btn-lg{font-size:16px;padding:16px 24px}
.btn-primary.btn-lg,.btn-primary.btn-sm{padding-right:10px}
.btn-ic{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;
  background:rgba(255,255,255,.16);transition:transform 220ms var(--ease-out);
}
.btn-sm .btn-ic{width:22px;height:22px}
.btn-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#000;box-shadow:0 16px 30px -16px rgba(17,17,17,.75)}
  .btn-ghost:hover{border-color:var(--ink);background:rgba(17,17,17,.03)}
  .btn:hover .btn-ic{transform:translateX(2px)}
}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:rgba(17,17,17,.3);transition:text-decoration-color 200ms ease;
}
.link-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .link-arrow:hover{text-decoration-color:var(--ink)}
  .link-arrow:hover svg{transform:translateX(3px)}
}

.pill{
  display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;
  font-size:12.5px;font-weight:650;letter-spacing:0;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--ink-2);
}
.pill-hot{background:var(--ink);border-color:transparent;color:#fff}

/* ---------------- nav ---------------- */
.nav{
  position:fixed;z-index:60;left:0;right:0;top:0;
  padding:12px max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  pointer-events:none;
}
.nav-inner{
  pointer-events:auto;max-width:1240px;margin:0 auto;height:60px;padding:0 10px 0 18px;
  display:flex;align-items:center;gap:20px;border-radius:999px;
  background:rgba(236,235,231,0);border:1px solid transparent;
  transition:background-color 300ms ease,border-color 300ms ease,box-shadow 300ms ease;
}
.nav.scrolled .nav-inner{
  background:rgba(247,246,243,.82);border-color:var(--line);box-shadow:0 10px 30px -22px rgba(30,28,24,.45);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand-logo{width:30px;height:30px}
.brand-word{font-weight:800;font-size:18px;letter-spacing:-.02em}
.nav-links{display:flex;gap:4px;margin:0 auto}
.nav-links a{
  font-size:15px;font-weight:550;color:var(--ink-2);padding:9px 14px;border-radius:999px;
  transition:color 200ms ease,background-color 200ms ease;
}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--ink);background:rgba(17,17,17,.05)}}
.nav-cta{display:flex;gap:8px;flex:none}
.burger{display:none;width:44px;height:44px;border-radius:999px;position:relative;flex:none;touch-action:manipulation}
.burger span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--ink);transition:transform 260ms var(--ease-out)}
.burger span:first-child{top:18px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:55;background:var(--bg);
  padding:104px max(24px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity 160ms var(--ease-out),visibility 0s linear 160ms;
}
.mobile-menu.open{opacity:1;visibility:visible;transition:opacity 240ms var(--ease-out),visibility 0s}
.mobile-menu > a{
  font-size:30px;font-weight:800;letter-spacing:-.03em;padding:10px 0;
  opacity:0;transform:translateY(12px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out);
}
.mobile-menu.open > a{opacity:1;transform:none}
.mobile-menu.open > a:nth-child(2){transition-delay:40ms}
.mobile-menu.open > a:nth-child(3){transition-delay:80ms}
.mobile-menu.open > a:nth-child(4){transition-delay:120ms}
.mobile-menu.open > a:nth-child(5){transition-delay:160ms}
.mobile-menu-cta{display:grid;gap:10px;margin-top:auto}
.mobile-menu-cta .btn{width:100%;padding:17px 22px;font-size:16px}

/* ============================================================
   GARAGE: static layout (no JS: hero, then one block per part)
   ============================================================ */
.garage{position:relative}
.garage-stage{position:relative;padding-top:clamp(108px,13vw,150px);display:flex;flex-direction:column}
.rig{position:relative}
.garage-stage > .hero-copy{order:-1}
.hero-copy{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.hero-copy h1{font-size:clamp(2.3rem,4.4vw,4.3rem);letter-spacing:-.04em;line-height:1;max-width:15.5ch}
.hero-sub{margin:20px 0 0;max-width:46ch;color:var(--ink-2);font-size:clamp(16px,1.3vw,18.5px);line-height:1.5}
.hero-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

.cam{position:relative;max-width:1320px;margin:clamp(-120px,-7vw,-36px) auto 0;aspect-ratio:16/9}
.view{position:absolute;inset:0}
.kf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kf > svg,.kf > img{display:block;width:100%;height:100%}
.cam{filter:drop-shadow(0 34px 26px rgba(40,36,30,.16))}
.kf-tease,.kf-open,.kf-xray,.view-rear,.view-swap,.scan,.hotspots,.leaders,.ring,.hud,.shown{display:none}

.part{max-width:var(--maxw);margin:clamp(40px,7vw,96px) auto;padding:0 var(--gutter);display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.part-sound .part-shot{order:2}
.part-shot{width:100%;border-radius:18px;border:1px solid var(--line);background:var(--card);padding:12px}
.part-panel{
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:18px;
  padding:22px 22px 18px;box-shadow:var(--shadow);
}
.part-head h2{font-size:30px;letter-spacing:-.03em;outline:none}
.part-head p{margin-top:6px;color:var(--ink-2);font-size:15px;line-height:1.45}
.tune-list{list-style:none;margin-top:14px}
.tune-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
.tune-name b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.tune-name span{display:block;font-size:13px;color:var(--ink-3);line-height:1.35;margin-top:2px}

/* segmented control: real radio buttons; a lit copy is clipped to the chosen option */
.seg{
  position:relative;display:inline-grid;border-radius:999px;height:34px;padding:2px;
  background:#f1f0ec;border:1px solid var(--line);
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.01em;
  user-select:none;-webkit-user-select:none;
}
.seg-base,.seg-hi{display:grid;grid-template-columns:repeat(var(--n),1fr);align-items:center}
.seg-base button,.seg-hi span{display:flex;align-items:center;justify-content:center;height:100%;padding:0 10px;white-space:nowrap;border-radius:999px}
.seg-base button{font:inherit;color:var(--ink-3);touch-action:manipulation;transition:color 160ms ease}
.seg-base button:focus-visible{outline:none}
.seg:has(:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.seg-hi{
  position:absolute;inset:2px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;pointer-events:none;
  clip-path:inset(0 calc((var(--n) - 1 - var(--i)) / var(--n) * 100%) 0 calc(var(--i) / var(--n) * 100%) round 999px);
}
@media (hover:hover) and (pointer:fine){.seg-base button:hover{color:var(--ink)}}

/* your build: relative meters (grey = stock, paint colour = what you added) */
.build{margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}
.build-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.meters{display:grid;gap:7px;margin-top:10px}
.meter{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:10px;font-size:13px;font-weight:650}
.pips{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.pips b{height:8px;border-radius:2px;background:rgba(17,17,17,.07);transition:background-color 240ms ease;transition-delay:calc(var(--k) * 22ms)}
.pips b.is-stock{background:#b3b0a8}
.pips b.is-gain{background:var(--accent)}
.build-stat{margin-top:8px}
.stat-big{font-family:var(--disp);font-weight:800;font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-big small{font-size:15px;letter-spacing:0;color:var(--ink-2);margin-left:2px}
.stat-sub{margin-top:6px;font-size:12.5px;color:var(--ink-2);line-height:1.4;min-height:2.8em}
.build-cta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:12px}
.build-cta > span{font-size:12.5px;color:var(--ink-3)}
.build-cta .btn{padding:12px 10px 12px 18px}
html:not(.seq) .build-title,html:not(.seq) .meters,html:not(.seq) .build-stat{display:none}
html:not(.seq) .build{border-top:0;padding-top:0}

/* ============================================================
   GARAGE: interactive stage (html.motion, set before first paint)
   ============================================================ */
.motion .garage-stage{
  display:block;height:100vh;height:100svh;min-height:620px;padding:0;overflow:hidden;
  container-type:size;isolation:isolate;
}
.motion .rig{position:absolute;inset:0;transform-origin:50% 80%}

/* camera rig: --fx/--fy is the frame point pinned to stage point --px/--py, at scale --s */
.motion .cam{
  --s:.64;--fx:.493;--fy:.51;--px:.6;--py:.66;
  --w0:min(100cqw,177.78cqh);
  position:absolute;left:0;top:0;margin:0;max-width:none;aspect-ratio:auto;
  width:var(--w0);height:calc(var(--w0) * .5625);
  transform-origin:0 0;
  transform:
    translate(calc(var(--px) * 100cqw - var(--fx) * var(--w0) * var(--s)),
              calc(var(--py) * 100cqh - var(--fy) * var(--w0) * .5625 * var(--s)))
    scale(var(--s));
}
.motion .kf-tease,.motion .kf-open,.motion .kf-xray,.motion .view-rear{display:block}
.motion .kf-tease,.motion .kf-open,.motion .view-rear{opacity:0}
.motion .view{transform-origin:50% 60%;backface-visibility:hidden}
.motion .cam.is-moving{will-change:transform}
.motion .kf-xray{clip-path:inset(0 100% 0 0)}
.motion .scan{display:block;position:absolute;inset:0;opacity:0;pointer-events:none}
.motion .scan i{
  position:absolute;top:20%;bottom:7%;left:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--accent) 18%,var(--accent) 82%,transparent);
}
.motion .scan i::before{
  content:"";position:absolute;top:0;bottom:0;right:2px;width:140px;
  background:linear-gradient(270deg,color-mix(in oklab,var(--accent) 16%,transparent),transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}

/* a little scroll: the bonnet cracks and the car leans in as you move */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .motion .kf-tease{animation:hf-tease linear both;animation-timeline:scroll(root);animation-range:0 38vh}
    .motion .rig{animation:hf-lean linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  }
}
@keyframes hf-tease{to{opacity:.3}}
@keyframes hf-lean{to{transform:translateY(4%) scale(1.05)}}

.motion .hero-copy{position:absolute;left:0;right:0;top:clamp(104px,15svh,150px);z-index:5}
.motion .hero-copy h1{font-size:min(clamp(2.3rem,4.4vw,4.3rem),7.4svh)}

/* callouts: a dot on the part, a hairline leader, a label in clear space */
.motion .hotspots{display:block;position:absolute;inset:0;z-index:5;pointer-events:none}
.hotspot{
  position:absolute;left:0;top:0;pointer-events:auto;
  display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 10px 22px -16px rgba(30,28,24,.55);
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;opacity:0;
  transition:border-color 200ms ease,box-shadow 200ms ease,transform 160ms var(--ease-out);
}
.hotspot:active{transform:scale(.97)}
.hotspot.is-far{color:var(--ink-3);box-shadow:none;transition:color 300ms ease,box-shadow 300ms ease}
.hs-dot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff;opacity:0}
.hs-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--accent);animation:ring-pulse 2.4s var(--ease-out) infinite}
.hotspots.is-hover .hs-dot{transform:scale(1.15)}
@media (hover:hover) and (pointer:fine){
  .hotspot:hover{border-color:var(--ink);box-shadow:0 14px 26px -16px rgba(30,28,24,.6)}
}
@keyframes ring-pulse{from{transform:scale(1);opacity:.6}to{transform:scale(2.1);opacity:0}}
.callouts{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.callouts path{fill:none;stroke:var(--ink);stroke-width:1;stroke-opacity:.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* which car is on the turntable, under the car */
.motion .shown{
  display:flex;flex-direction:column;align-items:center;gap:8px;position:absolute;z-index:5;left:0;right:0;bottom:clamp(14px,2.6svh,28px);padding:0 16px;
}
.car-chips{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.car-chip{position:relative;overflow:hidden;min-width:68px;padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink-2);touch-action:manipulation;transition:color 200ms ease,background-color 200ms ease}
.car-chip[aria-checked="true"]{background:var(--ink);color:#fff}
.car-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.car-chip.is-timing::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:rgba(255,255,255,.6);transform-origin:left;animation:chip-time 6.5s linear forwards}
@keyframes chip-time{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (hover:hover) and (pointer:fine){.car-chip[aria-checked="false"]:hover{color:var(--ink);background:rgba(17,17,17,.05)}}
.shown-line{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-3);text-align:center}
.shown-line a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(17,17,17,.3);margin-left:8px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.shown-line a:hover{text-decoration-color:var(--ink)}}
.motion .view-swap{display:block}
/* the real car: a WebGL canvas over the drawing, only on capable devices */
.car3d{position:absolute;left:0;top:0;z-index:2;opacity:0;pointer-events:none;cursor:grab;-webkit-user-select:none;user-select:none}
.car3d.is-on{pointer-events:auto}
.car3d:active{cursor:grabbing}

/* hud: part tabs + back to the whole car */
.motion .hud{
  display:flex;align-items:center;justify-content:center;gap:8px;position:absolute;z-index:7;top:86px;left:0;right:0;
  padding:0 12px;pointer-events:none;opacity:0;visibility:hidden;
}
.hud-tabs{pointer-events:auto;position:relative;display:inline-grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:0 12px 26px -20px rgba(30,28,24,.5)}
.hud-tab{
  position:relative;z-index:1;min-width:96px;padding:9px 16px;border-radius:999px;
  font-size:14px;font-weight:700;color:var(--ink-2);text-align:center;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;transition:color 200ms ease;
}
.hud-tab[aria-pressed="true"]{color:#fff}
.hud-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:999px;background:var(--ink);transition:transform 260ms var(--ease-in-out)}
.hud[data-part="sound"] .hud-thumb{transform:translateX(100%)}
.hud[data-part="gearbox"] .hud-thumb{transform:translateX(200%)}
.hud-close{pointer-events:auto;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid var(--line);touch-action:manipulation;transition:border-color 200ms ease}
.hud-close svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.hud-close:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){
  .hud-tab[aria-pressed="false"]:hover{color:var(--ink)}
  .hud-close:hover{border-color:var(--ink)}
}

/* rings and leader lines */
.motion .leaders{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.leaders path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.motion .ring{
  display:block;position:absolute;z-index:4;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;border:2px solid var(--accent);background:rgba(255,255,255,.8);opacity:0;visibility:hidden;
}
.motion .ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--accent)}
.motion .ring::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--accent);animation:ring-pulse 1.9s var(--ease-out) infinite}

/* the menus */
.motion .part{
  position:absolute;z-index:6;margin:0;padding:0;display:flex;align-items:center;
  width:min(440px,36vw);top:146px;bottom:20px;pointer-events:none;
}
.motion .part-engine,.motion .part-sound{right:clamp(24px,5vw,88px)}
.motion .part-gearbox{left:clamp(24px,5vw,88px)}
.motion .part-shot{display:none}
.motion .part-panel{
  width:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;pointer-events:auto;
  opacity:0;visibility:hidden;scrollbar-width:thin;
}

/* short laptop screens: tighter menus */
@media (min-width:761px) and (min-aspect-ratio:4/5) and (max-height:800px){
  .motion .hero-copy{top:92px}
  .hero-sub{margin-top:12px}
  .hero-cta{margin-top:20px}
  .motion .cam{--s:.58;--py:.68}
  .motion .part{top:138px;bottom:14px}
  .motion .tune-name span{display:none}
  .motion .tune-row{padding:7px 0}
  .motion .part-panel{padding:16px 18px 14px}
  .motion .part-head h2{font-size:24px}
  .motion .part-head p{font-size:13.5px}
  .motion .stat-sub{min-height:0}
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{position:relative;padding:var(--sec-pad) 0}
.section h2{font-size:clamp(2.1rem,4.3vw,3.6rem);letter-spacing:-.035em}
.lede{margin-top:18px;max-width:60ch;color:var(--ink-2);font-size:clamp(17px,1.4vw,19px);line-height:1.55}

/* reveal: only hidden once home.js is running */
.reveal-ready .reveal:not(.is-in){opacity:0}
@media (prefers-reduced-motion:no-preference){.reveal-ready .reveal:not(.is-in){transform:translateY(18px)}}
.reveal-ready .reveal{transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}

/* trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.trust-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:24px;padding-bottom:24px}
.trust-list li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--ink-2);line-height:1.4}
.trust-list img{flex:none;margin-top:1px}
.trust-list b{display:block;color:var(--ink);font-size:15px;font-weight:700;letter-spacing:-.01em}

/* the feeling */
.feel-grid{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:repeat(2,minmax(260px,1fr));gap:14px;margin-top:40px}
.feel-big{grid-row:1 / span 2;min-height:540px}
/* photo moments stay dark; their type uses local light ink */
.feel-tile,.how,.cta{--ink:#f5f3ef;--ink-2:#d3cfc8;--ink-3:#bdb8b0;--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.2);color:var(--ink)}
.feel-tile{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#0b0b0e;isolation:isolate}
.how,.cta{background:#0b0b0d}
.how .btn-primary,.cta .btn-primary{background:#fff;color:#111;box-shadow:0 12px 24px -16px rgba(0,0,0,.6)}
.how .btn-primary .btn-ic,.cta .btn-primary .btn-ic{background:rgba(17,17,17,.08)}
.how .btn-ghost,.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
@media (hover:hover) and (pointer:fine){.how .btn-primary:hover,.cta .btn-primary:hover{background:#f1f0ec}.how .btn-ghost:hover,.cta .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}}
.feel-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-out)}
.feel-tile::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(9,9,11,.9) 0%,rgba(9,9,11,.35) 42%,rgba(9,9,11,0) 68%)}
.feel-tile figcaption{position:absolute;z-index:1;left:22px;right:22px;bottom:20px;max-width:38ch;font-size:16px;line-height:1.45;color:var(--ink-2)}
.feel-tile figcaption b{display:block;margin-bottom:4px;color:var(--ink);font-size:clamp(20px,1.9vw,26px);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.feel-big figcaption b{font-size:clamp(26px,2.8vw,38px)}
.feel-big figcaption{left:28px;bottom:26px;font-size:17px}
@media (hover:hover) and (pointer:fine){.feel-tile:hover img{transform:scale(1.03)}}

.how-lede{margin-top:14px;color:var(--ink-2);font-size:clamp(17px,1.4vw,19px);max-width:46ch}

/* sticky buy bar (phones) */
.buybar{
  position:fixed;z-index:58;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
  display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 8px 8px 18px;border-radius:999px;background:rgba(255,255,255,.96);border:1px solid var(--line);
  box-shadow:0 20px 40px -18px rgba(30,28,24,.55);transform:translateY(160%);transition:transform 320ms var(--ease-out);
}
.buybar p b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.buybar p span{display:block;font-size:12.5px;color:var(--ink-3)}
.buybar .btn{padding:13px 10px 13px 18px}
.buybar.show{transform:none}

/* seo guide pages */
.seo-hero{padding:clamp(112px,13vw,150px) 0 clamp(40px,5vw,72px)}
.seo-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.seo-hero-grid > *{min-width:0}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink-3);margin-bottom:18px}
.crumbs a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.seo-hero h1{font-size:clamp(2.1rem,4.2vw,3.7rem);letter-spacing:-.035em}
.seo-hero .lede{margin-top:18px}
.seo-cta{justify-content:flex-start;margin-top:28px}
.seo-figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.seo-figure img{width:100%;height:auto}
.seo-body{padding-top:clamp(40px,5vw,72px)}
.seo-prose{max-width:960px}
.seo-block + .seo-block{margin-top:clamp(48px,6vw,80px)}
.seo-block h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.03em}
.seo-block > p{margin-top:14px;color:var(--ink-2);font-size:17px;line-height:1.6;max-width:68ch}
.seo-block > p a,.seo-block .link-arrow{color:var(--ink)}
.seo-list{margin-top:22px}
.seo-ul{margin-top:16px;padding-left:20px;color:var(--ink-2);display:grid;gap:8px}
.seo-block .heat-card{margin-top:22px}
.seo-fine{margin-top:48px;font-size:13px;color:var(--ink-3);max-width:80ch}
.related{margin-top:26px;display:grid;gap:8px}
.related p{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.related a{color:var(--ink);font-weight:650;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}
@media (hover:hover) and (pointer:fine){.related a:hover{text-decoration-color:var(--ink)}}

/* grid children may shrink below their content (wide tables scroll inside their card) */
.stages-grid > *,.tuners-grid > *,.faq-grid > *,.price-grid > *,.cars-grid > *,.settings-panel > *,.settings-groups > *,.footer-inner > *{min-width:0}

/* compare */
.compare-wrap{text-align:center}
.compare .lede{margin-left:auto;margin-right:auto}
.compare-table-wrap{max-width:940px;margin:52px auto 0;overflow-x:auto}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;text-align:center;font-size:16px}
.compare-table th,.compare-table td{padding:20px 16px}
.compare-table thead th{font-size:15px;font-weight:650;color:var(--ink-2);vertical-align:bottom}
.compare-table tbody th{text-align:left;font-weight:550;color:var(--ink);font-size:16px}
.compare-table tbody th,.compare-table tbody td{border-top:1px solid var(--line)}
.compare-table .col-us{background:var(--card)}
.compare-table thead .col-us{color:var(--ink);font-weight:800;font-size:17px;border-radius:16px 16px 0 0;border-top:2px solid var(--ink)}
.compare-table tbody tr:last-child .col-us{border-radius:0 0 16px 16px}
.compare-table .num{font-family:var(--mono);font-size:15px;color:var(--ink-2)}
.compare-table .col-us.num b{color:var(--ink);font-family:var(--disp);font-weight:700;font-size:16px}
.yes{
  display:inline-block;width:24px;height:24px;border-radius:50%;vertical-align:middle;background:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  background-size:15px;background-position:center;background-repeat:no-repeat;
}
.no{display:inline-block;width:14px;height:2px;border-radius:2px;background:var(--ink-3);vertical-align:middle;opacity:.7}

/* stages */
.stages-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,6vw,88px);align-items:center}
.stages-media{position:relative;padding-bottom:9%}
.window{
  margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card);
  box-shadow:0 40px 80px -40px rgba(30,28,24,.55);
}
.window-bar{height:36px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);background:#f3f2ef}
.window-url{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);background:#fff;padding:4px 16px;border-radius:999px;border:1px solid var(--line)}
.window img{width:100%;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
.phone{
  position:absolute;margin:0;right:-3%;bottom:0;width:29%;border-radius:30px;overflow:hidden;
  border:6px solid #1c1c22;background:#000;box-shadow:0 34px 60px -24px rgba(30,28,24,.6);
}
.stage-list{margin-top:30px}
.stage-list div{display:grid;grid-template-columns:110px 1fr;align-items:baseline;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.stage-list dt{font-size:20px;font-weight:800;letter-spacing:-.02em}
.stage-list dd{color:var(--ink-2);font-size:16px}
.stage-note{margin-top:18px;color:var(--ink-2);font-size:15px;line-height:1.55;max-width:44ch}
.stages .link-arrow{margin-top:22px}

/* settings: the real app, three tabs */
.tabs{position:relative;display:none;grid-template-columns:repeat(3,1fr);margin:28px 0 28px;padding:4px;border-radius:999px;border:1px solid var(--line);background:#fff;width:max-content;max-width:100%}
.js .tabs{display:inline-grid}
.tab{
  position:relative;z-index:1;min-width:128px;padding:11px 22px;border-radius:999px;
  font-size:15px;font-weight:700;color:var(--ink-2);transition:color 220ms ease;white-space:nowrap;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
.tab[aria-selected="true"]{color:#fff}
@media (hover:hover) and (pointer:fine){.tab[aria-selected="false"]:hover{color:var(--ink)}}
.tab-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:999px;background:var(--ink);transition:transform 260ms var(--ease-in-out)}
.tabs[data-active="1"] .tab-thumb{transform:translateX(100%)}
.tabs[data-active="2"] .tab-thumb{transform:translateX(200%)}
.settings-panel{display:block}
.settings-panel + .settings-panel{margin-top:56px}
.js .settings-panel + .settings-panel{margin-top:0}
.settings-panel[hidden]{display:none}
.settings-panel.is-swapping{animation:panel-in 260ms var(--ease-out)}
@keyframes panel-in{from{opacity:.4}to{opacity:1}}
.settings-shot{max-width:1100px;margin:0 auto}
.settings-shot img{-webkit-mask-image:none;mask-image:none}
.settings-sub{margin:34px 0 0;color:var(--ink-2);font-size:16px}
.settings-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px 32px;margin-top:30px}
.settings-sub + .settings-list{margin-top:20px}
.settings-list dt{font-size:16px;font-weight:700;letter-spacing:-.01em}
.settings-list dd{margin-top:3px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.group-title{grid-column:1/-1;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:12px;border-top:1px solid var(--line)}
.settings-list .group-title:first-child{padding-top:0;border-top:0}
.settings-foot{margin-top:22px;font-size:14px;color:var(--ink-3)}
.settings-next{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-2);font-size:15px;line-height:1.55;max-width:90ch}
.settings-next b{color:var(--ink);font-weight:700}

/* hellflash ai */
.ai-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,6vw,88px);align-items:center}
.ai-points{list-style:none;margin-top:26px;display:grid;gap:14px}
.ai-points li{position:relative;padding-left:30px;color:var(--ink-2);font-size:16px;line-height:1.5}
.ai-points li::before{
  content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}
.ai-points b{color:var(--ink);font-weight:700}
.ai-cta{margin-top:30px}
.ai-note{margin-top:16px;font-size:13.5px;color:var(--ink-3)}
.ai-chat{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--card-2)}
.chat-head img{width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line);padding:5px}
.chat-head b{display:block;font-size:16px;letter-spacing:-.01em}
.chat-head span{display:block;font-size:13px;color:var(--ink-2);font-weight:600}
.chat-log{height:380px;overflow-y:auto;overscroll-behavior:contain;padding:20px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.msg{max-width:88%;padding:12px 15px;border-radius:16px;font-size:15px;line-height:1.45}
.msg p + p,.msg ul + p{margin-top:8px}
.msg-you{align-self:flex-end;background:var(--ink);color:#fff;font-weight:600;border-bottom-right-radius:6px}
.msg-ai{align-self:flex-start;background:#f2f1ee;border:1px solid var(--line);border-bottom-left-radius:6px}
.msg-changes{list-style:none;margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.msg-changes li{font-size:12.5px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}
.msg-changes b{color:var(--ink);font-weight:750;margin-left:4px}
.msg-small{font-size:13px;color:var(--ink-3)}
.msg-typing{padding:11px 15px;font-size:13.5px;color:var(--ink-3)}
.msg-in{animation:msg-in 280ms var(--ease-out)}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-prompts{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 18px;border-top:1px solid var(--line);background:var(--card-2)}
.chip{
  padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:#fff;
  font-size:13.5px;font-weight:600;color:var(--ink);text-align:left;line-height:1.3;
  touch-action:manipulation;transition:border-color 200ms ease,background-color 200ms ease,transform 160ms var(--ease-out);
}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--ink)}}
.part-note{margin-top:8px;font-size:12.5px;color:var(--ink-3)}

/* cars */
.car-search{position:relative;max-width:580px;margin:30px 0 32px}
.car-search input{
  width:100%;height:58px;border-radius:999px;background:var(--card);border:1px solid var(--line-2);
  padding:0 22px 0 54px;font:500 16px/1 var(--disp);color:var(--ink);outline:none;
  transition:border-color 200ms ease,box-shadow 200ms ease;-webkit-appearance:none;appearance:none;
}
.car-search input::placeholder{color:var(--ink-3)}
.car-search input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.1)}
.search-ic{position:absolute;left:20px;top:50%;width:20px;height:20px;margin-top:-10px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.car-empty{margin:-12px 0 24px;color:var(--ink-2)}
.car-empty a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cars-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.engine-card{background:var(--card);border:1px solid var(--line);border-radius:18px}
.engine-card[hidden]{display:none}
.feature{position:relative;overflow:hidden;padding:28px}
.feature-copy{position:relative;z-index:1}
.feature header{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.feature h3{font-size:26px;letter-spacing:-.03em}
.feature .ecu{margin-top:6px;color:var(--ink-3);font-size:14px}
.models{list-style:none}
.models li{font-size:15px;font-weight:600;padding:6px 8px;margin:0 -8px;border-radius:8px;transition:background-color 200ms ease}
.models li span{font-weight:400;color:var(--ink-3);font-size:13px;margin-left:6px}
.models li[hidden]{display:none}
.models li.match{background:color-mix(in oklab,var(--accent) 14%,transparent)}
.feature .models{margin-top:22px;columns:2;column-gap:24px}
.feature .models li{break-inside:avoid}
.feature-car{
  position:absolute;right:-6%;bottom:4%;width:60%;filter:drop-shadow(0 18px 14px rgba(40,36,30,.16));
}
.engine-rows{display:grid;gap:10px}
details.engine-card summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px 15px 18px;min-height:66px;cursor:pointer;border-radius:18px;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
details.engine-card summary::-webkit-details-marker{display:none}
details.engine-card summary::after{
  content:"";flex:none;width:9px;height:9px;margin:0 4px 0 2px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-2px) rotate(45deg);transition:transform 220ms var(--ease-out);
}
details.engine-card[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.row-name{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.row-name b{font-size:16px;font-weight:700}
.row-name span{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
details.engine-card .models{padding:0 18px 16px}
@media (hover:hover) and (pointer:fine){details.engine-card summary:hover{background:rgba(17,17,17,.03)}}
.engine-card.next{margin-top:16px}
.models-3{columns:3;column-gap:24px}
/* every supported car as a Studio drawing */
.models.tiles{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.feature .models.tiles{columns:auto;margin-top:20px}
.models.tiles li{display:flex;flex-direction:column;gap:1px;margin:0;padding:8px 12px 12px;border-radius:14px;background:var(--card-2);border:1px solid var(--line);font-size:15px;font-weight:700;letter-spacing:-.01em}
.models.tiles li img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;margin:0 0 4px}
.models.tiles li span{margin:0;font-size:12.5px;font-weight:450;color:var(--ink-3)}
.models.tiles li.match{background:color-mix(in oklab,var(--accent) 10%,var(--card));border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
details.engine-card .models.tiles{padding:2px 14px 16px}
.models-3 li{break-inside:avoid}

/* how */
.how{position:relative;min-height:min(100svh,940px);display:flex;align-items:flex-end;padding:var(--sec-pad) 0 clamp(56px,7vw,100px);overflow:hidden}
.how-media{position:absolute;inset:0}
.how-media img{width:100%;height:100%;object-fit:cover;object-position:35% center}
.how-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(9,9,11,.97) 0%,rgba(9,9,11,.82) 38%,rgba(9,9,11,.35) 72%,rgba(9,9,11,.7) 100%);
}
.how-inner{position:relative;z-index:1;width:100%;display:grid}
.how h2{font-size:clamp(2.3rem,5vw,4.2rem);letter-spacing:-.04em}
.needs{
  justify-self:end;width:min(320px,100%);margin-bottom:clamp(64px,12vw,200px);
  background:rgba(14,14,18,.88);border:1px solid var(--line-2);border-radius:16px;padding:18px 20px;
}
.needs h3{font-size:16px;letter-spacing:-.01em}
.needs ul{list-style:none;margin-top:10px}
.needs li{position:relative;padding:6px 0 6px 22px;font-size:14.5px;color:var(--ink)}
.needs li::before{content:"";position:absolute;left:2px;top:13px;width:8px;height:8px;border-radius:2px;background:#fff}
.needs p{margin-top:8px;font-size:13px;color:var(--ink-3)}
.steps{list-style:none;counter-reset:step;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:36px}
.steps::before{content:"";position:absolute;left:14px;right:14px;top:14px;height:1px;background:var(--line-2)}
.steps li{position:relative;counter-increment:step;padding-top:46px}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:0;width:29px;height:29px;border-radius:50%;
  display:grid;place-items:center;font:600 12.5px var(--mono);color:var(--ink);background:#101013;border:1px solid var(--line-2);
}
.steps li:first-child::before{background:#fff;border-color:#fff;color:#111}
.steps h3{font-size:19px;letter-spacing:-.02em}
.steps p{margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.5;max-width:30ch}

/* tuners */
.tuners-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:clamp(24px,3.5vw,44px);margin-top:44px;align-items:start}
.heat-card{margin:0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}
.heat-scroll{overflow-x:auto;border-radius:10px;overscroll-behavior-x:contain}
.heat{border-collapse:separate;border-spacing:2px;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;width:100%;min-width:620px}
.heat th{font-weight:500;color:var(--ink-3);font-size:11.5px;padding:6px 4px}
.heat tbody th{text-align:right;padding-right:8px}
.heat td{text-align:center;padding:8px 4px;border-radius:4px;font-weight:500}
.heat-card figcaption{margin-top:12px;font-size:13px;color:var(--ink-3);line-height:1.45}
.tool-cols{display:grid;gap:28px}
.tool-col h3{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-.02em}
.tool-col ul{list-style:none;margin-top:10px}
.tool-col li{padding:11px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}

/* price */
.price-grid{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,6vw,100px);align-items:center;
  padding-top:60px;padding-bottom:60px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.price-big{font-weight:800;font-size:clamp(6.5rem,16vw,14.5rem);line-height:.8;letter-spacing:-.065em;font-variant-numeric:tabular-nums}
.price-big .cur{font-size:.42em;vertical-align:top;position:relative;top:.1em;margin-right:.02em;letter-spacing:0}
.price-copy h2{font-size:clamp(1.9rem,3.2vw,2.7rem)}
.price-copy h2 .hot{display:block}
.price-copy > p{margin-top:16px;color:var(--ink-2);font-size:17px;line-height:1.55;max-width:50ch}
.price-incl{list-style:none;margin:22px 0 28px;display:grid;gap:10px}
.price-incl li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:550}
.price-incl li::before{
  content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}

/* faq */
.faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,5vw,72px);align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side p{margin-top:14px;color:var(--ink-2);font-size:16px}
.faq-side a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;font-size:18px;font-weight:650;letter-spacing:-.015em;touch-action:manipulation;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;
  transition:transform 240ms var(--ease-out);
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 0 24px;color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:64ch}
@media (hover:hover) and (pointer:fine){.faq-list summary:hover{color:#000}}

/* closing cta */
.cta{position:relative;min-height:min(88svh,780px);display:flex;align-items:flex-end;padding:var(--sec-pad) 0 clamp(64px,9vw,120px);overflow:hidden}
.cta-media{position:absolute;inset:0}
.cta-media img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.cta-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,11,.94) 0%,rgba(9,9,11,.72) 42%,rgba(9,9,11,.12) 75%),linear-gradient(0deg,#0b0b0d 0%,transparent 30%)}
.cta-inner{position:relative;z-index:1;width:100%}
.cta h2{font-size:clamp(2.4rem,5.2vw,4.6rem);letter-spacing:-.04em;max-width:12ch}
.cta p{margin-top:16px;color:var(--ink-2);font-size:clamp(17px,1.5vw,19px);max-width:44ch;line-height:1.55}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* footer */
.footer{border-top:1px solid var(--line);padding-top:64px}
.footer-inner{display:grid;grid-template-columns:1fr auto;gap:48px}
.footer-brand p{margin-top:12px;color:var(--ink-2);font-size:15px}
.footer-cols{display:grid;grid-template-columns:repeat(3,auto);gap:56px}
.footer-col h3{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.footer-col a{display:block;padding:6px 0;font-size:15px;color:var(--ink-2);transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){.footer-col a:hover{color:var(--ink)}}
.footer-fine{margin-top:56px;border-top:1px solid var(--line);padding:24px 0 calc(32px + env(safe-area-inset-bottom))}
.footer-fine p{font-size:12.5px;color:var(--ink-3);line-height:1.6;max-width:110ch}
.footer-fine .credit{margin-top:10px}
.footer-fine a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(17,17,17,.25)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav-links a{padding:9px 10px;font-size:14.5px}
}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .burger{display:block}
  .stages-grid,.tuners-grid,.faq-grid,.price-grid{grid-template-columns:1fr}
  .stages-media{max-width:720px}
  .ai-grid{grid-template-columns:1fr}
  .seo-hero-grid{grid-template-columns:1fr}
  .cars-grid{grid-template-columns:1fr}
  .faq-side{position:static}
  .steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .steps::before{display:none}
  .part{grid-template-columns:1fr}
  .part-sound .part-shot{order:0}
  .trust-list{grid-template-columns:1fr 1fr}
  .feel-grid{grid-template-columns:1fr;grid-template-rows:none}
  .feel-big{grid-row:auto;min-height:0}
  .feel-tile{aspect-ratio:4/3}
}

/* phones and portrait tablets: menus become a bottom sheet over the stage */
@media (max-width:760px),(max-aspect-ratio:4/5){
  .motion .cam{--s:1;--fx:.493;--fy:.51;--px:.5;--py:.7}
  .motion .hero-copy{top:clamp(84px,11svh,120px)}
  .motion .hero-copy h1{font-size:min(clamp(2.05rem,8.6vw,3.4rem),6.4svh)}
  .motion .hud{top:74px;gap:6px}
  .hud-tab{min-width:0;padding:9px 13px;font-size:13.5px}
  .hud-close{width:42px;height:42px}
  .motion .part,.motion .part-engine,.motion .part-sound,.motion .part-gearbox{
    width:auto;max-width:560px;left:10px;right:10px;margin:0 auto;top:auto;
    bottom:calc(10px + env(safe-area-inset-bottom));display:block;
  }
  .motion .part-panel{max-height:60svh;padding:16px 16px 14px;border-radius:18px}
  .motion .tune-name span{display:none}
  .motion .tune-row{padding:6px 0;gap:10px}
  .motion .part-head h2{font-size:23px}
  .motion .part-head p{font-size:13.5px}
  .motion .build{margin-top:8px;padding-top:10px}
  .motion .meters{gap:5px;margin-top:8px}
  .motion .stat-big{font-size:34px}
  .motion .stat-sub{min-height:0;font-size:12px;margin-top:4px}
  .hotspot{font-size:13.5px;min-height:40px;padding:0 14px}
  .motion .shown{gap:6px}
  .car-chip{min-width:0;padding:7px 12px;font-size:13px}
  .shown-line{font-size:11px}
}

@media (max-width:760px){
  :root{--gutter:16px}
  body{font-size:16px}
  .js .buybar{display:flex}
  .trust-list{grid-template-columns:1fr;gap:14px;padding-top:20px;padding-bottom:20px}
  .feel-tile figcaption,.feel-big figcaption{left:18px;right:18px;bottom:16px;font-size:15px}
  .hero-cta .btn{flex:1 1 auto}
  .nav-cta .btn-ghost{display:none}
  .nav-inner{padding:0 6px 0 14px;height:56px;gap:10px}
  .seg{font-size:11px;height:32px}
  .seg-base span,.seg-hi span{padding:0 6px}
  .tune-name b{font-size:14px}
  .compare-table th,.compare-table td{padding:16px 8px}
  .compare-table thead th{font-size:13px}
  .compare-table tbody th{font-size:14px;width:36%}
  .compare-table thead .col-us{font-size:15px}
  .stage-list div{grid-template-columns:92px 1fr}
  .stages-media{padding-bottom:34%}
  .phone{width:25%;right:2%;border-width:4px;border-radius:18px}
  .settings-list{grid-template-columns:1fr 1fr;gap:16px 18px}
  .tab{min-width:0;padding:10px 14px;font-size:14px}
  .chat-log{height:340px}
  .feature{min-height:0;padding:22px 20px 0}
  .feature-copy{max-width:none}
  .feature-car{position:relative;right:auto;bottom:auto;width:112%;margin:4px -6% 0}
  .models-3{columns:1}
  .models.tiles{grid-template-columns:1fr 1fr;gap:8px}
  .models.tiles li{padding:6px 10px 10px;font-size:14px}
  details.engine-card .models.tiles{padding:2px 10px 14px}
  .how{min-height:0}
  .how-inner{display:flex;flex-direction:column}
  .needs{order:3;justify-self:stretch;width:100%;margin:32px 0 0}
  .steps{grid-template-columns:1fr;gap:22px}
  .steps li{padding:0 0 0 46px}
  .footer-inner{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr 1fr;gap:28px}
  .price-big{font-size:clamp(6rem,30vw,9rem)}
  .price-grid{padding-top:40px;padding-bottom:40px}
  .faq-list summary{font-size:17px;padding:19px 0}
}

/* reduced motion: keep fades that aid comprehension, drop movement */
@media (prefers-reduced-motion:reduce){
  .mobile-menu > a{transform:none;transition:opacity 200ms ease}
  .hud-thumb,.tab-thumb,.burger span,.faq-list summary::after,details.engine-card summary::after{transition-duration:1ms}
  .btn:active{transform:none}
  .settings-panel.is-swapping{animation:none}
  .msg-in{animation:none}
  .hs-dot::after,.motion .ring::after,.car-chip.is-timing::after{animation:none}
  .buybar{transition:opacity 200ms ease;transform:none;opacity:0}
  .buybar.show{opacity:1}
  .feel-tile img{transition:none}
}