@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

:root {
    --bmw-blue: #1C69D4;
    --bmw-dark: #111111;
    --bmw-light: #F6F6F9;
    --bmw-white: #FFFFFF;
    --bmw-gray: #8E8E93;
    --bmw-red: #E84026;
    --bmw-accent: #0066B1;
    --bmw-gold: #C8A96E;
    --bg-dark: #0a0a10;
    --bg-card: rgba(255,255,255,0.06);
    --border-subtle: rgba(255,255,255,0.08);
    --font-sans: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    color: var(--bmw-dark);
    background: var(--bmw-white);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.2rem; }
p { font-size: 1.02rem; color: #555; }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer {
    0% { background-position: -300% 0; }
    100% { background-position: 300% 0; }
}
@keyframes driveLine {
    0% { width: 0; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}
@keyframes parallaxBg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.06); opacity: 1; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Scroll animation */
.anim { opacity: 0; transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
.anim-up { transform: translateY(48px); }
.anim-left { transform: translateX(-40px); }
.anim-right { transform: translateX(40px); }
.anim-scale { transform: scale(0.92); }
.anim.visible { opacity: 1; transform: translate(0) scale(1); }

.stagger > * { opacity: 0; transform: translateY(32px); transition: all 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
.stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.19s; }
.stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.26s; }
.stagger.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.33s; }
.stagger.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }

/* ===== NAVIGATION ===== */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 0 48px; height: 68px;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(10,10,16,0.88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.4s, box-shadow 0.4s;
}
.nav.scrolled { background: rgba(10,10,16,0.97); box-shadow: 0 2px 24px rgba(0,0,0,0.3); }
.nav-logo { color: var(--bmw-white); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.5px; text-decoration: none; }
.nav-logo span { color: var(--bmw-blue); }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
    color: #888; text-decoration: none; font-size: 0.88rem; font-weight: 500;
    letter-spacing: 0.3px; transition: color 0.3s; position: relative; padding: 6px 0;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background: var(--bmw-blue); transition: width 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--bmw-white); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* ===== HERO ===== */
