/* ==========================================================================
   Pocket Garage — playpocketgarage.com
   Five tinted bays, one neon, one sodium. No build step, no libraries.
   ========================================================================== */

:root{
  --g-hero:#0A0D12;
  --g-fleet:#0A1017;
  --g-paint:#13100B;
  --g-ar:#07141A;
  --g-pro:#0D0B11;
  --g-foot:#06080B;

  --panel:#151B23;
  --panel-2:#1D2530;
  --sunk:#0D1218;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.17);

  --neon:#3ADCFF;
  --neon-deep:#0C6E8C;
  --sodium:#FFB43C;
  --rose:#FF5FA2;

  --text:#F3F7FB;
  --muted:#93A4B8;
  --faint:#617082;

  --display:"Orbitron","Arial Narrow",system-ui,sans-serif;
  --ui:"Rajdhani","Helvetica Neue",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1140px;
  --pad:clamp(20px,5vw,44px);
}

*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--g-hero);color:var(--text);
  font-family:var(--ui);font-size:17px;line-height:1.6;font-weight:500;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--neon);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.bay{padding-block:clamp(70px,10vw,124px);position:relative;overflow:hidden}
.bay-fleet{background:var(--g-fleet)}
.bay-paint{background:var(--g-paint)}
.bay-ar{background:var(--g-ar)}
.bay-pro{background:var(--g-pro)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--neon);color:#00131A;padding:10px 16px;border-radius:8px}

/* ---------------- type ---------------- */
h1,h2,h3{font-family:var(--display);font-weight:900;margin:0;letter-spacing:-.015em;line-height:1.05;text-wrap:balance;hyphens:none}
h2{font-size:clamp(26px,4.8vw,42px)}
h3{font-size:clamp(17px,2.2vw,20px);font-weight:800;letter-spacing:0}
p{margin:0}
.kicker{font-family:var(--mono);font-size:clamp(9.5px,1.9vw,11px);font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--neon);margin:0 0 13px}
.kicker.warm{color:var(--sodium)}
.kicker.rose{color:var(--rose)}
.lede{color:var(--muted);font-size:clamp(16px,2vw,18.5px);max-width:48ch;margin-top:16px}
.head{max-width:58ch;margin-bottom:clamp(30px,5vw,52px)}

/* ---------------- nav ---------------- */
.top{position:sticky;top:0;z-index:60;background:rgba(10,13,18,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:60px}
.top .mark{display:flex;align-items:center;gap:9px}
.top .mark img{width:29px;height:auto}
.top .mark span{font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.09em;color:var(--text)}
.top nav{margin-left:auto;display:flex;gap:clamp(12px,2.6vw,26px)}
.top nav a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.top nav a:hover{color:var(--text);text-decoration:none}
@media (max-width:520px){.top nav a.opt{display:none}}
#prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--neon),var(--sodium))}

/* ---------------- hero ---------------- */
.hero{position:relative;text-align:center;padding-block:clamp(46px,7vw,76px) clamp(44px,6vw,72px);overflow:hidden;
  background:radial-gradient(78% 58% at 50% 0%,#111A24,var(--g-hero) 72%)}
.lockup-wrap{position:relative;width:min(430px,76vw);margin:0 auto;isolation:isolate;overflow:hidden}
.lockup-wrap img{width:100%;position:relative;z-index:1}
/* the only effect on the logo: a shine that crosses it, masked to the logo itself
   so it never spills onto the background */
.lockup-wrap::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.62) 48%,rgba(180,244,255,.5) 52%,transparent 60%);
  -webkit-mask-image:url("../img/brand/pg-lockup.webp");
          mask-image:url("../img/brand/pg-lockup.webp");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  transform:translateX(-125%);
  animation:shine 6.5s cubic-bezier(.5,0,.25,1) 1.2s infinite;
}
@keyframes shine{0%,72%{transform:translateX(-125%)}100%{transform:translateX(125%)}}
.hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hero .line{margin:clamp(24px,4vw,34px) auto 0;max-width:23ch;font-family:var(--display);font-weight:800;font-size:clamp(20px,3.9vw,32px);line-height:1.16;letter-spacing:-.01em}
.hero .line em{font-style:normal;color:var(--neon)}
.hero .sub{color:var(--muted);max-width:46ch;margin:17px auto 0;font-size:clamp(15px,1.9vw,17.5px)}

.cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(24px,4vw,34px)}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:9px;
  border:1px solid var(--line-2);background:linear-gradient(180deg,var(--panel-2),var(--panel));
  font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--text);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-neon{background:var(--neon);border-color:var(--neon);color:#00131A}
.btn-neon:hover{box-shadow:0 10px 28px -10px var(--neon)}

.stores{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.store{display:flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid var(--line);border-radius:10px;color:var(--faint)}
.store svg{fill:currentColor;flex:none}
.store b{display:block;font-family:var(--display);font-size:11px;color:var(--muted);letter-spacing:.05em}
.store small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase}

/* ---------------- phone mockup (landscape — the game is landscape only) ---------------- */
.phone{
  position:relative;width:100%;aspect-ratio:19.5/9;border-radius:clamp(14px,2.4vw,26px);
  padding:clamp(5px,.9vw,9px);background:linear-gradient(150deg,#3A424E,#171C24 34%,#0E1219 68%,#2C333D);
  box-shadow:0 40px 80px -38px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05);
}
.phone .screen{position:relative;width:100%;height:100%;border-radius:clamp(10px,1.8vw,19px);overflow:hidden;background:#05070A}
.phone .screen>img{width:100%;height:100%;object-fit:cover}
.phone .glare{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,transparent 26%,transparent 74%,rgba(255,255,255,.045) 100%)}
.shot-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:14px;text-align:center}

