/* =============================================================
   OMODA PALEMBANG — DESIGN TOKENS
   =============================================================
   Palet gelap, cinematic, terinspirasi warna cat mobil (biru metalik)
   namun aksennya sengaja memakai "titanium brass" hangat agar teks
   & CTA tidak berebut perhatian dengan warna video, dan terasa premium
   — bukan tema "biru teknologi" generik.
============================================================= */

:root {
  /* Warna */
  --color-bg: #0A0C0F;              /* charcoal kebiruan, bukan hitam pekat */
  --color-bg-alt: #12151A;
  --color-text: #F4F5F7;            /* off-white sejuk */
  --color-text-muted: #9AA0A8;
  --color-accent: #C9A867;          /* titanium brass — aksen premium */
  --color-accent-soft: rgba(201, 168, 103, 0.14);
  --color-line: rgba(244, 245, 247, 0.14);
  --color-line-strong: rgba(244, 245, 247, 0.28);

  /* Tipografi */
  --font-display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Tracking */
  --tracking-wide: 0.18em;
  --tracking-mid: 0.08em;

  /* Layout */
  --nav-height: 84px;
  --nav-height-mobile: 64px;
  --container-pad: 64px;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1024px) {
  :root { --container-pad: 40px; }
}

@media (max-width: 640px) {
  :root { --container-pad: 24px; }
}

/* =============================================================
   RESET
============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }

/* Utility aksesibilitas: sembunyikan visual, tetap terbaca screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero-bg-video__el { display: none; }
}

/* =============================================================
   NAVBAR
============================================================= */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  transition: height 0.3s var(--ease-premium);
}

.navbar.is-scrolled {
  border-bottom: 1px solid var(--color-line);
}

.navbar__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--container-pad);
}

.navbar__logo {
  display: flex;
  align-items: center;
}

.navbar__logo img {
  display: block;
  height: 26px;
  width: auto;
}

.navbar__menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.navbar__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-mid);
  color: var(--color-text);
  padding: 6px 0;
  opacity: 0.82;
  transition: opacity 0.25s var(--ease-premium);
}

.navbar__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.3s var(--ease-premium);
}

.navbar__link:hover {
  opacity: 1;
}

.navbar__link:hover::after {
  width: 100%;
}

/* Hamburger toggle — hidden on desktop */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 110;
}

.navbar__toggle span {
  display: block;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.35s var(--ease-premium), opacity 0.25s var(--ease-premium), width 0.3s var(--ease-premium);
}

.navbar__toggle span:nth-child(1) { width: 26px; }
.navbar__toggle span:nth-child(2) { width: 19px; }
.navbar__toggle span:nth-child(3) { width: 26px; }

.navbar__toggle[aria-expanded="true"] span:nth-child(1) {
  width: 26px;
  transform: translateY(7.5px) rotate(45deg);
}
.navbar__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.navbar__toggle[aria-expanded="true"] span:nth-child(3) {
  width: 26px;
  transform: translateY(-7.5px) rotate(-45deg);
}

/* =============================================================
   HERO
============================================================= */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* mencegah lompatan viewport akibat address bar mobile */
  min-height: 560px;
  overflow: hidden;
  background: var(--color-bg); /* dasar gelap agar tidak ada flash putih saat loading */
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__video,
.hero__fallback-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position dapat disetel per-breakpoint di bawah untuk menjaga
     mobil tetap dalam frame saat rasio video (16:9) di-crop viewport lain */
  object-position: 50% 45%;
}

.hero__video {
  opacity: 0;
  transition: opacity 1s var(--ease-premium);
}

/* Ditambahkan via JS begitu video siap diputar, mencegah frame kosong/hitam */
.hero.is-video-ready .hero__video {
  opacity: 1;
}

.hero__fallback-image {
  z-index: 1;
  transition: opacity 0.6s var(--ease-premium);
}

/* Saat video sudah jalan, fallback image disembunyikan.
   Jika video gagal diputar (mis. data saver / autoplay diblokir),
   .hero mendapat class is-video-error dari main.js dan fallback tetap tampil. */
.hero.is-video-ready .hero__fallback-image {
  opacity: 0;
}

.hero.is-video-error .hero__video {
  display: none;
}

/* Overlay: gradient HANYA di bawah (area teks) + sedikit di atas (area navbar)
   supaya mobil di tengah/atas frame tetap bersih tanpa gelap tambahan */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 7, 9, 0.88) 0%, rgba(6, 7, 9, 0.55) 20%, rgba(6, 7, 9, 0) 46%),
    linear-gradient(to bottom, rgba(6, 7, 9, 0.5) 0%, rgba(6, 7, 9, 0) 22%);
}

.hero__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 var(--container-pad) 96px;
  max-width: 900px;
}

.hero__eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  padding-left: 18px;
  border-left: 2px solid var(--color-accent);
  line-height: 1;
  opacity: 0;
  transform: translateY(14px);
  animation: heroReveal 0.9s var(--ease-premium) 0.3s forwards;
}

.hero__title {
  margin: 0 0 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.2vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(18px);
  animation: heroReveal 1s var(--ease-premium) 0.45s forwards;
}

.hero__actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(18px);
  animation: heroReveal 1s var(--ease-premium) 0.65s forwards;
}

@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Tombol — motif "bracket" sudut, echo dari bentuk lampu OMODA yang tajam
   dan notasi [ EXPLORE O4 ] pada brief. Ini elemen signature halaman. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s var(--ease-premium), background 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}

.btn::before,
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  border: 1px solid currentColor;
  transition: width 0.35s var(--ease-premium), opacity 0.35s var(--ease-premium);
  opacity: 0.9;
}

.btn::before {
  left: 0;
  border-right: none;
}

.btn::after {
  right: 0;
  border-left: none;
}

.btn:hover::before,
.btn:hover::after {
  width: 16px;
}

.btn--primary {
  color: #0A0C0F;
  background: var(--color-text);
  border: 1px solid var(--color-text);
}

.btn--primary::before,
.btn--primary::after {
  border-color: var(--color-text);
}

.btn--primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #0A0C0F;
}

.btn--primary:hover::before,
.btn--primary:hover::after {
  border-color: var(--color-accent);
}

.btn--secondary {
  color: var(--color-text);
  background: rgba(244, 245, 247, 0.04);
  border: 1px solid var(--color-line-strong);
  backdrop-filter: blur(6px);
}

.btn--secondary:hover {
  border-color: var(--color-text);
  background: rgba(244, 245, 247, 0.09);
}

/* Scroll hint */
.hero__scroll-hint {
  position: absolute;
  z-index: 3;
  right: var(--container-pad);
  bottom: 40px;
  width: 1px;
  height: 56px;
  background: var(--color-line-strong);
  overflow: hidden;
}

.hero__scroll-hint span {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  animation: scrollLine 2.2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

@media (max-width: 640px) {
  .hero__scroll-hint { display: none; }
}

/* =============================================================
   RESPONSIVE — TABLET
============================================================= */

@media (max-width: 1024px) {
  .navbar__menu { gap: 26px; }
  .navbar__link { font-size: 11.5px; }
  .hero__content { padding-bottom: 84px; }
}

/* =============================================================
   RESPONSIVE — MOBILE
   Navbar → hamburger, hero tetap full-screen, video tetap fokus utama,
   object-position disetel agar mobil (biasanya di area tengah-bawah
   frame 16:9) tidak terpotong habis saat di-crop ke rasio portrait.
============================================================= */

@media (max-width: 860px) {
  .navbar { height: var(--nav-height-mobile); }
  .navbar__logo img { height: 22px; }

  .navbar__toggle { display: flex; }

  .navbar__menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 105;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 0 32px;
    background: #08090B;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-premium);
  }

  .navbar__menu.is-open {
    transform: translateX(0);
  }

  .navbar__menu .navbar__link {
    width: 100%;
    padding: 16px 0;
    font-size: 22px;
    letter-spacing: var(--tracking-mid);
    border-bottom: 1px solid var(--color-line);
    opacity: 1;
  }

  .navbar__menu .navbar__link::after { display: none; }

  .hero__video,
  .hero__fallback-image {
    /* geser fokus horizontal ke tengah & sedikit turun agar bodi mobil
       (bukan langit/latar kosong) yang tetap terlihat saat crop portrait */
    object-position: 50% 58%;
  }

  .hero__content {
    padding: 0 var(--container-pad) 64px;
    max-width: 100%;
  }

  .hero__eyebrow {
    font-size: 11.5px;
    margin-bottom: 14px;
  }

  .hero__title {
    font-size: clamp(2.1rem, 9vw, 3rem);
    margin-bottom: 28px;
  }

  .hero__actions {
    width: 100%;
    gap: 12px;
  }

  .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 20px;
  }
}

@media (max-width: 380px) {
  .hero__actions { flex-direction: column; }
  .btn { width: 100%; }
  .hero h1{font-size:clamp(1.6rem,9vw,2.1rem)}
  .hero p{max-width:29ch}
}

/* =============================================================
   SHARED — eyebrow label & text link
   (dipakai ulang di luar hero agar sistem tipografi konsisten)
============================================================= */

.section-eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  padding-left: 18px;
  border-left: 2px solid var(--color-accent);
  line-height: 1;
}

.text-link {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  color: var(--color-text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-line-strong);
  transition: color 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}

.text-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Reveal-on-scroll generik (di-drive oleh IntersectionObserver di main.js) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
}

.reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================
   OVERVIEW SECTION
   Layout editorial asimetris (bukan teks tengah) — judul besar di kiri,
   paragraf pendek + link di kanan, menyambung ritme hero yang rata-kiri.
============================================================= */

.overview {
  background: var(--color-bg);
  padding: 140px var(--container-pad);
}

.overview__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
}

.overview__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.2;
  letter-spacing: 0.002em;
  color: var(--color-text);
  max-width: 14ch;
}

.overview__text-col {
  padding-top: 8px;
}

.overview__paragraph {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 46ch;
}

@media (max-width: 900px) {
  .overview { padding: 96px var(--container-pad); }
  .overview__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .overview__heading { max-width: none; }
}

/* =============================================================
   PILLARS SECTION
   Grid 3 kolom dengan garis pembatas tipis (hairline) — dipakai di sini
   secara sengaja karena kontennya memang 3 spesifikasi sejajar,
   selaras dengan gaya "spec sheet" automotive, bukan hiasan kosong.
============================================================= */

.pillars {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.pillars__grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pillar-card {
  border-left: 1px solid var(--color-line);
  padding: 56px 44px 64px;
  transition: background 0.4s var(--ease-premium);
}

.pillar-card:last-child {
  border-right: 1px solid var(--color-line);
}

.pillar-card:hover {
  background: rgba(244, 245, 247, 0.02);
}

.pillar-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 32px;
  background: var(--color-bg);
}

.pillar-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transform: scale(1.01);
  transition: transform 0.7s var(--ease-premium), filter 0.7s var(--ease-premium);
}

.pillar-card:hover .pillar-card__media img {
  transform: scale(1.06);
  filter: saturate(1.05);
}

.pillar-card__tag {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  color: var(--color-accent);
  margin-bottom: 14px;
}

.pillar-card__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.pillar-card__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 40ch;
}

@media (max-width: 900px) {
  .pillars__grid {
    grid-template-columns: 1fr;
  }
  .pillar-card {
    border-left: none;
    border-top: 1px solid var(--color-line);
    padding: 48px var(--container-pad);
  }
  .pillar-card:last-child {
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }
}

