/* ================================================
   RESPONSIVE
================================================ */
@media (max-width: 1024px) {
    .srv-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .t-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .how-inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .ft-top {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .compare-grid {
        grid-template-columns: 1fr;
        row-gap: 22px;
    }

    .compare-arrow {
        margin: 0 auto;
        transform: rotate(90deg);
    }

    .about-leaders {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {

    .nav-links,
    .navbar .btn {
        display: none;
    }

    .hamburger {
        display: flex;
    }

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

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

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

    .ft-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ft-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .step:not(:last-child)::after {
        display: none;
    }

    .orb {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-btns {
        flex-direction: column;
    }

    .btn {
        justify-content: center;
    }

    .compare-card--bad,
    .compare-card--good {
        padding: 28px 22px;
    }

    .compare-list--good li {
        margin: 0 -10px;
        padding: 10px 10px;
    }

    .about-card {
        padding: 30px 26px;
    }

    .about-stats {
        grid-template-columns: 1fr;
    }
}