/* ============================================
   Meidali EV — Automotive editorial design system
   Original Meidali implementation: image-led, restrained, responsive.
   ============================================ */

/* ---------- Design Tokens ---------- */
:root {
    --canvas:           #FFFFFF;
    --surface-quiet:    #F5F6F7;
    --surface-studio:   #F1F2F3;
    --ink:              #1C1C1C;
    --ink-secondary:    #5C5C5C;
    --ink-muted:        #7A7A7A;
    --rule:             #D9D9D9;
    --night:            #080808;

    --site-context-theme-color: #ffffff;
    --site-context-highlight-color: #1559B0;
    --site-context-focus-color: #0C4592;
    --site-context-metainfo-color: #757575;

    --action-blue:      #1559B0;
    --action-blue-hover:#0C4592;
    --action-focus:     #0C4592;
    /* Legacy aliases for backward compatibility */
    --bmw-blue:         var(--action-blue);
    --bmw-blue-hover:   var(--action-blue-hover);
    --bmw-focus:        var(--action-focus);

    --bg-white:         var(--canvas);
    --bg-dark:          var(--night);
    --bg-darker:        #050505;
    --bg-section:       var(--surface-quiet);

    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-secondary);
    --text-muted:       var(--ink-muted);
    --text-on-dark:     #FFFFFF;

    --font-display: 'Inter', 'Helvetica Neue', 'Arial', 'Noto Sans SC', sans-serif;
    --font-body:    'Inter', 'Helvetica Neue', 'Arial', 'Noto Sans SC', sans-serif;

    --r:            0px;
    --ease-automotive: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-bmw:      var(--ease-automotive);
    --navbar-height: 72px;
    --product-toolbar-height: 80px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html:lang(zh-CN),
html:lang(zh-Hans) {
    font-synthesis-weight: none;
}
body {
    font-family: var(--font-body);
    font-size: 16px; font-weight: 400; color: var(--text-primary);
    line-height: 1.5; background: var(--bg-white); min-height: 100vh;
    text-rendering: geometricPrecision;
    overflow-x: hidden;
}
html:lang(zh-CN) .hero-heading,
html:lang(zh-CN) .section-title,
html:lang(zh-CN) .banner-title,
html:lang(zh-CN) .detail-section-title,
html:lang(zh-CN) .brand-section-title,
html:lang(zh-Hans) .hero-heading,
html:lang(zh-Hans) .section-title,
html:lang(zh-Hans) .banner-title,
html:lang(zh-Hans) .detail-section-title,
html:lang(zh-Hans) .brand-section-title {
    font-family: 'Inter', 'Noto Sans SC', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 300;
    font-synthesis-weight: none;
}
a { text-decoration: none; color: inherit; transition: color 0.15s ease; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

body.is-loading {
    overflow: hidden;
}

#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: #050505;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s var(--ease-bmw), visibility 0.5s var(--ease-bmw);
}

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

.preloader-logo {
    overflow: visible;
}

.preloader-logo-ring {
    stroke-dasharray: 129;
    stroke-dashoffset: 129;
    animation: preloaderDraw 1s var(--ease-bmw) forwards;
}

.preloader-logo-mark {
    opacity: 0;
    transform-origin: 22px 22px;
    animation: preloaderMark 0.38s var(--ease-bmw) 0.82s forwards;
}

@keyframes preloaderDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes preloaderMark {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================================
   TOP HEADER — 深色奔驰/BMW 风格
   Logo 左 | 导航中 | 三图标右 | 汉堡移动端
   ============================================ */
.top-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--navbar-height);
    background: linear-gradient(to bottom, rgba(0,0,0,0.54), rgba(0,0,0,0.18), rgba(0,0,0,0));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    transition: none;
}
.top-header.scrolled {
    background: linear-gradient(to bottom, rgba(0,0,0,0.54), rgba(0,0,0,0.18), rgba(0,0,0,0));
    box-shadow: none;
}

.top-header.models-open {
    background: #050505;
}

.top-header.models-open.scrolled {
    background: #050505;
    box-shadow: none;
}

.header-inner {
    position: relative;
    display: flex; align-items: center;
    width: calc(100% - 240px);
    max-width: 1652px; margin: 0 auto;
    padding: 0 40px; height: 100%;
}
.header-inner::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: rgba(255,255,255,0.72);
    pointer-events: none;
}

.top-header.models-open .header-inner::after {
    background: rgba(255,255,255,0.18);
}

/* Logo — 圆形BMW式 */
.header-logo {
    flex-shrink: 0;
    display: flex; align-items: center;
}
.header-logo svg { display: block; width: 40px; height: 40px; }

/* 中间导航区 */
.header-nav {
    display: flex; align-items: center; gap: 10px;
    margin-left: 34px; flex: 1;
}

/* ---- 下拉导航项 ---- */
.nav-dropdown {
    position: relative;
}
.nav-link,
.nav-dropdown-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-on-dark);
    padding: 10px 12px 14px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.nav-link { height: 100%; }
.nav-link:hover,
.nav-dropdown-btn:hover {
    color: #ffffff;
}

.top-header.models-open .nav-link,
.top-header.models-open .nav-dropdown-btn,
.top-header.models-open .icon-btn {
    color: #ffffff;
}

.top-header.models-open .nav-link:hover,
.top-header.models-open .nav-dropdown-btn:hover,
.top-header.models-open .icon-btn:hover {
    color: #ffffff;
}
.nav-arrow {
    width: 10px; height: 10px;
    color: inherit; opacity: 0.7;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

/* ---- 下拉面板（向下展开，像第二张图）---- */
.nav-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: var(--bg-white);
    border: none;
    border-radius: var(--r);
    padding: 32px 36px 28px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s var(--ease-bmw);
    box-shadow: 0 24px 64px rgba(0,0,0,0.22);
    z-index: 1100;
}
.nav-dropdown-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-btn[aria-expanded="true"] {
    color: var(--bmw-blue);
}

#modelsDropdown .nav-dropdown-btn {
    position: relative;
}

#modelsDropdown .nav-dropdown-btn[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 3px;
    background: var(--bmw-blue);
}

.nav-models-panel {
    position: fixed;
    top: calc(var(--navbar-height) - 1px);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    min-width: 0;
    padding: 0 1px 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 84%,
        rgba(12, 12, 12, 0.72) 100%
    );
    box-shadow: none;
    border-top: 0;
    pointer-events: none;
}

.nav-models-panel.open {
    pointer-events: auto;
}

.models-mega {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    width: calc(100vw - 2px);
    min-height: calc(100vh - var(--navbar-height) - 70px);
    max-height: calc(100vh - var(--navbar-height) - 70px);
    background: var(--bg-white);
    overflow: visible;
    border-top: 0;
}

.models-sidebar {
    display: flex;
    flex-direction: column;
    padding: 52px 40px 56px 48px;
    border-right: 0;
    background: #ffffff;
    font-size: 14px;
    color: #666;
}

.models-sidebar-main {
    display: grid;
    gap: 8px;
}

.models-sidebar-divider {
    height: 0;
    margin: 24px 0 6px;
    background: transparent;
}

.models-sidebar-foot {
    margin-top: auto;
    display: grid;
    gap: 20px;
    padding-top: 22px;
}

.models-side-link {
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.models-side-link:hover {
    color: #000;
}

.models-side-link:hover {
    color: var(--text-primary);
}

.models-promo-card {
    display: block;
    margin-top: 10px;
    color: var(--text-primary);
}

.models-promo-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: block;
    overflow: visible;
}

.models-promo-kicker {
    display: block;
    margin-top: 12px;
    color: #6d6d6d;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.models-promo-title {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
}

.models-category {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 0;
    border: 0;
    background: transparent;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.18;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
}

.models-category span {
    position: relative;
    padding-left: 14px;
}

.models-category.active {
    color: #000;
    font-weight: 600;
}

.models-category.active span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--bmw-blue);
    transform: translateY(-50%);
}

.models-showcase {
    padding: 56px 64px 64px 48px;
    max-height: calc(100vh - var(--navbar-height) - 70px);
    overflow-y: auto;
    padding-right: 42px;
    scrollbar-width: auto;
    scrollbar-color: #8f8f8f #f5f5f5;
}

.models-showcase::-webkit-scrollbar {
    width: 12px;
}

.models-showcase::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.models-showcase::-webkit-scrollbar-thumb {
    background: #8f8f8f;
    border: 3px solid #f5f5f5;
    border-radius: 999px;
}

.models-grid {
    display: none;
}

.models-grid.active {
    display: block;
}

.models-section-label {
    margin-bottom: 24px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

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

.model-tile {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 132px;
    padding: 18px 22px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    color: var(--text-primary);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease,
        color 0.18s ease;
    overflow: visible;
}

.model-tile:hover,
.model-tile:focus-visible {
    background: #ffffff;
    border-color: transparent;
    box-shadow: 0 18px 44px rgba(17, 17, 17, 0.10);
    color: var(--text-primary);
    transform: translateY(-2px);
    z-index: 2;
}

.model-tile:focus-visible {
    outline: none;
}

.model-tile img {
    width: 220px;
    height: 120px;
    object-fit: contain;
    object-position: center center;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    display: block;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}

.model-tile:hover img,
.model-tile:focus-visible img {
    transform: translateX(2px) scale(1.02);
}

.model-tile span {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.02;
    transition: transform 0.22s ease;
}

.model-tile:hover span,
.model-tile:focus-visible span {
    transform: translateX(2px);
}

/* 面板标题 */
.panel-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0;
    line-height: 1.30;
    margin-bottom: 20px;
    text-transform: uppercase;
    opacity: 0.55;
}

/* 面板列表 */
.panel-list li {
    margin-bottom: 2px;
}
.panel-list a {
    display: block;
    padding: 10px 4px;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.35;
    transition: color 0.15s ease;
}
.panel-list a:hover {
    color: var(--bmw-blue);
}

/* 右侧图标组 */
.header-icons {
    display: flex; align-items: center; gap: 18px;
    flex-shrink: 0; margin-left: auto;
}
.header-center-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-on-dark);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0.92;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.header-center-link:hover { opacity: 1; }
.header-center-link svg { flex-shrink: 0; }
.icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    color: var(--text-on-dark);
    opacity: 0.85;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.icon-btn:hover { opacity: 1; }
.top-header.models-open .header-center-link {
    color: #ffffff;
}
.top-header.models-open .header-center-link:hover {
    color: #ffffff;
}

body.models-scrim-open {
    overflow: hidden;
}

/* 移动端汉堡 */
.mobile-hamburger {
    display: none;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: none; background: transparent;
    cursor: pointer;
    color: var(--text-on-dark); flex-shrink: 0;
}

/* ---- 地区/语言下拉面板 ---- */
.region-wrapper { position: relative; }
.region-dropdown {
    position: absolute; top: 100%; right: 0;
    width: 300px; max-height: calc(100vh - 80px);
    background: var(--bg-white);
    border-radius: var(--r);
    box-shadow: 0 16px 48px rgba(0,0,0,0.20);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s var(--ease-bmw);
    z-index: 1200;
    overflow-y: auto; overflow-x: hidden;
}
.region-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }

.region-header {
    padding: 18px 22px 10px;
    font-size: 12px; font-weight: 900;
    color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: 0; line-height: 1.30;
}

.region-group-title {
    padding: 16px 22px 6px;
    font-size: 11px; font-weight: 700;
    color: var(--bmw-blue);
    text-transform: uppercase; letter-spacing: 0;
    line-height: 1.30;
    border-bottom: 1px solid #f2f2f2;
    margin-top: 4px;
}

.region-list li:not(.region-group-title) { margin: 0; }
.region-list a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 22px;
    font-size: 14px; font-weight: 400;
    color: var(--text-primary); transition: all 0.15s ease;
    line-height: 1.35;
}
.region-list a:hover { background: #F4F6FB; color: var(--bmw-blue); }
.flag { font-size: 17px; flex-shrink: 0; min-width: 24px; text-align: center; }

.region-footer {
    padding: 14px 22px 16px;
    border-top: 1px solid #eee;
    background: #FAFAFA;
}
#region-currentRegionLabel, .region-footer small {
    display: block;
    font-size: 11px; color: var(--text-secondary); opacity: 0.7;
    line-height: 1.15;
}
.mobile-hamburger.active .line-1 { transform: translateY(5.5px) rotate(45deg); }
.mobile-hamburger.active .line-3 { transform: translateY(-5.5px) rotate(-45deg); }
.mobile-hamburger.active .line-2 { opacity: 0; }

/* 移动端遮罩菜单 */
.mobile-overlay {
    display: none; position: fixed;
    inset: 0; top: var(--navbar-height);
    background: var(--bg-dark);
    z-index: 999;
    overflow-y: auto;
    padding: 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.mobile-overlay.open {
    display: block; transform: translateX(0);
}
.mobile-menu {
    display: grid;
    gap: 0;
}
.mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 58px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.30;
    text-transform: uppercase;
}
.mobile-menu a:hover {
    color: var(--bmw-blue);
}

/* ============================================
   HERO SECTION — 暗色全屏展示（第一张图风格）
   使用 img 标签，照片完整显示不被裁剪
   ============================================ */
.hero-section {
    position: relative;
    width: 100%;
    height: calc(86svh + 40px);
    min-height: 560px;
    max-height: 860px;
    overflow: hidden;
    background: var(--bg-dark);
}
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 64% 60%;
    filter: saturate(1) contrast(1.02) brightness(0.92);
}
.hero-product-link {
    position: absolute;
    inset: 0;
    z-index: 0;
}
/* 暗色渐变遮罩 — 用伪元素覆盖在图片上 */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(8,8,12,0.58) 0%, rgba(8,8,12,0.28) 42%, rgba(8,8,12,0.08) 68%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Hero 文字内容 — 绝对定位覆盖图片 */
.hero-content {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 96px;
    max-width: 1600px;
    padding: 0 80px;
    width: 100%;
}
.hero-kicker {
    color: rgba(255,255,255,0.86);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.30;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hero-heading {
    font-family: var(--font-display);
    font-size: 60px;
    font-weight: 300; /* BMW Light display */
    color: var(--text-on-dark);
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,0.88);
    line-height: 1.30;
    margin-bottom: 30px;
    max-width: 520px;
    font-weight: 400;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.hero-cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 180px;
    padding: 15px 34px;
    background: var(--bmw-blue);
    color: var(--text-on-dark);
    border: 1px solid var(--bmw-blue);
    border-radius: var(--r);
    font-size: 15px; font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-cta:hover { background: var(--action-blue-hover); }

/* ---- 地区主推车型广告位（选择国家后启用） ---- */
.hero-badge {
    display: none;
    align-items: center;
    padding: 6px 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    background: rgba(8,8,12,0.45);
    color: rgba(255,255,255,0.92);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}
.hero-model-img {
    display: none;
    position: absolute;
    right: 6vw;
    top: 50%;
    transform: translateY(-47%);
    z-index: 2;
    width: min(44%, 620px);
    height: auto;
    max-height: 72%;
    object-fit: contain;
    filter: drop-shadow(0 28px 48px rgba(0,0,0,0.55));
    pointer-events: none;
}
.hero-section.hero-region-mode::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(58% 72% at 72% 58%, rgba(255,255,255,0.10), transparent 72%);
    pointer-events: none;
    z-index: 0;
}
.hero-section.hero-region-mode .hero-badge { display: inline-flex; }
.hero-section.hero-region-mode .hero-model-img { display: block; }
.hero-section.hero-region-mode .hero-bg-img { display: none; }
.hero-section.hero-region-mode .hero-product-link { display: none; }

