/* ═══════════════════════════════════════════════════════════
   MGR SWISS AUTO — Premium Design System v3
   Inspired by: BMW, Porsche, Audi corporate sites
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800;900&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* Core palette */
  --c-void:    #030405;
  --c-deep:    #060709;
  --c-base:    #0a0c0f;
  --c-lift:    #0f1216;
  --c-raise:   #151820;
  --c-high:    #1c2028;
  --c-edge:    #242933;
  --c-wire:    rgba(255,255,255,.06);
  --c-wire2:   rgba(255,255,255,.1);

  /* Text */
  --c-white:   #f8f9fa;
  --c-text:    #c8cdd6;
  --c-muted:   #6b7480;
  --c-dim:     #353c47;

  /* Brand */
  --red:       #d4192f;
  --red2:      #f01835;
  --red-glow:  rgba(212,25,47,.25);
  --gold:      #c49a3c;
  --gold2:     #e8bb5a;
  --gold-dim:  rgba(196,154,60,.15);

  /* Radius */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;

  /* Spacing */
  --side: clamp(1.25rem, 4vw, 3rem);

  /* Fonts */
  --f-sans:  'Outfit', sans-serif;
  --f-serif: 'DM Serif Display', serif;

  /* Transitions */
  --t-fast:   .15s ease;
  --t-base:   .25s ease;
  --t-slow:   .4s cubic-bezier(.25,.46,.45,.94);
  --t-spring: .5s cubic-bezier(.34,1.56,.64,1);
}


/* ── PERFORMANCE ── */
.pv-img img, .hcard-img img, .gal-item img {
  will-change: transform;
  content-visibility: auto;
}
.card, .pv-card, .hcard {
  contain: layout style;
}
/* GPU-accelerate frequent transitions */
.navbar, .nb-badge, .btn, .social-btn {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* font-display swap via CSS */
@font-face {
  font-display: swap;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--c-deep);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--red); color: #fff; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--c-base); }
::-webkit-scrollbar-thumb { background: var(--c-edge); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@keyframes slideRight { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:none; } }
@keyframes scanline { 0%{transform:translateX(-100%);opacity:0} 20%{opacity:.8} 80%{opacity:.8} 100%{transform:translateX(100%);opacity:0} }
@keyframes pulseRed { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.15)} }
@keyframes barGrow  { from{width:0} to{width:var(--bar-w,100%)} }
@keyframes shimmer  { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes spin     { to{transform:rotate(360deg)} }

/* Entrance — triggered by .visible class via JS */
.anim-fade   { opacity:0; transition: opacity .55s ease; }
.anim-up     { opacity:0; transform:translateY(22px); transition: opacity .55s ease, transform .55s cubic-bezier(.25,.46,.45,.94); }
.anim-left   { opacity:0; transform:translateX(-18px); transition: opacity .5s ease, transform .5s cubic-bezier(.25,.46,.45,.94); }
.anim-scale  { opacity:0; transform:scale(.96); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.2,.64,1); }
.anim-fade.visible, .anim-up.visible, .anim-left.visible, .anim-scale.visible {
  opacity:1; transform:none;
}
/* Stagger delays */
.sd-1  { transition-delay: .05s !important; }
.sd-2  { transition-delay: .10s !important; }
.sd-3  { transition-delay: .15s !important; }
.sd-4  { transition-delay: .20s !important; }
.sd-5  { transition-delay: .25s !important; }
.sd-6  { transition-delay: .30s !important; }
.sd-7  { transition-delay: .36s !important; }
.sd-8  { transition-delay: .42s !important; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--c-lift) 25%, var(--c-raise) 50%, var(--c-lift) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */
.t-eyebrow {
  font-family: var(--f-sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--red);
  display: inline-flex; align-items: center; gap: 10px;
}
.t-eyebrow::before { content:''; width: 20px; height: 1px; background: var(--red); }
.t-eyebrow.gold { color: var(--gold); }
.t-eyebrow.gold::before { background: var(--gold); }

.t-h1 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: .95; letter-spacing: -.015em; color: var(--c-white);
}
.t-h1 em { font-style: italic; color: var(--red); }
.t-h1 .light { font-family: var(--f-sans); font-weight: 200; color: var(--c-muted); }

.t-h2 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  line-height: 1; letter-spacing: -.01em; color: var(--c-white);
}
.t-h2 em { font-style: italic; color: var(--red); }

