/* ============================================
   CHERY OMAN - Custom Styles
   Aligned with Chery International & UAE UI/UX
   ============================================ */

/* Preloader */
#preloader {
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-logo {
    animation: preloaderPulse 1.8s ease-in-out infinite;
}

@keyframes preloaderPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.97); }
}

.preloader-bar {
    width: 160px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
}

.preloader-bar-fill {
    height: 100%;
    width: 0%;
    background: #A4896C;
    border-radius: 2px;
    animation: preloaderFill 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes preloaderFill {
    0%   { width: 0%; }
    60%  { width: 75%; }
    100% { width: 100%; }
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #A4896C;
}

/* Selection */
::selection {
    background: rgba(164, 137, 108, 0.3);
    color: #fff;
}

/* Hero Section Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(164, 137, 108, 0.3); }
    50% { box-shadow: 0 0 40px rgba(164, 137, 108, 0.6); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes counter {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up { animation: fadeInUp 0.8s ease-out forwards; }
.animate-fade-down { animation: fadeInDown 0.8s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.6s ease-out forwards; }
.animate-slide-left { animation: slideInLeft 0.8s ease-out forwards; }
.animate-slide-right { animation: slideInRight 0.8s ease-out forwards; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }

/* Delay utility classes */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* Hero Swiper */
.hero-swiper {
    width: 100%;
    height: 100vh;
    min-height: 600px;
    max-height: 900px;
}

.hero-swiper .swiper-slide {
    overflow: hidden;
}

.hero-swiper .swiper-pagination-bullet {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
    background: #A4896C;
    width: 60px;
}

/* Model Card Hover */
.model-card {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.model-card:hover {
    transform: translateY(-8px);
}

.model-card:hover .model-card-image {
    transform: scale(1.05);
}

.model-card .model-card-image {
    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Spec Counter Animation */
.spec-number {
    font-variant-numeric: tabular-nums;
}

/* Section Divider */
.section-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #A4896C, #C4B09A);
    border-radius: 2px;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #fff 0%, #A4896C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Effect */
.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-dark {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Feature Card */
.feature-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #A4896C, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}

/* News Card */
.news-card {
    transition: all 0.4s ease;
}

.news-card:hover {
    transform: translateY(-6px);
}

.news-card:hover .news-card-image {
    transform: scale(1.08);
}

.news-card .news-card-image {
    transition: transform 0.7s ease;
}

/* Form Styles */
.form-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 18px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 100%;
}

.form-input:focus {
    outline: none;
    border-color: #A4896C;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(164, 137, 108, 0.15);
}

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

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b0b0b0;
    margin-bottom: 6px;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b0b0b0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Technology Section Parallax */
.parallax-bg {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

@media (max-width: 768px) {
    .parallax-bg {
        background-attachment: scroll;
    }
}

/* Swiper Models Carousel */
.models-swiper .swiper-slide {
    width: auto;
    height: auto;
}

.models-swiper .swiper-button-next,
.models-swiper .swiper-button-prev {
    color: #fff;
    background: rgba(164, 137, 108, 0.8);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.models-swiper .swiper-button-next:hover,
.models-swiper .swiper-button-prev:hover {
    background: #A4896C;
}

.models-swiper .swiper-button-next::after,
.models-swiper .swiper-button-prev::after {
    font-size: 16px;
    font-weight: bold;
}

/* Page Header Breadcrumb */
.page-header {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 3rem;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(transparent, #0a0a0a);
}

/* Tabs */
.tab-btn {
    position: relative;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #b0b0b0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #A4896C;
    transition: width 0.3s ease;
}

.tab-btn:hover,
.tab-btn.active {
    color: #fff;
}

.tab-btn.active::after {
    width: 100%;
}

/* Smooth header transition */
.header-scrolled {
    background: rgba(10, 10, 10, 0.98) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Vehicle Detail Page Sections */
.vehicle-section {
    position: relative;
    overflow: hidden;
}

.vehicle-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(164, 137, 108, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* Stat circle */
.stat-circle {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-circle::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(#A4896C, transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.stat-circle:hover::before {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .hero-swiper {
        min-height: 500px;
        max-height: 700px;
    }
}

/* ── Mega Menu (matches cheryinternational.com) ─────────────── */
#mega-menu {
    --mm-u: calc(100vw / 19.2);
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1),
                opacity    0.3s ease,
                visibility 0.3s ease;
}

.mm-panel {
    height: 100vh;
    align-items: stretch;
}

/* COL 1 — brand logo rail */
.mm-col-left {
    width: 20%;
    background-image: url('../vendor/megamenu/bg.png');
    background-repeat: repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(0.77 * var(--mm-u));
}

.mm-cat-btn {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: calc(0.9 * var(--mm-u));
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 0;
    transition: all 0.3s;
}
.mm-cat-btn:last-child {
    border-bottom: 0;
}

.mm-cat-logo {
    width: calc(1.54 * var(--mm-u));
    opacity: 0.5;
    transition: opacity 0.3s;
}
.mm-cat-logo-tiggo {
    width: calc(1.4 * var(--mm-u));
}

.mm-cat-btn.active .mm-cat-logo {
    opacity: 1;
}

/* COL 2 — model name list */
.mm-col-center {
    width: 20%;
    background-image: linear-gradient(to bottom, #9d9790, #c1bbb6);
    padding: calc(0.77 * var(--mm-u)) calc(0.55 * var(--mm-u));
    z-index: 20;
    position: relative;
    overflow-y: auto;
}

.mm-model-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: calc(0.38 * var(--mm-u));
    font-size: calc(0.2 * var(--mm-u));
    opacity: 0.6;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
    text-decoration: none;
    transition: opacity 0.2s;
}
.mm-model-btn:last-child {
    margin-bottom: 0;
}
.mm-model-btn:hover {
    opacity: 0.85;
}
.mm-model-btn.active {
    opacity: 1;
    font-weight: 700;
}

/* COL 3 — car preview panel */
.mm-col-right {
    width: 60%;
    background-size: 100% 100%;
    background-image: url('../vendor/megamenu/bg-car.jpg');
    position: relative;
    overflow: hidden;
}

.mm-close-btn {
    position: absolute;
    right: calc(0.66 * var(--mm-u));
    top: calc(0.66 * var(--mm-u));
    display: flex;
    gap: calc(0.1 * var(--mm-u));
    align-items: center;
    cursor: pointer;
    transform: scale(1);
    transition: all 0.3s ease-in-out;
    background: none;
    border: none;
    z-index: 30;
}
.mm-close-btn img {
    width: calc(0.2 * var(--mm-u));
    height: calc(0.2 * var(--mm-u));
}
.mm-close-btn span {
    font-size: calc(0.24 * var(--mm-u));
    color: #444;
    font-family: 'Poppins', sans-serif;
}
.mm-close-btn:hover {
    transform: scale(1.1);
}

/* Preview card */
.mm-preview-card {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: calc(0.9 * var(--mm-u)) calc(0.66 * var(--mm-u)) calc(1.0 * var(--mm-u)) calc(0.8 * var(--mm-u));
    will-change: opacity, transform;
    height: 100%;
    box-sizing: border-box;
}
.mm-preview-card.active {
    display: flex;
}

/* Watermark logo */
.mm-watermark {
    position: absolute;
    width: 90%;
    left: 50%;
    top: calc(-0.5 * var(--mm-u));
    opacity: 0.06;
    transform: translateX(-50%);
    pointer-events: none;
}
.mm-watermark img {
    width: 100%;
}

/* Car image */
.mm-car-box {
    width: 100%;
    position: relative;
    z-index: 2;
}
.mm-car-img {
    width: 82%;
    position: relative;
    z-index: 2;
    left: 10%;
    top: calc(0.4 * var(--mm-u));
    transition: transform 0.6s cubic-bezier(0.25,0.8,0.25,1), opacity 0.5s ease;
}
.mm-preview-card.active .mm-car-img {
    animation: mmCarSlide 0.6s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
@keyframes mmCarSlide {
    from { opacity: 0; transform: translateX(40px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Specs bar */
.mm-detail-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: calc(1.2 * var(--mm-u));
    position: relative;
    z-index: 2;
}
.mm-detail-left {
    display: flex;
    align-items: center;
}
.mm-data-box {
    margin-right: calc(0.5 * var(--mm-u));
}
.mm-data-label {
    font-size: calc(0.13 * var(--mm-u));
    color: #888;
    font-family: 'Poppins', sans-serif;
}
.mm-data-value {
    font-size: calc(0.49 * var(--mm-u));
    display: flex;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #333;
}
#mega-menu .mm-data-value i {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 700;
    width: calc(1.16 * var(--mm-u));
}
.mm-data-value span {
    font-size: calc(0.16 * var(--mm-u));
    padding-left: calc(0.1 * var(--mm-u));
    padding-top: calc(0.2 * var(--mm-u));
    color: #999;
    font-weight: 400;
}

/* Explore button */
.mm-explore-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(3.4 * var(--mm-u));
    height: calc(0.7 * var(--mm-u));
    border-radius: calc(0.05 * var(--mm-u));
    font-size: calc(0.19 * var(--mm-u));
    letter-spacing: calc(0.02 * var(--mm-u));
    background-color: rgba(164, 137, 108, 0.8);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    transition: all 0.3s;
}
.mm-explore-btn:hover {
    background-color: #a4896c;
}

/* ── Video Ping Box ──────────────────────── */
.video-ping-box [data-vpb-anim] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.video-ping-box.vpb-visible [data-vpb-anim] {
    opacity: 1;
    transform: translateY(0);
}
.video-ping-box.vpb-visible [data-vpb-anim]:nth-child(1) { transition-delay: 0s; }
.video-ping-box.vpb-visible [data-vpb-anim]:nth-child(2) { transition-delay: 0.1s; }
.video-ping-box.vpb-visible [data-vpb-anim]:nth-child(3) { transition-delay: 0.2s; }
.video-ping-box.vpb-visible [data-vpb-anim]:nth-child(4) { transition-delay: 0.3s; }

#vpb-modal.vpb-open {
    opacity: 1;
    visibility: visible;
}

/* ── Section 2 White Theme ────────────────── */
.s2-tab-btn.active .s2-tab-indicator {
    opacity: 1;
}
.s2-tab-btn.active .s2-tab-name {
    color: #111;
    font-weight: 700;
}
.s2-tab-btn.active .s2-arrow {
    color: #A4896C;
}
.s2-tab-btn:hover .s2-tab-indicator {
    opacity: 0.4;
}

.s2-panel {
    will-change: opacity, transform;
}

.s2-car-img {
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));
    transform: translateX(20px);
    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.5s ease;
}
.s2-panel.opacity-100 .s2-car-img {
    transform: translateX(0);
}

@media (max-width: 1024px) {
    #s2-tabs {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }
    .s2-tab-btn {
        display: inline-flex;
        width: auto;
        padding: 8px 16px;
    }
    #s2-tab-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* ── RTL (Arabic) Support ────────────────────── */
[dir="rtl"] body {
    font-family: 'Cairo', system-ui, sans-serif;
}

[dir="rtl"] .font-display {
    font-family: 'Cairo', system-ui, sans-serif;
}

/* Flip flex rows for RTL */
[dir="rtl"] .flex-row-rtl {
    flex-direction: row-reverse;
}

/* Nav - reverse float buttons side */
[dir="rtl"] #floating-actions {
    right: auto;
    left: 1rem;
}

/* Mega menu RTL */
[dir="rtl"] #mega-menu {
    direction: rtl;
}
[dir="rtl"] .mm-panel {
    flex-direction: row-reverse;
}
[dir="rtl"] .mm-model-btn {
    text-align: right;
}
[dir="rtl"] .mm-close-btn {
    right: auto;
    left: calc(0.66 * var(--mm-u));
}
[dir="rtl"] .mm-car-img {
    left: auto;
    right: 10%;
}
[dir="rtl"] .mm-preview-card {
    direction: rtl;
}
[dir="rtl"] .mm-data-value span {
    padding-left: 0;
    padding-right: calc(0.1 * var(--mm-u));
}
[dir="rtl"] .mm-data-box {
    margin-right: 0;
    margin-left: calc(0.5 * var(--mm-u));
}

/* Section 2 tab border */
[dir="rtl"] #s2-tabs {
    border-right: none;
    border-left: 1px solid #e8e0d8;
}

[dir="rtl"] .s2-tab-btn {
    border-right: none;
    border-left: 3px solid transparent;
    text-align: right;
}

[dir="rtl"] .s2-tab-btn.s2-active {
    border-left-color: #A4896C;
}


/* Ensure Arabic text renders properly */
[dir="rtl"] p,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] a,
[dir="rtl"] button,
[dir="rtl"] span,
[dir="rtl"] li {
    font-family: 'Cairo', system-ui, sans-serif;
}

/* Header topbar RTL alignment */
[dir="rtl"] #main-header .flex.items-center.justify-between {
    flex-direction: row-reverse;
}

