/*
    Responsive Design
    Mobile First Enhancement
*/
@media(max-width:1200px) {
    :root {
        --section-space: 120px;
    }

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

    .image-story {
        gap: 50px;
    }
}

@media(max-width:900px) {
    .container {
        width: min(100% - 32px, var(--container));
    }

    h1 {
        font-size: clamp(3rem, 10vw, 5rem);
    }

    .hero {
        min-height: 90vh;
    }

    .hero-background {
        background-position: 60% center;
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(5, 5, 5, .35), rgba(5, 5, 5, .95));
    }

    .hero-meta {
        flex-wrap: wrap;
        gap: 15px;
    }

    .hero-meta div {
        padding: 15px 20px;
        flex: 1;
    }

    .split-layout,
    .image-story {
        grid-template-columns: 1fr;
        gap: 50px;
    }

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

    .warranty {
        padding: 40px 25px;
    }
}

@media(max-width:600px) {
    .header-inner {
        height: 80px;
    }

    .brand {
        font-size: .9rem;
        letter-spacing: .3em;
    }

    .hero-content {
        padding-top: 100px;
    }

    .hero-description {
        font-size: 1rem;
    }

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

    .hero-scroll {
        display: none;
    }

    .button {
        width: 100%;
    }

    .menu-inner a {
        font-size: 2.5rem;
    }

}