/* ==========================================================================
   Breakpoints: 1200 / 992 / 768 / 576
   ========================================================================== */

/* ----- <= 1200px : tighten grids to 3 columns ----- */
@media (max-width: 1200px) {
    .sc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----- <= 992px : tablet ----- */
@media (max-width: 992px) {
    .sc-container {
        padding: 0 20px;
    }

    .sc-section {
        padding: 64px 0;
    }

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

    .sc-hero__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sc-hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .sc-hero__actions {
        justify-content: center;
    }

    .sc-hero__visual {
        margin-top: 32px;
    }

    .sc-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sc-feature-row, .sc-feature-row.is-reverse {
        grid-template-columns: 1fr;
        text-align: center;
    }

        .sc-feature-row .sc-feature-row__media, .sc-feature-row.is-reverse .sc-feature-row__media {
            order: -1;
            max-width: 320px;
            margin: 0 auto;
        }

        .sc-feature-row__list li {
            text-align: left;
        }

    .sc-footer__row {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sc-footer__divider-v {
        display: none;
    }

    .sc-stat-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----- <= 1100px : nav collapses to hamburger (avoids cramped wrapping) ----- */
@media (max-width: 1100px) {
    .sc-nav, .sc-header__actions .btn-sc {
        display: none;
    }

    .sc-burger {
        display: flex;
    }
}

/* ----- <= 768px : mobile ----- */
@media (max-width: 768px) {
    .sc-section {
        padding: 48px 0;
    }

    .sc-grid, .sc-grid--3, .sc-grid--2 {
        grid-template-columns: 1fr;
    }

    .sc-footer__row {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .sc-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .sc-footer__slogan {
        justify-content: center;
    }

    .sc-stat-row {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* ----- <= 576px : small phones ----- */
@media (max-width: 576px) {
    .sc-container {
        padding: 0 16px;
    }

    .sc-hero {
        padding: 64px 0;
    }

    .sc-hero__panel {
        padding: 24px;
    }

    .sc-split__panel {
        padding: 24px;
    }

    .sc-hero__actions .btn-sc,
    .sc-cta .btn-sc {
        width: 100%;
    }

    .sc-stat-row {
        grid-template-columns: 1fr;
    }

    .sc-header__brand img {
        height: 36px;
    }
}