﻿/* ============================================================
   پلاک‌فری — ۵ سبک حرفه‌ای (هر کدام روشن + تیره)
   data-theme="nova|atelier|signal|forest|coast"
   data-mode="light|dark"
   ============================================================ */

@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Black.woff2') format('woff2');font-weight:900;font-display:swap}

/* ---------- tokens: default (nova/light) ---------- */
:root{
  --font-sans:'Vazirmatn',Tahoma,sans-serif;
  --bg:#F6F7FB; --bg-alt:#EDEFF7; --surface:#FFFFFF; --surface-2:#F9FAFD;
  --ink:#101223; --ink-2:#3B3E5C; --muted:#6B7088;
  --line:#E3E6F1; --line-strong:#C9CDE2;
  --brand:#5456D4; --brand-2:#3F41B8; --brand-soft:#ECEAFB; --on-brand:#FFFFFF;
  --accent:#38BDF8; --accent-soft:#E4F5FE; --on-accent:#062A38;
  --gold:#C9A227; --success:#14955F; --success-soft:#E3F6ED; --danger:#D24444; --danger-soft:#FBEAEA;
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(16,18,35,.05),0 2px 8px rgba(16,18,35,.05);
  --shadow-2:0 6px 18px rgba(16,18,35,.08),0 2px 4px rgba(16,18,35,.05);
  --shadow-3:0 22px 48px rgba(16,18,35,.14);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:180ms;
}

/* ============ ۱) NOVA — مینیمال نرم (ایندیگو) ============ */
[data-theme="nova"][data-mode="light"]{
  --bg:#F6F7FB; --bg-alt:#EDEFF7; --surface:#FFFFFF; --surface-2:#F9FAFD;
  --ink:#101223; --ink-2:#3B3E5C; --muted:#6B7088; --line:#E3E6F1; --line-strong:#C9CDE2;
  --brand:#5456D4; --brand-2:#3F41B8; --brand-soft:#ECEAFB; --on-brand:#FFFFFF;
  --accent:#38BDF8; --accent-soft:#E4F5FE; --on-accent:#062A38;
  --gold:#C9A227; --success:#14955F; --success-soft:#E3F6ED; --danger:#D24444; --danger-soft:#FBEAEA;
  --r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:30px;--r-pill:999px;
}
[data-theme="nova"][data-mode="dark"]{
  --bg:#0B0D17; --bg-alt:#10131F; --surface:#151827; --surface-2:#1B1F31;
  --ink:#EAECF8; --ink-2:#C4C8DD; --muted:#8A90AC;
  --line:rgba(226,230,246,.12); --line-strong:rgba(226,230,246,.24);
  --brand:#7C7DF0; --brand-2:#9192F5; --brand-soft:rgba(124,125,240,.16); --on-brand:#0B0D17;
  --accent:#38BDF8; --accent-soft:rgba(56,189,248,.14); --on-accent:#062A38;
  --gold:#D9B44A; --success:#34C98F; --success-soft:rgba(52,201,143,.14); --danger:#F07171; --danger-soft:rgba(240,113,113,.14);
  --shadow-1:0 2px 8px rgba(0,0,0,.35);
  --shadow-2:0 10px 26px rgba(0,0,0,.45);
  --shadow-3:0 24px 56px rgba(0,0,0,.6);
}
[data-theme="nova"] .hero{position:relative}
[data-theme="nova"] .hero::before{content:"";position:absolute;z-index:-1;top:-70px;right:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,var(--brand-soft),transparent 65%);filter:blur(10px)}
[data-theme="nova"] .hero::after{content:"";position:absolute;z-index:-1;bottom:-60px;left:-120px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft),transparent 65%);filter:blur(10px)}
[data-theme="nova"] .header{background:color-mix(in srgb, var(--surface) 82%, transparent)}
[data-theme="nova"] .show-main{border-radius:24px}
[data-theme="nova"] .stat .si{border-radius:999px}
[data-theme="nova"] .cat .go{background:var(--surface);color:var(--brand)}