.t-h3 {
  font-family: var(--f-sans); font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: -.01em; color: var(--c-white);
}

.t-body { font-size: .93rem; font-weight: 300; color: var(--c-muted); line-height: 1.8; }
.t-cap  { font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-dim); }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 700;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 26px; border: none; border-radius: var(--r-xs);
  cursor: pointer; transition: all var(--t-base);
  position: relative; overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.08);
  opacity: 0; transition: opacity var(--t-fast);
}
.btn:hover::after { opacity: 1; }
.btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--t-base); }
.btn:hover svg { transform: translateX(2px); }

.btn-red  { background: var(--red);  color: #fff; }
.btn-red:hover  { background: var(--red2);  box-shadow: 0 8px 28px var(--red-glow); transform: translateY(-1px); }
.btn-gold { background: var(--gold-dim); border: 1px solid rgba(196,154,60,.3); color: var(--gold); }
.btn-gold:hover { background: rgba(196,154,60,.22); border-color: rgba(196,154,60,.5); color: var(--gold2); }
.btn-ghost { background: transparent; border: 1px solid var(--c-wire2); color: var(--c-text); }
.btn-ghost:hover { border-color: rgba(255,255,255,.25); color: var(--c-white); background: rgba(255,255,255,.04); }
.btn-green { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); color: #4ade80; }
.btn-green:hover { background: rgba(34,197,94,.18); }
.btn-lg { padding: 16px 32px; font-size: .78rem; }
.btn-sm { padding: 8px 16px; font-size: .65rem; }

/* ═══════════════════════════════════════════════════════════
   CARD BASE
   ═══════════════════════════════════════════════════════════ */
.card {
  background: var(--c-lift);
  border: 1px solid var(--c-wire);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t-base), background var(--t-base);
  position: relative;
}
.card::before {
  content:'';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
  z-index: 1;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  border-color: rgba(212,25,47,.2);
  background: var(--c-raise);
}
.card:hover::before { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════ */
.topbar {
  height: 36px;
  background: var(--c-void);
  border-bottom: 1px solid var(--c-wire);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--side);
  font-size: .63rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-dim);
  position: sticky; top: 0; z-index: 600;
}
.topbar-left { display: flex; align-items: center; gap: 1.5rem; }
.topbar-right { display: flex; align-items: center; gap: 1.5rem; }
.tb-sep { width: 1px; height: 10px; background: var(--c-wire); }
.tb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); animation: pulseRed 2.5s ease infinite; }
.topbar a { color: var(--c-dim); transition: color var(--t-base); }
.topbar a:hover { color: var(--c-muted); }
.tb-plat { display: flex; align-items: center; gap: 5px; color: #8a7040 !important; font-weight: 700; }
.tb-plat svg { width: 9px; height: 9px; color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════ */
.navbar {
  height: 64px;
  background: rgba(6,7,9,.9);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--c-wire);
  display: flex; align-items: center;
  padding: 0 var(--side);
  position: sticky; top: 36px; z-index: 500;
  transition: background var(--t-slow), box-shadow var(--t-slow);
}
.navbar.scrolled {
  background: rgba(6,7,9,.98);
  box-shadow: 0 1px 0 var(--c-wire), 0 4px 24px rgba(0,0,0,.3);
}

.nb-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; margin-right: 2rem; }
.nb-badge {
  width: 36px; height: 36px;
  background: var(--red);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  position: relative; flex-shrink: 0;
  box-shadow: 0 2px 16px var(--red-glow);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.nb-logo:hover .nb-badge { box-shadow: 0 4px 24px var(--red-glow); transform: scale(1.05); }
.nb-badge::before,.nb-badge::after {
  content:''; position:absolute; background:#fff; border-radius:1px;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.nb-badge::before { width:52%; height:11%; }
.nb-badge::after  { width:11%; height:52%; }
.nb-brand { font-family: var(--f-sans); font-weight: 800; font-size: .9rem; letter-spacing: .05em; color: var(--c-white); text-transform: uppercase; line-height:1.1; }
.nb-sub   { font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-dim); margin-top: 1px; }
.nb-plat  {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 2px;
  background: var(--gold-dim); border: 1px solid rgba(196,154,60,.25);
  font-size: .54rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a8843a;
}
.nb-plat svg { width: 8px; height: 8px; color: var(--gold); }

.nb-links { display: flex; align-items: stretch; height: 64px; flex: 1; }
.nb-a {
  display: flex; align-items: center; padding: 0 1rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-dim); border-bottom: 2px solid transparent;
  transition: color var(--t-base), border-color var(--t-base);
  white-space: nowrap; position: relative;
}
.nb-a:hover { color: var(--c-text); }
.nb-a.on { color: var(--c-white); border-bottom-color: var(--red); }
.nb-a::after {
  content:''; position:absolute; bottom:-2px; left:50%; right:50%;
  height:2px; background:var(--red); transition:left var(--t-base), right var(--t-base);
}
.nb-a:not(.on):hover::after { left:0; right:0; }

