/* ==========================================================================
   GEELY AUTO INDONESIA - UNIFIED STYLESHEET
   By. Marsky Technology
   Satu-satunya file CSS untuk seluruh aplikasi. Tanpa Hardcoded / Inline CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLE DESIGN TOKENS (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
    /* Colors */
    --color-black: #000000;
    --color-charcoal: #111111;
    --color-dark-grey: #1a1a1a;
    --color-grey: #333333;
    --color-light-grey: #7f7f7f;
    --color-border: #e2e8f0;
    --color-bg-light: #f8f9fa;
    --color-bg-dark: #121212;
    --color-white: #ffffff;
    --color-accent: #0052cc;
    --color-glass: rgba(255, 255, 255, 0.08);
    --color-glass-dark: rgba(0, 0, 0, 0.75);

    /* Fonts */
    --font-heading: 'GeelyInter28pt', 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'GeelyInter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-neon: 0 0 40px rgba(255, 255, 255, 0.15);

    /* Transitions */
    --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.25s ease;

    /* Layout */
    --header-height: 80px;
    --container-width: 1280px;
}

/* --------------------------------------------------------------------------
   2. BASE STYLES & RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--color-white);
    color: var(--color-charcoal);
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
    outline: none;
}

button {
    cursor: pointer;
}

/* Common Layout Utilities */
.section-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
}

.text-center {
    text-align: center;
}

.mt-30 {
    margin-top: 30px;
}

.mt-50 {
    margin-top: 50px;
}

/* --------------------------------------------------------------------------
   3. PREMIUM BUTTONS & ELEMENTS
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: var(--transition-smooth);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background-color: var(--color-white);
    color: var(--color-black);
}

.btn-primary:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-outline:hover {
    background-color: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}

.btn-dark {
    background-color: var(--color-black);
    color: var(--color-white);
}

.btn-dark:hover {
    background-color: #222;
    box-shadow: var(--shadow-md);
}

.btn-outline-dark {
    background-color: transparent;
    color: var(--color-black);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.btn-outline-dark:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* --------------------------------------------------------------------------
   4. HEADER & NAV (TRANSPARENT + SCROLL EFFECT)
   -------------------------------------------------------------------------- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    color: var(--color-white);
    transition: var(--transition-smooth);
    border-bottom: none;
}

/* Efek navbar berlatar putih saat scroll kebawah atau laci dibuka */
.main-header.scrolled {
    background-color: var(--color-white);
    color: var(--color-black);
    height: 70px;
}

.header-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 50px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-link {
    display: flex;
    align-items: center;
    z-index: 1002;
}

.geely-logo-svg,
.geely-logo-img {
    height: 16px;
    width: auto;
    transition: var(--transition-fast);
}

/* Make white logo image completely black on scrolled or open drawer states */
.main-header.scrolled .geely-logo-img,
.main-header.nav-open .geely-logo-img {
    filter: brightness(0);
}

/* Nav Menu */
@media screen and (min-width: 1201px) {
    .navbar {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
    }
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-link {
    font-family: 'GeelyInter', var(--font-body);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.5px;
    position: relative;
    padding: 10px 0;
    opacity: 0.85;
}

.nav-link:hover {
    opacity: 1;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Chevron Dropdown Arrow */
.chevron-arrow {
    display: inline-block;
    font-size: 0.65rem;
    margin-left: 4px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    vertical-align: middle;
}

.main-header.nav-open .chevron-arrow {
    transform: rotate(180deg);
}

.main-header.nav-open #nav-models-toggle::after {
    transform: scaleX(1) !important;
    height: 2.5px !important;
    background-color: var(--color-black) !important;
    transform-origin: left !important;
}

.main-header.nav-open #nav-models-toggle {
    opacity: 1 !important;
    font-weight: 700 !important;
}

/* CTA & Mobile Hamburger */
.header-right {
    display: flex;
    align-items: center;
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    width: 26px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    position: relative; /* Aktifkan stacking context */
    z-index: 1200; /* Tetap berada di atas overlay laci navigasi */
    color: #ffffff; /* Default putih pada header transparan */
    outline: none;
}

/* Warna hamburger berubah jadi navy gelap saat header di-scroll atau menu aktif */
.main-header.scrolled .mobile-toggle,
.main-header.mobile-menu-active .mobile-toggle {
    color: #0a2351 !important;
}

.mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transition: var(--transition-fast);
}

/* Desktop default: hide mobile accordion elements */
.mobile-only,
.mobile-accordion-toggle,
.mobile-models-accordion {
    display: none !important;
}

/* --------------------------------------------------------------------------
   5. MODELS DROPDOWN DRAWER (Laci Transisi Premium)
   -------------------------------------------------------------------------- */
.models-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    color: var(--color-black);
    z-index: -1;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-smooth);
    padding: 60px 0;
}

.main-header.scrolled .models-drawer {
    top: 70px;
}

.models-drawer.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.drawer-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 50px;
}

.drawer-title {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 12px;
    color: var(--color-black);
}

.drawer-subtitle {
    color: var(--color-light-grey);
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: 250px;
}

.drawer-models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.drawer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    transition: var(--transition-smooth);
}

.drawer-card:hover {
    border: none;
    transform: translateY(-5px);
    box-shadow: none;
    background-color: transparent;
}

.drawer-card-image {
    width: 100%;
    height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.drawer-car-img {
    max-width: 120%;
    max-height: 135px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
    transition: var(--transition-smooth);
}

.drawer-card:hover .drawer-car-img {
    transform: scale(1.08) translateY(-6px);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
}

/* Mobil Thumbnail visual dengan CSS shapes */
.car-thumbnail-placeholder {
    width: 85%;
    height: 70px;
    position: relative;
    border-radius: 3px;
    transition: var(--transition-smooth);
}

.thumbnail-ex2 {
    background: linear-gradient(135deg, #a3c2c2 0%, #2f4f4f 100%);
    clip-path: polygon(15% 30%, 75% 30%, 95% 65%, 100% 70%, 100% 90%, 0% 90%, 0% 55%);
}

.thumbnail-starray {
    background: linear-gradient(135deg, #dcdcdc 0%, #696969 100%);
    clip-path: polygon(10% 40%, 80% 38%, 95% 60%, 100% 65%, 100% 92%, 0% 92%, 0% 55%);
}

.thumbnail-ex5 {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    clip-path: polygon(12% 35%, 78% 33%, 95% 62%, 100% 68%, 100% 90%, 0% 90%, 0% 55%);
}

.drawer-card:hover .car-thumbnail-placeholder {
    transform: scale(1.08);
}

.drawer-card-name {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    color: var(--color-black);
    line-height: 1.35;
}

.drawer-card-subname {
    font-family: 'GeelyInter', 'Plus Jakarta Sans', Arial, sans-serif !important;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    color: var(--color-black);
    text-transform: none !important;
    display: inline-block;
    margin-top: 4px;
}

.drawer-card-tag {
    font-size: 0.75rem;
    color: var(--color-light-grey);
    text-transform: uppercase;
}

/* Background overlay */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-glass-dark);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-fast);
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   6. HERO BANNER SECTION (COMPARTMENTS GRID)
   -------------------------------------------------------------------------- */
.hero-section {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    color: var(--color-white);
    overflow: hidden;
    background-color: var(--color-black);
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 2;
}

/* Main Text Content Overlaid on top of Panes */
.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 100%;
    padding: 0 clamp(20px, 4vw, 50px) clamp(80px, 10vw, 135px) calc(clamp(20px, 4vw, 50px) + 120px);
    /* Raised from the bottom and aligned under the logo */
    pointer-events: auto;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-title {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(28px, 3vw, 38px);
    /* Exact 38px on desktop, scaling down fluidly */
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.hero-subtitle {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(16px, 1.8vw, 22px);
    /* Exact 22px on desktop, scaling down fluidly */
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 8px;
}

.hero-actions {
    display: flex;
    gap: 20px;
}

/* Scroll indicator mouse */
.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    cursor: pointer;
}

.mouse-icon {
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    display: block;
    position: relative;
}

.mouse-wheel {
    width: 4px;
    height: 8px;
    background-color: var(--color-white);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel-anim 1.8s infinite ease-in-out;
}

@keyframes scroll-wheel-anim {
    0% {
        opacity: 0;
        top: 8px;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        top: 22px;
    }
}

/* --------------------------------------------------------------------------
   7. MODELS SECTION (TABBED DETAILS DISPLAY)
   -------------------------------------------------------------------------- */
.models-section {
    padding: 100px 0;
    background-color: var(--color-white);
    position: relative;
    /* Anchor point for absolutely-positioned arrows */
}

.section-header {
    margin-bottom: 60px;
}

.section-title {
    font-family: 'geelybold', var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.section-subtitle {
    color: var(--color-light-grey);
    font-size: 1.05rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Tabs Bar (Capsule Rounded Container) */
.models-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    /* Reduced from 70px to pull the car up closer to the tabs */
}

.models-tabs {
    display: inline-flex;
    align-items: center;
    background-color: #e5e5e5;
    padding: 6px;
    border-radius: 50px;
    gap: 5px;
}

.tab-btn {
    font-family: 'geelybold', var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 50px;
    border: none;
    background: transparent;
    color: #7a7a7a;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    outline: none;
}

.tab-btn:hover {
    color: var(--color-black);
}

.tab-btn.active {
    background-color: var(--color-white);
    color: var(--color-black);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Panels */
.car-detail-panel {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.car-detail-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Carousel Row: Arrows & Centered Car Image */
.car-carousel-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto 30px auto;
    padding: 0;
}

.car-panel-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* --------------------------------------------------------------------------
   7.1 INTERACTIVE 360 DEGREE ROTATING VIEWER
   -------------------------------------------------------------------------- */
.car-360-viewer {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 520px;
    margin: 0 auto;
    z-index: 1;
    /* Lower than arrows so they stay clickable */
    cursor: url('../images/common/rotate-point.svg') 40 40, grab;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    /* Prevents swipe scrolling on mobile while dragging */
}

.car-360-viewer:active {
    cursor: url('../images/common/rotate-point.svg') 40 40, grabbing;
}

.frames-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.car-360-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fills the frame, clipping white space */
    object-position: bottom center;
    /* Anchors the car body to the bottom, crops blank top */
    opacity: 0;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.car-360-frame.active {
    opacity: 1;
}

/* Elegant Floating Drag to Rotate Hint Overlay */
.rotate-hint-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease;
    border: 1px solid var(--color-border);
}

.rotate-hint-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

.rotate-hint-icon {
    width: 24px;
    height: 24px;
    animation: rotate-hint-pulse 2s infinite ease-in-out;
}

.rotate-hint-text {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--color-black);
    white-space: nowrap;
}

@keyframes rotate-hint-pulse {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(20deg) scale(1.15);
    }
}