/* ============ ۲) ATELIER — ادیتوریال لوکس (طلا و کاغذ) ============ */
[data-theme="atelier"][data-mode="light"]{
  --bg:#F6F1E6; --bg-alt:#EDE5D4; --surface:#FCFAF4; --surface-2:#F3EDE0;
  --ink:#1B1712; --ink-2:#40392E; --muted:#7A7264; --line:#E1D8C4; --line-strong:#C0B295;
  --brand:#7A4E22; --brand-2:#5F3C19; --brand-soft:#F0E6D4; --on-brand:#FFFFFF;
  --accent:#B08A3E; --accent-soft:#F0E8D6; --on-accent:#171208;
  --gold:#B08A3E; --success:#2F6B4F; --success-soft:#E2EFE6; --danger:#A8402C; --danger-soft:#F6E4DE;
  --r-xs:2px;--r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:10px;--r-pill:999px;
  --shadow-1:0 1px 0 rgba(27,23,18,.06);
  --shadow-2:0 8px 24px rgba(27,23,18,.08);
  --shadow-3:0 24px 48px rgba(27,23,18,.14);
}
[data-theme="atelier"][data-mode="dark"]{
  --bg:#131009; --bg-alt:#1A160E; --surface:#1A160E; --surface-2:#211C12;
  --ink:#EFE7D6; --ink-2:#CBC0A9; --muted:#978C77;
  --line:rgba(239,231,214,.13); --line-strong:rgba(239,231,214,.3);
  --brand:#C99B4F; --brand-2:#D9AE63; --brand-soft:rgba(201,155,79,.15); --on-brand:#171208;
  --accent:#D9C089; --accent-soft:rgba(217,192,137,.13); --on-accent:#171208;
  --gold:#D9C089; --success:#5BB98A; --success-soft:rgba(91,185,138,.14); --danger:#E08A6F; --danger-soft:rgba(224,138,111,.14);
}
[data-theme="atelier"] .eyebrow{background:transparent;border:1px solid var(--line-strong);border-radius:0;letter-spacing:2.5px;font-size:10px;color:var(--ink-2)}
[data-theme="atelier"] .hero h1{font-size:54px;line-height:1.3;letter-spacing:-1.6px}
[data-theme="atelier"] .hero h1 em{font-weight:400;color:var(--accent)}
[data-theme="atelier"] .hero .lead{font-size:14px;color:var(--muted)}
[data-theme="atelier"] .showcase .show-main{border-radius:2px;border:1px solid var(--line-strong);padding:10px;background:var(--surface)}
[data-theme="atelier"] .showcase .show-main img{border-radius:2px}
[data-theme="atelier"] .btn{letter-spacing:1px;font-size:11.5px}
[data-theme="atelier"] .sec-l .bar{width:3px;background:var(--gold)}
[data-theme="atelier"] .sec-l h2{font-size:24px;letter-spacing:-.4px}
[data-theme="atelier"] .grid{grid-template-columns:1fr !important;gap:0}
[data-theme="atelier"] .card{flex-direction:row;border-radius:0;border:0;border-bottom:1px solid var(--line);box-shadow:none;align-items:center}
[data-theme="atelier"] .card:hover{transform:none;box-shadow:none;border-bottom-color:var(--line-strong)}
[data-theme="atelier"] .card .media{width:190px;aspect-ratio:auto;height:128px;flex-shrink:0;border-radius:2px;overflow:hidden}
[data-theme="atelier"] .card .body{flex:1;padding:14px 20px;gap:6px;border:0}
[data-theme="atelier"] .card .foot{border:0;display:flex;align-items:center;justify-content:space-between;padding-top:8px}
[data-theme="atelier"] .card .badges .badge{background:transparent;color:var(--ink-2);border:1px solid var(--line-strong);letter-spacing:1px;font-size:8.5px}
[data-theme="atelier"] .card .badges .badge-brand{color:var(--brand);border-color:var(--brand);background:transparent}
[data-theme="atelier"] .pbull b{font-size:20px}
[data-theme="atelier"] .ptom{color:var(--accent)}
[data-theme="atelier"] .fcard{border-radius:2px}
[data-theme="atelier"] .dealer{border-radius:2px}
[data-theme="atelier"] .cta{border-radius:2px;background:var(--ink);color:var(--bg)}
[data-theme="atelier"] .cta .btn{background:var(--accent);color:var(--on-accent)}