.duo{display:grid;grid-template-columns:1fr;gap:clamp(26px,4.5vw,52px);align-items:center}
@media (min-width:880px){
  .duo{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
  .duo.flip>*:first-child{order:2}
}
.mini{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:15px}
.mini li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;color:var(--muted);font-size:15.5px;line-height:1.5}
.mini b{display:block;color:var(--text);font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.07em;margin-bottom:3px}
.mini .ic{width:27px;height:27px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--neon);margin-top:2px;flex:none}

/* ---------------- fleet: two lanes that drift past ---------------- */
.lanes{
  position:relative;margin-top:6px;
  --fade:clamp(26px,6vw,88px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
}
.lane{display:flex;gap:12px;width:max-content;will-change:transform}
.lane + .lane{margin-top:12px}
.lane-a{animation:drift-a 64s linear infinite}
.lane-b{animation:drift-b 64s linear infinite}
@keyframes drift-a{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes drift-b{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.lanes:hover .lane,.lanes:focus-within .lane{animation-play-state:paused}

.chip-car{
  position:relative;flex:0 0 auto;width:clamp(128px,17vw,176px);
  border:1px solid var(--line);border-radius:13px;padding:11px 12px 9px;
  background:linear-gradient(180deg,var(--panel),var(--sunk));
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.chip-car img{width:100%;aspect-ratio:2/1;object-fit:contain}
.chip-car .nm{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}
.chip-car .nm b{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-car .nm i{font-style:normal;color:var(--neon);font-variant-numeric:tabular-nums;flex:none}
.chip-car:hover{transform:translateY(-4px);border-color:rgba(58,220,255,.45);box-shadow:0 18px 34px -20px #000}

.fleet-foot{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;margin-top:26px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.fleet-foot b{font-family:var(--display);font-size:15px;color:var(--text);letter-spacing:.04em}

/* ---------------- paint bay ---------------- */
.door{
  position:relative;border-radius:16px 34px 16px 16px;overflow:hidden;aspect-ratio:16/9;
  background:var(--paint,#3ADCFF);box-shadow:0 40px 70px -34px rgba(0,0,0,.95);transition:background .4s ease;
}
.door .coat{position:absolute;inset:0;transition:background .4s ease}
.door[data-finish="matte"]    .coat{background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(0,0,0,.26))}
.door[data-finish="satin"]    .coat{background:linear-gradient(150deg,rgba(255,255,255,.32),transparent 44%,rgba(0,0,0,.32))}
.door[data-finish="metallic"] .coat{background:repeating-linear-gradient(112deg,rgba(255,255,255,.10) 0 1px,transparent 1px 4px),linear-gradient(150deg,rgba(255,255,255,.46),transparent 42%,rgba(0,0,0,.34))}
.door[data-finish="chrome"]   .coat{background:linear-gradient(158deg,#fff 0%,rgba(255,255,255,.12) 20%,rgba(0,0,0,.6) 40%,rgba(255,255,255,.9) 52%,rgba(0,0,0,.45) 68%,rgba(255,255,255,.55) 90%);mix-blend-mode:overlay}
.door[data-finish="pearl"]    .coat{background:linear-gradient(150deg,rgba(255,186,255,.5),rgba(176,236,255,.36) 38%,transparent 58%,rgba(255,234,186,.44))}
.door .crease{position:absolute;left:0;right:0;top:60%;height:2px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.42),transparent)}
.door .grip{position:absolute;right:7%;top:45%;width:15%;height:9px;border-radius:6px;background:rgba(0,0,0,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.34)}
.door .tag{position:absolute;right:16px;top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 1px 4px rgba(0,0,0,.7)}

.ctrl{margin-bottom:24px}
.ctrl>.k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:11px}
.tabs{display:flex;flex-wrap:wrap;gap:7px}
.tab{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:8px 13px;border-radius:8px;border:1px solid var(--line-2);color:var(--muted)}
.tab:first-child{border-color:var(--sodium);color:var(--sodium)}

.counts{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,44px);margin-top:clamp(34px,5vw,50px);border-top:1px solid var(--line-2);padding-top:22px}
.counts b{font-family:var(--display);font-weight:900;font-size:clamp(21px,3vw,28px);color:var(--sodium);font-variant-numeric:tabular-nums}
.counts span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* ---------------- AR: a three-step explainer, not a toy ---------------- */
.ar-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,48px);align-items:center}
@media (min-width:900px){.ar-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}

.ar-view{position:relative}
.ar-scene{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.ar-scene[data-on="1"]{opacity:1}
.ar-room{position:absolute;inset:0;background:linear-gradient(180deg,#141922 0%,#0F141B 42%,#0A0E14 46%,#06090D 100%)}
.ar-room::after{content:"";position:absolute;left:0;right:0;top:46%;height:1px;background:linear-gradient(90deg,transparent,rgba(58,220,255,.26),transparent)}
.ar-floor{
  position:absolute;left:-40%;right:-40%;bottom:0;height:56%;
  background-image:linear-gradient(rgba(58,220,255,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(58,220,255,.17) 1px,transparent 1px);
  background-size:40px 40px;transform:perspective(400px) rotateX(66deg);transform-origin:bottom center;
}
.ar-sweep{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,transparent,rgba(58,220,255,.22));animation:sweep 2.6s ease-in-out infinite}
@keyframes sweep{0%,100%{opacity:.25;transform:translateY(6%)}50%{opacity:.62;transform:translateY(-5%)}}
.ar-ret{position:absolute;left:50%;top:72%;width:84px;height:28px;margin:-14px 0 0 -42px;border-radius:50%;border:2px solid var(--neon);box-shadow:0 0 20px -4px var(--neon)}
.ar-ret::after{content:"";position:absolute;inset:7px 23px;border-radius:50%;border:1px solid rgba(58,220,255,.6)}
.ar-ret.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.7}}
.ar-car{position:absolute;left:50%;bottom:16%;width:44%;transform:translateX(-50%);transform-origin:bottom center}
.ar-car img{width:100%;filter:drop-shadow(0 16px 14px rgba(0,0,0,.8))}
.ar-car .sh{position:absolute;left:12%;right:12%;bottom:-3px;height:13px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.78),transparent 72%)}
.ar-car.land{animation:land .8s cubic-bezier(.2,1.25,.4,1)}
@keyframes land{0%{opacity:0;transform:translateX(-50%) translateY(-32px) scale(.9)}100%{opacity:1;transform:translateX(-50%)}}
.ar-car.roll{animation:roll 3.4s ease-in-out infinite alternate}
@keyframes roll{from{transform:translateX(-50%) translateX(-8%)}to{transform:translateX(-50%) translateX(8%)}}
.ar-chip{
  position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  background:rgba(5,8,12,.86);border:1px solid var(--line-2);border-radius:7px;padding:5px 10px;color:var(--neon);
}
.ar-chip.tl{left:50%;top:11px;transform:translateX(-50%);color:var(--muted);white-space:nowrap;max-width:88%;overflow:hidden;text-overflow:ellipsis}
.ar-chip.br{right:11px;bottom:11px;font-variant-numeric:tabular-nums}
.ar-dim{position:absolute;left:22%;right:22%;bottom:13%;height:1px;background:var(--neon);opacity:.75}
.ar-dim::before,.ar-dim::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--neon)}
.ar-dim::before{left:0}.ar-dim::after{right:0}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.step-btn{
  width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;
  padding:16px 18px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.018);
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.step-btn .n{font-family:var(--display);font-weight:900;font-size:15px;color:var(--faint);font-variant-numeric:tabular-nums;transition:color .25s ease}
.step-btn h3{margin:0 0 4px}
.step-btn p{color:var(--muted);font-size:15px;line-height:1.5}
.step-btn[aria-current="true"]{border-color:rgba(58,220,255,.45);background:rgba(58,220,255,.06);transform:translateX(4px)}
.step-btn[aria-current="true"] .n{color:var(--neon)}
.step-btn:hover{border-color:var(--line-2)}
.ar-note{font-size:14px;color:var(--faint);margin-top:18px;line-height:1.55}