.carousel-arrow {
    background: transparent;
    border: none;
    color: #444;
    cursor: pointer;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease, transform 0.25s ease;
    z-index: 100;
    /* Above the 360 viewer so it's always clickable */
    -webkit-user-select: none;
    user-select: none;
    /* Anchored to .models-section (position: relative) */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-arrow.prev-arrow {
    left: 60px;
    /* Slightly inward from the edge */
}

.carousel-arrow.next-arrow {
    right: 60px;
    /* Slightly inward from the edge */
}

.carousel-arrow:hover {
    color: var(--color-black);
    transform: translateY(-50%) scale(1.2);
}

/* Centered Specs Grid */
.car-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 50px auto;
    text-align: center;
}

.spec-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.spec-value-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.spec-number {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 700;
    color: var(--color-black);
    line-height: 1;
}

.spec-unit {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 600;
    color: var(--color-black);
}

.spec-label {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    font-weight: 500;
    color: #727272;
    line-height: 1.4;
    max-width: 250px;
}

/* View More Black Solid Button */
.btn-view-more {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    padding: 16px 45px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: none;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    display: inline-block;
    border: none;
}

.btn-view-more:hover {
    background-color: #222 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   8. GEELY CARE+ SECTION (SERVICE SHOWCASE)
   -------------------------------------------------------------------------- */
.care-section {
    padding: 80px 0;
    background-color: var(--color-white);
    color: var(--color-black);
    overflow: hidden;
}

.care-grid {
    display: grid;
    grid-template-columns: 38fr 62fr;
    gap: 50px;
    align-items: center;
}

.care-left {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding-right: 0px;
}

.care-logo-container {
    display: block;
}

.care-logo-img {
    width: 284px;
    height: 52px;
    object-fit: contain;
    display: block;
}

.care-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.care-paragraph {
    font-family: 'GeelyInter', var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: #333333;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.1px;
}

.care-right {
    width: 100%;
}

.care-image-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    display: block;
}

.care-main-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.care-image-container:hover .care-main-img {
    transform: scale(1.025);
}

.care-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 35px;
}

.care-feature {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.care-feature-image-container {
    width: 100%;
    aspect-ratio: 1.4 / 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.care-feature-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.care-feature-image-container:hover .care-feature-img {
    transform: scale(1.025);
}

.care-feature-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.care-feature-title {
    font-family: 'geelybold', var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.care-feature-desc {
    font-family: 'GeelyInter', var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    margin: 0;
}

/* --------------------------------------------------------------------------
   8.5 CORE TECHNOLOGIES SECTION
   -------------------------------------------------------------------------- */
.core-tech-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 50px;
    /* A comfortable padding that isn't too tight */
}

.core-tech-heading {
    font-family: 'geelybold', var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.core-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.core-tech-feature {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.core-tech-image-container {
    width: 100%;
    aspect-ratio: 1.25 / 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-color: #eee;
}

.core-tech-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.core-tech-image-container:hover .core-tech-img {
    transform: scale(1.025);
}

.core-tech-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 5px;
}

.core-tech-title {
    font-family: 'geelybold', var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    letter-spacing: 0.5px;
}

.core-tech-desc {
    font-family: 'GeelyInter', var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    margin: 0;
}

/* --------------------------------------------------------------------------
   8.6 DEALER / SALES CONSULTANT SECTION
   -------------------------------------------------------------------------- */
.dealer-section {
    background-color: #111;
    color: var(--color-white);
    padding: 80px 0;
}

.dealer-inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    min-height: 700px;
}

.dealer-container-wrapper {
    width: 100%;
    padding: 0 60px;
}

/* Left: Google Maps Full Bleed */
.dealer-map {
    position: relative;
    min-height: 700px;
}

.dealer-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Right: Solid Panel Wrapper */
.dealer-panel {
    background-color: var(--color-white);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 50px;
    height: 100%;
}

.dealer-panel-inner {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dealer-panel-title {
    font-family: 'geelybold', var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    line-height: 1.2;
}

.dealer-panel-tag {
    font-family: 'GeelyInter', var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #1a73e8;
    text-transform: uppercase;
}

.dealer-panel-desc {
    font-family: 'GeelyInter', var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    color: #444;
    margin: 0;
    text-align: justify;
}

.dealer-contact-block {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    border-top: 1px solid #eee;
    padding-top: 16px;
}

.dealer-contact-photo {
    width: 170px;
    height: 212px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dealer-contact-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 80%;
    transform: scale(1.6);
    transform-origin: center 80%;
    display: block;
}

.dealer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.dealer-contact-label {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #aaa;
    text-transform: uppercase;
}

.dealer-contact-address {
    font-family: 'GeelyInter', var(--font-body);
    font-size: 14px;
    color: #1a73e8;
    font-weight: 600;
    margin: 0;
    line-height: 1.6;
}

.dealer-contact-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
}

.dealer-contact-links span {
    font-family: 'GeelyInter', var(--font-body);
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center;
}

.dealer-icon {
    width: 20px;
    margin-right: 10px;
    font-size: 16px;
    text-align: center;
}

.dealer-icon.fa-instagram {
    color: #e1306c;
}

.dealer-icon.fa-envelope {
    color: #ea4335;
}

.dealer-icon.fa-phone {
    color: #34a853;
}

.dealer-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: 'geelybold', var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 18px 24px;
    border-radius: 8px;
    text-transform: uppercase;
    transition: background 0.3s ease, transform 0.2s ease;
    margin-top: 4px;
}

.dealer-cta-btn i {
    font-size: 18px;
    color: #25d366;
    transition: color 0.3s ease;
}

.dealer-cta-btn:hover {
    background-color: #222;
    transform: translateY(-2px);
    color: var(--color-white);
}

.dealer-cta-btn:hover i {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   9. FIND LOCATION SECTION (INDONESIA VECTOR MAP OVERLAY)
   -------------------------------------------------------------------------- */
.location-section {
    position: relative;
    padding: 160px 0;
    background-color: var(--color-bg-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Indonesia Styled Grid Background */
.location-map-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #ececec 0%, #f0f0f0 100%);
    z-index: 1;
}

.vector-map-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 70%;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px dashed rgba(0, 0, 0, 0.06);
    border-radius: 10px;
}

/* Indonesia Islands Dot Markers representation */
.vector-map-overlay::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:
        radial-gradient(circle at 15% 45%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 8%),
        /* Sumatra */
        radial-gradient(circle at 45% 65%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 10%),
        /* Java */
        radial-gradient(circle at 55% 40%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 9%),
        /* Kalimantan */
        radial-gradient(circle at 70% 48%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 8%),
        /* Sulawesi */
        radial-gradient(circle at 90% 55%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 8%);
    /* Papua */
}

.location-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 40px;
}

.loc-tag {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--color-light-grey);
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

.loc-title {
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
}

.loc-subtitle {
    color: var(--color-light-grey);
    font-size: 1.1rem;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. CORE TECHNOLOGIES SECTION (GRID)
   -------------------------------------------------------------------------- */
.tech-section {
    padding: 120px 0;
    background-color: var(--color-white);
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.tech-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-light);
    border-radius: 4px;
    overflow: hidden;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
}

.tech-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    background-color: var(--color-white);
    border-color: rgba(0, 0, 0, 0.05);
}

.tech-card-image-box {
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
    background-color: var(--color-charcoal);
}

.tech-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 2;
}

.tech-card-bg-visual {
    width: 100%;
    height: 100%;
    transition: var(--transition-smooth);
}

/* Tech visualization gradients */
.tech-bg-gea {
    background: linear-gradient(135deg, #101820 0%, #405060 100%);
}

.tech-bg-emi {
    background: linear-gradient(135deg, #1f1135 0%, #5a2a8a 100%);
}

.tech-bg-short_blade {
    background: linear-gradient(135deg, #0f2818 0%, #2f6a3f 100%);
}

.tech-card:hover .tech-card-bg-visual {
    transform: scale(1.08);
}

.tech-card-content {
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tech-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 8px;
    color: var(--color-black);
}

.tech-card-subtitle {
    font-size: 0.8rem;
    color: var(--color-light-grey);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.tech-card-desc {
    color: var(--color-grey);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
}

.tech-card-link {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-black);
    display: inline-block;
    transition: var(--transition-fast);
}

.tech-card-link:hover {
    color: var(--color-accent);
    transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   11. WORLD OF GEELY SECTION (LIFESTYLE BANNER)
   -------------------------------------------------------------------------- */
.world-geely-section {
    width: 100vw;
    height: 550px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    overflow: hidden;
}

.world-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1c2331 0%, #090c10 100%);
    z-index: 1;
}

.world-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
}

.world-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    padding: 0 40px;
}

.world-tag {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    display: inline-block;
    margin-bottom: 15px;
}

.world-title {
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.world-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   12. MAIN FOOTER (COMPREHENSIVE MULTI-COLUMN)
   -------------------------------------------------------------------------- */
.main-footer {
    background-color: var(--color-charcoal);
    color: var(--color-white);
    padding: 100px 0 50px 0;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.5fr;
    gap: 60px;
    margin-bottom: 80px;
}

.footer-col-title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 30px;
    color: var(--color-white);
    text-transform: uppercase;
    opacity: 0.95;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-links a {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-white);
    transform: translateX(3px);
}

/* Brand col */
.brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    height: 24px;
    margin-bottom: 25px;
    color: var(--color-white);
}