/* ---- 地区整图广告模式：用轻量遮罩保护白色文案，保留产品亮度 ---- */
.hero-section.hero-region-fullmode::after {
    background: linear-gradient(90deg, rgba(20, 12, 8, 0.54) 0%, rgba(20, 12, 8, 0.28) 38%, transparent 70%);
}
.hero-section.hero-region-fullmode::before { display: none; }
.hero-section.hero-region-fullmode .hero-kicker { color: rgba(255,255,255,0.86); }
.hero-section.hero-region-fullmode .hero-heading { color: #ffffff; }
.hero-section.hero-region-fullmode .hero-sub { color: rgba(255,255,255,0.88); }
.hero-section.hero-region-fullmode .hero-badge {
    display: inline-flex;
    border-color: rgba(255,255,255,0.50);
    background: rgba(20,12,8,0.24);
    color: #ffffff;
}
.hero-section.hero-region-fullmode .hero-cta-secondary {
    color: #ffffff;
    background: rgba(20,12,8,0.12);
    border-color: rgba(255,255,255,0.78);
}
.hero-section.hero-region-fullmode .hero-cta-secondary:hover {
    color: #141418;
    background: #ffffff;
    border-color: #ffffff;
}

.magnetic-target {
    transform: translate3d(var(--magnetic-x, 0px), var(--magnetic-y, 0px), 0);
    transition:
        transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;
    will-change: transform;
}

.magnetic-target.is-magnetic-active {
    transition:
        transform 0.12s linear,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;
}

.magnetic-target:not(.is-magnetic-active) {
    will-change: auto;
}
/* ============================================
   PRODUCTS SECTION — 白色内容区
   ============================================ */
.products-section {
    padding: 96px 0 0;
    max-width: none; margin: 0;
    background: #ffffff;
}
.section-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 56px;
}
.section-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: var(--site-context-metainfo-color);
    line-height: 1.30;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.section-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 300; /* Light display style */
    color: var(--text-primary);
    letter-spacing: 0;
    line-height: 1.30;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.section-sub {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 48px;
    line-height: 1.30;
    max-width: 620px;
    overflow-wrap: break-word;
}

.reveal-item {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: all 0.8s var(--ease-bmw);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

.reveal-item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1px;
}

/* Product Cards */
.product-card {
    background: var(--bg-white);
    border: none;
    cursor: pointer;
    border-radius: var(--r);
    transition: opacity 0.2s ease;
}
.product-card:hover { opacity: 1; }
.product-cover {
    width: 100%; aspect-ratio: 16 / 9; background: transparent; overflow: visible;
}
.product-cover img {
    width: 100%; height: 100%; object-fit: contain; background: transparent; border: 0; box-shadow: none;
    transition: transform 0.5s ease;
}
.product-card:hover .product-cover img { transform: scale(1.015); }

.product-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 12px; border-radius: var(--r);
    font-size: 11px; font-weight: 700; letter-spacing: 0;
    text-transform: uppercase; line-height: 1.20;
}
.badge-new { background: var(--bmw-blue); color: var(--text-on-dark); }
.badge-hot { background: #D50C20; color: white; }
.badge-best { background: var(--bg-dark); color: white; }

.product-info { padding: 24px 24px 28px; }
.product-name {
    font-family: var(--font-display); font-size: 17px; font-weight: 700;
    color: var(--text-primary); letter-spacing: 0;
    margin-bottom: 12px; line-height: 1.25;
}
.product-specs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.spec-tag {
    padding: 4px 10px; border-radius: var(--r);
    font-size: 11px; font-weight: 400;
    background: var(--bg-section); color: var(--text-secondary);
    letter-spacing: 0; line-height: 1.15;
}
.product-desc {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.45; margin-bottom: 20px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.product-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 16px; border-top: 1px solid #F2F2F2;
}
.product-price {
    font-family: var(--font-display); font-size: 24px; font-weight: 400;
    color: var(--text-primary); letter-spacing: 0; line-height: 1.20;
}
.product-price small {
    font-size: 11px; font-weight: 400; color: var(--text-secondary);
    display: block; margin-top: 2px; line-height: 1.15;
}
.product-btn {
    padding: 11px 28px; border-radius: var(--r); border: none;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all 0.2s ease; letter-spacing: 0; line-height: 1.20;
    background: var(--bmw-blue); color: var(--text-on-dark);
}
.product-btn:hover { background: var(--bmw-blue-hover); opacity: 0.88; }

/* ============================================
   PRODUCT BANNERS — BMW官网风格：全幅图上下堆叠
   像 BMW iX3 产品页那样，每张占满整行宽度
   ============================================ */
.product-banners {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 8px;
    gap: 40px;
}

.product-banner {
    position: relative;
    display: block;
    width: 100%;
    height: 520px;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--r);
    background: var(--bg-dark);
}

.product-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 62% center;
    filter: none;
    transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.product-banner:hover img { transform: scale(1.02); }
.product-banner:nth-child(2) img { object-position: 72% center; }
.product-banner:nth-child(3) img { object-position: 72% center; }

/* 暗色渐变遮罩 — 从左下到右上 */
.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.70) 0%,
        rgba(0, 0, 0, 0.40) 40%,
        rgba(0, 0, 0, 0.12) 70%,
        rgba(0, 0, 0, 0.02) 100%
    );
    display: flex;
    align-items: center;
    transition: background 0.4s ease;
}
.product-banner:hover .banner-overlay {
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.74) 0%,
        rgba(0, 0, 0, 0.44) 40%,
        rgba(0, 0, 0, 0.16) 70%,
        rgba(0, 0, 0, 0.04) 100%
    );
}

/* 文字内容区 — 居左 */
.banner-content {
    max-width: 580px;
    padding: 0 80px;
    z-index: 2;
}

.banner-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--bmw-blue);
    line-height: 1.20;
    margin-bottom: 14px;
    opacity: 0.9;
}

.banner-title {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 300; /* BMW Light display */
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.banner-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.30;
    margin-bottom: 28px;
    font-weight: 400;
    max-width: 420px;
}

/* 按钮组 */
.banner-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.banner-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 36px;
    background: var(--bmw-blue);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: 1.20;
    border-radius: var(--r);
    transition: background 0.22s ease, transform 0.2s ease;
}
.banner-cta-primary:hover {
    background: var(--bmw-blue-hover);
    transform: translateY(-1px);
}

.banner-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: #FFFFFF;
    line-height: 1.20;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(255,255,255,0.35);
    padding-bottom: 2px;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.banner-cta-secondary:hover {
    border-color: var(--bmw-blue);
    color: var(--bmw-blue);
}

.product-banner.reveal-item,
.product-card.reveal-item {
    animation: none;
}

.product-banner:nth-child(1) { --reveal-delay: 0.05s; }
.product-banner:nth-child(2) { --reveal-delay: 0.15s; }
.product-banner:nth-child(3) { --reveal-delay: 0.25s; }

/* ============================================
   SHOWCASE ROW — 已废弃，保留兼容
   ============================================ */
.showcase-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    width: 100%;
}
.showcase-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    border-radius: var(--r);
}
.showcase-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.showcase-card:hover img { transform: scale(1.04); }

/* 悬停时显示文字覆盖层 */
.showcase-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,8,12,0.82) 0%, rgba(8,8,12,0.25) 50%, transparent 80%);
    display: flex; flex-direction: column;
    justify-content: flex-end;
    padding: 28px 32px;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.showcase-card:hover .showcase-overlay { opacity: 1; }

.showcase-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: 1.20;
    margin-bottom: 4px;
}
.showcase-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.30;
    margin-bottom: 10px;
}
.showcase-arrow {
    font-size: 16px;
    color: var(--bmw-blue);
    font-weight: 700;
}

/* ============================================
   Footer — Light information canvas
   ============================================ */
.footer {
    position: relative; z-index: 1;
    background: #ffffff;
    margin-top: 0; border-top: 1px solid #d9d9d9;
}
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 96px 48px 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 0.9fr; gap: 56px; margin-bottom: 56px; }