/* ============ ۳) SIGNAL — نئوبروتال جسور (مشکی/لایم) ============ */
[data-theme="signal"][data-mode="light"]{
  --bg:#FFFFFF; --bg-alt:#F4F4F4; --surface:#FFFFFF; --surface-2:#FBFBFB;
  --ink:#0A0A0A; --ink-2:#2E2E2E; --muted:#5F5F5F; --line:#0A0A0A; --line-strong:#0A0A0A;
  --brand:#0A0A0A; --brand-2:#000000; --brand-soft:#EFEFEF; --on-brand:#FFFFFF;
  --accent:#B6F23C; --accent-soft:#F2FCE0; --on-accent:#0A0A0A;
  --gold:#FFC53D; --success:#15803D; --success-soft:#E8F7EC; --danger:#DC2626; --danger-soft:#FDEBEB;
  --r-xs:2px;--r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:10px;--r-pill:999px;
  --shadow-1:3px 3px 0 rgba(10,10,10,1);
  --shadow-2:6px 6px 0 rgba(10,10,10,1);
  --shadow-3:10px 10px 0 rgba(10,10,10,1);
  --border-w:2px;
}
[data-theme="signal"][data-mode="dark"]{
  --bg:#0A0A0A; --bg-alt:#101010; --surface:#131313; --surface-2:#181818;
  --ink:#FAFAFA; --ink-2:#D4D4D4; --muted:#9A9A9A; --line:#FAFAFA; --line-strong:#FAFAFA;
  --brand:#FAFAFA; --brand-2:#FFFFFF; --brand-soft:#1F1F1F; --on-brand:#0A0A0A;
  --accent:#B6F23C; --accent-soft:rgba(182,242,60,.14); --on-accent:#0A0A0A;
  --gold:#FFC53D; --success:#4ADE80; --success-soft:rgba(74,222,128,.14); --danger:#F87171; --danger-soft:rgba(248,113,113,.14);
  --shadow-1:3px 3px 0 #FAFAFA;
  --shadow-2:6px 6px 0 #FAFAFA;
  --shadow-3:10px 10px 0 #FAFAFA;
}
[data-theme="signal"] .utility{border-bottom:2px solid var(--ink);background:var(--accent);color:var(--on-accent);font-weight:800}
[data-theme="signal"] .utility a, [data-theme="signal"] .utility b{color:inherit}
[data-theme="signal"] .header{border-bottom:3px solid var(--ink);background:var(--surface)}
[data-theme="signal"] .header .wrap{height:82px}
[data-theme="signal"] .brand-mark{box-shadow:var(--shadow-1);border:2px solid var(--ink)}
[data-theme="signal"] .nav a{border:2px solid transparent}
[data-theme="signal"] .nav a.active{background:var(--brand);color:var(--on-brand);border-color:var(--ink);box-shadow:var(--shadow-1)}
[data-theme="signal"] .hsearch{border:2px solid var(--ink)}
[data-theme="signal"] .btn{box-shadow:var(--shadow-1);border:2px solid var(--ink);font-weight:900}
[data-theme="signal"] .btn-primary{background:var(--brand);color:var(--on-brand)}
[data-theme="signal"] .btn-primary:hover{background:var(--accent);color:var(--on-accent);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
[data-theme="signal"] .btn-outline{background:var(--surface);color:var(--ink)}
[data-theme="signal"] .btn-accent{background:var(--accent);color:var(--on-accent)}
[data-theme="signal"] .eyebrow{background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);border-radius:2px;box-shadow:var(--shadow-1);font-weight:900}
[data-theme="signal"] .hero h1 em{background:var(--accent);color:var(--on-accent);padding:0 12px;border:2px solid var(--ink);box-shadow:var(--shadow-1);border-radius:4px}
[data-theme="signal"] .segment{border:2px solid var(--ink);box-shadow:var(--shadow-1);background:var(--surface)}
[data-theme="signal"] .segment button.on{background:var(--brand);color:var(--on-brand);border-radius:2px}
[data-theme="signal"] .searchbox{border:2px solid var(--ink);box-shadow:var(--shadow-2)}
[data-theme="signal"] .sel{border-left:2px solid var(--ink);font-weight:800}
[data-theme="signal"] .quick a{border:2px solid var(--ink);background:var(--surface);border-radius:2px;font-weight:700}
[data-theme="signal"] .quick a:hover{background:var(--accent);color:var(--on-accent)}
[data-theme="signal"] .stats{border:2px solid var(--ink);box-shadow:var(--shadow-2);border-radius:0}
[data-theme="signal"] .stat{border-left:2px solid var(--ink)}
[data-theme="signal"] .stat .si{background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);box-shadow:var(--shadow-1);border-radius:2px}
[data-theme="signal"] .stat b{font-size:24px}
[data-theme="signal"] .cat{border:2px solid var(--ink);box-shadow:var(--shadow-2);border-radius:4px}
[data-theme="signal"] .cat .go{background:var(--accent);color:var(--on-accent);border:2px solid var(--ink)}
[data-theme="signal"] .fcard,.card,.dealer,.ratebox,.calc{border:2px solid var(--ink);border-radius:4px;box-shadow:var(--shadow-2)}
[data-theme="signal"] .card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
[data-theme="signal"] .chip{border:2px solid var(--ink);border-radius:2px;font-weight:800}
[data-theme="signal"] .chip.on{background:var(--brand);color:var(--on-brand)}
[data-theme="signal"] .sortbtn{border:2px solid var(--ink);font-weight:800}
[data-theme="signal"] .filterbar{border:2px solid var(--ink);box-shadow:var(--shadow-2)}
[data-theme="signal"] .badge-brand{background:var(--accent);color:var(--on-accent);border:2px solid var(--ink)}
[data-theme="signal"] .badge-accent{background:var(--brand);color:var(--on-brand);border:2px solid var(--ink)}
[data-theme="signal"] .badge-soft{background:var(--surface);color:var(--ink);border:2px solid var(--ink)}
[data-theme="signal"] .rate{background:var(--bg-alt);border:2px solid var(--ink);border-radius:2px}
[data-theme="signal"] .dealer .v{border:1.5px solid var(--ink);background:var(--accent-soft);border-radius:2px}
[data-theme="signal"] .cta{background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);box-shadow:var(--shadow-3);border-radius:4px}
[data-theme="signal"] .cta .btn{background:var(--brand);color:var(--on-brand)}
[data-theme="signal"] .marquee{display:flex}
[data-theme="signal"] footer{border-top:3px solid var(--ink)}

