/* ─── 1080px – Collapse two-column layouts ─── */
@media (max-width: 1080px) {
    .hero-layout,
    .product-showcase,
    .upcoming-product,
    .about-content,
    .contact-content,
    .footer-content {
        grid-template-columns: 1fr;
    }

    .hero-title { max-width: 100%; }
    .product-copy { padding-right: 0; }
    .hero-feature { max-width: 620px; }
    .upcoming-visual { justify-content: flex-start; }

    .contact-content {
        gap: 18px;
    }
}

/* ─── 900px – Tablet / Mobile menu ─── */
@media (max-width: 900px) {
    section { padding: 88px 0; }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .nav-menu {
        position: fixed;
        top: 82px;
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 22px 24px;
        border-radius: 18px;
        border: 1px solid rgba(91, 171, 255, 0.12);
        background: rgba(5, 10, 20, 0.97);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.25s ease;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(91,171,255,0.08);
        z-index: 999;
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .hamburger { display: flex; }
    .nav-actions .btn { display: none; }
}

/* ─── 768px – Small tablet ─── */
@media (max-width: 768px) {
    .container,
    .nav-container {
        width: min(var(--container), calc(100% - 28px));
    }

    .navbar { background: rgba(5, 10, 20, 0.94); }
    .nav-container { min-height: 74px; }
    .logo-img { height: 32px; }

    .hero { padding: 126px 0 72px; }

    .hero-actions,
    .spotlight-actions,
    .product-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn,
    .spotlight-actions .btn,
    .product-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .spotlight-stats { margin-top: 16px; }

    .section-title {
        font-size: clamp(1.85rem, 8vw, 2.8rem);
    }

    .hero-title {
        font-size: clamp(2.3rem, 10vw, 3.8rem);
    }

    .product-name { font-size: 2.1rem; }
    .spotlight-title { font-size: 1.85rem; }

    .radio-group { flex-direction: column; }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* Reset panel-stack-routes border on small screens */
    .panel-stack-routes {
        padding-left: 18px;
    }

    .panel-stack-routes .panel-card::before {
        left: -24px;
        width: 9px; height: 9px;
    }
}

/* ─── 560px – Mobile ─── */
@media (max-width: 560px) {
    section { padding: 72px 0; }

    .hero-outcomes {
        flex-direction: column;
        align-items: stretch;
    }

    .outcome-pill,
    .radio-label {
        width: 100%;
        justify-content: center;
    }

    .service-card,
    .product-showcase,
    .upcoming-product,
    .visual-panel,
    .contact-info,
    .contact-form,
    .footer-section,
    .product-spotlight,
    .panel-shell {
        padding: 22px;
    }

    .spotlight-stat { padding: 12px 14px 12px 18px; }

    .graph-node {
        min-width: 100px;
        padding: 9px 10px;
        font-size: 0.8rem;
    }

    .graph-node-left { left: 8px; }
    .graph-node-right { right: 8px; }
    .graph-line-left { left: 118px; width: calc(50% - 118px); }
    .graph-line-right { right: 118px; width: calc(50% - 118px); }

    .language-selector { display: none; }

    .footer-content { grid-template-columns: 1fr 1fr; }

    .footer-content .footer-section:first-child {
        grid-column: 1 / -1;
    }

    .upcoming-product {
        gap: 28px;
    }

    .section-header { margin-bottom: 36px; }
}

/* ─── 400px – Small phones ─── */
@media (max-width: 400px) {
    .footer-content { grid-template-columns: 1fr; }

    .hero-title { font-size: clamp(2rem, 12vw, 2.6rem); }

    .btn-large {
        padding: 0.9rem 1.4rem;
        font-size: 0.95rem;
    }
}