.footer-logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    color: #1c1c1c; margin-bottom: 20px; letter-spacing: 0;
}
.logo-circle-sm {
    width: 32px; height: 32px; border-radius: var(--r);
    background: #1c1c1c; border: 1px solid #1c1c1c;
    display: flex; align-items: center; justify-content: center;
}
.footer-heading {
    font-size: 12px; font-weight: 900;
    color: #5c5c5c; margin-bottom: 20px;
    text-transform: uppercase; letter-spacing: 0; line-height: 1.30;
}
.footer-desc {
    font-size: 14px; color: #5c5c5c; line-height: 1.65;
    max-width: 320px; opacity: 1;
}
.footer-certifications { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.cert-badge {
    padding: 5px 14px; border-radius: var(--r);
    font-size: 11px; font-weight: 700;
    background: #f5f6f7; color: #1c1c1c;
    border: 1px solid #d9d9d9; letter-spacing: 0; line-height: 1.15;
}
/* 产品册下载按钮（页脚品牌列） */
.footer-catalog-btn {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 24px; padding: 11px 18px;
    border: 1px solid #1c1c1c; border-radius: var(--r);
    background: #ffffff;
    font-size: 13px; font-weight: 700; line-height: 1.2;
    color: #1c1c1c; text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.footer-catalog-btn svg { color: var(--bmw-blue); flex-shrink: 0; transition: color 0.2s ease; }
.footer-catalog-btn:hover {
    border-color: var(--bmw-blue); background: var(--bmw-blue);
    transform: translateY(-1px); color: #ffffff;
}
.footer-catalog-btn:hover svg { color: #ffffff; }
.footer-catalog-btn:active { transform: translateY(0); }
.footer-catalog-btn:focus-visible { outline: 2px solid var(--bmw-blue); outline-offset: 2px; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
    font-size: 14px; color: #1c1c1c; opacity: 0.82;
    transition: opacity 0.2s ease; display: inline-block; letter-spacing: 0; line-height: 1.30;
}
.footer-links a:hover { opacity: 1; color: var(--bmw-blue); }
.footer-contact li {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 16px; font-size: 14px; color: #5c5c5c;
    opacity: 1; line-height: 1.35;
}
.footer-contact svg { flex-shrink: 0; margin-top: 2px; color: #1c1c1c; opacity: 0.72; }
.qr-placeholder {
    width: 120px; height: 120px; border-radius: var(--r);
    background: #f5f6f7; border: 1px solid #d9d9d9;
    display: flex; align-items: center; justify-content: center;
}
.qr-inner { text-align: center; color: #5c5c5c; opacity: 1; }
.qr-inner svg { margin: 0 auto 8px; opacity: 0.72; }
.qr-inner span { font-size: 11px; font-weight: 500; }

.footer-bottom {
    border-top: 1px solid #d9d9d9; padding-top: 28px; text-align: left;
}
.footer-bottom p { font-size: 12px; color: #7a7a7a; opacity: 1; line-height: 1.15; }

/* WhatsApp Float */
.whatsapp-float {
    position: fixed; bottom: 28px; right: 28px;
    width: 54px; height: 54px; border-radius: 0;
    background: var(--bmw-blue); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28); z-index: 999;
    transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float:active { transform: scale(0.95); }

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.product-card { animation: fadeInUp 0.4s ease both; }
.product-card:nth-child(1)  { animation-delay: 0.01s; } .product-card:nth-child(2)  { animation-delay: 0.03s; }
.product-card:nth-child(3)  { animation-delay: 0.05s; } .product-card:nth-child(4)  { animation-delay: 0.07s; }
.product-card:nth-child(5)  { animation-delay: 0.09s; } .product-card:nth-child(6)  { animation-delay: 0.11s; }
.product-card:nth-child(7)  { animation-delay: 0.13s; } .product-card:nth-child(8)  { animation-delay: 0.15s; }
.product-card:nth-child(9)  { animation-delay: 0.17s; } .product-card:nth-child(10){ animation-delay: 0.19s; }
.product-card:nth-child(11) { animation-delay: 0.21s; } .product-card:nth-child(12){ animation-delay: 0.23s; }
.hero-content { animation: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal-item {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .magnetic-target {
        transform: none;
        transition: none;
    }

    .model-intro-reveal,
    .model-sticky-visual img.model-hero-load {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .preloader-logo-ring,
    .preloader-logo-mark {
        animation: none;
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1280px) {
    .header-inner { width: 100%; padding: 0 36px; }
    .header-inner::after { left: 36px; right: 36px; }
    .nav-models-panel {
        padding-left: 1px;
        padding-right: 1px;
    }
    .models-mega { width: calc(100vw - 2px); }
    .hero-content { padding: 0 56px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
    .products-section { padding: 76px 0 0; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}

@media (max-width: 1024px) {
    .header-nav { gap: 0; margin-left: 24px; }
    .nav-link,
    .nav-dropdown-btn { padding: 10px 14px; font-size: 14px; letter-spacing: 0.5px; }
    .nav-models-panel {
        padding-left: 1px;
        padding-right: 1px;
        padding-bottom: 0;
    }
    .models-mega {
        width: calc(100vw - 2px);
        grid-template-columns: 220px minmax(0, 1fr);
        min-height: calc(100vh - var(--navbar-height) - 52px);
        max-height: calc(100vh - var(--navbar-height) - 52px);
    }
    .models-sidebar {
        padding: 26px 18px 30px 22px;
    }
    .models-sidebar-foot {
        gap: 12px;
    }
    .models-side-link {
        font-size: 13px;
    }
    .models-promo-kicker {
        margin-top: 10px;
        font-size: 10px;
    }
    .header-center-link {
        font-size: 13px;
    }
    .models-promo-title {
        font-size: 13px;
    }
    .models-category {
        font-size: 14px;
    }
    .models-showcase {
        padding: 30px 18px 28px 22px;
        max-height: calc(100vh - var(--navbar-height) - 52px);
    }
    .models-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 48px;
    }
    .model-tile {
        gap: 18px;
        min-height: 108px;
        padding: 8px 0;
    }
    .model-tile img {
        width: 180px;
        height: 100px;
        object-fit: contain;
    }
    .model-tile span {
        font-size: 15px;
        letter-spacing: 0.35px;
    }
    .header-icons { gap: 16px; }
    .hero-content { padding: 0 40px; }
}

@media (max-width: 768px) {
    :root { --navbar-height: 58px; }
    .top-header { background: rgba(5,5,5,0.96); }
    .header-inner { padding: 0 20px; }
    .header-inner::after { left: 20px; right: 20px; opacity: 0.2; }

    /* Hide desktop nav & icons on mobile */
    .header-nav, .header-icons { display: none; }
    .mobile-hamburger { display: flex; }

    .mobile-overlay.open { display: block; }
    .mobile-overlay nav { margin-bottom: 32px; }
    .mobile-overlay .nav-dropdown { margin-bottom: 8px; }
    .mobile-overlay .nav-dropdown-btn {
        width: 100%; padding: 14px 16px;
        justify-content: space-between;
        color: var(--text-on-dark);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .mobile-overlay .nav-dropdown-panel {
        position: static; opacity: 1; visibility: visible;
        transform: none; background: transparent;
        box-shadow: none; padding: 8px 0 16px 16px;
        display: none;
    }
    .mobile-overlay .nav-dropdown-panel.open-mobile { display: block; }

    /* Hero mobile */
    .hero-section { height: 82svh; min-height: 560px; }
    .hero-bg-img { object-fit: cover; object-position: 68% 58%; }
    .hero-model-img {
        right: 50%;
        top: 40%;
        transform: translate(50%, -50%);
        width: min(78%, 420px);
        max-height: 42%;
        opacity: 0.92;
    }
    .hero-badge { margin-bottom: 12px; }
    .hero-content { padding: 0 24px; bottom: 132px; }
    .hero-heading { font-size: 42px; }
    .hero-sub { font-size: 14px; margin-bottom: 28px; max-width: 320px; }
    .hero-actions { gap: 10px; }
    .hero-cta { width: 100%; max-width: 280px; }

    /* Products mobile */
    .products-section { padding: 56px 0 0; }
    .section-inner { padding: 0 24px; }
    .section-title { font-size: 26px; }
    .section-sub { max-width: 300px; }

    /* Product Banners — 移动端全幅堆叠 */
    .banner-content { padding: 0 28px; max-width: 100%; }
    .product-banners { gap: 28px; }
    .product-banner { height: 500px; }
    .banner-title { font-size: 34px; letter-spacing: 0; }
    .banner-desc { font-size: 13px; margin-bottom: 22px; max-width: 90%; }
    .banner-label { font-size: 10px; letter-spacing: 0; margin-bottom: 10px; }
    .banner-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
    .banner-cta-primary { width: 100%; justify-content: center; padding: 12px 24px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-inner { padding: 56px 24px 32px; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr; }
    .showcase-row { grid-template-columns: 1fr; gap: 12px; }
    .hero-cta { width: 100%; max-width: 280px; }

    /* Product banners 小屏 */
    .banner-content { padding: 0 20px; }
    .banner-title { font-size: 26px; }
    .banner-actions { gap: 10px; }
}

@media (max-width: 375px) {
    .hero-heading { font-size: 34px; }
}

/* ============================================
   Product Detail Pages
   ============================================ */
.product-detail-page {
    background: var(--bg-white);
}

.product-detail-hero {
    position: relative;
    height: 92svh;
    min-height: 720px;
    overflow: hidden;
    background: var(--bg-dark);
}

.product-detail-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
    filter: saturate(0.95) contrast(1.03);
}

.product-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(4, 6, 12, 0.78) 0%, rgba(4, 6, 12, 0.46) 36%, rgba(4, 6, 12, 0.08) 72%, rgba(4, 6, 12, 0.10) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0.16), transparent 28%, rgba(0,0,0,0.20));
}

.product-detail-hero-content {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 150px;
    max-width: 780px;
    padding: 0 100px;
    color: var(--text-on-dark);
}

.product-detail-kicker {
    margin-bottom: 22px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-transform: uppercase;
}

.product-detail-title {
    margin-bottom: 22px;
    font-family: var(--font-display);
    font-size: clamp(54px, 7vw, 112px);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.product-detail-sub {
    max-width: 620px;
    margin-bottom: 34px;
    font-size: 20px;
    line-height: 1.25;
    color: rgba(255,255,255,0.88);
}

.product-detail-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.detail-secondary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 64px;
    padding: 0 34px;
    border: 1px solid rgba(255,255,255,0.72);
    color: var(--text-on-dark);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.05;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.detail-secondary-cta:hover {
    background: var(--text-on-dark);
    color: var(--text-primary);
    border-color: var(--text-on-dark);
}

.product-hero-specs {
    position: absolute;
    z-index: 3;
    left: 100px;
    right: 100px;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 900px;
    border-top: 1px solid rgba(255,255,255,0.30);
    background: rgba(8, 10, 18, 0.34);
    color: var(--text-on-dark);
}

.product-hero-specs div {
    min-height: 94px;
    padding: 22px 28px;
    border-right: 1px solid rgba(255,255,255,0.18);
}

.product-hero-specs div:last-child {
    border-right: 0;
}

.product-hero-specs strong {
    display: block;
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}

.product-hero-specs span {
    display: block;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
}

.detail-section-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 70px;
}

.detail-intro-section,
.detail-feature-section,
.model-range-section,
.detail-cta-section {
    padding: 96px 0;
}

/* ============================================
   ABOUT MEDALI PAGE
   ============================================ */
.brand-profile-main {
    background: var(--bg-white);
}

.brand-profile-page {
    background: #ffffff;
}

.brand-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #070a12;
}

.brand-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.brand-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 7, 16, 0.84) 0%, rgba(8, 14, 28, 0.54) 38%, rgba(9, 15, 31, 0.24) 100%),
        linear-gradient(180deg, rgba(15, 28, 62, 0.12) 0%, rgba(0, 0, 0, 0.28) 100%);
}

.brand-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 0;
    padding-top: 132px;
    padding-bottom: 80px;
}

.brand-hero-copy {
    max-width: 920px;
    color: var(--text-on-dark);
}

.brand-hero-title {
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: clamp(56px, 6vw, 72px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-on-dark);
    max-width: 12ch;
}

.brand-hero-sub {
    margin-top: 28px;
    max-width: 32ch;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

.brand-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 34px;
    max-width: 920px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.brand-hero-fact {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 20px 30px 20px 0;
    margin-right: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.brand-hero-fact:last-child {
    margin-right: 0;
    border-right: 0;
}

.brand-hero-fact strong {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    color: var(--text-on-dark);
}

.brand-hero-fact span {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.76);
}

.brand-hero-actions {
    margin-top: 34px;
}

.brand-story-section {
    padding: 132px 0 84px;
    background: #ffffff;
}

.brand-story-section,
.brand-metric-section,
.brand-proof-section,
.brand-footprint-section,
.brand-values-section,
.brand-cta-section {
    scroll-margin-top: 92px;
}

.brand-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: start;
}

.brand-story-copy {
    display: grid;
    gap: 18px;
}

.brand-profile-page .detail-section-title {
    margin-top: 14px;
    font-size: clamp(28px, 3vw, 32px);
    line-height: 1.14;
    letter-spacing: 0;
    max-width: 18ch;
}

.brand-story-copy p {
    max-width: 42ch;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.brand-metric-section {
    padding: 0 0 132px;
    background: #ffffff;
}

.brand-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 42px;
}

.brand-proof-section {
    padding: 0 0 132px;
    background: #ffffff;
}

.brand-proof-grid {
    display: grid;
    gap: 24px;
}

.brand-proof-card {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    background: #0b1223;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-proof-card-dark {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    background: #08111f;
}

.brand-proof-media {
    position: relative;
    min-height: 420px;
    background: linear-gradient(180deg, #101826 0%, #070b12 100%);
    overflow: hidden;
}

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

.brand-proof-media--night img {
    filter: saturate(0.82) brightness(0.62) contrast(1.08);
    transform: scale(1.03);
}

.brand-proof-media--night::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 10, 22, 0.34) 0%, rgba(6, 10, 22, 0.1) 42%, rgba(6, 10, 22, 0.46) 100%),
        linear-gradient(180deg, rgba(25, 53, 112, 0.18) 0%, rgba(0, 0, 0, 0.38) 100%);
}

.brand-proof-media--industrial {
    display: flex;
    align-items: flex-end;
    padding: 36px;
    background:
        radial-gradient(circle at 78% 18%, rgba(77, 101, 161, 0.34) 0%, rgba(77, 101, 161, 0) 34%),
        radial-gradient(circle at 20% 82%, rgba(42, 73, 130, 0.18) 0%, rgba(42, 73, 130, 0) 28%),
        linear-gradient(135deg, #111827 0%, #0a1020 52%, #05080f 100%);
}

.brand-industrial-glow {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.42;
}

.brand-industrial-grid {
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.brand-industrial-grid::before,
.brand-industrial-grid::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.12), rgba(255,255,255,0.02));
}

.brand-industrial-grid::before {
    top: 34%;
}

.brand-industrial-grid::after {
    top: 68%;
}

.brand-industrial-metrics {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    gap: 16px;
}

.brand-industrial-metrics div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-industrial-metrics div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.brand-industrial-metrics strong {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 300;
    line-height: 1;
    color: var(--text-on-dark);
}

.brand-industrial-metrics span {
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    text-align: right;
}

.brand-proof-copy {
    padding: 54px 54px 50px;
    display: grid;
    align-content: center;
}

.brand-proof-copy h3 {
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 32px);
    font-weight: 300;
    line-height: 1.14;
    color: var(--text-on-dark);
    max-width: 18ch;
}

.brand-proof-copy p {
    margin-top: 24px;
    max-width: 38ch;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.brand-proof-copy .section-eyebrow,
.brand-proof-card-dark .brand-proof-copy .section-eyebrow,
.brand-proof-card-dark .brand-proof-copy h3,
.brand-proof-card-dark .brand-proof-copy p {
    color: var(--text-on-dark);
}

.brand-proof-copy .section-eyebrow {
    color: rgba(255, 255, 255, 0.62);
}

.brand-proof-card-dark .brand-proof-copy p {
    color: rgba(255, 255, 255, 0.72);
}

.brand-platform-pill-grid {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.brand-platform-pill-grid span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.brand-footprint-section {
    padding: 0 0 132px;
    background: #ffffff;
}

.brand-section-head {
    max-width: 820px;
}

.brand-inline-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.brand-inline-cta .hero-cta,
.brand-inline-cta .detail-secondary-cta {
    min-height: 56px;
}

.brand-inline-cta--compact {
    margin-top: 0;
}

.brand-inline-cta--dark .detail-secondary-cta {
    border-color: rgba(255, 255, 255, 0.72);
    color: var(--text-on-dark);
}

.brand-inline-cta--dark .detail-secondary-cta:hover {
    background: var(--text-on-dark);
    color: var(--text-primary);
    border-color: var(--text-on-dark);
}

.brand-section-sub {
    margin-top: 22px;
    max-width: 42ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.brand-footprint-grid {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.brand-values-section {
    padding: 0 0 132px;
    background: #ffffff;
}

.brand-values-grid {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.brand-info-card {
    min-height: 228px;
    padding: 34px 34px 30px;
    background: #ffffff;
    border: 1px solid #eceef2;
    display: grid;
    align-content: start;
    transition: transform 0.28s var(--ease-bmw), box-shadow 0.28s var(--ease-bmw), border-color 0.28s var(--ease-bmw);
    box-shadow: 0 10px 30px rgba(7, 10, 18, 0.028);
}

.brand-info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(7, 10, 18, 0.085);
    border-color: rgba(10, 16, 32, 0.12);
}

.brand-card-kicker {
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--site-context-metainfo-color);
    letter-spacing: 0.08em;
}

.brand-info-card h3 {
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 300;
    line-height: 1.12;
    color: var(--text-primary);
    max-width: 12ch;
}

.brand-info-card p {
    margin-top: 16px;
    max-width: 30ch;
    font-size: 16px;
    line-height: 1.58;
    color: var(--text-secondary);
}

.brand-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.brand-card-link::before {
    content: "\2192";
    color: currentColor;
    font-size: 15px;
    line-height: 1;
}

.brand-card-link:hover {
    opacity: 0.68;
}

.brand-cta-section {
    padding: 0 0 132px;
}

.brand-cta-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
    gap: 42px;
    padding-top: 68px;
    padding-bottom: 68px;
    background: linear-gradient(135deg, #070b12 0%, #0c1426 100%);
}

.brand-cta-panel .section-eyebrow,
.brand-cta-panel .detail-section-title {
    color: var(--text-on-dark);
}

.detail-intro-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: start;
}

.detail-section-title {
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.detail-intro-copy {
    display: grid;
    gap: 22px;
    padding-top: 32px;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1.35;
}

.detail-feature-section {
    background: #f4f4f4;
}

.detail-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 56px;
    background: #d9d9d9;
}

.detail-feature-card {
    min-height: 300px;
    padding: 42px 38px;
    background: var(--bg-white);
}

.detail-feature-card span {
    display: block;
    margin-bottom: 44px;
    color: var(--bmw-blue);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.detail-feature-card h3 {
    margin-bottom: 18px;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--text-primary);
}

.detail-feature-card p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.35;
}

.model-range-header {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 54px;
}

.model-range-header p {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.35;
}

.scooter-model-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.scooter-model-card {
    display: block;
    background: transparent;
    border: none;
    overflow: visible;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.scooter-model-card:hover {
    transform: translateY(-4px);
    opacity: 0.92;
}

.scooter-model-card img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 20px 22px 18px;
    display: block;
    overflow: visible;
}

.model-card-body {
    padding: 26px 28px 30px;
    background: var(--bg-white);
}

.model-category {
    margin-bottom: 8px;
    color: var(--bmw-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-transform: uppercase;
}

.model-card-body h3 {
    margin-bottom: 22px;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
}

.model-card-body dl {
    display: grid;
    gap: 0;
}

.model-card-body dl div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 0;
    border-top: 1px solid #e7e7e7;
    font-size: 14px;
    line-height: 1.2;
}

.model-card-body dt {
    color: var(--text-secondary);
    font-weight: 400;
}

.model-card-body dd {
    color: var(--text-primary);
    font-weight: 700;
    text-align: right;
}

.detail-cta-section {
    background: #090909;
}

.detail-cta-panel {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 90px;
    align-items: end;
    color: var(--text-on-dark);
}

.detail-cta-panel .section-eyebrow,
.detail-cta-panel .detail-section-title {
    color: var(--text-on-dark);
}

.detail-cta-copy {
    display: grid;
    gap: 28px;
    color: rgba(255,255,255,0.74);
    font-size: 17px;
    line-height: 1.6;
}

.detail-cta-copy--actions {
    align-content: start;
}

.detail-cta-copy p {
    max-width: 34ch;
}

/* ============================================
   Single Model Detail Pages
   ============================================ */
.model-detail-page {
    background: var(--bg-white);
}

.model-detail-hero {
    position: relative;
    min-height: 100svh;
    padding: calc(var(--navbar-height) + 48px) 0 86px;
    background:
        radial-gradient(circle at 78% 18%, rgba(95, 118, 182, 0.48), transparent 34%),
        linear-gradient(135deg, #05070d 0%, #10172a 42%, #dde3f0 100%);
    overflow: hidden;
}

.model-detail-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 220px;
    background: linear-gradient(to top, rgba(5, 7, 13, 0.16), transparent);
    pointer-events: none;
}

.model-detail-hero-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.95fr);
    gap: 72px;
    align-items: center;
    min-height: calc(100svh - var(--navbar-height) - 134px);
}

