html, body {
    width: 100%;
    overflow-x: hidden;
}

@media (max-width: 992px) {

    .navbar {
        padding: 18px 6%;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .logo img { width: 50px; height: 42px; }
    .nav-links { display: none; }
    .menu-toggle { display: flex; }
    .mobile-nav { display: flex; }
    .mobile-nav-backdrop { display: block; }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 100px 6% 52px;
        gap: 22px;
        text-align: left;
    }

    .hero-content {
        order: 2;
        max-width: 100%;
        padding: 26px 24px;
    }

    .hero-kicker { font-size: 10px; }
    .hero-content h1 { font-size: 38px; }
    .hero-content > p { font-size: 15px; }

    .hero-buttons {
        margin-top: 20px;
        width: 100%;
    }

    .hero-spline {
        order: 1;
        height: 52vh;
        min-height: 330px;
        width: 100%;
        border-radius: 20px;
    }

    .hero-spline::after {
        left: 15%;
        right: 15%;
    }

    .data-section { flex-direction: column; height: auto; }

    .data-content {
        width: 100%;
        padding: 70px 6% 36px;
        text-align: center;
    }

    .data-content h1 { font-size: 38px; }
    .data-content p { font-size: 15px; margin: 0 auto; }
    .data-spline { width: 100%; height: 56vh; }

    .datacenter-section { flex-direction: column; height: auto; }
    .datacenter-spline { width: 100%; height: 56vh; }

    .datacenter-content {
        width: 100%;
        padding: 70px 6%;
        text-align: center;
    }

    .datacenter-content h1 { font-size: 34px; }

    .stats-section {
        flex-wrap: wrap;
        padding: 60px 6%;
        gap: 10px;
    }

    .stat-item {
        flex: 1 1 45%;
        min-width: 140px;
        padding: 24px 10px;
    }

    .stat-item + .stat-item::before { display: none; }
    .stat-number { font-size: 36px; }

    .solutions-section { padding: 90px 6%; }
    .solutions-header h2 { font-size: 34px; }
    .solutions-grid { grid-template-columns: repeat(2, 1fr); }

    .process-section { padding: 90px 6%; }
    .process-header h2 { font-size: 34px; }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }

    .tech-strip { padding: 48px 6%; }
    .cta-section { padding: 90px 6%; }
    .cta-content h2 { font-size: 34px; }

    .about-section { flex-direction: column; min-height: auto; }

    .about-content {
        width: 100%;
        padding: 70px 6% 36px;
        text-align: center;
    }

    .about-content h2 { font-size: 36px; }
    .about-content h2::after { margin-left: auto; margin-right: auto; }
    .about-content p { margin: 0 auto 18px; }

    .about-image {
        width: 100%;
        height: auto;
        padding: 20px 12%;
    }

    .contact-section { flex-direction: column; min-height: auto; }

    .contact-left {
        width: 100%;
        padding: 70px 6%;
    }

    .contact-left h1 { font-size: 42px; }

    .contact-right {
        width: 100%;
        padding: 50px 6% 90px;
    }

    .scroll-btn { width: 44px; height: 44px; right: 16px; }
    .scroll-up { top: 82px; }
    .scroll-down { bottom: 16px; }

    .footer { padding: 60px 6% 24px; }
    .footer-container { flex-direction: column; gap: 36px; }
    .footer-info, .footer-social { width: 100%; }
    .section-divider { margin: 0; }
}

@media (max-width: 576px) {

    .hero-content h1 { font-size: 30px; }
    .data-content h1 { font-size: 28px; }
    .hero { padding: 90px 5% 40px; }

    .hero-spline {
        height: 46vh;
        min-height: 260px;
    }

    .watermark-cover { width: 120px; height: 48px; }
    .mobile-nav { width: 88vw; padding: 90px 18px 24px; }
    .hero-content { padding: 20px 18px; }

    .primary-btn, .secondary-btn {
        width: 100%;
        min-width: unset;
    }

    .solutions-grid { grid-template-columns: 1fr; gap: 18px; }
    .process-grid { grid-template-columns: 1fr; }
    .stat-item { flex: 1 1 100%; }
    .cta-content h2 { font-size: 28px; }
    .datacenter-content h1 { font-size: 28px; }
    .contact-left h1 { font-size: 34px; }
    .about-content h2 { font-size: 30px; }
    .solutions-header h2 { font-size: 28px; }
    .process-header h2 { font-size: 28px; }
}