@media(max-width: 992px) {
    .plan-grid {
        grid-template-columns: repeat(2, minmax(230px, 320px));
    }

    .vps-grid {
        grid-template-columns: repeat(2, minmax(250px, 330px));
    }

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

    header {
        padding: 16px 5%;
    }
}

@media(max-width: 600px) {
    header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    nav {
        gap: 6px;
    }

    nav a {
        font-size: 0.92rem;
        padding: 7px 8px;
    }

    .hero {
        padding: 86px 16px;
    }

    .hero-buttons {
        display: grid;
        gap: 10px;
    }

    .hero-buttons button {
        width: 100%;
        margin: 0;
    }

    .plan-grid {
        grid-template-columns: minmax(250px, 340px);
    }

    .vps-grid {
        grid-template-columns: minmax(250px, 340px);
    }

    .vps-card {
        min-height: 540px;
    }

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

@media(max-width: 420px) {
    .plans,
    .vps,
    .why,
    .cta {
        padding-left: 4%;
        padding-right: 4%;
    }

    .plan-grid,
    .vps-grid {
        grid-template-columns: minmax(220px, 1fr);
    }

    .vps-img {
        height: 180px;
    }
}