/* ---------------- pro ---------------- */
.pro-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,48px)}
@media (min-width:880px){.pro-grid{grid-template-columns:1fr 1fr;align-items:start}}
.plan{border-top:1px solid var(--line-2);padding-top:20px;margin-bottom:24px}
.plan .r{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.plan .p{font-family:var(--mono);font-size:11.5px;color:var(--sodium);letter-spacing:.05em}
.plan p{color:var(--muted);font-size:15.5px;margin-top:8px}
.ticks{list-style:none;margin:20px 0 0;padding:0}
.ticks li{position:relative;padding-left:26px;margin:10px 0;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:5px;border-left:2px solid var(--sodium);border-bottom:2px solid var(--sodium);transform:rotate(-45deg)}
.fine{font-size:13.5px;color:var(--faint);line-height:1.55;margin-top:22px}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(40px,6vw,58px) 30px;background:var(--g-foot)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:30px}
@media (min-width:700px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr}}
.foot .flogo{width:132px;opacity:.95}
.foot p{color:var(--faint);font-size:15px;max-width:34ch;margin-top:14px}
.foot h4{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot ul a{color:var(--muted);font-size:15.5px}
.foot ul a:hover{color:var(--text)}
.foot-end{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--faint)}
.foot-end .sp{flex:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}