/* =============================================================
   PRODUCT SHOWCASE
   Editorial full-bleed: pernyataan singkat (rata kiri, konsisten
   dengan ritme Overview/Hero) diikuti visual besar yang mendominasi.
   Bukan card, bukan carousel — satu gambar besar, disengaja.
============================================================= */

.showcase {
  background: var(--color-bg);
  padding-top: 140px;
  padding-bottom: 0;
}

.showcase__intro {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 64px;
}

.showcase__heading {
  margin: 0 0 40px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: 0.002em;
  color: var(--color-text);
  max-width: 15ch;
}

.showcase__media {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 45%;
  transition: transform 1.4s var(--ease-premium);
}

.showcase__media:hover img {
  transform: scale(1.035);
}

@media (max-width: 900px) {
  .showcase { padding-top: 96px; }
  .showcase__intro { padding-bottom: 40px; }
  .showcase__heading { max-width: none; margin-bottom: 32px; }
  .showcase__media { aspect-ratio: 4 / 5; }
  .showcase__media img { object-position: 24% 50%; }
}

/* =============================================================
   SPLIT — komponen editorial dua-kolom yang dipakai ulang oleh
   Design, Technology, dan Interior. `--reverse` membalik urutan
   visual/teks untuk variasi ritme antar-section.
   Di mobile, gambar SELALU tampil lebih dulu (gambar tetap dominan).
============================================================= */

.split {
  max-width: 1400px;
  margin: 0 auto;
  padding: 140px var(--container-pad);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 88px;
  align-items: center;
}

.split__media {
  order: 1;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94);
}

.split__content {
  order: 2;
}

.split--reverse .split__media { order: 2; }
.split--reverse .split__content { order: 1; }

.split__heading {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: 0.002em;
  color: var(--color-text);
  max-width: 14ch;
}

.split__paragraph {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 46ch;
}

/* Inset layered image — dipakai HANYA pada Design section sebagai
   satu titik detail editorial, sengaja tidak diulang di section lain
   agar tetap terasa istimewa, bukan pola berulang. */
.split__media-inset {
  position: absolute;
  right: -36px;
  bottom: -36px;
  width: 44%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-line-strong);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.split__media-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 96px var(--container-pad);
  }
  .split__media,
  .split--reverse .split__media {
    order: 1;
  }
  .split__content,
  .split--reverse .split__content {
    order: 2;
  }
  .split__heading { max-width: none; }
  .split__media-inset {
    width: 48%;
    right: 14px;
    bottom: 14px;
  }
}

/* =============================================================
   PLACEHOLDER VISUAL — dipakai saat aset foto/video asli belum
   tersedia (Interior). Sengaja BUKAN gambar generik/stock: memakai
   motif bracket sudut yang sama dengan tombol & tag pillar, supaya
   tetap terasa premium dan disengaja, bukan seperti gambar rusak.
============================================================= */

.split__media--placeholder {
  background: linear-gradient(150deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

.placeholder-visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-visual__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-accent);
  opacity: 0.55;
}

.placeholder-visual__corner--tl { top: 26px; left: 26px; border-right: none; border-bottom: none; }
.placeholder-visual__corner--tr { top: 26px; right: 26px; border-left: none; border-bottom: none; }
.placeholder-visual__corner--bl { bottom: 26px; left: 26px; border-right: none; border-top: none; }
.placeholder-visual__corner--br { bottom: 26px; right: 26px; border-left: none; border-top: none; }

.placeholder-visual__label {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* =============================================================
   FOOTER
============================================================= */

.footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  padding: 64px var(--container-pad) 0;
}

.footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 48px;
}

.footer__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.footer__nav a {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--tracking-mid);
  color: var(--color-text-muted);
  transition: color 0.3s var(--ease-premium);
}

.footer__nav a:hover {
  color: var(--color-accent);
}

.footer__bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px 0;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.footer__bottom p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer__nav { gap: 18px 24px; }
  .footer__bottom { flex-direction: column; gap: 6px; }
}

/* =============================================================
   PRODUCT HERO (/omoda-o4/)
   Varian statis dari .hero homepage — full-bleed image, bukan video.
   Overlay, konten, tipografi, dan tombol MEMAKAI ULANG class hero__*
   & btn yang sudah ada, supaya benar-benar satu sistem desain yang sama.
============================================================= */

.product-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background: var(--color-bg);
}

.product-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

@media (max-width: 860px) {
  .product-hero__media img { object-position: 50% 55%; }
}

/* =============================================================
   DUO MEDIA — dua gambar besar berdampingan (dipakai di Exterior).
============================================================= */

.duo-media {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 140px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.duo-media__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.duo-media__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94);
  transition: transform 0.8s var(--ease-premium);
}

.duo-media__item:hover img {
  transform: scale(1.045);
}

.duo-media__caption {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .duo-media {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 96px;
  }
}

/* =============================================================
   MEDIA STRIP — satu visual pendukung full-width terkontainer
   (dipakai di Interior detail, Comfort, Safety). Aspect ratio
   sama dengan Showcase agar ritme visual konsisten, tapi tetap
   dalam container (bukan edge-to-edge) supaya momen full-bleed
   Product Showcase di homepage tetap terasa istimewa/unik.
============================================================= */

.media-strip {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 140px;
}

.media-strip__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.media-strip__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-strip__frame--placeholder {
  background: linear-gradient(150deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

@media (max-width: 900px) {
  .media-strip { padding-bottom: 96px; }
  .media-strip__frame { aspect-ratio: 4 / 5; }
}

/* =============================================================
   FEATURE SLOTS — grid siap-isi untuk Safety, memakai motif
   bracket tag [ 0N ] yang sama dengan Pillars, ditandai "TBC"
   sampai data resmi tersedia.
============================================================= */

.feature-slots {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 140px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}

.feature-slot {
  padding: 32px 28px;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.feature-slot__tag {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  color: var(--color-accent);
  margin-bottom: 12px;
}

.feature-slot__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
}

.feature-slot__status {
  margin: 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .feature-slots {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 96px;
  }
}

@media (max-width: 520px) {
  .feature-slots { grid-template-columns: 1fr; }
}

/* =============================================================
   SPECIFICATIONS TABLE
   Tabel semantik asli (bukan div) — hairline row dividers,
   tanpa border tebal, tanpa styling berlebihan.
============================================================= */

.spec-intro {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 56px;
}

.spec-table-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 140px;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--color-line);
}

.spec-table tr {
  border-bottom: 1px solid var(--color-line);
}

.spec-table th,
.spec-table td {
  padding: 22px 6px;
  text-align: left;
  font-weight: 400;
}

.spec-table th {
  width: 38%;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--color-text);
}

.spec-table td {
  font-size: 14.5px;
  font-style: italic;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .spec-table th, .spec-table td { padding: 16px 4px; font-size: 13px; }
}

/* =============================================================
   GALLERY — grid editorial asimetris (1 besar + 2 kecil),
   bukan grid kotak seragam bergaya katalog.
============================================================= */

.gallery__grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 140px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  height: 640px;
}

.gallery__item {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.gallery__item--large {
  grid-row: 1 / 3;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94);
  transition: transform 0.9s var(--ease-premium);
}

.gallery__item:hover img {
  transform: scale(1.045);
}

@media (max-width: 900px) {
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    gap: 16px;
    padding-bottom: 96px;
  }
  .gallery__item { aspect-ratio: 4 / 3; }
  .gallery__item--large { grid-row: auto; aspect-ratio: 4 / 3; }
}

/* =============================================================
   CTA SECTION — dipakai untuk Price/Enquire & Test Drive.
   `--alt` memberi latar sedikit lebih terang untuk membedakan
   ritme dari section di sekitarnya.
============================================================= */

.cta-section {
  padding: 140px var(--container-pad);
  background: var(--color-bg);
}

.cta-section--alt {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.cta-section__inner {
  max-width: 1400px;
  margin: 0 auto;
}

.cta-section__heading {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.15;
  color: var(--color-text);
  max-width: 16ch;
}

.cta-section__sub {
  margin: 0 0 40px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-mid);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.cta-section__actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .cta-section { padding: 96px var(--container-pad); }
}

@media (max-width: 380px) {
  .cta-section__actions { flex-direction: column; }
  .cta-section__actions .btn { width: 100%; }
}

/* Safe-area untuk notch/home-indicator iPhone */
@supports (padding: max(0px)) {
  .navbar__inner {
    padding-left: max(var(--container-pad), env(safe-area-inset-left));
    padding-right: max(var(--container-pad), env(safe-area-inset-right));
  }
  .hero__content {
    padding-left: max(var(--container-pad), env(safe-area-inset-left));
    padding-right: max(var(--container-pad), env(safe-area-inset-right));
    padding-bottom: max(96px, calc(env(safe-area-inset-bottom) + 64px));
  }
}


/* =============================================================
   GALLERY PAGE — featured editorial pair slider
   Pair 01 is a true panoramic split; Pair 02 is a cinematic
   editorial spread. Desktop keeps the pair side-by-side;
   mobile stacks each pair vertically for portrait source media.
============================================================= */

.gallery-page-hero {
  padding: calc(var(--nav-height) + 96px) var(--container-pad) 88px;
  background: var(--color-bg);
}

.gallery-page-hero__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: end;
}

.gallery-page-hero__heading h1,
.gallery-showcase__header h2,
.gallery-cta__inner h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.gallery-page-hero__heading h1 {
  font-size: clamp(3.2rem, 8vw, 7.5rem);
  line-height: 0.92;
}

.gallery-page-hero__copy {
  max-width: 34ch;
  padding-bottom: 5px;
}

.gallery-page-hero__copy p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.7;
}

.gallery-showcase {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 112px var(--container-pad) 124px;
}

.gallery-showcase__header {
  max-width: 1400px;
  margin: 0 auto 42px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
}

.gallery-showcase__header h2 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.08;
}

.gallery-showcase__counter {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--tracking-mid);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.gallery-showcase__counter span:first-child {
  color: var(--color-text);
}

.gallery-showcase__slash {
  margin: 0 5px;
  color: var(--color-line-strong);
}

.gallery-slider-wrap {
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  outline: none;
}

.gallery-slider::-webkit-scrollbar { display: none; }

.gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.gallery-slide__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
}

.gallery-slide__label span {
  color: var(--color-accent);
}

.gallery-slide__label strong {
  font-weight: 500;
  color: var(--color-text-muted);
}

.gallery-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  background: var(--color-bg);
  overflow: hidden;
}

.gallery-pair--panorama {
  aspect-ratio: 8 / 5;
}

.gallery-pair:not(.gallery-pair--panorama) {
  aspect-ratio: 8 / 5;
}

.gallery-image {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  cursor: zoom-in;
}

.gallery-image::after {
  content: 'VIEW';
  position: absolute;
  right: 18px;
  bottom: 16px;
  padding: 8px 10px;
  border: 1px solid rgba(244,245,247,0.28);
  background: rgba(10,12,15,0.28);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: var(--tracking-mid);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease-premium), transform .35s var(--ease-premium);
  backdrop-filter: blur(6px);
}

.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96);
  transition: transform .9s var(--ease-premium), filter .9s var(--ease-premium);
}

.gallery-image:hover img,
.gallery-image:focus-visible img {
  transform: scale(1.025);
  filter: saturate(1);
}

.gallery-image:hover::after,
.gallery-image:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.gallery-slide__caption {
  margin: 18px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 52ch;
}

.gallery-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
}

.gallery-control {
  justify-self: start;
  appearance: none;
  border: 0;
  background: none;
  padding: 10px 0;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  cursor: pointer;
  transition: color .3s var(--ease-premium);
}