.model-detail-copy {
    color: var(--text-on-dark);
}

.model-detail-copy .product-detail-sub {
    max-width: 560px;
}

.model-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.model-hero-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.model-hero-visual {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-hero-frame {
    position: absolute;
    inset: 38px 0 38px 38px;
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,247,250,0.9));
    box-shadow: 0 36px 72px rgba(0,0,0,0.22);
}

.model-hero-visual img {
    position: relative;
    z-index: 2;
    width: min(100%, 640px);
    max-height: 540px;
    object-fit: contain;
    filter: drop-shadow(0 26px 28px rgba(0,0,0,0.22));
}

.model-overview-section,
.model-related-section {
    padding: 96px 0;
}

.model-overview-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 32px;
}

.model-overview-card,
.model-spec-card {
    background: #f7f7f7;
    border: 1px solid #e8e8e8;
    padding: 42px 40px;
}

.model-overview-card p {
    margin-top: 28px;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.45;
}

.model-overview-card p + p {
    margin-top: 18px;
}

.model-spec-list {
    display: grid;
    gap: 0;
}

.model-spec-list div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid #e3e3e3;
}

.model-spec-list div:first-child {
    border-top: 0;
    padding-top: 0;
}

.model-spec-list dt {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.3;
}

.model-spec-list dd {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-align: right;
}

.model-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 54px;
    background: #d9d9d9;
}

.model-insight-card {
    min-height: 250px;
    padding: 36px 34px;
    background: var(--bg-white);
}

.model-insight-card span {
    display: inline-block;
    margin-bottom: 38px;
    color: var(--bmw-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.model-insight-card h3 {
    margin-bottom: 14px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.15;
}

.model-insight-card p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.4;
}

.related-models-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.related-model-card {
    display: block;
    background: transparent;
    border: none;
    overflow: visible;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.related-model-card:hover {
    transform: translateY(-4px);
    opacity: 0.92;
}

.related-model-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 22px 22px 18px;
    display: block;
    overflow: visible;
}

.related-model-body {
    padding: 24px 26px 28px;
    background: var(--bg-white);
}

.related-model-body p {
    margin-bottom: 8px;
    color: var(--bmw-blue);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.related-model-body h3 {
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
}

.related-model-body span {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.35;
}

@media (max-width: 1180px) {
    .product-detail-hero-content,
    .detail-section-inner {
        padding-left: 48px;
        padding-right: 48px;
    }
    .product-hero-specs {
        left: 48px;
        right: 48px;
    }
    .scooter-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .model-detail-hero-shell {
        grid-template-columns: 1fr;
        gap: 44px;
        min-height: auto;
    }
    .model-hero-visual {
        min-height: 520px;
    }
    .model-overview-grid,
    .related-models-grid {
        grid-template-columns: 1fr;
    }
    .model-insight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-detail-hero {
        min-height: 680px;
        height: 86svh;
    }
    .product-detail-hero-content {
        bottom: 152px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .product-detail-sub {
        font-size: 16px;
    }
    .product-detail-actions {
        align-items: stretch;
    }
    .detail-secondary-cta,
    .product-detail-actions .hero-cta {
        width: 100%;
        min-height: 56px;
    }
    .product-hero-specs {
        left: 24px;
        right: 24px;
        grid-template-columns: 1fr;
        max-width: none;
    }
    .product-hero-specs div {
        min-height: 68px;
        padding: 16px 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.16);
    }
    .product-hero-specs div:last-child {
        border-bottom: 0;
    }
    .product-hero-specs strong {
        font-size: 22px;
    }
    .detail-section-inner {
        padding-left: 24px;
        padding-right: 24px;
    }
    .detail-intro-section,
    .detail-feature-section,
    .model-range-section,
    .detail-cta-section {
        padding: 64px 0;
    }
    .detail-intro-grid,
    .model-range-header,
    .detail-cta-panel {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .detail-intro-copy {
        padding-top: 0;
        font-size: 16px;
    }
    .detail-feature-grid,
    .scooter-model-grid {
        grid-template-columns: 1fr;
    }
    .detail-feature-card {
        min-height: 240px;
        padding: 32px 26px;
    }
    .model-card-body h3 {
        font-size: 30px;
    }
    .model-detail-hero {
        padding: calc(var(--navbar-height) + 28px) 0 56px;
    }
    .model-hero-visual {
        min-height: 360px;
    }
    .model-hero-frame {
        inset: 18px 0 18px 18px;
    }
    .model-hero-visual img {
        max-height: 320px;
    }
    .model-overview-section,
    .model-related-section {
        padding: 64px 0;
    }
    .model-overview-card,
    .model-spec-card,
    .model-insight-card {
        padding: 28px 24px;
    }
    .model-overview-card p,
    .related-model-body span {
        font-size: 15px;
    }
    .related-model-body h3 {
        font-size: 28px;
    }
}


/* ============================================
   PRODUCT SHOWCASE PAGE - BMW offers inspired
   ============================================ */
.offers-page-section {
    padding-top: 56px;
}

.offers-intro {
    padding-bottom: 28px;
}

.product-showcase-root {
    width: 100%;
}

.showcase-page-bar {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 22px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    background: #ffffff;
}

.showcase-page-bar__left {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.showcase-page-bar__arrow {
    font-size: 28px;
    line-height: 1;
    color: var(--text-primary);
    transform: translateY(-3px);
}

.showcase-page-bar__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
}

.showcase-page-bar__link {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
font-size: 32px;
    font-weight: 300;
    line-height: 1;
}

.related-model-body span {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.35;
}

@media (max-width: 1180px) {
    .product-detail-hero-content,
    .detail-section-inner {
        padding-left: 48px;
        padding-right: 48px;
    }
    .product-hero-specs {
        left: 48px;
        right: 48px;
    }
    .scooter-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .model-detail-hero-shell {
        grid-template-columns: 1fr;
        gap: 44px;
        min-height: auto;
    }
    .model-hero-visual {
        min-height: 520px;
    }
    .model-overview-grid,
    .related-models-grid {
        grid-template-columns: 1fr;
    }
    .model-insight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-detail-hero {
        min-height: 680px;
        height: 86svh;
    }
    .product-detail-hero-content {
        bottom: 152px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .product-detail-sub {
        font-size: 16px;
    }
    .product-detail-actions {
        align-items: stretch;
    }
    .detail-secondary-cta,
    .product-detail-actions .hero-cta {
        width: 100%;
        min-height: 56px;
    }
    .product-hero-specs {
        left: 24px;
        right: 24px;
        grid-template-columns: 1fr;
        max-width: none;
    }
    .product-hero-specs div {
        min-height: 68px;
        padding: 16px 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.16);
    }
    .product-hero-specs div:last-child {
        border-bottom: 0;
    }
    .product-hero-specs strong {
        font-size: 22px;
    }
    .detail-section-inner {
        padding-left: 24px;
        padding-right: 24px;
    }
    .detail-intro-section,
    .detail-feature-section,
    .model-range-section,
    .detail-cta-section {
        padding: 64px 0;
    }
    .detail-intro-grid,
    .model-range-header,
    .detail-cta-panel {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .detail-intro-copy {
        padding-top: 0;
        font-size: 16px;
    }
    .detail-feature-grid,
    .scooter-model-grid {
        grid-template-columns: 1fr;
    }
    .detail-feature-card {
        min-height: 240px;
        padding: 32px 26px;
    }
    .model-card-body h3 {
        font-size: 30px;
    }
    .model-detail-hero {
        padding: calc(var(--navbar-height) + 28px) 0 56px;
    }
    .model-hero-visual {
        min-height: 360px;
    }
    .model-hero-frame {
        inset: 18px 0 18px 18px;
    }
    .model-hero-visual img {
        max-height: 320px;
    }
    .model-overview-section,
    .model-related-section {
        padding: 64px 0;
    }
    .model-overview-card,
    .model-spec-card,
    .model-insight-card {
        padding: 28px 24px;
    }
    .model-overview-card p,
    .related-model-body span {
        font-size: 15px;
    }
    .related-model-body h3 {
        font-size: 28px;
    }
}


/* ============================================
   PRODUCT SHOWCASE PAGE - BMW offers inspired
   ============================================ */
.offers-page-section {
    padding-top: 56px;
}

.offers-intro {
    padding-bottom: 28px;
}

.product-showcase-root {
    width: 100%;
}

.showcase-page-bar {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 22px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    background: #ffffff;
}

.showcase-page-bar__left {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.showcase-page-bar__arrow {
    font-size: 28px;
    line-height: 1;
    color: var(--text-primary);
    transform: translateY(-3px);
}

.showcase-page-bar__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
}

.showcase-page-bar__link {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ============================================
   PRODUCT RANGE / ALL MODELS CATALOG
   Automotive 3-column editorial matrix
   ============================================ */
.product-range-page {
    background: var(--canvas);
    color: var(--text-primary);
}

.product-range-page .top-header {
    position: relative;
    background: var(--canvas);
    height: var(--navbar-height);
    color: var(--text-primary);
    border-bottom: 1px solid var(--rule);
}

.product-range-page .header-inner {
    max-width: 1600px;
    padding: 0 56px;
}

.product-range-page .nav-link,
.product-range-page .nav-dropdown-btn,
.product-range-page .header-center-link,
.product-range-page .icon-btn {
    color: var(--text-primary);
}

.models-catalog-shell {
    width: 100%;
    background: var(--canvas);
    padding-bottom: 96px;
}

.models-catalog-header {
    padding: 64px 0 36px;
    border-bottom: 1px solid var(--rule);
    background: var(--canvas);
}

.models-catalog-header .detail-section-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 56px;
}

.models-catalog-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 300;
    line-height: 1.08;
    color: var(--text-primary);
    margin: 10px 0 14px;
}

.models-catalog-sub {
    font-size: 17px;
    color: var(--text-secondary);
    max-width: 680px;
    line-height: 1.5;
}

/* Sticky Filter & Search Bar */
.models-filter-bar-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
}

.models-filter-bar-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 68px;
}

.models-filter-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.models-filter-tabs::-webkit-scrollbar { display: none; }

.models-filter-tab {
    position: relative;
    border: none;
    background: transparent;
    padding: 12px 18px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s ease;
    border-radius: var(--r);
}

.models-filter-tab:hover {
    color: var(--text-primary);
}

.models-filter-tab.active {
    color: var(--text-primary);
    font-weight: 600;
}

.models-filter-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--action-blue);
}

.models-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 280px;
    flex-shrink: 0;
}

.models-search-box svg {
    position: absolute;
    left: 14px;
    color: var(--text-secondary);
    pointer-events: none;
}

.models-search-input {
    width: 100%;
    min-height: 42px;
    padding: 8px 14px 8px 40px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--surface-quiet);
    border: 1px solid transparent;
    border-radius: var(--r);
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.models-search-input:focus {
    background: #ffffff;
    border-color: var(--action-blue);
}

/* Vehicle Matrix Grid */
.models-matrix-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 48px 56px 64px;
}

.models-matrix-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
}

.models-count-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.models-count-label strong {
    color: var(--text-primary);
    font-weight: 700;
}

.models-matrix-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.models-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 6px;
    height: 6px;
    background: var(--action-blue);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(28, 105, 212, 0.6);
}

.models-matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.vehicle-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    transition: transform 0.28s var(--ease-automotive), box-shadow 0.28s var(--ease-automotive), border-color 0.28s ease;
}

.vehicle-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-4px);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.vehicle-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f4f6f8 65%, #e9edf2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    border-bottom: 1px solid #edf0f4;
}

.vehicle-card-stage-glow {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 70%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.vehicle-card-watermark {
    position: absolute;
    top: 14px;
    left: 18px;
    font-family: var(--font-display);
    font-size: clamp(48px, 6vw, 76px);
    font-weight: 300;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: rgba(15, 23, 42, 0.05);
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.vehicle-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1559b0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    border: 1px solid rgba(21, 89, 176, 0.2);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.vehicle-card-media img {
    position: relative;
    max-width: 90%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.12));
    transition: transform 0.28s var(--ease-automotive), filter 0.28s ease;
}

.vehicle-card:hover .vehicle-card-media img {
    transform: scale(1.035) translateY(-2px);
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.16));
}

.vehicle-card-shadow {
    position: absolute;
    bottom: 12px;
    left: 15%;
    width: 70%;
    height: 12px;
    background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%);
    pointer-events: none;
    z-index: 1;
}

.vehicle-card-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    padding: 22px 24px;
    gap: 16px;
    background: #ffffff;
}

.vehicle-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vehicle-card-kicker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vehicle-card-kicker {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vehicle-card-category-tag {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 2px;
}

.vehicle-card-name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--text-primary);
    margin: 2px 0 0;
    letter-spacing: 0.01em;
}

.vehicle-card-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s ease;
}

.vehicle-card-name a:hover {
    color: var(--action-blue);
}

.vehicle-card-focus {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* HUD Performance Specs */
.vehicle-card-hud {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0px;
    padding: 10px 8px;
}

.vehicle-hud-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 0 4px;
}

.vehicle-hud-col:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}

.vehicle-hud-value {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.vehicle-hud-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
}

/* B2B Strip */
.vehicle-card-b2b-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: #fafbfc;
    border: 1px solid #edf2f7;
    font-size: 12px;
    color: #475569;
}

.vehicle-b2b-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vehicle-b2b-item svg {
    color: var(--action-blue);
    flex-shrink: 0;
}

.vehicle-b2b-item strong {
    color: #0f172a;
    font-weight: 700;
}

.vehicle-b2b-cert {
    font-size: 11px;
    font-weight: 600;
    color: #059669;
}

.vehicle-b2b-cert svg {
    color: #059669;
}

/* Card Actions */
.vehicle-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
}