/* Tracking/letter-spacing — reduce for Arabic */
[dir="rtl"] .tracking-wider,
[dir="rtl"] .tracking-widest,
[dir="rtl"] [class*="tracking-["] {
    letter-spacing: 0;
}

/* Footer grid RTL */
[dir="rtl"] footer .grid {
    direction: rtl;
}

/* Breadcrumb separator — flip chevron for RTL */
[dir="rtl"] nav[aria-label] ol li svg {
    transform: scaleX(-1);
}

/* Arrow icons in CTAs — flip for RTL */
[dir="rtl"] .inline-flex svg:last-child,
[dir="rtl"] a.inline-flex > svg {
    transform: scaleX(-1);
}

/* Form inputs RTL text alignment */
[dir="rtl"] .form-input,
[dir="rtl"] .form-select,
[dir="rtl"] textarea {
    text-align: right;
}

/* Form labels RTL */
[dir="rtl"] .form-label {
    text-align: right;
}

/* Contact info flex RTL */
[dir="rtl"] .glass .flex.gap-4 {
    flex-direction: row-reverse;
}

/* Model nav RTL scroll */
[dir="rtl"] #model-nav {
    direction: rtl;
}

/* Model card text alignment */
[dir="rtl"] .model-card {
    text-align: right;
}