.nb-rent-btn {
  display: flex; align-items: center; gap: 7px;
  margin-left: auto; padding: 7px 16px;
  background: var(--gold-dim); border: 1px solid rgba(196,154,60,.25); border-radius: var(--r-xs);
  font-size: .67rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9a7830;
  transition: all var(--t-base); white-space: nowrap; flex-shrink: 0;
}
.nb-rent-btn svg { width: 12px; height: 12px; transition: transform var(--t-base); }
.nb-rent-btn:hover { background: rgba(196,154,60,.2); border-color: rgba(196,154,60,.5); color: var(--gold2); }
.nb-rent-btn:hover svg { transform: scale(1.1); }

.nb-actions { display: flex; align-items: center; gap: .5rem; margin-left: 1rem; flex-shrink: 0; }
.nb-tel {
  display: flex; align-items: center; gap: 7px; padding: 7px 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--c-wire); border-radius: var(--r-xs);
  font-size: .7rem; font-weight: 600; letter-spacing: .03em; color: var(--c-muted);
  transition: all var(--t-base); white-space: nowrap;
}
.nb-tel svg { width: 11px; height: 11px; transition: transform var(--t-spring); }
.nb-tel:hover { border-color: var(--c-wire2); color: var(--c-white); background: rgba(255,255,255,.05); }
.nb-tel:hover svg { transform: rotate(-10deg) scale(1.1); }
.nb-cta {
  display: flex; align-items: center; gap: 7px; padding: 9px 20px;
  background: var(--red); color: #fff; border-radius: var(--r-xs);
  font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  transition: all var(--t-base); white-space: nowrap;
}
.nb-cta:hover { background: var(--red2); box-shadow: 0 4px 20px var(--red-glow); transform: translateY(-1px); }

@media(max-width:960px){.nb-links .nb-a:not(.on){display:none}.nb-plat{display:none}}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 100px); max-height: 860px;
  display: flex; align-items: flex-end;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 70% 20%, rgba(212,25,47,.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 5% 90%, rgba(196,154,60,.04) 0%, transparent 50%),
    linear-gradient(168deg, #030405 0%, #07090d 100%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 80%);
}
.hero-scan { position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--red) 50%,transparent);animation:scanline 4s ease-in-out infinite; }
.hero-vline { position:absolute;left:var(--side);top:10%;bottom:20%;width:1px;background:linear-gradient(to bottom,transparent,var(--red) 30%,var(--red) 70%,transparent);opacity:.4; }
.hero-inner { position:relative;z-index:2;padding:0 var(--side) clamp(3rem,5vw,5rem);width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;flex-wrap:wrap; }
.hero-text { max-width:680px; }
.hero-stats-panel { background:rgba(10,12,15,.8);border:1px solid var(--c-wire);backdrop-filter:blur(12px);display:grid;grid-template-columns:1fr 1fr;flex-shrink:0;min-width:250px;border-radius:var(--r-sm);overflow:hidden; }
.hs { padding:1rem 1.25rem;text-align:center;border-right:1px solid var(--c-wire); }
.hs:last-child{border-right:none}
.hs:nth-child(1),.hs:nth-child(2){border-bottom:1px solid var(--c-wire)}
.hs-n { font-family:var(--f-sans);font-weight:900;font-size:1.6rem;color:var(--c-white);line-height:1; }
.hs-n sup { font-size:.42em;color:var(--red); }
.hs-l { font-size:.56rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-dim);margin-top:4px; }

/* ═══════════════════════════════════════════════════════════
   PLATINUM STRIP
   ═══════════════════════════════════════════════════════════ */