.hero {
    position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center;
    background: var(--bg-dark); color: var(--bmw-white); text-align: center;
    overflow: hidden; padding: 120px 24px 80px;
}
.hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(28,105,212,0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 30%, rgba(200,169,110,0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(232,64,38,0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0a0a14 0%, #0d1525 40%, #0f1f3a 100%);
    background-size: 200% 200%;
    animation: parallaxBg 18s ease infinite;
}
.hero-bg::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--bmw-blue), transparent);
    animation: driveLine 3s ease-in-out infinite;
}
.hero-content { position: relative; z-index: 2; max-width: 800px; }
.hero-badge {
    display: inline-block; padding: 6px 20px; border: 1px solid rgba(28,105,212,0.4);
    border-radius: 100px; font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--bmw-blue); margin-bottom: 28px; animation: fadeUp 0.8s ease;
}
.hero h1 { font-weight: 800; margin-bottom: 20px; animation: fadeUp 0.8s 0.15s both; }
.hero h1 .gradient-text {
    background: linear-gradient(135deg, #4D94E8 0%, #1C69D4 40%, #7DB9FF 70%, #1C69D4 100%);
    background-size: 300% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}
.hero p { color: #999; font-size: 1.1rem; max-width: 560px; margin: 0 auto; animation: fadeUp 0.8s 0.3s both; }
.hero-stats { display: flex; justify-content: center; gap: 48px; margin-top: 48px; animation: fadeUp 0.8s 0.5s both; flex-wrap: wrap; }
.hero-stat { text-align: center; }
.hero-stat .num { font-size: 2rem; font-weight: 800; color: var(--bmw-blue); }
.hero-stat .lbl { font-size: 0.75rem; color: #777; margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; }

/* ===== PAGE HEADER ===== */
.page-header {
    position: relative; padding: 120px 24px 72px; text-align: center;
    background: var(--bg-dark); color: var(--bmw-white); overflow: hidden;
}
.page-header::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 60%, rgba(28,105,212,0.15), transparent 60%),
                linear-gradient(180deg, #0a0a14, #0f1f3a);
}

/* ===== CONTAINER ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section { padding: 100px 0; }
.section-dark { background: var(--bg-dark); color: var(--bmw-white); padding: 100px 0; margin: 0 calc(-50vw + 50%); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
.section-dark .container { padding: 0 32px; }
.section-dark h2, .section-dark h3 { color: var(--bmw-white); }
.section-dark p { color: #999; }

.section-label {
    font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--bmw-blue); margin-bottom: 12px; font-weight: 600;
}
.section-title { margin-bottom: 16px; position: relative; display: inline-block; }
.section-title::after {
    content: ''; position: absolute; bottom: -8px; left: 0;
    width: 56px; height: 3px; background: var(--bmw-blue); border-radius: 2px;
}
.section-subtitle { color: var(--bmw-gray); max-width: 600px; margin-bottom: 48px; font-size: 1.05rem; }
.section-dark .section-subtitle { color: #888; }

/* ===== CARDS ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 28px; }
.card {
    background: var(--bmw-white); border: 1px solid #EAEAEF; border-radius: 20px;
    overflow: hidden; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s ease, border-color 0.4s;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 64px rgba(0,0,0,0.10);
    border-color: rgba(28,105,212,0.25);
}
.card-header {
    background: linear-gradient(135deg, #12122a, #0f1f3a); color: var(--bmw-white);
    padding: 32px 28px; text-align: center; position: relative; overflow: hidden;
}
.card-header::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 130%, rgba(28,105,212,0.25), transparent 65%);
}
.card-header > * { position: relative; z-index: 1; }
.card-header h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.card-header .price { font-size: 1rem; color: var(--bmw-blue); font-weight: 600; }
.card-body { padding: 28px; }
.card-body table { width: 100%; border-collapse: collapse; }
.card-body td { padding: 10px 0; border-bottom: 1px solid #F2F2F6; font-size: 0.9rem; }
.card-body td:first-child { color: var(--bmw-gray); width: 36%; font-size: 0.84rem; }
.card-body td:last-child { font-weight: 500; }

/* ===== SPEC BAR ===== */
.spec-bar {
    display: flex; border-radius: 12px; overflow: hidden; border: 1px solid #EAEAEF; margin: 28px 0;
}
.spec-item {
    flex: 1; text-align: center; padding: 20px 12px; background: var(--bmw-light);
    border-right: 1px solid #EAEAEF; transition: background 0.3s;
}
.spec-item:last-child { border-right: none; }
.spec-item:hover { background: #ECECF2; }
.spec-item .v { font-size: 1.5rem; font-weight: 700; color: var(--bmw-blue); }
.spec-item .l { font-size: 0.74rem; color: var(--bmw-gray); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ===== FEATURE BOX ===== */
.feature-box {
    background: var(--bmw-light); border-left: 4px solid var(--bmw-blue);
    padding: 20px 24px; margin: 12px 0; border-radius: 0 12px 12px 0;
    transition: transform 0.3s, box-shadow 0.3s;
}
.feature-box:hover { transform: translateX(6px); box-shadow: 0 6px 24px rgba(0,0,0,0.06); }

/* ===== COMPARE TABLE ===== */
.compare-table {
    width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 0.9rem;
    border-radius: 14px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.compare-table th {
    background: linear-gradient(135deg, #12122a, #1a1a30); color: var(--bmw-white);
    padding: 16px 20px; text-align: left; font-weight: 500; font-size: 0.82rem;
    letter-spacing: 0.3px;
}
.compare-table td { padding: 14px 20px; border-bottom: 1px solid #F0F0F5; transition: background 0.2s; }
.compare-table tr:hover td { background: #FAFAFC; }
.compare-table tr:nth-child(even) { background: #F8F8FB; }
.compare-table tr:nth-child(even):hover td { background: #F2F2F7; }
.compare-table .hl { background: #EBF3FD !important; font-weight: 700; color: var(--bmw-blue); }

/* ===== IMAGE SHOWCASE ===== */
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.showcase-card {
    background: linear-gradient(135deg, #f0f2f5, #e4e8ef); border-radius: 20px;
    padding: 48px 24px; text-align: center; position: relative; overflow: hidden;
    transition: transform 0.4s, box-shadow 0.4s;
}
.showcase-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.08); }
.showcase-card .car-art { width: 240px; height: 100px; margin: 0 auto 20px; }
.showcase-card .car-name { font-weight: 700; font-size: 1.1rem; color: var(--bmw-dark); }
.showcase-card .car-tag { font-size: 0.82rem; color: var(--bmw-blue); font-weight: 600; margin-top: 4px; }
.showcase-card .glow-line {
    position: absolute; bottom: 0; left: 10%; width: 80%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--bmw-blue), transparent);
    animation: driveLine 2.5s ease-in-out infinite;
}

/* ===== TECH SECTION ===== */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.tech-card {
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
    border-radius: 16px; padding: 36px 28px; text-align: center;
    transition: transform 0.35s, border-color 0.35s, background 0.35s;
}
.tech-card:hover { transform: translateY(-4px); border-color: rgba(28,105,212,0.4); background: rgba(255,255,255,0.08); }
.tech-card .tech-icon { font-size: 2.4rem; margin-bottom: 16px; }
.tech-card h4 { font-weight: 700; margin-bottom: 8px; font-size: 1.05rem; }
.tech-card p { color: #999; font-size: 0.88rem; }

/* ===== VIDEO SECTION ===== */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 28px; }
.video-card {
    background: var(--bmw-white); border: 1px solid #EAEAEF; border-radius: 16px;
    overflow: hidden; transition: transform 0.35s, box-shadow 0.35s;
}
.video-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.08); }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
.video-wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}
.video-info { padding: 18px 20px; }
.video-info h4 { font-weight: 600; font-size: 0.95rem; }
.video-info span { font-size: 0.8rem; color: var(--bmw-gray); }

/* ===== POSTER / BANNER ===== */
.poster {
    position: relative; border-radius: 24px; overflow: hidden; margin: 40px 0;
    background: linear-gradient(135deg, #0f1f3a 0%, #0a1528 50%, #102040 100%);
    padding: 64px 48px; color: var(--bmw-white); text-align: center;
}
.poster::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 60%, rgba(28,105,212,0.2), transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(200,169,110,0.08), transparent 40%);
}
.poster > * { position: relative; z-index: 1; }
.poster h2 { font-weight: 800; margin-bottom: 12px; font-size: 2rem; }
.poster p { color: #AAA; max-width: 500px; margin: 0 auto; font-size: 1rem; }
.poster .cta {
    display: inline-block; margin-top: 24px; padding: 12px 36px;
    background: var(--bmw-blue); color: #fff; border-radius: 100px;
    text-decoration: none; font-weight: 600; font-size: 0.9rem;
    transition: background 0.3s, transform 0.3s;
}
.poster .cta:hover { background: #3980E8; transform: scale(1.04); }

/* ===== FOOTER ===== */
.footer {
    background: var(--bg-dark); color: #666; text-align: center;
    padding: 48px 24px; font-size: 0.82rem; border-top: 1px solid var(--border-subtle);
}
.footer strong { color: #999; }

/* ===== BACK LINK ===== */
.back-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--bmw-blue); text-decoration: none; font-weight: 600;
    font-size: 0.9rem; margin: 28px 0; transition: gap 0.3s;
}
.back-link:hover { gap: 14px; }

/* ===== DIVIDER ===== */
.divider {
    border: none; border-top: 1px solid #EAEAEF; margin: 48px 0; position: relative;
}
.divider::after {
    content: '◆'; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); background: var(--bmw-white);
    color: var(--bmw-blue); padding: 0 14px; font-size: 0.65rem;
}
.section-dark .divider { border-color: var(--border-subtle); }
.section-dark .divider::after { background: var(--bg-dark); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .nav { padding: 0 16px; }
    .nav-links { gap: 18px; }
    .nav-links a { font-size: 0.78rem; }
    .hero { min-height: 70vh; padding: 100px 16px 60px; }
    .hero-stats { gap: 24px; }
    .hero-stat .num { font-size: 1.5rem; }
    .card-grid { grid-template-columns: 1fr; }
    .video-grid { grid-template-columns: 1fr; }
    .showcase-grid { grid-template-columns: 1fr; }
    .spec-bar { flex-wrap: wrap; }
    .spec-item { flex: 1 1 50%; }
    .container { padding: 0 16px; }
    .section { padding: 64px 0; }
    .section-dark { padding: 64px 0; }
    .poster { padding: 40px 24px; }
    .poster h2 { font-size: 1.5rem; }
}