/* Spec labels in model cards */
[dir="rtl"] .spec-number {
    direction: ltr;
    unicode-bidi: embed;
}

/* Swiper arrows RTL flip */
[dir="rtl"] .swiper-button-next::after,
[dir="rtl"] .swiper-button-prev::after {
    transform: scaleX(-1);
}

/* Tab buttons RTL */
[dir="rtl"] [role="tablist"] {
    flex-direction: row-reverse;
}

/* News card text */
[dir="rtl"] .news-card {
    text-align: right;
}

/* Feature card text */
[dir="rtl"] .feature-card {
    text-align: right;
}

/* ── Vehicle Detail Page ────────────────── */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.model-nav-tab {
    position: relative;
}
.model-nav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #A4896C;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}
.model-nav-tab:hover::after,
.model-nav-tab.active::after {
    width: 100%;
}

.color-swatch {
    cursor: pointer;
}
.color-swatch:hover span:first-child {
    transform: scale(1.15);
}

/* ── car_wg_box Design Showcase (Chery International replica) ── */
.car_wg_box {
    position: relative;
    height: 200vh;
    width: 100%;
}
.car_wg {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    background: rgb(219, 220, 215);
}
.car_wg_bk {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.car_wg_main {
    transition: all 1s;
}
.car_wg_top {
    position: absolute;
    left: clamp(40px, 5.2vw, 100px);
    top: clamp(80px, 6.25vw, 120px);
    opacity: 1;
    filter: blur(0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    transition-duration: 1s;
    color: rgb(98, 82, 59);
    z-index: 5;
}
.cwt_t1 {
    font-size: clamp(12px, 1.04vw, 20px);
    font-weight: 700;
    color: rgba(98, 82, 59, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.cwt_t2 {
    font-size: clamp(28px, 2.6vw, 50px);
    line-height: 1;
    font-weight: 800;
    margin-top: 15px;
    text-transform: uppercase;
}
.cwt_t3 {
    font-size: clamp(12px, 0.94vw, 18px);
    line-height: 2.1;
    margin-top: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cwt_t4 {
    font-size: clamp(16px, 1.25vw, 24px);
    margin-top: 20px;
    line-height: 2;
    letter-spacing: 0.04em;
    font-weight: 800;
}

/* Hotspot buttons */
.flicker_btn {
    position: absolute;
    z-index: 10;
}
.hotspot-point {
    display: block;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform: scale(1);
    border: 1px solid transparent;
    transition: border 300ms;
    position: relative;
}
.hotspot-point:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    transform: translate(-50%, -50%);
    transition: transform 300ms, background 300ms;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #fff;
}
.hotspot-pulsing:before {
    width: 24px;
    height: 24px;
}
.hotspot-pulsing::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    margin-left: -13px;
    transform-origin: center;
    border-radius: 50%;
    box-sizing: border-box;
    animation: hotspotPulseAnim 2s infinite;
    border: 2px solid #fff;
    color: #fff;
}
.flicker_btn:hover .hotspot-pulsing::after,
.flicker_btn.active .hotspot-pulsing::after {
    background-color: transparent;
    animation: hotspotPulseHover 2s infinite;
}
.flicker_btn:hover .hotspot-point:before,
.flicker_btn.active .hotspot-point:before {
    background-color: transparent;
    border-color: #fff;
}

@keyframes hotspotPulseAnim {
    0%   { opacity: 0; border-width: 2px; transform: scale(0.5); background-color: rgba(255,255,255,.8); }
    50%  { opacity: 1; transform: scale(0.8); border-width: 2px; background-color: rgba(255,255,255,.8); }
    100% { opacity: 0; border-width: 1px; background-color: rgba(255,255,255,.1); transform: scale(2.5); }
}
@keyframes hotspotPulseHover {
    0%   { opacity: 0; border-width: 2px; transform: scale(0.5); background-color: #fff; }
    50%  { opacity: 1; transform: scale(0.8); border-width: 2px; background-color: #fff; }
    100% { opacity: 0; border-width: 1px; background-color: #fff; transform: scale(2.5); }
}

/* Slide-in popup panel */
.car_wg_pop {
    position: absolute;
    top: 0;
    z-index: 10;
    height: 100vh;
    width: 50%;
    right: -55vw;
    transition: all 1s;
    background-color: rgb(219, 220, 215);
    color: rgb(98, 82, 59);
}
.car_wg_pop_title {
    position: absolute;
    top: clamp(80px, 6.25vw, 120px);
    left: clamp(40px, 4.17vw, 80px);
    display: flex;
    font-size: 16px;
    font-weight: 700;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.cwpt_line {
    background: rgb(98, 82, 59);
    width: clamp(60px, 7.8vw, 150px);
    height: 1px;
    margin: 0 20px;
}
.wg_pop_close {
    position: absolute;
    left: -25px;
    top: 55%;
    width: 50px;
    height: 50px;
    background-color: #fff;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 15;
    color: rgb(98, 82, 59);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.wg_pop_close:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.wg_pop_text {
    padding: clamp(120px, 9.4vw, 180px) clamp(40px, 4.17vw, 80px) 0;
    position: relative;
}
.wpt_min {
    position: absolute;
    width: calc(100% - clamp(80px, 8.3vw, 160px));
    left: clamp(40px, 4.17vw, 80px);
    top: clamp(120px, 9.4vw, 180px);
    opacity: 0;
    transition: all 1s;
}
.wpt_min:first-child {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
}
.wpt_min.active {
    opacity: 1;
}
.wpt_min > div:first-child {
    font-size: clamp(20px, 1.56vw, 30px);
    line-height: 1;
    font-weight: 700;
}
.wpt_min .con {
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: 1.6;
    margin-top: 20px;
}
.wg_pop_img {
    position: relative;
    width: calc(100% - clamp(80px, 8.3vw, 160px));
    margin-left: clamp(40px, 4.17vw, 80px);
    margin-top: clamp(30px, 3.13vw, 60px);
}
.wg_pop_img img {
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 1s;
    border-radius: 4px;
}
.wg_pop_img img:first-child {
    position: relative;
}
.wg_pop_img img.active {
    opacity: 1;
}

/* Open state transitions */
.car_wg.open .car_wg_top {
    opacity: 0;
    filter: blur(60px);
    transform: scale3d(1, 0.1, 1) translate3d(0, 50%, 0);
    transform-origin: bottom left;
    transition-property: filter, opacity, transform;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car_wg.open .car_wg_bottom {
    opacity: 0;
    filter: blur(60px);
    transform: scale3d(1, 0.1, 1) translate3d(0, 50%, 0);
    transform-origin: bottom left;
    transition-property: filter, opacity, transform;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car_wg.open .car_wg_main {
    transform: translateX(-40%);
}
.car_wg.open .car_wg_pop {
    right: 0;
}

/* Dimension bar */
.car_wg_bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.1);
    transition-duration: 1s;
}

/* Mobile features swiper */
.car_wg_pop_mb {
    display: none;
}
.car_mb_sw_text {
    margin-top: 16px;
    color: rgb(98, 82, 59);
}
.car_mb_sw_text > div:first-child {
    font-size: 18px;
    font-weight: 700;
}
.car_mb_sw_text .con {
    font-size: 14px;
    margin-top: 8px;
    line-height: 1.6;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .car_wg_box { height: auto; }
    .car_wg { position: relative; height: auto; }
    .car_wg_bk { height: auto; min-height: 50vh; }
    .car_wg_top { left: 24px; top: 60px; }
    .cwt_t2 { font-size: 24px; line-height: 1.15; }
    .cwt_t3 { font-size: 12px; line-height: 1.7; padding-right: 20px; margin-top: 12px; }
    .cwt_t4 { font-size: 18px; line-height: 1.4; margin-top: 12px; }
    .flicker_btn { display: none !important; }
    .car_wg_pop { display: none !important; }
    .car_wg_pop_mb {
        position: relative;
        display: block;
        padding: 24px;
        background-color: rgb(219, 220, 215);
    }
    .car_wg_pop_mb .swiper-slide { background-color: rgb(219, 220, 215); }
    .car_wg_pop_mb .swiper-slide img { width: 100%; border-radius: 4px; }
    .car_wg_pop_mb .swiper-pagination-bullet {
        opacity: 1;
        border-radius: 0;
        width: 30px;
        height: 2px;
        margin: 0 4px !important;
        background: rgba(98, 82, 59, 0.3);
    }
    .car_wg_pop_mb .swiper-pagination-bullet-active {
        background-color: rgb(97, 81, 57);
    }
}

/* ── ci-unit: Full-viewport sticky-scroll section banners ── */
.ci-unit {
    position: relative;
    height: 200vh;
}
.ci-unit-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.ci-unit-bg {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}
.ci-unit-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}
.ci-unit-title {
    position: absolute;
    bottom: clamp(60px, 5.2vw, 100px);
    left: clamp(24px, 2.6vw, 50px);
    color: #fff;
    transition: all 1s;
    z-index: 2;
}
.ci-unit-label {
    opacity: 0.6;
    font-size: clamp(12px, 1.04vw, 20px);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}
.ci-unit-heading {
    font-size: clamp(28px, 2.6vw, 50px);
    line-height: 1;
    margin-top: 15px;
    text-transform: uppercase;
    font-weight: 800;
}
.ci-unit-specs {
    position: absolute;
    bottom: -30px;
    left: clamp(24px, 2.6vw, 50px);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - clamp(48px, 5.2vw, 100px));
    opacity: 0;
    transition: all 1s;
    z-index: 2;
}
.ci-unit-spec {
    margin-right: clamp(30px, 3.1vw, 60px);
    margin-bottom: 10px;
}
.ci-unit-spec-label {
    font-size: clamp(12px, 1.04vw, 20px);
    opacity: 0.8;
}
.ci-unit-spec-value {
    font-size: clamp(24px, 2.6vw, 50px);
    line-height: 1;
    margin-top: 12px;
    font-weight: 700;
}
.ci-unit.ci-unit-active .ci-unit-title {
    bottom: clamp(140px, 11.5vw, 220px);
    opacity: 0;
}
.ci-unit.ci-unit-active .ci-unit-specs {
    bottom: clamp(50px, 5.2vw, 100px);
    opacity: 1;
}

@media (max-width: 768px) {
    .ci-unit { height: auto; }
    .ci-unit-inner { position: relative; height: auto; min-height: 60vh; }
    .ci-unit-bg { height: auto; min-height: 60vh; }
    .ci-unit-title { bottom: auto; top: 40px; left: 24px; }
    .ci-unit-heading { font-size: 24px; }
    .ci-unit-specs {
        position: relative;
        bottom: auto; left: auto;
        opacity: 1;
        padding: 20px 24px;
        width: 100%;
        gap: 16px;
        background: rgba(0,0,0,0.7);
    }
    .ci-unit-spec { width: 45%; margin-right: 0; }
    .ci-unit-spec-value { font-size: 22px; }
}

/* ── ci-interior-wide: Ultra-wide cocooning cockpit (after design hotspots) ── */
.ci-interior-wide {
    background-color: rgb(219, 220, 215);
    padding: clamp(40px, 4vw, 80px) clamp(20px, 5.2vw, 80px) clamp(30px, 3vw, 60px);
    color: rgb(98, 82, 59);
}
.ci-interior-wide-title1 {
    font-size: clamp(12px, 1.04vw, 20px);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 12px;
}
.ci-interior-wide-title2 {
    font-size: clamp(22px, 2.2vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: clamp(24px, 2.5vw, 48px);
}
.ci-interior-wide-grid {
    display: flex;
    gap: 1.8%;
    align-items: flex-start;
}
.ci-interior-wide-primary {
    flex: 1.15;
    position: relative;
    display: flex;
    flex-direction: column;
}
.ci-interior-wide-stack {
    flex: 0.85;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.04vw, 20px);
}
.ci-interior-wide-secondary {
    position: relative;
    display: flex;
    flex-direction: column;
}
.ci-interior-wide-caption {
    display: block;
    margin-top: 10px;
    font-size: clamp(10px, 0.78vw, 14px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .ci-interior-wide-grid {
        flex-direction: column;
    }
    .ci-interior-wide-primary,
    .ci-interior-wide-stack {
        flex: 1;
        width: 100%;
    }
}

.comf-text .comf-tags.comf-tags-secondary {
    margin-top: clamp(8px, 0.8vw, 14px);
    font-size: clamp(10px, 0.94vw, 18px);
}

/* ── ci-comfortable: Warm beige feature grid (exact comfortable replica) ── */
.ci-comfortable {
    background-color: rgb(219, 220, 215);
    padding: 0 clamp(20px, 5.2vw, 80px) clamp(20px, 5.2vw, 80px);
    color: rgb(98, 82, 59);
}
.ci-comfortable.ci-comfortable-padtop {
    padding-top: clamp(20px, 2.6vw, 50px);
}
.ci-comfortable .ci-com-title {
    font-size: clamp(20px, 1.46vw, 28px);
    font-weight: 700;
    color: rgb(98, 82, 59);
    margin-bottom: clamp(10px, 0.78vw, 15px);
    text-transform: uppercase;
}

/* comf_box: Power section 50/50 split layout */
.comf-box {
    display: flex;
    gap: 1.8%;
    margin-top: clamp(10px, 1.04vw, 20px);
}
.comf-box img { width: 100%; display: block; }
.comf-left { width: 49.1%; position: relative; }
.comf-right { width: 49.1%; position: relative; }
.comf-right-top { position: relative; }
.comf-right-bot { position: relative; margin-top: clamp(12px, 1.7vw, 26px); }

.comf-text {
    position: absolute;
    z-index: 2;
}
.comf-text-tl { top: clamp(20px, 3.6vw, 70px); left: clamp(16px, 4.2vw, 80px); }
.comf-text-tr { top: clamp(20px, 3.6vw, 70px); right: clamp(16px, 4.2vw, 80px); text-align: right; }
.comf-text-br { top: clamp(16px, 2.6vw, 50px); right: clamp(16px, 2.6vw, 50px); text-align: right; }

.comf-text .comf-title {
    color: rgb(190, 135, 81);
    font-size: clamp(14px, 1.2vw, 23px);
    font-weight: 700;
}
.comf-text .comf-desc {
    font-size: clamp(11px, 0.83vw, 16px);
    color: rgb(98, 82, 59);
    margin-top: 6px;
    line-height: 1.5;
}
.comf-stat {
    color: rgb(98, 82, 59);
    font-size: clamp(28px, 2.5vw, 48px);
    font-weight: 700;
    margin-top: clamp(12px, 1.3vw, 25px);
    position: relative;
    display: inline-block;
}
.comf-stat::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgb(98, 82, 59);
    margin-top: 4px;
}
.comf-stat-label {
    font-size: clamp(11px, 0.83vw, 16px);
    font-weight: 600;
    color: rgb(98, 82, 59);
    margin-top: clamp(8px, 1.04vw, 20px);
    text-transform: uppercase;
}
.comf-stat-row {
    display: flex;
    gap: clamp(16px, 2.1vw, 40px);
    margin-top: clamp(12px, 1.3vw, 25px);
}
.comf-stat-row .comf-stat { margin-top: 0; }
.comf-text .comf-tags {
    margin-top: clamp(16px, 2.1vw, 40px);
    color: rgb(98, 82, 59);
    font-size: clamp(11px, 1.04vw, 20px);
    font-weight: 700;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .comf-box { flex-direction: column; gap: 16px; }
    .comf-left, .comf-right { width: 100%; }
    .comf-text-tl { top: 16px; left: 16px; }
    .comf-text-tr { top: 16px; right: 16px; }
    .comf-text-br { top: 16px; right: 16px; }
}

/* comfortable-box: 3-image grid (1 large left + 2 stacked right) */
.comfortable-box {
    display: flex;
    gap: 1.8%;
    margin-top: clamp(10px, 1.56vw, 30px);
}
.comfortable-box img { width: 100%; display: block; }
.comfortable-r { width: 49.1%; position: relative; }
.comfortable-l { width: 49.1%; }
.comfortable-l-top { position: relative; }
.comfortable-l-bot { position: relative; margin-top: clamp(12px, 1.7vw, 26px); }
.comfortable-r img, .comfortable-l-top img, .comfortable-l-bot img {
    border-radius: 4px;
}

@media (max-width: 768px) {
    .comfortable-box { flex-direction: column; gap: 16px; }
    .comfortable-r, .comfortable-l { width: 100%; }
}

/* ── ci-tab-section: Feature carousel (dark brown / light) ── */
.ci-tab-section {
    padding: clamp(40px, 5.2vw, 100px);
    background-color: rgb(111, 82, 68);
    color: #fff;
}
.ci-tab-section.ci-tab-light {
    background-color: rgb(219, 220, 215);
    color: rgb(98, 82, 59);
}
.ci-tab-title {
    font-size: clamp(18px, 1.46vw, 28px);
    font-weight: 600;
    margin-bottom: clamp(16px, 1.04vw, 20px);
    text-transform: uppercase;
}
.ci-tab-section.ci-tab-light .ci-tab-title {
    color: rgb(98, 82, 59);
}
.ci-tab-swiper .swiper-slide {
    overflow: hidden;
    border-radius: 4px;
}
.ci-tab-swiper .swiper-slide img {
    width: 100%;
    display: block;
    border-radius: 4px;
}
.ci-tab-slide-text {
    margin-top: 12px;
}
.ci-tab-slide-heading {
    font-size: clamp(14px, 1.04vw, 20px);
    font-weight: 700;
}
.ci-tab-slide-desc {
    font-size: clamp(12px, 0.83vw, 16px);
    margin-top: 6px;
    opacity: 0.8;
    line-height: 1.5;
}
.ci-tab-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: clamp(16px, 1.56vw, 30px);
}
.ci-tab-progress {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}
.ci-tab-section.ci-tab-light .ci-tab-progress {
    background: rgba(98, 82, 59, 0.2);
}
.ci-tab-progress .swiper-pagination-progressbar {
    background: #fff;
}
.ci-tab-section.ci-tab-light .ci-tab-progress .swiper-pagination-progressbar {
    background: rgb(98, 82, 59);
}
.ci-tab-arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;
    background: transparent;
    flex-shrink: 0;
}
.ci-tab-arrow:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
}
.ci-tab-section.ci-tab-light .ci-tab-arrow {
    border-color: rgba(98, 82, 59, 0.3);
    color: rgb(98, 82, 59);
}
.ci-tab-section.ci-tab-light .ci-tab-arrow:hover {
    border-color: rgb(98, 82, 59);
    background: rgba(98, 82, 59, 0.1);
}
.ci-tab-arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

/* Tab thumbnails row (comfort tab_change color_1 pattern) */
.ci-tab-thumbs {
    display: flex;
    gap: clamp(8px, 0.52vw, 10px);
    margin-top: clamp(12px, 1.04vw, 20px);
}
.ci-tab-thumb {
    width: clamp(60px, 5.2vw, 100px);
    height: clamp(40px, 3.4vw, 65px);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.4s;
    border: 2px solid transparent;
}
.ci-tab-thumb.active {
    opacity: 1;
    border-color: rgb(190, 135, 81);
}
.ci-tab-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ci-tab-text-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: clamp(12px, 1.04vw, 20px);
}
.ci-tab-text-tab {
    padding: clamp(8px, 0.52vw, 10px) 0;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 1px solid rgba(98, 82, 59, 0.15);
}
.ci-tab-text-tab .ci-tab-tt-title {
    font-size: clamp(13px, 0.94vw, 18px);
    font-weight: 700;
    color: rgba(98, 82, 59, 0.5);
    transition: color 0.3s;
}
.ci-tab-text-tab .ci-tab-tt-desc {
    font-size: clamp(11px, 0.73vw, 14px);
    color: rgba(98, 82, 59, 0.4);
    margin-top: 4px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s;
    line-height: 1.5;
}
.ci-tab-text-tab.active .ci-tab-tt-title {
    color: rgb(98, 82, 59);
}
.ci-tab-text-tab.active .ci-tab-tt-desc {
    max-height: 60px;
    color: rgba(98, 82, 59, 0.7);
}
.ci-tab-section.ci-tab-light .ci-tab-text-tab {
    border-bottom-color: rgba(98, 82, 59, 0.15);
}

/* safe_text_2: Dark variant for intelligent ADAS features */
.ci-safe-text.ci-safe-text-dark {
    background-color: rgb(111, 82, 68);
    padding-top: 0;
}
.ci-safe-text.ci-safe-text-dark .ci-safe-text-body {
    background: linear-gradient(to right, rgb(172, 137, 117), rgb(154, 112, 88));
    color: #fff;
}
.ci-safe-text.ci-safe-text-dark .ci-safe-text-label { color: rgba(255,255,255,0.7); }
.ci-safe-text.ci-safe-text-dark .ci-safe-text-heading { color: #fff; }
.ci-safe-text.ci-safe-text-dark .ci-safe-text-desc { color: rgba(255,255,255,0.85); }

@media (max-width: 768px) {
    .ci-tab-section { padding: clamp(24px, 5vw, 40px); }
    .ci-tab-thumbs { display: none; }
}

/* ── ci-safety-intro: Full-width safety intro banner ── */
.ci-safety-intro {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.ci-safety-intro img {
    width: 100%;
    display: block;
}
.ci-safety-intro-text {
    position: absolute;
    bottom: clamp(40px, 5.2vw, 100px);
    left: clamp(24px, 2.6vw, 50px);
    color: #fff;
    font-weight: 700;
    z-index: 2;
}
.ci-safety-intro-label {
    font-size: clamp(14px, 1.04vw, 20px);
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}
.ci-safety-intro-heading {
    font-size: clamp(28px, 2.86vw, 55px);
    line-height: 1.1;
    margin-top: 15px;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease 0.2s;
    max-width: 70%;
}
.ci-safety-intro-desc {
    font-size: clamp(12px, 1.04vw, 20px);
    line-height: 1.8;
    margin-top: 20px;
    max-width: 55%;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease 0.4s;
}
.ci-safety-intro.ci-visible .ci-safety-intro-label,
.ci-safety-intro.ci-visible .ci-safety-intro-heading,
.ci-safety-intro.ci-visible .ci-safety-intro-desc {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .ci-safety-intro-text { bottom: 24px; left: 20px; }
    .ci-safety-intro-heading { max-width: 90%; font-size: 24px; }
    .ci-safety-intro-desc { max-width: 90%; }
}

/* ── ci-safe-text: Side-by-side feature cards ── */
.ci-safe-text {
    background-color: rgb(219, 220, 215);
    padding: clamp(24px, 2.6vw, 50px);
}
.ci-safe-text-item {
    display: flex;
    justify-content: space-between;
    gap: 0;
}
.ci-safe-text-item + .ci-safe-text-item {
    margin-top: 0;
}
.ci-safe-text-item.ci-reverse {
    flex-direction: row-reverse;
}
.ci-safe-text-img {
    width: 50%;
    overflow: hidden;
    border-radius: 4px;
}
.ci-safe-text-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.ci-safe-text-img:hover img {
    transform: scale(1.03);
}
.ci-safe-text-body {
    width: 50%;
    padding: clamp(24px, 2.6vw, 50px) clamp(20px, 2.1vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, rgb(219, 220, 215), rgb(205, 206, 200));
}
.ci-safe-text-item.ci-dark-body .ci-safe-text-body {
    background: linear-gradient(to right, rgb(172, 137, 117), rgb(154, 112, 88));
    color: #fff;
}
.ci-safe-text-label {
    font-size: clamp(11px, 0.83vw, 16px);
    font-weight: 700;
    text-transform: uppercase;
    color: rgb(98, 82, 59);
    margin-bottom: 8px;
}
.ci-safe-text-item.ci-dark-body .ci-safe-text-label {
    color: rgba(255,255,255,0.7);
}
.ci-safe-text-lead {
    font-size: clamp(13px, 1vw, 17px);
    font-weight: 500;
    color: rgb(98, 82, 59);
    opacity: 0.95;
    margin-top: 10px;
    line-height: 1.5;
}
.ci-safe-text-item.ci-dark-body .ci-safe-text-lead {
    color: rgba(255, 255, 255, 0.88);
}
.ci-safe-text-heading {
    font-size: clamp(18px, 1.3vw, 25px);
    font-weight: 700;
    color: rgb(98, 82, 59);
    line-height: 1.3;
}
.ci-safe-text-item.ci-dark-body .ci-safe-text-heading {
    color: #fff;
}
.ci-safe-text-desc {
    font-size: clamp(12px, 0.83vw, 16px);
    line-height: 1.8;
    margin-top: 16px;
    color: rgb(98, 82, 59);
    opacity: 0.85;
}
.ci-safe-text-item.ci-dark-body .ci-safe-text-desc {
    color: rgba(255,255,255,0.85);
}

@media (max-width: 768px) {
    .ci-safe-text-item,
    .ci-safe-text-item.ci-reverse { flex-direction: column; }
    .ci-safe-text-img, .ci-safe-text-body { width: 100%; }
    .ci-safe-text-body { padding: 20px; }
}

/* ── safety_other Stats Cycling ──────── */
.safety-cycle-item {
    border-left-width: 2px;
    border-left-style: solid;
}
.safety-cycle-item.bg-white\/5 {
    background: rgba(255,255,255,0.05);
}

.safety-sw-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,0.3);
    opacity: 1;
}
.safety-sw-pagination .swiper-pagination-bullet-active {
    background: #A4896C;
    width: 24px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   STANDARD TEMPLATE — Numbered sections with swipers (Tiggo 8/7)
   ══════════════════════════════════════════════════════════════════ */

.ci-std-section {
    padding: clamp(40px, 5vw, 80px) clamp(16px, 2.6vw, 50px);
    background: #111;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ci-std-section.ci-std-alt {
    background: #161616;
}

.ci-std-header {
    max-width: 1280px;
    margin: 0 auto clamp(24px, 2.6vw, 48px);
    text-align: center;
}
.ci-std-num {
    font-size: clamp(48px, 5vw, 96px);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, rgba(164,137,108,0.4), rgba(164,137,108,0.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}
.ci-std-label {
    font-size: clamp(10px, 0.78vw, 13px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #A4896C;
    margin-bottom: 12px;
}
.ci-std-heading {
    font-size: clamp(22px, 2vw, 38px);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.ci-std-specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 2vw, 40px);
    max-width: 1280px;
    margin: 0 auto clamp(24px, 2.6vw, 48px);
    padding: clamp(16px, 1.5vw, 24px) 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ci-std-spec {
    text-align: center;
    min-width: 120px;
}
.ci-std-spec-value {
    font-size: clamp(18px, 1.5vw, 28px);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.ci-std-spec-label {
    font-size: clamp(10px, 0.7vw, 12px);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

.ci-std-swiper {
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
}
.ci-std-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.ci-std-card:hover {
    border-color: rgba(164,137,108,0.3);
    transform: translateY(-4px);
}
.ci-std-card-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #1a1a1a;
}
.ci-std-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ci-std-card:hover .ci-std-card-img img {
    transform: scale(1.05);
}
.ci-std-card-body {
    padding: clamp(16px, 1.3vw, 24px);
}
.ci-std-card-title {
    font-size: clamp(14px, 1vw, 18px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}
.ci-std-card-value {
    font-size: clamp(12px, 0.83vw, 15px);
    font-weight: 600;
    color: #A4896C;
    margin-bottom: 6px;
}
.ci-std-card-desc {
    font-size: clamp(12px, 0.78vw, 14px);
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}

.ci-std-swiper-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(16px, 1.5vw, 24px);
    padding: 0 4px;
}
.ci-std-pagination {
    position: static !important;
}
.ci-std-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,0.3);
    opacity: 1;
    width: 8px;
    height: 8px;
}
.ci-std-pagination .swiper-pagination-bullet-active {
    background: #A4896C;
    width: 24px;
    border-radius: 4px;
}
.ci-std-arrows {
    display: flex;
    gap: 8px;
}
.ci-std-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.ci-std-arrow:hover {
    border-color: #A4896C;
    color: #A4896C;
    background: rgba(164,137,108,0.1);
}
.ci-std-arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .ci-std-specs { gap: 16px; }
    .ci-std-spec { min-width: 80px; }
}


/* ══════════════════════════════════════════════════════════════════
   SIMPLE TEMPLATE — Clean grid layout (Arrizo, Tiggo 4 Pro)
   ══════════════════════════════════════════════════════════════════ */

.ci-specs-table {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}
.ci-specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(12px, 1vw, 18px) clamp(16px, 1.5vw, 28px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ci-specs-row:last-child {
    border-bottom: none;
}
.ci-specs-row:hover {
    background: rgba(255,255,255,0.02);
}
.ci-specs-label {
    font-size: clamp(12px, 0.83vw, 15px);
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.ci-specs-value {
    font-size: clamp(14px, 1vw, 18px);
    color: #fff;
    font-weight: 700;
    text-align: right;
}

.ci-simple-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(16px, 1.5vw, 24px);
}
.ci-simple-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.ci-simple-card:hover {
    border-color: rgba(164,137,108,0.3);
    transform: translateY(-2px);
}
.ci-simple-card-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #1a1a1a;
}
.ci-simple-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ci-simple-card:hover .ci-simple-card-img img {
    transform: scale(1.05);
}
.ci-simple-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a, #222);
}
.ci-simple-card-body {
    padding: clamp(14px, 1.2vw, 20px);
}
.ci-simple-card-title {
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.3;
}
.ci-simple-card-value {
    font-size: clamp(12px, 0.83vw, 14px);
    font-weight: 600;
    color: #A4896C;
    margin-bottom: 4px;
}
.ci-simple-card-desc {
    font-size: clamp(11px, 0.73vw, 13px);
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .ci-simple-grid {
        grid-template-columns: 1fr;
    }
    .ci-specs-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .ci-specs-value {
        text-align: left;
    }
}

/* ═══════════════════════════════════════════════════════════════
   THEME: LIGHT (html.theme-light) — footer uses .site-footer-dark, unchanged
   ═══════════════════════════════════════════════════════════════ */

html.theme-light {
    color-scheme: light;
}

html.theme-light body {
    background-color: #f4f4f5 !important;
    color: #18181b !important;
}

html.theme-light ::selection {
    background: rgba(164, 137, 108, 0.35);
    color: #0a0a0a;
}

html.theme-light ::-webkit-scrollbar-track {
    background: #e4e4e7;
}
html.theme-light ::-webkit-scrollbar-thumb {
    background: #a1a1aa;
}
html.theme-light ::-webkit-scrollbar-thumb:hover {
    background: #A4896C;
}

/* —— Header —— */
html.theme-light #main-header #main-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light #main-header #main-nav.header-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

html.theme-light #main-header #header-top-bar {
    background: rgba(250, 250, 250, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    color: #52525b !important;
}

html.theme-light #main-header a,
html.theme-light #main-header button {
    --tw-text-opacity: 1;
}

html.theme-light #main-header #header-top-bar a,
html.theme-light #main-header #header-top-bar span {
    color: inherit;
}
html.theme-light #main-header #header-top-bar .text-chery-silver {
    color: #52525b !important;
}

