/* ==========================================================================
   GekkGo — coming soon
   Ink and paper. Outfit for reading, Bricolage Grotesque for the shouting,
   DM Mono for the small print. Thick round lines, boards, and Gekk.
   ========================================================================== */

@font-face{font-family:"Outfit";src:url("../fonts/Outfit.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/BricolageGrotesque-latin.woff2") format("woff2");font-weight:400 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/DMMono-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/DMMono-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#0A0A0A; --paper:#fff; --surface:#F3F3F4; --raised:#E8E8EA;
  --muted:#6C6C72; --muted-d:#9D9DA4; --d1:#131315; --d2:#202024; --d3:#2b2b30;
  --alert:#C8504A; --warn:#C89A3C; --good:#3E9B78;
  --alert-d:#E0706A; --warn-d:#DDB359; --good-d:#5DB896;
  --line:rgba(10,10,10,.1); --line-d:rgba(255,255,255,.1);

  --f-body:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-display:"Bricolage Grotesque","Outfit",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r:clamp(30px,4.6vw,64px);           /* how far each sheet overlaps the one below */
  --sp:clamp(76px,10vw,150px);          /* section padding */
  --gut:clamp(20px,4vw,52px);
  --spring:cubic-bezier(.34,1.5,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--ink);color:var(--ink);font:400 18px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,dl,dd,dt{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:#fff}
.sheet.ink ::selection,.hero ::selection,.footer ::selection{background:#fff;color:var(--ink)}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-60px;z-index:200;background:#fff;color:var(--ink);padding:10px 16px;border-radius:12px;font-weight:500;transition:top .2s}
.skip-link:focus{top:16px}
.wrap{width:min(1240px,100% - var(--gut)*2);margin-inline:auto}
svg{flex:none}

/* ---------- type ---------- */
.eyebrow{font:500 12.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;margin-bottom:26px}
.eyebrow span{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 10px;margin-right:12px;border-radius:99px;border:1.5px solid currentColor;letter-spacing:.04em}
h2{font:700 clamp(40px,5.3vw,78px)/.95 var(--f-display);letter-spacing:-.042em;font-variation-settings:"opsz" 96;text-wrap:balance}
h3{font:700 clamp(20px,1.9vw,25px)/1.1 var(--f-display);letter-spacing:-.03em;font-variation-settings:"opsz" 48}
.lead{font:300 clamp(18px,1.55vw,21px)/1.55 var(--f-body);color:var(--muted);margin-top:26px;max-width:34em;text-wrap:pretty}
.ink .lead,.hero .lead{color:var(--muted-d)}
.mini-label{font:500 11.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.dark .mini-label,.ink .mini-label{color:var(--muted-d)}
.fine{font:400 12.5px/1.4 var(--f-mono);color:var(--muted);margin-top:18px;letter-spacing:.01em}
.dark .fine{color:var(--muted-d)}
.num,.tabular,[data-rs],.rs-price,.cv-price,[data-ts],.tag b,.eta{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:500 16.5px/1 var(--f-body);padding:17px 26px;border-radius:99px;border:0;cursor:pointer;white-space:nowrap;transition:transform .35s var(--spring),background .2s,box-shadow .3s;will-change:transform}
.btn svg{width:20px;height:20px;transition:transform .35s var(--spring)}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-light{background:#fff;color:var(--ink);box-shadow:0 0 0 0 rgba(255,255,255,.25)}
.btn-light:hover{box-shadow:0 0 0 6px rgba(255,255,255,.16)}
.btn-sm{padding:12px 18px;font-size:15px}
.btn .dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 rgba(62,155,120,.6);animation:pulse 2.2s infinite}

/* ---------- nav ---------- */
.nav{position:fixed;inset:14px 0 auto;z-index:90;display:flex;justify-content:center;pointer-events:none;padding-inline:14px;transition:transform .5s var(--ease)}
.nav-pill{pointer-events:auto;width:min(1180px,100%);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 8px 8px 22px;border-radius:99px;background:rgba(14,14,16,.58);color:#fff;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 14px 40px -18px rgba(0,0,0,.6);transition:background .3s,box-shadow .3s}
.nav.scrolled .nav-pill{background:rgba(14,14,16,.82)}
.brand img{height:32px;width:auto}
.nav-links{display:flex;gap:4px}
.nav-links a{font:400 15px/1 var(--f-body);padding:11px 14px;border-radius:99px;color:rgba(255,255,255,.72);transition:color .2s,background .2s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.1)}
html.has-intro .nav{transform:translateY(-120%)}
html.has-intro.intro-done .nav{transform:none}

/* ---------- sheets (boards stacked over each other) ---------- */
.sheet{position:relative;border-radius:var(--r) var(--r) 0 0;margin-top:calc(var(--r) * -1);padding:var(--sp) 0 calc(var(--sp) + var(--r))}
.sheet.paper{background:#fff;color:var(--ink)}
.sheet.surface{background:var(--surface);color:var(--ink)}
.sheet.ink{background:var(--ink);color:#fff}
.sheet.ink + .sheet.ink::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:rgba(255,255,255,.08);border-radius:inherit}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;min-height:100svh;padding:clamp(112px,15vh,164px) 0 calc(var(--r) + 64px);overflow:hidden;isolation:isolate}
.hero-glow{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(620px 520px at 74% 42%,rgba(255,255,255,.11),transparent 70%),
  radial-gradient(900px 620px at 6% 104%,rgba(255,255,255,.06),transparent 70%),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");
  background-blend-mode:normal}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:center}
.chip-soon{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:11px 16px 11px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;margin-bottom:clamp(22px,3vw,34px)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--good-d);box-shadow:0 0 0 0 rgba(93,184,150,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(93,184,150,0)}100%{box-shadow:0 0 0 0 rgba(93,184,150,0)}}

.hero-h1{font:700 clamp(58px,9.1vw,140px)/.86 var(--f-display);letter-spacing:-.05em;font-variation-settings:"opsz" 96;margin-left:-.04em}
.hero-h1 .line{display:block;white-space:nowrap}
.hero-h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .06em .12em;margin:-.04em -.06em -.12em}
.hero-h1 .w>span{display:inline-block;will-change:transform}
html.js .hero-h1 .w>span{transform:translateY(112%)}
html.js.hero-in .hero-h1 .w>span{transform:none;transition:transform 1.05s var(--ease)}
html.js.hero-in .hero-h1 .line:nth-child(1) .w:nth-child(1)>span{transition-delay:.0s}
html.js.hero-in .hero-h1 .line:nth-child(1) .w:nth-child(2)>span{transition-delay:.07s}
html.js.hero-in .hero-h1 .line:nth-child(2) .w:nth-child(1)>span{transition-delay:.14s}
html.js.hero-in .hero-h1 .line:nth-child(2) .w:nth-child(2)>span{transition-delay:.21s}
html.js.hero-in .hero-h1 .line:nth-child(3) .w:nth-child(1)>span{transition-delay:.28s}

.price-tag{position:relative;display:inline-flex;align-items:center;vertical-align:.12em;margin-left:.14em;padding:0 .42em 0 1.1em;height:1.5em;font:600 .27em/1 var(--f-body);letter-spacing:-.01em;color:var(--ink);background:#fff;border-radius:.45em;transform:rotate(-7deg) scale(0);transform-origin:20% 50%;box-shadow:0 16px 30px -12px rgba(0,0,0,.65)}
.price-tag::before{content:"";position:absolute;left:.4em;top:50%;width:.44em;height:.44em;margin-top:-.22em;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 .1em #fff}
.tag-roll{display:block;height:1.5em;overflow:hidden;min-width:5.6em}
.tag-track{display:block;animation:tagroll 11s var(--ease) infinite}
.tag-track>span{display:block;height:1.5em;line-height:1.5em;font-variant-numeric:tabular-nums;white-space:nowrap}
html.js.hero-in .price-tag{transform:rotate(-7deg) scale(1);transition:transform .9s var(--spring) .75s}
html:not(.js) .price-tag{transform:rotate(-7deg)}
@keyframes tagroll{
  0%,18%{transform:translateY(0)} 24%,42%{transform:translateY(-1.5em)} 48%,66%{transform:translateY(-3em)}
  72%,90%{transform:translateY(-4.5em)} 96%,100%{transform:translateY(-6em)}}

.hero-lead{font:300 clamp(18px,1.6vw,22px)/1.5 var(--f-body);color:rgba(255,255,255,.74);max-width:31em;margin-top:clamp(24px,3vw,36px)}
.join-form{margin-top:clamp(26px,3.2vw,38px);max-width:540px}
.join-field{position:relative;display:flex;gap:8px;padding:7px;border-radius:99px;background:#fff;color:var(--ink);box-shadow:0 0 0 3px rgba(255,255,255,.14);transition:box-shadow .3s}
.join-field:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.6)}
.join-field input[type=email]{flex:1;min-width:0;border:0;background:transparent;padding:0 20px;font:400 17px var(--f-body);outline:0;color:var(--ink)}
.join-field input::placeholder{color:#8a8a90}
.join-field .btn{background:var(--ink);color:#fff;padding:15px 22px}
.join-field .btn:hover{box-shadow:0 0 0 5px rgba(10,10,10,.12)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.join-note{font:400 13.5px/1.4 var(--f-mono);color:var(--muted-d);margin-top:14px;padding-left:20px;transition:color .2s}
.join-form.is-error .join-field{animation:shake .45s}
.join-form.is-error .join-note{color:var(--alert-d)}
.join-form.is-done .join-field{background:rgba(255,255,255,.08);color:#fff;box-shadow:0 0 0 3px rgba(93,184,150,.5)}
.join-form.is-done input[type=email]{color:#fff}
.join-form.is-done .btn{background:var(--good);}
.join-form.is-done .join-note{color:var(--good-d)}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:clamp(30px,4vw,48px);font:400 13px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted-d)}
.hero-facts li{display:flex;align-items:center;gap:9px}
.hero-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4)}
.hero-facts b{font-weight:500;color:#fff}

html.js [data-hero-in]{opacity:0;transform:translateY(22px)}
html.js.hero-in [data-hero-in]{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js.hero-in [data-hero-in]:nth-child(2){transition-delay:.05s}
html.js.hero-in .hero-lead{transition-delay:.45s}
html.js.hero-in .join-form{transition-delay:.58s}
html.js.hero-in .hero-facts{transition-delay:.7s}

/* hero stage */
.stage{position:relative;width:min(100%,640px);justify-self:end;aspect-ratio:1/1.12;--px:0;--py:0}
.stage-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sr-base{stroke:rgba(255,255,255,.1);stroke-width:14;stroke-linecap:round}
.sr-run{stroke:rgba(255,255,255,.55);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 16;animation:dashrun 2.4s linear infinite}
.sr-pin{fill:var(--ink);stroke:#fff;stroke-width:4}
@keyframes dashrun{to{stroke-dashoffset:-34}}
.lockup{position:absolute;left:50%;bottom:11%;width:70%;translate:-50% 0;transform-origin:50% 100%}
.lockup .gekk-rig,.lockup img{width:100%;height:auto;overflow:visible}
html.js .lockup{opacity:0;transform:translateY(50px) scale(.94)}
html.js.hero-in .lockup{opacity:1;transform:none;transition:opacity .8s var(--ease) .25s,transform 1.1s var(--spring) .25s}

.chip{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 24px 44px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14);color:#fff;white-space:nowrap;animation:float 6s ease-in-out infinite;translate:calc(var(--px)*var(--k,18)*1px) calc(var(--py)*var(--k,14)*1px)}
html.js .chip{opacity:0}
html.js.hero-in .chip{opacity:1;transition:opacity .8s var(--ease) 1s}
.chip[data-float="2"]{animation-duration:7.2s;animation-delay:-2s;--k:-22}
.chip[data-float="3"]{animation-duration:6.6s;animation-delay:-4s;--k:26}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.chip-txt{display:grid;gap:3px}
.chip-txt b{font:500 16px/1 var(--f-body)}
.chip-txt small{font:400 12.5px/1 var(--f-body);color:rgba(255,255,255,.6)}
.chip .ico{width:26px;height:26px;margin:0 2px 0 6px;color:#fff}
.chip-speed{left:0;top:3%}
.chip-toll{right:0;top:12%}
.chip-fuel{right:5%;bottom:0}
.sign{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;border:5px solid var(--alert);flex:none}
.sign b{font:800 19px/1 var(--f-display);letter-spacing:-.04em;color:var(--ink)}
.chip .buffer{font:700 24px/1 var(--f-display);letter-spacing:-.03em}
.status{display:inline-flex;align-items:center;gap:8px;font:500 14px/1 var(--f-body);padding:8px 12px 8px 10px;border-radius:99px}
.status i{width:9px;height:9px;border-radius:50%;background:currentColor}
.s-good{color:#2b7a5c;background:rgba(62,155,120,.14)}
.s-warn{color:#8a6a1f;background:rgba(200,154,60,.18)}
.s-bad{color:#a53c36;background:rgba(200,80,74,.14)}
.chip .s-good{color:var(--good-d);background:rgba(93,184,150,.16)}

.scroll-cue{position:absolute;left:50%;bottom:calc(var(--r) + 14px);width:26px;height:42px;translate:-50% 0;border:2px solid rgba(255,255,255,.35);border-radius:99px;opacity:.8}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:#fff;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- marquee ---------- */
.marquee-sheet{padding:clamp(26px,3.4vw,44px) 0 calc(clamp(26px,3.4vw,44px) + var(--r))}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee ul{display:flex;align-items:center;flex:none}
.marquee li{font:700 clamp(30px,4.4vw,62px)/1 var(--f-display);letter-spacing:-.04em;white-space:nowrap;padding:0 clamp(14px,2vw,28px);font-variation-settings:"opsz" 96}
.marquee li.sep{padding:0;display:grid;place-items:center}
.marquee li.sep svg{width:clamp(30px,3.6vw,50px);height:clamp(30px,3.6vw,50px);color:var(--ink);animation:eyeroll 6s var(--ease) infinite}
.marquee li.sep:nth-of-type(odd) svg{animation-delay:-3s}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes eyeroll{0%,70%,100%{transform:rotate(0)}85%{transform:rotate(16deg)}}

/* ---------- chapters ---------- */
.grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,100px);align-items:start}
.grid.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.grid.flip .copy{order:2}
.copy{position:sticky;top:120px}
.chapter-head{max-width:880px;margin:0 auto;text-align:center}
.chapter-head .eyebrow{margin-bottom:26px}
.chapter-head .lead{margin-inline:auto}
.points{margin-top:36px}
.points li{display:grid;grid-template-columns:28px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.ink .points li{border-color:var(--line-d)}
.points li svg{width:26px;height:26px;margin-top:1px;color:var(--ink);--eye-bg:#fff}
.ink .points li svg{color:var(--ink);--eye-bg:#fff;border-radius:50%}
.points p{font:300 17px/1.5 var(--f-body);color:var(--muted)}
.ink .points p{color:var(--muted-d)}
.points b{font-weight:500;color:var(--ink)}
.ink .points b{color:#fff}
.stack{display:grid;gap:clamp(20px,2.4vw,32px)}
.trust{display:flex;align-items:center;gap:12px;margin-top:34px;font:500 15px/1.4 var(--f-mono);letter-spacing:.02em;color:#fff;padding:14px 18px;border:1px solid var(--line-d);border-radius:16px;width:fit-content}
.trust svg{width:22px;height:22px;color:var(--good-d)}

/* cards */
.card{position:relative;border-radius:34px;overflow:hidden}
.plaque{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:0 7px 0 0 var(--ink),0 50px 80px -50px rgba(10,10,10,.5)}
.dark{background:var(--d1);color:#fff;border:1px solid var(--line-d);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 60px 90px -50px #000}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:28px 28px 0;margin-bottom:22px}
.card-foot{padding:6px 28px 30px}
.card-foot h3{margin-bottom:8px}
.card-foot p{font:300 16px/1.5 var(--f-body);color:var(--muted)}
.dark .card-foot p{color:var(--muted-d)}
.pill{display:inline-flex;align-items:center;gap:8px;font:500 13.5px/1 var(--f-body);padding:9px 13px;border-radius:99px;background:rgba(255,255,255,.08);color:#fff;white-space:nowrap}
.pill svg{width:17px;height:17px}
.plaque .pill{background:var(--surface);color:var(--ink)}
.pill.live i{width:8px;height:8px;border-radius:50%;background:var(--good);animation:pulse 2s infinite}

/* range inputs */
.range{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;cursor:pointer;margin:0;--fill:0%}
.range::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(to right,var(--ink) var(--fill),var(--raised) var(--fill))}
.range::-moz-range-track{height:8px;border-radius:99px;background:var(--raised)}
.range::-moz-range-progress{height:8px;border-radius:99px;background:var(--ink)}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--ink);margin-top:-11px;box-shadow:0 3px 0 var(--ink);transition:transform .25s var(--spring)}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.range:active::-webkit-slider-thumb{transform:scale(1.15)}
.dark .range::-webkit-slider-runnable-track{background:linear-gradient(to right,#fff var(--fill),var(--d3) var(--fill))}
.dark .range::-moz-range-track{background:var(--d3)}
.dark .range::-moz-range-progress{background:#fff}
.dark .range::-webkit-slider-thumb{border-color:var(--d1);box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.dark .range::-moz-range-thumb{border-color:var(--d1)}

/* ---------- 01 route card ---------- */
.map{position:relative;aspect-ratio:560/330;background:var(--surface);overflow:hidden;border-bottom:3px solid var(--ink)}
.map-svg{position:absolute;inset:0;width:100%;height:100%}
.streets path{stroke:#fff;stroke-width:12}
.route{fill:none;stroke:#C9C9CF;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s,stroke-width .4s;cursor:pointer}
.route.on{stroke:var(--ink);stroke-width:10}
.endpoints .pt-a{fill:#fff;stroke:var(--ink);stroke-width:4}
.endpoints .pt-b{fill:var(--ink)}
.endpoints circle:nth-child(2){fill:var(--ink)}
.endpoints circle:nth-child(4){fill:#fff}
.tag{position:absolute;translate:-50% -50%;display:grid;justify-items:center;gap:2px;padding:7px 12px 6px;border-radius:15px;background:#fff;color:var(--ink);border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);transition:transform .35s var(--spring),background .25s,color .25s,box-shadow .25s}
.tag b{font:600 16px/1 var(--f-body)}
.tag small{font:400 11.5px/1 var(--f-body);color:var(--muted)}
.tag:hover{transform:scale(1.07) rotate(-1.5deg)}
.tag.on{background:var(--ink);color:#fff;transform:scale(1.1);z-index:2}
.tag.on small{color:#b9b9bf}
.map-hint{position:absolute;left:14px;bottom:12px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;border-radius:99px;background:#fff;border:2px solid var(--ink);animation:hint 2.6s ease-in-out infinite;transition:opacity .4s}
.map-hint.gone{opacity:0;pointer-events:none}
@keyframes hint{50%{transform:translateY(-3px)}}
.route-sum{padding:22px 28px 28px}
.rs-main{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rs-label{font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:99px;background:var(--ink);color:#fff}
.rs-price{font:700 clamp(40px,4.4vw,56px)/1 var(--f-display);letter-spacing:-.045em;font-variation-settings:"opsz" 96}
.rs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.rs-grid div{padding:12px 14px;border-radius:16px;background:var(--surface)}
.rs-grid dt{font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.rs-grid dd{font:500 17px/1 var(--f-body)}

/* curve card */
.cv-price{text-align:right}
.cv-price span{display:block;font:700 clamp(30px,3.4vw,44px)/1 var(--f-display);letter-spacing:-.045em}
.cv-price small{font:500 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--muted)}
.curve-card h3{font-size:clamp(20px,2vw,26px)}
.curve{width:calc(100% - 56px);margin:0 28px;height:auto;overflow:visible}
.cv-grid{stroke:var(--raised);stroke-width:1.5;stroke-dasharray:3 5}
.cv-line{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.cv-fill{fill:var(--surface)}
.cv-tick{font:500 10px var(--f-mono);fill:var(--muted);text-anchor:middle;letter-spacing:.06em}
.cv-dot{transition:transform .6s var(--spring)}
.cv-dot circle{fill:var(--ink)}
.cv-dot .halo{fill:rgba(10,10,10,.1)}
.range-wrap{padding:6px 28px 0}
.range-marks{display:flex;justify-content:space-between;font:500 13px/1 var(--f-mono);color:var(--muted);padding:0 4px;margin-top:-2px}
.curve-card .fine{padding:0 28px 26px;margin-top:14px}

/* ---------- 02 toll card ---------- */
.toll-card{padding:0 0 28px}
.seg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:0 28px;padding:5px;border-radius:20px;background:var(--d2)}
.seg button{position:relative;z-index:1;font:500 14px/1.15 var(--f-body);padding:13px 6px;border-radius:15px;color:#b6b6bc;text-align:center;transition:color .3s}
.seg button[aria-checked=true]{color:var(--ink)}
.seg button:not([aria-checked=true]):hover{color:#fff}
.seg-thumb{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/4);border-radius:15px;background:#fff;transition:transform .55s var(--spring)}
.gates{margin:14px 28px 0}
.gate{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 0;border-top:1px solid var(--line-d)}
.gate:first-child{border-top:0}
.gate-check{width:30px;height:30px;border-radius:10px;border:2px solid #4a4a50;display:grid;place-items:center;color:transparent;transition:all .35s var(--spring);pointer-events:none}
.gate-check svg{width:20px;height:20px}
.gate.skip .gate-check{background:var(--good);border-color:var(--good);color:#fff}
.is-custom .gate-check{pointer-events:auto;border-style:dashed;border-color:#8a8a90}
.is-custom .gate.skip .gate-check{border-style:solid}
.is-custom .gate-check:hover{transform:scale(1.12)}
.gate-info b{display:block;font:500 17px/1.2 var(--f-body)}
.gate-info p{font:300 14.5px/1.4 var(--f-body);color:var(--muted-d);margin-top:5px}
.verdict{font:500 13px/1 var(--f-body);padding:9px 14px;border-radius:99px;min-width:62px;text-align:center;transition:background .3s,color .3s}
.gate .verdict{background:rgba(255,255,255,.1);color:#fff}
.gate.skip .verdict{background:rgba(93,184,150,.18);color:var(--good-d)}
.toll-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 28px 0;padding-top:20px;border-top:1px solid var(--line-d)}
.toll-sum span{display:block;font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);margin-bottom:8px}
.toll-sum b{font:500 20px/1 var(--f-body)}
.toll-sum .total{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;background:#fff;color:var(--ink);padding:16px 22px;border-radius:20px;margin-top:6px}
.toll-sum .total span{color:var(--muted);margin:0}
.toll-sum .total b{font:700 clamp(30px,3.2vw,40px)/1 var(--f-display);letter-spacing:-.045em}
.toll-card .fine{padding:0 28px;margin-top:16px}

/* ---------- 03 guidance ---------- */
.bento{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(18px,2.2vw,28px);margin-top:clamp(44px,6vw,76px)}
.lane-card{display:flex;flex-direction:column}
.lane-banner{display:flex;align-items:center;gap:16px;margin:24px 24px 0;padding:14px 18px 14px 14px;border-radius:22px;background:#fff;color:var(--ink);position:relative;z-index:3;box-shadow:0 18px 30px -16px rgba(0,0,0,.6)}
.lane-arrow{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--ink);color:#fff;flex:none}
.lane-arrow svg{width:24px;height:24px;transform:rotate(-90deg)}
.lane-banner b{display:block;font:600 18px/1.15 var(--f-body)}
.lane-banner small{font:400 14px/1.3 var(--f-body);color:var(--muted)}
.road{position:relative;flex:1;min-height:330px;margin:-30px 24px 22px;padding-top:30px;border-radius:0 0 26px 26px;overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr);background:#1b1b1e}
.road::before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,transparent calc(25% - 1.5px),rgba(255,255,255,.0) calc(25% - 1.5px)),
  repeating-linear-gradient(180deg,rgba(255,255,255,.26) 0 22px,transparent 22px 52px) 25% 0/3px 100% no-repeat,
  repeating-linear-gradient(180deg,rgba(255,255,255,.26) 0 22px,transparent 22px 52px) 50% 0/3px 100% no-repeat,
  repeating-linear-gradient(180deg,rgba(255,255,255,.26) 0 22px,transparent 22px 52px) 75% 0/3px 100% no-repeat;
  animation:roadflow 1.1s linear infinite}
@keyframes roadflow{to{background-position:25% 52px,50% 52px,75% 52px}}
.lane{position:relative;overflow:hidden}
.lane .car{position:absolute;left:50%;width:34%;aspect-ratio:1/1.9;translate:-50% 0;border-radius:10px;background:#cfcfd5;top:-30%;animation:drift var(--t,9s) linear infinite;animation-delay:var(--d,0s)}
.lane .car::before{content:"";position:absolute;left:12%;right:12%;top:20%;height:24%;border-radius:5px;background:#1b1b1e;opacity:.8}
.lane .car::after{content:"";position:absolute;left:10%;right:10%;bottom:6%;height:7%;border-radius:3px;background:#ff8a80;opacity:.0}
.lane .car.c1{--t:11s;--d:-1s}.lane .car.c2{--t:11s;--d:-5s}.lane .car.c3{--t:11s;--d:-8.5s}
.l1 .car{--t:13s;background:#bdbdc4}.l1 .c1{--d:-2s}.l1 .c2{--d:-7s}.l1 .c3{--d:-10.5s}
.l2 .car{--t:12s}.l2 .c1{--d:-3s}.l2 .c2{--d:-8s}
.l3 .car{--t:10.5s;background:#a8a8b0}.l3 .c1{--d:-1s}.l3 .c2{--d:-4.6s}.l3 .c3{--d:-8s}
.jam .car{--t:3.2s;background:#8f8f98;width:38%}
.jam .car::after{opacity:1;background:var(--alert-d);box-shadow:0 0 10px var(--alert-d);animation:brake 1.2s ease-in-out infinite}
.jam .c1{--d:-.2s}.jam .c2{--d:-1s}.jam .c3{--d:-1.9s}.jam .c4{--d:-2.6s}
@keyframes drift{from{top:-34%}to{top:118%}}
@keyframes brake{50%{opacity:.35}}
.lane .me{position:absolute;left:50%;bottom:18%;width:34%;aspect-ratio:1/1.9;translate:-50% 0;border-radius:11px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 30px 6px rgba(255,255,255,.22);animation:sway 3.6s ease-in-out infinite;z-index:2}
.lane .me::before{content:"";position:absolute;left:14%;right:14%;top:22%;height:24%;border-radius:6px;background:var(--ink)}
@keyframes sway{50%{translate:-46% -3px}}
.lane-tags{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 6px 8px;background:linear-gradient(0deg,#1b1b1e 40%,transparent);padding-top:34px;z-index:3}
.lane-tags span{font:500 11.5px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:7px 0;border-radius:99px}
.lane-tags .ok{color:var(--good-d);background:rgba(93,184,150,.14)}
.lane-tags .best{background:var(--good-d);color:var(--ink)}
.lane-tags .bad{color:var(--alert-d);background:rgba(224,112,106,.16)}
.exit-sign{position:absolute;right:8px;top:40px;z-index:4;display:flex;align-items:center;gap:6px;padding:7px 10px 7px 8px;border-radius:10px;background:#fff;color:var(--ink);font:600 12px/1 var(--f-body);box-shadow:0 8px 16px -8px rgba(0,0,0,.6)}
.exit-sign svg{width:15px;height:15px;rotate:-45deg}

.buffer-card{display:flex;flex-direction:column}
.bf-stage{position:relative;height:300px;display:grid;place-items:center;background:var(--surface);border-bottom:3px solid var(--ink);overflow:hidden}
.speed-sign{position:relative;margin-top:-50px}
.speed-sign .ring{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:#fff;border:14px solid var(--alert);box-shadow:0 0 0 3px var(--ink),0 8px 0 3px var(--ink)}
.speed-sign .ring b{font:800 58px/1 var(--f-display);letter-spacing:-.06em}
.buffer-pill{position:absolute;right:-30px;bottom:-4px;display:grid;background:var(--ink);color:#fff;border-radius:99px;padding:10px 16px;font:700 22px/1 var(--f-display);letter-spacing:-.03em;box-shadow:0 8px 0 -2px rgba(10,10,10,.22);min-width:84px;text-align:center}
.bp{grid-area:1/1;animation:bpA 9s infinite}
.bp-b{font:600 14px/1.5 var(--f-body);letter-spacing:0;animation-name:bpB;white-space:nowrap}
@keyframes bpA{0%,32%{opacity:1;transform:none}36%,95%{opacity:0;transform:translateY(-8px)}99%,100%{opacity:1;transform:none}}
@keyframes bpB{0%,33%{opacity:0;transform:translateY(8px)}37%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(8px)}}
.toast{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:var(--ink);color:#fff;opacity:0;animation:toast 9s infinite;box-shadow:0 16px 28px -14px rgba(0,0,0,.6)}
.toast svg{width:24px;height:24px;color:var(--warn-d);flex:none}
.toast b{display:block;font:500 15px/1.2 var(--f-body)}
.toast small{display:block;font:300 12.5px/1.3 var(--f-body);color:#bdbdc3}
@keyframes toast{0%,34%{opacity:0;transform:translateY(24px)}39%,91%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(24px)}}
.border-track{display:grid;grid-template-columns:1fr 1fr;gap:8px 0;padding:22px 28px 6px}
.border-track .em{font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.border-track .em-b{text-align:right}
.bt-line{position:relative;grid-column:1/-1;height:6px;border-radius:99px;background:var(--raised);margin-top:2px}
.bt-mark{position:absolute;left:50%;top:-8px;width:3px;height:22px;margin-left:-1.5px;border-radius:3px;background:var(--ink)}
.bt-car{position:absolute;top:50%;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;border:4px solid var(--ink);box-shadow:0 3px 0 var(--ink);animation:btcar 9s linear infinite}
@keyframes btcar{0%{left:0;opacity:0}4%{opacity:1}66%{left:100%}94%{left:100%;opacity:1}98%,100%{left:100%;opacity:0}}
.buffer-card .card-foot{padding-top:16px}
.mini-feats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 32px;padding-top:12px}
.mini-feats li{display:flex;align-items:center;gap:14px;font:400 16px/1.35 var(--f-body);color:#3d3d43;padding:14px 0;border-top:1px solid var(--line)}
.mini-feats svg{width:26px;height:26px;color:var(--ink);--eye-bg:#fff}

/* ---------- 04 heads-up ---------- */
.alert-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.alert-chips li{display:inline-flex;align-items:center;gap:9px;padding:11px 16px 11px 13px;border-radius:99px;border:1px solid var(--line-d);font:400 15.5px/1 var(--f-body);color:#e6e6ea;transition:background .25s,transform .35s var(--spring)}
.alert-chips li:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.alert-chips svg{width:20px;height:20px}
.zoom-card{padding:0}
.zoom-map{position:relative;aspect-ratio:560/400;background:#0d0d0f;overflow:hidden;--z:0}
.zoom-map svg{position:absolute;inset:0;width:100%;height:100%}
[data-zoom-world]{transform-origin:290px 190px;transition:transform .25s linear}
.zm-streets path{stroke:#232327;stroke-width:13}
.zm-route{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;opacity:.92}
.zm-eyes{color:var(--ink);--eye-bg:#fff;opacity:calc((var(--z) - .32) * 3.4)}
.zm-pois{opacity:calc((var(--z) - .5) * 4)}
.zm-pois rect{fill:#fff}
.zm-pois use{color:var(--ink)}
.zoom-hud{position:absolute;left:16px;top:16px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:10px 13px;border-radius:99px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16)}
.zoom-ctl{display:flex;align-items:center;gap:14px;padding:18px 26px 24px}
.zc-ico{width:24px;height:24px;color:var(--muted-d)}
.zc-val{font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d);min-width:46px;text-align:right}

/* ---------- 05 fuel ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);margin-top:clamp(44px,6vw,76px);align-items:stretch}
.stations-card{display:flex;flex-direction:column}
.stations{margin:0 28px 18px}
.st-fine{margin:auto 28px 28px;padding-top:16px;border-top:1px solid var(--line)}
.stations li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:17px 0;border-top:1px solid var(--line)}
.stations li:first-child{border-top:0}
.st-main b{display:block;font:500 18px/1.2 var(--f-body)}
.st-main small{display:block;font:300 14px/1.3 var(--f-body);color:var(--muted);margin-top:4px}
.st-meter{display:flex;gap:4px;align-items:flex-end;height:22px}
.st-meter i{width:7px;border-radius:3px;background:var(--raised);transition:background .4s}
.st-meter i:nth-child(1){height:9px}.st-meter i:nth-child(2){height:15px}.st-meter i:nth-child(3){height:22px}
li[data-level="0"] .st-meter i:nth-child(-n+1){background:var(--good)}
li[data-level="1"] .st-meter i:nth-child(-n+2){background:var(--warn)}
li[data-level="2"] .st-meter i:nth-child(-n+3){background:var(--alert)}
.st-state{display:grid;justify-items:end;gap:6px;min-width:112px}
.st-state small{font:500 13px/1 var(--f-mono);color:var(--muted)}
.stations .ev{grid-template-columns:1fr auto}
.st-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--ink);color:#fff}
.st-ico svg{width:22px;height:22px}
.status em{font-style:normal}

.scan-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:99px;background:var(--ink);color:#fff;font:500 14px/1 var(--f-body);transition:transform .35s var(--spring)}
.scan-btn svg{width:18px;height:18px}
.scan-btn:hover{transform:scale(1.06)}
.fill-card{display:flex;flex-direction:column;position:relative}
.fill-body{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:0 28px;margin-bottom:20px}
.fill-amt{display:flex;align-items:baseline;gap:10px;padding:14px 18px;border-radius:22px;background:var(--surface);border:2.5px solid transparent;transition:border-color .2s,background .2s;cursor:text}
.fill-amt:focus-within{border-color:var(--ink);background:#fff}
.fill-amt span{font:500 15px/1 var(--f-mono);color:var(--muted)}
.fill-amt input{width:100%;min-width:0;border:0;background:transparent;font:700 clamp(36px,4vw,52px)/1 var(--f-display);letter-spacing:-.045em;outline:0;-moz-appearance:textfield;appearance:textfield;font-variation-settings:"opsz" 96}
.fill-amt input::-webkit-outer-spin-button,.fill-amt input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fill-eq svg{width:26px;height:26px;color:var(--muted)}
.fill-out{text-align:left}
.fill-out b{display:block;font:700 clamp(36px,4vw,52px)/1 var(--f-display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 96}
.fill-out span{font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.grades{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 28px}
.grades button{display:grid;gap:5px;text-align:left;padding:13px 16px;border-radius:18px;border:2px solid var(--raised);transition:all .3s var(--spring)}
.grades b{font:500 16px/1 var(--f-body)}
.grades small{font:400 13px/1 var(--f-mono);color:var(--muted)}
.grades button:hover{border-color:var(--ink)}
.grades button[aria-checked=true]{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.grades button[aria-checked=true] small{color:#b9b9bf}
.fill-notes{display:grid;gap:10px;padding:22px 28px 0}
.fill-notes li{display:flex;align-items:center;gap:12px;font:300 15.5px/1.3 var(--f-body);color:var(--muted)}
.fill-notes svg{width:20px;height:20px;color:var(--ink);--eye-bg:#fff}
.fill-card .fine{padding:0 28px 28px}
.receipt{position:absolute;inset:0;z-index:5;background:rgba(255,255,255,.96);display:grid;align-content:center;justify-items:center;gap:12px;opacity:0;pointer-events:none;transition:opacity .3s}
.receipt span{display:block;width:56%;height:14px;border-radius:6px;background:var(--raised)}
.receipt span:nth-child(2){width:40%}.receipt span:nth-child(3){width:50%}
.scan-line{position:absolute;left:12%;right:12%;top:20%;height:4px;border-radius:4px;background:var(--ink);box-shadow:0 0 24px 6px rgba(10,10,10,.25)}
.fill-card.is-scanning .receipt{opacity:1}
.fill-card.is-scanning .scan-line{animation:scan 1.3s var(--ease) 1}
@keyframes scan{0%{top:20%}100%{top:78%}}
.notes-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);margin-top:clamp(28px,4vw,48px)}
.notes-row li{padding-top:18px;border-top:1px solid var(--line);font:300 17px/1.5 var(--f-body);color:var(--muted)}
.notes-row b{font-weight:500;color:var(--ink)}

/* ---------- 06 convoy ---------- */
.convoy-card{padding:0 0 12px}
.cv-head{display:flex;justify-content:space-between;align-items:flex-start;padding:28px 28px 0;margin-bottom:20px}
.invite{display:grid;gap:5px;justify-items:end}
.invite small{font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d)}
.invite b{font:500 17px/1 var(--f-mono);letter-spacing:.1em;padding:11px 15px;border-radius:14px;background:#fff;color:var(--ink)}
.cv-map{position:relative;aspect-ratio:560/300;margin:0 22px;border-radius:24px;overflow:hidden;background:#0d0d0f;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.1) 1px,transparent 0);background-size:22px 22px}
.cv-map svg{position:absolute;inset:0;width:100%;height:100%}
.cvm-base{fill:none;stroke:#2a2a2f;stroke-width:14;stroke-linecap:round}
.cvm-run{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 12;animation:dashrun 2.4s linear infinite;opacity:.7}
.dest{fill:#fff}
.fuel-pin rect{fill:#fff}
.fuel-pin use{color:var(--ink)}
.member{position:absolute;left:0;top:0;translate:-50% -50%;will-change:left,top;z-index:2}
.member i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);font:600 14px/1 var(--f-body);font-style:normal;box-shadow:0 0 0 3px #0d0d0f,0 0 0 5px rgba(255,255,255,.35)}
.member.me i{width:40px;height:40px;background:var(--ink);color:#fff;font-size:12px;box-shadow:0 0 0 3px #fff,0 0 0 8px rgba(255,255,255,.2);animation:meping 2.4s infinite}
@keyframes meping{70%{box-shadow:0 0 0 3px #fff,0 0 0 18px rgba(255,255,255,0)}100%{box-shadow:0 0 0 3px #fff,0 0 0 8px rgba(255,255,255,0)}}
.bubble{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 0;white-space:nowrap;padding:7px 11px;border-radius:12px;background:#fff;color:var(--ink);font:500 13px/1 var(--f-body);opacity:0;transform:translateY(6px) scale(.9);transition:all .4s var(--spring)}
.bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#fff}
.member.talk .bubble{opacity:1;transform:none}
.cv-list{margin:14px 28px 12px}
.cv-list li{display:grid;grid-template-columns:34px 1fr auto auto;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--line-d)}
.cv-list li:first-child{border-top:0}
.cv-list i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--ink);font:600 12.5px/1 var(--f-body);font-style:normal}
.cv-list li[data-l="3"] i{background:var(--ink);color:#fff;box-shadow:0 0 0 2px #fff}
.cv-list b{font:500 16px/1 var(--f-body)}
.cv-list span{font:300 14px/1 var(--f-body);color:var(--muted-d)}
.cv-list li.stop span{color:var(--warn-d)}
.cv-list em{font:500 15px/1 var(--f-body);font-style:normal;font-variant-numeric:tabular-nums;min-width:56px;text-align:right}

/* ---------- 07 trip ---------- */
.trip-card{padding:26px 28px 28px}
.trip-top{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.trip-gekk{width:100px;height:auto;animation:bob 4.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-2deg)}}
.trip-top h3{font-size:clamp(26px,2.8vw,34px)}
.trip-top small{font:300 14.5px/1.3 var(--f-body);color:var(--muted);display:block;margin-top:6px}
.trip-card .ring{position:relative;width:104px;height:104px;display:grid;place-items:center;align-content:center}
.trip-card .ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rg-bg{fill:none;stroke:var(--raised);stroke-width:9}
.rg-fg{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--d,0) 100;transition:stroke-dasharray 1.6s var(--ease) .2s}
.ring b{font:700 34px/1 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;position:relative}
.ring small{font:500 11px/1 var(--f-mono);color:var(--muted);position:relative;margin-top:3px}
.trip-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.trip-stats div{padding:14px 16px;border-radius:18px;background:var(--surface)}
.trip-stats span{display:block;font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.trip-stats b{font:500 20px/1 var(--f-body)}
.trip-stats small{display:block;font:300 12.5px/1.3 var(--f-body);color:var(--muted);margin-top:6px}
.smooth{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin-top:22px}
.smooth span{display:block;font:400 14px/1 var(--f-body);color:var(--muted);margin-bottom:9px}
.smooth i{display:block;height:9px;border-radius:99px;background:var(--raised);position:relative;overflow:hidden}
.smooth i::after{content:"";position:absolute;inset:0;width:0;border-radius:inherit;background:var(--ink);transition:width 1.2s var(--ease) .4s}
.in .smooth i::after{width:var(--v)}
.tip{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border-radius:18px;border:2px dashed var(--ink)}
.tip svg{width:26px;height:26px;color:var(--ink)}
.tip p{font:500 15.5px/1.3 var(--f-body)}
.trend{margin-top:22px}
.trend svg{width:100%;height:64px;margin-top:6px;overflow:visible}
.tr-area{fill:var(--surface)}
.tr-line{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.in .tr-line{animation:trdraw 1.8s var(--ease) .3s both}
@keyframes trdraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- glovebox ---------- */
.glove-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(44px,6vw,72px)}
.gcard{padding:28px 26px 30px;border-radius:30px;background:#fff;border:2px solid transparent;transition:transform .5s var(--spring),border-color .25s,box-shadow .4s}
.gcard:hover{transform:translateY(-6px) rotate(-.6deg);border-color:var(--ink);box-shadow:0 8px 0 0 var(--ink)}
.gi{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--surface);margin-bottom:24px;transition:background .3s,color .3s,transform .5s var(--spring)}
.gi svg{width:26px;height:26px}
.gcard:hover .gi{background:var(--ink);color:#fff;transform:rotate(-8deg) scale(1.06)}
.gcard h3{margin-bottom:10px;font-size:21px}
.gcard p{font:300 15.5px/1.5 var(--f-body);color:var(--muted)}

/* ---------- Gekk ---------- */
.gekk-sec{overflow:hidden}
.eyes-bg{position:absolute;inset:0;background:url("../gekk/pattern-eyes.ink.svg") 0 0/560px;opacity:.2;-webkit-mask-image:radial-gradient(38% 60% at 27% 52%,#000,transparent);mask-image:radial-gradient(38% 60% at 27% 52%,#000,transparent);pointer-events:none}
.gekk-sec .grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;position:relative}
.gekk-stage{display:grid;justify-items:center;gap:22px}
.gk-face{width:min(100%,540px);aspect-ratio:560/396}
.gk-face img{width:100%;height:100%;object-fit:contain;transform-origin:50% 90%}
.gk-face.pop img{animation:gkpop .6s var(--spring)}
@keyframes gkpop{0%{transform:scale(.86) rotate(-4deg)}100%{transform:none}}
.gk-label{text-align:center;min-height:68px}
.gk-label span{display:block;font:700 34px/1 var(--f-display);letter-spacing:-.04em}
.gk-label small{display:block;font:400 13.5px/1.4 var(--f-mono);color:var(--muted-d);margin-top:10px;letter-spacing:.02em}
.gk-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:500px}
.gk-picker button{width:46px;height:46px;border-radius:15px;background:var(--d1);border:1.5px solid var(--line-d);display:grid;place-items:center;transition:transform .35s var(--spring),border-color .2s,background .2s}
.gk-picker img{width:32px;height:auto}
.gk-picker button:hover{transform:translateY(-4px) scale(1.06)}
.gk-picker button[aria-pressed=true]{background:#262629;border-color:#fff;transform:translateY(-4px)}
.gekk-sec .copy{position:static}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.rules>div{padding:22px 22px 24px;border-radius:26px;border:1px solid var(--line-d);background:rgba(255,255,255,.03)}
.rules h3{font-size:19px;margin-bottom:14px}
.rules li{font:300 16px/1.4 var(--f-body);color:#cfcfd4;padding:7px 0 7px 26px;position:relative}
.rules>div:first-child li::before{content:"";position:absolute;left:2px;top:13px;width:13px;height:7px;border-left:2.5px solid var(--good-d);border-bottom:2.5px solid var(--good-d);rotate:-45deg}
.rules>div:last-child li::before,.rules>div:last-child li::after{content:"";position:absolute;left:0;top:19px;width:16px;height:2.5px;border-radius:2px;background:var(--alert-d);rotate:45deg}
.rules>div:last-child li::after{rotate:-45deg}
.gekk-sec .fine{color:var(--muted-d);margin-top:22px;font-size:13.5px}

/* ---------- privacy ---------- */
.privacy .grid{align-items:center}
.privacy h2{font-size:clamp(38px,4.8vw,68px)}
.promises li{display:grid;grid-template-columns:50px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line)}
.promises li:last-child{border-bottom:1px solid var(--line)}
.tick{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;transform:scale(0);transition:transform .7s var(--spring) .15s}
.tick svg{width:24px;height:24px}
.promises li.in .tick{transform:none}
.promises b{display:block;font:600 21px/1.2 var(--f-display);letter-spacing:-.025em;margin-bottom:6px}
.promises p{font:300 16.5px/1.5 var(--f-body);color:var(--muted)}

/* ---------- final cta ---------- */
.cta{overflow:hidden;padding-bottom:0}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end}
.cta h2{font-size:clamp(50px,7.4vw,112px);line-height:.88;letter-spacing:-.05em}
.cta .chip-soon{margin-bottom:28px}
.cta-gekk{position:relative;justify-self:end;width:min(100%,520px);margin-bottom:calc(var(--r) - 40px);transform-origin:50% 100%;isolation:isolate}
.cta-gekk::before{content:"";position:absolute;inset:-14% -14% 6%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.13),transparent);pointer-events:none}
.cta-gekk>img:first-child{width:100%;height:auto}
.cta-wm{position:absolute;left:39.6%;top:84.8%;width:46.8%;height:auto;translate:-50% -50%;pointer-events:none}
.cta-copy{padding-bottom:calc(var(--r) + 28px)}

/* ---------- footer ---------- */
.footer{background:var(--d1);color:#fff;margin-top:calc(var(--r) * -1);border-radius:var(--r) var(--r) 0 0;padding:calc(var(--r) + 40px) 0 44px;position:relative;z-index:2}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-top img{height:42px;width:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 6px}
.foot-links a{font:400 15px/1 var(--f-body);color:var(--muted-d);padding:10px 14px;border-radius:99px;transition:color .2s,background .2s}
.foot-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.legal{font:300 13px/1.6 var(--f-body);color:#7d7d84;max-width:880px;margin-top:30px}

/* ---------- reveal ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js .glove-grid [data-reveal]:nth-child(4n+2){transition-delay:.07s}
html.js .glove-grid [data-reveal]:nth-child(4n+3){transition-delay:.14s}
html.js .glove-grid [data-reveal]:nth-child(4n+4){transition-delay:.21s}
html.js .promises [data-reveal]:nth-child(2){transition-delay:.08s}
html.js .promises [data-reveal]:nth-child(3){transition-delay:.16s}
html.js .promises [data-reveal]:nth-child(4){transition-delay:.24s}

/* ---------- Gekk rig (inline svg built by main.js) ---------- */
.gekk-rig{overflow:visible}
.gekk-rig .pupil{transform-box:fill-box;transform-origin:50% 50%;transform:translate(calc(var(--lx,0)*1px),calc(var(--ly,0)*1px)) scaleY(var(--b,1));transition:transform .14s ease-out}
.gekk-rig .eye.r .pupil{transform:translate(calc(var(--lx,0)*1px),calc(var(--ly,0)*1px)) scaleY(var(--br,var(--b,1)))}
.gekk-rig .wm-pupil{transform:translate(calc(var(--wx,0)*1px),calc(var(--wy,0)*1px));transition:transform .18s ease-out}
.gekk-rig .body{transition:transform .8s var(--spring)}
.gekk-rig .mouth{transform-box:fill-box;transform-origin:50% 0;transition:transform .35s var(--spring)}
.gekk-rig .letter{transform-box:fill-box;transform-origin:50% 100%}

/* ---------- launch curtain ---------- */
.intro{position:fixed;inset:0;z-index:300;background:#fff;display:none;place-items:center;border-radius:0 0 var(--r) var(--r);transition:transform 1s var(--ease)}
html.has-intro .intro{display:grid}
.intro.out{transform:translateY(-104%)}
.intro-stage{width:min(72vw,380px)}
.intro-stage .gekk-rig{width:100%;height:auto}
.intro .plaque-g{transition:transform .8s var(--spring),opacity .4s}
.intro-skip{position:absolute;bottom:34px;left:0;right:0;text-align:center;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#9a9aa0;animation:skipfade .6s 1.2s both}
@keyframes skipfade{from{opacity:0}to{opacity:1}}
html:not(.has-intro) .intro{display:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .glove-grid{grid-template-columns:repeat(2,1fr)}
  .mini-feats{grid-template-columns:repeat(2,1fr)}
  .nav-links a{padding:11px 10px}
}
@media (max-width:940px){
  .nav-links{display:none}
  .grid,.grid.flip,.gekk-sec .grid,.cta-grid,.hero-grid{grid-template-columns:minmax(0,1fr)}
  .grid.flip .copy{order:0}
  .copy{position:static}
  .hero{padding-top:112px}
  .hero-h1{font-size:clamp(56px,16.5vw,120px)}
  .stage{justify-self:center;margin-top:12px;width:min(100%,520px)}
  .scroll-cue{display:none}
  .bento{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .notes-row{grid-template-columns:1fr}
  .cta-gekk{justify-self:center;margin-top:12px}
  .gekk-stage{order:-1}
}
@media (max-width:620px){
  body{font-size:17px}
  .nav-pill{padding-left:16px}
  .brand img{height:28px}
  .btn-sm{padding:11px 15px;font-size:14px}
  .glove-grid{grid-template-columns:1fr}
  .mini-feats{grid-template-columns:1fr}
  .rs-grid{grid-template-columns:repeat(2,1fr)}
  .card-head{padding:22px 22px 0}
  .stations,.fill-body,.grades,.fill-notes,.gates,.seg,.toll-sum,.cv-list{margin-left:20px;margin-right:20px}
  .fill-body,.grades,.fill-notes{padding-left:0;padding-right:0;margin-left:22px;margin-right:22px}
  .fill-card .fine,.toll-card .fine,.curve-card .fine{padding-left:22px;padding-right:22px}
  .range-wrap{padding-inline:22px}
  .curve{width:calc(100% - 44px);margin-inline:22px}
  .route-sum{padding:20px 22px 24px}
  .seg button{font-size:12.5px;padding:12px 3px}
  .gate{gap:12px}
  .gate-info b{font-size:16px}
  .toll-sum{grid-template-columns:repeat(3,1fr)}
  .toll-sum b{font-size:17px}
  .trip-top{grid-template-columns:auto 1fr}
  .trip-top .ring{grid-column:1/-1;justify-self:start}
  .trip-gekk{width:84px}
  .smooth{grid-template-columns:1fr}
  .st-meter{display:none}
  .st-state{min-width:98px}
  .rules{grid-template-columns:1fr}
  .chip{padding:10px 14px 10px 10px;border-radius:18px}
  .chip-txt b{font-size:14.5px}
  .sign{width:44px;height:44px;border-width:4px}
  .sign b{font-size:16px}
  .chip small{display:none}
  .chip-soon{font-size:11px;letter-spacing:.06em;padding:10px 13px 10px 12px;gap:8px}
  .chip-toll{top:13%}
  .join-field input[type=email]{padding:0 14px;font-size:16px}
  .join-field .btn{padding:14px 16px}
  .cv-list li{grid-template-columns:32px 1fr auto;}
  .cv-list li span{display:none}
  .gk-picker button{width:40px;height:40px;border-radius:13px}
  .gk-picker img{width:28px}
  .member i{width:26px;height:26px;font-size:11px}
  .member.me i{width:30px;height:30px;font-size:10px}
  .bubble{font-size:12px;padding:6px 9px}
  .speed-sign .ring{width:128px;height:128px;border-width:12px}
  .buffer-pill{right:-24px}
  .bp-b{font-size:12.5px}
}

/* ---------- reduced motion ---------- */
@media (max-width:360px){
  .chip-soon{font-size:10px;letter-spacing:.03em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  html.js [data-reveal],html.js [data-hero-in],html.js .lockup,html.js .chip{opacity:1!important;transform:none!important}
  html.js .hero-h1 .w>span{transform:none!important}
  .price-tag{transform:rotate(-7deg)!important}
  .marquee-track{animation:none}
  .intro{display:none!important}
}