.vehicle-btn-primary {
    flex: 1.3;
    min-height: 44px;
    background: var(--action-blue);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

.vehicle-btn-primary:hover {
    background: var(--action-blue-hover);
    color: #ffffff;
}

.vehicle-btn-secondary {
    flex: 1;
    min-height: 44px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    border-radius: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vehicle-btn-secondary:hover {
    border-color: var(--text-primary);
    background: #0f172a;
    color: #ffffff;
}

.vehicle-btn-secondary:hover svg {
    stroke: #ffffff;
}

.models-empty-state {
    padding: 64px 0;
    text-align: center;
    color: var(--text-secondary);
}

.models-clear-btn {
    margin-top: 16px;
    padding: 10px 22px;
    background: var(--surface-quiet);
    border: 1px solid var(--rule);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--r);
}

@media (max-width: 1280px) {
    .product-range-page .header-inner,
    .models-catalog-header .detail-section-inner,
    .models-filter-bar-inner,
    .models-matrix-container {
        padding-left: 32px;
        padding-right: 32px;
    }
    .models-matrix-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .product-range-page .header-inner,
    .models-catalog-header .detail-section-inner,
    .models-filter-bar-inner,
    .models-matrix-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .models-catalog-header {
        padding: 40px 0 24px;
    }
    .models-filter-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .models-search-box {
        width: 100%;
    }
    .models-matrix-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .vehicle-card-media {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 1280px) {
    .brand-metric-grid,
    .brand-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brand-proof-copy {
        padding: 44px 40px;
    }
}

@media (max-width: 1024px) {
    .brand-hero {
        min-height: auto;
    }

    .brand-hero-inner {
        min-height: auto;
        grid-template-columns: 1fr;
        align-items: end;
        gap: 28px;
        padding-top: 122px;
        padding-bottom: 56px;
    }

    .brand-hero-copy,
    .brand-hero-sub {
        max-width: 100%;
    }

    .brand-story-grid,
    .brand-proof-card,
    .brand-proof-card-dark,
    .brand-cta-panel {
        grid-template-columns: 1fr;
    }

    .brand-story-section,
    .brand-metric-section,
    .brand-proof-section,
    .brand-footprint-section,
    .brand-values-section,
    .brand-cta-section {
        padding-bottom: 84px;
    }

    .brand-footprint-grid {
        grid-template-columns: 1fr;
    }

    .brand-proof-media {
        min-height: 320px;
    }
}

@media (max-width: 768px) {
    .brand-hero-inner {
        padding-top: 108px;
        padding-bottom: 36px;
    }

    .brand-hero-title {
        font-size: clamp(42px, 12vw, 56px);
    }

    .brand-hero-sub,
    .brand-story-copy p,
    .brand-proof-copy p,
    .brand-section-sub {
        font-size: 16px;
    }

    .brand-hero-facts {
        margin-top: 26px;
        display: grid;
        grid-template-columns: 1fr;
    }

    .brand-inline-cta {
        gap: 12px;
    }

    .brand-inline-cta .hero-cta,
    .brand-inline-cta .detail-secondary-cta {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .brand-profile-page .detail-section-title,
    .brand-proof-copy h3,
    .brand-info-card h3 {
        max-width: none;
    }

    .brand-hero-fact {
        margin-right: 0;
        padding: 16px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .brand-hero-fact:last-child {
        border-bottom: 0;
    }

    .brand-story-section {
        padding-top: 78px;
    }

    .brand-metric-grid,
    .brand-values-grid {
        grid-template-columns: 1fr;
    }

    .brand-metric-card,
    .brand-footprint-card,
    .brand-value-card {
        min-height: auto;
    }

    .brand-proof-copy {
        padding: 34px 24px;
    }

    .brand-proof-media {
        min-height: 260px;
    }

    .brand-cta-panel {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .brand-hero-actions {
        gap: 12px;
    }

    .brand-hero-actions .hero-cta,
    .brand-hero-actions .detail-secondary-cta {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .brand-hero-fact {
        gap: 8px;
    }

    .brand-hero-fact strong {
        font-size: 30px;
    }
}

/* ============================================
   Model Detail Enhancements
   ============================================ */

.model-facts-section,
.model-scenario-section,
.model-custom-section {
    padding: 0 0 84px;
    background: var(--bg-white);
}

.model-facts-section {
    margin-top: -64px;
    position: relative;
    z-index: 3;
    background: transparent;
}

.model-facts-header {
    margin-bottom: 20px;
}

.model-facts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.model-fact-card {
    min-height: 164px;
    padding: 28px 28px 32px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(11, 20, 38, 0.08);
    box-shadow: 0 20px 44px rgba(10, 14, 24, 0.14);
    backdrop-filter: blur(10px);
}

.model-fact-card p,
.model-scenario-card > p {
    margin-bottom: 22px;
    color: var(--bmw-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.model-fact-card strong {
    display: block;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 300;
    line-height: 1.1;
}

.model-scenario-grid,
.model-custom-grid,
.model-process-grid {
    display: grid;
    gap: 28px;
}

.model-scenario-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.model-custom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.model-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.model-scenario-card,
.model-custom-card,
.model-process-card {
    min-height: 100%;
    padding: 34px 32px 36px;
    background: #f7f7f7;
    border: 1px solid #ececec;
}

.model-scenario-card h3,
.model-custom-card h3,
.model-process-card h3 {
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.1vw, 34px);
    font-weight: 300;
    line-height: 1.05;
    color: var(--text-primary);
}

.model-scenario-card p:last-child,
.model-custom-card p,
.model-process-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.45;
}

.model-custom-header {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 32px;
    align-items: end;
}

.model-custom-card--contact {
    grid-column: 1 / -1;
    background:
        linear-gradient(135deg, rgba(12,12,12,0.94), rgba(20,28,46,0.96)),
        #0c0c0c;
    border-color: rgba(255,255,255,0.08);
    display: grid;
    gap: 14px;
    align-content: start;
}

.model-custom-card--contact h3,
.model-custom-card--contact p {
    color: var(--text-on-dark);
}

.model-custom-card--contact .hero-cta {
    margin-top: 30px;
}

.model-process-card {
    background: var(--bg-white);
}

.model-process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 52px;
    margin-bottom: 30px;
    border: 1px solid rgba(28, 105, 212, 0.22);
    color: var(--bmw-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

@media (max-width: 1180px) {
    .model-facts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .model-scenario-grid,
    .model-process-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .model-facts-section,
    .model-scenario-section,
    .model-custom-section {
        padding-bottom: 64px;
    }

    .model-facts-section {
        margin-top: -28px;
    }

    .model-facts-grid,
    .model-custom-grid {
        grid-template-columns: 1fr;
    }

    .model-fact-card,
    .model-scenario-card,
    .model-custom-card,
    .model-process-card {
        padding: 26px 22px 28px;
    }

    .model-custom-header {
        margin-bottom: 24px;
    }
}

/* ============================================
   Model Detail Sales Page Refresh
   ============================================ */

.model-detail-page {
    background: #ffffff;
}

.model-detail-hero {
    min-height: 92svh;
    padding: calc(var(--navbar-height) + 38px) 0 78px;
    background:
        radial-gradient(circle at 82% 18%, rgba(90, 106, 154, 0.48), transparent 32%),
        linear-gradient(115deg, #05070d 0%, #0f1523 42%, #646f88 100%);
}

.model-detail-hero-shell {
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.88fr);
    gap: 84px;
    align-items: end;
    min-height: calc(92svh - var(--navbar-height));
}

.model-detail-copy .product-detail-sub {
    max-width: 620px;
    font-size: clamp(23px, 2vw, 31px);
    line-height: 1.2;
    color: rgba(255,255,255,0.94);
}

.product-detail-actions {
    margin-top: 34px;
}

.model-hero-tags {
    margin-top: 34px;
    gap: 10px;
}

.model-hero-tags span {
    min-height: 38px;
    padding: 0 16px;
    border-color: rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.model-hero-frame {
    inset: 52px 0 52px 52px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,245,248,0.92));
    box-shadow: 0 42px 86px rgba(0,0,0,0.22);
}

.model-hero-visual img {
    width: min(100%, 680px);
    max-height: 560px;
}

.model-sales-section {
    padding: 104px 0;
    background: #ffffff;
}

.model-section-head {
    display: grid;
    gap: 14px;
    margin-bottom: 42px;
}

.model-section-head--split {
    grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.7fr);
    gap: 32px;
    align-items: end;
}

.model-sales-title {
    max-width: 16ch;
}

.model-section-intro {
    margin: 0;
    color: #666666;
    font-size: 16px;
    line-height: 1.5;
}

.model-key-specs-section {
    margin-top: -84px;
    position: relative;
    z-index: 4;
    background: transparent;
    padding-bottom: 78px;
}

.model-key-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.model-key-spec-card {
    min-height: 192px;
    padding: 26px 24px 30px;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(17, 23, 37, 0.08);
    box-shadow: 0 22px 44px rgba(10, 15, 24, 0.12);
}

.model-key-spec-card p {
    margin-bottom: 18px;
    color: var(--bmw-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.model-key-spec-card strong {
    display: block;
    color: #222222;
    font-family: var(--font-display);
    font-size: clamp(26px, 2.3vw, 38px);
    font-weight: 300;
    line-height: 1.08;
}

.model-highlights-section {
    background: #f5f5f5;
}

.model-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #dcdcdc;
}

.model-highlight-card {
    min-height: 260px;
    padding: 34px 30px 36px;
    background: #ffffff;
}

.model-highlight-card span {
    display: inline-block;
    margin-bottom: 44px;
    color: var(--bmw-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.model-highlight-card h3,
.model-use-case-card h3,
.model-platform-card h3,
.model-variants-head h3 {
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: clamp(28px, 2.5vw, 38px);
    font-weight: 300;
    line-height: 1.05;
    color: #262626;
}

.model-highlight-card p,
.model-use-case-card p,
.model-platform-copy p,
.model-full-specs-note {
    margin: 0;
    color: #6b6b6b;
    font-size: 16px;
    line-height: 1.5;
}

.model-use-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.model-use-case-card {
    min-height: 240px;
    padding: 32px 28px 34px;
    border-top: 2px solid var(--action-blue);
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    background: #fbfbfb;
}

.model-platform-section {
    background: #ffffff;
}

.model-platform-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 28px;
    align-items: start;
}

.model-platform-card,
.model-full-specs-panel {
    padding: 38px 34px 40px;
    background: #f7f7f7;
    border: 1px solid #e8e8e8;
}

.model-platform-card > p,
.model-variants-head p {
    margin-bottom: 18px;
    color: var(--bmw-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.model-platform-copy {
    display: grid;
    gap: 16px;
    margin-bottom: 30px;
}

.model-platform-copy strong {
    color: #262626;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.model-platform-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.model-platform-modules h4 {
    width: 100%;
    margin-bottom: 8px;
    color: #6b6b6b;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.model-platform-modules span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #d8d8d8;
    color: #262626;
    font-size: 13px;
    line-height: 1.2;
    background: #ffffff;
}

.model-variants-panel {
    display: grid;
    gap: 24px;
}

.model-variants-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.model-variant-card {
    display: block;
    padding: 22px 18px 24px;
    border: 1px solid #ebebeb;
    background: #ffffff;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.model-variant-card:hover {
    transform: translateY(-4px);
    border-color: #cfd9ea;
}

.model-variant-card img {
    width: 100%;
    height: 156px;
    object-fit: contain;
    margin-bottom: 16px;
}

.model-variant-body p {
    margin-bottom: 8px;
    color: var(--bmw-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.model-variant-body h4 {
    margin-bottom: 10px;
    color: #262626;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 300;
    line-height: 1.02;
}

.model-variant-body span {
    color: #707070;
    font-size: 14px;
    line-height: 1.4;
}

.model-full-specs-section {
    background: #f4f4f4;
}

.model-full-specs-list {
    display: grid;
    gap: 0;
}

.model-full-specs-list div {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid #e3e3e3;
}

.model-full-specs-list div:first-child {
    padding-top: 0;
    border-top: 0;
}

.model-full-specs-list dt {
    color: #7a7a7a;
    font-size: 14px;
    line-height: 1.35;
}

.model-full-specs-list dd {
    color: #262626;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

@media (max-width: 1180px) {
    .model-detail-hero-shell,
    .model-section-head--split,
    .model-platform-grid {
        grid-template-columns: 1fr;
    }

    .model-key-specs-grid,
    .model-highlight-grid,
    .model-use-case-grid,
    .model-variants-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .model-detail-hero {
        min-height: auto;
        padding: calc(var(--navbar-height) + 26px) 0 56px;
    }

    .model-detail-hero-shell {
        gap: 40px;
    }

    .model-detail-copy .product-detail-sub {
        font-size: 20px;
    }

    .model-hero-frame {
        inset: 20px 0 20px 20px;
    }

    .model-sales-section {
        padding: 70px 0;
    }

    .model-key-specs-section {
        margin-top: -26px;
        padding-bottom: 56px;
    }

    .model-key-specs-grid,
    .model-highlight-grid,
    .model-use-case-grid,
    .model-variants-grid {
        grid-template-columns: 1fr;
    }

    .model-key-spec-card,
    .model-highlight-card,
    .model-use-case-card,
    .model-platform-card,
    .model-full-specs-panel,
    .model-variant-card {
        padding: 24px 22px 26px;
    }

    .model-highlight-card span {
        margin-bottom: 30px;
    }

    .model-full-specs-list div {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Model Detail BMW-style Sales Page */
.model-sales-hero {
    position: relative;
    padding: calc(var(--navbar-height) + 34px) 0 88px;
    background:
        linear-gradient(118deg, #06080c 0%, #0f1115 46%, #1a1c20 100%);
    overflow: hidden;
}

.model-sales-hero.model-detail-hero {
    min-height: auto;
}

.model-sales-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 25%);
    background-size: auto, 220px 100%;
    opacity: 0.42;
    pointer-events: none;
}

.model-sales-hero-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
    gap: 48px;
    align-items: center;
}

.model-sales-hero-shell.model-detail-hero-shell {
    min-height: auto;
}

.model-sales-hero-visual {
    position: relative;
    min-height: 560px;
    padding: 44px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, #fafafa 0%, #ededed 100%);
}

.model-sales-hero-visual::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    pointer-events: none;
}

.model-sales-hero-visual::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 58px;
    height: 54px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(10px);
    pointer-events: none;
}

.model-sales-hero-visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 472px;
    object-fit: contain;
}

.model-sales-hero-copy {
    display: grid;
    gap: 22px;
    color: #ffffff;
}

.model-sales-hero-copy .section-eyebrow {
    margin-bottom: 0;
}

.model-sales-hero-copy .product-detail-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(52px, 5vw, 76px);
    font-weight: 300;
    line-height: 0.96;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.model-sales-hero-copy .product-detail-sub {
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
}

.model-sales-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 6px;
    background: rgba(255, 255, 255, 0.1);
}

.model-sales-metric {
    display: grid;
    gap: 10px;
    min-height: 130px;
    padding: 24px 22px 20px;
    background: rgba(255, 255, 255, 0.04);
}

.model-sales-metric strong {
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 300;
    line-height: 1;
}

.model-sales-metric span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.model-sales-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.model-sales-actions .hero-cta,
.model-sales-actions .detail-secondary-cta {
    min-width: 168px;
    justify-content: center;
}

.model-sales-actions .detail-secondary-cta {
    color: #111111;
    border-color: #ffffff;
    background: #ffffff;
}

.model-sales-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.model-sales-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.model-sales-section {
    padding: 96px 0;
    background: #ffffff;
}

.model-sales-section:nth-of-type(even) {
    background: #f5f5f5;
}

.model-sales-section-head {
    display: grid;
    gap: 14px;
    margin-bottom: 34px;
}

.model-sales-section-head--split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
}

.model-sales-section .detail-section-title {
    max-width: 860px;
    margin: 0;
    color: #111111;
    font-size: clamp(34px, 3vw, 48px);
    font-weight: 300;
    line-height: 1.02;
    text-transform: uppercase;
}

.model-key-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    gap: 0;
    border: 1px solid #dcdcdc;
    background: #ffffff;
}

.model-key-panel-media {
    min-height: 480px;
}

.model-key-panel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-key-panel-body {
    display: grid;
    align-content: center;
    padding: 40px 42px;
    background: #ffffff;
}

.model-key-panel-header p {
    margin: 0 0 22px;
    color: var(--action-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.model-key-spec-list {
    display: grid;
    border-top: 1px solid #dedede;
}

.model-key-spec-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid #ededed;
}

.model-key-spec-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d5dbe5;
    color: var(--action-blue);
    background: #f8fafc;
}

.model-key-spec-icon svg {
    width: 18px;
    height: 18px;
}

.model-key-spec-copy {
    display: grid;
    gap: 8px;
}

.model-key-spec-copy strong {
    color: #202020;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
}

.model-key-spec-copy span {
    color: #636363;
    font-size: 15px;
    line-height: 1.4;
}

.model-highlight-sales-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.model-highlight-sales-card {
    display: grid;
    gap: 18px;
    min-height: 238px;
    padding: 30px 26px 28px;
    border-top: 2px solid var(--action-blue);
    border-right: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
    background: #ffffff;
}

.model-highlight-sales-card h3,
.model-use-case-sales-body h3,
.model-platform-summary-card h3 {
    margin: 0;
    color: #111111;
    font-size: clamp(24px, 2.1vw, 34px);
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
}

.model-highlight-sales-card p,
.model-use-case-sales-body p,
.model-platform-version-card p,
.model-spec-tabs-note,
.model-platform-variant-body span {
    margin: 0;
    color: #666666;
    font-size: 15px;
    line-height: 1.45;
}

.model-use-case-sales-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.model-use-case-sales-card {
    display: grid;
    background: #ffffff;
    border: 1px solid #e7e7e7;
}

.model-use-case-sales-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.model-use-case-sales-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.model-use-case-sales-card:hover .model-use-case-sales-media img {
    transform: scale(1.04);
}

.model-use-case-sales-body {
    display: grid;
    gap: 14px;
    padding: 24px 22px 26px;
}

.model-platform-sales-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: start;
}

.model-platform-summary-card,
.model-platform-variants-card,
.model-spec-tabs-panel {
    border: 1px solid #e2e2e2;
    background: #ffffff;
}

.model-platform-summary-card,
.model-platform-variants-card {
    padding: 32px;
}

.model-platform-summary-card > span,
.model-platform-variants-card > span {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--action-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.model-platform-version-grid {
    display: grid;
    gap: 1px;
    margin-top: 28px;
    background: #e8e8e8;
}

.model-platform-version-card {
    display: grid;
    gap: 8px;
    padding: 18px 20px;
    background: #ffffff;
}

.model-platform-version-card strong,
.model-platform-variant-body p {
    color: #111111;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.model-platform-variants-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 10px;
}

.model-platform-variant-card {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid #ececec;
    background: #ffffff;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.model-platform-variant-card:hover {
    border-color: #c4d4ea;
    transform: translateY(-4px);
}

.model-platform-variant-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.model-platform-variant-body {
    display: grid;
    gap: 8px;
}

.model-platform-variant-body h4 {
    margin: 0;
    color: #111111;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 300;
    line-height: 1;
}

.model-spec-tabs-note {
    max-width: 420px;
}

.model-spec-tabs-panel {
    overflow: hidden;
}

.model-spec-tabs-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid #e6e6e6;
    background: #f7f7f7;
}

.model-spec-tab-btn {
    min-height: 68px;
    padding: 18px 16px;
    border: 0;
    border-right: 1px solid #e6e6e6;
    color: #6a6a6a;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.model-spec-tab-btn:last-child {
    border-right: 0;
}

.model-spec-tab-btn.is-active {
    color: #111111;
    background: #ffffff;
    box-shadow: inset 0 -2px 0 var(--action-blue);
}

.model-spec-tab-content {
    padding: 18px 32px 10px;
}

.model-spec-tab-list {
    display: grid;
}

.model-spec-tab-list div {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid #ececec;
}

.model-spec-tab-list div:first-child {
    border-top: 0;
}

.model-spec-tab-list dt {
    color: #767676;
    font-size: 14px;
    line-height: 1.35;
}

.model-spec-tab-list dd {
    color: #111111;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.model-inline-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.detail-cta-section {
    padding: 96px 0 120px;
    background: #0b0d10;
}

.detail-cta-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.76fr);
    gap: 36px;
    align-items: end;
}

.detail-cta-section .detail-section-title,
.detail-cta-copy p {
    color: #ffffff;
}

.detail-cta-copy {
    display: grid;
    gap: 24px;
}

.detail-cta-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    line-height: 1.45;
}

.model-floating-cta {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    display: grid;
    gap: 10px;
    width: min(244px, calc(100vw - 28px));
}

.model-floating-cta__primary,
.model-floating-cta__secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}

.model-floating-cta__primary {
    color: #ffffff;
    background: var(--action-blue);
}

.model-floating-cta__secondary {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(11, 13, 16, 0.94);
    backdrop-filter: blur(10px);
}

@media (max-width: 1180px) {
    .model-sales-hero-shell,
    .model-key-panel,
    .model-platform-sales-grid,
    .detail-cta-panel,
    .model-sales-section-head--split {
        grid-template-columns: 1fr;
    }

    .model-highlight-sales-grid,
    .model-use-case-sales-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .model-sales-hero {
        padding: calc(var(--navbar-height) + 22px) 0 60px;
    }

    .model-sales-hero-shell {
        gap: 28px;
    }

    .model-sales-hero-visual {
        min-height: auto;
        padding: 26px;
    }

    .model-sales-hero-visual::before {
        inset: 14px;
    }

    .model-sales-hero-visual img {
        height: 320px;
    }

    .model-sales-hero-copy .product-detail-title {
        font-size: clamp(42px, 12vw, 56px);
    }

    .model-sales-hero-metrics,
    .model-spec-tabs-nav,
    .model-highlight-sales-grid,
    .model-use-case-sales-grid,
    .model-platform-variants-grid {
        grid-template-columns: 1fr;
    }

    .model-key-panel-media {
        min-height: 280px;
    }

    .model-key-panel-body,
    .model-platform-summary-card,
    .model-platform-variants-card,
    .model-spec-tab-content {
        padding: 24px;
    }

    .model-spec-tab-list div {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .model-inline-cta--stack-mobile,
    .model-sales-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .model-floating-cta {
        right: 12px;
        bottom: 12px;
        width: min(220px, calc(100vw - 24px));
    }
}

/* Homepage composition distilled from the supplied automotive references. */
.home-page .top-header {
    position: absolute;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0));
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.home-page .top-header .header-inner::after {
    background: rgba(255, 255, 255, 0.72);
}

.home-page .top-header .nav-link,
.home-page .top-header .nav-dropdown-btn,
.home-page .top-header .header-center-link,
.home-page .top-header .icon-btn,
.home-page .top-header .mobile-hamburger {
    color: #ffffff;
}

.home-page .top-header.models-open {
    position: fixed;
    background: #ffffff;
}

.home-page .top-header.models-open .nav-link,
.home-page .top-header.models-open .nav-dropdown-btn,
.home-page .top-header.models-open .header-center-link,
.home-page .top-header.models-open .icon-btn,
.home-page .top-header.models-open .mobile-hamburger {
    color: #202020;
}

.home-page .top-header.models-open .header-inner::after {
    background: #d7d7d7;
}

.home-page .hero-section {
    height: min(82svh, 860px);
    min-height: 660px;
    max-height: none;
}

.home-page .hero-section::after {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.38) 38%, rgba(0, 0, 0, 0.05) 70%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.46) 0%, transparent 38%);
}

