/*
 * EquiCar — Complete Responsive System
 * Breakpoints: 1920 / 1440 / 1280 / 1279 / 1024 / 768 / 480 / 430 / 393 / 375 / 360
 */

/* ── Base fixes ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; height: auto; }

/* ────────────────────────────────────────────
   ≥ 1920px
──────────────────────────────────────────── */
@media screen and (min-width: 1920px) {
  .nav-bar { padding: 1.625rem 12.5rem !important; }
  .hero-header { padding: 6rem 12.5rem !important; }
  .key-figures, .investing-section, .usp-section, .usp-section-2, .faq-section, .testi-section { padding: 6.25rem 12.5rem !important; }
  .footer-wrap { padding: 5rem 12.5rem 0 !important; }
  .marketplace-section { padding: 6.25rem 12.5rem !important; }
  .heading { font-size: 4rem !important; line-height: 4.5rem !important; }
  .heading-21 { font-size: 3.5rem !important; line-height: 4.25rem !important; }
  .profile-page, .settings-page { padding: 40px 200px 100px !important; }
}

/* ────────────────────────────────────────────
   1440–1919px
──────────────────────────────────────────── */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .nav-bar { padding: 1.625rem 7rem !important; }
  .hero-header { padding: 5rem 7rem !important; }
  .key-figures, .investing-section, .usp-section, .usp-section-2, .faq-section, .testi-section { padding: 5rem 7rem !important; }
  .footer-wrap { padding: 4rem 7rem 0 !important; }
  .marketplace-section { padding: 4rem 7rem !important; }
  .profile-page, .settings-page { padding: 40px 120px 80px !important; }
}

/* ────────────────────────────────────────────
   1280–1439px
──────────────────────────────────────────── */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .nav-bar { padding: 1.625rem 5rem !important; }
}