.gallery-control:last-child { justify-self: end; }

.gallery-control:hover,
.gallery-control:focus-visible {
  color: var(--color-text);
}

.gallery-control:disabled {
  opacity: .32;
  cursor: default;
}

.gallery-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gallery-dot {
  width: 30px;
  height: 2px;
  padding: 0;
  border: 0;
  background: var(--color-line-strong);
  cursor: pointer;
  transition: background .3s var(--ease-premium), width .3s var(--ease-premium);
}

.gallery-dot.is-active {
  width: 46px;
  background: var(--color-accent);
}

.gallery-cta {
  padding: 128px var(--container-pad);
  background: var(--color-bg);
}

.gallery-cta__inner {
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-cta__inner h2 {
  max-width: 11ch;
  margin-bottom: 34px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.08;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ease-premium), visibility .35s var(--ease-premium);
}

.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,7,9,.94);
  backdrop-filter: blur(12px);
}

.gallery-lightbox__dialog {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 94vw);
  max-height: 90vh;
}

.gallery-lightbox__dialog img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.gallery-lightbox__close {
  appearance: none;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: calc(100% + 14px);
  border: 0;
  background: none;
  color: var(--color-text-muted);
  padding: 8px 0;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--tracking-mid);
  cursor: pointer;
}

.gallery-lightbox__close:hover,
.gallery-lightbox__close:focus-visible {
  color: var(--color-text);
}

@media (max-width: 900px) {
  .gallery-page-hero {
    padding-top: calc(var(--nav-height-mobile) + 76px);
    padding-bottom: 68px;
  }

  .gallery-page-hero__inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .gallery-page-hero__heading h1 {
    font-size: clamp(3rem, 18vw, 5rem);
  }

  .gallery-showcase {
    padding-top: 88px;
    padding-bottom: 96px;
  }

  .gallery-showcase__header {
    align-items: end;
    margin-bottom: 32px;
  }

  .gallery-pair {
    grid-template-columns: 1fr;
    aspect-ratio: auto !important;
    gap: 3px;
  }

  .gallery-image {
    aspect-ratio: 4 / 5;
  }

  .gallery-image::after { display: none; }

  .gallery-slide__caption { margin-top: 16px; }

  .gallery-controls {
    position: relative;
    grid-template-columns: 1fr auto 1fr;
    margin-top: 22px;
  }

  .gallery-control {
    min-height: 44px;
  }

  .gallery-cta {
    padding: 96px var(--container-pad);
  }

  .gallery-lightbox {
    padding: 20px;
  }

  .gallery-lightbox__dialog img {
    max-height: 78vh;
  }
}

@media (max-width: 520px) {
  .gallery-page-hero__copy p { font-size: 14px; }
  .gallery-showcase__header { margin-bottom: 26px; }
  .gallery-showcase__counter { font-size: 10px; }
  .gallery-controls { gap: 14px; }
  .gallery-control { font-size: 9px; }
  .gallery-dot { width: 22px; }
  .gallery-dot.is-active { width: 34px; }
}


/* =============================================================
   GALLERY TEASER — product page bridge to standalone gallery
============================================================= */

.gallery-teaser {
  padding: 128px var(--container-pad);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.gallery-teaser__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
}

.gallery-teaser__inner .overview__heading {
  max-width: 16ch;
}

@media (max-width: 700px) {
  .gallery-teaser { padding: 96px var(--container-pad); }
  .gallery-teaser__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}

/* =============================================================
   STAT STRIP — angka kunci (baterai, tenaga, jarak tempuh, dst)
   dipakai di hub /omoda-o4/ dan halaman spesifikasi.
============================================================= */

.stat-strip {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 96px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-line);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.stat-card {
  background: var(--color-bg);
  padding: 28px 24px;
}

.stat-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.stat-card__label {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 64px;
  }
  .stat-card { padding: 22px 18px; }
}

/* =============================================================
   SPEC FIGURE — gambar infografis dengan teks yang sudah menempel
   (mis. slide dimensi/spesifikasi resmi). object-fit: contain
   supaya teksnya tidak pernah terpotong oleh cropping.
============================================================= */

.spec-figure {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 64px;
}

.spec-figure__frame {
  width: 100%;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  overflow: hidden;
}

.spec-figure__frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.spec-figure__caption {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  text-align: center;
}

/* =============================================================
   SUBPAGE INTRO — eyebrow + heading pendek di awal setiap
   sub-halaman (Design/Interior/Technology/Specifications),
   dipakai setelah product-hero sebelum konten utama.
============================================================= */

.subpage-intro {
  max-width: 1400px;
  margin: 0 auto;
  padding: 96px var(--container-pad) 24px;
}

.subpage-intro__lead {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .subpage-intro { padding: 72px var(--container-pad) 16px; }
}

/* =============================================================
   STAT CARD sebagai link (revisi homepage) — value + label asli
   dipertahankan, ditambah baris CTA kecil beraksen + hover state.
============================================================= */

a.stat-card {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--ease-premium);
}

a.stat-card:hover {
  background: rgba(244, 245, 247, 0.03);
}

a.stat-card:hover .stat-card__value {
  color: var(--color-accent);
}

.stat-card__cta {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  color: var(--color-accent);
}

/* =============================================================
   FLOATING WHATSAPP CTA
   Selalu terlihat (opacity:1 permanen) sejak halaman dimuat —
   tidak bergantung scroll/JS sama sekali untuk visibility dasarnya.
============================================================= */

.wa-float {
  position: fixed;
  z-index: 999;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px 15px 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  color: var(--color-text);
  opacity: 1;
  visibility: visible;
  transition: border-color 0.3s var(--ease-premium), background 0.3s var(--ease-premium),
    box-shadow 0.3s var(--ease-premium);
}

.wa-float:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-alt);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}

.wa-float__icon {
  flex-shrink: 0;
  color: var(--color-accent);
}

.wa-float svg { width: 25px; height: 25px; flex: 0 0 25px; }

.wa-float__text {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .wa-float {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    padding: 15px;
    gap: 0;
  }
  .wa-float__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}


/* =============================================================
   OMODA JAECOO PALEMBANG — GLOBAL REDESIGN COMPATIBILITY
   Visual system adapted from the current OMODA Palembang project.
   Existing product data/classes are preserved.
============================================================= */

/* ---------- Global header ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-height);
  display:flex;align-items:center;background:rgba(10,12,15,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--color-line);
}
.top-inner{width:100%;max-width:none;margin:0;padding:0 var(--container-pad);display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo{display:flex;align-items:center;flex-shrink:0}
.brand-logo{display:block;width:auto;height:27px;object-fit:contain}
.top-links{display:flex;align-items:center;gap:32px;margin-left:auto}
.top-links a{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:var(--tracking-mid);color:var(--color-text);opacity:.82}
.top-links a:hover,.top-links a.active{opacity:1;color:var(--color-accent)}
.model-menu{display:none}
.model-menu-panel{display:none}

/* ---------- Hero / homepage ---------- */
.hero{height:100vh;height:100dvh;min-height:600px;background:var(--color-bg);position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s var(--ease-premium);transform:scale(1.01)}
.hero-bg.is-active{opacity:1}
.hero-bg-video{background-color:var(--color-bg)}
.hero-bg-video__el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .6s var(--ease-premium)}
.hero-bg-video.is-active .hero-bg-video__el.is-ready{opacity:1}
.hero-bg-video .hero-bg-video__el.is-error{display:none}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,9,.88),rgba(6,7,9,.2) 42%,rgba(6,7,9,.32));z-index:1}
.hero-copy{position:relative;z-index:2;color:var(--color-text);height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 clamp(24px,5vw,var(--container-pad)) clamp(56px,9vh,96px);max-width:480px;text-align:left}
.hero .eyebrow{font-family:var(--font-display);font-size:11px;letter-spacing:.16em;color:var(--color-accent);text-transform:uppercase;font-weight:600}
.hero h1{font-family:var(--font-display);font-size:clamp(1.9rem,3.1vw,3.25rem);line-height:1.04;letter-spacing:-.03em;margin:10px 0 12px;font-weight:600}
.hero p{font-size:clamp(13px,1.1vw,15px);line-height:1.55;color:var(--color-text-muted);max-width:400px;margin:0}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.hero .btn{min-height:40px;padding:0 16px;font-size:10px}

/* Slide-specific positioning — each video has a different composition, so
   the two slides are not forced into identical placement. */
.hero-slider[data-active-slide="0"] .hero-copy{align-items:flex-start;text-align:left}
.hero-slider[data-active-slide="1"] .hero-copy{align-items:flex-start;text-align:left;max-width:440px;padding-bottom:clamp(64px,10vh,104px)}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid var(--color-line-strong);border-radius:0;font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:var(--tracking-mid);text-transform:uppercase;transition:.3s var(--ease-premium)}
.btn.primary,.btn.dark{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}
.btn.ghost{background:rgba(244,245,247,.05);color:var(--color-text);border-color:rgba(244,245,247,.28)}
.btn:hover{transform:translateY(-2px);border-color:var(--color-accent)}
.hero-slide-control{position:absolute;z-index:4;bottom:36px;width:42px;height:42px;border:1px solid var(--color-line-strong);background:rgba(10,12,15,.4);color:var(--color-text);font-size:24px;cursor:pointer}
.hero-slide-prev{right:106px}.hero-slide-next{right:54px}
.hero-dots{position:absolute;z-index:4;left:var(--container-pad);bottom:48px;display:flex;gap:8px}
.hero-dot{width:28px;height:2px;border:0;background:rgba(244,245,247,.35);padding:0;cursor:pointer}
.hero-dot.active{background:var(--color-accent)}

/* ---------- Sections / model cards ---------- */
.section{padding:130px 0;background:var(--color-bg)}
.section.alt{background:var(--color-bg-alt)}
.wrap{width:min(1400px,calc(100% - (var(--container-pad) * 2)));margin:0 auto}
.kicker,.section-eyebrow{font-family:var(--font-display);font-size:11px;letter-spacing:var(--tracking-wide);text-transform:uppercase;font-weight:600;color:var(--color-accent)}
.section h2{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,4rem);line-height:1.05;letter-spacing:-.035em;font-weight:600;color:var(--color-text);margin:12px 0 18px}
.lead{max-width:62ch;color:var(--color-text-muted);font-size:16px;line-height:1.75}
.model-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:60px}
.model-card{border:0;border-left:1px solid var(--color-line);border-bottom:1px solid var(--color-line);border-radius:0;background:var(--color-bg);overflow:hidden;display:flex;flex-direction:column;transition:background .3s var(--ease-premium),transform .5s var(--ease-premium)}
.model-card:hover{transform:none;box-shadow:none;background:rgba(244,245,247,.025)}
.model-visual{height:auto;aspect-ratio:16/9;background:var(--color-bg-alt);overflow:hidden}
.model-visual img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-premium);filter:saturate(.92)}
.model-card:hover .model-visual img{transform:scale(1.04);filter:saturate(1)}
.model-info{padding:32px 30px 38px}
.model-info h3{font-family:var(--font-display);font-size:28px;line-height:1.05;letter-spacing:-.025em;color:var(--color-text);margin:0 0 8px;font-weight:600}
.model-type{font-family:var(--font-display);font-size:10px;letter-spacing:var(--tracking-mid);text-transform:uppercase;color:var(--color-accent)}
.model-detail{margin:18px 0;color:var(--color-text-muted);font-size:14px;line-height:1.7;max-width:52ch}
.card-actions{display:flex;gap:20px;flex-wrap:wrap;margin-top:24px}
.model-link{font-family:var(--font-display);font-size:10.5px;letter-spacing:var(--tracking-mid);font-weight:600;color:var(--color-text);border-bottom:1px solid var(--color-line-strong);padding-bottom:5px}
.model-link:hover{color:var(--color-accent);border-color:var(--color-accent)}
.wa-inline{background:transparent!important;border:0!important;padding:0!important;color:var(--color-accent)!important}