.footer-brand-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Social links icons */
.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    border: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--color-white);
    text-decoration: none;
    font-size: 16px;
}

.social-icon:hover {
    background-color: var(--color-white);
    color: var(--color-black);
    transform: scale(1.08);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 40px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: flex-start;
}

.copyright {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 15px;
}

.legal-links {
    display: flex;
    gap: 25px;
}

.legal-links a {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    transition: var(--transition-fast);
}

.legal-links a:hover {
    color: var(--color-white);
}

.disclaimer-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.5;
    text-align: justify;
}

/* Floating Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px);
    transition: var(--transition-smooth);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.back-to-top:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    transform: translateY(-5px);
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px; /* Default bottom align when back-to-top is hidden */
    right: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 999;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.08) translateY(-3px);
}

.whatsapp-float img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

/* Push WhatsApp button up when Back to Top button is visible */
.back-to-top.visible ~ .whatsapp-float {
    bottom: 95px; /* 30px bottom + 50px height + 15px gap */
}

/* --------------------------------------------------------------------------
   13. INTERNAL SUBPAGES STYLING (ABOUT & TECH PAGES)
   -------------------------------------------------------------------------- */
/* Page Hero Banner */
.page-hero {
    width: 100vw;
    height: 450px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    overflow: hidden;
    background-color: var(--color-black);
    padding-top: var(--header-height);
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 1;
}

.page-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 40px;
}

.page-hero-tag {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
    display: inline-block;
}