/* ────────────────────────────────────────────
   ≤ 1279px — small desktop
──────────────────────────────────────────── */
@media screen and (max-width: 1279px) {
  .nav-bar { padding: 1.25rem 2.5rem !important; }
  .hero-header { padding: 3.5rem 2.5rem !important; }
  .heading { font-size: 2.75rem !important; line-height: 3.25rem !important; }
  .key-figures, .investing-section, .usp-section, .usp-section-2, .faq-section, .testi-section { padding: 3.5rem 2.5rem !important; }
  .footer-wrap { padding: 3rem 2.5rem 0 !important; }
  .marketplace-section { padding: 3rem 2.5rem !important; }
  .div-block-106 { grid-template-columns: repeat(2, 1fr) !important; }
  .div-block-109 { grid-column-gap: 3rem !important; }
  .div-block-113 { width: 22rem !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-col { border-right: none !important; }
  .footer-col:not(:first-child) { padding-left: 0 !important; border-top: 1px dashed #1e1e1e; }
  .profile-page, .settings-page { padding: 32px 48px 64px !important; }
  /* Marketplace sticky sidebar */
  .mp-sidebar { max-height: calc(100vh - 48px); overflow-y: auto; }
}

/* ────────────────────────────────────────────
   ≤ 1024px — tablet landscape
──────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  .nav-bar { padding: 1rem 2rem !important; }
  .hero-header { padding: 3rem 2rem !important; }
  .div-block-2 { grid-template-columns: 1fr !important; }
  .div-block-22 { display: none !important; }
  .div-block-3 { height: auto !important; }
  .heading { font-size: 2.5rem !important; line-height: 3rem !important; }
  .paragraph { font-size: 1rem !important; line-height: 1.6rem !important; }
  .div-block-106 { grid-template-columns: repeat(2, 1fr) !important; }
  .paragraph-6 { margin-top: 1rem !important; }
  .div-block-109 { grid-template-columns: 1fr !important; grid-column-gap: 0 !important; }
  .div-block-110, .div-block-113 { width: 100% !important; }
  .div-block-114 { grid-template-columns: repeat(2, 1fr) !important; }
  .div-block-117 { grid-template-columns: 1fr !important; }
  .div-block-118 { width: 100% !important; }
  .faq-layout { flex-direction: column !important; gap: 1.5rem !important; }
  .footer-wrap { padding: 3rem 2rem 0 !important; }
  /* Marketplace */
  .mp-layout { grid-template-columns: 1fr !important; }
  .mp-sidebar { position: static !important; width: 100% !important; border-radius: 12px !important; max-height: none !important; margin-bottom: 20px; }
  /* Invest */
  .inv-layout { grid-template-columns: 1fr !important; }
  .inv-panel { position: static !important; }
  /* Settings */
  .settings-layout { flex-direction: column !important; }
  .settings-nav { flex-direction: row !important; flex-wrap: wrap !important; width: 100% !important; gap: 8px !important; padding: 16px !important; }
  .settings-nav-btn { flex: 1 !important; min-width: 100px !important; text-align: center !important; }
  .profile-page, .settings-page { padding: 28px 32px 60px !important; }
}

/* ────────────────────────────────────────────
   ≤ 768px — tablet portrait / large phone landscape
──────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  /* ── NAV — logo left, auth right, links hidden ── */
  .nav-bar {
    padding: .875rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .nav-bar .div-block { display: none !important; }
  /* Make auth buttons compact */
  #nav-auth-zone, #nav-auth, #nav-auth-profile { gap: 8px !important; }
  #nav-auth-zone a, #nav-auth a, #nav-auth-profile a { font-size: .8rem !important; }
  #nav-auth-zone button, #nav-auth button, #nav-auth-profile button {
    padding: .6rem 1rem !important; font-size: .8rem !important;
  }

  /* ── HERO ── */
  .hero-header { padding: 2.5rem 1.25rem !important; }
  .heading { font-size: 2.25rem !important; line-height: 2.75rem !important; }
  .paragraph { font-size: .9375rem !important; line-height: 1.5rem !important; }
  .div-block-4 { flex-direction: column !important; gap: .75rem !important; }
  .link-block-2 { width: 100% !important; justify-content: center !important; }
  .div-block-5 { flex-wrap: wrap !important; gap: 1rem !important; }
  .div-block-5 img, .image-19 { height: 18px !important; max-width: 80px !important; object-fit: contain !important; }

  /* ── CARS CAROUSEL ── */
  .cars-section { padding: 40px 16px !important; }
  .cars-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .car-slide { flex: 0 0 calc(80vw) !important; }
  .cars-btn.prev { left: -12px !important; }
  .cars-btn.next { right: -12px !important; }

  /* ── STATS ── */
  .key-figures { padding: 2.5rem 1.25rem !important; }
  .heading-18 { font-size: 1.25rem !important; line-height: 1.75rem !important; }
  .heading-19 { font-size: 1.875rem !important; }
  .div-block-107 { padding: 1.25rem !important; }

  /* ── INVESTING SECTION ── */
  .investing-section { padding: 2.5rem 1.25rem !important; }
  .heading-20 { font-size: 1.75rem !important; line-height: 2.5rem !important; }

  /* ── USP ── */
  .usp-section-2 { padding: 2.5rem 1.25rem !important; }
  .heading-21 { font-size: 1.75rem !important; line-height: 2.5rem !important; }
  .heading-22 { font-size: 1.25rem !important; line-height: 1.75rem !important; }
  .div-block-114 { grid-template-columns: 1fr !important; margin-top: 2rem !important; }
  .div-block-115, .div-block-118 { padding: 1.5rem !important; }

  /* ── HOW IT WORKS page ── */
  .hiw-wrap { overflow-x: auto; }

  /* ── TESTIMONIALS ── */
  .testi-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .testi-card { grid-template-columns: 1fr !important; flex: 0 0 calc(100vw - 2.5rem) !important; }
  .testi-car-img { width: 100% !important; height: 180px !important; }
  .testi-body { padding: 16px !important; }

  /* ── FAQ ── */
  .faq-section { padding: 2.5rem 1.25rem !important; }
  .faq-title { font-size: 1.5rem !important; }

  /* ── FOOTER ── */
  .footer-wrap { padding: 2.5rem 1.25rem 0 !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-col { border-right: none !important; padding: 20px 0 !important; }
  .footer-col:not(:first-child) { padding-left: 0 !important; border-top: 1px dashed #1e1e1e; }

  /* ── MARKETPLACE ── */
  .mp-page { padding: 20px 16px 60px !important; }
  .mkt-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .mp-toolbar { flex-wrap: wrap !important; gap: 8px !important; }

  /* ── PROFILE / SETTINGS ── */
  .profile-page, .settings-page { padding: 20px 20px 48px !important; }
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .ph { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  .ph-right { width: 100% !important; }
  .btn-settings { width: 100% !important; justify-content: center !important; }

  /* ── LEGAL ── */
  .legal-page { padding: 48px 24px 80px !important; }
  .legal-page h1 { font-size: 2.25rem !important; }

  /* ── LOGIN / ONBOARDING ── */
  .form-card, .login-card { padding: 28px 20px !important; margin: 16px !important; }
  .ob-card { padding: 24px 16px !important; margin: 12px !important; }
}

/* ────────────────────────────────────────────
   ≤ 480px — large phones
──────────────────────────────────────────── */
@media screen and (max-width: 480px) {
  /* NAV */
  .nav-bar { padding: .75rem 1rem !important; }

  /* HERO */
  .hero-header { padding: 2.25rem 1rem !important; }
  .heading { font-size: 2rem !important; line-height: 2.5rem !important; }

  /* CARS — single card, full width */
  .cars-section { padding: 32px 12px !important; }
  .car-slide { flex: 0 0 calc(88vw) !important; }

  /* STATS — 1 col */
  .key-figures { padding: 2rem 1rem !important; }
  .div-block-106 { grid-template-columns: 1fr 1fr !important; gap: .625rem !important; }
  .heading-19 { font-size: 1.625rem !important; }
  .div-block-107 { padding: 1rem !important; }
  .paragraph-6 { font-size: .8125rem !important; margin-top: .75rem !important; }

  /* INVESTING */
  .investing-section { padding: 2rem 1rem !important; }
  .div-block-110 { grid-template-columns: 1fr !important; }

  /* USP */
  .usp-section-2 { padding: 2rem 1rem !important; }
  .div-block-117 { grid-template-columns: 1fr !important; margin-top: .75rem !important; }

  /* TESTI */
  .testi-section { padding: 2rem 1rem !important; }
  .testi-track { gap: 12px !important; }
  .testi-card { flex: 0 0 calc(100vw - 2rem) !important; }

  /* FAQ */
  .faq-section { padding: 2rem 1rem !important; }

  /* FOOTER */
  .footer-wrap { padding: 2rem 1rem 0 !important; }
  .footer-grid { grid-template-columns: 1fr !important; }

  /* MARKETPLACE */
  .mp-page { padding: 16px 12px 60px !important; }
  .mkt-grid { grid-template-columns: 1fr !important; }

  /* PROFILE */
  .profile-page, .settings-page { padding: 16px 16px 48px !important; }
  .kpi-row { grid-template-columns: 1fr !important; }
  .inv-item { grid-template-columns: 72px 1fr !important; }
  .inv-right { display: none !important; }
  .tab-btn { padding: 10px 16px !important; font-size: .8125rem !important; }

  /* SETTINGS */
  .settings-nav { padding: 12px !important; gap: 6px !important; }
  .settings-nav-btn { font-size: .8rem !important; padding: 8px 10px !important; }

  /* LEGAL */
  .legal-page { padding: 32px 16px 64px !important; }
  .legal-page h1 { font-size: 1.875rem !important; }

  /* FORMS */
  .form-card, .login-card { padding: 24px 16px !important; margin: 12px !important; }
  .ob-card { padding: 24px 16px !important; margin: 12px !important; }
}

/* ────────────────────────────────────────────
   ≤ 430px — iPhone 15 Pro Max / 16 Plus
──────────────────────────────────────────── */
@media screen and (max-width: 430px) {
  .heading { font-size: 1.875rem !important; line-height: 2.375rem !important; }
  .paragraph { font-size: .875rem !important; }
  .heading-18 { font-size: 1.125rem !important; line-height: 1.625rem !important; }
  .heading-19 { font-size: 1.5rem !important; }
  .heading-20, .heading-21 { font-size: 1.625rem !important; line-height: 2.125rem !important; }
  .heading-22 { font-size: 1.125rem !important; line-height: 1.625rem !important; }
  .div-block-115, .div-block-118 { padding: 1.25rem !important; }
  .link-block-2 { padding: .75rem 1rem !important; }
  .div-block-107 { padding: .875rem !important; }
  .testi-card { flex: 0 0 calc(100vw - 1.75rem) !important; }
  .faq-q { padding: 14px 0 !important; font-size: .875rem !important; }
  .faq-a { font-size: .8125rem !important; }
  #nav-auth-zone, #nav-auth, #nav-auth-profile { gap: 6px !important; }
}

/* ────────────────────────────────────────────
   ≤ 393px — iPhone 15 / 16 Pro
──────────────────────────────────────────── */
@media screen and (max-width: 393px) {
  .nav-bar { padding: .625rem .875rem !important; }
  .hero-header { padding: 2rem .875rem !important; }
  .heading { font-size: 1.75rem !important; line-height: 2.25rem !important; }
  .div-block-106 { grid-template-columns: 1fr !important; }
  .div-block-114, .div-block-117 { grid-template-columns: 1fr !important; margin-top: 1.25rem !important; }
  .div-block-115, .div-block-118 { padding: 1.125rem !important; gap: 1rem !important; }
  .footer-wrap { padding: 1.5rem .875rem 0 !important; }
  .inv-panel { padding: 18px !important; }
  .profile-page, .settings-page { padding: 14px 14px 40px !important; }
  .ph-name { font-size: 1.125rem !important; }
  .ph-avatar { width: 48px !important; height: 48px !important; font-size: 18px !important; }
  .kpi-value { font-size: 1.375rem !important; }
  .form-card, .login-card { padding: 24px 14px !important; margin: 10px !important; }
  .legal-page { padding: 24px 14px 48px !important; }
  .legal-page h1 { font-size: 1.625rem !important; }
}

/* ────────────────────────────────────────────
   ≤ 375px — iPhone SE
──────────────────────────────────────────── */
@media screen and (max-width: 375px) {
  .heading { font-size: 1.625rem !important; line-height: 2.125rem !important; }
  .nav-bar { padding: .625rem .75rem !important; }
  .hero-header { padding: 1.875rem .75rem !important; }
  .div-block-107 { padding: .75rem !important; }
  .heading-19 { font-size: 1.375rem !important; }
  .testi-card { flex: 0 0 calc(100vw - 1.5rem) !important; }
  .kpi-row { gap: 10px !important; }
  .kpi-value { font-size: 1.25rem !important; }
}

/* ────────────────────────────────────────────
   ≤ 360px — Android compact
──────────────────────────────────────────── */
@media screen and (max-width: 360px) {
  .heading { font-size: 1.5rem !important; line-height: 2rem !important; }
  .nav-bar { padding: .5rem .75rem !important; }
  .hero-header { padding: 1.75rem .75rem 1.25rem !important; }
  .key-figures, .investing-section, .usp-section-2, .faq-section, .testi-section { padding: 1.75rem .75rem !important; }
  .footer-wrap { padding: 1.25rem .75rem 0 !important; }
  .profile-page, .settings-page { padding: 12px 12px 36px !important; }
}

/* ────────────────────────────────────────────
   TOUCH DEVICES — 44px tap targets
──────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .link-block-2, .btn-invest, .btn-primary, .btn-reset, .btn-explore, .btn-cta, .btn-settings, .tab-btn, .settings-nav-btn { min-height: 44px !important; }
  .faq-q { min-height: 48px !important; }
  .inv-heart, .inv-save { min-width: 44px !important; min-height: 44px !important; }
  .eye-btn { min-width: 44px !important; min-height: 44px !important; }
  input, select, textarea { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════
   APEXCLUB v2 — New components responsive
   Added: HBG buttons, Cars marquee, Video expand,
          Testi marquee, USP flex, S360, Footer big,
          large-screen caps
════════════════════════════════════════════════════════ */

/* ── Global container cap on very large screens ── */
.nav-bar,
.hero-header,
.cars-section,
.usp-wrap,
.hiw-wrap,
.testi-marquee-section,
.faq-section,
.footer-wrap {
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
}

/* ── HBG Buttons ── */
.hbg-wrap {
  display: inline-flex;
}
.hbg-inner {
  white-space: nowrap;
}


}
@media screen and (max-width: 768px) {
}

/* ── USP flex section ── */
.usp-wrap {
  box-sizing: border-box;
}
@media screen and (max-width: 1280px) {
  .usp-wrap { padding: 60px !important; min-height: auto !important; }
  .usp-left { width: 380px !important; }
  .usp-wrap .u-title { font-size: 38px !important; }
  .usp-wrap .u-car-img { width: 380px !important; height: 420px !important; }
  .usp-wrap .u-card { left: 520px !important; width: 280px !important; }
  .usp-wrap .u-txn.t1 { left: 490px !important; }
  .usp-wrap .u-txn.t2 { left: 510px !important; }
}
@media screen and (max-width: 1024px) {
  .usp-wrap {
    padding: 48px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-height: auto !important;
  }
  .usp-left { width: 100% !important; max-width: 600px !important; }
  .usp-wrap .u-car-img { display: none !important; }
  .usp-wrap .u-card { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; margin-top: 32px !important; }
  .usp-wrap .u-txn { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; margin-top: 12px !important; }
  .usp-wrap .u-txn.t1,
  .usp-wrap .u-txn.t2 { left: auto !important; top: auto !important; }
}
@media screen and (max-width: 768px) {
  .usp-wrap { padding: 40px 20px !important; }
  .usp-left { width: 100% !important; }
  .usp-wrap .u-title { font-size: 30px !important; line-height: 1.2 !important; }
  .usp-wrap .u-desc { font-size: 14px !important; }
  .usp-wrap .u-14k { font-size: 36px !important; }
  .usp-wrap .u-card { display: none !important; }
  .usp-wrap .u-txn { display: none !important; }
}
@media screen and (max-width: 480px) {
  .usp-wrap { padding: 32px 16px !important; }
  .usp-wrap .u-title { font-size: 26px !important; }
  .usp-icon-row { gap: 10px !important; }
}

/* ── Cars marquee ── */
.cars-outer-marquee {
  overflow: hidden;
}
.cars-track-marquee {
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .cars-section { padding: 40px 0 !important; }
  .cars-header { padding: 0 20px !important; }
  .car-slide { width: 260px !important; min-width: 260px !important; max-width: 260px !important; }
  .car-card { width: 260px !important; height: 430px !important; }
}
@media screen and (max-width: 480px) {
  .car-slide { width: 240px !important; min-width: 240px !important; max-width: 240px !important; }
  .car-card { width: 240px !important; height: 410px !important; }
}

/* ── Video expand ── */
.vid-expand-outer {
  padding: 60px 0;
  overflow: hidden;
}
.vid-expand-box {
  max-width: 95vw;
}
.vid-expand-box video,
.vid-expand-box img {
  height: 460px;
  object-fit: cover;
  display: block;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .vid-expand-outer { padding: 40px 0 !important; }
  .vid-expand-box { width: 90vw !important; border-radius: 12px !important; }
  .vid-expand-box video,
  .vid-expand-box img { height: 300px !important; }
}
@media screen and (max-width: 480px) {
  .vid-expand-box video,
  .vid-expand-box img { height: 240px !important; }
}

/* ── Testimonials marquee ── */
.testi-marquee-section {
  padding: 80px 0 !important;
  overflow: hidden;
}
.testi-marquee-head {
  padding: 0 80px;
  margin-bottom: 48px;
}
.testi-mq-outer {
  overflow: hidden;
  position: relative;
}
.tm-card {
  flex-shrink: 0;
}
@media screen and (max-width: 1024px) {
  .testi-marquee-head { padding: 0 48px !important; }
  .testi-marquee-head h1 { font-size: 32px !important; }
}
@media screen and (max-width: 768px) {
  .testi-marquee-section { padding: 40px 0 !important; }
  .testi-marquee-head { padding: 0 20px !important; margin-bottom: 28px !important; }
  .testi-marquee-head h1 { font-size: 26px !important; line-height: 1.3 !important; }
  .tm-card { width: 280px !important; }
  .tm-car-img { height: 160px !important; }
}
@media screen and (max-width: 480px) {
  .tm-card { width: 260px !important; }
}

/* ── Footer big logo ── */
.footer-big {
  overflow: hidden;
  line-height: 0;
}
.footer-big svg {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.6;
}
@media screen and (max-width: 768px) {
  .footer-big { display: none !important; }
}

/* ── HOW IT WORKS — fix overflow on mobile ── */
@media screen and (max-width: 1024px) {
  .hiw-wrap {
    overflow-x: hidden !important;
    padding: 48px 32px !important;
    height: auto !important;
    min-height: auto !important;
  }
  .hiw-wrap .h-title { position: relative !important; left: auto !important; top: auto !important; font-size: 32px !important; margin-bottom: 32px !important; }
  .hiw-wrap .h-img { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: 300px !important; border-radius: 16px !important; overflow: hidden !important; margin-bottom: 28px !important; }
  .hiw-wrap .h-step { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; display: flex !important; align-items: flex-start !important; gap: 14px !important; margin-bottom: 16px !important; }
  .hiw-wrap .h-icon { position: relative !important; left: auto !important; top: auto !important; flex-shrink: 0 !important; }
  .hiw-wrap .h-txt { position: relative !important; left: auto !important; top: auto !important; }
}
@media screen and (max-width: 768px) {
  .hiw-wrap { padding: 40px 20px !important; }
  .hiw-wrap .h-title { font-size: 26px !important; }
  .hiw-wrap .h-img { height: 220px !important; }
}

/* ── Large screen adjustments ── */
@media screen and (min-width: 1920px) {
  .usp-wrap { padding: 100px 200px !important; }
  .usp-left { width: 500px !important; }
  .usp-wrap .u-title { font-size: 56px !important; }
  .cars-section { padding: 100px 200px !important; }
  .testi-marquee-head { padding: 0 200px !important; }
  .vid-expand-outer { padding: 80px 0 !important; }
  .footer-big svg { max-width: 1920px; margin: 0 auto; }
}
@media screen and (min-width: 2560px) {
  .usp-wrap { padding: 120px 320px !important; }
  .cars-section { padding: 120px 320px !important; }
  .testi-marquee-head { padding: 0 320px !important; }
}

/* ── Hamburger menu on mobile ── */
@media screen and (max-width: 768px) {
  .nav-bar { position: relative; }
  .nav-hamburger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all .3s;
  }
  .nav-mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.98);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
  }
  .nav-mobile-menu.open { display: flex !important; }
  .nav-mobile-menu a {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    font-family: 'Helvetica Neue', Helveticaneue, Arial, sans-serif;
    text-decoration: none;
    transition: color .2s;
  }
  .nav-mobile-menu a:hover { color: #c29d78; }
  .nav-mobile-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
  }
}
@media screen and (min-width: 769px) {
  .nav-hamburger { display: none !important; }
  .nav-mobile-menu { display: none !important; }
}



