/* Bike World :: HUD interface
   Deep Emerald and Gold. Ground #123024, panels #18402f, gold #d4af59, bone text #f0efe6.
   Gold is a light colour, so anything sitting on it uses --on-accent (the deep green),
   never white.
   Structure borrows from the Iron Man HUD reading: concentric rings, reticles,
   corner brackets, telemetry in the periphery, the subject dead centre. */

:root{
  --accent:#d4af59; --accent-dim:#b8933f; --accent-deep:#8d7132;
  --accent-soft:#ecd9a0; --accent-tint:#dff0e4;
  --ink:#0d2419;         /* deepest green, for anything sitting on gold */
  --on-accent:#123024;   /* gold is light: deep green on top, never white */
  --void:#0b1f16; --panel:#18402f; --panel-2:#1e4c38;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:14px; --r-lg:22px; --max:1240px;

  --bg:#123024;
  --card:linear-gradient(165deg,#1b4634,#143526);
  --card-flat:#18402f;
  --field:#0d2419;
  --text:#f0efe6; --sub:#a9bfb2; --mute:#7d9488;
  --line:rgba(212,175,89,.34);
  --line-soft:rgba(240,239,230,.12);
  --chip:rgba(240,239,230,.055);
  --shadow:0 18px 46px -22px rgba(0,0,0,.75);
  --glow:0 0 0 1px rgba(212,175,89,.42), 0 18px 44px -18px rgba(212,175,89,.42);
  --grid-line:rgba(240,239,230,.05);
  --grad-mid:#ecd9a0;
  --tag-ink:#ecd9a0;
  --shim-a:rgba(240,239,230,.04); --shim-b:rgba(240,239,230,.10);
  --img-bg:#0d2419; --img-scrim:rgba(6,18,12,.85);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);line-height:1.55;overflow-x:hidden;
  font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- ambient HUD field ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;inset:-40%;
  background:radial-gradient(42% 38% at 20% 14%,rgba(212,175,89,.16),transparent 64%),
             radial-gradient(38% 34% at 82% 26%,rgba(30,76,56,.85),transparent 66%),
             radial-gradient(48% 42% at 50% 98%,rgba(8,26,18,.9),transparent 70%);
  animation:drift 26s var(--ease) infinite alternate}
@keyframes drift{to{transform:translate3d(3%,-2%,0) scale(1.07)}}
.ambient b{position:absolute;inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(70% 56% at 50% 26%,#000,transparent 78%);
          mask-image:radial-gradient(70% 56% at 50% 26%,#000,transparent 78%)}
.scan{position:fixed;left:0;right:0;height:140px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(212,175,89,.09),transparent);
  animation:sweep 7s linear infinite}
@keyframes sweep{0%{top:-140px}100%{top:100%}}

/* ---------- shell ---------- */
.wrap{width:min(100% - 40px,var(--max));margin-inline:auto;position:relative;z-index:2}
section{position:relative;z-index:2;padding:clamp(64px,8vw,110px) 0;
  background:var(--bg);color:var(--text);
  transition:background .5s var(--ease),color .5s var(--ease)}
/* the hero rides on the ambient field, and must not inherit the section padding or the
   sticky pin starts ~100px down and pushes the readout below the fold */
.stage{background:transparent;padding:0}

.tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tag-ink);
  padding:7px 14px;border:1px solid var(--line);border-radius:3px;
  background:rgba(212,175,89,.08)}
.tag s{width:6px;height:6px;border-radius:50%;background:var(--accent);text-decoration:none;
  box-shadow:0 0 0 0 rgba(212,175,89,.75);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(212,175,89,0)}100%{box-shadow:0 0 0 0 rgba(212,175,89,0)}}