/* ============ ۴) FOREST — طبیعی و آرام (سبز جنگلی) ============ */
[data-theme="forest"][data-mode="light"]{
  --bg:#F1EEE4; --bg-alt:#E7E2D2; --surface:#FDFBF5; --surface-2:#F5F1E6;
  --ink:#16211A; --ink-2:#33443A; --muted:#6B7A6E; --line:#DDE2D3; --line-strong:#C2CDBA;
  --brand:#1F6A4D; --brand-2:#175440; --brand-soft:#E0EFE6; --on-brand:#FFFFFF;
  --accent:#C08A3E; --accent-soft:#F3E8D6; --on-accent:#FFFFFF;
  --gold:#C08A3E; --success:#2F7D5B; --success-soft:#E1EFE7; --danger:#B4502F; --danger-soft:#F6E4DB;
  --r-xs:10px;--r-sm:14px;--r-md:18px;--r-lg:26px;--r-xl:34px;--r-pill:999px;
  --shadow-1:0 2px 10px rgba(22,33,26,.06);
  --shadow-2:0 10px 26px rgba(22,33,26,.1);
  --shadow-3:0 26px 56px rgba(22,33,26,.16);
}
[data-theme="forest"][data-mode="dark"]{
  --bg:#0D1A13; --bg-alt:#12221A; --surface:#14241B; --surface-2:#1A2E22;
  --ink:#E9F0E7; --ink-2:#C3D3C7; --muted:#8DA294;
  --line:rgba(233,240,231,.12); --line-strong:rgba(233,240,231,.26);
  --brand:#4FA37B; --brand-2:#62B78E; --brand-soft:rgba(79,163,123,.16); --on-brand:#0B1811;
  --accent:#D9AE61; --accent-soft:rgba(217,174,97,.14); --on-accent:#171208;
  --gold:#D9AE61; --success:#5FC08E; --success-soft:rgba(95,192,142,.14); --danger:#E08A6F; --danger-soft:rgba(224,138,111,.14);
}
[data-theme="forest"] .hero{background:linear-gradient(150deg,var(--brand-soft),transparent 55%);border-radius:var(--r-xl);padding:36px 30px;margin-bottom:14px}
[data-theme="forest"] .eyebrow{background:var(--surface);border:1px solid var(--line-strong);color:var(--brand);font-weight:800}
[data-theme="forest"] .show-main{border-radius:var(--r-xl)}
[data-theme="forest"] .show-main .badge-top .badge-ok{color:var(--success);background:var(--surface)}
[data-theme="forest"] .show-mini .mini{border-radius:var(--r-md)}
[data-theme="forest"] .cat .shade{background:linear-gradient(180deg,rgba(10,26,17,.05) 25%,rgba(10,26,17,.8))}
[data-theme="forest"] .cat .go{background:rgba(255,255,255,.16)}
[data-theme="forest"] .sec-l .bar{border-radius:4px;background:var(--brand)}
[data-theme="forest"] .stat .si{background:var(--brand-soft);color:var(--brand)}
[data-theme="forest"] .card .badges .badge-soft{background:var(--surface);border:1px solid var(--line-strong)}
[data-theme="forest"] .dealer .v{background:var(--success-soft);color:var(--success);border-radius:var(--r-pill)}
[data-theme="forest"] .rate b{color:var(--brand)}
[data-theme="forest"] .ptom{color:var(--brand)}