/* ════════════════════════════════════════════════════
   MOBILE FIXES v3 — iPhone screenshots audit
   Fixes: hero image, FAQ 1col, footer, hiw, marketplace cards
════════════════════════════════════════════════════ */

/* ── 1. HERO — show the right panel card on mobile (Image 8 shows it missing) ──
   The hero card image was hidden at ≤1024px. We bring it back as a full-width
   image below the text on mobile instead of completely hiding it. */
@media screen and (max-width: 768px) {
  .div-block-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  /* Show the card section but simplified */
  .div-block-22 {
    display: block !important;
    position: relative !important;
    width: 100% !important;
  }
  /* Show only the main car video/image card, hide the stat cards */
  .ui-card1 {
    display: block !important;
    width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }
  .ui-card2, .ui-card3, .ui-card4 {
    display: none !important;
  }
}

/* ── 2. FAQ — single column on mobile ── */
@media screen and (max-width: 768px) {
  .faq-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .faq-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .faq-section {
    padding: 40px 20px !important;
  }
}
@media screen and (max-width: 480px) {
  .faq-section { padding: 32px 16px !important; }
  .faq-title { font-size: 24px !important; }
}

/* ── 3. FOOTER — proper single column stacking ── */
@media screen and (max-width: 768px) {
  .footer-wrap { padding: 40px 20px 0 !important; }
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .footer-col {
    padding: 24px 0 !important;
    border-right: none !important;
    border-top: 1px solid #1a1a1a !important;
    width: 100% !important;
  }
  .footer-col:first-child { border-top: none !important; padding-top: 0 !important; }
  .footer-col:not(:first-child) {
    padding-left: 0 !important;
    border-top: 1px solid #1a1a1a !important;
  }
  /* Logo in footer col */
  .footer-col svg { height: 24px !important; width: auto !important; }
  .footer-big { display: none !important; }
}
@media screen and (max-width: 480px) {
  .footer-wrap { padding: 32px 16px 0 !important; }
}

