/* ── 1060px ───────────────────────────────────────── */

@media (max-width: 1060px) {

    .roles-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

    .footer-top {

        grid-template-columns:
            1fr 1fr;

    }

}

/* ── 860px ────────────────────────────────────────── */

@media (max-width: 860px) {

    .navbar {

        padding: 0 20px;

    }

    .nav-links {

        display: none;

    }

    .hamburger {

        display: flex;

    }

    .hero {

        padding: 90px 20px 50px;

    }

    .hero-inner {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .hero-visual {

        order: -1;

        max-width: 420px;

        margin: 0 auto;

    }

    .section {

        padding: 60px 20px;

    }

    .steps-grid {

        grid-template-columns:
            1fr 1fr;

        gap: 28px;

    }

    .steps-grid::before {

        display: none;

    }

    .features-grid {

        grid-template-columns: 1fr;

    }

    .test-grid {

        grid-template-columns: 1fr;

    }

    .footer {

        padding: 40px 20px 24px;

    }

    .footer-top {

        grid-template-columns: 1fr;

        gap: 28px;

    }

    .cta-inner {

        padding: 60px 20px;

    }

}

/* ── 600px ────────────────────────────────────────── */

@media (max-width: 600px) {

    .roles-grid {

        grid-template-columns:
            1fr 1fr;

    }

    .hero-visual {

        grid-template-columns:
            1fr 1fr;

    }

    .hero-trust {

        flex-wrap: wrap;

        gap: 14px;

    }

}

/* ── 480px ────────────────────────────────────────── */

@media (max-width: 480px) {

    .steps-grid {

        grid-template-columns: 1fr;

    }

    .roles-grid {

        grid-template-columns: 1fr;

    }

}