/* ============ ۵) COAST — ساحلی خنک (اقیانوس و مرجان) ============ */
[data-theme="coast"][data-mode="light"]{
  --bg:#F2F7F9; --bg-alt:#E5EFF4; --surface:#FFFFFF; --surface-2:#F8FBFD;
  --ink:#0A2533; --ink-2:#2E4A59; --muted:#5E7A88; --line:#D9E7EE; --line-strong:#B7D3E0;
  --brand:#0E7490; --brand-2:#0A5C74; --brand-soft:#E0F0F6; --on-brand:#FFFFFF;
  --accent:#F4715A; --accent-soft:#FDEAE6; --on-accent:#FFFFFF;
  --gold:#D99A2B; --success:#188A63; --success-soft:#E2F3EC; --danger:#D1453B; --danger-soft:#FBE7E4;
  --r-xs:10px;--r-sm:14px;--r-md:18px;--r-lg:24px;--r-xl:32px;--r-pill:999px;
  --shadow-1:0 2px 10px rgba(10,37,51,.06);
  --shadow-2:0 10px 26px rgba(10,37,51,.1);
  --shadow-3:0 26px 56px rgba(10,37,51,.18);
}
[data-theme="coast"][data-mode="dark"]{
  --bg:#06131D; --bg-alt:#0A1B28; --surface:#0B2030; --surface-2:#102A3C;
  --ink:#E4F2F8; --ink-2:#B9D2DE; --muted:#7E9CAD;
  --line:rgba(228,242,248,.12); --line-strong:rgba(228,242,248,.26);
  --brand:#38BDF8; --brand-2:#5FCBF7; --brand-soft:rgba(56,189,248,.15); --on-brand:#06131D;
  --accent:#FB7185; --accent-soft:rgba(251,113,133,.15); --on-accent:#1A0A0D;
  --gold:#F4C66A; --success:#3FC79B; --success-soft:rgba(63,199,155,.14); --danger:#F07A6E; --danger-soft:rgba(240,122,110,.14);
}
[data-theme="coast"] .hero{background:linear-gradient(155deg,var(--brand-soft) 0%,transparent 60%);border-radius:var(--r-xl);padding:38px 32px;margin-bottom:12px}
[data-theme="coast"] .hero h1 em{color:var(--brand)}
[data-theme="coast"] .eyebrow{background:var(--surface);border:1px solid var(--line-strong);color:var(--brand)}
[data-theme="coast"] .btn{border-radius:var(--r-pill)}
[data-theme="coast"] .btn-primary{background:linear-gradient(140deg,var(--brand),var(--brand-2))}
[data-theme="coast"] .searchbox{border-radius:var(--r-pill)}
[data-theme="coast"] .searchbox .btn{border-radius:var(--r-pill)}
[data-theme="coast"] .sel{border-left:1px solid var(--line)}
[data-theme="coast"] .segment{border-radius:var(--r-pill);background:var(--surface)}
[data-theme="coast"] .segment button.on{background:var(--brand);color:var(--on-brand)}
[data-theme="coast"] .show-main{border-radius:var(--r-xl)}
[data-theme="coast"] .show-main::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(14,116,144,.25),transparent 45%)}
[data-theme="coast"] .show-main .grad{background:linear-gradient(180deg,transparent 40%,rgba(4,20,30,.8))}
[data-theme="coast"] .cat .go{background:rgba(255,255,255,.2)}
[data-theme="coast"] .stat .si{background:var(--brand-soft);color:var(--brand);border-radius:var(--r-pill)}
[data-theme="coast"] .badge-brand{background:var(--brand);color:var(--on-brand)}
[data-theme="coast"] .badge-accent{background:var(--accent);color:var(--on-accent)}
[data-theme="coast"] .ptom{color:var(--brand)}
[data-theme="coast"] .dealer .v{border-radius:var(--r-pill)}
[data-theme="coast"] .cta{background:linear-gradient(120deg,var(--brand),var(--brand-2) 55%,#0A5C74);border-radius:var(--r-xl)}
[data-theme="coast"] footer{background:var(--surface-2)}

/* ============================================================
   BASE — ساختار و کامپوننت‌ها
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);min-height:100vh;padding-bottom:84px;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font-family:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-sm{width:13px;height:13px}

/* toggle light/dark */
.mode-toggle{position:fixed;top:16px;left:16px;z-index:300;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:11.5px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-1);transition:all var(--dur) var(--ease)}
.mode-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.mode-toggle .sun{display:none}
.mode-toggle .moon{display:inline}
[data-mode="dark"] .mode-toggle .sun{display:inline}
[data-mode="dark"] .mode-toggle .moon{display:none}
.tag{position:fixed;bottom:18px;right:18px;z-index:300;font-size:10px;font-weight:800;letter-spacing:.3px;
  padding:7px 13px;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);box-shadow:var(--shadow-2)}

/* utility */
.utility{border-bottom:1px solid var(--line);background:var(--surface-2);font-size:11.5px;color:var(--muted)}
.utility .wrap{display:flex;align-items:center;gap:18px;height:38px}
.util-loc{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:600}
.util-sep{width:1px;height:14px;background:var(--line-strong);opacity:.6}
.util-links{display:flex;gap:16px}
.util-links a:hover{color:var(--brand)}
.util-ticker{display:flex;align-items:center;gap:16px;margin-right:auto}
.tick{display:flex;align-items:center;gap:6px}
.tick b{color:var(--ink);font-weight:700}
.tick .up{color:var(--success);font-size:10px}
.tick .down{color:var(--danger);font-size:10px}
.util-phone{display:flex;align-items:center;gap:6px;color:var(--ink-2)}