.page-hero-title {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: 4px;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.page-hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

/* Internal Page Heroes Backgrounds */
.tech-page-hero {
    background-image: linear-gradient(135deg, #1c2b3c 0%, #0d1217 100%);
}

.about-page-hero {
    background-image: linear-gradient(135deg, #242c24 0%, #0d100d 100%);
}

/* Technology Detail Blocks */
.tech-detail-block {
    padding: 100px 0;
    border-bottom: 1px solid var(--color-border);
}

.tech-detail-block:last-child {
    border-bottom: none;
}

.tech-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Alternate rows */
.tech-detail-block.alternate .tech-detail-grid {
    direction: rtl;
}

.tech-detail-block.alternate .tech-detail-info {
    direction: ltr;
    /* Reset text direction */
}

.tech-large-visual-box {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.visual-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0) 70%);
}

.tech-box-gea {
    background: linear-gradient(135deg, #2c3e50 0%, #0f171e 100%);
}

.tech-box-emi {
    background: linear-gradient(135deg, #5c2c90 0%, #150924 100%);
}

.tech-box-short_blade {
    background: linear-gradient(135deg, #1d603a 0%, #091a10 100%);
}

.tech-detail-tag {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--color-light-grey);
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.tech-detail-title {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
    color: var(--color-black);
}

.tech-detail-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-light-grey);
    margin-bottom: 25px;
}

.tech-detail-desc {
    font-size: 1.05rem;
    color: var(--color-grey);
    line-height: 1.6;
    margin-bottom: 30px;
}

.tech-bullets-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bullet-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bullet-checkmark {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1.1rem;
}

.bullet-txt {
    font-size: 0.95rem;
    color: var(--color-charcoal);
}

/* About Us content */
.about-content-section {
    padding: 100px 0;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    margin-bottom: 80px;
    align-items: center;
}

.section-badge {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--color-light-grey);
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

.about-title {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.2;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.about-p {
    font-size: 1rem;
    color: var(--color-grey);
    line-height: 1.6;
    margin-bottom: 20px;
}

.about-p.large {
    font-size: 1.15rem;
    color: var(--color-black);
    font-weight: 500;
    line-height: 1.5;
}

.about-intro-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-stat-box {
    background-color: var(--color-bg-light);
    padding: 30px 40px;
    border-radius: 4px;
    border-left: 4px solid var(--color-black);
}

.stat-num {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-black);
    display: block;
    margin-bottom: 5px;
}

.stat-lbl {
    font-size: 0.85rem;
    color: var(--color-light-grey);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Vision glow box */
.about-vision-box {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 80px 60px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.vision-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
}

.vision-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.vision-text {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto;
    font-style: italic;
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE MEDIA QUERIES (MOBILE OPTIMIZED)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {

    .section-container,
    .header-container,
    .core-tech-container,
    .drawer-container,
    .footer-container {
        padding: 0 30px;
    }

    .hero-title {
        font-size: 3.2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }
}

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

    /* Header nav links */
    .navbar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100vw;
        height: calc(100vh - var(--header-height));
        background-color: var(--color-white);
        color: var(--color-black);
        z-index: 1001;
        padding: 50px 40px;
        transform: translateX(-100%);
        transition: var(--transition-smooth);
        border-top: 1px solid var(--color-border);
        margin-left: 0;
        /* Reset desktop auto margin */
    }

    .navbar.open {
        transform: translateX(0);
    }

    .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .nav-link {
        font-family: 'GeelyInter', var(--font-body);
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        color: var(--color-black);
        padding: 5px 0;
        opacity: 0.9;
    }

    .mobile-toggle {
        display: flex;
    }

    /* Hamburger animation states */
    .mobile-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Mobile Accordion Styles */
    .mobile-only {
        display: block !important;
    }

    .nav-item {
        width: 100%;
        position: relative;
    }

    .nav-link-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /* Chevron arrow is hidden on mobile link since we use plus/minus */
    .nav-link-wrapper .chevron-arrow {
        display: none !important;
    }

    .mobile-accordion-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--color-black);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
        transition: var(--transition-fast);
        outline: none;
    }

    .mobile-models-accordion {
        display: block !important;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background-color: #f7f8fa;
        border-radius: 8px;
        transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease, margin-bottom 0.4s ease;
        padding: 0 20px;
    }

    .mobile-models-accordion.open {
        max-height: 500px;
        padding: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .mobile-accordion-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .mobile-accordion-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px;
        background: transparent;
        transition: var(--transition-fast);
        text-decoration: none;
    }

    .mobile-accordion-card:nth-child(3) {
        grid-column: span 2;
    }

    .mobile-acc-img {
        max-width: 100%;
        height: 70px;
        object-fit: contain;
        margin-bottom: 8px;
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
    }

    .mobile-acc-name {
        font-family: 'GeelyBold', 'geelybold', sans-serif;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: var(--color-black);
        line-height: 1.3;
    }

    .mobile-acc-subname {
        font-family: 'GeelyInter', 'Plus Jakarta Sans', Arial, sans-serif !important;
        font-weight: 600;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        color: var(--color-black);
        text-transform: none !important;
        display: inline-block;
        margin-top: 2px;
    }

    /* Drawer */
    .drawer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .drawer-models-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero */
    .hero-grid-bg {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    /* Grids */
    .car-panel-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .car-panel-media {
        order: -1;
        /* Image visual moves to top on mobile */
    }

    .care-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .care-left {
        padding-right: 0;
        align-items: center;
        text-align: center;
    }

    .care-paragraph br {
        display: none;
    }

    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tech-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tech-detail-block.alternate .tech-detail-grid {
        direction: ltr;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .hero-content {
        padding: 0 20px 90px 20px;
        /* Elevated on mobile too */
    }

    .hero-title {
        font-size: 2.5rem;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }

    .hero-subtitle {
        font-size: 1rem;
        letter-spacing: 3px;
        margin-bottom: 6px;
    }

    .hero-actions {
        flex-direction: row;
        /* Keep buttons side-by-side or stack them vertically? Let's check user's preference */
        width: 100%;
        max-width: 300px;
    }

    .models-tabs {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .car-360-viewer {
        height: clamp(180px, 48vw, 400px);
    }

    .tab-btn {
        padding: 10px 15px;
        font-size: 0.8rem;
    }

    .car-specs-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .car-features-list ul {
        grid-template-columns: 1fr;
    }



    .tech-grid {
        grid-template-columns: 1fr;
    }

    .care-features-grid,
    .core-tech-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .back-to-top {
        bottom: 20px;
        right: 20px;
    }

    .whatsapp-float {
        bottom: 20px;
        right: 20px;
    }

    .back-to-top.visible ~ .whatsapp-float {
        bottom: 80px; /* 20px bottom + 50px height + 10px gap */
    }

    .drawer-models-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   8. PREMIUM CAR PRODUCT DETAIL PAGE STYLES
   ========================================================================== */

/* 8.1 Cinematic Hero Section */
.car-detail-hero {
    position: relative;
    width: 100vw;
    min-height: 85vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    color: var(--color-white);
    padding: 120px 0 80px 0;
    overflow: hidden;
}

.hero-glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 80% 30%, rgba(0, 82, 204, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.hero-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.detail-badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 50px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 82, 204, 0.3);
}

.detail-car-name {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.detail-tagline {
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 300;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    max-width: 600px;
}

.detail-actions {
    display: flex;
    gap: 20px;
}

/* Floating Stats Badge on Hero */
.floating-stats-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 320px;
    margin-left: auto;
    box-shadow: var(--shadow-lg);
    animation: float-badge 4s infinite ease-in-out;
}

@keyframes float-badge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.float-value {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
    margin-bottom: 5px;
}

.float-unit {
    font-size: 1.5rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

.float-label {
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

/* 8.2 Interactive Color Configurator */
.color-config-section {
    padding: 100px 0;
    background-color: var(--color-bg-light);
    overflow: hidden;
}

.configurator-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
    margin-top: 60px;
}

.configurator-display {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    background-color: var(--color-white);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 40px;
    box-shadow: var(--shadow-sm);
}

.glow-backdrop {
    position: absolute;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(0, 82, 204, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.car-color-preview-box {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 580px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.car-display-png {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, filter 0.5s ease;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}

.car-shadow-ellipse {
    position: absolute;
    bottom: 30px;
    width: 80%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.selected-color-indicator {
    position: absolute;
    bottom: 25px;
    background-color: var(--color-charcoal);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 50px;
    z-index: 3;
    box-shadow: var(--shadow-sm);
}

.selected-color-indicator span {
    color: var(--color-accent);
    font-weight: 700;
    transition: opacity 0.25s ease;
}

.configurator-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.options-title {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.options-desc {
    color: var(--color-light-grey);
    font-size: 0.95rem;
    margin-bottom: 35px;
    line-height: 1.5;
}

.color-swatches-grid {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.swatch-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 3px solid var(--color-white);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
}

.swatch-btn:hover {
    transform: scale(1.12);
}

.swatch-btn.active {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--color-accent), 0 4px 10px rgba(0, 0, 0, 0.15);
}

.features-list-box {
    background-color: var(--color-white);
    border-radius: 6px;
    border-left: 4px solid var(--color-accent);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.box-subtitle {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: var(--color-charcoal);
}

.box-desc {
    font-size: 0.85rem;
    color: var(--color-light-grey);
    line-height: 1.4;
}

/* 8.3 Advanced Highlights Grid */
.car-features-section {
    padding: 100px 0;
    background-color: var(--color-white);
}

.features-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.feature-detail-card {
    position: relative;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: var(--transition-smooth);
    overflow: hidden;
}

.feature-detail-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 82, 204, 0.2);
    box-shadow: var(--shadow-md);
    background-color: var(--color-white);
}

.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 10%, rgba(0, 82, 204, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.card-icon-box {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 82, 204, 0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: var(--color-accent);
    position: relative;
    z-index: 2;
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

/* SVG backgrounds inside icon boxes to guarantee premium styling */
.icon-shield {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230052cc' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.599-3.75A11.959 11.959 0 0112 2.714z'/%3E%3C/svg%3E");
}

.icon-cpu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230052cc' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 3v1.5M4.5 8.25H3m10.5-5.25v1.5M3 12h1.5m10.5 5.25V18.75m3-6.75H18m-10.5 6v1.5m11.25-11.25h-1.5m-6-.75h7.5A2.25 2.25 0 0121 7.5v7.5A2.25 2.25 0 0118.75 17.25h-7.5A2.25 2.25 0 019 15v-7.5A2.25 2.25 0 0111.25 5.25zM10.5 8.25h3v3h-3v-3z'/%3E%3C/svg%3E");
}

.icon-battery {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230052cc' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z'/%3E%3C/svg%3E");
}

.card-feature-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.card-feature-desc {
    color: var(--color-light-grey);
    font-size: 0.88rem;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

/* 8.4 Technical Specifications Table Details */
.car-specs-detail-section {
    padding: 100px 0;
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.specs-tables-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    margin-top: 60px;
}

.specs-col {
    display: flex;
    flex-direction: column;
}

.specs-table-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-charcoal);
    padding-bottom: 10px;
}

.specs-table {
    display: flex;
    flex-direction: column;
}

.specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.spec-row-label {
    font-size: 0.9rem;
    color: var(--color-light-grey);
}

.spec-row-val {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-black);
}

.spec-row-val .unit {
    font-size: 0.8rem;
    color: var(--color-light-grey);
    margin-left: 2px;
}

/* 8.5 Glassmorphic Booking Form & Modal */
.booking-section {
    position: relative;
    padding: 120px 0;
    background-color: var(--color-bg-dark);
    color: var(--color-white);
    overflow: hidden;
}

.booking-backdrop-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(0, 82, 204, 0.08) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
}

.booking-container {
    position: relative;
    z-index: 2;
}

.booking-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.booking-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.booking-title {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(24px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 25px;
}

.booking-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

.contact-card-mini {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.mini-icon-phone {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230052cc' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-2.824-1.802-5.187-4.165-7-7l1.293-.97c.362-.271.528-.732.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.mini-text {
    display: flex;
    flex-direction: column;
}

.mini-lbl {
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
}

.mini-val {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-white);
}

.booking-form-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 40px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
    border-left: 3px solid var(--color-accent);
    padding-left: 10px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-group label {
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 12px 16px;
    color: var(--color-white);
    font-size: 0.9rem;
    transition: var(--transition-fast);
    width: 100%;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-accent);
    box-shadow: 0 0 10px rgba(0, 82, 204, 0.25);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-control:disabled {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.05);
}

/* Custom Dropdown Option background color */
.select-control option {
    background-color: #1a1a1a;
    color: #fff;
}

/* Custom Checkbox styles */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.75rem !important;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.checkbox-container input {
    margin-top: 3px;
    cursor: pointer;
}

.legal-link-inline {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Glass Success Popup */
.booking-success-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 18, 18, 0.95);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-success-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.success-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-success-overlay.open .success-card {
    transform: translateY(0);
}

.success-icon-box {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    box-shadow: 0 0 25px rgba(0, 82, 204, 0.4);
}

.success-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.success-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 320px;
    margin-bottom: 30px;
}

.success-desc span {
    font-weight: 700;
    color: var(--color-accent);
}

/* Responsive Overrides for Product Detail Page */
@media screen and (max-width: 1200px) {
    .hero-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }

    .floating-stats-card {
        margin: 0 auto;
        align-items: center;
    }

    .detail-actions {
        justify-content: center;
    }

    .configurator-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .configurator-options {
        align-items: center;
        text-align: center;
    }

    .features-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .specs-tables-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .booking-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .booking-info {
        align-items: center;
    }

    .contact-card-mini {
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
    .detail-actions {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .detail-actions .btn {
        width: 100%;
        max-width: 320px;
    }

    .configurator-display {
        padding: 20px;
        min-height: 280px;
    }

    .features-detail-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .booking-form-wrapper {
        padding: 30px 20px;
    }

    /* --- MOBILE: GEELY MODELS SECTION --- */
    .section-title {
        font-size: 20px;
        letter-spacing: 2px;
        padding: 0 15px;
        line-height: 1.4;
    }

    .models-tabs-wrapper {
        position: relative;
        padding: 0 15px;
        margin-bottom: 15px !important;
        z-index: 10 !important;
        /* Keep tabs on top of the scaled car background */
    }

    /* Left Scroll Indicator Arrow */
    .models-tabs-wrapper::before {
        content: '‹';
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: bold;
        color: #555;
        pointer-events: none;
        background: var(--color-white);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        z-index: 12;
        padding-bottom: 2px;
    }

    /* Right Scroll Indicator Arrow */
    .models-tabs-wrapper::after {
        content: '›';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: bold;
        color: #555;
        pointer-events: none;
        background: var(--color-white);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        z-index: 12;
        padding-bottom: 2px;
    }

    .models-tabs {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 6px 35px;
        /* Leave space for left/right chevrons */
    }

    .models-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        padding: 10px 20px;
        white-space: nowrap;
    }

    .car-carousel-row {
        padding: 0 15px;
        margin-bottom: 25px;
    }

    .carousel-arrow {
        display: none;
    }

    .car-360-viewer {
        height: 48vw !important;
        max-height: 400px !important;
        min-height: 160px !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    .car-360-frame {
        object-fit: cover !important;
        object-position: center bottom !important;
        transform: none !important;
        transform-origin: bottom center !important;
    }

    .car-specs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 0 10px;
        margin-bottom: 35px;
    }

    .spec-number {
        font-size: 1.3rem;
    }

    .spec-unit {
        font-size: 0.8rem;
    }

    .spec-label {
        font-size: 0.65rem;
    }

    .car-actions {
        padding: 0 20px;
    }

    .btn-view-more {
        display: block;
        width: 100%;
    }
}

/* Responsive Dealer Section (Triggered at 1024px for tablets and mobile) */
@media screen and (max-width: 1024px) {
    .dealer-container-wrapper {
        padding: 0 20px;
    }

    .dealer-inner {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 12px;
    }

    .dealer-map {
        min-height: 350px;
        height: 350px;
    }

    .dealer-panel {
        padding: 40px 20px;
    }

    .dealer-panel-inner {
        max-width: 100%;
        gap: 16px;
    }

    .dealer-panel-title {
        font-size: 24px;
    }

    .dealer-panel-desc {
        font-size: 14px;
    }

    .dealer-contact-photo {
        width: 130px;
        height: 162px;
    }
}

@media screen and (max-width: 480px) {
    .dealer-contact-block {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .dealer-contact-links span {
        justify-content: center;
    }
}

/* --- PREMIUM LIGHTBOX MODAL --- */
.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lightbox-modal.active {
    display: flex;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
}

.lightbox-toolbar {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100001;
    display: flex;
    gap: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-toolbar button {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 16px;
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s, transform 0.2s;
}

.lightbox-toolbar button:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.lightbox-content {
    position: relative;
    z-index: 100000;
    max-width: 90%;
    max-height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 0.1s ease-out;
}

.lightbox-content:active {
    cursor: grabbing;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    transform-origin: center center;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover overlay on contact photo to indicate zoom capability */
.dealer-contact-photo {
    cursor: pointer;
    position: relative;
}

.dealer-contact-photo::after {
    content: '\f00e';
    /* fa-magnifying-glass-plus */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.dealer-contact-photo:hover::after {
    opacity: 1;
}

/* --- 10. DISCOVER BANNER SECTION --- */
.discover-banner-section {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.discover-banner-inner {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 400px;
    background-image: url('../images/home/1772563081-p145-4-1.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    border-radius: 0;
    overflow: hidden;
}

.discover-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.discover-banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(15px, 2vw, 30px);
    text-align: center;
}

.discover-banner-title {
    font-family: 'GeelyBold', 'geelybold', var(--font-heading);
    color: var(--color-white);
    font-size: clamp(20px, 3.2vw, 42px);
    font-weight: 700;
    letter-spacing: clamp(1px, 0.3vw, 4px);
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    margin: 0;
    line-height: 1.2;
}

.discover-banner-btn {
    display: inline-block;
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: 'GeelyInter', var(--font-body);
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 500;
    text-transform: none;
    padding: clamp(10px, 0.9vw, 14px) clamp(25px, 2.5vw, 40px);
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    line-height: 1.5;
}

.discover-banner-btn:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    color: #111;
}

/* Mobile & Tablet adjustments */
@media screen and (max-width: 768px) {
    .discover-banner-section {
        padding: 0;
        margin: 0;
    }

    .discover-banner-inner {
        height: 100vh;
        min-height: 400px;
        background-position: center bottom;
        border-radius: 0;
    }
}

/* ==========================================================================
   15. NEWS HUB & MEDIA PAGES (Added for News integration)
   ========================================================================== */
.news-page-wrapper {
    font-family: 'Jost', var(--font-body);
    background-color: #f8f9fa;
    color: #111;
    overflow-x: hidden;
}

.news-hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url('/geely/public/images/news/charging.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    color: var(--color-white);
    overflow: hidden;
}

.news-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.05) 50%,
            rgba(0, 0, 0, 0.65) 100%);
    z-index: 1;
}

.news-hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px clamp(80px, 12vw, 140px) 40px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(30px);
    animation: newsHeroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

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

.news-hero-title {
    font-family: 'Syncopate', var(--font-heading);
    font-size: clamp(3.2rem, 7vw, 6.2rem);
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 0.95;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.news-hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 400;
    letter-spacing: 0.5px;
    opacity: 0.95;
    max-width: 650px;
    line-height: 1.4;
}

.news-filter-wrapper {
    background-color: var(--color-white);
    padding: 40px 0;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: var(--header-height);
    z-index: 99;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.news-filter-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: center;
}

.news-tabs {
    display: inline-flex;
    background-color: #f1f3f6;
    padding: 6px;
    border-radius: 100px;
    gap: 4px;
}

.filter-btn {
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 30px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: var(--color-light-grey);
    border-radius: 100px;
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
}

.filter-btn:hover {
    color: var(--color-black);
}

.filter-btn.active {
    background-color: var(--color-white);
    color: var(--color-black);
    box-shadow: var(--shadow-sm);
}

.news-hub-section {
    padding: 80px 0 120px 0;
}

.news-hub-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
}

.featured-card-wrapper {
    margin-bottom: 60px;
}

.news-featured-card {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    background-color: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.news-featured-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.featured-img-box {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.featured-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-featured-card:hover .featured-img-box img {
    transform: scale(1.04);
}

.category-tag {
    position: absolute;
    top: 25px;
    left: 25px;
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: 6px 18px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 82, 204, 0.25);
    z-index: 5;
}

.featured-content-box {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.meta-date {
    font-size: 0.85rem;
    color: var(--color-light-grey);
    margin-bottom: 15px;
    display: block;
    font-weight: 500;
}

.featured-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 700;
    color: var(--color-charcoal);
    line-height: 1.3;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.news-featured-card:hover .featured-title {
    color: var(--color-accent);
}

.featured-summary {
    font-size: 0.98rem;
    color: var(--color-grey);
    line-height: 1.7;
    margin-bottom: 30px;
}

.read-more-link {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: var(--transition-fast);
}

.news-featured-card:hover .read-more-link {
    gap: 14px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.news-grid-card {
    background-color: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}

.news-grid-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.grid-img-box {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.grid-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-grid-card:hover .grid-img-box img {
    transform: scale(1.04);
}

.grid-content-box {
    padding: 35px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.grid-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-charcoal);
    line-height: 1.4;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.news-grid-card:hover .grid-title {
    color: var(--color-accent);
}

.grid-summary {
    font-size: 0.92rem;
    color: var(--color-grey);
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

.news-grid-card:hover .read-more-link {
    gap: 14px;
}

.empty-news-box {
    display: none;
    text-align: center;
    padding: 80px 20px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.empty-news-icon {
    font-size: 3rem;
    color: var(--color-light-grey);
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-news-text {
    font-size: 1.1rem;
    color: var(--color-light-grey);
    font-weight: 500;
}

.news-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-glass-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-detail-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-content-wrapper {
    background-color: var(--color-white);
    width: 92%;
    max-width: 850px;
    max-height: 85vh;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transform: translateY(40px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-lg);
}

.news-detail-modal.open .modal-content-wrapper {
    transform: translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 44px;
    height: 44px;
    background-color: var(--color-white);
    color: var(--color-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    transition: var(--transition-smooth);
}

.modal-close-btn:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    transform: rotate(90deg);
}

.modal-img-banner {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
}

.modal-img-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-body-container {
    padding: 40px clamp(20px, 5vw, 50px);
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-width: thin;
}

.modal-meta-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.modal-badge {
    background-color: rgba(0, 82, 204, 0.08);
    color: var(--color-accent);
    padding: 5px 15px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 30px;
    letter-spacing: 1px;
}

.modal-date {
    font-size: 0.88rem;
    color: var(--color-light-grey);
    font-weight: 500;
}

.modal-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    font-weight: 700;
    color: var(--color-charcoal);
    line-height: 1.25;
    margin-bottom: 30px;
}

.modal-text-content {
    font-size: 1.05rem;
    color: var(--color-grey);
    line-height: 1.85;
}

@media screen and (max-width: 1024px) {
    .news-featured-card {
        grid-template-columns: 1.1fr 1fr;
    }

    .featured-content-box {
        padding: 40px;
    }
}

@media screen and (max-width: 900px) {
    .news-featured-card {
        grid-template-columns: 1fr;
    }

    .featured-img-box {
        aspect-ratio: 16 / 9;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media screen and (max-width: 768px) {
    .news-hero {
        height: 60vh;
        min-height: 380px;
    }

    .news-hero-content {
        padding: 0 24px 40px 24px;
    }

    .news-filter-wrapper {
        padding: 20px 0;
        top: 70px;
    }

    .news-filter-container {
        padding: 0 20px;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .news-filter-container::-webkit-scrollbar {
        display: none;
    }

    .news-tabs {
        white-space: nowrap;
        display: inline-flex;
        padding: 4px;
    }

    .filter-btn {
        padding: 10px 20px;
        font-size: 0.78rem;
    }

    .news-hub-section {
        padding: 45px 0 70px 0;
    }

    .news-hub-container {
        padding: 0 20px;
    }

    .featured-content-box {
        padding: 30px 20px;
    }

    .grid-content-box {
        padding: 30px 20px;
    }

    .modal-content-wrapper {
        width: 95%;
        max-height: 90vh;
        border-radius: 16px;
    }

    .modal-body-container {
        padding: 30px 20px;
    }
}

/* ==========================================================================
   16. YOUTUBE VIDEO PLAY OVERLAY & RESPONSIVE MODAL
   ========================================================================== */
.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: background-color 0.3s ease;
}

.news-featured-card:hover .video-play-overlay,
.news-grid-card:hover .video-play-overlay {
    background-color: rgba(0, 0, 0, 0.45);
}

.video-play-btn {
    width: clamp(54px, 7vw, 76px);
    height: clamp(54px, 7vw, 76px);
    background-color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: clamp(1.25rem, 2vw, 1.85rem);
    box-shadow: 0 10px 25px rgba(0, 82, 204, 0.4);
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.video-play-btn i {
    margin-left: 5px; /* Visual centering adjustment for triangle play icon */
}

.news-featured-card:hover .video-play-btn,
.news-grid-card:hover .video-play-btn {
    transform: scale(1.15);
    background-color: #0042a3;
}

/* Modal video iframe centering and wrapper */
.modal-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    width: 100%;
    background: #000;
}

.modal-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   17. ABOUT US MOCKUP HERO BANNER & STATS GRID
   ========================================================================== */
.about-hero-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/geely/public/images/about/about.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    color: var(--color-white);
    overflow: hidden;
}

.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
}

.about-hero-container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 60px 80px 60px;
    position: relative;
    z-index: 2;
}

.about-hero-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.about-hero-headline {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
    max-width: 800px;
}

.about-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 30px;
}

.about-stat-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-item-label-top {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.stat-item-value {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
}

.stat-item-label-bottom {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

@media screen and (max-width: 1200px) {
    .about-hero-container {
        padding: 0 40px 60px 40px;
    }
}

@media screen and (max-width: 1024px) {
    .about-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media screen and (max-width: 768px) {
    .about-hero-banner {
        height: 100vh;
        height: 100svh;
        align-items: flex-end;
    }

    .about-hero-container {
        padding: 0 20px 40px 20px;
    }

    .about-hero-content {
        gap: 25px;
    }

    .about-hero-headline {
        font-size: 24px;
        line-height: 1.15;
    }

    .about-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 15px;
        border-top: none;
        padding-top: 0;
    }

    .stat-item-label-top {
        font-size: 11px;
    }

    .stat-item-value {
        font-size: 28px;
    }

    .stat-item-label-bottom {
        font-size: 11px;
    }
}

/* ==========================================================================
   18. GEELY AT A GLANCE SECTION
   ========================================================================== */
.about-glance-section {
    padding: 100px 0;
    background-color: var(--color-white);
}

.about-glance-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 60px;
}

.glance-heading {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--color-black);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 25px;
}

.glance-description {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: #444444;
    line-height: 1.65;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px auto;
}

.glance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.glance-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.glance-card-image {
    width: 100%;
    aspect-ratio: 1.55 / 1;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f7f8fa;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    border: 1px solid #f0f0f0;
}

.glance-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.glance-card:hover .glance-card-image img {
    transform: scale(1.04);
}

.glance-card-title {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.glance-card-body {
    font-family: var(--font-body);
    font-size: 13px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

@media screen and (max-width: 1024px) {
    .glance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media screen and (max-width: 768px) {
    .about-glance-section {
        padding: 60px 0;
    }

    .about-glance-container {
        padding: 0 24px;
    }

    .glance-heading {
        font-size: 22px;
        letter-spacing: 2px;
    }

    .glance-description {
        font-size: 14px;
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 576px) {
    .glance-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

/* ==========================================================================
   19. GEELY BRAND HISTORY TIMELINE
   ========================================================================== */
.about-history-section {
    padding: 60px 0 80px 0;
    background-color: #f9f8f6;
    overflow: hidden;
}

.about-history-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 100px;
    position: relative;
    box-sizing: border-box;
}

.history-heading {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 30px;
}

.history-timeline-nav-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto 30px auto;
    padding: 0;
}

/* Soft gradient fades at the far edges of the scrollable year tab bar */
.history-timeline-nav-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to right, #f9f8f6, transparent);
    z-index: 3;
    pointer-events: none;
}

.history-timeline-nav-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to left, #f9f8f6, transparent);
    z-index: 3;
    pointer-events: none;
}

.history-timeline-line {
    position: absolute;
    bottom: 12px;
    left: 50px;  /* aligns with nav horizontal padding */
    right: 50px; /* aligns with nav horizontal padding */
    height: 1px;
    background-color: #e2e2df;
    z-index: 1;
    display: block;
}

.history-timeline-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 0 50px 12px 50px; /* aligns first year with slider arrows */
    overflow-x: auto;
    overflow-y: hidden;
    gap: 40px;
    width: 100%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.history-timeline-nav::-webkit-scrollbar {
    display: none;
}

.timeline-nav-btn {
    background: none;
    border: none;
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #b0afac;
    cursor: pointer;
    padding: 0 0 12px 0;
    transition: color 0.3s ease, border-color 0.3s ease;
    border-bottom: 2px solid transparent;
    outline: none;
    flex-shrink: 0;
}

.timeline-nav-btn:hover {
    color: var(--color-black);
}

.timeline-nav-btn.active {
    color: #0052cc;
    border-bottom: 2px solid #0052cc;
}

.history-slider-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.history-slider {
    width: 100%;
    background-color: transparent;
}

.history-slide-active-content {
    display: flex;
    gap: 50px; /* Gap between image and text */
    align-items: center;
    width: 100%;
    transition: opacity 0.25s ease-in-out;
}

.history-slide-image {
    flex: 0 0 50%;
    aspect-ratio: 1.6 / 1;
    border-radius: 12px; /* Smoother border-radius */
    overflow: hidden;
    background-color: #eaeaea;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05); /* Premium soft shadow */
    border: 1px solid #eeeeeb;
}

.history-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-slide-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.history-slide-title {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    line-height: 1.3;
}

.history-slide-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: #4c4c4a;
    line-height: 1.6;
    margin: 0;
}

.history-slide-active-content.no-image {
    justify-content: center;
    min-height: 380px;
}

.history-slide-active-content.no-image .history-slide-info {
    flex: 0 0 75%;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

/* ——— ID-specific overrides: only affects Brand History title & desc elements ——— */
#history-title {
    font-family: 'GeelyInter', 'geelyinter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

#history-desc {
    font-family: 'GeelyInter', 'geelyinter', sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

.history-slider-arrow {
    position: absolute;
    width: 50px; /* Enlarged navigation button size */
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background-color 0.3s, transform 0.2s, color 0.3s;
    color: var(--color-black);
    font-size: 16px; /* Larger icon size */
}

.history-slider-arrow:hover {
    background-color: #f7f7f7;
    color: #0052cc;
}

.prev-btn {
    left: 15px;
}

.next-btn {
    right: 15px;
}

.history-progress-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.history-sub-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    align-items: center;
}

.sub-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #e2e2df;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.sub-dot:hover {
    background-color: #a8a7a4;
}

.sub-dot.active {
    background-color: #0052cc;
    transform: scale(1.25);
}

@media screen and (max-width: 992px) {
    .history-slider-wrapper {
        padding: 0 70px;
    }
    
    .history-slide-active-content {
        gap: 40px;
    }

    .history-slide-title {
        font-size: 24px;
    }

    .history-slide-text {
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    .about-history-section {
        padding: 40px 0 60px 0;
    }

    .about-history-container {
        padding: 0 20px;
    }

    .history-timeline-nav-wrapper {
        margin-bottom: 25px;
    }

    .history-timeline-nav-wrapper::before,
    .history-timeline-nav-wrapper::after {
        width: 20px;
    }

    .history-timeline-line {
        position: absolute;
        bottom: 10px;
        left: 20px;
        right: 20px;
        height: 1px;
        background-color: #e2e2df;
        z-index: 1;
        display: block;
    }

    .history-timeline-nav {
        padding: 0 20px 10px 20px;
        gap: 20px;
    }

    .timeline-nav-btn {
        font-size: 16px;
        padding: 0 0 10px 0;
        border-bottom-width: 2px;
    }

    .history-slider-wrapper {
        padding: 0 50px;
    }

    .history-slide-active-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .history-slide-info {
        text-align: center;
    }

    .history-slide-active-content.no-image {
        min-height: 220px;
    }

    .history-slide-active-content.no-image .history-slide-info {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    .history-slide-image {
        flex: 0 0 100%;
        width: 100%;
        aspect-ratio: 1.55 / 1;
    }

    .history-slider-arrow {
        width: 44px;
        height: 44px;
    }

    .prev-btn {
        left: 0;
    }

    .next-btn {
        right: 0;
    }

    .history-slide-title {
        font-size: 22px;
    }

    .history-slide-text {
        font-size: 14.5px;
    }
}

/* ==========================================================================
   20. OUR MISSION & OUR VISION INTERACTIVE ACCORDION
   ========================================================================== */
.about-mission-vision-section {
    width: 100%;
    background-color: #ffffff;
    padding: 120px 0; /* Premium, very spacious padding for a clean off-screen feeling */
    overflow: hidden;
}

.about-mission-vision-container {
    display: flex;
    width: 100%;
    max-width: var(--container-width); /* Restricts card width so elegant white space borders the section */
    margin: 0 auto;
    height: 480px; /* Tall premium aspect ratio */
    gap: 28px; /* Distinct spacing gap letting the white background flow through the cards */
    padding: 0 60px; /* Left/Right safety margins */
    box-sizing: border-box;
    background-color: transparent;
}

.mission-vision-card {
    position: relative;
    flex: 1;
    border-radius: 20px; /* Smoother, more organic rounded corners */
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.65s cubic-bezier(0.77, 0, 0.175, 1);
    background-size: cover;
    background-position: center center;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08); /* Luxurious floating depth on white backdrop */
}

.mission-card {
    background-image: url('/geely/public/images/about/our-mission-edited.jpg');
}

.vision-card {
    background-image: url('/geely/public/images/about/vision.jpg');
}

.mission-vision-card .card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35); /* Elegant darkness */
    transition: background 0.5s ease;
    border-radius: 20px;
}

.about-mission-vision-container:hover .mission-vision-card .card-overlay {
    background: rgba(0, 0, 0, 0.55);
}

.about-mission-vision-container:hover .mission-vision-card:hover .card-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.about-mission-vision-container .mission-vision-card:hover {
    flex: 2.4; /* Stronger expansion on hover */
}

.mission-vision-card .card-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 60px; /* Balanced content padding */
    z-index: 2;
    text-align: center;
}

.mission-vision-card .card-title {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.mission-vision-card .card-desc {
    font-family: 'GeelyInter', 'geelyinter', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.75;
    margin: 0;
    max-width: 480px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s ease 0.15s, transform 0.45s ease 0.15s;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.mission-vision-card:hover .card-desc {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive layout for tablets and below */
@media screen and (max-width: 1024px) {
    .about-mission-vision-section {
        padding: 80px 0;
    }

    .about-mission-vision-container {
        padding: 0 40px;
        height: 440px;
        gap: 20px;
    }

    .mission-vision-card .card-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 768px) {
    .about-mission-vision-section {
        padding: 60px 0;
    }

    .about-mission-vision-container {
        flex-direction: column;
        height: auto;
        padding: 0 24px;
        gap: 20px;
    }

    .mission-vision-card {
        flex: none !important;
        height: 340px;
        width: 100%;
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    }

    .mission-vision-card .card-desc {
        opacity: 1;
        transform: translateY(0);
        font-size: 14.5px;
    }

    .mission-vision-card .card-title {
        font-size: 24px;
        margin-bottom: 14px;
    }

    .mission-vision-card .card-content {
        padding: 28px 28px;
    }
}

/* ==========================================================================
   21. ABOUT GEELY AUTO INDONESIA SECTION
   ========================================================================== */
.about-geely-indo-section {
    padding: 80px 0 100px 0;
    background-color: #f4f4f2;
}

.about-geely-indo-container {
    max-width: 950px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: left;
}

.about-geely-indo-heading {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.about-geely-indo-desc {
    font-family: var(--font-body);
    font-size: 14.5px;
    color: #111111;
    line-height: 1.5;
    margin-bottom: 20px;
}

.about-geely-indo-desc:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .about-geely-indo-section {
        padding: 60px 0;
    }
    
    .about-geely-indo-container {
        padding: 0 24px;
    }
    
    .about-geely-indo-heading {
        font-size: 22px;
    }
    
    .about-geely-indo-desc {
        font-size: 13.5px;
    }
}

/* ==========================================================================
   22. CONTACT / TEST DRIVE PAGE (REDESIGN)
   ========================================================================== */
.contact-page-section {
    background-color: #fafafa;
    padding: 80px 0;
    min-height: 100vh;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-title {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 2.5rem;
    color: var(--color-black);
    margin-bottom: 15px;
}

.contact-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
    align-items: stretch;
}

/* Left Column: Dealer Card */
.contact-dealer-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.badge-blue {
    display: inline-block;
    color: #0052cc;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dealer-name {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 1.8rem;
    color: var(--color-black);
    margin-bottom: 10px;
}

.dealer-addr {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Sales Consultant Inner Card */
.contact-sales-card {
    background: #222;
    border-radius: 12px;
    padding: 30px;
    color: #fff;
    margin-top: auto;
    position: relative;
    overflow: hidden;
}

/* Decorative circle in dark card */
.contact-sales-card::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.contact-sales-card .badge-blue {
    color: #3399ff;
    position: relative;
    z-index: 2;
}

.sales-name {
    font-family: 'GeelyBold', 'geelybold', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
}

.sales-role {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.sales-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    position: relative;
    z-index: 2;
}

.sales-contact-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.sales-contact-list i {
    color: #3399ff;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.sales-contact-list a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sales-contact-list a:hover {
    color: #3399ff;
}

.btn-schedule-testdrive {
    display: block;
    width: 100%;
    text-align: center;
    background: #fff;
    color: #222;
    padding: 15px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.btn-schedule-testdrive:hover {
    background: #eee;
    transform: translateY(-2px);
}

/* Right Column: Photo */
.contact-photo-col {
    height: 100%;
}

.sales-photo-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.sales-photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.floating-badge {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.floating-badge .badge-blue {
    margin-bottom: 5px;
}

.floating-badge strong {
    display: block;
    color: var(--color-black);
    font-size: 1.1rem;
}

/* Map Section */
.contact-map-section {
    width: 100%;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Floating WA Button */
.floating-wa-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
    z-index: 999;
    transition: all 0.3s ease;
    text-decoration: none;
}

.floating-wa-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 25px rgba(37, 211, 102, 0.4);
    color: #fff;
}

/* Responsive */
@media screen and (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .sales-photo-wrapper {
        min-height: 400px;
    }
}

@media screen and (max-width: 768px) {
    .contact-page-section {
        padding: 50px 0;
    }
    
    .contact-title {
        font-size: 2rem;
    }
    
    .contact-dealer-card {
        padding: 25px;
    }
    
    .contact-map-section {
        height: 300px;
    }
}

/* ==========================================================================
   8. PREMIUM PRODUCT DETAIL PAGE STYLING (Starray, EX5, EX2)
   ========================================================================== */

/* Cinematic Hero Section - Matched to Reference Screenshot */
.car-detail-hero {
    height: 100vh;
    min-height: 600px;
    background-size: cover;
    background-position: center top;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--color-white);
}

.hero-glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle gradient: transparent at top, dark fade only at the very bottom — matching the screenshot */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.45) 72%,
        rgba(0, 0, 0, 0.72) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.premium-hero-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 40px;
    position: relative;
    z-index: 2;
}

.hero-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    width: 100%;
}

.hero-text-and-specs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* "THE BORN SUPER HYBRID SUV" — small, uppercase, slightly faded */
.premium-pre-title {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 6px;
    line-height: 1;
}

/* "GEELY STARRAY EM-i" — very large, bold, tight tracking */
.premium-car-name {
    font-family: 'GeelyBold', var(--font-heading);
    font-size: clamp(2rem, 4.2vw, 3.8rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 20px;
}

/* Specs row: horizontal, dividers between items — no big left border */
.premium-specs-grid {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 0;
}

/* Each spec column with a right-side divider except the last */
.premium-spec-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-right: 28px;
    margin-right: 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.premium-spec-col:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

/* "Range up to" label */
.spec-col-lbl {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0px;
    text-transform: none;
    line-height: 1.4;
}

/* "1000+km" value — large bold */
.spec-col-val {
    font-family: 'GeelyBold', var(--font-heading);
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1;
    margin: 1px 0;
}

/* "km" unit inline with value */
.spec-col-unit {
    font-size: 0.6em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 1px;
    vertical-align: baseline;
}

/* Sub-label: "NEDC Range - Combined" */
.spec-col-sub {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    font-weight: 400;
    line-height: 1.3;
}

/* CTA buttons group — anchored to bottom-right */
.hero-cta-buttons {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    align-items: center;
    padding-bottom: 4px;
}

/* Base shared styles */
.btn-premium-outline,
.btn-premium-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
    border-radius: 3px;
    transition: var(--transition-smooth);
    cursor: pointer;
    white-space: nowrap;
}

/* "Visit showroom" — ghost / outline button */
.btn-premium-outline {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: var(--color-white);
}

.btn-premium-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-white);
}

/* "Find a Dealer" — solid white button with dark text */
.btn-premium-filled {
    background: var(--color-white);
    border: 1px solid var(--color-white);
    color: var(--color-black);
}

.btn-premium-filled:hover {
    background: rgba(255, 255, 255, 0.88);
}

/* Color & 360° Showroom Configurator */
.color-config-section {
    padding: 120px 0;
    background-color: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
}

.configurator-wrapper {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    margin-top: 50px;
    align-items: center;
}

.configurator-display {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    height: 520px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-md);
}

.glow-backdrop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(0, 82, 204, 0.06) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.config-mode-selector {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.04);
    padding: 6px;
    border-radius: 50px;
    display: flex;
    gap: 5px;
    z-index: 10;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.mode-tab-btn {
    padding: 10px 24px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mode-tab-btn:hover {
    color: var(--color-black);
}

.mode-tab-btn.active {
    background: var(--color-white);
    color: var(--color-black);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.config-view-container {
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 2;
}

.config-view-container.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

/* 360 viewer within showroom display */
.configurator-display .car-360-viewer {
    height: 100%;
    width: 100%;
    margin: 0;
}

.rotate-hint-overlay {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 10;
    opacity: 0.8;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease;
}

.hint-hand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    animation: swipe-hint 2.2s infinite ease-in-out;
}

.rotate-point-icon {
    width: 20px;
    height: 20px;
}

.hint-text {
    font-size: 0.72rem;
    color: #444;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 14px;
    border-radius: 50px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

@keyframes swipe-hint {
    0%, 100% { transform: translateX(-15px); }
    50% { transform: translateX(15px); }
}

/* Colors view within showroom display */
.car-color-preview-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}

.car-display-png {
    width: 82%;
    max-height: 350px;
    object-fit: contain;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.08));
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.car-shadow-ellipse {
    position: absolute;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 20px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.selected-color-indicator {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: var(--color-white);
    padding: 8px 22px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 10;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

#color-name-text {
    transition: opacity 0.25s ease;
}

.configurator-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.options-title {
    font-family: 'GeelyBold', var(--font-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-black);
}

.options-desc {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

.color-swatches-grid {
    display: flex;
    gap: 16px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.swatch-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    outline: none;
    border: 3px solid transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

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

.swatch-btn.active {
    transform: scale(1.1);
    border-color: var(--color-accent);
    box-shadow: 0 8px 20px rgba(0, 82, 204, 0.22);
}

.features-list-box {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    margin-top: 15px;
    box-shadow: var(--shadow-sm);
}

.box-subtitle {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 8px;
}

.box-desc {
    color: #666;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Advanced Features Section */
.car-features-section {
    padding: 120px 0;
    background-color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.features-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.feature-detail-card {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 40px;
    text-align: left;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-detail-card:hover {
    transform: translateY(-8px);
    background: #ffffff;
    border-color: rgba(0, 82, 204, 0.15);
    box-shadow: var(--shadow-lg);
}

.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 82, 204, 0.035) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.feature-detail-card:hover .card-glow {
    opacity: 1;
}

.card-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(0, 82, 204, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: var(--transition-fast);
}

.feature-detail-card:hover .card-icon-box {
    background: var(--color-accent);
}

.card-icon-box::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--color-accent);
    transition: var(--transition-fast);
}

.feature-detail-card:hover .card-icon-box::before {
    color: var(--color-white);
}

.card-icon-box.icon-shield::before { content: "\f132"; }
.card-icon-box.icon-cpu::before { content: "\f2db"; }
.card-icon-box.icon-battery::before { content: "\f240"; }

.card-feature-title {
    font-family: 'GeelyBold', var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-black);
    z-index: 2;
}

.card-feature-desc {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
    z-index: 2;
}

/* Specification Detail Section */
.car-specs-detail-section {
    padding: 120px 0;
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
}

.specs-tables-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    margin-top: 50px;
}

.specs-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.specs-table-title {
    font-family: 'GeelyBold', var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-black);
    border-bottom: 2px solid var(--color-black);
    padding-bottom: 12px;
    margin-bottom: 10px;
}

.specs-table {
    display: flex;
    flex-direction: column;
}

.specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
}

.specs-row:last-child {
    border-bottom: none;
}

.spec-row-label {
    color: #555;
    font-weight: 500;
}

.spec-row-val {
    color: var(--color-black);
    font-weight: 700;
    text-align: right;
}

.spec-row-val .unit {
    font-size: 0.8rem;
    font-weight: 400;
    color: #888;
    margin-left: 2px;
}

/* Glassmorphic Test Drive Booking Section */
.booking-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #050b14 0%, #0c1a30 100%);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.booking-backdrop-glow {
    position: absolute;
    top: -20%;
    right: -20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(0, 82, 204, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.booking-container {
    position: relative;
    z-index: 2;
}

.booking-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.booking-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.booking-title {
    font-family: 'GeelyBold', var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 855;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: -1px;
}

.booking-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.75;
}

.contact-card-mini {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 22px 30px;
    margin-top: 15px;
    width: 100%;
    max-width: 420px;
}

.mini-icon-phone {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-icon-phone::before {
    content: "\f095";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--color-white);
}

.mini-text {
    display: flex;
    flex-direction: column;
}

.mini-lbl {
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    font-weight: 600;
}

.mini-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-white);
}

