@media(max-width:980px) {
    h1 {
        font-size: 32px
    }

    .hero-layout,
    .arena-layout,
    .principle-layout,
    .faq-layout {
        grid-template-columns: 1fr
    }

    .game-showcase {
        grid-template-columns: repeat(2, 1fr)
    }

    .game-wide,
    .game-tall {
        grid-column: span 1;
        grid-row: span 1
    }
}

@media(max-width:760px) {
    .menu-btn {
        display: block;
        border: 1px solid #365574;
        background: transparent;
        color: #fff;
        border-radius: 9px;
        padding: 8px 12px
    }

    .nav {
        position: absolute;
        top: 76px;
        left: 20px;
        right: 20px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        background: #0d1c31;
        padding: 18px;
        border-radius: 16px
    }

    .nav.open {
        display: flex
    }

    .section {
        padding: 70px 0
    }

    .split-head {
        display: block
    }

    .game-showcase,
    .challenge-line,
    .guide-grid,
    .footer-grid {
        grid-template-columns: 1fr
    }

    .principle-grid {
        grid-template-columns: 1fr 1fr
    }

    .cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px
    }
}

@media(max-width:520px) {
    .shell {
        width: min(100% - 24px, 1180px)
    }

    h1 {
        font-size: 28px
    }

    h2 {
        font-size: 24px
    }

    .hero {
        padding: 60px 0 75px
    }

    .hero-actions .btn {
        width: 100%
    }

    .hero-metrics {
        gap: 18px
    }

    .orbit-card {
        display: none
    }

    .principle-grid {
        grid-template-columns: 1fr
    }

    .matrix-grid {
        grid-template-columns: repeat(4, 54px)
    }

    .matrix-cell {
        width: 54px;
        height: 54px
    }
}