/* header */
.header{position:sticky;top:0;z-index:90;background:color-mix(in srgb, var(--surface) 88%, transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;gap:26px;height:76px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{width:44px;height:44px;border-radius:var(--r-sm);background:var(--brand);color:var(--on-brand);display:grid;place-items:center;
  font-weight:900;font-size:19px;position:relative;box-shadow:var(--shadow-2)}
.brand-mark::after{content:"";position:absolute;inset:4px;border:1px solid color-mix(in srgb, var(--on-brand) 34%, transparent);border-radius:6px}
.brand b{display:block;font-size:19px;font-weight:900;letter-spacing:-.3px;line-height:1.2}
.brand small{display:block;font-size:8.5px;letter-spacing:2.6px;color:var(--muted);margin-top:2px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{padding:9px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:6px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav a:hover{background:var(--brand-soft);color:var(--brand)}
.nav a.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
.hsearch{flex:1;display:flex;align-items:center;gap:9px;height:44px;padding:0 15px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--muted);font-size:12.5px;min-width:150px;cursor:text;transition:border-color var(--dur) var(--ease)}
.hsearch:focus-within{border-color:var(--brand)}
.hsearch input{border:0;outline:0;background:transparent;flex:1;color:var(--ink);font-size:12.5px}
.hsearch input::placeholder{color:var(--muted)}
.hsearch kbd{font-family:inherit;font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.hact{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 18px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--brand-2);transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn-outline{background:transparent;color:var(--ink-2);border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{filter:brightness(1.06)}
.btn-lg{height:50px;padding:0 24px;font-size:13.5px;border-radius:var(--r-md)}

/* marquee (signal) */
.marquee{display:none;overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--accent);color:var(--on-accent);
  padding:9px 0;margin:0 0 34px;white-space:nowrap}
.marquee .track{display:inline-block;animation:mq 22s linear infinite;font-size:12.5px;font-weight:900;letter-spacing:1px}
.marquee span{margin:0 18px}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* hero */
.hero{padding:46px 0 34px;display:grid;grid-template-columns:1.06fr .94fr;gap:46px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--brand);
  background:var(--brand-soft);padding:7px 13px;border-radius:var(--r-pill);margin-bottom:18px}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--brand)}
.hero h1{font-size:45px;line-height:1.34;font-weight:900;letter-spacing:-1.1px;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lead{margin-top:15px;font-size:13.5px;line-height:2;color:var(--muted);max-width:500px}
.segment{display:inline-flex;padding:4px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md);margin-top:24px}
.segment button{border:0;background:transparent;font-size:12px;font-weight:600;color:var(--muted);padding:8px 18px;border-radius:var(--r-sm);cursor:pointer}
.segment button.on{background:var(--surface);color:var(--ink);font-weight:800;box-shadow:var(--shadow-1)}
.searchbox{display:flex;align-items:center;gap:4px;margin-top:14px;padding:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-2);max-width:600px}
.sel{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;font-size:11.5px;color:var(--ink-2);border-left:1px solid var(--line);white-space:nowrap;cursor:pointer}
.sel:first-child{border-left:0}
.searchbox input{flex:1;min-width:90px;height:40px;border:0;outline:0;background:transparent;font-size:12.5px;color:var(--ink)}
.searchbox input::placeholder{color:var(--muted)}
.quick{margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.quick a{padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2)}
.quick a:hover{border-color:var(--brand);color:var(--brand)}
.trustrow{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.trustrow span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2)}
.trustrow .ok{color:var(--success)}
.showcase{position:relative}
.show-main{border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--shadow-3);border:1px solid var(--line)}
.show-main img{width:100%;aspect-ratio:4/3;object-fit:cover}
.show-main .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,20,20,.72))}
.show-main .badge-top{position:absolute;top:14px;right:14px;display:flex;gap:6px}
.show-main .caption{position:absolute;bottom:16px;right:18px;left:18px;display:flex;align-items:flex-end;justify-content:space-between;color:#fff}
.show-main .caption small{display:block;font-size:10px;opacity:.85;margin-bottom:4px}
.show-main .caption b{font-size:16px;font-weight:900}
.show-main .price{text-align:left}
.show-main .price b{display:block;font-size:20px;font-weight:900;letter-spacing:-.4px}
.show-main .price span{display:block;font-size:10.5px;opacity:.9;margin-top:2px}
.show-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.mini{display:flex;align-items:center;gap:10px;padding:9px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);transition:all var(--dur) var(--ease)}
.mini:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.mini img{width:62px;height:48px;border-radius:var(--r-xs);object-fit:cover;flex-shrink:0}
.mini b{display:block;font-size:11px;font-weight:800;line-height:1.5}
.mini small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;padding:5px 9px;border-radius:7px;letter-spacing:.2px;backdrop-filter:blur(6px)}
.badge-brand{background:var(--brand);color:var(--on-brand)}
.badge-accent{background:var(--accent);color:var(--on-accent)}
.badge-soft{background:color-mix(in srgb, var(--surface) 82%, transparent);color:var(--ink);border:1px solid var(--line)}
.badge-ok{background:color-mix(in srgb, var(--surface) 82%, transparent);color:var(--success);border:1px solid color-mix(in srgb, var(--success) 34%, transparent)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;margin-bottom:46px}
.stat{padding:20px 22px;display:flex;align-items:center;gap:13px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .si{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex-shrink:0}
.stat b{display:block;font-size:20px;font-weight:900;letter-spacing:-.4px}
.stat small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}

/* section head */
.sec{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-l{display:flex;align-items:center;gap:12px}
.sec-l .bar{width:4px;height:22px;border-radius:2px;background:var(--accent)}
.sec-l h2{font-size:21px;font-weight:900;letter-spacing:-.4px}
.sec-l .cnt{font-size:11px;color:var(--muted);margin-right:4px;font-weight:500}
.sec-r{display:flex;align-items:center;gap:10px}
.sec-r a{font-size:11.5px;font-weight:700;color:var(--brand);display:flex;align-items:center;gap:5px}
.sec-r a:hover{color:var(--brand-2)}

/* categories */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px}
.cat{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-height:170px;display:flex;align-items:flex-end;box-shadow:var(--shadow-1);transition:all var(--dur) var(--ease)}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.cat:hover img{transform:scale(1.04)}
.cat .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,18,.05) 20%,rgba(8,18,18,.78) 100%)}
.cat .in{position:relative;z-index:2;padding:20px;width:100%;display:flex;align-items:center;justify-content:space-between;color:#fff}
.cat .in b{display:block;font-size:16px;font-weight:900}
.cat .in small{display:block;font-size:10.5px;opacity:.82;margin-top:3px}
.cat .go{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25)}