h1,h2,h3{line-height:1.07;letter-spacing:-.03em;font-weight:800}
h2{font-size:clamp(30px,4.3vw,50px);margin:16px 0 12px}
.lede{color:var(--sub);font-size:clamp(15px,1.6vw,17.5px);max-width:62ch}
.grad{background:linear-gradient(103deg,var(--text),var(--grad-mid) 44%,var(--accent) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:3px;font-size:14px;font-weight:650;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .3s,background .25s,border-color .25s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:linear-gradient(150deg,var(--accent),var(--accent-dim));color:var(--on-accent);
  box-shadow:0 10px 28px -12px rgba(212,175,89,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(212,175,89,.8)}
.btn-ghost{background:var(--chip);border-color:var(--line-soft)}
.btn-ghost:hover{background:rgba(212,175,89,.13);border-color:var(--line);transform:translateY(-2px)}

/* ---------- boot overlay ---------- */
#boot{position:fixed;inset:0;z-index:200;background:#0b1f16;display:grid;
  place-items:center;font-family:var(--mono);transition:opacity .7s var(--ease)}
#boot.done{opacity:0;pointer-events:none}
.boot-in{width:min(90vw,430px)}
.boot-in p{font-size:12.5px;color:var(--accent-soft);letter-spacing:.1em;min-height:19px}
.boot-in p b{color:var(--mute);font-weight:400}
.boot-bar{height:2px;background:rgba(240,239,230,.12);margin-top:16px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  box-shadow:0 0 12px rgba(212,175,89,.9)}

/* ---------- header ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-soft));
  box-shadow:0 0 12px rgba(212,175,89,.85);transition:width .1s linear}
header{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s}
header.stuck{background:rgba(18,48,36,.88);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line-soft)}
.nav{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:baseline;font-weight:900;font-size:19px;letter-spacing:-.04em;
  margin-right:auto}
.logo em{font-style:normal;color:var(--accent)}
.navlinks{display:flex;gap:24px}
.nav a.link{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sub);position:relative;padding:6px 0;transition:color .25s}
.nav a.link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--accent);transition:width .3s var(--ease)}
.nav a.link:hover{color:var(--text)}.nav a.link:hover::after{width:100%}
.burger{display:none;background:none;border:1px solid var(--line-soft);border-radius:8px;
  width:40px;height:40px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:16px;height:1.6px;background:var(--text);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.6px;background:var(--text)}
.burger span::before{top:-5px}.burger span::after{top:5px}

/* ---------- STAGE: the exploded hero ---------- */
.stage{height:420vh;position:relative;z-index:2}
.stage-pin{position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center}

.rings{position:absolute;width:min(88vmin,820px);aspect-ratio:1;pointer-events:none}
.rings circle{fill:none;stroke:var(--accent);vector-effect:non-scaling-stroke}
.rings .r1{stroke-opacity:.75;stroke-dasharray:3 9}
.rings .r2{stroke-opacity:.5;stroke-dasharray:40 16;stroke-width:1.5}
.rings .r3{stroke-opacity:.3}
.spin-a{transform-origin:50% 50%;animation:spin 34s linear infinite}
.spin-b{transform-origin:50% 50%;animation:spin 52s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

.rig{position:relative;width:min(84vmin,700px);aspect-ratio:1;display:grid;place-items:center}
.shards{position:absolute;inset:0}
/* contain, not cover: the render is drawn to fill its own square, cropping would cut wheels off.
   No colour filter either, the art is already on palette. */
.shard{position:absolute;inset:0;background-size:contain;background-position:center;
  background-repeat:no-repeat;will-change:transform,opacity;backface-visibility:hidden}
/* seams so the disc reads as assembled parts */
.seams{position:absolute;inset:0;pointer-events:none;opacity:.5}
.seams line{stroke:var(--accent);stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke}
.seams circle{fill:none;stroke:var(--accent);stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke}
/* scrim keeps the headline legible over any photo */
/* the render is dark and controlled, so the scrim only needs to lift type off the tank */
.scrim{position:absolute;inset:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(11,31,22,.42) 0%,rgba(11,31,22,.24) 46%,
             transparent 72%)}
/* The render is drawn with an empty upper third, so the readout sits there and the machine
   stays fully visible below it. */
/* The readout sits low, over the forecourt tiles. On the old vector bike it lived up top
   because that art had an empty upper third; a real photo puts the tank, forks and lamp
   there, which is exactly what should not be covered. */
.hero-core{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;text-align:center;padding:0 16px 86px;
  pointer-events:none}
.hero-core .plate{pointer-events:auto}
.plate{max-width:min(96%,500px);padding:16px 24px 18px;border-radius:var(--r-lg);
  background:rgba(11,31,22,.62);border:1px solid var(--line);
  backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);
  box-shadow:0 24px 64px -28px rgba(0,0,0,.8)}
