/* Vendored display face, same files the app serves (car-game/web/assets/fonts).
   Self-hosted rather than a Google Fonts link: the promo site does not need it, but
   keeping the two in step means the site shows the product's real letterforms, and
   ui-rounded would have rendered this page in Roboto for most visitors anyway.
   SIL OFL 1.1 — licence shipped alongside at assets/fonts/OFL.txt. See A15. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-017F;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-017F;}
/*
  car-game-site shared stylesheet.
  Tokens sourced directly from car-game/tools/asset-pipeline/style.json and the
  confirmed mockup car-game/prototypes/autospel-glass-v3.html — do not invent new colors.
*/

:root{
  --m1:#123A4A; --m2:#241663; --m3:#4A1550; --m4:#0FA79C; --m5:#1B2E7A;
  --acc-a:#5EF2C9; --acc-b:#7B8CFF; --acc-c:#FF6FD8; --punch:#FFCB57;
  --danger:#FF6B84;
  /* OBJECT tier from the second design review (A12), so the promo CTA matches the app's */
  --object-face:#F7F4EA; --object-plinth:#35D5B0;
  --text:#F4F1FF; --muted:rgba(244,241,255,.68);
  --text-on-light:#0C0A1A;
  --glass:rgba(255,255,255,.10); --glass2:rgba(255,255,255,.16);
  --brd:rgba(255,255,255,.22); --hi:rgba(255,255,255,.55);
  --shadow:0 22px 44px rgba(0,0,0,.34); --shadow-sm:0 10px 22px rgba(0,0,0,.30);
  --disp: "Plus Jakarta Sans",system-ui,sans-serif;
  --spring:cubic-bezier(.2,1.5,.35,1);
  --maxw:980px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
html,body{margin:0;min-height:100%;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:#05040a;
  color:var(--text);
  position:relative;
  overflow-x:hidden;
  line-height:1.5;
}
.disp{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;}

/* ===== living mesh background ===== */
.mesh{position:fixed;inset:-25%;z-index:0;pointer-events:none;filter:blur(60px) saturate(135%);}
.mesh b{position:absolute;width:55%;height:50%;border-radius:50%;opacity:.85;}
.mesh .a{background:var(--m1);top:-6%;left:-8%;animation:m1 18s ease-in-out infinite;}
.mesh .b{background:var(--m2);top:6%;right:-12%;animation:m2 21s ease-in-out infinite;}
.mesh .c{background:var(--m3);bottom:-10%;left:-4%;animation:m1 24s ease-in-out infinite reverse;}
.mesh .d{background:var(--m4);bottom:4%;right:-8%;animation:m2 20s ease-in-out infinite reverse;}
.mesh .e{background:var(--m5);top:38%;left:28%;width:40%;height:40%;animation:m1 27s ease-in-out infinite;}
@keyframes m1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(8%,-7%) scale(1.15);}}
@keyframes m2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-7%,6%) scale(1.1);}}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,transparent 40%,rgba(0,0,0,.4) 100%);
}

/* ===== layout ===== */
/* The mesh and its blobs are deliberately wider than the viewport, which on a phone made
   every page scroll sideways — the worst small-screen defect there is, and invisible unless
   you actually test at 390px. Clip at the root rather than shrinking the mesh: the width is
   what makes the gradient read as atmosphere instead of a stripe. */
html,body{max-width:100%;overflow-x:hidden;}
.mesh{pointer-events:none;}

.wrap{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ===== glass ===== */
.glass{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--brd);border-radius:22px;box-shadow:var(--shadow);position:relative;
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,var(--hi),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;
}

