/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  --brand:        #005d7d;
  --brand-hover:  #007aa3;
  --black:        #1a1a1a;
  --white:        #ffffff;
  --gray-bg:      #f6f6f6;
  --gray-bg2:     #fbfbfb;
  --text:         #212121;
  --text-muted:   rgba(33,33,33,0.55);
  --text-ph:      rgba(33,33,33,0.4);
  --border:       rgba(0,0,0,0.12);
  --border-brand: #005d7d;
  --shadow-card:  0 4px 24px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 40px rgba(0,0,0,0.14);
  --nav-h:        72px;
  --max-w:        1344px;
  --px:           48px;
  --py:           80px;
  --gap:          32px;
  --radius-card:  20px;
  --radius-news:  12px;
  --radius-btn:   8px;
  --radius-pill:  999px;
  --tr:           0.2s ease;
}

/* ══════════════════════════════════════
   RESET
══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',sans-serif;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;letter-spacing:-0.01em}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit}

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--px)}
.section{padding:var(--py) 0}
.section--gray{background:var(--gray-bg)}
.section--gray2{background:var(--gray-bg2)}
.divider{height:1px;background:var(--border)}
.eyebrow{font-size:13px;font-weight:600;color:var(--brand);letter-spacing:0.01em;margin-bottom:10px}
.section-title{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-0.025em;line-height:1.2;margin-bottom:12px}
.section-sub{font-size:16px;color:var(--text-muted);line-height:1.6}

/* ══════════════════════════════════════
   NAV (reused from homepage)
══════════════════════════════════════ */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:var(--nav-h)}
.nav__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--px);height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{font-size:22px;font-weight:800;letter-spacing:-0.04em;flex-shrink:0}
.nav__links{display:flex;align-items:center;gap:28px;list-style:none}
.nav__link{font-size:14px;font-weight:500;color:var(--text);display:flex;align-items:center;gap:4px;transition:color var(--tr);white-space:nowrap}
.nav__link:hover{color:var(--brand)}
.nav__link svg{width:14px;height:14px;transition:transform var(--tr)}
.nav__link:hover svg{transform:rotate(180deg)}
.nav__cta{display:flex;align-items:center;gap:8px;padding:9px 18px;border:1.5px solid var(--border);border-radius:var(--radius-btn);font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;transition:border-color var(--tr),color var(--tr);flex-shrink:0}
.nav__cta:hover{border-color:var(--brand);color:var(--brand)}
.nav__hamburger{display:none;flex-direction:column;gap:5px;padding:4px}
.nav__hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:var(--radius-btn);font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;white-space:nowrap;border:1.5px solid transparent;transition:all var(--tr);cursor:pointer;letter-spacing:-0.01em}
.btn:active{transform:scale(0.98)}
.btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);box-shadow:0 4px 16px rgba(0,93,125,0.3)}
.btn--outline{border-color:var(--border);color:var(--text);background:var(--white)}
.btn--outline:hover{border-color:var(--brand);color:var(--brand)}
.btn--black{background:var(--black);color:#fff;border-color:var(--black)}
.btn--black:hover{background:#333}

/* ══════════════════════════════════════
   HERO — overlapping layout
══════════════════════════════════════ */
.hero-wrap {
  position: relative;
  /* total height = bg strip + bar, car overlaps from bg into bar */
}

/* Background photo strip */
.hero-bg-strip {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: #0a1e2e;
}
.hero-bg-strip__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Logo + prices bar */
.hero-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 140px 0 36px;
  position: relative;
  z-index: 1;
}
.hero-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.hero-bar__logo {
  height: 60px;
  object-fit: contain;
  display: block;
}
.hero-bar__prices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Car image — overlaps bg strip (bottom) and bar (top) */
.hero-car-wrap {
  position: absolute;
  left: 50%;
  /* sit the car so its vertical center is right at the bg/bar boundary */
  /* bg strip = 320px, car is ~220px tall → top = 320px - 110px = 210px */
  top: 100px;
  transform: translateX(-50%);
  width: 36%;
  max-width: 860px;
  pointer-events: none;
  z-index: 10;
}
.hero-car-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  /* drop shadow so car "floats" */
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.22));
}

/* Price badges */
.price-badge {
  display: flex; flex-direction: column; align-items: center;
  min-width: 180px;
}
.price-badge__value {
  border: 1.5px solid var(--brand);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 10px 20px;
  font-size: 26px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--text); background: var(--white);
  white-space: nowrap; width: 100%; text-align: center;
}
.price-badge__label {
  background: var(--brand); color: #fff;
  border-radius: 0 0 12px 12px;
  padding: 5px 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; width: 100%; text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .hero-bg-strip { height: 220px; }
  .hero-car-wrap { width: 50%; top: 60px; }
  .hero-bar { padding-top: 120px; padding-bottom: 28px; }
  .hero-bar__logo { height: 48px; }
  .hero-bar__prices { justify-content: center; }
}
@media (max-width: 640px) {
  .hero-bg-strip { height: 160px; }
  .hero-car-wrap { width: 94%; top: 40px; }
  .hero-bar { padding-top: 100px; padding-bottom: 28px; }
  .hero-bar__inner { gap: 16px; }
  .hero-bar__logo { height: 40px; }
  .price-badge__value { font-size: 20px; padding: 8px 16px; }
  .price-badge__label { font-size: 11px; padding: 5px 16px; }
  .hero-bar__prices { gap: 12px; justify-content: center; }
  .price-badge { min-width: 140px; }
}

/* ══════════════════════════════════════
   OVERVIEW — text + 2x2 feature grid
══════════════════════════════════════ */
.overview{padding:var(--py) 0}
.overview .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.overview__text{}
.overview__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feature-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-news);padding:20px;display:flex;flex-direction:column;gap:8px;transition:box-shadow var(--tr),border-color var(--tr)}
.feature-card:hover{border-color:rgba(0,93,125,0.3);box-shadow:var(--shadow-hover)}
.feature-card__head{display:flex;align-items:center;gap:10px}
.feature-card__icon{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.feature-card__title{font-size:16px;font-weight:700;letter-spacing:-0.02em}
.feature-card__desc{font-size:14px;color:var(--text-muted);line-height:1.6}

/* ══════════════════════════════════════
   PROMO CARDS SECTION
══════════════════════════════════════ */
.promo-section{padding:var(--py) 0;border-bottom:1px solid var(--border)}
.promo-section .wrap{display:grid;grid-template-columns:280px 1fr 1fr;gap:var(--gap);align-items:start}
.promo-card{background:var(--gray-bg2);border-radius:var(--radius-news);overflow:hidden;transition:box-shadow var(--tr),transform var(--tr)}
.promo-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.promo-card__img{width:100%;height:160px;object-fit:cover}
.promo-card__body{padding:16px}
.promo-card__title{font-size:18px;font-weight:700;letter-spacing:-0.02em;margin-bottom:8px}
.promo-card__desc{font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:14px}
.promo-card__footer{display:flex;justify-content:flex-end}

/* ══════════════════════════════════════
   POWER SPEC SECTION
══════════════════════════════════════ */
.power-section{padding:var(--py) 0}
.power-section.section--gray .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.power-card{background:rgba(255,255,255,0.8);border:1.5px solid var(--border);border-radius:var(--radius-news);padding:28px;display:flex;flex-direction:column;gap:16px}
.power-card__eyebrow{font-size:12px;font-weight:600;color:var(--brand);letter-spacing:0.08em;text-transform:uppercase}
.power-card__title{font-size:28px;font-weight:700;letter-spacing:-0.03em;line-height:1.2}
.power-card__desc{font-size:15px;color:var(--text-muted);line-height:1.6}
.power-stats{display:flex;gap:0}
.power-stat{padding:8px 24px 8px 0;border-right:1px solid var(--border);margin-right:24px}
.power-stat:last-child{border-right:none;padding-right:0;margin-right:0}
.power-stat__value{font-size:28px;font-weight:700;letter-spacing:-0.03em}
.power-stat__label{font-size:11px;color:var(--text-muted);margin-top:2px}
.power-image{border-radius:var(--radius-news);overflow:hidden;aspect-ratio:4/3;object-fit:cover;width:100%}

/* ══════════════════════════════════════
   3-COL PHOTO + TEXT (terrain section)
══════════════════════════════════════ */
.photo-cols{padding:var(--py) 0}
.photo-cols__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.photo-col__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-news);margin-bottom:16px}
.photo-col__title{font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:-0.02em}
.photo-col__desc{font-size:14px;color:var(--text-muted);line-height:1.6}