/* featured */
.featured{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:50px}
.fcard{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-1);transition:all var(--dur) var(--ease);display:flex;flex-direction:column}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.fcard .fm{position:relative;aspect-ratio:16/10;overflow:hidden}
.fcard .fm img{width:100%;height:100%;object-fit:cover}
.fcard .fb{position:absolute;top:12px;right:12px;display:flex;gap:5px}
.fcard .body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.fcard .kick{font-size:10px;letter-spacing:.6px;color:var(--muted);font-weight:600}
.fcard h3{font-size:14px;font-weight:800;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:48px}
.fcard .meta{display:flex;gap:10px;font-size:10.5px;color:var(--muted);flex-wrap:wrap}
.fcard .foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.pbull{display:flex;align-items:baseline;gap:5px}
.pbull b{font-size:19px;font-weight:900;letter-spacing:-.4px;color:var(--ink)}
.pbull span{font-size:9.5px;color:var(--muted);font-weight:600}
.ptom{font-size:10.5px;font-weight:700;color:var(--accent);white-space:nowrap}
.seller{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:10px;color:var(--muted)}
.seller .av{width:18px;height:18px;border-radius:6px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:8.5px;font-weight:800}
.seller .ok{width:5px;height:5px;border-radius:50%;background:var(--success)}

/* filter bar */
.filterbar{display:flex;align-items:center;gap:10px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:18px;flex-wrap:wrap}
.sortbtn{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:11.5px;color:var(--ink-2);background:var(--surface-2)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;height:36px;padding:0 13px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-sm);
  font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);cursor:pointer;transition:all var(--dur) var(--ease)}
.chip:hover{border-color:var(--line-strong)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}
.found{font-size:11px;color:var(--muted);white-space:nowrap}

/* grid cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:48px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-1);transition:all var(--dur) var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.card .media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.card:hover .media img{transform:scale(1.04)}
.card .badges{position:absolute;top:10px;right:10px;display:flex;gap:5px;flex-wrap:wrap;max-width:92%}
.card .fav{position:absolute;bottom:10px;left:10px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--surface) 88%, transparent);color:var(--ink-2);border:1px solid var(--line);backdrop-filter:blur(6px)}
.card .body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .topline{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;color:var(--muted)}
.card .topline .plate{display:flex;align-items:center;gap:4px}
.card h3{font-size:13px;font-weight:800;line-height:1.75;min-height:46px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{display:flex;gap:8px;font-size:10px;color:var(--muted);flex-wrap:wrap}
.card .meta i{display:flex;align-items:center;gap:3px;font-style:normal}
.card .foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.card .prow{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.card .prow b{font-size:19px;font-weight:900;letter-spacing:-.4px}
.card .prow b span{font-size:9.5px;color:var(--muted);font-weight:600;margin-right:2px}
.card .prow .t{font-size:10.5px;font-weight:700;color:var(--accent);white-space:nowrap}

/* rates */
.rates{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-bottom:48px}
.ratebox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-1)}
.ratebox h3{font-size:14px;font-weight:900;margin-bottom:4px}
.ratebox .sub{font-size:10.5px;color:var(--muted);margin-bottom:18px}
.rate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rate{padding:13px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.rate small{display:block;font-size:9.5px;color:var(--muted);margin-bottom:6px}
.rate b{display:block;font-size:16px;font-weight:900;letter-spacing:-.3px}
.rate .ch{display:block;font-size:9.5px;margin-top:4px;font-weight:700}
.rate .ch.up{color:var(--success)}.rate .ch.down{color:var(--danger)}.rate .ch.flat{color:var(--muted)}
.rate-note{margin-top:14px;font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px}
.calc{background:linear-gradient(150deg,var(--brand-soft),transparent 70%);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.calc h3{font-size:14px;font-weight:900}
.calc p{font-size:10.5px;color:var(--muted);line-height:1.9}
.calc .row{display:flex;align-items:center;gap:8px}
.calc .amt{flex:1;height:42px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);display:flex;align-items:center;padding:0 12px;font-size:13px;font-weight:800}
.calc .unit{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;background:var(--surface)}

/* dealers */
.dealers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:48px}
.dealer{display:flex;align-items:center;gap:13px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);transition:all var(--dur) var(--ease)}
.dealer:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.dealer .dl{width:46px;height:46px;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:900;font-size:15px;flex-shrink:0}
.dealer b{display:block;font-size:12.5px;font-weight:800}
.dealer small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.dealer .v{margin-right:auto;display:flex;align-items:center;gap:4px;font-size:9px;font-weight:800;color:var(--success);background:var(--success-soft);padding:4px 8px;border-radius:var(--r-pill)}

/* cta */
.cta{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:34px 38px;border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--brand),var(--brand-2));color:var(--on-brand);margin-bottom:50px;box-shadow:var(--shadow-3);position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;left:-90px;top:-160px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 65%);opacity:.55}
.cta h3{font-size:22px;font-weight:900;letter-spacing:-.5px}
.cta p{margin-top:7px;font-size:11.5px;opacity:.85;line-height:1.9}
.cta .btn{background:var(--surface);color:var(--brand);flex-shrink:0;height:48px;padding:0 26px;position:relative;z-index:2}
.cta .btn:hover{background:var(--surface-2);transform:translateY(-1px)}