.plate h1{font-size:clamp(28px,3.9vw,44px);margin:11px 0 9px}
.plate p{color:var(--sub);font-size:14px}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:22px}

/* corner brackets */
.brackets{position:absolute;inset:0;pointer-events:none}
.brackets i{position:absolute;width:26px;height:26px;border:1.5px solid var(--accent);opacity:.5}
.brackets i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.brackets i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.brackets i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.brackets i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* telemetry in the periphery */
.telem{position:absolute;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--mute);text-transform:uppercase;pointer-events:none;white-space:nowrap}
.telem b{color:var(--accent-soft);font-weight:500}
.t-tl{top:96px;left:26px}.t-tr{top:96px;right:26px;text-align:right}
.t-bl{bottom:26px;left:26px}.t-br{bottom:26px;right:26px;text-align:right}

/* the modules the shards become */
.modules{position:absolute;inset:0;pointer-events:none}
.mod{position:absolute;left:50%;top:50%;width:min(30vmin,196px);
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:14px;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.95);cursor:pointer;
  transition:border-color .25s,box-shadow .3s,transform .3s var(--ease)}
.mod.live{pointer-events:auto}
.mod:hover{border-color:var(--accent);box-shadow:var(--glow)}
.mod h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);font-weight:500;margin-bottom:7px}
.mod .val{font-size:17px;font-weight:750;letter-spacing:-.02em;line-height:1.2}
.mod .sub{font-size:11.5px;color:var(--sub);margin-top:4px}
.mod .spark{display:flex;gap:3px;margin-top:10px;height:18px;align-items:flex-end}
.mod .spark i{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  border-radius:1px;opacity:.75}

.hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--mute);
  text-transform:uppercase;display:flex;align-items:center;gap:9px}
.hint i{width:1px;height:22px;background:linear-gradient(180deg,var(--accent),transparent);
  animation:drop 1.7s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.25;transform:translateY(-4px)}50%{opacity:1;transform:translateY(4px)}}

/* ---------- inventory ---------- */
.toolbar{position:sticky;top:68px;z-index:30;margin-bottom:24px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:15px}
.searchrow{display:flex;gap:10px;flex-wrap:wrap}
.search{flex:1 1 240px;position:relative}
.search input{width:100%;padding:12px 15px 12px 42px;border-radius:8px;
  background:var(--field);border:1px solid var(--line-soft);outline:none;font-size:14.5px;
  transition:border-color .25s,box-shadow .25s}
.search input::placeholder{color:var(--mute)}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,175,89,.15)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.5}
select{padding:12px 14px;border-radius:8px;background:var(--field);
  border:1px solid var(--line-soft);outline:none;cursor:pointer;font-size:14px;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'><path d='M1 1l4.5 4.5L10 1' stroke='%23c0bfd0' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
select:focus{border-color:var(--accent)}
option{background:var(--card-flat);color:var(--text)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.chip{padding:7px 14px;border-radius:3px;font-size:12.5px;cursor:pointer;font-family:var(--mono);
  letter-spacing:.04em;background:var(--chip);border:1px solid var(--line-soft);
  color:var(--sub);transition:all .22s var(--ease)}
.chip:hover{color:var(--text);border-color:var(--line);transform:translateY(-1px)}
.chip.on{background:linear-gradient(150deg,var(--accent),var(--accent-dim));color:var(--on-accent);
  border-color:transparent;box-shadow:0 6px 18px -8px rgba(212,175,89,.9)}
.chip small{opacity:.6;margin-left:5px}
.resultbar{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:18px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;color:var(--sub)}
.resultbar b{color:var(--text)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:17px}
.card{background:var(--card);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;cursor:pointer;
  position:relative;opacity:0;transform:translateY(20px);
  transition:transform .38s var(--ease),border-color .3s,box-shadow .38s,opacity .5s}
.card.in{opacity:1;transform:none}
.card:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:var(--glow)}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--img-bg)}
.card-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:transform .7s var(--ease),opacity .4s}
.card-img img.ok{opacity:1}
.card:hover .card-img img{transform:scale(1.07)}
.card-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 46%,var(--img-scrim))}
.shimmer{position:absolute;inset:0;background:linear-gradient(100deg,var(--shim-a) 30%,var(--shim-b) 50%,var(--shim-a) 70%);
  background-size:220% 100%;animation:sh 1.5s linear infinite}