.plat-strip {
  background: var(--c-void);
  border-top: 1px solid rgba(196,154,60,.12);
  border-bottom: 1px solid rgba(196,154,60,.12);
  padding: 1rem var(--side);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.plat-left { display:flex;align-items:center;gap:1.25rem; }
.plat-icon { width:34px;height:34px;background:var(--gold-dim);border:1px solid rgba(196,154,60,.25);border-radius:var(--r-xs);display:grid;place-items:center;flex-shrink:0; }
.plat-icon svg { width:15px;height:15px;color:var(--gold); }
.plat-name { font-size:.78rem;font-weight:700;color:var(--gold);letter-spacing:.04em;text-transform:uppercase; }
.plat-desc { font-size:.68rem;font-weight:300;color:var(--c-muted);margin-top:2px; }
.plat-right { display:flex;align-items:center;gap:2rem;flex-wrap:wrap; }
.plat-stat-n { font-family:var(--f-sans);font-weight:800;font-size:1.05rem;color:var(--gold); }
.plat-stat-l { font-size:.56rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#5a4f30; }
.plat-link {
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
  border:1px solid rgba(196,154,60,.2);border-radius:var(--r-xs);
  font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5a4f30;
  transition:all var(--t-base);
}
.plat-link:hover{border-color:rgba(196,154,60,.45);color:var(--gold);}

/* ═══════════════════════════════════════════════════════════
   CAR CARDS
   ═══════════════════════════════════════════════════════════ */
.pv-grid, .hcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px,1fr));
  gap: 1px; background: var(--c-wire); border: 1px solid var(--c-wire);
}

.pv-card, .hcard {
  background: var(--c-lift);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden; cursor: pointer;
  transition: background var(--t-base), transform var(--t-slow), box-shadow var(--t-slow);
  text-decoration: none; color: inherit;
}
.pv-card::after, .hcard::after {
  content:''; position:absolute; inset:0;
  border: 1.5px solid transparent; pointer-events:none; z-index:2;
  transition: border-color var(--t-base);
}
.pv-card:hover, .hcard:hover {
  background: var(--c-raise);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(212,25,47,.1);
  z-index: 1;
}
.pv-card:hover::after, .hcard:hover::after { border-color: rgba(212,25,47,.25); }

/* Image container — padding-top trick for ratio */
.pv-img, .hcard-img {
  width: 100%; padding-top: 60%; position: relative; overflow: hidden;
  background: var(--c-high); flex-shrink: 0;
}
.pv-img img, .hcard-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), opacity .3s ease;
}
.pv-card:hover .pv-img img, .hcard:hover .hcard-img img { transform: scale(1.06); }

/* Image overlay gradient */
.pv-img::after, .hcard-img::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:50%;
  background: linear-gradient(to top, rgba(10,12,15,.6), transparent);
  pointer-events:none; z-index:1;
}

.pv-no-img, .hcard-no-img { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--c-edge); }
.pv-no-img svg, .hcard-no-img svg { width:36px;height:36px; }