/* ---------- Product pages ---------- */
.product-hero{
  position:relative;width:100%;min-height:100vh;padding:0;overflow:hidden;background:var(--color-bg);
}
.product-hero>.wrap{width:100%;max-width:none;margin:0;padding:calc(var(--nav-height) + 32px) var(--container-pad) 80px}
.product-head{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center;min-height:calc(100vh - var(--nav-height) - 80px)}
.product-head>div:first-child{padding-bottom:10px}
.product-head h1{font-family:var(--font-display);font-size:clamp(3rem,6vw,6.5rem);line-height:.9;letter-spacing:-.055em;font-weight:600;color:var(--color-text);margin:14px 0 22px}
.product-head p{color:var(--color-text-muted);font-size:16px;line-height:1.75;max-width:52ch}
.product-image{border-radius:0;overflow:hidden;background:var(--color-bg-alt);min-height:540px;aspect-ratio:4/3}
.product-image img{width:100%;height:100%;min-height:540px;object-fit:cover;transition:transform 1s var(--ease-premium)}
.product-image:hover img{transform:scale(1.025)}
.price{font-family:var(--font-display);font-size:28px;font-weight:600;color:var(--color-text);margin-top:28px}
.price small{display:block;font-family:var(--font-body);font-size:11px;line-height:1.5;color:var(--color-text-muted);font-weight:400;margin-top:7px}
.model-nav{display:flex;gap:22px;flex-wrap:wrap;border-bottom:1px solid var(--color-line);padding-bottom:18px;margin-bottom:30px}
.model-nav a{font-family:var(--font-display);font-size:10px;letter-spacing:var(--tracking-mid);text-transform:uppercase;color:var(--color-text-muted);padding:4px 0;border:0;border-radius:0;font-weight:600}
.model-nav a:hover,.model-nav a.active{color:var(--color-accent);background:none}

/* Specs */
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--color-line);border-left:1px solid var(--color-line);margin-top:45px}
.spec{border-right:1px solid var(--color-line);border-bottom:1px solid var(--color-line);border-radius:0;background:transparent;padding:28px 24px;min-height:120px}
.spec span{display:block;font-family:var(--font-display);font-size:10px;letter-spacing:var(--tracking-mid);text-transform:uppercase;color:var(--color-text-muted);margin-bottom:12px}
.spec b{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--color-text);line-height:1.2}
.table-wrap{overflow:auto;border:0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);border-radius:0;margin-top:40px!important}
.spec-table{width:100%;border-collapse:collapse;min-width:650px;color:var(--color-text)}
.spec-table th,.spec-table td{padding:18px 8px;border-bottom:1px solid var(--color-line);text-align:left;font-size:13px;background:transparent}
.spec-table th{width:35%;font-family:var(--font-display);font-size:11px;letter-spacing:var(--tracking-mid);text-transform:uppercase;color:var(--color-text)}
.spec-table td{color:var(--color-text-muted)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}

/* Feature and SIVP */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--color-line);border-left:1px solid var(--color-line);margin-top:40px}
.feature{border-right:1px solid var(--color-line);border-bottom:1px solid var(--color-line);border-radius:0;padding:28px;background:transparent}
.feature .num{font-family:var(--font-display);font-size:10px;letter-spacing:var(--tracking-mid);color:var(--color-accent)}
.feature h3{font-family:var(--font-display);font-size:18px;color:var(--color-text);margin:12px 0 8px}
.feature p{color:var(--color-text-muted);font-size:13px;line-height:1.65}
.sivp{background:var(--color-bg-alt);color:var(--color-text);border:1px solid var(--color-line);border-radius:0;padding:46px}
.sivp .kicker{color:var(--color-accent)}
.sivp h2{margin-top:8px}

/* Contact / CTA */
.contact-strip{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);padding:32px 0}
.contact-strip strong{font-family:var(--font-display);font-size:20px;color:var(--color-text)}
.contact-strip p{margin:8px 0 0;color:var(--color-text-muted);font-size:13px;line-height:1.6}
.cta{padding:140px var(--container-pad);background:var(--color-bg-alt);border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.cta>.wrap{max-width:1400px}
.cta h2{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,4rem);line-height:1.05;letter-spacing:-.04em;color:var(--color-text);font-weight:600;margin:0 0 18px}
.cta p{color:var(--color-text-muted);font-size:14px;line-height:1.7}

/* Footer / floating WhatsApp */
.footer{padding:60px var(--container-pad) 34px;background:var(--color-bg);color:var(--color-text-muted);font-size:11px;line-height:1.6;border-top:1px solid var(--color-line)}
.footer>.wrap{width:100%;max-width:1400px}
.wa-float{position:fixed;z-index:999;right:20px;bottom:20px;display:flex;align-items:center;gap:10px;padding:14px 22px 14px 16px;background:var(--color-bg);border:1px solid var(--color-line-strong);border-radius:999px;box-shadow:0 8px 28px rgba(0,0,0,.4);color:var(--color-text)}
.wa-float:hover{border-color:var(--color-accent);background:var(--color-bg-alt)}

/* ---------- Mobile ---------- */
@media(max-width:900px){
  :root{--container-pad:24px;--nav-height:72px}
  .top{height:var(--nav-height)}
  .top-inner{padding:0 var(--container-pad)}
  .top-links{display:none}
  .model-menu{display:none}
  .model-menu-btn{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--color-line-strong);background:transparent;color:var(--color-text);font-size:22px;cursor:pointer}
  .model-menu-panel{position:absolute;right:var(--container-pad);top:calc(var(--nav-height) - 2px);display:none;min-width:230px;background:rgba(10,12,15,.97);border:1px solid var(--color-line);padding:10px}
  .model-menu-panel.is-open{display:flex;flex-direction:column}
  .model-menu-panel a{padding:12px 10px;font-family:var(--font-display);font-size:11px;letter-spacing:.08em;color:var(--color-text)}
  .model-menu-panel a:hover{color:var(--color-accent)}
  .hero{min-height:78svh}
  .hero-copy{max-width:88%;padding:0 var(--container-pad) clamp(72px,13vh,96px)}
  .hero .eyebrow{font-size:10.5px;letter-spacing:.14em}
  .hero h1{font-size:clamp(1.9rem,7.4vw,2.75rem);margin:8px 0 10px}
  .hero p{max-width:34ch}
  .hero .actions{margin-top:16px}
  .hero-slider[data-active-slide="1"] .hero-copy{padding-bottom:clamp(84px,15vh,112px)}
  .hero-slide-prev{right:82px}.hero-slide-next{right:30px}
  .hero-dots{left:var(--container-pad);bottom:34px}
  .section{padding:96px 0}
  .model-grid{grid-template-columns:1fr}
  .product-hero>.wrap{padding:calc(var(--nav-height) + 10px) var(--container-pad) 70px}
  .product-head{grid-template-columns:1fr;gap:38px;min-height:0}
  .product-head h1{font-size:clamp(3rem,13vw,5rem)}
  .product-image{min-height:0;aspect-ratio:4/3}
  .product-image img{min-height:0}
  .spec-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:1fr 1fr}
  .contact-strip{align-items:flex-start;flex-direction:column}
  .cta{padding:96px var(--container-pad)}
}
@media(max-width:520px){
  .brand-logo{height:23px}
  .hero-copy{max-width:100%;padding-bottom:max(clamp(64px,14vh,88px),calc(env(safe-area-inset-bottom) + 56px))}
  .hero h1{font-size:clamp(1.75rem,8.6vw,2.35rem);letter-spacing:-.025em}
  .hero p{font-size:13px;max-width:32ch}
  .hero .actions{margin-top:14px}
  .hero .btn{min-height:38px;padding:0 14px;font-size:9.5px}
  .spec-grid{grid-template-columns:1fr 1fr}
  .spec{padding:22px 16px;min-height:110px}
  .spec b{font-size:15px}
  .feature-grid{grid-template-columns:1fr}
  .sivp{padding:28px 22px}
  .wa-float{right:14px;bottom:max(14px,env(safe-area-inset-bottom));padding:13px}
  .wa-float span{display:none}
}

/* =============================================================
   O4 VIDEO HERO + PERFORMANCE PAGE
============================================================= */
.product-hero__media video,
.o4-hero video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  opacity:0;transition:opacity 1s var(--ease-premium);
}
#hero.is-video-ready .product-hero__media video,
.o4-hero.is-video-ready video{opacity:1}
.product-hero__media .hero__fallback-image,
.o4-hero .hero__fallback-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  opacity:1;transition:opacity .7s var(--ease-premium);z-index:1
}
#hero.is-video-ready .hero__fallback-image,
.o4-hero.is-video-ready .hero__fallback-image{opacity:0}
#hero.is-video-error .product-hero__media video,
.o4-hero.is-video-error video{display:none}
.product-hero__media:after,.o4-hero:after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(6,7,9,.88),rgba(6,7,9,.18) 52%,rgba(6,7,9,.42));
}
.product-hero>.wrap{position:relative;z-index:3}
.product-hero .model-nav{position:relative;z-index:4}
.product-hero .product-head{position:relative;z-index:3}
.product-hero:has(.hero__content) .product-head>div:first-child{padding-top:60px}
.product-hero:has(.hero__content) .product-image{background:transparent;border:0;visibility:hidden;pointer-events:none}
.product-hero:has(.hero__content) .product-head h1,.product-hero:has(.hero__content) .product-head p,.product-hero:has(.hero__content) .product-head .price,
.product-hero:has(.hero__content) .product-head .eyebrow,.product-hero:has(.hero__content) .product-head .actions{position:relative;z-index:4}

/* Make O4 source hero content sit over the video */
.product-hero .hero__content{position:absolute;inset:0;z-index:4;height:100%;max-width:1000px;justify-content:flex-end;padding:0 var(--container-pad) clamp(72px,9vh,112px);pointer-events:none} .product-hero .hero__content .hero__actions{pointer-events:auto}
.product-hero .hero__content .hero__title{font-family:var(--font-display);font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.055em;color:var(--color-text)}
.product-hero .hero__content .hero__eyebrow{font-family:var(--font-display);color:var(--color-accent);letter-spacing:var(--tracking-wide)}
.product-hero .hero__actions{display:flex;gap:12px;flex-wrap:wrap}

/* O4 pages use the editorial source structure; ensure content is readable */
.overview,.showcase,.pillars,.split,.duo-media,.media-strip,.feature-slots,.subpage-intro,.spec-intro,.spec-table-wrap{position:relative;z-index:1}