/* ══════════════════════════════════════
   WYJĄTKOWY DESIGN — interactive
══════════════════════════════════════ */
.design-section{padding:var(--py) 0;border-top:1px solid var(--border)}
.design-section .wrap{display:grid;grid-template-columns:320px 1fr;gap:var(--gap);align-items:start}

/* Left nav buttons */
.design-nav{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--nav-h) + 24px)}
.design-title{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-0.025em;margin-bottom:6px}
.design-sub{font-size:16px;color:var(--text-muted);margin-bottom:24px}
.design-btn{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:var(--radius-pill);font-size:15px;font-weight:500;cursor:pointer;transition:background var(--tr),color var(--tr);background:rgba(0,0,0,0.06);color:var(--text);border:none;width:100%;text-align:left}
.design-btn__icon{width:28px;height:28px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.design-btn.active{background:var(--brand);color:#fff}
.design-btn.active .design-btn__icon{background:rgba(255,255,255,0.2)}
.design-btn:not(.active):hover{background:rgba(0,0,0,0.1)}

/* Right panel */
.design-panel{border-radius:22px;overflow:hidden;background:var(--gray-bg);min-height:520px}

/* Color picker panel */
.panel-colors{}
.panel-colors__car{width:100%;aspect-ratio:16/9;object-fit:contain;padding:24px;background:var(--gray-bg)}
.color-swatches{display:flex;justify-content:center;gap:14px;padding:16px 24px 24px;background:var(--white);margin:0 24px 24px;border-radius:16px;border:1px solid #ebebeb}
.color-swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:transform var(--tr),box-shadow var(--tr);flex-shrink:0}
.color-swatch:hover{transform:scale(1.15)}
.color-swatch.active{box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--brand)}

/* Feature panel (photo + description) */
.panel-feature{}
.panel-feature__img{width:100%;aspect-ratio:16/9;object-fit:cover}
.panel-feature__body{padding:24px}
.panel-feature__title{font-size:20px;font-weight:700;letter-spacing:-0.02em;margin-bottom:10px}
.panel-feature__desc{font-size:15px;color:var(--text-muted);line-height:1.6}

/* Panel visibility */
.design-panel-wrap{position:relative}
.panel-slide{display:none}
.panel-slide.active{display:block}

/* ══════════════════════════════════════
   INTERIOR — full-width image + features row
══════════════════════════════════════ */
.interior-section{background:linear-gradient(180deg,rgba(211,234,254,0.33) 0%,rgba(211,234,254,0.08) 100%);padding:var(--py) 0}
.interior-section .wrap{}
.interior-hero{display:grid;grid-template-columns:1fr 380px;gap:var(--gap);align-items:center;margin-bottom:var(--py)}
.interior-hero__img{border-radius:var(--radius-news);overflow:hidden;aspect-ratio:16/9;object-fit:cover;width:100%}
.interior-hero__text .section-title{font-size:clamp(22px,2.8vw,32px)}

/* Feature cards row — SLIDER on mobile */
.feat-slider-outer{position:relative;padding:12px 0;margin:-12px 0}
.feat-slider-track-wrap{overflow:hidden;}
/* old .feat-slider-track-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,black 40px,black calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black 40px,black calc(100% - 40px),transparent 100%)}
 */

.feat-slider-track{display:flex;gap:24px;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);will-change:transform;user-select:none}
.feat-card{background:var(--gray-bg2);border-radius:var(--radius-news);overflow:hidden;box-shadow:var(--shadow-card);flex:0 0 calc((100% - 48px)/3);display:flex;flex-direction:column;transition:box-shadow var(--tr),transform var(--tr)}
.feat-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.feat-card__img{width:100%;aspect-ratio:16/9;object-fit:cover}
.feat-card__body{padding:16px;flex:1}
.feat-card__title{font-size:15px;font-weight:700;margin-bottom:6px;letter-spacing:-0.01em}
.feat-card__desc{font-size:13px;color:var(--text-muted);line-height:1.55}

/* ══════════════════════════════════════
   TECHNOLOGY — single highlight + 3 cards
══════════════════════════════════════ */
.tech-section{padding:var(--py) 0}
.tech-highlight{display:grid;grid-template-columns:360px 1fr;gap:var(--gap);align-items:center;margin-bottom:var(--gap)}
.tech-highlight__card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-news);overflow:hidden;box-shadow:var(--shadow-card)}
.tech-highlight__card-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.tech-highlight__card-body{padding:16px}
.tech-highlight__card-title{font-size:16px;font-weight:700;margin-bottom:6px}
.tech-highlight__card-desc{font-size:14px;color:var(--text-muted);line-height:1.6}

/* ══════════════════════════════════════
   WARRANTY / RELIABILITY
══════════════════════════════════════ */
.warranty-section{padding:var(--py) 0}
.warranty-section.section--gray .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}

/* ══════════════════════════════════════
   SAFETY — 2 rows of 3 cards each
══════════════════════════════════════ */
.safety-section{padding:var(--py) 0}
.safety-section .section-title{margin-bottom:32px}
.safety-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}

/* ══════════════════════════════════════
   SLIDER ARROWS + DOTS (shared)
══════════════════════════════════════ */
.slider-outer{position:relative}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:var(--white);border:1.5px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;box-shadow:var(--shadow-card);transition:background var(--tr),border-color var(--tr),box-shadow var(--tr)}
.slider-arrow:hover{background:var(--brand);border-color:var(--brand);box-shadow:0 4px 20px rgba(0,93,125,0.3)}
.slider-arrow:hover svg{stroke:#fff}
.slider-arrow.disabled{opacity:0.3;pointer-events:none}
.slider-arrow--prev{left:-20px}
.slider-arrow--next{right:-20px}
.slider-arrow svg{width:16px;height:16px;stroke:var(--text);transition:stroke var(--tr)}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.slider-dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;padding:0;cursor:pointer;transition:background var(--tr),width var(--tr)}
.slider-dot.active{background:var(--brand);width:24px;border-radius:4px}

