/* Layout: one frosted-glass stage over a brushed-silver ground; vehicle finder left, 3D slider right, search beneath. Single light look by choice (silver showroom). */
:root{
  --ground:#E6E9ED; --ground-2:#F3F4F6; --ink:#15181D; --ink-2:#3B424D; --muted:#5A616B;
  --glass:rgba(255,255,255,.45); --glass-strong:rgba(255,255,255,.62); --glass-soft:rgba(255,255,255,.14); --edge:rgba(255,255,255,.7); --blur:blur(12px) saturate(140%);
  --line:rgba(21,24,29,.12); --accent:#B3202F; --accent-ink:#FFFFFF;
  --f-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-xl:34px; --r-lg:24px; --r-md:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;min-height:100%}
.bgv{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#0d1015 url(/bg-poster.jpg) center/cover}
.bgv video,.bgv canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bgv video{opacity:0;transition:opacity .8s}
.bgv video.on{opacity:1}
.bgv .veil{position:absolute;inset:0;background:rgba(244,246,248,.58);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.wrap{position:relative;z-index:1;padding-inline:16px;padding-block:20px 32px}
.inner{position:relative;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.logo{display:flex;align-items:center}
.logo img{display:block;height:68px;width:auto}
@media (max-width:640px){.logo img{height:46px}}
nav.main{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
nav.main a{padding:9px 16px;border-radius:999px;font-size:14px;font-weight:500}
nav.main a[aria-current]{background:#fff;font-weight:700;box-shadow:0 2px 8px rgba(21,24,29,.08)}
.icons{display:flex;gap:10px}
.iconbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid var(--edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}

.stage{display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:var(--r-xl);background:var(--glass-soft);border:1px solid var(--edge);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 30px 80px rgba(21,24,29,.10),inset 0 1px 0 rgba(255,255,255,.8)}
.row{display:flex;flex-wrap:wrap;gap:18px}
.finder{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:var(--r-lg);background:var(--glass-strong);border:1px solid var(--edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
h1{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.lede{margin:0;color:var(--ink-2);font-size:16.5px;max-width:44ch}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
select,input{font:inherit;height:48px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.88);color:var(--ink);font-size:15px;min-width:0}
.btn{font:inherit;height:50px;padding:0 22px;border:0;border-radius:var(--r-md);background:var(--ink);color:#fff;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.fields .btn{grid-column:1/-1}

.slider{flex:1.35 1 480px;min-width:0;position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:var(--r-lg);background:var(--glass-soft);border:1px solid var(--edge);overflow:hidden}
.slide{display:flex;flex-direction:column;gap:6px;flex:1}
.slide h2{margin:0;font-family:var(--f-display);font-weight:600;font-size:23px;text-wrap:balance}
.viewport{position:relative;flex:1;min-height:340px;border-radius:18px;touch-action:pan-y;cursor:grab}
.viewport:active{cursor:grabbing}
.viewport canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.status{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:14px;padding:20px}
.status strong{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.bar{width:180px;height:4px;border-radius:2px;background:var(--line);margin:10px auto 0;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .2s}
.labels{position:absolute;inset:0;pointer-events:none}
.tag{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:7px;padding:5px 11px 5px 8px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid var(--edge);box-shadow:0 6px 18px rgba(21,24,29,.12);font-size:12.5px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .35s;will-change:transform}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(179,32,47,.18)}
.tag.on{opacity:1}
.tag:hover{color:var(--accent)}
.hint{position:absolute;right:10px;top:10px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.7);padding:4px 10px;border-radius:999px;pointer-events:none}
.controls{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dots{display:flex;gap:2px}
.dots button{width:30px;height:30px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.dots button span{width:6px;height:6px;border-radius:3px;background:rgba(21,24,29,.3);transition:width .3s,background .3s}
.dots button[aria-current="true"] span{width:24px;background:var(--ink)}
.arrows{display:flex;gap:8px}
.round{width:44px;height:44px;border-radius:50%;border:1px solid var(--edge);background:var(--glass-strong);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.textslide{justify-content:center;gap:16px;padding:8px 4px}
.textslide h2{font-size:clamp(28px,3vw,40px);line-height:1.1;max-width:15ch}
.textslide p{margin:0;color:var(--ink-2);max-width:40ch}

.search{display:flex;flex-wrap:wrap;gap:10px;padding:8px;border-radius:20px;background:var(--glass-strong);border:1px solid var(--edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.search .q{flex:999 1 300px;min-width:0;display:flex;align-items:center;gap:10px;padding:0 12px}
.search input{border:0;background:transparent;flex:1;padding:0}
.search input:focus-visible{outline:none}
.search .q:focus-within{box-shadow:0 0 0 2px var(--accent);border-radius:12px}
.search .btn{flex:1 1 150px;height:48px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.perk{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.perk .ic{flex:none;width:44px;height:44px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--accent)}
.perk strong{display:block;font-size:15px}.perk span{font-size:13px;color:var(--muted)}
.sec{display:flex;flex-direction:column;gap:18px;scroll-margin-top:20px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px}
.sec h2{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.01em;text-wrap:balance}
.more{font-weight:700;font-size:14px}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.cat{display:flex;align-items:center;gap:12px;padding:16px 18px;min-height:56px;border-radius:18px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);font-weight:600;font-size:15px;scroll-margin-top:90px;transition:transform .2s,box-shadow .2s}
.cat:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(21,24,29,.08)}
.cat:target{box-shadow:0 0 0 2px var(--accent);color:var(--accent)}
.cat svg{flex:none}
.cat small{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:24px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 12px 36px rgba(21,24,29,.07)}
.thumb{position:relative;height:170px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(227,230,234,.45));display:grid;place-items:center;color:#8A919C}
.stock{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:11px;font-weight:700;color:#1E6B3A}
.ph{position:absolute;bottom:10px;right:12px;font-size:11px;color:var(--muted)}
.card .brand{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card h3{margin:0;font-size:17px;line-height:1.3}
.card .meta{font-size:13px;color:var(--muted)}
.buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.price{font-family:var(--f-display);font-size:20px;font-weight:700}
.add{font:inherit;height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}
.add.done{background:#1E6B3A}
.badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.iconbtn{position:relative}
.cod{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:30px;border-radius:28px;background:rgba(21,24,29,.68);color:#fff;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.cod h2{color:#fff}.cod p{margin:6px 0 0;color:#C9CED6;max-width:60ch}
.cod .acts{display:flex;flex-wrap:wrap;gap:10px}
.cod a{height:48px;padding:0 22px;border-radius:14px;display:inline-flex;align-items:center;font-weight:700;font-size:14px}
.cod a.light{background:#fff;color:var(--ink)}.cod a.line{border:1px solid rgba(255,255,255,.4);color:#fff}
.seo{padding:28px;border-radius:28px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.seo h2{font-size:24px;margin:0 0 6px}
.seo h3{font-family:var(--f-display);font-weight:600;font-size:18px;margin:18px 0 4px}
.seo{columns:1}.seo p{margin:6px 0 0;color:var(--ink-2);max-width:80ch}
.seo p{margin:10px 0 0;color:var(--ink-2);max-width:80ch}
footer{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;padding:24px 28px;border-radius:28px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
footer nav{display:flex;flex-direction:column;gap:6px;font-size:14px}
footer h3{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);padding:12px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:10}
.toast.show{opacity:1;transform:translate(-50%,0)}
.vinform{display:flex;flex-direction:column;gap:6px;max-width:460px}
.vinform label{font-size:13px;font-weight:600;color:var(--ink-2)}
.vinform small{font-size:12.5px;color:var(--muted)}
.vinrow{display:flex;gap:8px}
.vinrow input{flex:1;min-width:0;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.vinrow .btn{height:48px}
.vinres{max-width:460px;padding:14px 16px;border-radius:16px;background:var(--glass-strong);border:1px solid var(--edge);display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.vinres strong{font-family:var(--f-display);font-size:19px}
.vinres .ok{color:#1E6B3A;font-weight:700}
.vinres .warn{color:#8A5A00;font-weight:700}
.vinres .acts{display:flex;flex-wrap:wrap;gap:8px}
.vinres .acts a{height:44px;padding:0 16px;border-radius:12px;display:inline-flex;align-items:center;font-weight:700;font-size:14px;background:var(--ink);color:#fff}
.vinres .acts a.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.credit{margin:0;font-size:12.5px;color:var(--ink-2);max-width:none;padding:10px 14px;border-radius:12px;background:var(--glass)}
.credit a{color:var(--ink-2);text-decoration:underline}
.note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--edge);font-size:13.5px;color:var(--ink-2)}
.note b{color:var(--ink)}
@media (max-width:640px){.stage{padding:12px;border-radius:24px}.finder,.slider{padding:18px}.viewport{min-height:280px}nav.main{order:3;width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.tag,.dots button span{transition:none}}