/* 巴西整图广告：提亮产品，仅在左侧保留克制的文案对比层。 */
.home-page .hero-section.hero-region-fullmode .hero-bg-img {
    filter: saturate(1.04) contrast(1.02) brightness(1.03);
}

.home-page .hero-section.hero-region-fullmode::after {
    background:
        linear-gradient(90deg, rgba(24, 13, 7, 0.58) 0%, rgba(24, 13, 7, 0.32) 34%, rgba(24, 13, 7, 0.06) 61%, transparent 75%),
        linear-gradient(0deg, rgba(24, 13, 7, 0.20) 0%, transparent 34%);
}

.home-page .hero-content {
    bottom: 104px;
    max-width: 1760px;
    padding-left: max(56px, calc((100vw - 1600px) / 2 + 56px));
}

.home-page .hero-heading {
    max-width: 690px;
    font-size: clamp(48px, 4.5vw, 72px);
    line-height: 1.04;
}

.home-page .hero-sub {
    max-width: 650px;
    font-size: 18px;
    line-height: 1.45;
}

.hero-cta-secondary {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 255, 255, 0.92);
}

.hero-cta-secondary:hover {
    color: #111111;
    background: #ffffff;
    border-color: #ffffff;
}

.home-page .products-section {
    padding-top: 94px;
}

.home-page .section-inner {
    max-width: 1600px;
}

.home-page .section-title {
    margin-bottom: 12px;
    text-transform: none;
}

.home-page .product-banners {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    width: calc(100% - 112px);
    max-width: 1488px;
    margin: 0 auto;
}

.home-page .product-banner {
    height: clamp(590px, 58vw, 710px);
    max-height: 710px;
    background: #111111;
}

/*
 * 小框广告车位规则：焦点是让车辆主体在当前卡片比例内横向居中的 object-position，
 * 不是图片几何中心，也不能直接使用车辆在原图中的坐标百分比。
 * 地区运行时换图时，会由 js/region-config.js 同步覆盖这个变量。
 */
.home-page .product-banner img {
    object-position: var(--vehicle-focal-x, 50%) center;
}

.home-page .product-banner--guard-4 { --vehicle-focal-x: 54%; }
.home-page .product-banner--xo-6 { --vehicle-focal-x: 80%; }
.home-page .product-banner--xz-16 { --vehicle-focal-x: 82%; }

.home-page .banner-overlay {
    align-items: flex-end;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.56) 38%, transparent 72%);
}

.home-page .product-banner:hover .banner-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.62) 40%, rgba(0, 0, 0, 0.04) 76%);
}

.home-page .banner-content {
    width: 100%;
    max-width: none;
    padding: 0 48px 46px;
}

.home-page .banner-label {
    color: rgba(255, 255, 255, 0.82);
}

.home-page .banner-title {
    font-size: clamp(30px, 2.45vw, 42px);
    text-transform: none;
}

.home-page .banner-desc {
    min-height: 2.7em;
    color: rgba(255, 255, 255, 0.8);
}

.home-page .banner-cta-primary {
    min-width: 100%;
    min-height: 54px;
    padding: 0 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.9);
    text-transform: none;
}

.home-page .banner-cta-primary:hover {
    color: #111111;
    background: #ffffff;
    border-color: #ffffff;
    transform: none;
}

.home-page .banner-cta-secondary {
    display: none;
}

.home-feature-story {
    position: relative;
    display: block;
    width: 100%;
    height: min(72svh, 760px);
    min-height: 560px;
    margin-top: 96px;
    overflow: hidden;
    color: #ffffff;
    background: #0b0b0b;
}

.home-feature-story > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s var(--ease-automotive);
}

.home-feature-story:hover > img {
    transform: scale(1.018);
}

.home-feature-story__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.14) 58%), linear-gradient(0deg, rgba(0, 0, 0, 0.42), transparent 45%);
}

.home-feature-story__content {
    position: absolute;
    left: max(56px, calc((100vw - 1600px) / 2 + 56px));
    bottom: 82px;
    display: grid;
    gap: 14px;
    max-width: 640px;
}

.home-feature-story__content small {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.home-feature-story__content strong {
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 78px);
    font-weight: 300;
    line-height: 1;
}

.home-feature-story__content > span {
    font-size: 17px;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .home-page .product-banners {
        grid-template-columns: 1fr;
        width: calc(100% - 64px);
        gap: 32px;
    }

    .home-page .product-banner {
        height: min(72svh, 680px);
    }
}

@media (max-width: 768px) {
    .home-page .top-header,
    .home-page .top-header.models-open {
        position: absolute;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0));
    }

    .home-page .top-header.models-open {
        position: fixed;
        background: #ffffff;
    }

    .home-page .hero-section {
        height: 82svh;
        min-height: 620px;
    }

    .home-page .hero-content {
        bottom: 54px;
        padding: 0 24px;
    }

    .home-page .hero-heading {
        font-size: clamp(40px, 12vw, 56px);
    }

    .home-page .hero-sub {
        font-size: 15px;
    }

    .home-page .hero-actions {
        display: grid;
        width: min(100%, 320px);
    }

    .home-page .hero-cta {
        width: 100%;
        max-width: none;
        min-height: 54px;
    }

    .home-page .products-section {
        padding-top: 64px;
    }

    .home-page .section-inner {
        padding: 0 24px;
    }

    .home-page .product-banners {
        width: calc(100% - 32px);
    }

    .home-page .product-banner {
        height: 620px;
    }

    .home-page .banner-content {
        padding: 0 24px 28px;
    }

    .home-feature-story {
        min-height: 560px;
        margin-top: 64px;
    }

    .home-feature-story__content {
        left: 24px;
        right: 24px;
        bottom: 44px;
    }
}

/* BMW-inspired Model Detail Refresh */
.model-detail-page {
    padding-top: var(--navbar-height);
    background: #ffffff;
}

.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: var(--navbar-height);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #dddddd;
    box-shadow: none;
}

.top-header.scrolled,
.top-header.models-open,
.top-header.models-open.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: none;
}

.header-inner {
    width: 100%;
    max-width: 1760px;
    padding: 0 28px;
}

.header-inner::after {
    left: 28px;
    right: 28px;
    background: #dddddd;
}

.header-logo svg {
    width: 44px;
    height: 44px;
}

.header-nav {
    gap: 4px;
    margin-left: 24px;
}

.nav-link,
.nav-dropdown-btn {
    padding: 0 14px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: #202020;
}

.nav-link:hover,
.nav-dropdown-btn:hover,
.icon-btn:hover,
.header-center-link:hover {
    color: #111111;
}

.icon-btn,
.header-center-link,
.mobile-hamburger {
    color: #202020;
    opacity: 1;
}

.header-icons {
    gap: 12px;
}

.icon-btn {
    width: 36px;
    height: 36px;
}

.model-detail-toolbar,
.model-bmw-toolbar {
    position: sticky;
    top: var(--navbar-height);
    z-index: 1020;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--rule);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.model-detail-toolbar::after,
.model-bmw-toolbar::after {
    display: none;
}

.model-detail-toolbar-inner,
.model-bmw-toolbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    min-height: var(--product-toolbar-height);
}

.model-detail-toolbar-left,
.model-detail-toolbar-actions,
.model-bmw-toolbar-left,
.model-bmw-toolbar-actions {
    display: flex;
    align-items: center;
}