/* ===== icons ===== */
svg{display:block;}
.i{width:1em;height:1em;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ===== header / nav ===== */
header.hdr{position:sticky;top:0;z-index:20;backdrop-filter:blur(18px) saturate(140%);background:rgba(5,4,10,.42);border-bottom:1px solid var(--brd);}
.hdr-in{display:flex;align-items:center;gap:14px;padding:14px 20px;max-width:var(--maxw);margin:0 auto;}
.brand{display:flex;align-items:center;gap:9px;font-size:19px;text-decoration:none;color:var(--text);}
.brand .i{width:26px;height:26px;color:var(--acc-a);}
.brand .d{background:linear-gradient(90deg,var(--acc-a),var(--acc-c));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hdr nav{display:flex;gap:4px;margin-left:auto;}
.hdr nav a{
  font-size:13.5px;font-weight:700;color:var(--muted);text-decoration:none;
  padding:9px 14px;border-radius:999px;transition:background .2s,color .2s;
}
.hdr nav a:hover,.hdr nav a[aria-current="page"]{color:var(--text-on-light);background:linear-gradient(120deg,var(--acc-a),var(--acc-b));}

/* ===== hero ===== */
.hero{padding:56px 0 40px;position:relative;}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  background:var(--glass);border:1px solid var(--brd);padding:7px 14px;border-radius:999px;
  backdrop-filter:blur(12px);margin-bottom:20px;
}
.eyebrow .i{width:13px;height:13px;color:var(--punch);}
.hero h1{font-size:clamp(32px,6vw,54px);line-height:1.06;margin:0 0 18px;max-width:16ch;}
.hero p.lead{font-size:clamp(16px,2.2vw,19px);color:var(--muted);max-width:56ch;margin:0 0 30px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* ===== CTA buttons ===== */
.cta{
  position:relative;border:none;cursor:pointer;color:var(--text-on-light);font-size:15.5px;
  font-family:var(--disp);font-weight:800;padding:15px 24px;border-radius:18px;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  background:linear-gradient(110deg,var(--acc-a),var(--acc-b),var(--acc-c),var(--acc-b),var(--acc-a));
  background-size:260% 100%;background-position:0% 50%;
  box-shadow:0 10px 26px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.5);
  animation:hue 9s ease-in-out infinite alternate;
}
@keyframes hue{to{background-position:100% 50%;}}
.cta .i{width:19px;height:19px;stroke-width:2.2;}
.cta::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:shim 3.6s ease-in-out infinite;
}
@keyframes shim{0%,60%{left:-60%;}100%{left:130%;}}
.cta:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.cta.soft{
  background:var(--glass2);color:var(--text);border:1px solid var(--brd);
  backdrop-filter:blur(16px);animation:none;box-shadow:var(--shadow-sm);
}
.cta.soft::after{display:none;}
.cta:hover{filter:brightness(1.04);}

/* ===== sections ===== */
section{padding:52px 0;position:relative;}
.sect-head{max-width:60ch;margin:0 0 32px;}
.kick{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--acc-a);display:block;margin-bottom:8px;}
h2{font-size:clamp(24px,4vw,32px);margin:0 0 12px;}
.sect-head p{color:var(--muted);font-size:15.5px;margin:0;}

/* ===== cards / grid ===== */
.grid{display:grid;gap:18px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:800px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr;}}

.card{padding:24px;}
.card .ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(150deg,var(--acc-a),var(--acc-c));color:var(--text-on-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 16px rgba(0,0,0,.3);
}
.card .ic .i{width:24px;height:24px;stroke-width:2;}
.card h3{font-size:17px;margin:0 0 8px;}
.card p{font-size:14px;color:var(--muted);margin:0;}