/* ── 4. HOW IT WORKS — full column layout on mobile ── */
@media screen and (max-width: 1024px) {
  .hiw-wrap {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 48px 32px !important;
  }
  /* Image shown at top */
  .hiw-wrap .h-img {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    height: 280px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 32px !important;
    order: 1 !important;
  }
  .hiw-wrap .h-title {
    position: relative !important;
    left: auto !important; top: auto !important;
    font-size: 28px !important;
    margin-bottom: 24px !important;
    order: 0 !important;
  }
  /* Each step as a card */
  .hiw-wrap .h-step {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    background: #161616 !important;
    border: 1px solid #232323 !important;
    border-radius: 14px !important;
    padding: 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }
  .hiw-wrap .h-icon {
    position: relative !important;
    left: auto !important; top: auto !important;
    flex-shrink: 0 !important;
  }
  .hiw-wrap .h-txt {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: auto !important;
  }
  .hiw-wrap .h-step.s1,
  .hiw-wrap .h-step.s2,
  .hiw-wrap .h-step.s3,
  .hiw-wrap .h-step.s4 {
    left: auto !important; top: auto !important;
    width: 100% !important;
  }
}
@media screen and (max-width: 768px) {
  .hiw-wrap { padding: 40px 20px !important; }
  .hiw-wrap .h-img { height: 220px !important; }
  .hiw-wrap .h-title { font-size: 24px !important; }
}
@media screen and (max-width: 480px) {
  .hiw-wrap { padding: 32px 16px !important; }
  .hiw-wrap .h-img { height: 180px !important; }
}