.model-detail-toolbar-left,
.model-bmw-toolbar-left {
    gap: 20px;
}

.model-detail-back,
.model-bmw-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding-right: 18px;
    border-right: 1px solid var(--rule);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
}

.model-detail-back:hover,
.model-bmw-back:hover,
.model-detail-toolbar-link:hover,
.model-bmw-toolbar-link:hover,
.model-detail-specs-link:hover,
.model-bmw-important-link:hover {
    color: var(--action-blue);
    text-decoration: none;
}

.model-detail-back-icon,
.model-bmw-back-icon {
    font-size: 24px;
    line-height: 1;
}

.model-detail-toolbar-title,
.model-bmw-toolbar-title {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(18px, 1.35vw, 22px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
}

.model-detail-toolbar-actions,
.model-bmw-toolbar-actions {
    gap: 16px;
}

.model-detail-toolbar-link,
.model-bmw-toolbar-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 400;
}

.model-detail-toolbar-link::before,
.model-bmw-toolbar-link::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5a623;
}

.model-detail-toolbar-cta.hero-cta,
.model-bmw-toolbar-cta.hero-cta {
    min-width: 180px;
    min-height: 46px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    background: var(--action-blue);
    border-radius: var(--r);
}

.model-detail-toolbar-cta.hero-cta:hover,
.model-bmw-toolbar-cta.hero-cta:hover {
    background: var(--action-blue-hover);
}

.model-bmw-hero {
    background: #ffffff;
    border-bottom: 1px solid #dddddd;
}

.model-bmw-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(420px, 0.66fr);
    min-height: clamp(720px, 82svh, 900px);
}

.model-bmw-stage {
    border-right: 1px solid #dcdcdc;
    background: #fafafa;
}

.model-bmw-stage-inner {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 34px;
    height: 100%;
    padding: 44px 46px 32px;
}

.model-detail-breadcrumb,
.model-bmw-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.model-detail-breadcrumb a,
.model-bmw-breadcrumb a {
    color: var(--text-primary);
}

.model-bmw-stage-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 560px;
    padding: 24px 20px 20px;
    background: linear-gradient(180deg, #f7f7f7 0%, #f5f5f5 100%);
}

.model-bmw-stage-visual img {
    width: min(88%, 860px);
    max-height: 520px;
    object-fit: contain;
    transition: transform 0.45s ease;
    will-change: transform;
}

.model-bmw-stage:hover .model-bmw-stage-visual img {
    transform: scale(1.035);
}

.model-bmw-aside {
    background: #ffffff;
}

.model-bmw-panel-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 62px;
    border-bottom: 1px solid #dedede;
}

.model-bmw-panel-tab {
    min-height: 112px;
    border: 0;
    color: #3f3f3f;
    font-size: 18px;
    font-weight: 400;
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease;
}

.model-bmw-panel-tab.is-active {
    color: #111111;
    box-shadow: inset 0 -5px 0 #111111;
}

.model-bmw-panel-body {
    position: relative;
    padding: 52px 62px 56px;
}

.model-bmw-panel-kicker {
    margin: 0 0 14px;
    color: #575757;
    font-size: 14px;
    line-height: 1.2;
}

.model-bmw-panel-title {
    margin: 0;
    color: #111111;
    font-family: var(--font-display);
    font-size: clamp(38px, 4vw, 62px);
    font-weight: 700;
    line-height: 0.98;
}

.model-bmw-panel-sub {
    max-width: 520px;
    margin: 20px 0 0;
    color: #262626;
    font-size: 19px;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.model-bmw-stat-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-top: 26px;
}

.model-bmw-primary-stat {
    display: grid;
    gap: 10px;
}

.model-bmw-primary-stat strong {
    color: #111111;
    font-family: var(--font-display);
    font-size: clamp(56px, 5vw, 88px);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.03em;
}

.model-bmw-primary-stat span {
    color: #555555;
    font-size: 16px;
    line-height: 1.2;
}

.model-detail-specs-link,
.model-bmw-important-link {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.18s ease;
}

.model-detail-specs-link:hover,
.model-bmw-important-link:hover {
    color: var(--action-blue);
}

.model-bmw-callout {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
    margin-top: 34px;
    padding: 18px 20px;
    background: #f1f1f1;
}

.model-bmw-callout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #111111;
}

.model-bmw-callout-icon svg {
    width: 20px;
    height: 20px;
}

.model-bmw-callout-copy {
    display: grid;
    gap: 4px;
}

.model-bmw-callout-copy strong {
    color: #111111;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.model-bmw-callout-copy p {
    margin: 0;
    color: #4f4f4f;
    font-size: 15px;
    line-height: 1.4;
}

.model-bmw-offer-rows {
    margin-top: 34px;
}

.model-bmw-offer-rows div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid #e3e3e3;
}

.model-bmw-offer-rows dt {
    color: #111111;
    font-size: 15px;
    line-height: 1.35;
}

.model-bmw-offer-rows dd {
    color: #111111;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
}

.model-bmw-hero-actions {
    margin-top: 34px;
}

.model-bmw-hero-actions .hero-cta,
.model-bmw-hero-actions .detail-secondary-cta {
    min-width: 182px;
    min-height: 58px;
}

.model-bmw-hero-actions .detail-secondary-cta {
    color: #111111;
    border-color: #111111;
    background: #ffffff;
}

.model-bmw-hero-actions .detail-secondary-cta:hover {
    background: #111111;
    color: #ffffff;
}

.model-sales-section {
    padding: 96px 0;
    background: #ffffff;
    border-top: 1px solid #ececec;
}

.model-key-panel-section,
.model-spec-tabs-section {
    background: #f7f7f7;
}

.model-sales-section-head {
    gap: 12px;
    margin-bottom: 42px;
}

.model-sales-section .section-eyebrow {
    color: #7a7a7a;
}

.model-sales-section .detail-section-title {
    max-width: 980px;
    color: #111111;
    font-size: clamp(24px, 2.2vw, 38px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-transform: none;
}

.model-key-panel,
.model-highlight-sales-card,
.model-use-case-sales-card,
.model-platform-summary-card,
.model-platform-variants-card,
.model-spec-tabs-panel {
    border-color: #e3e3e3;
    box-shadow: none;
}

.model-key-panel {
    background: #ffffff;
}

.model-key-panel-media {
    min-height: 520px;
    overflow: hidden;
}

.model-key-panel-media img {
    transition: transform 0.45s ease;
    will-change: transform;
}

.model-key-panel:hover .model-key-panel-media img {
    transform: scale(1.04);
}

.model-key-panel-body {
    padding: 44px 42px;
}

.model-key-spec-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
}

.model-key-spec-icon {
    width: 34px;
    height: 34px;
    border: 1px solid #dcdcdc;
    color: #111111;
    background: #ffffff;
}

.model-key-spec-copy strong {
    color: #111111;
    font-size: 12px;
}

.model-key-spec-copy span {
    color: #585858;
    font-size: 14px;
    line-height: 1.35;
}

.model-highlight-sales-grid,
.model-use-case-sales-grid {
    gap: 16px;
}

.model-highlight-sales-card {
    gap: 14px;
    min-height: 220px;
    padding: 28px 24px 24px;
    border-top: 2px solid var(--action-blue);
}

.model-highlight-sales-card h3,
.model-use-case-sales-body h3,
.model-platform-summary-card h3 {
    font-size: clamp(18px, 1.55vw, 24px);
    font-weight: 700;
    text-transform: none;
}

.model-highlight-sales-card p,
.model-use-case-sales-body p,
.model-platform-version-card p,
.model-spec-tabs-note,
.model-platform-variant-body span {
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.model-use-case-sales-body {
    gap: 12px;
}

.model-platform-sales-grid {
    gap: 18px;
}

.model-platform-summary-card,
.model-platform-variants-card {
    padding: 30px;
}

.model-platform-version-grid {
    gap: 0;
    background: transparent;
}

.model-platform-version-card {
    padding: 18px 0;
    border-top: 1px solid #ebebeb;
}

.model-platform-version-card:first-child {
    border-top: 0;
}

.model-platform-variants-grid {
    gap: 14px;
}

.model-platform-variant-card {
    padding: 16px;
}

.model-platform-variant-card img {
    height: 160px;
    transition: transform 0.45s ease;
    will-change: transform;
}

.model-platform-variant-card:hover img {
    transform: scale(1.04);
}

.model-spec-tabs-panel {
    background: #ffffff;
}

.model-spec-tabs-nav {
    background: #fafafa;
}

.model-spec-tab-btn {
    min-height: 72px;
    color: #595959;
    font-size: 11px;
}

.model-spec-tab-btn.is-active {
    color: #111111;
    box-shadow: inset 0 -4px 0 #111111;
}

.model-spec-tab-content {
    padding: 22px 34px 10px;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.75s ease, transform 0.75s ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-no-transition {
    transition: none;
}

.detail-cta-section {
    padding: 96px 0 112px;
    background: #ffffff;
    border-top: 1px solid #e7e7e7;
}

.detail-cta-section .section-eyebrow,
.detail-cta-section .detail-section-title,
.detail-cta-copy p {
    color: #111111;
}

.detail-cta-copy p {
    color: #5d5d5d;
}

.detail-cta-panel {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.detail-cta-section .detail-secondary-cta {
    color: #111111;
    border-color: #111111;
    background: #ffffff;
}

.detail-cta-section .detail-secondary-cta:hover {
    background: #111111;
    color: #ffffff;
}

.model-floating-cta {
    right: 18px;
    bottom: 18px;
    width: min(228px, calc(100vw - 24px));
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.model-floating-cta__primary,
.model-floating-cta__secondary {
    min-height: 48px;
    font-size: 12px;
}

.model-floating-cta__primary {
    background: var(--action-blue);
}

.model-floating-cta__secondary {
    color: #111111;
    border: 1px solid #111111;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}

.model-floating-cta.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 1180px) {
    .model-bmw-toolbar-inner,
    .model-bmw-toolbar-left {
        gap: 18px;
    }

    .header-inner {
        padding: 0 22px;
    }

    .header-inner::after {
        left: 22px;
        right: 22px;
    }

    .model-bmw-hero-grid,
    .detail-cta-panel,
    .model-sales-section-head--split {
        grid-template-columns: 1fr;
    }

    .model-bmw-stage {
        border-right: 0;
        border-bottom: 1px solid #dcdcdc;
    }

    .model-highlight-sales-grid,
    .model-use-case-sales-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    :root {
        --navbar-height: 62px;
        --product-toolbar-height: 74px;
    }

    .model-detail-page {
        padding-top: var(--navbar-height);
    }

    .top-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .header-inner {
        padding: 0 18px;
    }

    .header-inner::after {
        left: 18px;
        right: 18px;
    }

    .model-bmw-toolbar-inner,
    .model-bmw-toolbar-actions,
    .model-bmw-stat-row,
    .model-sales-actions,
    .model-inline-cta--stack-mobile {
        flex-direction: column;
        align-items: stretch;
    }

    .model-bmw-toolbar-inner {
        min-height: var(--product-toolbar-height);
        padding-top: 14px;
        padding-bottom: 14px;
        gap: 12px;
    }

    .model-bmw-toolbar-left {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 10px;
    }

    .model-bmw-back {
        min-height: 36px;
        padding-right: 0;
        border-right: 0;
    }

    .model-bmw-toolbar-title {
        font-size: 22px;
    }

    .model-bmw-toolbar-cta.hero-cta,
    .model-bmw-hero-actions .hero-cta,
    .model-bmw-hero-actions .detail-secondary-cta,
    .detail-cta-panel .hero-cta,
    .detail-cta-panel .detail-secondary-cta {
        width: 100%;
        min-width: 0;
    }

    .model-bmw-stage-inner,
    .model-bmw-panel-body {
        padding: 28px 24px;
    }

    .model-bmw-panel-tabs {
        margin: 0 24px;
    }

    .model-bmw-panel-tab {
        min-height: 72px;
        font-size: 16px;
    }

    .model-bmw-stage-visual {
        min-height: 360px;
        padding: 20px 14px 10px;
    }

    .model-bmw-stage-visual img {
        width: min(92%, 520px);
        max-height: 320px;
    }

    .model-bmw-primary-stat strong {
        font-size: 54px;
    }

    .model-sticky-media {
        top: auto;
    }

    .model-bmw-offer-rows div,
    .model-spec-tab-list div {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .model-bmw-offer-rows dd {
        text-align: left;
    }

    .model-key-panel-media {
        min-height: 260px;
    }

    .model-highlight-sales-grid,
    .model-use-case-sales-grid,
    .model-platform-variants-grid,
    .model-spec-tabs-nav {
        grid-template-columns: 1fr;
    }

    .reveal-on-scroll {
        transform: translateY(20px);
    }
}

/* Sticky BMW-style content strategy */
.model-sticky-layout,
.model-sticky-layout-grid,
.model-sticky-media-column,
.model-sticky-content-column,
.model-sticky-media {
    overflow: visible;
}

.model-sticky-layout {
    background: #ffffff;
}

.model-sticky-layout > .detail-section-inner {
    --model-stage-left-pad: max(70px, calc((100vw - 1440px) / 2 + 70px));
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: var(--model-stage-left-pad);
    padding-right: 0;
}

.model-sticky-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(460px, 1fr); /* BMW Ratio */
    gap: 100px; /* High breathing room between image and text */
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 48px;
}

.model-sticky-media-column {
    position: relative;
    min-width: 0;
    background: #f4f5f6;
}

.model-sticky-media {
    position: sticky;
    top: calc(var(--navbar-height) + var(--product-toolbar-height) + 20px);
    display: grid;
    align-self: start; /* Crucial for sticky within a grid cell */
    gap: 40px;
}

.model-sticky-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(520px, 75vh, 860px);
    padding: 0;
    overflow: visible;
    background: transparent;
}

.model-sticky-visual::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 22px; /* Perfect contact shadow position */
    z-index: 0;
    width: min(58vw, 680px);
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.08) 45%, transparent 80%);
    filter: blur(8px);
    transform: translateX(-50%) scaleX(1.4);
    pointer-events: none;
}

.model-sticky-visual img {
    position: relative;
    z-index: 1;
    width: 130%;
    max-width: none;
    max-height: 82vh;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.04));
    transform: translateX(-12%) scale(1.1);
    transform-origin: left center;
    transition: transform 0.45s ease, opacity 0.28s ease;
}

.model-sticky-visual img.model-hero-load {
    opacity: 0;
    transform: translateX(-12%) scale(0.95);
    transition:
        opacity 1.2s var(--ease-bmw),
        transform 1.2s var(--ease-bmw),
        filter 0.45s ease;
}

.model-sticky-visual img.model-hero-load.is-loaded {
    opacity: 1;
    transform: translateX(-12%) scale(1.1);
}

.model-sticky-media:hover .model-sticky-visual img {
    transform: translateX(-12%) scale(1.12);
}