/* ══════════════════════════════════════
   CTA BOTTOM
══════════════════════════════════════ */
.cta-bottom{padding:var(--py) 0;border-top:1px solid var(--border)}
.cta-bottom .wrap{display:flex;flex-direction:column;align-items:center;gap:28px}
.cta-bottom__logo{height:52px;object-fit:contain}
.cta-bottom__car{width:480px;max-width:90%;object-fit:contain}
.cta-bottom__prices{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.cta-bottom__btns{display:flex;gap:12px}

/* ══════════════════════════════════════
   CONTACT FORM
══════════════════════════════════════ */
.contact-section{background:var(--gray-bg2);padding:var(--py) 0}
.contact-section .wrap{display:flex;flex-direction:column;align-items:center;gap:40px}
.contact-form{max-width:640px;width:100%;display:flex;flex-direction:column;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.input{width:100%;padding:12px 14px;background:rgba(82,82,82,0.08);border:1.5px solid transparent;border-radius:var(--radius-btn);font-family:'Montserrat',sans-serif;font-size:14px;color:var(--text);outline:none;transition:border-color var(--tr),background var(--tr);-webkit-appearance:none}
.input::placeholder{color:var(--text-ph)}
.input:focus{border-color:var(--brand);background:rgba(0,93,125,0.04)}
.input--select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
textarea.input{min-height:110px;resize:vertical}

/* ══════════════════════════════════════
   DISCLAIMER + FOOTER
══════════════════════════════════════ */
.disclaimer{padding:32px 0;border-top:1px solid var(--border)}
.disclaimer p{font-size:11px;color:var(--text-muted);line-height:1.8;text-align:center;max-width:800px;margin:0 auto}
.footer{background:var(--black);padding:48px 0 32px}
.footer__inner{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
.footer__logo{font-size:20px;font-weight:800;color:#fff;letter-spacing:-0.04em;margin-bottom:16px}
.footer__socials{display:flex;gap:14px}
.footer__social{width:22px;height:22px;opacity:0.55;filter:brightness(0) invert(1);transition:opacity var(--tr);cursor:pointer}
.footer__social:hover{opacity:1}
.footer-col__head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#fff;margin-bottom:14px}
.footer-col__links{display:flex;flex-direction:column;gap:9px}
.footer-col__link{font-size:13px;color:rgba(255,255,255,0.5);transition:color var(--tr);cursor:pointer}
.footer-col__link:hover{color:rgba(255,255,255,0.9)}
.footer__bottom{border-top:1px solid rgba(255,255,255,0.1);margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,0.3)}

/* ══════════════════════════════════════
   MOBILE BOTTOM BAR
══════════════════════════════════════ */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;padding:10px 20px 16px;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-top:1px solid var(--border)}
.mobile-bar__inner{display:flex;justify-content:space-around;background:#f0f0f0;border-radius:999px;padding:6px}
.mobile-bar-btn{flex:1;display:flex;align-items:center;justify-content:center;height:44px;border-radius:999px;cursor:pointer;transition:background var(--tr)}
.mobile-bar-btn:hover{background:rgba(0,0,0,0.06)}
.mobile-bar-btn svg{width:20px;height:20px;stroke:var(--text)}
.mobile-bar-btn--red{background:#ff3131;flex:0 0 44px}
.mobile-bar-btn--red:hover{background:#e62b2b}
.mobile-bar-btn--red svg{stroke:#fff}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1100px){
  :root{--px:32px;--gap:24px}
}
@media(max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__hamburger{display:flex}
  .overview .wrap{grid-template-columns:1fr}
  .promo-section .wrap{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .promo-section .wrap > *:first-child{grid-column:1/-1}
  .power-section.section--gray .wrap{grid-template-columns:1fr}
  .photo-cols__grid{grid-template-columns:1fr 1fr}
  .design-section .wrap{grid-template-columns:1fr}
  .design-nav{position:static;flex-direction:column;gap:4px;min-width:0}
  .design-btns{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;max-width:100%;min-width:0}
  .design-btn{width:auto;flex:0 0 auto;white-space:nowrap}
  .interior-hero{grid-template-columns:1fr}
  .tech-highlight{grid-template-columns:1fr}
  .warranty-section.section--gray .wrap{grid-template-columns:1fr}
  .safety-grid{grid-template-columns:1fr 1fr}
  .footer__inner{grid-template-columns:1fr 1fr}
  .mobile-bar{display:block}
  body{padding-bottom:72px}
}
@media(max-width:640px){
  :root{--px:20px;--py:56px;--gap:16px}
  .overview__grid{grid-template-columns:1fr}
  .photo-cols__grid{grid-template-columns:1fr}
  .safety-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr 1fr;gap:24px}
  .price-section .wrap{gap:16px}
  .price-badge__value{font-size:22px}
  /* slider: 1 card on mobile */
  .feat-card{flex:0 0 85%}
  .slider-arrow{display:none}
  .feat-slider-track-wrap{-webkit-mask-image:none;mask-image:none}
  .promo-section .wrap{grid-template-columns:1fr}
  .promo-section .wrap > *:first-child{grid-column:1}
}

/* ══ SAFETY CARDS ══ */
.sc-outer { padding: 4px 0 12px; }
.sc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sc-card {
  background: #fbfbfb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sc-card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,0.14);
  transform: translateY(-2px);
}
.sc-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.sc-card__body  { padding: 16px; flex: 1; }
.sc-card__title { font-size: 15px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.sc-card__desc  { font-size: 13px; color: rgba(33,33,33,0.55); line-height: 1.55; }
@media (max-width: 640px) {
  .sc-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .sc-outer::-webkit-scrollbar { display: none; }
  .sc-grid {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 14px;
  }
  .sc-card {
    width: 72vw;
    max-width: 260px;
    flex-shrink: 0;
  }
}

/* ══ NAV LINK ACTIVE ══ */
.nav__link--active { color: var(--brand); }
.nav__link--active svg { transform: rotate(180deg); }

/* ══ MEGA MENU ══ */
.mega-backdrop { position:fixed;inset:0;top:var(--nav-h);background:rgba(0,0,0,0.35);z-index:98;opacity:0;pointer-events:none;transition:opacity 0.25s ease; }
.mega-backdrop.open { opacity:1;pointer-events:auto; }
.mega-menu { position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 12px 48px rgba(0,0,0,0.14);transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),opacity 0.22s ease;max-height:calc(100vh - var(--nav-h));overflow-y:auto; }
.mega-menu.open { transform:translateY(0);opacity:1;pointer-events:auto; }
.mega-menu__inner { display:flex;min-height:480px; }
.mega-sidebar { width:220px;flex-shrink:0;background:#f3f3f3;padding:32px 24px;display:flex;flex-direction:column;gap:0;border-right:1px solid var(--border); }
.mega-sidebar__label { font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#999;margin-bottom:16px; }
.mega-sidebar__links { display:flex;flex-direction:column;gap:4px; }
.mega-sidebar__link { display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;transition:background var(--tr),color var(--tr); }
.mega-sidebar__link:hover { background:rgba(0,93,125,0.08);color:var(--brand); }
.mega-sidebar__link svg { width:15px;height:15px;flex-shrink:0; }
.mega-content { flex:1;padding:28px 32px 36px; }
.mega-pills { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px; }
.mega-pill { padding:6px 16px;border-radius:999px;border:2px solid var(--border);font-size:13px;font-weight:500;color:var(--text);background:#fff;cursor:pointer;transition:background var(--tr),border-color var(--tr),color var(--tr); }
.mega-pill:hover { border-color:var(--brand);color:var(--brand); }
.mega-pill--active { background:#1a1a1a;border-color:#1a1a1a;color:#fff; }
.mega-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.mega-card { background:#fff;border:2px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr); }
.mega-card:hover { border-color:rgba(0,93,125,0.3);box-shadow:0 6px 24px rgba(0,0,0,0.1);transform:translateY(-2px); }
.mega-card__header { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.mega-card__name { font-size:15px;font-weight:700;letter-spacing:-0.02em;color:var(--text); }
.mega-card__price { padding:4px 12px;border:2px solid var(--border);border-radius:12px;font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;flex-shrink:0; }
.mega-card__img { width:100%;aspect-ratio:16/9;object-fit:contain;background:#f5f5f5;border-radius:8px; }
.mega-card__btns { display:flex;gap:6px; }
.mega-card__btns .btn { flex:1;padding:7px 10px;font-size:12px; }
@media(max-width:900px) { .mega-menu { display:none; } }

/* ══ NAV DROPDOWN ══ */
.nav__has-dropdown { position:relative; }
.nav__dropdown { position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);background:#fff;border:1px solid var(--border);border-radius:12px;padding:6px;min-width:210px;box-shadow:0 8px 32px rgba(0,0,0,0.12);opacity:0;pointer-events:none;transition:opacity 0.18s ease,transform 0.18s ease;z-index:101; }
.nav__has-dropdown.open .nav__dropdown { opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0); }
.nav__dropdown-link { display:block;padding:10px 14px;font-size:14px;font-weight:500;color:var(--text);border-radius:8px;transition:background var(--tr),color var(--tr); }
.nav__dropdown-link:hover { background:rgba(0,93,125,0.07);color:var(--brand); }

/* ══ MOBILE NAV DRAWER ══ */
.nav-drawer { display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:#fff;z-index:99;padding:20px 20px 100px;flex-direction:column;gap:0;overflow-y:auto; }
.nav-drawer.open { display:flex; }
.nav-drawer__link { display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);font-size:16px;font-weight:500;color:var(--text); }
.nav-drawer__link svg { width:15px;height:15px;color:#999; }
.drawer-modele-toggle { display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);font-size:16px;font-weight:500;color:var(--text);cursor:pointer; }
.drawer-modele-toggle svg { width:15px;height:15px;color:#999;transition:transform 0.2s ease; }
.drawer-modele-toggle.open svg { transform:rotate(180deg); }
.drawer-models { display:none;flex-direction:column;gap:10px;padding:14px 0 8px; }
.drawer-models.open { display:flex; }
.drawer-sub-links { display:none;flex-direction:column;gap:0;padding:4px 0 4px; }
.drawer-sub-links.open { display:flex; }
.drawer-sub-link { display:block;padding:12px 12px 12px 16px;font-size:15px;font-weight:500;color:var(--text);border-bottom:1px solid var(--border);transition:color var(--tr); }
.drawer-sub-link:hover { color:var(--brand); }
.model-btn { position:relative;display:flex;align-items:center;justify-content:space-between;background:#fff;border:2px solid var(--border);border-radius:16px;padding:14px 16px;overflow:hidden;min-height:76px;cursor:pointer;text-decoration:none;color:inherit;transition:border-color var(--tr),box-shadow var(--tr); }
.model-btn:hover { border-color:rgba(0,93,125,0.35);box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.model-btn__info { display:flex;flex-direction:column;gap:6px;z-index:1; }
.model-btn__name { font-size:18px;font-weight:700;letter-spacing:-0.03em;color:var(--text);line-height:1; }
.model-btn__price { display:inline-flex;align-items:center;padding:4px 12px;border:2px solid var(--border);border-radius:999px;font-size:12px;font-weight:500;color:var(--text);background:#fff;width:fit-content; }
.model-btn__price span { color:var(--brand); }
.model-btn__img { position:absolute;right:-12px;bottom:-4px;height:80px;width:auto;object-fit:contain;pointer-events:none; }

/* ══ FLOATING SIDEBAR ══ */
.sidebar-btns { position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:90; }
.sidebar-btn { width:48px;height:48px;background:#fff;border:2px solid var(--border);border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,0.1);transition:box-shadow var(--tr),transform var(--tr),border-color var(--tr); }
.sidebar-btn:hover { box-shadow:0 4px 20px rgba(0,0,0,0.16);transform:translateX(-3px);border-color:var(--brand); }
.sidebar-btn--red { background:#ff3131;border-color:#ff3131; }
.sidebar-btn--red:hover { background:#e62b2b;border-color:#e62b2b; }
.sidebar-btn svg { width:20px;height:20px; }
@media(max-width:900px) { .sidebar-btns { display:none; } }



/* ══ DESIGN SECTION — responsive ══ */
.design-section .wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
}
.design-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.design-title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.design-sub {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.design-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: rgba(0,0,0,0.05);
  color: var(--text);
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}
.design-btn__icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.design-btn.active {
  background: var(--brand);
  color: #fff;
}
.design-btn:not(.active):hover {
  background: rgba(0,0,0,0.09);
}
/* Buttons wrapper — desktop: column, mobile: horizontal scroll row */
.design-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 900px) {
  .design-section .wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .design-nav {
    position: static;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .design-nav .design-title { font-size: 24px; }
  .design-nav .design-sub { margin-bottom: 4px; }
  .design-btns {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
    max-width: 100%;
    min-width: 0;
  }
  .design-btn { font-size: 14px; width: auto; flex: 0 0 auto; white-space: nowrap; }
  .design-panel { border-radius: 16px; min-height: auto; }
}


/* ══ COLOR PICKER MODULE ══ */
.cp-viewer {
  position: relative;
  background: #f2f2f2;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.cp-slides {
  width: 100%;
  height: 100%;
  position: relative;
}
.cp-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.cp-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.cp-slide img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
  margin: auto;
  /* tint overlay via CSS filter when same base image used */
  transition: filter 0.4s ease;
}
/* Color tints — replace with real images when available */
[data-color="ciemnoszary"] img { filter: brightness(0.65) saturate(0); }
[data-color="szary"]       img { filter: brightness(0.85) saturate(0); }
[data-color="jasnoszary"]  img { filter: brightness(1.1) saturate(0); }
[data-color="srebrny"]     img { filter: brightness(1.3) saturate(0.15) contrast(0.9); }



/* Color name label */
.cp-label {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

/* Swatch row */
.cp-swatches-wrap {
  background: var(--white);
  border: 1px solid #ebebeb;
  border-radius: 0 0 16px 16px;
  padding: 16px 24px;
  display: flex;
  justify-content: center;
}
.cp-swatches {
  display: flex;
  gap: 14px;
  align-items: center;
}
.cp-swatch {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}
.cp-swatch:hover { transform: scale(1.12); }
.cp-swatch.active {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand);
}
.cp-swatch__check {
  font-size: 14px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
  line-height: 1;
  font-weight: 700;
}
.cp-swatch.active .cp-swatch__check { opacity: 1; }

DEALERS PAGE ONLY
═══════════════════════════════════ */
.dealers-hero {
  padding: calc(var(--nav-h) + var(--py)) var(--px) var(--py);
  background: linear-gradient(160deg, #eef6fa 0%, #fff 70%);
  border-bottom: 1px solid var(--border);
}
.dealers-hero__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 10px;
}
.dealers-hero__title {
  font-size: clamp(28px, 4vw, 48px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.1; color: var(--black); margin-bottom: 12px;
}
.dealers-hero__sub {
  font-size: 15px; color: #666; max-width: 520px; line-height: 1.6;
}
.dealers-hero__badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  background: var(--brand); color: #fff; padding: 8px 20px;
  border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
}

/* Map section wrapper */
.dealers-map-section {
  padding: var(--py) var(--px);
  background: #f8f9fa;
  border-bottom: 1px solid var(--border);
}

/* Layout */
.dealers-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  height: calc(100vh - var(--nav-h) - 228px);
  min-height: 520px;
  max-height: 760px;
}

/* Left list panel */
.dl-panel {
  overflow-y: auto; border-right: 1px solid var(--border);
  background: #f8f9fa;
  scrollbar-width: thin; scrollbar-color: var(--brand) transparent;
}
.dl-panel::-webkit-scrollbar { width: 3px; }
.dl-panel::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 3px; }
.dl-panel__inner { padding: 14px; }

.dl-search { position: relative; margin-bottom: 12px; }
.dl-search input {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px 10px 36px;
  border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  font-family: 'Montserrat', sans-serif; font-size: 13px;
  background: #fff; outline: none; transition: border-color .2s;
}
.dl-search input:focus { border-color: var(--brand); }
.dl-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; stroke: #aaa; pointer-events: none;
}

.dl-card {
  background: #fff; border: 1.5px solid #e8e8e8; border-radius: 12px;
  padding: 13px 13px 11px; margin-bottom: 7px; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.dl-card:hover {
  border-color: var(--brand);
  box-shadow: 0 3px 10px rgba(0,93,125,.1);
  transform: translateX(2px);
}
.dl-card.active {
  border-color: var(--brand); background: #f0f8fc;
  box-shadow: 0 3px 12px rgba(0,93,125,.12);
}
.dl-card__name { font-size: 13px; font-weight: 700; color: var(--black); margin-bottom: 3px; }
.dl-card__addr { font-size: 11px; color: #777; margin-bottom: 9px; line-height: 1.4; }
.dl-card__pills { display: flex; flex-wrap: wrap; gap: 5px; }
.dl-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: var(--brand);
  background: rgba(0,93,125,.07); padding: 3px 9px; border-radius: 999px;
  text-decoration: none; white-space: nowrap; transition: background .15s;
}
.dl-pill:hover { background: rgba(0,93,125,.16); }
.dl-pill svg { width: 10px; height: 10px; stroke: var(--brand); flex-shrink: 0; }

/* Map */
.dl-map { position: relative; }
#map {
  width: 100%; height: 100%;
  z-index: 1;
}
/* Custom Leaflet marker */
.jac-pin {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(0,93,125,.4);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700; color: #fff;
  cursor: pointer; transition: transform .15s, background .15s;
}
.jac-pin:hover { transform: scale(1.2); }
.jac-pin.active { background: #d9320a; transform: scale(1.25); }

/* Leaflet popup overrides */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  border: 1.5px solid var(--brand) !important;
  box-shadow: 0 6px 20px rgba(0,93,125,.14) !important;
  font-family: 'Montserrat', sans-serif !important;
  padding: 0 !important;
}
.leaflet-popup-content {
  margin: 12px 16px !important;
  font-size: 12px !important;
}
.leaflet-popup-content strong {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--black); margin-bottom: 3px;
}
.leaflet-popup-content span { color: #666; font-size: 11px; line-height: 1.4; }
.leaflet-popup-tip { background: #fff !important; }
.leaflet-popup-close-button { color: var(--brand) !important; }

/* Mobile slider */
.mob-slider-wrap { display: none; padding: 12px 16px; background: #f8f9fa; border-top: 1px solid var(--border); overflow: hidden; }
.mob-slider { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mob-slider::-webkit-scrollbar { display: none; }
.mob-slide {
  flex: 0 0 72vw; max-width: 260px; scroll-snap-align: start;
  background: #fff; border: 1.5px solid #e8e8e8; border-radius: 12px;
  padding: 12px; cursor: pointer; transition: border-color .2s;
}
.mob-slide.active { border-color: var(--brand); background: #f0f8fc; }
.mob-slide__name { font-size: 12px; font-weight: 700; color: var(--black); margin-bottom: 3px; }
.mob-slide__addr { font-size: 11px; color: #777; margin-bottom: 8px; line-height: 1.4; }
.mob-slide__phone { font-size: 12px; font-weight: 600; color: var(--brand); text-decoration: none; display: block; }

/* Full grid */
.dealers-section { padding: var(--py) var(--px); background: #fff; }
.dealers-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 12px; }
.dealers-section__title { font-size: clamp(22px, 3vw, 34px); font-weight: 800; letter-spacing: -.025em; color: var(--black); }
.dealers-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.d-card {
  border: 1.5px solid var(--border); border-radius: var(--radius-card);
  padding: 24px; background: #fff; transition: box-shadow .2s, border-color .2s; cursor: pointer;
}
.d-card:hover { box-shadow: 0 8px 28px rgba(0,93,125,.11); border-color: var(--brand); }
.d-card__num { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--brand); opacity: .5; text-transform: uppercase; margin-bottom: 6px; }
.d-card__name { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 5px; line-height: 1.3; }
.d-card__addr { font-size: 12.5px; color: #777; line-height: 1.5; margin-bottom: 16px; display: flex; gap: 6px; align-items: flex-start; }
.d-card__addr svg { width: 12px; height: 12px; stroke: var(--brand); flex-shrink: 0; margin-top: 2px; }
.d-card__contacts { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.d-contact { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--black); text-decoration: none; transition: color .15s; word-break: break-all; }
.d-contact:hover { color: var(--brand); }
.d-contact svg { width: 13px; height: 13px; stroke: var(--brand); flex-shrink: 0; }
.d-card__www { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--brand); text-decoration: none; padding: 6px 14px; border: 1.5px solid var(--brand); border-radius: var(--radius-pill); transition: background .15s, color .15s; }
.d-card__www:hover { background: var(--brand); color: #fff; }
.d-card__www svg { width: 11px; height: 11px; }

/* Responsive */
@media (max-width: 1100px) {
  .dealers-layout { grid-template-columns: 300px 1fr; }
  .dealers-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .dealers-hero { padding: calc(var(--nav-h) + 24px) 20px 24px; }
  .dealers-layout { display: flex; flex-direction: column; height: auto; max-height: none; min-height: auto; }
  .dl-panel { display: none; }
  .dl-map { height: 62vw; min-height: 240px; max-height: 320px; flex-shrink: 0; }
  .mob-slider-wrap { display: block; }
  .dealers-section { padding: 36px 20px; }
  .dealers-grid { grid-template-columns: 1fr; gap: 12px; }
}
  .nav-drawer__close { position:absolute;top:16px;right:16px;width:32px;height:32px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center; }
.nav-drawer__links { list-style:none;display:flex;flex-direction:column;gap:0;margin-top:8px; }
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:98;}
.nav-overlay.open{display:block;}

/* ══════════════════════════════════════
   HOMEPAGE
══════════════════════════════════════ */


    /* ── Design Tokens ── */
    :root {
      --brand: #005d7d;
      --brand-dark: #004a63;
      --brand-hover: #007aa3;
      --black: #1a1a1a;
      --white: #ffffff;
      --gray-bg: #f7f7f7;
      --gray-border: rgba(0,0,0,0.12);
      --text-primary: #212121;
      --text-secondary: rgba(33,33,33,0.55);
      --text-placeholder: rgba(33,33,33,0.4);
      --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
      --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.14);
      --radius-card: 20px;
      --radius-pill: 44px;
      --radius-btn: 8px;
      --radius-news: 14px;
      --nav-h: 72px;
      --max-w: 1344px;
      --section-py: 80px;
      --section-px: 48px;
      --gap: 32px;
      --transition: 0.2s ease;
    }

    /* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Montserrat', sans-serif; color: var(--text-primary); background: var(--white); -webkit-font-smoothing: antialiased; }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; background: none; font: inherit; }

    /* ── Layout helpers ── */
    .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--section-px); }
    .section { padding: var(--section-py) 0; }
    .divider { height: 1px; background: var(--gray-border); }

    /* ═══════════════════════════════════════
       NAVIGATION
    ═══════════════════════════════════════ */
    .nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--gray-border);
      height: var(--nav-h);
    }
    .nav__inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--section-px);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .nav__logo { flex-shrink: 0; }
    .nav__logo img { height: 24px; width: auto; }
    .nav__links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }
    .nav__link {
      display: flex; align-items: center; gap: 5px;
      font-family: 'Montserrat', sans-serif;
      font-size: 15px; font-weight: 500;
      color: var(--text-primary);
      transition: color var(--transition);
      white-space: nowrap;
    }
    .nav__link:hover { color: var(--brand); }
    .nav__link svg { width: 16px; height: 16px; transition: transform var(--transition); }
    .nav__link:hover svg { transform: rotate(180deg); }
    .nav__cta {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 18px;
      border: 1.5px solid var(--gray-border);
      border-radius: var(--radius-btn);
      font-family: 'Montserrat', sans-serif;
      font-size: 15px; font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      transition: border-color var(--transition), background var(--transition), color var(--transition);
      flex-shrink: 0;
    }
    .nav__cta:hover { border-color: var(--brand); color: var(--brand); background: rgba(0,93,125,0.04); }
    .nav__cta svg { width: 18px; height: 18px; }
    /* Mobile hamburger */
    .nav__hamburger {
      display: none; flex-direction: column; gap: 5px;
      padding: 4px; cursor: pointer;
    }
    .nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform var(--transition); }

    /* ═══════════════════════════════════════
       HERO
    ═══════════════════════════════════════ */
    .hero {
      position: relative;
      height: 560px;
      overflow: hidden;
      background: #0a2233;
    }
    .hero__img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .hero__overlay {
      position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
    }
    .hero__content {
      position: relative; z-index: 2;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--section-px);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 56px;
    }
    .hero__text { max-width: 480px; }
    .hero__title {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(28px, 3.5vw, 40px);
      font-weight: 700;
      color: var(--white);
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 12px;
    }
    .hero__subtitle {
      font-size: clamp(15px, 1.5vw, 18px);
      color: rgba(255,255,255,0.85);
      line-height: 1.6;
      margin-bottom: 24px;
    }
    .hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; }

    /* ═══════════════════════════════════════
       BUTTONS
    ═══════════════════════════════════════ */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 10px 20px;
      border-radius: var(--radius-btn);
      font-family: 'Montserrat', sans-serif;
      font-size: 15px; font-weight: 500;
      line-height: 1.4;
      white-space: nowrap;
      transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
      cursor: pointer;
      border: 1.5px solid transparent;
    }
    .btn:active { transform: scale(0.98); }

    /* Outlined on dark bg (hero) */
    .btn--outline-white {
      border-color: rgba(255,255,255,0.45);
      color: var(--white);
      background: rgba(255,255,255,0.08);
    }
    .btn--outline-white:hover {
      background: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.75);
    }

    /* Primary filled (brand) */
    .btn--primary {
      background: var(--brand);
      border-color: var(--brand);
      color: var(--white);
    }
    .btn--primary:hover {
      background: var(--brand-hover);
      border-color: var(--brand-hover);
      box-shadow: 0 4px 16px rgba(0,93,125,0.3);
    }

    /* Outlined on light bg */
    .btn--outline {
      border-color: var(--gray-border);
      color: var(--text-primary);
      background: var(--white);
    }
    .btn--outline:hover {
      border-color: var(--brand);
      color: var(--brand);
      background: rgba(0,93,125,0.04);
    }

    /* Filled black */
    .btn--black {
      background: var(--black);
      color: var(--white);
      border-color: var(--black);
    }
    .btn--black:hover {
      background: #333;
      border-color: #333;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }

    /* ═══════════════════════════════════════
       VALUE PROP CARDS (3 icons)
    ═══════════════════════════════════════ */
    .value-section { padding: 64px 0; }
    .value-section .container { display: flex; flex-direction: column; gap: 0; }
    .value-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
    }
    .value-card {
      background: var(--white);
      border-radius: var(--radius-card);
      padding: 40px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      gap: 24px;
      transition: box-shadow var(--transition), transform var(--transition);
      cursor: pointer;
    }
    .value-card:hover {
      box-shadow: var(--shadow-card-hover);
      transform: translateY(-3px);
    }
    .value-card__icon { width: 44px; height: 44px; }
    .value-card__icon img { width: 100%; height: 100%; object-fit: contain; }
    .value-card__label {
      font-family: 'Montserrat', sans-serif;
      font-size: 18px; font-weight: 600;
      color: var(--text-primary);
      line-height: 1.4;
    }

    /* ═══════════════════════════════════════
       MODELS / CATEGORIES
    ═══════════════════════════════════════ */
    .models-section { padding: var(--section-py) 0; }
    .category-pills {
      display: flex; gap: 12px; flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 40px;
    }
    .pill {
      padding: 10px 22px;
      border-radius: var(--radius-pill);
      border: 2px solid var(--gray-border);
      font-family: 'Montserrat', sans-serif;
      font-size: 16px; font-weight: 500;
      color: var(--text-primary);
      background: var(--white);
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition), color var(--transition);
      white-space: nowrap;
    }
    .pill:hover { border-color: var(--brand); color: var(--brand); }
    .pill--active { background: var(--brand); border-color: var(--brand); color: var(--white); }
    .pill--active:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

    /* ── Slider wrapper ── */
    .slider-outer {
      position: relative;
    }
    .slider-track-wrap {
      overflow: hidden;
      /* subtle fade edges */
      -webkit-mask-image: linear-gradient(to right, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
    }
    .cars-grid {
      display: flex;
      gap: 24px;
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
      will-change: transform;
      /* prevent text selection while dragging */
      user-select: none;
    }
    .car-card {
      background: var(--white);
      border: 2px solid var(--gray-border);
      border-radius: var(--radius-card);
      overflow: hidden;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
      /* fixed card width — show ~3 at a time */
      flex: 0 0 calc((100% - 48px) / 3);
      min-width: 0;
    }
    .car-card:hover {
      border-color: rgba(0,93,125,0.3);
      box-shadow: var(--shadow-card-hover);
      transform: translateY(-2px);
    }
    .car-card__header {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .car-card__name {
      font-family: 'Montserrat', sans-serif;
      font-size: 28px; font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }
    .car-card__price-badge {
      padding: 8px 16px;
      border: 2px solid var(--gray-border);
      border-radius: var(--radius-pill);
      font-family: 'Montserrat', sans-serif;
      font-size: 15px; font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .car-card__price-badge span { color: var(--brand); }
    .car-card__image {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: contain;
      background: var(--gray-bg);
      border-radius: 12px;
    }
    .car-card__buttons {
      display: flex; gap: 12px;
      margin-top: auto;
    }
    .car-card__buttons .btn { flex: 1; }

    /* ── Slider arrows ── */
    .slider-arrow {
      position: absolute;
      top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px;
      background: var(--white);
      border: 2px solid var(--gray-border);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      z-index: 2;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
    }
    .slider-arrow:hover {
      background: var(--brand);
      border-color: var(--brand);
      box-shadow: 0 4px 20px rgba(0,93,125,0.3);
    }
    .slider-arrow:hover svg { stroke: white; }
    .slider-arrow.disabled { opacity: 0.3; pointer-events: none; }
    .slider-arrow--prev { left: -22px; }
    .slider-arrow--next { right: -22px; }
    .slider-arrow svg { width: 18px; height: 18px; stroke: var(--text-primary); transition: stroke var(--transition); }

    /* ── Slider dots ── */
    .slider-dots {
      display: flex; justify-content: center; gap: 8px;
      margin-top: 28px;
    }
    .slider-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--gray-border);
      border: none; padding: 0; cursor: pointer;
      transition: background var(--transition), transform var(--transition), width var(--transition);
    }
    .slider-dot.active {
      background: var(--brand);
      width: 24px;
      border-radius: 4px;
    }

    @media (max-width: 900px) {
      .car-card { flex: 0 0 calc((100% - 24px) / 2); }
      .slider-arrow--prev { left: -12px; }
      .slider-arrow--next { right: -12px; }
    }
    @media (max-width: 640px) {
      .car-card { flex: 0 0 85%; }
      .slider-arrow { display: none; }
    }

    /* ═══════════════════════════════════════
       PROMO BANNER
    ═══════════════════════════════════════ */
   /* .promo-section { padding: 0 0 var(--section-py); }*/
    .promo-banner {
      position: relative;
      height: 420px;
      border-radius: 24px;
      overflow: hidden;
      background: #0a2233;
    }
    .promo-banner__img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .promo-banner__overlay {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, transparent 65%);
    }
    .promo-banner__content {
      position: relative; z-index: 2;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 48px;
      max-width: 400px;
    }
    .promo-banner__title {
      font-family: 'Montserrat', sans-serif;
      font-size: 28px; font-weight: 700;
      color: var(--white);
      letter-spacing: -0.02em;
      margin-bottom: 10px;
    }
    .promo-banner__subtitle {
      font-size: 16px;
      color: rgba(255,255,255,0.8);
      line-height: 1.6;
      margin-bottom: 24px;
    }

    /* ═══════════════════════════════════════
       CONTACT FORM
    ═══════════════════════════════════════ */
    .contact-section { padding: var(--section-py) 0; }
    .section-header {
      text-align: center;
      margin-bottom: 48px;
    }
    .section-title {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(24px, 3vw, 34px);
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }
    .section-subtitle {
      font-size: 17px;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    .contact-form {
      max-width: 680px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .input {
      width: 100%;
      padding: 12px 14px;
      background: rgba(82,82,82,0.08);
      border: 1.5px solid transparent;
      border-radius: var(--radius-btn);
      font-family: 'Montserrat', sans-serif;
      font-size: 15px;
      color: var(--text-primary);
      outline: none;
      transition: border-color var(--transition), background var(--transition);
      -webkit-appearance: none;
    }
    .input::placeholder { color: var(--text-placeholder); }
    .input:focus { border-color: var(--brand); background: rgba(0,93,125,0.04); }
    .input--select {
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
      cursor: pointer;
    }
    textarea.input { resize: vertical; min-height: 120px; }
    .form-submit { align-self: flex-start; }

    /* ═══════════════════════════════════════
       NEWS CARDS
    ═══════════════════════════════════════ */
    .news-section { background: var(--gray-bg); padding: var(--section-py) 0; }
    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      margin-bottom: 40px;
    }
    .news-card {
      background: var(--white);
      border-radius: var(--radius-news);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow var(--transition), transform var(--transition);
    }
    .news-card:hover {
      box-shadow: var(--shadow-card-hover);
      transform: translateY(-3px);
    }
    .news-card__img {
      width: 100%; height: 200px;
      object-fit: cover;
      background: #ddd;
    }
    .news-card__body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
    }
    .news-card__title {
      font-family: 'Montserrat', sans-serif;
      font-size: 17px; font-weight: 600;
      line-height: 1.45;
      color: var(--text-primary);
    }
    .news-card__footer {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      margin-top: auto;
    }
    .news-card__date { font-size: 13px; color: var(--text-secondary); }
    .section-center { display: flex; justify-content: center; }

    /* ═══════════════════════════════════════
       PRESS
    ═══════════════════════════════════════ */
    .press-section { background: var(--gray-bg); padding: 0 0 var(--section-py); }
    .press-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      margin-bottom: 40px;
    }
    .press-card {
      background: var(--white);
      border-radius: var(--radius-news);
      padding: 24px;
      display: flex; flex-direction: column; gap: 14px;
      transition: box-shadow var(--transition), transform var(--transition);
    }
    .press-card:hover {
      box-shadow: var(--shadow-card-hover);
      transform: translateY(-3px);
    }
    .press-card__meta {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 13px;
    }
    .press-card__source { font-weight: 700; color: var(--text-primary); }
    .press-card__date { color: var(--text-secondary); }
    .press-card__title {
      font-family: 'Montserrat', sans-serif;
      font-size: 17px; font-weight: 600;
      line-height: 1.5;
      color: var(--text-primary);
      flex: 1;
    }
    .press-card__footer { display: flex; justify-content: flex-end; }

    /* ═══════════════════════════════════════
       DISCLAIMER
    ═══════════════════════════════════════ */
    .disclaimer {
      padding: 40px 0;
      border-top: 1px solid var(--gray-border);
    }
    .disclaimer p {
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.8;
      text-align: center;
      max-width: 860px;
      margin: 0 auto;
    }

    /* ═══════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════ */
    .footer {
      background: var(--black);
      padding: 56px 0 40px;
    }
    .footer__inner {
      display: grid;
      grid-template-columns: 1.5fr repeat(4, 1fr);
      gap: 40px;
    }
    .footer__brand {}
    .footer__logo { height: 22px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); }
    .footer__socials { display: flex; gap: 14px; }
    .footer__social {
      width: 24px; height: 24px;
      opacity: 0.6;
      transition: opacity var(--transition), transform var(--transition);
      cursor: pointer;
    }
    .footer__social:hover { opacity: 1; transform: translateY(-2px); }
    .footer__social img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }

    .footer-col__heading {
      font-family: 'Montserrat', sans-serif;
      font-size: 14px; font-weight: 600;
      color: var(--white);
      margin-bottom: 14px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .footer-col__links { display: flex; flex-direction: column; gap: 9px; }
    .footer-col__link {
      font-family: 'Montserrat', sans-serif;
      font-size: 14px; font-weight: 400;
      color: rgba(255,255,255,0.55);
      transition: color var(--transition);
      cursor: pointer;
    }
    .footer-col__link:hover { color: rgba(255,255,255,0.9); }

    .footer__bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      margin-top: 40px;
      padding-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(255,255,255,0.35);
    }

    /* ═══════════════════════════════════════
       FLOATING SIDEBAR BUTTONS
    ═══════════════════════════════════════ */
    .sidebar-btns {
      position: fixed;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex; flex-direction: column; gap: 10px;
      z-index: 90;
    }
    .sidebar-btn {
      width: 48px; height: 48px;
      background: var(--white);
      border: 2px solid var(--gray-border);
      border-radius: var(--radius-pill);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
    }
    .sidebar-btn:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.16); transform: translateX(-3px); border-color: var(--brand); }
    .sidebar-btn--red { background: #ff3131; border-color: #ff3131; }
    .sidebar-btn--red:hover { background: #e62b2b; border-color: #e62b2b; }
    .sidebar-btn img { width: 22px; height: 22px; object-fit: contain; }
    .sidebar-btn--red img { filter: brightness(0) invert(1); }

    /* ═══════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════ */
    @media (max-width: 1100px) {
      :root { --section-px: 32px; --gap: 24px; }
      .nav__links { gap: 20px; }
    }

    @media (max-width: 900px) {
      .nav__links { display: none; }
      .nav__hamburger { display: flex; }
      .value-grid { grid-template-columns: repeat(3, 1fr); }
      .cars-grid { grid-template-columns: 1fr 1fr; }
      .news-grid { grid-template-columns: 1fr 1fr; }
      .press-grid { grid-template-columns: 1fr 1fr; }
      .footer__inner { grid-template-columns: 1fr 1fr; }
      .sidebar-btns { display: none; }
    }

    @media (max-width: 640px) {
      :root { --section-px: 20px; --section-py: 56px; --gap: 16px; }
      .hero { height: 420px; }
      .value-grid { grid-template-columns: 1fr; }
      .cars-grid { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .news-grid { grid-template-columns: 1fr; }
      .press-grid { grid-template-columns: 1fr; }
      .footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
      .category-pills { gap: 8px; }
      .pill { font-size: 14px; padding: 8px 16px; }
      .car-card__name { font-size: 22px; }
      .car-card__price-badge { font-size: 13px; padding: 6px 12px; }
      .promo-banner { height: 340px; }
      .promo-banner__content { padding: 32px 24px; }
    }

    /* ═══════════════════════════════════════
       MOBILE NAV DRAWER
    ═══════════════════════════════════════ */
    .nav-drawer {
      display: none;
      position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
      background: var(--white);
      z-index: 99;
      padding: 24px var(--section-px);
      flex-direction: column;
      gap: 4px;
      overflow-y: auto;
    }
    .nav-drawer.open { display: flex; }
    .nav-drawer__link {
      padding: 14px 0;
      border-bottom: 1px solid var(--gray-border);
      font-family: 'Montserrat', sans-serif;
      font-size: 17px; font-weight: 500;
      color: var(--text-primary);
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-drawer__link svg { width: 16px; height: 16px; color: var(--text-secondary); }

    /* ═══════════════════════════════════════
       MEGA MENU
    ═══════════════════════════════════════ */
    .mega-backdrop {
      position: fixed; inset: 0; top: var(--nav-h);
      background: rgba(0,0,0,0.35);
      z-index: 98;
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .mega-backdrop.open { opacity: 1; pointer-events: auto; }

    .mega-menu {
      position: fixed;
      top: var(--nav-h);
      left: 0; right: 0;
      z-index: 99;
      background: var(--white);
      border-bottom: 1px solid var(--gray-border);
      box-shadow: 0 12px 48px rgba(0,0,0,0.14);
      /* slide-down animation */
      transform: translateY(-12px);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease;
      max-height: calc(100vh - var(--nav-h));
      overflow-y: auto;
    }
    .mega-menu.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
    .mega-menu__inner {
      display: flex;
      min-height: 520px;
    }

    /* Left sidebar */
    .mega-sidebar {
      width: 240px;
      flex-shrink: 0;
      background: #f3f3f3;
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
      gap: 0;
      border-right: 1px solid var(--gray-border);
    }
    .mega-sidebar__label {
      font-family: 'Montserrat', sans-serif;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }
    .mega-sidebar__links { display: flex; flex-direction: column; gap: 4px; }
    .mega-sidebar__link {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px; font-weight: 500;
      color: var(--text-primary);
      cursor: pointer;
      transition: background var(--transition), color var(--transition);
    }
    .mega-sidebar__link:hover { background: rgba(0,93,125,0.08); color: var(--brand); }
    .mega-sidebar__link svg { width: 16px; height: 16px; flex-shrink: 0; }

    /* Right content area */
    .mega-content {
      flex: 1;
      padding: 32px 40px 40px;
      overflow-y: auto;
    }

    /* Category pills inside mega menu */
    .mega-pills {
      display: flex; gap: 10px; flex-wrap: wrap;
      margin-bottom: 28px;
    }
    .mega-pill {
      padding: 6px 16px;
      border-radius: var(--radius-pill);
      border: 2px solid var(--gray-border);
      font-family: 'Montserrat', sans-serif;
      font-size: 14px; font-weight: 500;
      color: var(--text-primary);
      background: var(--white);
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition), color var(--transition);
      white-space: nowrap;
    }
    .mega-pill:hover { border-color: var(--brand); color: var(--brand); }
    .mega-pill--active { background: var(--black); border-color: var(--black); color: var(--white); }
    .mega-pill--active:hover { background: #333; border-color: #333; }

    /* Car grid inside mega menu */
    .mega-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .mega-card {
      background: var(--white);
      border: 2px solid var(--gray-border);
      border-radius: 16px;
      padding: 14px;
      display: flex; flex-direction: column; gap: 12px;
      transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
      cursor: pointer;
    }
    .mega-card:hover {
      border-color: rgba(0,93,125,0.3);
      box-shadow: 0 6px 24px rgba(0,0,0,0.1);
      transform: translateY(-2px);
    }
    .mega-card__header {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .mega-card__name {
      font-family: 'Montserrat', sans-serif;
      font-size: 17px; font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }
    .mega-card__price {
      padding: 4px 12px;
      border: 2px solid var(--gray-border);
      border-radius: 12px;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px; font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .mega-card__img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: contain;
      background: #f5f5f5;
      border-radius: 8px;
    }
    .mega-card__btns { display: flex; gap: 6px; }
    .mega-card__btns .btn {
      flex: 1;
      padding: 7px 10px;
      font-size: 13px;
    }

    /* Modele nav link — active state */
    .nav__link--active { color: var(--brand); }
    .nav__link--active svg { transform: rotate(180deg); }

    @media (max-width: 900px) {
      .mega-menu { display: none; } /* use mobile drawer instead */
    }
.mobile-bottom-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;padding:10px 20px 16px;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-top:1px solid var(--border)}
.mobile-bottom-bar__inner{display:flex;justify-content:space-around;background:#f0f0f0;border-radius:999px;padding:6px}