/* Performance hero */
.o4-hero{
  position:relative;min-height:100vh;height:100dvh;overflow:hidden;background:var(--color-bg);
  display:flex;align-items:flex-end;
}
.o4-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.o4-hero .o4-hero-copy{
  position:relative;z-index:4;color:var(--color-text);padding-bottom:100px;
}
.o4-hero h1{font-family:var(--font-display);font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.055em;margin:14px 0 20px;font-weight:600}
.o4-hero p{max-width:680px;color:var(--color-text-muted);font-size:16px;line-height:1.7}
.o4-stat-hero{
  display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--color-line);border-left:1px solid var(--color-line);margin-top:50px
}
.o4-stat-hero>div{min-height:145px;padding:26px 22px;border-right:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.o4-stat-hero b{display:block;font-family:var(--font-display);font-size:clamp(28px,3.3vw,48px);font-weight:600;letter-spacing:-.04em;color:var(--color-text)}
.o4-stat-hero span{display:block;margin-top:8px;font-size:11px;letter-spacing:var(--tracking-mid);text-transform:uppercase;color:var(--color-text-muted)}
.o4-split{
  max-width:1400px;margin:0 auto;padding:0 var(--container-pad) 140px;display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center
}
.o4-split-media{aspect-ratio:4/3;overflow:hidden;background:var(--color-bg-alt)}
.o4-split-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-premium)}
.o4-split-media:hover img{transform:scale(1.035)}
.o4-split-copy .kicker{margin-bottom:12px}
.o4-split-copy h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.6rem);line-height:1.05;letter-spacing:-.035em;color:var(--color-text);margin:0 0 20px}
.o4-split-copy p{max-width:50ch;color:var(--color-text-muted);line-height:1.75}
.o4-split.is-reverse{grid-template-columns:.85fr 1.15fr}
.o4-split.is-reverse .o4-split-media{order:2}
.o4-split.is-reverse .o4-split-copy{order:1}

.navbar__link--cta{color:var(--color-accent)!important}
@media(max-width:900px){
  .product-hero{height:auto;min-height:100svh}
  .product-hero>.wrap{padding-bottom:70px}
  .product-hero:has(.hero__content) .product-head{display:block;min-height:0;padding-top:52svh}
  .product-hero:has(.hero__content) .product-head>div:first-child{padding-top:0}
  .product-hero:has(.hero__content) .product-image{display:none}
  .product-hero:has(.hero__content) .hero__content{position:relative}
  .o4-hero{min-height:78svh;height:78svh}
  .o4-hero .o4-hero-copy{padding-bottom:72px}
  .o4-stat-hero{grid-template-columns:repeat(2,1fr)}
  .o4-split,.o4-split.is-reverse{grid-template-columns:1fr;gap:36px;padding-bottom:96px}
  .o4-split.is-reverse .o4-split-media,.o4-split.is-reverse .o4-split-copy{order:initial}
}
@media(max-width:520px){
  .o4-stat-hero>div{min-height:120px;padding:22px 16px}
  .o4-stat-hero b{font-size:30px}
  .product-hero:has(.hero__content) .product-head{padding-top:45svh}
}


/* Revision: model selector row removed in favor of the primary hamburger/navigation. */
.model-nav{display:none !important;}

/* Revision: clearer floating WhatsApp control. */
@media (max-width:640px){.wa-float svg{width:24px;height:24px;flex-basis:24px}.wa-float{padding:15px;}}


/* =============================================================
   OMODA O4 — FUTURISTIC TYPOGRAPHY, PRECISE HERO & RHYTHM
   Scoped only to O4 so JAECOO pages retain their existing data/UI.
============================================================= */
.o4-site {
  --font-display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.o4-site .product-hero {
  height: min(100svh, 960px);
  min-height: 620px;
}
.o4-site .product-hero .hero__content {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  max-width: 1180px;
  height: 100%;
  padding: 0 var(--container-pad) clamp(42px, 7vh, 86px) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end !important;
  align-items: flex-start;
}
.o4-site .product-hero .hero__eyebrow {
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .22em;
}
.o4-site .product-hero .hero__title {
  margin: 0 0 24px;
  max-width: 11ch;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6.4vw, 6.2rem);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 600;
  text-wrap: balance;
}
.o4-site .product-hero .hero__actions {
  gap: 10px;
  margin: 0;
}
.o4-site .product-hero .hero__actions .btn {
  min-height: 46px;
  padding-inline: 20px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
}
.o4-site .product-hero__media video,
.o4-site .product-hero__media .hero__fallback-image {
  object-position: 50% 50%;
}
.o4-site .subpage-intro { padding-top: 72px; padding-bottom: 18px; }
.o4-site .showcase { padding-top: 92px; }
.o4-site .showcase__intro { padding-bottom: 42px; }
.o4-site .split { padding-top: 92px; padding-bottom: 92px; gap: 64px; }
.o4-site .duo-media { padding-bottom: 92px; }
.o4-site .pillars .pillar-card { padding-top: 44px; padding-bottom: 50px; }
.o4-site .cta-section { padding-top: 92px; padding-bottom: 92px; }
.o4-site .section { padding-top: 92px; padding-bottom: 92px; }
.o4-site .o4-split { padding-bottom: 92px; gap: 56px; }
.o4-site .o4-hero .o4-hero-copy { padding-bottom: clamp(42px, 7vh, 86px); }
.o4-site .o4-hero h1,
.o4-site .o4-split-copy h2,
.o4-site .section h2,
.o4-site .cta-section__heading,
.o4-site .split__heading,
.o4-site .overview__heading,
.o4-site .showcase__heading,
.o4-site .pillar-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.o4-site .o4-hero h1 { font-size: clamp(2.7rem, 6.4vw, 6.2rem); }
.o4-site .o4-hero p { max-width: 58ch; }

/* Large final WhatsApp CTA — intentionally elegant, not a floating obstruction. */
.o4-final-cta {
  position: relative;
  padding: clamp(68px, 8vw, 108px) var(--container-pad);
  background:
    radial-gradient(circle at 80% 20%, rgba(201,168,103,.10), transparent 36%),
    linear-gradient(135deg, #11151a 0%, #0a0c0f 65%);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}
.o4-final-cta__inner { max-width: 1080px; margin: 0 auto; }
.o4-final-cta__eyebrow {
  margin: 0 0 16px;
  color: var(--color-accent);
  font: 600 11px/1.2 var(--font-display);
  letter-spacing: .22em;
}
.o4-final-cta h2 {
  max-width: 13ch;
  margin: 0 0 18px;
  color: var(--color-text);
  font: 600 clamp(2.3rem, 5vw, 5rem)/1.02 var(--font-display);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.o4-final-cta__inner > p:not(.o4-final-cta__eyebrow) {
  max-width: 62ch;
  margin: 0 0 34px;
  color: var(--color-text-muted);
  font: 400 15px/1.75 var(--font-body);
}
.o4-final-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  gap: 16px;
  background: var(--color-text);
  color: var(--color-bg);
  border: 1px solid var(--color-text);
  font: 600 11px/1 var(--font-display);
  letter-spacing: .15em;
  transition: transform .35s var(--ease-premium), background .35s var(--ease-premium), color .35s var(--ease-premium);
}
.o4-final-cta__button:hover { transform: translateY(-2px); background: transparent; color: var(--color-text); }
.o4-final-cta__button span { font-size: 16px; }

/* Floating WhatsApp: visible on every O4 page without dominating the frame. */
.o4-site .wa-float {
  z-index: 200;
  right: 22px;
  bottom: max(22px, env(safe-area-inset-bottom));
  min-height: 52px;
  padding: 0 17px;
  gap: 10px;
  border: 1px solid rgba(244,245,247,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
}
.o4-site .wa-float svg { width: 23px; height: 23px; flex: 0 0 23px; }

@media (max-width: 860px) {
  .o4-site .product-hero { height: 100svh; min-height: 580px; }
  .o4-site .product-hero .hero__content {
    padding: 0 24px max(36px, env(safe-area-inset-bottom)) !important;
    max-width: 100%;
  }
  .o4-site .product-hero .hero__eyebrow { font-size: 10.5px; margin-bottom: 11px; letter-spacing: .19em; }
  .o4-site .product-hero .hero__title {
    max-width: 10ch;
    font-size: clamp(2.35rem, 10vw, 4.3rem);
    line-height: 1;
    letter-spacing: -.045em;
    margin-bottom: 20px;
  }
  .o4-site .product-hero .hero__actions { width: auto; max-width: 100%; }
  .o4-site .product-hero .hero__actions .btn { flex: 0 1 auto; min-height: 44px; padding-inline: 17px; }
  .o4-site .product-hero__media video,
  .o4-site .product-hero__media .hero__fallback-image { object-position: 50% 52%; }
  .o4-site .subpage-intro { padding-top: 54px; padding-bottom: 12px; }
  .o4-site .showcase { padding-top: 64px; }
  .o4-site .showcase__intro { padding-bottom: 30px; }
  .o4-site .split { padding-top: 64px; padding-bottom: 64px; gap: 30px; }
  .o4-site .duo-media { padding-bottom: 64px; }
  .o4-site .cta-section, .o4-site .section { padding-top: 64px; padding-bottom: 64px; }
  .o4-site .o4-hero { min-height: 100svh; height: 100svh; }
  .o4-site .o4-hero .o4-hero-copy { padding: 0 24px max(36px, env(safe-area-inset-bottom)); }
  .o4-site .o4-hero h1 { font-size: clamp(2.35rem, 10vw, 4.3rem); line-height: 1; }
  .o4-site .o4-split { padding-bottom: 64px; gap: 30px; }
  .o4-final-cta { padding: 70px 24px; }
  .o4-final-cta h2 { font-size: clamp(2.15rem, 9vw, 3.5rem); }
  .o4-final-cta__button { width: 100%; min-height: 52px; }
  .o4-site .wa-float { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); min-height: 50px; padding: 0 15px; }
}
@media (max-width: 520px) {
  .o4-site .product-hero .hero__actions { width: 100%; }
  .o4-site .product-hero .hero__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; font-size: 9.5px; }
  .o4-site .product-hero .hero__title { font-size: clamp(2.25rem, 10.8vw, 3.2rem); }
  .o4-site .o4-stat-hero { margin-top: 34px; }
  .o4-site .wa-float span { display: inline; }
}

/* Premium delivery gallery: editorial framing, original ratios preserved, zero cropping. */
.delivery-gallery-v321 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  align-items: start;
  padding-top: 10px;
}
.delivery-card {
  grid-column: span 4;
  margin: 0;
  position: relative;
}
.delivery-card:nth-child(1) { grid-column: span 6; }
.delivery-card:nth-child(2) { grid-column: span 6; }
.delivery-card__frame {
  position: relative;
  padding: clamp(7px, .8vw, 11px);
  background: linear-gradient(145deg, #f7f7f5 0%, #deded9 100%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 22px 55px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.10);
  overflow: hidden;
}
.delivery-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(22,24,28,.10);
}
.delivery-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: #111318;
}
.delivery-card figcaption {
  margin-top: 10px;
  padding-left: 3px;
  color: rgba(255,255,255,.48);
  font: 600 9px/1.2 var(--font-display);
  letter-spacing: .20em;
}
@media (max-width: 900px) {
  .delivery-gallery-v321 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
  .delivery-card,
  .delivery-card:nth-child(1),
  .delivery-card:nth-child(2) { grid-column: span 1; }
}
@media (max-width: 700px) {
  .delivery-gallery-v321 { grid-template-columns: 1fr; gap: 22px; padding-top: 4px; }
  .delivery-card,
  .delivery-card:nth-child(1),
  .delivery-card:nth-child(2) { grid-column: 1; }
  .delivery-card__frame { padding: 7px; box-shadow: 0 16px 38px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.09); }
  .delivery-card figcaption { margin-top: 8px; font-size: 8.5px; }
}