@keyframes sh{to{background-position:-220% 0}}
.pill{position:absolute;z-index:2;top:10px;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:2px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pill-l{left:10px;background:rgba(8,8,15,.72);border:1px solid var(--line-soft);color:var(--sub)}
.pill-r{right:10px}
.ok-p{background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.42);color:#7ee2a8}
.no-p{background:rgba(212,175,89,.16);border:1px solid var(--line);color:var(--accent-soft)}
.card-body{padding:14px 15px 16px}
.card h3{font-size:14.5px;font-weight:700;line-height:1.32;min-height:38px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.meta em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--sub);
  background:var(--chip);border:1px solid var(--line-soft);padding:3px 8px;border-radius:2px}
.price{display:flex;align-items:baseline;gap:8px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line-soft)}
.price b{font-size:19px;font-weight:850;letter-spacing:-.03em}
.price s{font-size:12px;color:var(--mute)}
.price i{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;color:#7ee2a8;
  background:rgba(34,197,94,.11);padding:3px 7px;border-radius:2px}
.empty{text-align:center;padding:64px 20px;color:var(--sub)}
.empty b{display:block;font-size:18px;color:var(--text);margin-bottom:6px}
.more{display:flex;justify-content:center;margin-top:30px}

/* ---------- offers / reels / visit ---------- */
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:15px;margin-top:40px}
.offer{background:var(--card);
  border:1px solid var(--line-soft);border-radius:var(--r);padding:24px 21px;
  transition:transform .35s var(--ease),border-color .3s}
.offer:hover{transform:translateY(-5px);border-color:var(--line)}
.offer .ico{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:18px;
  background:linear-gradient(135deg,rgba(212,175,89,.24),rgba(111,87,22,.16));
  border:1px solid var(--line);margin-bottom:13px}
.offer h3{font-size:16px;margin-bottom:6px}
.offer p{font-size:13.6px;color:var(--sub)}

.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:40px}
.reel{position:relative;background:var(--void);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:9/16;
  transition:transform .38s var(--ease),border-color .3s,box-shadow .38s}
.reel:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--glow)}
.reel video{width:100%;height:100%;object-fit:cover;display:block;background:var(--void)}
/* readouts float over the footage instead of boxing it in a card */
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,15,.55) 0%,transparent 22%,
             transparent 58%,rgba(8,8,15,.9) 100%)}
.reel-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 16px 15px;
  display:flex;align-items:flex-end;gap:10px}
.reel-cap b{color:#fff;font-weight:650;font-size:13.5px;line-height:1.35;
  text-shadow:0 1px 12px rgba(8,8,15,.95);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel-plays{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;color:var(--accent-soft);padding:5px 10px;border-radius:3px;
  background:rgba(8,8,15,.66);border:1px solid var(--line);text-transform:uppercase}
.reel-mute{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line-soft);background:rgba(8,8,15,.7);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:all .22s}
.reel-mute:hover{background:var(--accent);border-color:var(--accent)}
.reel-link{position:absolute;inset:0;z-index:2}
/* thin progress bar so the loop reads as playing, not stalled */
.reel-bar{position:absolute;left:0;bottom:0;z-index:3;height:2px;width:0;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));box-shadow:0 0 10px rgba(212,175,89,.8)}
/* data saver / slow link: hold the poster and show a play affordance */
.reel-tap::before{content:"";position:absolute;left:50%;top:50%;z-index:3;
  width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(212,175,89,.92);box-shadow:0 10px 34px -8px rgba(0,0,0,.85)}
.reel-tap::after{content:"";position:absolute;left:50%;top:50%;z-index:4;
  margin:-9px 0 0 -5px;border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;background:none}
.reel-tap .reel-mute{display:none}
/* fallback when no local video file exists yet */
.reel-embed{aspect-ratio:auto;background:var(--panel)}
.reel-embed::after{content:none}
.reel-embed iframe{width:100%;height:640px;border:0;display:block;background:var(--panel)}