.booking-form-wrapper {
    position: relative;
    overflow: visible;
    z-index: 10;
}

.booking-form {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 45px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.booking-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.booking-form label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.75);
}

.booking-form .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 13px 18px;
    color: var(--color-white);
    font-size: 0.95rem;
    transition: var(--transition-fast);
    width: 100%;
}

.booking-form .form-control:focus {
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 15px rgba(0, 82, 204, 0.25);
}

.booking-form .form-control[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.booking-form .select-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 22px;
    padding-right: 42px;
}

.booking-form option {
    background: #071324;
    color: white;
}

.booking-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.booking-form .checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
    cursor: pointer;
    position: relative;
}

.booking-form .checkbox-container input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.booking-form .checkbox-container .checkmark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    transition: var(--transition-fast);
}

.booking-form .checkbox-container input:checked ~ .checkmark {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.booking-form .checkbox-container input:checked ~ .checkmark::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.65rem;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.legal-link-inline {
    color: var(--color-white);
    text-decoration: underline;
    font-weight: 600;
    transition: var(--transition-fast);
}

.legal-link-inline:hover {
    color: var(--color-accent);
}

/* Success Card Overlay inside Form Wrapper */
.booking-success-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 20, 36, 0.96);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 100;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.booking-success-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.success-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    padding: 40px;
}