/* =============================================================
   JAECOO J5 — YOUTHFUL PREMIUM LAYER
   Scoped to .j5-site so existing OMODA O4/J7/J8 styles stay intact.
============================================================= */
.j5-site{
  --j5-bg:#090b0e;
  --j5-bg-2:#10141a;
  --j5-text:#f4f6f8;
  --j5-muted:#9aa3ad;
  --j5-line:rgba(244,246,248,.13);
  --j5-accent:#9fc7ff;
  --j5-accent-2:#d7e7ff;
  --j5-max:1400px;
  --j5-display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  background:var(--j5-bg);
}
.j5-site main{background:var(--j5-bg);overflow:hidden}
.j5-site .navbar__link.is-active{color:var(--j5-text);opacity:1}
.j5-site .navbar__link.is-active::after{width:100%;background:var(--j5-accent)}
.j5-container{width:min(var(--j5-max),calc(100% - 2 * var(--container-pad)));margin:0 auto}
.j5-kicker{
  margin:0 0 18px;color:var(--j5-accent);font:600 11px/1.2 var(--j5-display);
  letter-spacing:.2em;text-transform:uppercase;
}
.j5-copy{margin:0;color:var(--j5-muted);font:400 16px/1.78 var(--font-body);max-width:52ch}
.j5-text-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:28px;
  color:var(--j5-text);font:600 11px/1 var(--j5-display);letter-spacing:.14em;
  padding-bottom:9px;border-bottom:1px solid rgba(244,246,248,.35);
  transition:color .3s var(--ease-premium),border-color .3s var(--ease-premium),transform .3s var(--ease-premium);
}
.j5-text-link:hover{color:var(--j5-accent);border-color:var(--j5-accent);transform:translateX(3px)}
.j5-hero{
  position:relative;min-height:100svh;height:100svh;overflow:hidden;background:#050608;
}
.j5-hero__media,.j5-hero__shade{position:absolute;inset:0}
.j5-hero__media img,.j5-hero__media video{width:100%;height:100%;object-fit:cover;object-position:64% 55%;display:block}
.j5-hero__shade{background:linear-gradient(90deg,rgba(5,6,8,.86) 0%,rgba(5,6,8,.48) 40%,rgba(5,6,8,.04) 75%),linear-gradient(0deg,rgba(5,6,8,.8) 0%,transparent 32%)}
.j5-hero__content{
  position:absolute;left:max(var(--container-pad),5vw);bottom:clamp(74px,11vh,128px);max-width:760px;z-index:2
}
.j5-eyebrow{margin:0 0 18px;color:var(--j5-accent);font:600 11px/1 var(--j5-display);letter-spacing:.24em}
.j5-hero h1{
  margin:0;color:var(--j5-text);font:700 clamp(3.5rem,8.2vw,8.5rem)/.88 var(--j5-display);
  letter-spacing:-.065em;max-width:8ch;text-wrap:balance
}
.j5-hero h1 span{color:var(--j5-accent-2)}
.j5-hero__lede{max-width:52ch;margin:26px 0 0;color:rgba(244,246,248,.72);font:400 15px/1.7 var(--font-body)}
.j5-hero__scroll{
  position:absolute;right:max(var(--container-pad),5vw);bottom:34px;color:rgba(244,246,248,.6);
  font:600 10px/1 var(--j5-display);letter-spacing:.17em;z-index:2
}
.j5-hero__scroll span{color:var(--j5-accent);margin-left:10px}
.j5-price{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:30px;
  padding:28px max(var(--container-pad),5vw);background:#0d1116;border-bottom:1px solid var(--j5-line);
}
.j5-price__label{color:var(--j5-accent);font:600 10px/1.2 var(--j5-display);letter-spacing:.18em}
.j5-price__value{color:var(--j5-text);font:700 clamp(1.5rem,3vw,2.7rem)/1 var(--j5-display);letter-spacing:-.04em}
.j5-price__note{color:var(--j5-muted);font:400 11px/1.5 var(--font-body)}
.j5-section{padding:clamp(92px,11vw,160px) 0}
.j5-intro{background:var(--j5-bg)}
.j5-intro__grid,.j5-editorial__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:start}
.j5-intro h2,.j5-editorial h2{
  margin:0;color:var(--j5-text);font:600 clamp(2.8rem,6vw,6.2rem)/.94 var(--j5-display);
  letter-spacing:-.055em
}
.j5-intro h2 em,.j5-editorial h2 em{font-style:normal;color:var(--j5-accent-2)}
.j5-intro__grid>div:last-child{padding-top:9px}
.j5-feature-hero{padding:0 0 clamp(100px,12vw,170px);background:var(--j5-bg)}
.j5-feature-hero .j5-container{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.65fr);gap:clamp(40px,7vw,110px);align-items:center}
.j5-feature-hero__media{aspect-ratio:4/5;height:auto;min-height:560px;max-height:860px;overflow:hidden;background:var(--j5-bg-2)}
.j5-feature-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.j5-feature-hero__copy h2{margin:0 0 24px;color:var(--j5-text);font:600 clamp(2.6rem,5.3vw,5.5rem)/.95 var(--j5-display);letter-spacing:-.055em}
.j5-feature-hero__copy h2 em{font-style:normal;color:var(--j5-accent-2)}
.j5-feature-hero__copy p:not(.j5-kicker){margin:0;color:var(--j5-muted);font:400 15px/1.75 var(--font-body);max-width:42ch}
.j5-duo{background:#0d1116;border-top:1px solid var(--j5-line);border-bottom:1px solid var(--j5-line)}
.j5-section-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:55px}
.j5-section-head h2{margin:0;color:var(--j5-text);font:600 clamp(2.5rem,5vw,5rem)/.96 var(--j5-display);letter-spacing:-.055em}
.j5-section-head>p{max-width:42ch;margin:0;color:var(--j5-muted);font:400 14px/1.75 var(--font-body)}
.j5-duo__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:4px}
.j5-photo-card{position:relative;display:block;min-height:500px;overflow:hidden;background:#07090c}
.j5-photo-card:nth-child(2){min-height:500px}
.j5-photo-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-premium),filter .7s var(--ease-premium)}
/* J5 photo-card — int-front-seats is 16:9 in a near-1:1 narrow column; shift crop left to keep seat in frame */
.j5-photo-card img[src*="int-front-seats"]{object-position:25% center}
.j5-photo-card:hover img{transform:scale(1.035);filter:saturate(1.06)}
.j5-photo-card span{position:absolute;left:24px;bottom:22px;color:#fff;font:600 10px/1 var(--j5-display);letter-spacing:.16em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.j5-stats{background:var(--j5-bg);border-bottom:1px solid var(--j5-line)}
.j5-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--j5-line)}
.j5-stats__grid>div{padding:46px 34px;border-right:1px solid var(--j5-line)}
.j5-stats strong{display:block;color:var(--j5-text);font:600 clamp(2.4rem,4.5vw,4.7rem)/1 var(--j5-display);letter-spacing:-.055em}
.j5-stats span{display:block;margin-top:10px;color:var(--j5-muted);font:500 10px/1.4 var(--j5-display);letter-spacing:.1em;text-transform:uppercase}
.j5-explore{background:#0d1116}
.j5-explore__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--j5-line);border-left:1px solid var(--j5-line)}
.j5-explore-card{min-height:310px;padding:30px;border-right:1px solid var(--j5-line);border-bottom:1px solid var(--j5-line);transition:background .4s var(--ease-premium)}
.j5-explore-card:hover{background:#121821}
.j5-explore-card .num{color:var(--j5-accent);font:600 10px/1 var(--j5-display);letter-spacing:.16em}
.j5-explore-card h3{margin:75px 0 13px;color:var(--j5-text);font:600 27px/1 var(--j5-display);letter-spacing:-.035em}
.j5-explore-card p{margin:0;color:var(--j5-muted);font:400 13px/1.7 var(--font-body);max-width:28ch}
.j5-explore-card .j5-text-link{margin-top:24px}
.j5-final-cta{padding:clamp(90px,11vw,160px) 0;background:radial-gradient(circle at 82% 18%,rgba(159,199,255,.12),transparent 35%),linear-gradient(135deg,#111720,#080a0d 70%);border-top:1px solid var(--j5-line);border-bottom:1px solid var(--j5-line)}
.j5-final-cta h2{margin:0 0 20px;color:var(--j5-text);font:600 clamp(3rem,6.8vw,7rem)/.9 var(--j5-display);letter-spacing:-.065em}
.j5-final-cta> .j5-container>p:not(.j5-kicker){max-width:58ch;color:var(--j5-muted);font:400 15px/1.75 var(--font-body);margin:0 0 30px}
.j5-cta{display:inline-flex;min-height:54px;align-items:center;justify-content:center;padding:0 28px;background:var(--j5-text);color:#090b0e;font:600 10.5px/1 var(--j5-display);letter-spacing:.15em;transition:transform .3s var(--ease-premium),background .3s var(--ease-premium),color .3s var(--ease-premium)}
.j5-cta:hover{transform:translateY(-2px);background:var(--j5-accent);color:#07101c}

.j5-subnav{
  position:relative;z-index:20;background:#0b0e12;border-bottom:1px solid var(--j5-line);
  overflow:auto;scrollbar-width:none
}
.j5-subnav::-webkit-scrollbar{display:none}
.j5-subnav__inner{width:min(var(--j5-max),calc(100% - 2 * var(--container-pad)));margin:0 auto;display:flex;min-width:max-content}
.j5-subnav a{position:relative;padding:19px 24px;color:rgba(244,246,248,.58);font:600 10px/1 var(--j5-display);letter-spacing:.15em}
.j5-subnav a:first-child{padding-left:0}
.j5-subnav a:hover,.j5-subnav a.is-active{color:var(--j5-text)}
.j5-subnav a.is-active::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:2px;background:var(--j5-accent)}
.j5-subnav a:first-child.is-active::after{left:0}

.j5-page-hero{position:relative;min-height:min(82svh,860px);height:82svh;overflow:hidden;background:#06080b}
.j5-page-hero--design{height:90svh;min-height:min(90svh,820px)}
.j5-page-hero__media,.j5-page-hero__shade{position:absolute;inset:0}
.j5-page-hero__media img{width:100%;height:100%;object-fit:cover}
.j5-page-hero--design .j5-page-hero__media img{object-position:center 45%}
.j5-page-hero--interior .j5-page-hero__media img{object-position:center 52%}
.j5-page-hero--tech .j5-page-hero__media img{object-position:center 52%}
.j5-page-hero__shade{background:linear-gradient(90deg,rgba(5,7,9,.82),rgba(5,7,9,.32) 55%,rgba(5,7,9,.05)),linear-gradient(0deg,rgba(5,7,9,.75),transparent 38%)}
.j5-page-hero__content{position:absolute;left:max(var(--container-pad),5vw);bottom:clamp(58px,9vh,105px);max-width:700px}
.j5-page-hero__content h1{margin:0;color:var(--j5-text);font:600 clamp(3.3rem,7.6vw,7.8rem)/.9 var(--j5-display);letter-spacing:-.065em}
.j5-page-hero__content h1 em{font-style:normal;color:var(--j5-accent-2)}
.j5-page-hero__content>p:not(.j5-kicker){max-width:52ch;margin:25px 0 0;color:rgba(244,246,248,.72);font:400 15px/1.75 var(--font-body)}
.j5-editorial{background:var(--j5-bg)}
.j5-wide-media{padding:0 0 clamp(90px,10vw,140px);background:var(--j5-bg)}
.j5-wide-media .j5-container{max-width:1500px}
.j5-wide-media img{width:100%;height:min(72vw,720px);object-fit:cover}
.j5-wide-media img[src*="ext-side-wheel"]{aspect-ratio:1/1;height:auto;max-height:900px;object-position:center}
.j5-wide-media img[src*="int-dashboard"]{aspect-ratio:3/2;height:auto;max-height:820px;object-position:center}
.j5-image-story{background:#0d1116}
.j5-image-story__grid{display:grid;grid-template-columns:1fr .82fr;gap:70px;align-items:start}
.j5-image-story__grid>div{color:var(--j5-muted);font:500 10px/1.4 var(--j5-display);letter-spacing:.1em;text-transform:uppercase}
.j5-image-story__grid img{width:100%;height:auto;aspect-ratio:auto;object-fit:cover;margin-bottom:17px}
/* J5 image story: preserve each source image's natural ratio to avoid extreme vertical cards/cropping. */
.j5-image-story__grid img[src*="ext-front-detail"],.j5-image-story__grid img[src*="ext-taillight"],.j5-image-story__grid img[src*="ext-body-detail"],.j5-image-story__grid img[src*="ext-mirror"]{height:auto;aspect-ratio:auto;object-fit:cover;object-position:center}
.j5-image-story__grid img[src*="int-front-seats"],.j5-image-story__grid img[src*="int-rear-seats"]{height:auto;aspect-ratio:auto;object-fit:cover}
.j5-image-story__offset{padding-top:150px}
.j5-detail-band{background:#0d1116;border-top:1px solid var(--j5-line);border-bottom:1px solid var(--j5-line)}
.j5-detail-band__grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--j5-line)}
.j5-detail-band__grid>div{padding:42px 32px;border-right:1px solid var(--j5-line)}
.j5-detail-band span{display:block;color:var(--j5-accent);font:600 10px/1 var(--j5-display);letter-spacing:.14em;margin-bottom:35px}
.j5-detail-band strong{display:block;color:var(--j5-text);font:600 13px/1 var(--j5-display);letter-spacing:.13em}
.j5-detail-band p{color:var(--j5-muted);font:400 13px/1.7 var(--font-body);margin:13px 0 0;max-width:28ch}

.j5-interior-grid{padding:clamp(90px,11vw,150px) 0;background:var(--j5-bg)}
.j5-interior-grid__head{margin-bottom:55px}
.j5-interior-grid h2{margin:0;color:var(--j5-text);font:600 clamp(2.8rem,6vw,5.8rem)/.92 var(--j5-display);letter-spacing:-.06em}
.j5-interior-grid h2 em{font-style:normal;color:var(--j5-accent-2)}
.j5-interior-grid__items{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.j5-interior-grid figure{margin:0;background:#0d1116}
.j5-interior-grid figure img{width:100%;height:auto;aspect-ratio:auto;object-fit:cover;object-position:center}
/* J5 interior detail cards: preserve the native landscape composition instead of forcing square/portrait crops. */
.j5-interior-grid figure img[src*="int-door"],.j5-interior-grid figure img[src*="int-sunroof"],.j5-interior-grid figure img[src*="int-trunk"]{height:auto;aspect-ratio:auto;object-fit:cover}
.j5-interior-grid figcaption{padding:16px 18px 20px;color:var(--j5-muted);font:500 10px/1 var(--j5-display);letter-spacing:.12em;text-transform:uppercase}

.j5-tech-feature{padding:0 0 clamp(90px,11vw,150px);background:var(--j5-bg)}
.j5-tech-feature__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,7vw,110px);align-items:center}
.j5-tech-feature--reverse .j5-tech-feature__grid{grid-template-columns:.85fr 1.15fr}
.j5-tech-feature--reverse .j5-tech-feature__media{order:2;aspect-ratio:1/1;height:auto;max-height:620px}
.j5-tech-feature__media{height:min(650px,62vw);overflow:hidden;background:#0d1116}
.j5-tech-feature__media img{width:100%;height:100%;object-fit:cover}
.j5-tech-feature__copy{max-width:470px}
.j5-tech-num{display:block;color:var(--j5-accent);font:600 11px/1 var(--j5-display);letter-spacing:.16em;margin-bottom:22px}
.j5-tech-feature h2{margin:0 0 22px;color:var(--j5-text);font:600 clamp(2.6rem,5vw,5.2rem)/.92 var(--j5-display);letter-spacing:-.055em}
.j5-tech-feature__copy p{margin:0;color:var(--j5-muted);font:400 14px/1.8 var(--font-body)}
.j5-tech-grid{padding:0 0 clamp(90px,11vw,150px);background:#0d1116;border-top:1px solid var(--j5-line)}
.j5-tech-grid__items{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--j5-line);border-top:1px solid var(--j5-line)}
.j5-tech-grid__items>div{padding:34px 28px;min-height:170px;border-right:1px solid var(--j5-line);border-bottom:1px solid var(--j5-line)}
.j5-tech-grid strong{display:block;color:var(--j5-text);font:600 clamp(2rem,4vw,3.6rem)/1 var(--j5-display);letter-spacing:-.05em}
.j5-tech-grid span{display:block;margin-top:12px;color:var(--j5-muted);font:500 10px/1.5 var(--j5-display);letter-spacing:.08em;text-transform:uppercase}

.j5-spec-hero{padding:clamp(100px,13vw,180px) 0 90px;background:radial-gradient(circle at 80% 15%,rgba(159,199,255,.12),transparent 33%),var(--j5-bg)}
.j5-spec-hero h1{margin:0;color:var(--j5-text);font:600 clamp(3.2rem,7vw,7.5rem)/.9 var(--j5-display);letter-spacing:-.065em}
.j5-spec-hero h1 em{font-style:normal;color:var(--j5-accent-2)}
.j5-spec-hero> .j5-container>p:not(.j5-kicker){max-width:54ch;margin:28px 0 0;color:var(--j5-muted);font:400 15px/1.75 var(--font-body)}
.j5-spec-highlight{background:#0d1116;border-top:1px solid var(--j5-line);border-bottom:1px solid var(--j5-line)}
.j5-spec-highlight__grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--j5-line)}
.j5-spec-highlight__grid>div{padding:42px 28px;border-right:1px solid var(--j5-line)}
.j5-spec-highlight span,.j5-spec-highlight small{display:block;color:var(--j5-muted);font:600 9px/1.2 var(--j5-display);letter-spacing:.14em}
.j5-spec-highlight strong{display:block;margin:18px 0 8px;color:var(--j5-text);font:600 clamp(2rem,4vw,3.7rem)/1 var(--j5-display);letter-spacing:-.05em}
.j5-spec-table-wrap{background:var(--j5-bg)}
.j5-spec-table{border-top:1px solid var(--j5-line)}
.j5-spec-table>div{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;padding:19px 0;border-bottom:1px solid var(--j5-line)}
.j5-spec-table span{color:var(--j5-muted);font:500 11px/1.5 var(--j5-display);letter-spacing:.05em}
.j5-spec-table strong{color:var(--j5-text);font:500 13px/1.5 var(--font-body)}
.j5-spec-image{padding:0 0 130px;background:var(--j5-bg)}
.j5-spec-image img{width:100%;aspect-ratio:1/1;height:auto;max-height:900px;object-fit:cover;object-position:center 52%}

@media (max-width:900px){
  .j5-hero{height:82svh;min-height:560px}
  .j5-hero__media img,.j5-hero__media video{object-position:50% 50%}
  .j5-hero__content{left:24px;right:24px;bottom:max(72px,10vh)}
  .j5-hero h1{font-size:clamp(3.25rem,16vw,6rem);max-width:8ch}
  .j5-hero__lede{font-size:14px;max-width:44ch}
  .j5-hero__scroll{right:24px;bottom:24px}
  .j5-price{grid-template-columns:1fr;gap:8px;padding:24px}
  .j5-price__value{margin-top:4px}
  .j5-intro__grid,.j5-editorial__grid{grid-template-columns:1fr;gap:32px}
  .j5-feature-hero .j5-container,.j5-tech-feature__grid,.j5-tech-feature--reverse .j5-tech-feature__grid{grid-template-columns:1fr;gap:32px}
  .j5-feature-hero__media{height:90vw;min-height:460px;max-height:none}
  .j5-tech-feature__media{height:72vw;min-height:420px}
  .j5-section-head{display:block;margin-bottom:38px}
  .j5-section-head>p{margin-top:20px}
  .j5-duo__grid{grid-template-columns:1fr}
  .j5-photo-card,.j5-photo-card:nth-child(2){min-height:62vw}
  .j5-stats__grid{grid-template-columns:repeat(2,1fr)}
  .j5-stats__grid>div{padding:34px 22px}
  .j5-explore__grid{grid-template-columns:1fr 1fr}
  .j5-explore-card{min-height:270px;padding:24px}
  .j5-explore-card h3{margin-top:55px}
  .j5-page-hero{height:72svh;min-height:540px}
  .j5-page-hero__content{left:24px;right:24px;bottom:58px}
  .j5-page-hero__content h1{font-size:clamp(3.2rem,14vw,6rem)}
  .j5-image-story__grid{grid-template-columns:1fr;gap:42px}
  .j5-image-story__offset{padding-top:0}
  .j5-detail-band__grid{grid-template-columns:1fr}
  .j5-detail-band__grid>div{border-bottom:1px solid var(--j5-line)}
  .j5-interior-grid__items{grid-template-columns:1fr 1fr}
  .j5-tech-grid__items{grid-template-columns:1fr 1fr}
  .j5-spec-highlight__grid{grid-template-columns:1fr 1fr}
  .j5-spec-table>div{grid-template-columns:.9fr 1.1fr}
}
@media (max-width:560px){
  .j5-subnav__inner{width:max-content;margin:0;padding:0 24px}
  .j5-subnav a{padding:17px 17px}
  .j5-subnav a:first-child{padding-left:0}
  .j5-subnav a.is-active::after{left:17px;right:17px}
  .j5-subnav a:first-child.is-active::after{left:0}
  .j5-hero{height:74svh;min-height:520px}
  .j5-hero__media img,.j5-hero__media video{object-position:50% 50%}
  .j5-hero h1{font-size:clamp(3.15rem,17vw,5.1rem)}
  .j5-hero__scroll{display:none}
  .j5-section{padding:78px 0}
  .j5-feature-hero{padding-bottom:78px}
  .j5-feature-hero__media{height:110vw;min-height:340px;max-height:none}
  .j5-tech-feature__media{height:105vw;min-height:360px}
  .j5-duo__grid{gap:3px}
  .j5-photo-card,.j5-photo-card:nth-child(2){min-height:92vw}
  .j5-stats__grid>div{padding:30px 18px}
  .j5-stats strong{font-size:2.55rem}
  .j5-explore__grid{grid-template-columns:1fr}
  .j5-explore-card{min-height:230px}
  .j5-explore-card h3{margin-top:48px}
  .j5-page-hero{height:70svh;min-height:500px}
  .j5-page-hero__media img{object-position:center}
  .j5-page-hero__content h1{font-size:clamp(3rem,15.5vw,5rem)}
  .j5-page-hero__content>p:not(.j5-kicker){font-size:13.5px;margin-top:20px}
  .j5-wide-media img{height:92vw}
  /* J5 mobile image-story: cap portrait detail cards so one photo never dominates multiple screen heights. */
  .j5-image-story__grid img{width:100%;height:auto;max-height:125vw;aspect-ratio:auto;object-fit:cover;object-position:center}
  .j5-interior-grid figure img{width:100%;height:auto;max-height:68vw;aspect-ratio:auto;object-fit:cover;object-position:center}
  .j5-interior-grid__items{grid-template-columns:1fr}
  .j5-tech-grid__items{grid-template-columns:1fr}
  .j5-spec-highlight__grid{grid-template-columns:1fr 1fr}
  .j5-spec-highlight__grid>div{padding:28px 18px}
  .j5-spec-highlight strong{font-size:2rem}
  .j5-spec-table>div{grid-template-columns:1fr;gap:5px;padding:16px 0}
  .j5-hero__media video{object-fit:cover;object-position:50% 50%;}
  .j5-spec-image{padding-bottom:78px;}
  .j5-spec-image img{width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;object-position:center;background:#0d1116;}
  .j5-spec-table strong{font-size:12.5px}
  .j5-final-cta{padding:84px 0}
  .j5-cta{width:100%}
}


/* OMODA O4 PRE-BOOK HIGHLIGHT — additive only */
.o4-prebook{
  background:linear-gradient(120deg,#0e1319,#0a0c0f 68%);
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
}
.o4-prebook__inner{
  max-width:1400px;margin:0 auto;padding:58px var(--container-pad);
  display:grid;grid-template-columns:1fr .9fr;gap:80px;align-items:end;
}
.o4-prebook__eyebrow{margin:0 0 15px;color:var(--color-accent);font:600 10px/1 var(--font-display);letter-spacing:.2em}
.o4-prebook h2{margin:0;color:var(--color-text);font:600 clamp(2.6rem,5.5vw,5.4rem)/.9 var(--font-display);letter-spacing:-.055em}
.o4-prebook h2 span{color:#dce8ff}
.o4-prebook__inner>div:last-child{max-width:52ch}
.o4-prebook__inner>div:last-child p{margin:0;color:var(--color-text-muted);font:400 14px/1.75 var(--font-body)}
.o4-prebook__link{display:inline-block;margin-top:23px;color:var(--color-text);font:600 10px/1 var(--font-display);letter-spacing:.15em;border-bottom:1px solid var(--color-line-strong);padding-bottom:8px;transition:.3s var(--ease-premium)}
.o4-prebook__link:hover{color:var(--color-accent);border-color:var(--color-accent);transform:translateX(3px)}
@media(max-width:860px){
  .o4-prebook__inner{grid-template-columns:1fr;gap:28px;padding:48px 24px}
}


.j5-site .j5-subnav{margin-top:var(--nav-height)}
@media(max-width:860px){.j5-site .j5-subnav{margin-top:var(--nav-height-mobile)}}


/* Sequential page navigation — J5 */
.j5-next-page{padding:clamp(76px,9vw,130px) 0;background:#0d1116;border-top:1px solid var(--j5-line);border-bottom:1px solid var(--j5-line)}
.j5-next-page__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,0.8fr);gap:70px;align-items:end}
.j5-next-page__grid h2{margin:0;color:var(--j5-text);font:600 clamp(2.6rem,5vw,5.4rem)/.94 var(--j5-display);letter-spacing:-.06em}
.j5-next-page__grid p{margin:0 0 25px;max-width:46ch;color:var(--j5-muted);font:400 14px/1.75 var(--font-body)}
.j5-next-page__link{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border:1px solid var(--j5-line);color:var(--j5-text);font:600 10px/1 var(--j5-display);letter-spacing:.14em;transition:transform .3s var(--ease-premium),background .3s var(--ease-premium),color .3s var(--ease-premium),border-color .3s var(--ease-premium)}
.j5-next-page__link:hover{transform:translateY(-2px);background:var(--j5-text);color:#090b0e;border-color:var(--j5-text)}
.o4-next-page .cta-section__actions{justify-content:flex-start}
@media(max-width:760px){.j5-next-page__grid{grid-template-columns:1fr;gap:28px}.j5-next-page{padding:78px 0}.j5-next-page__grid h2{font-size:clamp(2.4rem,11vw,4rem)}.j5-next-page__link{width:100%;justify-content:center}}


/* =============================================================
   COLOR CONFIGURATOR — OMODA O4 & JAECOO J5
   Namespace: .color-config  (O4 inherits :root tokens)
              .j5-color-config (J5 inherits --j5-* tokens)
   Shared layout, separated themes.
============================================================= */

/* ---- Shared Base ---- */
.color-config,
.j5-color-config {
  position: relative;
  overflow: hidden;
}

/* Section wrapper */
.cc-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(96px, 11vw, 160px) var(--container-pad);
}

/* Header */
.cc-header {
  margin-bottom: clamp(52px, 7vw, 96px);
}

.cc-eyebrow {
  display: block;
  margin: 0 0 18px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  font-family: var(--font-display);
}

.cc-header h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.8vw, 4.8rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--color-text);
}

.cc-header p {
  margin: 0;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.78;
  color: var(--color-text-muted);
}

/* Vehicle image stage */
.cc-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 520px;
  overflow: hidden;
  background: transparent;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.cc-stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.cc-stage__img.is-active {
  opacity: 1;
}

/* Controls row */
.cc-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
}

/* Color info */
.cc-info {
  min-height: 80px;
}

.cc-color-name {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--color-text);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc-color-desc {
  margin: 0;
  max-width: 54ch;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--color-text-muted);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Swatch group */
.cc-swatches {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

/* Individual swatch button */
.cc-swatch {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.cc-swatch:hover {
  transform: scale(1.1);
}

.cc-swatch:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.cc-swatch__dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active state ring */
.cc-swatch[aria-selected="true"] {
  border-color: var(--color-accent);
  transform: scale(1.08);
}

.cc-swatch[aria-selected="true"] .cc-swatch__dot {
  transform: scale(0.82);
}

/* Fade text during transition */
.cc-info.is-transitioning .cc-color-name,
.cc-info.is-transitioning .cc-color-desc {
  opacity: 0;
}

/* ---- O4 theme adjustments ---- */
.color-config {
  background: linear-gradient(180deg, #0e1218 0%, var(--color-bg) 100%);
  border-top: 1px solid var(--color-line);
}

/* ---- J5 theme overrides ---- */
.j5-color-config {
  background: linear-gradient(180deg, #0c0f15 0%, var(--j5-bg) 100%);
  border-top: 1px solid var(--j5-line);
}

.j5-color-config .cc-eyebrow {
  color: var(--j5-accent);
}

.j5-color-config .cc-header h2 {
  font-family: var(--j5-display);
  color: var(--j5-text);
}

.j5-color-config .cc-header p {
  color: var(--j5-muted);
}

.j5-color-config .cc-color-name {
  font-family: var(--j5-display);
  color: var(--j5-text);
}

.j5-color-config .cc-color-desc {
  color: var(--j5-muted);
}

.j5-color-config .cc-swatch:focus-visible {
  outline-color: var(--j5-accent);
}

.j5-color-config .cc-swatch[aria-selected="true"] {
  border-color: var(--j5-accent);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .cc-controls {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cc-swatches {
    order: -1;
    gap: 14px;
  }

  .cc-swatch {
    width: 40px;
    height: 40px;
  }

  .cc-stage {
    aspect-ratio: 4 / 3;
    max-height: 360px;
  }
}

@media (max-width: 560px) {
  .cc-stage {
    aspect-ratio: 1 / 1;
    max-height: 320px;
  }

  .cc-swatches {
    gap: 12px;
  }

  .cc-swatch {
    width: 44px;
    height: 44px;
  }

  .cc-info {
    min-height: auto;
  }

  .cc-color-name {
    font-size: 1.5rem;
  }
}

/* ===== Homepage redesign: OUR MODELS lineup + RECOGNIZED FOR MORE ===== */
/* Scoped to .lineup / .recognized only — does not modify existing .model-grid/.model-card rules used elsewhere. */

.lineup{margin-top:64px;display:flex;flex-direction:column}
.lineup__item{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:56px;padding:64px 0;border-bottom:1px solid var(--color-line)}
.lineup__item:first-child{padding-top:0}
.lineup__item:last-child{border-bottom:0;padding-bottom:8px}
.lineup__item:nth-child(even){grid-template-columns:.85fr 1.15fr}
.lineup__item:nth-child(even) .lineup__media{order:2}
.lineup__item:nth-child(even) .lineup__body{order:1}
.lineup__media{position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(244,245,247,.06),rgba(244,245,247,0) 68%);border-radius:2px;overflow:hidden}
.lineup__media img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 30px 36px rgba(0,0,0,.45));transition:transform .6s var(--ease-premium)}
.lineup__item:hover .lineup__media img{transform:scale(1.035)}
.lineup__body{padding:0 8px}
.lineup__index{font-family:var(--font-display);font-size:12px;letter-spacing:var(--tracking-wide);color:var(--color-accent);margin-bottom:14px}
.lineup__name{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.08;letter-spacing:-.02em;font-weight:600;color:var(--color-text);margin:0 0 10px}
.lineup__tag{font-family:var(--font-display);font-size:11.5px;letter-spacing:var(--tracking-mid);text-transform:uppercase;color:var(--color-text-muted);margin:0}
.lineup__price{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--color-text);margin:26px 0 30px}
.lineup__price span{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--color-text-muted);margin-top:6px}
.lineup__cta{display:inline-block;font-family:var(--font-display);font-size:10.5px;letter-spacing:var(--tracking-mid);font-weight:600;color:var(--color-text);border-bottom:1px solid var(--color-line-strong);padding-bottom:5px}
.lineup__cta:hover{color:var(--color-accent);border-color:var(--color-accent)}

@media (max-width:900px){
  .lineup{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:16px;margin-top:40px;padding-bottom:20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .lineup::-webkit-scrollbar{display:none}
  .lineup__item{grid-template-columns:1fr;display:flex;flex-direction:column;flex:0 0 84%;scroll-snap-align:start;border:1px solid var(--color-line);border-bottom:1px solid var(--color-line);border-radius:2px;padding:0;gap:0}
  .lineup__item:first-child{padding-top:0}
  .lineup__item:nth-child(even) .lineup__media{order:0}
  .lineup__item:nth-child(even) .lineup__body{order:0}
  .lineup__media{aspect-ratio:4/3;padding:20px 16px}
  .lineup__media img{width:92%;height:92%}
  .lineup__body{padding:22px 20px 30px}
  .lineup__price{margin:20px 0 22px}
}

@media (max-width:520px){
  .lineup__item{flex:0 0 90%}
}

.recognized{margin-top:64px;display:flex;gap:20px;align-items:flex-start;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.recognized::-webkit-scrollbar{display:none}
.recognized__item{display:flex;flex-direction:column;flex:0 0 280px;border-radius:2px;overflow:hidden;scroll-snap-align:start;background:var(--color-bg-alt);border:1px solid var(--color-line)}
.recognized__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.recognized__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-premium)}
.recognized__item:hover .recognized__media img{transform:scale(1.045)}
.recognized__caption{padding:20px 22px 24px;border-top:1px solid var(--color-line)}
.recognized__model{font-family:var(--font-display);font-size:10.5px;letter-spacing:var(--tracking-mid);text-transform:uppercase;color:var(--color-accent);margin-bottom:8px}
.recognized__claim{font-family:var(--font-display);font-size:16px;line-height:1.25;letter-spacing:-.01em;font-weight:600;color:var(--color-text)}
.recognized__period{font-family:var(--font-body);font-size:11.5px;color:var(--color-text-muted);margin-top:8px}

@media (max-width:900px){
  .recognized{margin-top:36px;gap:14px}
  .recognized__item{flex:0 0 68vw}
}

@media (max-width:520px){
  .recognized__item{flex:0 0 78vw}
  .recognized__caption{padding:22px 18px 20px}
}