@media (max-width: 768px) {
    .container {
        width: 90%;
    }

    .hero {
        padding-top: calc(6rem + 2rem);
        padding-bottom: 4rem;
    }

    .hero-col-left h1 {
        font-size: 2rem;
    }

    .hero-col-left h1 .mobile-break {
        display: block;
    }

    .cta-group {
        margin-top: 0.5rem;
    }

    .hero-logo {
        width: 120px;
    }

    .hero-sub {
        font-size: 1rem;
    }

    .floating-cli {
        font-size: 1rem;
    }

    .capabilities-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
    }

    .capability-card {
        flex: 0 0 75vw;
        scroll-snap-align: start;
        font-size: calc(0.8rem + 1px);
    }

    /* Pong court mobile */
    .pong-court {
        max-width: 95vw;
        aspect-ratio: 2.2 / 1;
    }

    .pong-paddle {
        width: 36px;
        height: 36px;
    }

    .pong-paddle img,
    .pong-partner-logo {
        width: 32px !important;
        height: 32px !important;
    }

    .pong-paddle-left {
        left: 8px;
    }

    .pong-paddle-right {
        right: 8px;
    }

    .pong-ball {
        width: 8px;
        height: 8px;
    }

    .compatibility-section h2 {
        font-size: 1.5rem;
    }

    .terminal-window {
        max-width: 90vw;
    }

    .terminal-line {
        font-size: 0.85rem;
    }

    section {
        padding: 4rem 0;
    }

    .problem-box {
        flex-direction: column;
    }

    h2,
    .capabilities-section h2,
    .workflow-section h2,
    .compatibility-section h2,
    .install-cta-section h2 {
        font-size: 1.5rem;
    }

    .problem-peek {
        display: none;
    }

    .problem-header {
        flex: none;
        padding: 1.5rem;
    }

    .problem-header h2 {
        font-size: 1.5rem;
    }

    .problem-body {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-logo {
        width: 84px;
    }
}