/* ── 5. MARKETPLACE CARDS — 2 cols on tablet, 1 col on small mobile ── */
@media screen and (max-width: 1024px) {
  .mp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media screen and (max-width: 768px) {
  .mp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .mp-card-img { height: 160px !important; }
  .mp-card { font-size: 13px !important; }
}
@media screen and (max-width: 480px) {
  .mp-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .mp-card-img { height: 200px !important; }
}

/* ── 6. HAMBURGER — fix Sign In button position on mobile ── */
@media screen and (max-width: 768px) {
  .nav-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  /* Hide nav links, keep logo + Sign In + hamburger */
  .nav-bar .div-block { display: none !important; }
  /* Sign In button compact */
  .hbg-wrap.hbg-ghost .hbg-inner {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
  /* Hamburger after Sign In */
  .nav-hamburger {
    display: flex !important;
    order: 3 !important;
    margin-left: 4px !important;
  }
}

/* ── 7. HOW IT WORKS page — key figures section ── */
@media screen and (max-width: 768px) {
  .div-block-106 {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .div-block-107 {
    padding: 16px !important;
  }
}
@media screen and (max-width: 480px) {
  .div-block-106 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ════════════════════════════════════════════════════════
   FINAL RESPONSIVE OVERHAUL — v4
   All pages: Typography, Nav, Hero, Invest, HiW, Dashboard
════════════════════════════════════════════════════════ */

/* ── GLOBAL TYPOGRAPHY SCALE ── */
@media (max-width: 1024px) {
  h1, .heading { font-size: clamp(1.75rem, 4vw, 2.5rem) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(1.5rem, 3.5vw, 2rem) !important; }
  p, .paragraph { font-size: clamp(0.875rem, 2vw, 1rem) !important; line-height: 1.6 !important; }
}
@media (max-width: 768px) {
  h1, .heading { font-size: clamp(1.625rem, 5vw, 2.25rem) !important; }
  h2 { font-size: clamp(1.375rem, 4vw, 1.75rem) !important; }
  p, .paragraph { font-size: 0.9375rem !important; }
}
@media (max-width: 480px) {
  h1, .heading { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  h2 { font-size: clamp(1.25rem, 5vw, 1.5rem) !important; }
}

/* ── HAMBURGER — always in nav-bar, top-right ── */
.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
  z-index: 100;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .3s;
}
@media (max-width: 768px) {
  .nav-bar .div-block { display: none !important; }
  .nav-hamburger { display: flex !important; }
  .nav-bar { padding: 14px 20px !important; }
  /* Shrink logo on mobile */
  .nav-bar svg[viewBox="0 0 179 36"] { width: 120px !important; height: auto !important; }
  /* Compact Sign In */
  .hbg-wrap .hbg-inner { padding: 8px 16px !important; font-size: 13px !important; }
}
@media (max-width: 480px) {
  .nav-bar { padding: 12px 16px !important; }
  .nav-bar svg[viewBox="0 0 179 36"] { width: 100px !important; }
}

/* ── HERO — image above text on mobile, CTAs side by side ── */
@media (max-width: 768px) {
  .hero-grid {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 28px !important;
    padding: 24px 20px 40px !important;
  }
  .hero-img-col {
    display: block !important;
    width: 100% !important;
    order: 0 !important;
  }
  .hero-img-col .ui-card1 {
    width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .hero-img-col .ui-card2,
  .hero-img-col .ui-card3,
  .hero-img-col .ui-card4 { display: none !important; }
  .hero-text-col {
    order: 1 !important;
    width: 100% !important;
  }
  .hero-ctas {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .hero-ctas .hbg-wrap {
    flex: 1 !important;
    min-width: 140px !important;
  }
  .hero-ctas .hbg-wrap .hbg-inner {
    width: 100% !important;
    justify-content: center !important;
  }
  .hero-header { padding: 0 !important; }
  .div-block-6 { margin-top: 24px !important; }
}
@media (max-width: 480px) {
  .hero-grid { padding: 20px 16px 32px !important; gap: 20px !important; }
  .hero-ctas { gap: 8px !important; }
}

/* ── INVEST PAGE (Car Product Page) — full mobile ── */
@media (max-width: 768px) {
  .inv-page { padding: 20px 16px 60px !important; }
  .inv-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  /* Panel goes BELOW the car image */
  .inv-panel {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .inv-gallery-wrap { border-radius: 12px !important; }
  /* Tabs scroll horizontally */
  .inv-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    scrollbar-width: none !important;
    border-bottom: 1px solid #262626 !important;
    padding-bottom: 0 !important;
  }
  .inv-tabs::-webkit-scrollbar { display: none !important; }
  .inv-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
  /* Details grid */
  .inv-details-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  /* FAQ on invest page — 1 col */
  .inv-page .faq-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Specs table */
  .inv-specs-table { font-size: 13px !important; }
  /* Amount input */
  .inv-amount-wrap { margin-bottom: 12px !important; }
  /* Price display */
  .inv-price { font-size: 22px !important; }
  /* Back button */
  .inv-back { margin-bottom: 16px !important; }
  /* Header */
  .inv-header { flex-direction: column !important; gap: 12px !important; margin-bottom: 20px !important; }
  .inv-title { font-size: 28px !important; }
}
@media (max-width: 480px) {
  .inv-page { padding: 16px 12px 48px !important; }
  .inv-title { font-size: 24px !important; }
  .inv-details-grid { grid-template-columns: 1fr !important; }
  .inv-panel { padding: 20px !important; }
}

/* ── HOW IT WORKS — hero image, KPI boxes, video section ── */
@media (max-width: 1024px) {
  /* KPI boxes stay 2x2 grid */
  .div-block-106 { 
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .div-block-107 {
    padding: 20px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .heading-19 { font-size: 2rem !important; }
  /* Investing section image */
  .div-block-109 { 
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .div-block-110, .div-block-113 { width: 100% !important; }
}
@media (max-width: 768px) {
  .div-block-107 { padding: 16px !important; }
  .heading-19 { font-size: 1.75rem !important; }
  /* Hero: hero-grid = image on top */
  .hero-grid.div-block-2 { flex-direction: column-reverse !important; }
}
@media (max-width: 480px) {
  .div-block-106 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .div-block-107 { padding: 14px !important; }
  .heading-19 { font-size: 1.5rem !important; }
  .paragraph-6 { font-size: 0.8125rem !important; }
}

/* ── FOOTER — full stack, Terms at very bottom ── */
@media (max-width: 768px) {
  .footer-wrap { padding: 40px 20px 0 !important; }
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .footer-col {
    padding: 20px 0 !important;
    border-right: none !important;
    border-top: 1px solid #1a1a1a !important;
    width: 100% !important;
  }
  .footer-col:first-child { border-top: none !important; padding-top: 0 !important; }
  .footer-col:not(:first-child) { padding-left: 0 !important; }
  /* Logo col: move Terms/Privacy to after all other cols */
  .footer-col:first-child > a[href*="terms"],
  .footer-col:first-child > a[href*="privacy"] {
    order: 10 !important;
  }
  .footer-col svg { max-height: 28px !important; width: auto !important; }
  .footer-col-title { font-size: 11px !important; margin-bottom: 12px !important; }
  .footer-col a { font-size: 14px !important; padding: 4px 0 !important; }
  /* Copyright at very bottom */
  .footer-copy-row {
    padding: 20px 0 !important;
    border-top: 1px solid #1a1a1a !important;
    font-size: 12px !important;
    color: #4a4a4a !important;
  }
  .footer-big { display: none !important; }
}
@media (max-width: 480px) {
  .footer-wrap { padding: 32px 16px 0 !important; }
  .footer-socials img { width: 18px !important; }
}

/* ── MARKETPLACE — 2col tablet, 1col mobile ── */
@media (max-width: 1024px) {
  .mp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .mp-layout { grid-template-columns: 1fr !important; }
  .mp-sidebar { position: static !important; width: 100% !important; margin-bottom: 20px !important; border-radius: 12px !important; max-height: none !important; }
}
@media (max-width: 768px) {
  .mp-page { padding: 20px 16px 60px !important; }
  .mp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .mp-card-img { height: 150px !important; }
  .mp-toolbar { flex-wrap: wrap !important; gap: 8px !important; }
}
@media (max-width: 480px) {
  .mp-grid { grid-template-columns: 1fr !important; }
  .mp-card-img { height: 200px !important; }
}

/* ── DASHBOARD — Settings & Profile ── */
@media (max-width: 768px) {
  .settings-page { padding: 20px 16px 60px !important; }
  .profile-page  { padding: 20px 16px 60px !important; }
  .settings-layout { 
    display: flex !important; 
    flex-direction: column !important;
    gap: 16px !important;
  }
  .settings-nav {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding: 10px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .settings-nav::-webkit-scrollbar { display: none !important; }
  .nav-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    justify-content: center !important;
  }
  .nav-item svg { display: none !important; }
  .settings-panel { padding: 20px 16px !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .btn-save, .btn-outline, .btn-danger {
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  /* Profile KPIs */
  .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .kpi-card { padding: 16px !important; }
  .ph { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .ph-right { width: 100% !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .btn-settings { flex: 1 !important; min-width: 140px !important; justify-content: center !important; }
  /* Tabs */
  .tab-row { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; padding-bottom: 4px !important; }
  .tab-row::-webkit-scrollbar { display: none !important; }
  .tab-btn { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 12px !important; padding: 8px 14px !important; }
}
@media (max-width: 480px) {
  .settings-page, .profile-page { padding: 16px 12px 48px !important; }
  .kpi-row { grid-template-columns: 1fr !important; }
  .field-group input, .field-group select, .field-group textarea { font-size: 16px !important; }
  .page-title { font-size: 22px !important; }
}


/* ════════════════════════════════════════════════════════
   RESPONSIVE AUDIT FIXES — 9 breakpoints complets
   320 / 375 / 414 / 768 / 1024 / 1280 / 1440 / 1920 / 2560
════════════════════════════════════════════════════════ */

/* ── 320px — smallest mobile ── */
@media screen and (max-width: 320px) {
  /* Nav */
  .nav-bar { padding: 10px 12px !important; }
  .nav-bar svg[viewBox="0 0 179 36"] { width: 90px !important; height: auto !important; }
  .hbg-wrap .hbg-inner { padding: 7px 12px !important; font-size: 12px !important; }
  /* Hero */
  .hero-header, .div-block-3 { padding: 20px 12px 32px !important; }
  .heading { font-size: 1.375rem !important; line-height: 1.8rem !important; }
  .div-block-4 { gap: 8px !important; }
  /* USP */
  .usp-wrap { padding: 28px 12px !important; }
  .usp-wrap .u-title { font-size: 20px !important; }
  .usp-wrap .u-14k { font-size: 28px !important; }
  /* Cars */
  .cars-section { padding: 28px 0 !important; }
  .car-slide { width: 220px !important; min-width: 220px !important; max-width: 220px !important; }
  .car-card { width: 220px !important; height: 390px !important; }
  /* Testi */
  .testi-marquee-head { padding: 0 12px !important; }
  .testi-marquee-head h1 { font-size: 20px !important; }
  .tm-card { width: 240px !important; }
  /* FAQ */
  .faq-section { padding: 28px 12px !important; }
  .faq-title { font-size: 20px !important; }
  /* Footer */
  .footer-wrap { padding: 28px 12px 0 !important; }
  /* Video */
  .vid-expand-box video,
  .vid-expand-box img { height: 200px !important; }
  /* HIW */
  .hiw-wrap { padding: 28px 12px !important; }
  .hiw-wrap .h-img { height: 160px !important; }
}

/* ── 375px — missing vid-expand height ── */
@media screen and (max-width: 375px) {
  .vid-expand-box video,
  .vid-expand-box img { height: 220px !important; }
  .usp-wrap .u-title { font-size: 22px !important; }
  .testi-marquee-head h1 { font-size: 22px !important; }
}

/* ── 414px — dedicated breakpoint ── */
@media screen and (max-width: 414px) {
  .nav-bar { padding: 12px 16px !important; }
  .heading { font-size: 1.75rem !important; line-height: 2.2rem !important; }
  /* Hero CTAs side by side on 414px */
  .div-block-4 {
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .link-block-2 {
    flex: 1 !important;
    min-width: 130px !important;
    justify-content: center !important;
  }
  /* Cars */
  .car-slide { width: 250px !important; min-width: 250px !important; max-width: 250px !important; }
  .car-card { width: 250px !important; height: 420px !important; }
  /* Video */
  .vid-expand-box video,
  .vid-expand-box img { height: 250px !important; }
  /* Marketplace 1 col on 414px */
  .mp-grid { grid-template-columns: 1fr !important; }
  .mp-card-img { height: 200px !important; }
}

/* ── 768px — CTAs side by side fix ── */
@media screen and (max-width: 768px) {
  /* Hero: allow CTAs side by side from 414px up */
  .div-block-4 {
    flex-direction: column !important;
    gap: 10px !important;
  }
  /* Cars header padding fix */
  .cars-section { padding: 40px 20px !important; }
  .cars-outer-marquee::before,
  .cars-outer-marquee::after { width: 40px !important; }
}

/* ── 1024px — hero image gap fix ── */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Show hero right panel on tablet landscape */
  .div-block-22 {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    margin-top: 32px !important;
  }
  .ui-card1 { width: 100% !important; border-radius: 16px !important; overflow: hidden !important; }
  .ui-card2, .ui-card3, .ui-card4 { display: none !important; }
}

/* ── 1280px — cars-section padding gap fix ── */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .cars-section { padding: 80px 5rem !important; }
  .testi-marquee-head { padding: 0 5rem !important; }
  .usp-wrap { padding: 80px 5rem !important; }
  .faq-section { padding: 80px 5rem !important; }
  .hiw-wrap { padding: 80px 5rem !important; }
}

/* ── 1440px — testi head padding consistency ── */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .testi-marquee-head { padding: 0 7rem !important; }
  .cars-section { padding: 80px 7rem !important; }
  .usp-wrap { padding: 80px 7rem !important; }
}

/* ── 1920px — faq and hiw wide padding ── */
@media screen and (min-width: 1920px) {
  .faq-section { padding: 6rem 12.5rem !important; }
  .faq-layout { max-width: 1400px !important; margin: 0 auto !important; }
  .hiw-wrap { padding: 6rem 12.5rem !important; }
  .hiw-wrap .h-title { font-size: 48px !important; }
  /* Prevent FAQ text lines too wide */
  .faq-q, .faq-a { max-width: 700px !important; }
  /* Cars section */
  .cars-section .cars-header { max-width: 1400px !important; margin: 0 auto !important; }
}

/* ── 2560px — full large screen coverage ── */
@media screen and (min-width: 2560px) {
  /* Nav */
  .nav-bar { padding: 2rem 20rem !important; }
  /* Hero */
  .hero-header { padding: 8rem 20rem !important; }
  .heading { font-size: 5rem !important; line-height: 5.5rem !important; }
  .paragraph { font-size: 1.25rem !important; }
  /* Sections */
  .faq-section { padding: 8rem 20rem !important; }
  .hiw-wrap { padding: 8rem 20rem !important; }
  .testi-marquee-section { padding: 100px 0 !important; }
  /* Marketplace */
  .mp-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
  .mp-card-img { height: 280px !important; }
  /* Typography scale-up */
  .u-title { font-size: 4rem !important; }
  .faq-title { font-size: 3.5rem !important; }
  .heading-7 { font-size: 3rem !important; }
  /* Cards slightly larger */
  .car-slide { width: 340px !important; min-width: 340px !important; }
  .car-card { width: 340px !important; height: 540px !important; }
  .tm-card { width: 380px !important; }
  .tm-car-img { height: 240px !important; }
  /* Profile/settings */
  .profile-page, .settings-page { padding: 60px 320px 100px !important; }
}


/* ════════════════════════════════════════════════════════
   FINAL AUDIT FIXES — 9 breakpoints
   Appliqué après analyse individuelle complète
════════════════════════════════════════════════════════ */

/* ── 320px: usp-left explicit ── */
@media screen and (max-width: 320px) {
  .usp-left { width: 100% !important; }
  .faq-layout { display: flex !important; flex-direction: column !important; }
  .footer-grid { display: flex !important; flex-direction: column !important; }
}

/* ── 1024px: vid-expand height ── */
@media screen and (max-width: 1024px) {
  .vid-expand-box video,
  .vid-expand-box img { height: 380px !important; }
}

/* ── 1280–1439px: hero-header padding consistency ── */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .hero-header { padding: 5rem !important; }
}

/* ── 1440px+: footer back to 4 cols, heading scale ── */
@media screen and (min-width: 1440px) {
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .footer-col {
    border-top: none !important;
    padding: 40px 40px 40px 0 !important;
    border-right: 1px dashed #1e1e1e !important;
  }
  .footer-col:not(:first-child) { padding-left: 40px !important; }
  .footer-col:last-child { border-right: none !important; }
  .heading { font-size: 3.25rem !important; line-height: 3.75rem !important; }
}

/* ── 1920px: footer 4 cols explicit ── */
@media screen and (min-width: 1920px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .heading { font-size: 4rem !important; line-height: 4.5rem !important; }
}

/* ── 2560px: hiw image + footer ── */
@media screen and (min-width: 2560px) {
  .hiw-wrap .h-img { height: 500px !important; }
  .footer-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .hbg-inner { padding: 16px 36px !important; font-size: 16px !important; }
}



/* ════════════════════════════════════════════════════════
   FINAL STRUCTURAL FIXES
   Hamburger always top-right, Hero mobile layout,
   CTAs side-by-side, Settings, Invest page
════════════════════════════════════════════════════════ */

/* ══ NAV-BAR: Hamburger ALWAYS top-right, fixed position ══ */
.nav-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}
/* Desktop: hide hamburger */
@media (min-width: 769px) {
  .nav-hamburger { display: none !important; }
  .nav-mobile-menu { display: none !important; }
}
/* Mobile: show hamburger, hide nav links */
@media (max-width: 768px) {
  .nav-bar .div-block { display: none !important; }
  .nav-hamburger {
    display: flex !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
    padding: 6px !important;
    background: none !important;
    border: none !important;
    z-index: 200 !important;
    margin-left: auto !important;
  }
  .nav-hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #fff !important;
    border-radius: 2px !important;
  }
  /* Auth zone — shrink, don't push hamburger out */
  #nav-auth-zone, #nav-auth, #nav-auth-profile {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  /* Compact Sign In */
  .nav-bar .hbg-inner { padding: 8px 14px !important; font-size: 12px !important; }
  .nav-bar .hbg-wrap  { flex-shrink: 0 !important; }
}

/* ══ HERO: Mobile layout — video ABOVE text ══ */
@media (max-width: 768px) {
  .hero-header { padding: 0 !important; }
  .div-block-2.hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  /* Video/image panel first on mobile */
  .div-block-22.hero-img-col {
    order: 0 !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
  }
  .ui-card1 {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .ui-card1 video { height: 260px !important; width: 100% !important; object-fit: cover !important; }
  .ui-card2, .ui-card3, .ui-card4 { display: none !important; }
  /* Text below */
  .div-block-3.hero-text-col {
    order: 1 !important;
    padding: 28px 20px 40px !important;
  }
  /* CTAs side by side */
  .div-block-4.hero-ctas {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .div-block-4.hero-ctas .hbg-wrap {
    flex: 1 !important;
    min-width: 120px !important;
  }
  .div-block-4.hero-ctas .hbg-inner {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  /* Trusted by */
  .div-block-6 { margin-top: 20px !important; }
}
@media (max-width: 480px) {
  .div-block-3.hero-text-col { padding: 24px 16px 32px !important; }
  .ui-card1 video { height: 220px !important; }
  .div-block-4.hero-ctas { gap: 8px !important; }
  .div-block-4.hero-ctas .hbg-inner { font-size: 13px !important; padding: 10px 14px !important; }
}
@media (max-width: 320px) {
  .ui-card1 video { height: 180px !important; }
  .div-block-4.hero-ctas .hbg-inner { font-size: 12px !important; padding: 8px 10px !important; }
}

/* ══ FOOTER BOTTOM BAR ══ */
.footer-bottom {
  border-top: 1px solid #1a1a1a;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom-left {
  font-size: 12px;
  color: #4a4a4a;
  font-family: 'Helvetica Neue', Helveticaneue, Arial, sans-serif;
}
.footer-bottom-right {
  display: flex;
  gap: 20px;
}
.footer-bottom-right a {
  font-size: 12px;
  color: #4a4a4a;
  font-family: 'Helvetica Neue', Helveticaneue, Arial, sans-serif;
  text-decoration: none;
  transition: color .2s;
}
.footer-bottom-right a:hover { color: #c29d78; }
@media (max-width: 768px) {
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
}

/* ══ SETTINGS PAGE — full responsive ══ */
@media (max-width: 1024px) {
  .settings-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .settings-nav {
    width: 100% !important;
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding: 10px !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }
  .settings-nav::-webkit-scrollbar { display: none !important; }
  .nav-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    justify-content: center !important;
  }
  .nav-item svg { display: none !important; }
  .settings-panel {
    width: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }
  .two-col { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .settings-page { padding: 16px 16px 60px !important; }
  .settings-panel { padding: 20px 16px !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .field-group input,
  .field-group select,
  .field-group textarea { font-size: 16px !important; }
  .btn-save, .btn-outline, .btn-danger {
    width: 100% !important;
    margin-bottom: 10px !important;
    justify-content: center !important;
  }
  .page-title { font-size: 24px !important; }
  .settings-nav-btn { font-size: 12px !important; padding: 8px 10px !important; }
}
@media (max-width: 480px) {
  .settings-page { padding: 12px 12px 48px !important; }
  .settings-panel { padding: 16px 12px !important; }
  .nav-item { font-size: 12px !important; padding: 8px 12px !important; }
}

/* ══ INVEST / CAR PRODUCT PAGE ══ */
@media (max-width: 1024px) {
  .inv-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .inv-panel {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 768px) {
  .inv-page { padding: 16px 16px 60px !important; }
  .inv-header {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .inv-header .inv-title { font-size: 26px !important; }
  .inv-gallery-wrap { border-radius: 12px !important; }
  .inv-gallery-track .inv-car-img { aspect-ratio: 16/9 !important; }
  .inv-tabs-bar {
    display: flex !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
  .inv-tabs-bar::-webkit-scrollbar { display: none !important; }
  .inv-tab {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
  .inv-panel { padding: 20px 16px !important; }
  .inv-panel-top { margin-bottom: 16px !important; }
  /* Specs grid */
  .inv-details-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* Price */
  .inv-price-big { font-size: 26px !important; }
  .inv-back { margin-bottom: 12px !important; }
  /* Invest button full width */
  .inv-btn-invest {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Amount field */
  .inv-amount-wrap input { font-size: 16px !important; }
}
@media (max-width: 480px) {
  .inv-page { padding: 12px 12px 48px !important; }
  .inv-header .inv-title { font-size: 22px !important; }
  .inv-panel { padding: 16px 12px !important; }
  .inv-details-grid { grid-template-columns: 1fr !important; }
  .inv-price-big { font-size: 22px !important; }
}
@media (max-width: 320px) {
  .inv-page { padding: 10px 10px 40px !important; }
}

/* ══ How It Works — KPI 1 column mobile ══ */
@media (max-width: 768px) {
  #hiw-kpi-grid,
  .div-block-106 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* ════════════════════════════════════════════════════════
   OVERRIDE FINAL — screenshots audit
   Navbar, Hero layout, FAQ 1col, How-it-works hero
════════════════════════════════════════════════════════ */

/* ══ NAV: Sign In juste à côté du hamburger, tout à droite ══ */
@media (max-width: 768px) {
  .nav-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    gap: 0 !important;
  }
  /* Logo: left */
  .nav-bar > a:first-child { flex-shrink: 0; }
  /* Hide desktop links */
  .nav-bar .div-block { display: none !important; }
  /* Right group: Sign In + Burger side by side */
  #nav-auth-zone,
  #nav-auth,
  #nav-auth-profile {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .nav-hamburger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 6px !important;
    flex-shrink: 0 !important;
    /* NO margin-left: auto — Sign In is already using it */
  }
  /* Compact Sign In button */
  .nav-bar .hbg-inner {
    padding: 8px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .nav-bar .hbg-wrap {
    flex-shrink: 0 !important;
  }
}
@media (max-width: 480px) {
  .nav-bar { padding: 12px 16px !important; }
  .nav-bar .hbg-inner { padding: 7px 12px !important; font-size: 12px !important; }
}
@media (max-width: 375px) {
  .nav-bar { padding: 10px 14px !important; }
  .nav-bar svg[viewBox="0 0 179 36"] { width: 100px !important; }
  .nav-bar .hbg-inner { padding: 6px 10px !important; font-size: 11px !important; }
}

/* ══ HERO: video en haut, texte en bas, CTAs côte à côte ══ */
@media (max-width: 768px) {
  /* Section wrapper */
  .hero-header {
    padding: 0 !important;
  }
  /* Grid → colonne */
  .div-block-2.hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Image/video col → PREMIER (order 0), pleine largeur */
  .div-block-22,
  .div-block-22.hero-img-col {
    order: 0 !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
  }
  .ui-card1 {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #161616 !important;
  }
  /* Video hauteur fixe */
  .ui-card1 > video {
    border-radius: 0 !important;
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    display: block !important;
  }
  /* Hide stat cards */
  .ui-card2, .ui-card3, .ui-card4 { display: none !important; }
  /* Text col → SECOND (order 1) */
  .div-block-3,
  .div-block-3.hero-text-col {
    order: 1 !important;
    padding: 28px 20px 36px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* H1 */
  .heading {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }
  /* Paragraph */
  .paragraph {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
  }
  /* Remove br on mobile */
  .paragraph br { display: none !important; }
  /* CTAs: côte à côte */
  .div-block-4,
  .div-block-4.hero-ctas {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
  }
  .div-block-4 .hbg-wrap,
  .div-block-4.hero-ctas .hbg-wrap {
    flex: 1 !important;
    min-width: 120px !important;
    display: flex !important;
  }
  .div-block-4 .hbg-inner,
  .div-block-4.hero-ctas .hbg-inner {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  /* Trusted by */
  .div-block-6 { margin-top: 0 !important; }
  .div-block-5 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 8px !important;
  }
}
@media (max-width: 480px) {
  .div-block-3,
  .div-block-3.hero-text-col { padding: 22px 16px 32px !important; }
  .heading { font-size: 1.75rem !important; }
  .ui-card1 > video { height: 200px !important; }
}
@media (max-width: 375px) {
  .div-block-3,
  .div-block-3.hero-text-col { padding: 20px 14px 28px !important; }
  .heading { font-size: 1.6rem !important; }
  .ui-card1 > video { height: 180px !important; }
  .div-block-4 .hbg-inner,
  .div-block-4.hero-ctas .hbg-inner { font-size: 13px !important; padding: 10px 12px !important; }
}

/* ══ FAQ: TOUJOURS 1 colonne sur mobile ══ */
@media (max-width: 1024px) {
  .faq-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .faq-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .faq-q { font-size: 15px !important; }
  .faq-a { font-size: 14px !important; }
}
@media (max-width: 768px) {
  .faq-section { padding: 40px 20px !important; }
  .faq-title { font-size: 24px !important; }
}
@media (max-width: 480px) {
  .faq-section { padding: 32px 16px !important; }
  .faq-title { font-size: 22px !important; }
}

/* ══ How-it-works: même hero layout que landing ══ */
@media (max-width: 768px) {
  /* hiw hero: video (div-block-22) above text */
  .hiw-wrap-hero .div-block-2,
  section.hero-header .div-block-2 {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ══ Large screen: FAQ always readable ══ */
@media (min-width: 1025px) {
  .faq-layout {
    display: grid !important;
    grid-template-columns: 1fr 1.5fr !important;
    gap: 80px !important;
  }
}