html.theme-light #main-header #header-top-bar a:hover {
    color: #18181b !important;
}

html.theme-light #main-header #header-top-bar .theme-toggle-sep {
    color: rgba(0, 0, 0, 0.15) !important;
}

html.theme-light #main-header #mega-models-btn,
html.theme-light #main-header nav a.uppercase,
html.theme-light #main-header nav button.uppercase {
    color: #3f3f46 !important;
}

html.theme-light #main-header #mega-models-btn:hover,
html.theme-light #main-header nav a.uppercase:hover,
html.theme-light #main-header nav button.uppercase:hover {
    color: #18181b !important;
}

html.theme-light #main-header a[class*="bg-chery-primary"] {
    color: #fff !important;
}

html.theme-light #main-header img.brightness-0,
html.theme-light #main-header img[class*="invert"] {
    filter: none !important;
}

html.theme-light #main-header #header-top-bar [class*="text-white/20"] {
    color: rgba(0, 0, 0, 0.15) !important;
}

html.theme-light #main-header .theme-toggle-btn {
    color: #52525b !important;
}
html.theme-light #main-header .theme-toggle-btn:hover {
    color: #18181b !important;
    background-color: rgba(0, 0, 0, 0.06) !important;
}

html.theme-light #main-header #theme-toggle-mobile-nav {
    color: #3f3f46 !important;
}
html.theme-light #main-header #theme-toggle-mobile-nav:hover {
    color: #18181b !important;
}