/* Badges */
.badge { position:absolute;z-index:3;font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:0; }
.badge-ch  { top:0;left:0;background:var(--red);color:#fff; }
.badge-top { top:0;right:0;background:var(--gold);color:#000; }
.badge-rec { top:0;right:0;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7); }
.badge-disc { bottom:8px;left:8px;background:#064e3b;border:1px solid #065f46;color:#34d399; }
.badge-new { top:0;left:0;background:#1e3a8a;border:1px solid #1d4ed8;color:#93c5fd; }

.img-count { position:absolute;bottom:8px;right:8px;z-index:3;background:rgba(0,0,0,.7);color:rgba(255,255,255,.65);font-size:.6rem;padding:3px 8px;backdrop-filter:blur(4px);border-radius:2px; }

/* Card body */
.pv-body, .hcard-body { padding:1.1rem 1.15rem .75rem;flex:1;display:flex;flex-direction:column;gap:.5rem; }
.pv-name, .hcard-name {
  font-family:var(--f-sans);font-weight:600;font-size:.92rem;color:var(--c-white);
  line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition: color var(--t-base);
}
.pv-card:hover .pv-name, .hcard:hover .hcard-name { color: #fff; }
.pv-tags, .hcard-tags { display:flex;gap:.3rem;flex-wrap:wrap; }
.pv-tag, .htag {
  background: var(--c-high); border: 1px solid var(--c-edge);
  color: var(--c-dim); font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding: 2px 7px; border-radius: 2px; transition: all var(--t-fast);
}
.pv-card:hover .pv-tag, .hcard:hover .htag { border-color: rgba(255,255,255,.12); color: var(--c-muted); }

/* Card footer */
.pv-foot, .hcard-foot {
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.15rem;border-top:1px solid var(--c-wire);
  background: rgba(0,0,0,.15);
}
.pv-price, .hcard-price {
  font-family:var(--f-sans);font-weight:800;font-size:1.15rem;
  color:var(--c-white);letter-spacing:-.01em;
}
.pv-price.na, .hcard-price.na { font-size:.82rem;font-weight:400;color:var(--c-muted); }
.pv-price-old, .hcard-price-old { font-size:.7rem;color:var(--c-muted);text-decoration:line-through;display:block;margin-bottom:1px; }
.pv-price-wrap, .hcard-price-wrap { display:flex;flex-direction:column;gap:1px; }
.pv-arrow, .hcard-arrow {
  width:32px;height:32px;border:1px solid var(--c-edge);border-radius:var(--r-xs);
  display:grid;place-items:center;color:var(--c-dim);
  transition:all var(--t-base);flex-shrink:0;
}
.pv-arrow svg, .hcard-arrow svg { width:13px;height:13px;transition:transform var(--t-base); }
.pv-card:hover .pv-arrow, .hcard:hover .hcard-arrow { background:var(--red);border-color:var(--red);color:#fff; }
.pv-card:hover .pv-arrow svg, .hcard:hover .hcard-arrow svg { transform:translateX(2px); }

/* ═══════════════════════════════════════════════════════════
   FILTER STRIP
   ═══════════════════════════════════════════════════════════ */
.filter-row {
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  padding: .9rem 0; border-bottom: 1px solid var(--c-wire);
}
.fi { flex:1;min-width:180px;position:relative; }
.fi input {
  width:100%; background:var(--c-lift); border:1px solid var(--c-wire);
  border-radius:var(--r-sm); color:var(--c-text);
  font-family:var(--f-sans);font-size:.83rem;padding:9px 12px 9px 34px;
  outline:none; transition:border-color var(--t-base), box-shadow var(--t-base);
}
.fi input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(212,25,47,.1); }
.fi input::placeholder { color:var(--c-dim); }
.fi-ico { position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--c-dim);pointer-events:none; }
.fsel {
  background:var(--c-lift);border:1px solid var(--c-wire);border-radius:var(--r-sm);
  color:var(--c-text);font-family:var(--f-sans);font-size:.82rem;
  padding:9px 26px 9px 11px;outline:none;cursor:pointer;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23555'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
  transition:border-color var(--t-base);
}
.fsel:focus { border-color:var(--red); }
.fbtn {
  font-family:var(--f-sans);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 18px;border:none;border-radius:var(--r-sm);cursor:pointer;transition:all var(--t-base);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.fbtn-r { background:var(--red);color:#fff; }
.fbtn-r:hover { background:var(--red2);box-shadow:0 4px 16px var(--red-glow); }
.fbtn-g { background:transparent;border:1px solid var(--c-wire);color:var(--c-muted); }
.fbtn-g:hover { border-color:var(--c-wire2);color:var(--c-text); }
.fcount { margin-left:auto;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-dim);white-space:nowrap; }
.fcount strong { font-family:var(--f-sans);font-size:.9rem;font-weight:700;color:var(--c-text); }

/* Badge filter pills */
.badge-pills { display:flex;gap:.35rem;padding:.8rem 0;border-bottom:1px solid var(--c-wire);flex-wrap:wrap; }
.bpill {
  display:flex;align-items:center;gap:6px;padding:5px 13px;border-radius:100px;
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all var(--t-base);text-decoration:none;
  border:1px solid var(--c-wire);color:var(--c-muted);background:var(--c-lift);
}
.bpill:hover { border-color:var(--c-wire2);color:var(--c-text); }
.bpill.a-all  { background:var(--red);border-color:var(--red);color:#fff; }
.bpill.a-top  { background:var(--gold-dim);border-color:rgba(196,154,60,.4);color:var(--gold); }
.bpill.a-disc { background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.25);color:#34d399; }
.bpill svg { width:8px;height:8px; }

/* ═══════════════════════════════════════════════════════════
   SECTION LAYOUT
   ═══════════════════════════════════════════════════════════ */
.section { padding: 4rem var(--side); }
.section.bg-alt  { background:var(--c-lift); border-top:1px solid var(--c-wire); border-bottom:1px solid var(--c-wire); }
.section.bg-deep { background:var(--c-void); border-top:1px solid var(--c-wire); border-bottom:1px solid var(--c-wire); }
.section-inner { max-width:1520px;margin:0 auto; }
.sec-hdr { display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap; }
.sec-link {
  font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c-muted);display:flex;align-items:center;gap:5px;
  transition:color var(--t-base);
}
.sec-link svg { width:11px;height:11px;transition:transform var(--t-base); }
.sec-link:hover { color:var(--c-text); }
.sec-link:hover svg { transform:translateX(3px); }

/* Grid layouts */
.g2 { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--c-wire);border:1px solid var(--c-wire); }
.g3 { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--c-wire);border:1px solid var(--c-wire); }
.g4 { display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-wire);border:1px solid var(--c-wire); }
@media(max-width:1100px){.g4{grid-template-columns:1fr 1fr}}
@media(max-width:800px) {.g3{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}}
@media(max-width:520px) {.g3,.g4{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════════ */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 2px;
}
.gal-item {
  aspect-ratio: 4/3; overflow: hidden;
  background: var(--c-high); cursor: zoom-in;
  position: relative;
  border-radius: var(--r-xs);
}
.gal-item img {
  width:100%;height:100%;object-fit:cover;display:block;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), opacity .3s ease;
}
.gal-item:hover img { transform: scale(1.08); }
.gal-overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(3,4,5,.7) 0%, transparent 50%);
  opacity:0;transition:opacity var(--t-base);
  display:flex;align-items:flex-end;padding:.75rem;
}
.gal-item:hover .gal-overlay { opacity:1; }
.gal-overlay-text { font-size:.65rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.7); }
.gal-zoom-icon {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);border-radius:50%;
  width:44px;height:44px;display:grid;place-items:center;color:#fff;
  opacity:0;transition:all var(--t-base);
}
.gal-item:hover .gal-zoom-icon { opacity:1;transform:translate(-50%,-50%) scale(1); }
.gal-zoom-icon svg { width:18px;height:18px; }

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════ */
.lb {
  position:fixed;inset:0;background:rgba(3,4,5,.97);z-index:9999;
  display:none;align-items:center;justify-content:center;
  animation:fadeIn .2s ease;
}
.lb.open{display:flex;}
.lb-img-wrap { position:relative;max-width:90vw;max-height:88vh;display:flex;align-items:center;justify-content:center; }
.lb img { max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--r-xs); }
.lb-x {
  position:absolute;top:1.25rem;right:1.5rem;
  width:40px;height:40px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;font-size:.9rem;
  transition:all var(--t-base);z-index:1;
}
.lb-x:hover{background:var(--red);border-color:var(--red);}
.lb-nav {
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;font-size:1.1rem;
  transition:all var(--t-base);
}
.lb-nav:hover{background:var(--red);border-color:var(--red);}
.lb-prev{left:1.25rem;}.lb-next{right:1.25rem;}
.lb-ctr{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);}
.lb-dots{display:flex;gap:5px;margin-top:.9rem;}
.lb-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:all var(--t-base);}
.lb-dot.on{background:var(--red);transform:scale(1.3);}