.visit{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.vcard{background:var(--card);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:30px}
.vrow{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.vrow:last-child{border-bottom:0;padding-bottom:0}
.vrow .ico{flex:0 0 38px;height:38px;border-radius:9px;display:grid;place-items:center;font-size:16px;
  background:rgba(212,175,89,.13);border:1px solid var(--line)}
.vrow h4{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--mute);font-weight:500;margin-bottom:4px}
.vrow p,.vrow a{font-size:14.5px}
.vrow a{display:block;transition:color .2s}
.vrow a:hover{color:var(--accent-soft)}
.map{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-soft);min-height:380px}
.map iframe{width:100%;height:100%;min-height:380px;border:0;display:block;
  filter:grayscale(.4) invert(.92) hue-rotate(120deg) contrast(.88) brightness(1.04)}
.map .btn{position:absolute;left:17px;bottom:17px;z-index:2}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:20px}
.modal.on{display:grid}
.modal-bg{position:absolute;inset:0;background:rgba(8,8,15,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal-box{position:relative;width:min(100%,940px);max-height:88vh;overflow:auto;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 40px 120px -30px rgba(0,0,0,.9);
  animation:rise .42s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}}
.modal-grid{display:grid;grid-template-columns:1.15fr 1fr}
.gal{background:var(--void)}
.gal-main{aspect-ratio:4/3;overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-thumbs{display:flex;gap:7px;padding:9px;overflow-x:auto}
.gal-thumbs img{width:60px;height:46px;object-fit:cover;border-radius:5px;cursor:pointer;
  border:2px solid transparent;opacity:.55;transition:all .22s;flex:0 0 auto}
.gal-thumbs img.on{opacity:1;border-color:var(--accent)}
.modal-side{padding:28px}
.modal-side h3{font-size:22px;margin:12px 0}
.modal-price{font-size:32px;font-weight:850;letter-spacing:-.035em;margin:14px 0 4px}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.spec div{background:var(--chip);border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px}
.spec h4{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.15em;
  color:var(--mute);font-weight:500}
.spec p{font-size:14px;margin-top:3px}
.modal-actions{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.x{position:absolute;top:13px;right:13px;z-index:3;width:36px;height:36px;border-radius:50%;
  background:rgba(8,8,15,.75);border:1px solid var(--line-soft);cursor:pointer;
  display:grid;place-items:center;font-size:18px;transition:all .22s}
.x:hover{background:var(--accent);border-color:var(--accent);transform:rotate(90deg)}

/* ---------- footer / float ---------- */
footer{border-top:1px solid var(--line-soft);padding:40px 0 32px;position:relative;z-index:2}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mute);align-items:center}
.foot a:hover{color:var(--accent-soft)}
.float{position:fixed;right:20px;bottom:20px;z-index:45;display:flex;flex-direction:column;gap:10px}
.fab{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;
  box-shadow:0 12px 32px -10px rgba(0,0,0,.8);transition:transform .28s var(--ease)}
.fab:hover{transform:scale(1.1) translateY(-2px)}
.fab-wa{background:#25d366}
.fab-call{background:linear-gradient(150deg,var(--accent),var(--accent-dim))}

.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .visit,.modal-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .navlinks{display:none}
  .burger{display:flex}
  .nav .btn-primary{display:none}
  header.open .navlinks{display:flex;position:absolute;top:68px;left:20px;right:20px;
    flex-direction:column;gap:0;background:rgba(15,15,26,.97);backdrop-filter:blur(18px);
    border:1px solid var(--line-soft);border-radius:var(--r);padding:8px}
  header.open .navlinks a{padding:13px 14px;border-radius:8px}
  .stage{height:300vh}
  .rig{width:86vmin}
  .mod{width:39vw;padding:11px}
  .mod .val{font-size:14px}
  .mod .sub{display:none}
  .telem{font-size:9px}
  .t-tl,.t-tr{top:82px}
  .toolbar{top:62px;padding:12px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px}
  .card h3{font-size:13px;min-height:34px}
  .price b{font-size:16.5px}
  .reel iframe{height:560px}
  .vcard{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  .reveal,.card{opacity:1;transform:none}
  .scan{display:none}
}