.model-sticky-media:hover .model-sticky-visual img.model-hero-load:not(.is-loaded) {
    transform: translateX(-12%) scale(0.95);
}

.model-sticky-media:hover .model-sticky-visual img.model-hero-load.is-loaded {
    transform: translateX(-12%) scale(1.13);
}

.model-color-switcher {
    display: none !important;
}

.model-sticky-content-column {
    min-width: 0;
    --model-content-pad: 56px;
}

.model-sticky-content-column > .model-intro-panel,
.model-sticky-content-column > .model-sales-section,
.model-sticky-content-column > .detail-cta-section {
    width: 100%;
    max-width: calc(640px + (var(--model-content-pad) * 2));
    padding-left: var(--model-content-pad);
    padding-right: var(--model-content-pad);
}

.model-sticky-content-column .detail-section-inner {
    width: 100%;
    max-width: 600px; /* Content safety zone */
    margin: 0;
    padding-left: 60px; /* Added inner gutter to prevent "edge hitting" */
    padding-right: 40px;
}

.model-intro-panel {
    display: grid;
    gap: 0;
    min-height: calc(100vh - 120px);
    align-content: start;
    padding: 0 60px 120px; /* Uniform horizontal breathing room */
}

.model-intro-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 0.82s var(--ease-bmw),
        transform 0.82s var(--ease-bmw);
    transition-delay: var(--intro-delay, 0ms);
    will-change: opacity, transform;
}

.model-intro-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.model-intro-kicker {
    margin: 0;
    color: #5f5f5f;
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 28px;
}

.model-intro-title {
    margin: 0 0 32px;
    color: #111111;
    font-family: var(--font-display);
    font-size: clamp(42px, 3.8vw, 62px); /* Slightly bolder title */
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.model-intro-sub {
    max-width: 24ch;
    margin: 0 0 64px; /* Increased margin for better separation */
    color: #757575; /* Lighter color for secondary info */
    font-size: 15px;
    line-height: 1.4;
}

.model-intro-focus-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 34px;
    align-items: end;
    padding-top: 0;
    margin-bottom: 64px; /* Large gap before buttons */
}

.model-intro-focus-stat {
    display: grid;
    gap: 12px;
}

.model-intro-focus-stat strong {
    display: inline-flex;
    align-items: baseline;
    gap: 0.02em;
    white-space: nowrap;
    color: #111111;
    font-family: var(--font-display);
    font-size: clamp(68px, 5.2vw, 90px);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.model-intro-focus-number {
    font-weight: 200;
}

.model-detail-focus-value .model-detail-focus-number,
.model-detail-focus-value .model-intro-focus-number {
    font-weight: 200;
}

.model-intro-focus-unit {
    font-weight: 700;
    letter-spacing: -0.04em;
}

.model-detail-focus-value .model-detail-focus-unit,
.model-detail-focus-value .model-intro-focus-unit {
    font-weight: 700;
}

.model-intro-focus-stat strong span:last-child {
    margin-left: 0.06em;
}

.model-intro-focus-stat > span {
    color: #5a5a5a;
    font-size: 14px;
    line-height: 1.15;
}

.model-bmw-important-link {
    font-size: 14px;
}

.model-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.model-intro-focus-stat-inner {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-display);
    color: #111;
}

.model-intro-focus-stat-inner .js-count {
    font-size: 82px;
    font-weight: 200; /* Extra Light for BMW aesthetic */
    letter-spacing: -0.04em;
    line-height: 1;
}

.model-intro-focus-stat-inner .unit {
    font-size: 42px;
    font-weight: 700; /* Bold for contrast */
    line-height: 1;
}

.model-intro-actions .hero-cta,
.model-intro-actions .detail-secondary-cta,
.model-inline-cta .hero-cta,
.model-inline-cta .detail-secondary-cta,
.detail-cta-panel .hero-cta,
.detail-cta-panel .detail-secondary-cta {
    min-width: 180px;
    min-height: 52px;
}

.model-intro-actions .detail-secondary-cta,
.model-inline-cta .detail-secondary-cta,
.detail-cta-panel .detail-secondary-cta {
    color: #111111;
    border-color: #111111;
    background: #ffffff;
}

.model-intro-actions .detail-secondary-cta:hover,
.model-inline-cta .detail-secondary-cta:hover,
.detail-cta-panel .detail-secondary-cta:hover {
    color: #ffffff;
    background: #111111;
}

.model-sticky-content-column .model-sales-section,
.model-sticky-content-column .detail-cta-section {
    margin-top: 96px;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 1px solid #e9e9e9;
    background: transparent;
}

.model-sticky-content-column .model-sales-section:first-of-type {
    margin-top: 0;
}

.model-sticky-content-column .model-sales-section-head,
.model-sticky-content-column .detail-cta-panel {
    padding-top: 40px;
}

.model-sales-section-head:has(.section-eyebrow):not(:has(.detail-section-title)) {
    margin-bottom: 22px;
}

.model-sticky-content-column .detail-cta-panel {
    grid-template-columns: 1fr;
    gap: 28px;
}

.model-sticky-content-column .detail-cta-copy {
    gap: 22px;
}

.model-sticky-content-column .detail-cta-copy p {
    max-width: 30ch;
}

.model-overview-rows,
.model-compact-spec-list {
    background: #ffffff;
}

.model-overview-row,
.model-compact-spec-row {
    display: grid;
    gap: 22px;
    padding: 18px 0;
    border-bottom: 1px solid #e9e9e9;
}

.model-overview-row {
    grid-template-columns: 124px minmax(0, 1fr);
    align-items: start;
}

.model-overview-row strong,
.model-readiness-card h3 {
    color: #111111;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.model-overview-row p,
.model-readiness-card p {
    margin: 0;
    color: #525252;
    font-size: 14px;
    line-height: 1.5;
}

.model-compact-spec-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.model-compact-spec-row strong {
    color: #575757;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}

.model-compact-spec-row span {
    max-width: 20ch;
    color: #111111;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.32;
    text-align: right;
}

.model-readiness-grid {
    display: grid;
    gap: 14px;
}

.model-readiness-card {
    padding: 20px 22px 22px;
    border: 1px solid #ececec;
    background: #fafafa;
}

.model-readiness-card h3 {
    margin: 0 0 8px;
}

.model-sticky-content-column .model-key-panel {
    grid-template-columns: 1fr;
    gap: 24px;
    border: 0;
    background: transparent;
}

.model-sticky-content-column .model-key-panel-media {
    min-height: 320px;
    border: 0;
}

.model-sticky-content-column .model-key-panel-body {
    padding: 0;
    background: transparent;
}

.model-sticky-content-column .model-platform-sales-grid {
    grid-template-columns: 1fr;
    gap: 18px;
}

.model-sticky-content-column .model-platform-summary-card,
.model-sticky-content-column .model-platform-variants-card {
    padding: 28px 30px;
}

.model-sticky-content-column .model-platform-summary-card h3,
.model-sticky-content-column .model-platform-variants-card h3 {
    font-size: 18px;
    line-height: 1.2;
}

.model-sticky-content-column .model-platform-version-card {
    padding: 16px 0;
}

.model-sticky-content-column .model-platform-variant-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 132px;
    padding: 18px 20px;
}

.model-sticky-content-column .model-platform-variant-card img {
    width: 112px;
    height: 88px;
}

.model-sticky-content-column .model-platform-variant-body h4,
.model-sticky-content-column .model-platform-variant-body p {
    word-break: normal;
    overflow-wrap: normal;
}

.model-sticky-content-column .model-highlight-sales-grid,
.model-sticky-content-column .model-use-case-sales-grid,
.model-sticky-content-column .model-platform-variants-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 1181px) {
    .model-sticky-layout {
        height: calc(100vh - var(--navbar-height) - var(--product-toolbar-height));
        min-height: 620px;
        overflow: hidden;
    }

    .model-sticky-layout-grid {
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }

    .model-sticky-media-column {
        border-right: 1px solid rgba(0, 0, 0, 0.05);
        height: 100%;
        margin-left: calc(var(--model-stage-left-pad) * -1);
        padding-left: var(--model-stage-left-pad);
        padding-top: 24px;
        padding-right: 20px;
        overflow: visible;
    }

    .model-sticky-media {
        top: calc(var(--navbar-height) + var(--product-toolbar-height) + 28px);
        align-self: start;
        align-content: start;
        height: 100%;
    }

    .model-sticky-visual {
        min-height: calc(100vh - var(--navbar-height) - var(--product-toolbar-height) - 96px);
    }

    .model-sticky-content-column {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: 24px;
        padding-right: 0;
        padding-bottom: 96px;
        scrollbar-gutter: auto;
    }

    .model-sticky-content-column::-webkit-scrollbar {
        width: 10px;
    }

    .model-sticky-content-column::-webkit-scrollbar-track {
        background: transparent;
    }

    .model-sticky-content-column::-webkit-scrollbar-thumb {
        background: rgba(17, 17, 17, 0.24);
        border: 2px solid #ffffff;
    }

    .model-sticky-content-column {
        scrollbar-width: thin;
        scrollbar-color: rgba(17, 17, 17, 0.24) transparent;
    }

    .model-intro-panel {
        min-height: auto;
        padding-top: 8px;
        padding-bottom: 72px;
    }

    .model-sticky-content-column .model-sales-section,
    .model-sticky-content-column .detail-cta-section {
        margin-top: 84px;
    }
}

@media (max-width: 1180px) {
    .model-sticky-layout > .detail-section-inner {
        --model-stage-left-pad: 0px;
        max-width: 1440px;
        margin: 0 auto;
        padding-left: 48px;
        padding-right: 48px;
    }

    .model-sticky-media-column {
        margin-left: 0;
        padding-left: 0;
    }

    .model-sticky-content-column {
        --model-content-pad: 0px;
    }

    .model-sticky-layout-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .model-sticky-media {
        position: static;
        gap: 20px;
    }

    .model-sticky-visual {
        min-height: auto;
        padding: 24px 0 18px;
    }

    .model-sticky-visual img {
        width: min(118%, 860px);
        max-width: 100%;
        max-height: 460px;
        transform: none;
        transform-origin: center;
    }

    .model-sticky-visual img.model-hero-load {
        transform: scale(0.95);
    }

    .model-sticky-visual img.model-hero-load.is-loaded,
    .model-sticky-media:hover .model-sticky-visual img,
    .model-sticky-media:hover .model-sticky-visual img.model-hero-load.is-loaded {
        transform: scale(1);
    }

    .model-intro-panel {
        min-height: auto;
        padding-bottom: 72px;
    }
}

@media (max-width: 860px) {
    .model-sticky-layout-grid {
        padding-top: 28px;
        padding-bottom: 88px;
    }

    .model-sticky-visual {
        padding: 18px 0 14px;
    }

    .model-sticky-visual img {
        width: min(122%, 620px);
        max-height: 390px;
    }

    .model-intro-title {
        font-size: clamp(42px, 12vw, 56px);
    }

    .model-intro-sub {
        max-width: none;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .model-intro-focus-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .model-intro-focus-stat strong {
        font-size: clamp(72px, 18vw, 108px);
    }

    .model-intro-actions,
    .model-inline-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .model-intro-actions .hero-cta,
    .model-intro-actions .detail-secondary-cta,
    .model-inline-cta .hero-cta,
    .model-inline-cta .detail-secondary-cta,
    .detail-cta-panel .hero-cta,
    .detail-cta-panel .detail-secondary-cta {
        width: 100%;
        min-width: 0;
    }

    .model-sticky-content-column .model-sales-section,
    .model-sticky-content-column .detail-cta-section {
        margin-top: 80px;
    }

    .model-overview-row,
    .model-compact-spec-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .model-compact-spec-row span {
        max-width: none;
        text-align: left;
    }
}

/* Mobile homepage: photographic hero and editorial navigation drawer. */
@media (max-width: 768px) {
    .home-page .top-header,
    .home-page .top-header.models-open {
        height: 76px;
        position: absolute;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent);
        border-bottom: 0;
    }

    .home-page .top-header.mobile-open {
        position: fixed;
        color: #202020;
        background: #ffffff;
        border-bottom: 1px solid #d8d8d8;
    }

    .home-page .top-header.mobile-open .header-inner::after {
        display: none;
    }

    .home-page .top-header.mobile-open .mobile-hamburger {
        color: #202020;
    }

    .home-page .mobile-hamburger svg line {
        transform-box: fill-box;
        transform-origin: center;
        transition: transform 0.22s ease, opacity 0.18s ease;
    }

    .home-page .mobile-overlay {
        top: 76px;
        z-index: 1090;
        padding: 0 32px 44px;
        color: #202020;
        background: #ffffff;
    }

    .home-page .mobile-menu-context {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 84px;
        color: #565656;
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid #dcdcdc;
    }

    .home-page .mobile-menu {
        margin-top: 28px;
    }

    .home-page .mobile-menu a {
        position: relative;
        min-height: 82px;
        color: #555555;
        border-bottom: 1px solid #e1e1e1;
        font-family: var(--font-display);
        font-size: clamp(24px, 7vw, 30px);
        font-weight: 400;
        letter-spacing: -0.02em;
        text-transform: none;
    }

    .home-page .mobile-menu a::after {
        content: "›";
        position: absolute;
        right: 8px;
        font-size: 42px;
        font-weight: 300;
        line-height: 1;
    }

    .home-page .mobile-menu-search {
        display: flex;
        align-items: center;
        gap: 14px;
        width: min(100%, 310px);
        min-height: 54px;
        margin: 48px auto 0;
        padding: 0 18px;
        color: #555555;
        border: 1px solid #bcbcbc;
        border-radius: 2px;
        font-size: 17px;
    }

    .home-page .hero-section {
        height: max(100svh, 700px);
        min-height: 700px;
        background: #000000;
    }

    .home-page .hero-bg-img {
        object-position: 62% 38%;
    }

    .home-page .hero-section::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.12) 35%, rgba(0, 0, 0, 0.92) 59%, #000000 78%);
    }

    .home-page .hero-section.hero-region-fullmode::after {
        background: linear-gradient(180deg, rgba(24, 13, 7, 0.05) 0%, rgba(24, 13, 7, 0.14) 34%, rgba(24, 13, 7, 0.72) 62%, rgba(24, 13, 7, 0.90) 100%);
    }

    .home-page .hero-content {
        right: 0;
        bottom: max(30px, env(safe-area-inset-bottom));
        left: 0;
        align-items: center;
        padding: 0 24px;
        text-align: center;
    }

    .home-page .hero-kicker {
        font-size: 10px;
        letter-spacing: 0.2em;
    }

    .home-page .hero-heading {
        max-width: 360px;
        font-size: clamp(35px, 10vw, 48px);
        line-height: 1.08;
    }

    .home-page .hero-sub {
        max-width: 360px;
        font-size: 15px;
        line-height: 1.5;
    }

    .home-page .hero-actions {
        width: min(100%, 360px);
        gap: 12px;
    }

    .home-page .hero-cta {
        min-height: 56px;
    }
}