/* ═══════════════════════════════════════════════════════════
   BAR CHART
   ═══════════════════════════════════════════════════════════ */
.bar-row { display:flex;align-items:center;gap:1rem;padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.03); }
.bar-label { font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c-text);width:70px;flex-shrink:0; }
.bar-track { flex:1;height:3px;background:var(--c-high);border-radius:2px;overflow:hidden; }
.bar-fill { height:3px;background:linear-gradient(90deg,var(--red),var(--red2));border-radius:2px;width:0;transition:width 1.4s cubic-bezier(.25,.46,.45,.94); }
.bar-val { font-size:.7rem;color:var(--c-muted);width:22px;text-align:right;flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  background: var(--c-void);
  border-top: 1px solid var(--c-wire);
  position: relative; overflow: hidden;
}
footer::before {
  content:''; position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,25,47,.4) 50%,transparent);
}
.footer-inner {
  max-width:1400px;margin:0 auto;
  padding:3.5rem var(--side) 2rem;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;
}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:500px){.footer-inner{grid-template-columns:1fr}}
.footer-brand {}
.footer-logo { display:flex;align-items:center;gap:10px;margin-bottom:1rem; }
.footer-badge { width:30px;height:30px;background:var(--red);border-radius:var(--r-xs);position:relative;flex-shrink:0; }
.footer-badge::before,.footer-badge::after{content:'';position:absolute;background:#fff;border-radius:1px;top:50%;left:50%;transform:translate(-50%,-50%);}
.footer-badge::before{width:52%;height:11%;}
.footer-badge::after{width:11%;height:52%;}
.footer-brandname { font-size:.88rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--c-white); }
.footer-tagline { font-size:.68rem;color:var(--c-dim);letter-spacing:.06em; }
.footer-desc { font-size:.8rem;font-weight:300;color:var(--c-muted);line-height:1.75;max-width:280px;margin-bottom:1.25rem; }
.footer-social { display:flex;gap:.5rem; }
.social-btn {
  width:36px;height:36px;border:1px solid var(--c-wire);border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--c-muted);transition:all var(--t-base);
}
.social-btn:hover { border-color:var(--c-wire2);color:var(--c-white);background:rgba(255,255,255,.05); }
.social-btn.fb:hover { border-color:#1877f2;color:#1877f2;background:rgba(24,119,242,.08); }
.social-btn.olx:hover { border-color:var(--red);color:var(--red);background:var(--red-glow); }
.social-btn svg { width:16px;height:16px; }
.f-col-title { font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-dim);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--c-wire); }
.f-links { display:flex;flex-direction:column;gap:.5rem; }
.f-link { font-size:.8rem;color:var(--c-muted);transition:all var(--t-base);display:flex;align-items:center;gap:6px; }
.f-link::before{content:'';width:0;height:1px;background:var(--red);transition:width var(--t-base);}
.f-link:hover{color:var(--c-text);padding-left:4px;}
.f-link:hover::before{width:8px;}
.footer-bottom {
  max-width:1400px;margin:0 auto;
  padding:1.25rem var(--side);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;
  border-top:1px solid var(--c-wire);
}
.footer-bottom p { font-size:.68rem;color:var(--c-dim);letter-spacing:.03em; }
.footer-bottom a { color:var(--c-dim);transition:color var(--t-base); }
.footer-bottom a:hover { color:var(--c-muted); }

