/* Car Jam: Downtown — night-city landing page. Single dark look on purpose: it matches the game. */
:root{
  --night:#0B1020; --night2:#141C38; --asphalt:#2B2E36; --asphalt2:#23262D; --glass:rgba(24,33,64,.66); --border:rgba(170,190,255,.18);
  --text:#EEF1FB; --muted:#A6B0D4; --soft:#C7CEEA; --gold:#FFC93C; --gold-l:#FFE48A; --gold-d:#E0A21C; --ink:#1C1404;
  --green:#4FD8A4; --red:#FF6B6B; --sign:#0E7A3E; --sign-d:#075A2C; --blue:#2E66F0;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--night);color:var(--text);font:600 17px/1.6 Figtree,system-ui,-apple-system,sans-serif;overflow-x:hidden;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
img,video{max-width:100%}
a{color:var(--gold)}a:hover{color:var(--gold-l)}
h1,h2,h3{font-weight:900;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin:0}
h2{font-size:clamp(30px,4.6vw,46px);text-align:center}
.sub{color:var(--muted);text-align:center;max-width:620px;margin:12px auto 0}
.eyebrow{font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
section{max-width:1120px;margin:0 auto;padding:72px 20px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;
  padding-top:calc(12px + env(safe-area-inset-top,0px));background:rgba(11,16,32,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:900;font-size:21px}
.brand img{border-radius:10px}
.links{display:flex;gap:26px}.links a{color:var(--soft);text-decoration:none;font-weight:700;font-size:15px}.links a:hover{color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:800 17px Figtree,sans-serif;color:var(--ink);cursor:pointer;border:0;
  background:linear-gradient(var(--gold-l),var(--gold) 60%,var(--gold-d));box-shadow:inset 0 1px 0 #FFF6DC,0 0 26px rgba(255,201,60,.35),0 5px 0 #9A6A0E;
  border-radius:16px;padding:14px 24px;transition:transform .12s,filter .12s}
.btn:hover{color:var(--ink);filter:brightness(1.06)}.btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #FFF6DC,0 2px 0 #9A6A0E}
.btn-small{padding:9px 16px;font-size:15px;border-radius:12px;box-shadow:inset 0 1px 0 #FFF6DC,0 3px 0 #9A6A0E}
.btn-ghost{background:var(--glass);color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn-ghost:hover{color:var(--text);border-color:rgba(255,201,60,.5)}
.store{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 16px;border-radius:14px;background:#000;color:#fff;text-decoration:none;border:1px solid #3A3F55}
.store svg{width:28px;height:28px;fill:#fff}
.store span{display:flex;flex-direction:column;line-height:1.1;font-weight:800;font-size:20px}
.store small{font-size:10px;letter-spacing:.08em;font-weight:700;color:#C9CDDA}
.store.soon{opacity:.92;cursor:default}

/* road sign logo (mirrors the in-game sign) */
.sign{display:inline-block;background:linear-gradient(180deg,#12904A,var(--sign) 55%,var(--sign-d));border:5px solid #E9F5EC;border-radius:18px;padding:12px 30px 10px;
  box-shadow:0 0 0 5px #0A4F27,0 18px 40px rgba(0,0,0,.45);text-align:center;transform:rotate(-2deg)}
.sign b{display:block;font-weight:900;font-size:clamp(40px,6vw,64px);letter-spacing:.04em;line-height:1;color:#fff}
.sign i{display:block;font-style:normal;font-weight:800;font-size:clamp(11px,1.4vw,15px);letter-spacing:.6em;margin-top:6px;padding-left:.6em;color:#fff}
.sign.small b{font-size:40px}.sign.small i{font-size:11px}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;max-width:1180px;padding-top:56px;padding-bottom:40px}
.city{position:absolute;inset:-80px -50vw 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 70% 30%,rgba(46,102,240,.22),transparent 70%),
    radial-gradient(40% 40% at 20% 10%,rgba(255,201,60,.10),transparent 70%),
    linear-gradient(180deg,#121A36 0%,var(--night) 75%)}
.city::after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;opacity:.55;
  background:
    repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,214,120,.16) 6px 9px,transparent 9px 14px) bottom/100% 100%,
    linear-gradient(transparent,transparent);
  -webkit-mask:linear-gradient(transparent,#000 40%,#000 70%,transparent);mask:linear-gradient(transparent,#000 40%,#000 70%,transparent)}
.hero h1{font-size:clamp(44px,7vw,82px);margin:30px 0 16px}
.hero h1 span{color:var(--gold);text-shadow:0 0 40px rgba(255,201,60,.35)}
.lead{color:var(--soft);font-size:19px;max-width:560px;margin:0 0 28px}
.stores{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:26px 0 0}
.chips li{padding:6px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--border);font-size:14px;font-weight:800;color:var(--soft)}
.hero-phone{position:relative;justify-self:center;width:100%;max-width:330px}
.phone{position:relative;aspect-ratio:9/19.5;border-radius:40px;padding:10px;background:linear-gradient(160deg,#2A3152,#0E1226);
  box-shadow:0 0 0 2px #3A4370,0 40px 90px -20px rgba(0,0,0,.8),0 0 80px rgba(46,102,240,.18)}
.phone video,.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:31px;background:#000}
.phone.sm{max-width:250px;margin:0 auto;border-radius:32px;padding:8px}.phone.sm video{border-radius:25px}
.badge-float{position:absolute;width:62px;height:62px;border-radius:50%;background:#1B2033;border:4px solid #fff;display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.5);animation:bob 5s ease-in-out infinite}
.badge-float svg{width:30px;height:30px;fill:#fff}
.b1{left:-34px;top:16%}.b2{right:-30px;top:44%;animation-delay:-1.6s}.b3{left:-20px;bottom:12%;animation-delay:-3.2s;width:52px;height:52px}
@keyframes bob{50%{transform:translateY(-12px) rotate(4deg)}}

/* lane divider */
.lane{height:6px;max-width:1120px;margin:0 auto;background:repeating-linear-gradient(90deg,var(--gold) 0 46px,transparent 46px 86px);opacity:.55;border-radius:3px}

/* how */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.step{position:relative;background:var(--glass);border:1px solid var(--border);border-radius:26px;padding:30px 26px 26px}
.step .num{position:absolute;top:-16px;left:24px;width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:900;display:grid;place-items:center;box-shadow:0 4px 0 #9A6A0E}
.step h3{font-size:23px;margin:18px 0 8px}.step p{margin:0;color:var(--soft)}
.ico{width:64px;height:64px;border-radius:50%;background:#1B2033;border:4px solid #fff;display:grid;place-items:center}
.ico svg{width:30px;height:30px;fill:#fff;stroke:#fff;stroke-width:0}
.step:nth-child(3) .ico svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.path{border-radius:16px;border:0;background:transparent;display:flex;gap:6px}
.ico.path span{width:14px;height:14px;border-radius:3px;background:var(--green);box-shadow:0 0 12px rgba(79,216,164,.6)}
.ico.path span:nth-child(3){background:var(--red);box-shadow:0 0 12px rgba(255,107,107,.6)}
b.g{color:var(--green)}b.r{color:var(--red)}

/* try it */
.try{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.try h2{text-align:left;margin:10px 0 14px}
.try-copy p{color:var(--soft);margin:0}
.hud{display:flex;gap:12px;margin:26px 0 18px;flex-wrap:wrap}
.hud div{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:10px 16px;min-width:96px}
.hud small{display:block;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hud b{font-size:26px;font-weight:900}.hud span{color:var(--muted);font-weight:800;margin-left:4px}
.lotwrap{position:relative;justify-self:center;width:100%;max-width:460px}
.road{--cell:84px;position:relative;padding:calc(var(--cell)*.62);background:var(--asphalt2);border-radius:28px;overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.04),0 30px 70px -25px rgba(0,0,0,.8);display:flex;justify-content:center}
.road::before{content:"";position:absolute;inset:calc(var(--cell)*.3);border:3px dashed rgba(255,201,60,.55);border-radius:14px;pointer-events:none}
.lot{position:relative;background:var(--asphalt);border-radius:8px;box-shadow:0 0 0 3px rgba(255,255,255,.85);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.bay{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:rgba(255,255,255,.7)}
.pathcell{position:absolute;border-radius:6px;pointer-events:none;transform:scale(.42);transition:opacity .15s}
.pathcell.ok{background:var(--green);box-shadow:0 0 14px rgba(79,216,164,.8)}
.pathcell.bad{background:var(--red);box-shadow:0 0 14px rgba(255,107,107,.8)}
.car{position:absolute;padding:7px;margin:0;border:0;background:none;font:inherit;color:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;transition:transform .7s cubic-bezier(.55,0,.8,.2);will-change:transform;-webkit-tap-highlight-color:transparent}
.car span{display:block}
.car .body{position:relative;width:100%;height:100%;border-radius:14px;background:var(--c);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.22),inset 0 3px 0 rgba(255,255,255,.35),0 8px 14px rgba(0,0,0,.45)}
.car .roof{position:absolute;inset:22% 16%;border-radius:9px;background:linear-gradient(rgba(255,255,255,.22),rgba(0,0,0,.12)),var(--c);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.car .glass{position:absolute;background:rgba(15,20,35,.75);border-radius:4px}
.car.N .glass{left:18%;right:18%;top:12%;height:9%}.car.S .glass{left:18%;right:18%;bottom:12%;height:9%}
.car.E .glass{top:18%;bottom:18%;right:12%;width:9%}.car.W .glass{top:18%;bottom:18%;left:12%;width:9%}
.car .badge{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#1B2033;border:3px solid #fff;display:grid;place-items:center}
.car .badge svg{width:18px;height:18px;fill:#fff}
.car.E .badge svg{transform:rotate(90deg)}.car.S .badge svg{transform:rotate(180deg)}.car.W .badge svg{transform:rotate(-90deg)}
.car:hover .body{filter:brightness(1.08)}
.car:focus-visible{outline:3px solid var(--gold);outline-offset:-2px;border-radius:14px}
.car.held .body{outline:3px solid var(--gold);outline-offset:2px}
.car.bump{transition:transform .14s ease-out}
.car.shake{animation:shake .32s}
@keyframes shake{25%{transform:translateX(-4px) rotate(-2deg)}75%{transform:translateX(4px) rotate(2deg)}}
.tip{text-align:center;color:var(--muted);font-size:15px;margin:14px 0 0;min-height:24px}
.win{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;background:rgba(11,16,32,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:28px;padding:20px;animation:fade .3s}
.win h3{font-size:34px}.win p{margin:0 0 10px;color:var(--soft)}
.stars{display:flex;gap:6px;font-size:44px;line-height:1}.stars .on{color:var(--gold);text-shadow:0 0 18px rgba(255,201,60,.6)}.stars .off{color:#3A4160}
.stars span{display:inline-block;animation:pop .45s cubic-bezier(.2,1.6,.4,1) backwards}.stars span:nth-child(2){animation-delay:.12s;font-size:56px}.stars span:nth-child(3){animation-delay:.24s}
@keyframes pop{from{transform:scale(0)}}@keyframes fade{from{opacity:0}}

/* twists */
.twist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.twist{background:var(--glass);border:1px solid var(--border);border-radius:24px;padding:24px}
.twist h3{font-size:21px;margin:14px 0 6px}.twist p{margin:0;color:var(--soft);font-size:16px}
.lotno{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:3px 10px;border-radius:999px;float:right}
.t-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:20px;color:#fff}
.t-ico.bus{background:linear-gradient(90deg,#E8473A 0 30%,#C9372C 30% 34%,#E8473A 34% 64%,#C9372C 64% 68%,#E8473A 68%);border-radius:12px;width:86px;height:40px;margin:7px 0}
.t-ico.cone{background:linear-gradient(#FF8A1F 0 30%,#fff 30% 45%,#FF8A1F 45% 70%,#fff 70% 85%,#FF8A1F 85%);clip-path:polygon(50% 0,82% 100%,18% 100%)}
.t-ico.hard{background:#3A1E2A;border:2px solid var(--red);color:var(--red)}
.t-ico.lock{background:#1B2033;border:3px solid #fff;border-radius:50%;position:relative}
.t-ico.lock::before{content:"";width:20px;height:15px;border-radius:3px;background:var(--gold);margin-top:8px}
.t-ico.lock::after{content:"";position:absolute;top:10px;width:12px;height:12px;border:3px solid var(--gold);border-bottom:0;border-radius:8px 8px 0 0}
.t-ico.zz{background:#1B2033;border:3px solid #fff;border-radius:50%;font-size:17px;color:#9FB8FF}
.t-ico.gate{background:repeating-linear-gradient(135deg,var(--red) 0 10px,#fff 10px 20px);color:#fff;text-shadow:0 1px 3px #000;font-size:22px;border-radius:10px}
.clips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;max-width:640px;margin:48px auto 0}
.clips figure{margin:0;text-align:center}.clips figcaption{color:var(--muted);font-size:15px;margin-top:14px}

/* districts */
.skyline{display:flex;align-items:flex-end;gap:6px;height:150px;max-width:860px;margin:40px auto 0}
.skyline i{flex:1;border-radius:6px 6px 0 0;background:#262E4E;transition:background .4s,box-shadow .4s;position:relative}
.skyline i.lit{background:linear-gradient(var(--gold-l),var(--gold) 55%,var(--gold-d));box-shadow:0 0 22px rgba(255,201,60,.45)}
.district-list{list-style:none;padding:0;margin:0 auto;max-width:860px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;border-top:3px solid rgba(255,255,255,.8);padding-top:16px}
.district-list li{display:flex;flex-direction:column;gap:2px}
.district-list b{font-size:19px}.district-list span{color:var(--gold);font-weight:800;font-size:14px}.district-list small{color:var(--muted);font-size:14px}

/* screens */
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px 4px 20px;margin-top:6px;scrollbar-width:thin}
.rail figure{flex:0 0 min(260px,70vw);margin:0;scroll-snap-align:center}
.rail img{display:block;width:100%;height:auto;border-radius:24px;border:1px solid var(--border);box-shadow:0 24px 50px -24px #000}

/* promises */
.promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.p-card{border-radius:24px;padding:26px;background:linear-gradient(160deg,rgba(46,102,240,.18),rgba(24,33,64,.6));border:1px solid var(--border)}
.p-card h3{font-size:22px;margin-bottom:8px}.p-card p{margin:0;color:var(--soft)}

/* faq */
.faq{max-width:780px}
.faq h2{margin-bottom:28px}
details{background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:4px 22px;margin:10px 0}
summary{cursor:pointer;font-weight:800;font-size:18px;padding:14px 0;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--gold);font-weight:900}
details[open] summary::after{content:"–"}
details p{margin:0 0 16px;color:var(--soft)}

/* final + footer */
.final{text-align:center;display:grid;justify-items:center;gap:26px;padding-bottom:90px}
.final h2{max-width:640px}
.foot{border-top:1px solid var(--border);padding:30px 20px calc(36px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;color:var(--muted);font-size:15px}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--text)}.foot-brand img{border-radius:8px}
.foot nav{display:flex;flex-wrap:wrap;gap:20px}.foot p{margin:0;width:100%}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* responsive */
@media (max-width:900px){
  .hero,.try{grid-template-columns:1fr;gap:36px}
  .hero{text-align:center;padding-top:36px}.lead{margin-left:auto;margin-right:auto}.stores,.chips{justify-content:center}
  .try h2{text-align:center}.try-copy{text-align:center}.hud,.try-actions{justify-content:center;display:flex}
  .steps,.promise{grid-template-columns:1fr}.twist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .district-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .links{display:none}
}
@media (max-width:560px){
  section{padding:56px 16px}
  .twist-grid,.clips{grid-template-columns:1fr}
  .district-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .road{--cell:64px}
  .badge-float{display:none}
  .nav{padding-left:16px;padding-right:16px}
}
@media (max-width:380px){.road{--cell:56px}}

/* legal pages */
.legal{max-width:760px;padding-top:40px}
.legal h1{font-size:clamp(34px,5vw,46px);margin-bottom:6px}.legal h2{font-size:24px;text-align:left;margin:34px 0 8px}
.legal p{color:var(--soft)}.legal .updated{color:var(--muted);margin-top:0}
.card{background:var(--glass);border:1px solid var(--border);border-radius:20px;padding:20px 22px;margin:20px 0}
.muted{color:var(--muted)}

[hidden]{display:none!important}