.success-icon-box {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.success-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.success-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    max-width: 340px;
}

/* Media Queries for Product Page Responsiveness */
@media screen and (max-width: 1200px) {
    .configurator-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .configurator-display {
        height: 480px;
    }
}

@media screen and (max-width: 768px) {
    .premium-hero-wrapper {
        padding-bottom: 30px;
    }
    
    .hero-bottom-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    /* On mobile: specs stack vertically with bottom border separators */
    .premium-specs-grid {
        flex-direction: column;
        gap: 0;
    }
    
    .premium-spec-col {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding-right: 0;
        margin-right: 0;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    
    .premium-spec-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .hero-cta-buttons {
        width: 100%;
        flex-direction: row;
    }
    
    .btn-premium-outline,
    .btn-premium-filled {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
    
    .features-detail-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .specs-tables-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ==========================================================================
   MOBILE NAVIGATION DRAWER
   Slide-in panel dari kanan, full responsive untuk layar <= 1200px
   ========================================================================== */

/* Mobile close button: tersembunyi di desktop */
.mobile-nav-close {
    display: none;
}

/* Mobile overlay background */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.mobile-nav-overlay.active {
    display: block;
    opacity: 1;
}

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

    /* Menaikkan z-index header ketika menu mobile aktif agar tombol X/hamburger selalu di depan overlay */
    .main-header.mobile-menu-active {
        z-index: 1200 !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* ── Panel Drawer ─────────────────────────────────────── */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: auto !important; /* Mencegah konflik dengan left: 0 dari media query sebelumnya */
        right: 0 !important;
        width: 100% !important;
        max-width: 360px !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        z-index: 1100 !important;
        transform: translateX(100%) !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 70px !important;
        padding-bottom: 40px !important;
        box-shadow: -6px 0 30px rgba(0, 0, 0, 0.1) !important;
        display: block !important;
        border-top: none !important; /* Menghilangkan garis atas dari media query sebelumnya */
    }

    .navbar.open {
        transform: translateX(0) !important;
    }

    /* ── Tombol Close (X) di dalam drawer ───────────────────── */
    .mobile-nav-close {
        display: none !important; /* Disembunyikan karena mobile-toggle yang di-morph menjadi X di atas laci menggantikan perannya secara dinamis */
    }

    /* ── Daftar Menu ─────────────────────────────────────────── */
    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-item {
        border-bottom: 1px solid #ebebeb;
    }

    .nav-item:first-child {
        border-top: 1px solid #ebebeb;
    }

    /* ── Link Teks ────────────────────────────────────────────── */
    .nav-link {
        display: block !important;
        padding: 17px 28px;
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 500;
        color: #0a2351;
        opacity: 1;
        letter-spacing: 0.1px;
    }

    .nav-link:hover {
        opacity: 0.7;
    }

    /* Hapus garis bawah animasi di mobile */
    .nav-link::after {
        display: none;
    }

    /* ── Row "Models" dengan tombol +/− ─────────────────────── */
    .nav-link-wrapper {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding-right: 20px;
    }

    .nav-link-wrapper .nav-link {
        padding-right: 0;
        flex: 1;
    }

    /* Sembunyikan chevron desktop */
    .chevron-arrow {
        display: none !important;
    }

    /* Tampilkan tombol accordion */
    .mobile-accordion-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: none;
        border: none;
        cursor: pointer;
        color: #0a2351;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    .accordion-icon {
        font-size: 1.4rem;
        font-weight: 300;
        line-height: 1;
        color: #0a2351;
        pointer-events: none;
    }

    /* Tampilkan item "Home" (mobile-only) */
    .mobile-only {
        display: block !important;
    }

    /* ── Accordion Panel Mobil Model ───────────────────────── */
    .mobile-models-accordion {
        display: block !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1);
        background-color: #f6f6f6;
    }

    .mobile-models-accordion.open {
        max-height: 520px;
    }

    .mobile-accordion-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 18px 16px;
    }

    .mobile-accordion-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 14px 8px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        text-decoration: none;
    }

    .mobile-accordion-card:hover,
    .mobile-accordion-card:active {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }

    .mobile-acc-img {
        width: 100%;
        max-height: 80px;
        object-fit: contain;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
    }

    .mobile-acc-name {
        font-family: 'GeelyBold', var(--font-heading);
        font-size: 0.72rem;
        font-weight: 700;
        color: #0a2351;
        letter-spacing: 0.5px;
        text-align: center;
        line-height: 1.35;
        text-transform: uppercase;
    }

    .mobile-acc-subname {
        font-family: 'GeelyInter', var(--font-body);
        font-size: 0.7rem;
        font-weight: 600;
        color: #0a2351;
        text-transform: none;
    }

    /* ── Hamburger → X animasi ────────────────────────────────── */
    .mobile-toggle span {
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.25s ease;
        transform-origin: center;
    }

    .mobile-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .mobile-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Pastikan logo tetap putih kontras saat menu mobile terbuka (karena di bawahnya adalah overlay gelap) */
    .main-header.mobile-menu-active .geely-logo-img {
        filter: none !important;
    }

    /* Sembunyikan desktop models drawer pada mobile */
    .models-drawer {
        display: none !important;
    }

    .drawer-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   14. DETAIL SPECIFICATIONS & FEATURES SECTION FOR PRODUCT DETAIL PAGE
   ========================================================================== */
