﻿body {
    @media (max-width: 1180px) {
        .navigation-list {
            gap: 16px;
        }

            .navigation-list a {
                font-size: 0.67rem;
            }

        .header-phone span:last-child {
            display: none;
        }

        .hero-container {
            gap: 45px;
        }

        .footer-grid {
            gap: 35px;
        }
    }

    @media (max-width: 980px) {
        .menu-button {
            display: block;
        }

        .main-navigation {
            position: fixed;
            top: var(--header-height);
            right: 0;
            left: 0;
            height: calc(100vh - var(--header-height));
            padding: 28px 20px 40px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 27px;
            overflow-y: auto;
            background: rgba(2, 7, 19, 0.99);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-15px);
            transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
        }

            .main-navigation.is-open {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

        .navigation-list {
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }

            .navigation-list a {
                padding: 16px 4px;
                font-size: 0.95rem;
                border-bottom: 1px solid var(--border-dark);
            }

                .navigation-list a::after {
                    display: none;
                }

        .header-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .header-phone span:last-child {
            display: inline;
        }

        .hero-container {
            grid-template-columns: 1fr;
        }

        .hero-visual {
            max-width: 680px;
        }

        .services-panel {
            grid-template-columns: 1fr;
        }

        .service-card {
            min-height: 245px;
        }

        .process-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .plans-grid {
            grid-template-columns: 1fr;
            max-width: 700px;
            margin-inline: auto;
        }

        .plan-card-featured {
            transform: none;
        }

        .about-grid,
        .faq-grid,
        .contact-grid {
            grid-template-columns: 1fr;
            gap: 55px;
        }

        .footer-grid {
            grid-template-columns: 1fr 1fr;
        }

        .footer-company {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 720px) {
        :root {
            --header-height: 74px;
        }

        .container {
            width: min(calc(100% - 28px), var(--container-width));
        }

        .section {
            padding-block: 78px;
        }

        .brand-symbol {
            width: 41px;
            height: 41px;
        }

        .brand-copy strong {
            font-size: 0.9rem;
        }

        .brand-copy small {
            font-size: 0.43rem;
        }

        .header-actions {
            grid-template-columns: 1fr;
        }

        .hero-container {
            padding-block: 60px;
        }

        .hero-content h1 {
            font-size: clamp(2.7rem, 13vw, 4rem);
        }

        .hero-description {
            font-size: 0.97rem;
        }

        .hero-benefits {
            grid-template-columns: 1fr;
        }

        .hero-actions {
            flex-direction: column;
        }

            .hero-actions .button {
                width: 100%;
            }

        .network-visual {
            height: 230px;
            transform: scale(0.9);
        }

        .services-tabs {
            justify-content: flex-start;
            overflow-x: auto;
        }

        .service-tab {
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .process-grid,
        .values-grid,
        .form-grid {
            grid-template-columns: 1fr;
        }

        .process-card {
            min-height: 220px;
        }

        .footer-grid {
            grid-template-columns: 1fr;
        }

        .footer-company {
            grid-column: auto;
        }

        .footer-bottom {
            padding-block: 22px;
            flex-direction: column;
            align-items: flex-start;
        }
    }

    @media (max-width: 480px) {
        .brand-copy small {
            display: none;
        }

        .operations-card,
        .contact-form,
        .plan-card {
            padding: 22px;
        }

        .network-visual {
            margin-inline: -20px;
        }

        .operations-list div {
            flex-direction: column;
            gap: 3px;
        }

        .floating-whatsapp {
            right: 16px;
            bottom: 16px;
        }
    }
}

@media (max-width: 980px) {
    .hero-visual {
        max-width: 650px;
        justify-self: start;
    }
}

@media (max-width: 720px) {
    .hero-content h1 .hero-title-main {
        white-space: normal;
    }

    .hero-content h1.hero-title {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    .hero-coverage {
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .infrastructure-card {
        padding: 21px;
    }

    .infrastructure-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .infrastructure-layer {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .infrastructure-tag {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }

    .infrastructure-process {
        flex-wrap: wrap;
    }
}