/* Hours table */
.hours-list { display:flex;flex-direction:column;gap:.25rem; }
.hour-row { display:flex;justify-content:space-between;align-items:center;font-size:.77rem;padding:.25rem 0;border-bottom:1px solid rgba(255,255,255,.04); }
.hour-row:last-child{border-bottom:none;}
.hour-day { color:var(--c-muted); }
.hour-time { font-weight:600;color:var(--c-text);font-family:var(--f-sans); }
.hour-time.closed { color:var(--c-dim); }
.hour-time.open-now { color:#4ade80; }

/* ═══════════════════════════════════════════════════════════
   MISC COMPONENTS
   ═══════════════════════════════════════════════════════════ */
.divider { height:1px;background:var(--c-wire);margin:0; }
.notice-bar { padding:.55rem 0;font-size:.7rem;color:var(--c-muted);letter-spacing:.04em;border-bottom:1px solid var(--c-wire); }
.notice-bar a { color:var(--red); }
.page-head { display:flex;align-items:flex-end;justify-content:space-between;padding:2.5rem 0 1.5rem;border-bottom:1px solid var(--c-wire);gap:1rem;flex-wrap:wrap; }
.page-title { font-family:var(--f-serif);font-weight:400;font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--c-white);line-height:1; }
.page-title em { font-style:italic;color:var(--red); }
.page-meta { font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-dim); }

/* Hover info tooltip on images */
.img-hover-info { position:absolute;bottom:0;left:0;right:0;z-index:3;padding:.6rem .9rem;background:linear-gradient(to top,rgba(3,4,5,.9),transparent);transform:translateY(100%);transition:transform var(--t-base);font-size:.65rem;color:rgba(255,255,255,.75); }
.pv-card:hover .img-hover-info,.hcard:hover .img-hover-info{transform:none;}

/* Spec row hover */
.spec-row,.sbox-row,.ap-srow { transition:background var(--t-fast); }
.spec-row:hover,.sbox-row:hover,.ap-srow:hover { background:rgba(255,255,255,.025); }

/* Link underline anim */
.link-anim { position:relative; }
.link-anim::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transition:transform var(--t-base);transform-origin:left;}
.link-anim:hover::after{transform:scaleX(1);}