.car-specifications-section {
    padding: 80px 0 100px 0;
    background-color: #f8f9fa;
    color: #111;
}

.spec-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.spec-section-title {
    font-family: 'geelybold', var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 12px;
    color: #0a2351;
    text-transform: uppercase;
}

.spec-section-subtitle {
    font-size: 1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.spec-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto 50px auto;
    padding: 0 20px;
}

.spec-card {
    background: var(--color-white);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spec-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.spec-card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 20px;
    margin-bottom: 25px;
}

.spec-card-tag {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--color-accent);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.spec-card-price {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    font-weight: 700;
    color: #0a2351;
    margin: 0;
}

.price-variants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.price-variant-item {
    background-color: #f8f9fa;
    border: 1px solid rgba(10, 35, 81, 0.1);
    border-radius: 10px;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price-variant-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 1px;
}

.price-variant-value {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0a2351;
}

.spec-card-title {
    font-family: 'geelybold', var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #0a2351;
    margin: 0;
}

.spec-list-detail {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spec-list-detail li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.spec-list-detail li:last-child {
    border-bottom: none;
}

.spec-detail-label {
    font-weight: 500;
    color: #555;
    font-size: 0.95rem;
}

.spec-detail-value {
    font-family: 'geelybold', var(--font-heading);
    font-weight: 700;
    color: #0a2351;
    font-size: 0.95rem;
}

.features-detail-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.feature-icon-check {
    color: #25d366;
    font-size: 1.25rem;
    margin-top: 2px;
}

.feature-detail-text {
    font-size: 0.98rem;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.spec-cta-row {
    text-align: center;
    margin-top: 40px;
}

.spec-cta-btn {
    text-transform: none;
    font-weight: 500;
    font-size: 1.05rem;
    padding: 15px 35px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 82, 204, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Responsive grid for mobile */
@media screen and (max-width: 768px) {
    .spec-details-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .spec-card {
        padding: 30px;
    }
    
    .spec-list-detail li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .spec-detail-value {
        align-self: flex-end;
    }

    .price-variants-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}