/* footer */
footer{border-top:1px solid var(--line);background:var(--surface-2);padding:40px 0 26px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:32px;margin-bottom:28px}
.fgrid h4{font-size:11px;font-weight:800;letter-spacing:.4px;margin-bottom:13px;color:var(--ink)}
.fgrid a{display:block;font-size:11.5px;color:var(--muted);margin-bottom:8px}
.fgrid a:hover{color:var(--brand)}
.fgrid p{font-size:11px;color:var(--muted);line-height:2.1;margin-top:10px}
.fbottom{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:18px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted)}
.fbottom .social{display:flex;gap:8px}
.fbottom .social a{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.fbottom .social a:hover{border-color:var(--brand);color:var(--brand)}

/* mobile nav */
.mnav{display:none;position:fixed;bottom:0;right:0;left:0;z-index:120;height:66px;background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(18px);border-top:1px solid var(--line);grid-template-columns:repeat(5,1fr);align-items:center}
.mnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:var(--muted)}
.mnav a.on{color:var(--brand);font-weight:700}
.mnav a svg{width:20px;height:20px}
.mcta{position:fixed;bottom:82px;left:16px;z-index:120;width:50px;height:50px;border-radius:16px;background:var(--accent);color:var(--on-accent);
  display:none;place-items:center;box-shadow:var(--shadow-3)}

/* responsive */
@media (max-width:1080px){
  .nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:26px;gap:26px}
  .showcase{max-width:560px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .featured{grid-template-columns:repeat(2,1fr)}
  .rates{grid-template-columns:1fr}
  .dealers{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-left:0}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .utility{display:none}
  .header .wrap{height:60px;gap:10px;justify-content:space-between}
  .hsearch{display:none}
  .hact .btn-outline{display:none}
  .btn{height:38px;padding:0 12px;font-size:11px}
  .brand-mark{width:36px;height:36px;font-size:15px;border-radius:10px}
  .brand b{font-size:15px}.brand small{display:none}
  .hero{padding:20px 0 10px}
  .hero h1{font-size:25px;line-height:1.5;letter-spacing:-.4px}
  .hero .lead{font-size:11.5px;margin-top:10px}
  .eyebrow{font-size:9.5px;padding:5px 10px;margin-bottom:12px}
  .segment{margin-top:14px}
  .segment button{padding:6px 12px;font-size:10.5px}
  .searchbox{flex-wrap:wrap;padding:6px}
  .sel{height:32px;font-size:10.5px;padding:0 7px}
  .searchbox input{height:32px;font-size:11px;min-width:100px}
  .searchbox .btn{width:100%}
  .quick{font-size:10px;gap:5px}
  .trustrow{gap:10px;margin-top:16px}
  .trustrow span{font-size:9.5px}
  .show-main img{aspect-ratio:16/11}
  .show-main .caption b{font-size:12px}
  .show-main .price b{font-size:15px}
  .show-mini{grid-template-columns:1fr 1fr;gap:8px}
  .mini img{width:44px;height:36px}
  .mini b{font-size:9.5px}.mini small{font-size:8.5px}
  .stats{margin-bottom:26px;border-radius:var(--r-md)}
  .stat{padding:12px 13px;gap:9px}
  .stat .si{width:30px;height:30px;border-radius:8px}
  .stat b{font-size:15px}.stat small{font-size:9px}
  .cats{grid-template-columns:1fr;gap:9px;margin-bottom:26px}
  .cat{min-height:112px;border-radius:var(--r-md)}
  .cat .in{padding:14px}
  .cat .in b{font-size:13px}
  .featured{grid-template-columns:1fr;gap:10px;margin-bottom:28px}
  .fcard .body{padding:12px 13px}
  .sec-l h2{font-size:16px}
  .sec-l .cnt{font-size:9.5px}
  .filterbar{padding:8px;gap:6px}
  .chips{gap:5px}
  .chip{height:31px;font-size:10px;padding:0 10px}
  .grid{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:26px}
  .card{border-radius:var(--r-md)}
  .card .body{padding:9px 10px 10px;gap:5px}
  .card h3{font-size:11px;min-height:38px;line-height:1.7}
  .card .prow b{font-size:14px}
  .card .prow .t{font-size:8.5px}
  .card .meta{font-size:8.5px;gap:5px}
  .card .badges .badge{font-size:7.5px;padding:3px 6px}
  .rates{gap:10px;margin-bottom:26px}
  .ratebox,.calc{padding:16px;border-radius:var(--r-md)}
  .rate-grid{grid-template-columns:1fr 1fr}
  .dealers{grid-template-columns:1fr;gap:8px;margin-bottom:26px}
  .dealer{padding:12px}
  .cta{flex-direction:column;align-items:flex-start;padding:22px 20px;border-radius:var(--r-lg);margin-bottom:26px}
  .cta h3{font-size:16px}
  .cta .btn{width:100%}
  .fgrid{grid-template-columns:1fr 1fr;gap:20px}
  .fbottom{flex-direction:column;align-items:flex-start}
  .mnav{display:grid}
  .mcta{display:grid}
  .tag{bottom:80px;right:12px}
  .mode-toggle{top:10px;left:10px;height:34px;padding:0 10px;font-size:10px}
}