/* Nav dropdown panels stay dark for contrast */
html.theme-light #main-header .header-nav-flyout {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.theme-light #main-header .header-nav-flyout a {
    color: rgba(255, 255, 255, 0.75) !important;
}

html.theme-light #main-header .header-nav-flyout a:hover {
    color: #fff !important;
}

html.theme-light #mobile-menu-btn {
    color: #18181b !important;
}

/* —— Main: surfaces & text (excludes .site-footer-dark) —— */
html.theme-light main .bg-chery-black {
    background-color: #f4f4f5 !important;
}

html.theme-light main .bg-chery-dark {
    background-color: #e4e4e7 !important;
}

html.theme-light main .bg-chery-gray {
    background-color: #d4d4d8 !important;
}

html.theme-light main [class*="border-white/5"] {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.theme-light main [class*="border-white/10"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light main [class*="border-white/20"] {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html.theme-light main .text-white:not(.page-hero-media *):not(.hero-swiper *):not([class*="bg-chery-primary"]) {
    color: #18181b !important;
}

html.theme-light main .text-chery-silver:not(.page-hero-media *):not(.hero-swiper *) {
    color: #52525b !important;
}

html.theme-light main [class*="text-chery-silver/50"]:not(.page-hero-media *) {
    color: rgba(82, 82, 91, 0.6) !important;
}

html.theme-light main .glass {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light main .glass-dark,
html.theme-light #model-nav.glass-dark {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html.theme-light #model-nav .text-chery-silver {
    color: #52525b !important;
}
html.theme-light #model-nav .model-nav-tab:hover {
    color: #18181b !important;
}

/* Hero slides & model hero: keep light text on imagery */
html.theme-light main .page-hero-media,
html.theme-light main .hero-swiper {
    color: #fff;
}

html.theme-light main .page-hero-media .text-white,
html.theme-light main .page-hero-media h1,
html.theme-light main .page-hero-media .font-display,
html.theme-light main .hero-swiper .text-white,
html.theme-light main .hero-swiper h1,
html.theme-light main .hero-swiper .font-display {
    color: #fff !important;
}

html.theme-light main .page-hero-media .text-chery-silver,
html.theme-light main .hero-swiper .text-chery-silver {
    color: rgba(255, 255, 255, 0.85) !important;
}

html.theme-light main .page-hero-media [class*="text-chery-silver/50"],
html.theme-light main .page-hero-media [class*="text-white/50"],
html.theme-light main .hero-swiper [class*="text-white/85"] {
    color: rgba(255, 255, 255, 0.85) !important;
}

html.theme-light main .page-hero-media a.text-white,
html.theme-light main .page-hero-media nav a:hover,
html.theme-light main .hero-swiper a.text-white {
    color: #fff !important;
}

html.theme-light main .page-hero-media .border-chery-gold,
html.theme-light main .page-hero-media .text-chery-gold,
html.theme-light main .hero-swiper .text-chery-gold {
    color: #c4a882 !important;
    border-color: #A4896C !important;
}

html.theme-light main .page-hero-media .bg-chery-gold.text-chery-black {
    color: #0a0a0a !important;
}

/* Buttons that must stay on-brand */
html.theme-light main .bg-chery-primary,
html.theme-light main [class*="bg-chery-primary/80"] {
    color: #fff !important;
}

html.theme-light main .bg-chery-primary .text-white,
html.theme-light main [class*="bg-chery-primary/80"] .text-white {
    color: #fff !important;
}

html.theme-light main .page-hero-media [class*="border-white/20"] {
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* —— Preloader —— */
html.theme-light #preloader {
    background: #fafafa !important;
}

html.theme-light #preloader .preloader-logo {
    filter: none !important;
}

html.theme-light #preloader .preloader-bar {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* —— Floating actions —— */
html.theme-light #floating-actions a[class*="bg-white/10"] {
    background: rgba(24, 24, 27, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #18181b !important;
}

html.theme-light #floating-actions a[class*="bg-white/10"]:hover {
    background: rgba(24, 24, 27, 0.12) !important;
}

html.theme-light #floating-actions a[class*="bg-chery-primary"] {
    color: #fff !important;
}

html.theme-light main .gradient-text {
    background: linear-gradient(135deg, #8B7259, #A4896C) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* —— Model coming-soon (Chery International suspense style) —— */
.model-coming-soon-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.5) 100%);
}
.model-coming-soon-overlay--light {
    background: rgba(0, 0, 0, 0.25);
}
.model-coming-soon-back {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.model-coming-soon-back:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(212, 175, 55, 0.5);
}
.model-coming-soon-badge {
    letter-spacing: 0.2em;
}

html.theme-light main .model-coming-soon .model-coming-soon-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.55) 100%);
}
html.theme-light main .model-coming-soon h1,
html.theme-light main .model-coming-soon .text-white {
    color: #fff !important;
}
html.theme-light main .model-coming-soon .text-chery-silver {
    color: rgba(255, 255, 255, 0.82) !important;
}
html.theme-light main .model-coming-soon .model-coming-soon-back {
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.25);
}