/* step list */
.steps{counter-reset:step;display:flex;flex-direction:column;gap:16px;}
.step{display:flex;gap:16px;padding:20px;align-items:flex-start;}
.step .num{
  counter-increment:step;flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:15px;
  background:linear-gradient(150deg,var(--acc-a),var(--acc-b));color:var(--text-on-light);
}
.step .num::before{content:counter(step);}
.step .body h3{margin:2px 0 6px;font-size:16px;}
.step .body p{margin:0;color:var(--muted);font-size:14px;}
.step .tag{
  display:inline-block;margin-top:10px;font-size:10.5px;font-weight:800;letter-spacing:.03em;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--brd);color:var(--muted);
}
.step .tag.planned{background:rgba(255,203,87,.16);border-color:rgba(255,203,87,.4);color:#FFD98A;}

/* ===== faq / troubleshooting accordion-ish blocks ===== */
.issue{padding:22px 24px;margin-bottom:16px;}
.issue h3{display:flex;align-items:center;gap:10px;font-size:16.5px;margin:0 0 10px;}
.issue h3 .i{width:20px;height:20px;color:var(--punch);flex:0 0 auto;}
.issue p, .issue li{color:var(--muted);font-size:14.5px;}
.issue ol,.issue ul{margin:8px 0 0;padding-left:20px;}
.issue li{margin-bottom:6px;}
.badge-status{
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:middle;
  background:rgba(94,242,201,.16);border:1px solid rgba(94,242,201,.4);color:var(--acc-a);
}
.badge-status.planned{background:rgba(255,203,87,.16);border-color:rgba(255,203,87,.4);color:#FFD98A;}

/* ===== preview image frame ===== */
.preview-frame{
  position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--brd);box-shadow:var(--shadow);
  background:linear-gradient(160deg,var(--m2),var(--m3));
}
.preview-frame img{display:block;width:100%;height:auto;}
.preview-label{
  position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:800;letter-spacing:.03em;
  padding:6px 12px;border-radius:999px;background:rgba(5,4,10,.55);border:1px solid var(--brd);
  color:var(--text);backdrop-filter:blur(8px);
}

.hero-media{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;}
/* Ratios live here, NOT in an inline style. A style attribute outranks a media query, so an
   inline grid-template-columns silently defeated the mobile collapse below: on a phone the
   page stayed two-column, the illustration kept ~40% of the width, and headings broke one
   word per line next to an empty gutter. Same class of bug as [hidden] losing to an author
   display rule — specificity beating the rule that was supposed to win. */
.hero-media.split-40{grid-template-columns:1fr 1.5fr;}
.hero-media.split-45{grid-template-columns:1fr 1.3fr;}
@media (max-width:800px){
  .hero-media,.hero-media.split-40,.hero-media.split-45{grid-template-columns:1fr;}
  /* The decorative illustration is atmosphere, not content: below the split it costs a
     screenful of scrolling before the reader reaches the thing they came for. */
  .hero-media .hero-art{display:none;}
}
.hero-media .preview-frame{max-width:340px;margin:0 auto;}

/* ===== callout ===== */
.callout{padding:22px 24px;display:flex;gap:14px;align-items:flex-start;border-left:3px solid var(--acc-a);}
.callout .i{width:22px;height:22px;color:var(--acc-a);flex:0 0 auto;margin-top:2px;}
.callout p{margin:0;color:var(--muted);font-size:14.5px;}
.callout.warn{border-left-color:var(--punch);}
.callout.warn .i{color:var(--punch);}

/* ===== footer ===== */
footer{padding:40px 0 60px;border-top:1px solid var(--brd);margin-top:40px;}
footer .foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center;}
footer p{color:var(--muted);font-size:13px;margin:0;}
footer a{color:var(--muted);text-decoration:none;}
footer a:hover{color:var(--text);}

/* ===== hero illustration ===== */
.hero-art{border-radius:28px;overflow:hidden;border:1px solid var(--brd);box-shadow:var(--shadow);}
.hero-art img{display:block;width:100%;height:auto;}

/* utility */
.center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}

/* Status badges sit beside a heading on wide screens and must drop below it on narrow ones,
   or they steal the width the heading needs and it breaks a word per line. */
@media (max-width:560px){
  .issue h3{flex-wrap:wrap;}
  .issue h3 .badge,.issue .badge{flex:0 0 auto;}
  .issue{padding:18px 16px;}
}

/* At 390px the brand plus three nav items do not fit, and the last one was simply cut off at
   the right edge — a navigation item you cannot see or reach. Shrink the brand to its mark and
   let the nav have the row. */
@media (max-width:560px){
  .hdr-in{gap:8px;padding:10px 12px;}
  .brand span.d{display:none;}
  .hdr nav{gap:2px;}
  .hdr nav a{padding:7px 9px;font-size:13px;}
}