/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 640px) {

    /* Hero shell — match pill margins */

    .hero-shell {
        padding: 16px 16px;
    }

    /* Hero grid — single column, balloons on top */

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-right {
        order: -1;
        height: 260px;
        overflow: hidden;
    }

    .motion-stage {
        height: 230px;
        margin-top: 20px;
    }

    /* Balloon positions for mobile — kept within bounds */
    .b-uk { left: 12%;  top: 40%; }
    .b-ru { left: 35%;  top: 25%; }
    .b-de { left: 58%;  top: 35%; }
    .b-fr { left: 80%;  top: 22%; }
    .b-es { left: 92%;  top: 55%; }
    .b-it { left: 8%;   top: 75%; }
    .b-kr { left: 30%;  top: 68%; }
    .b-pt { left: 55%;  top: 72%; }
    .b-cn { left: 78%;  top: 70%; }

    .hero-left {
        padding: 32px 24px 36px;
        gap: 24px;
    }


    /* Hide lower balloons on small screens */

    .b-jp,
    .b-ar {
        display: none;
    }

    /* Section 2 */

    .section {
        padding: 56px 16px;
    }

    .selector-grid {
        grid-template-columns: 1fr;
    }

    /* App section */

    .app-section {
        margin: 0 16px;
        padding: 40px 24px;
    }

    .app-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .app-left  { order: 1; }
    .app-right { order: 2; }

    /* GMS section */

    .gms-section {
        padding: 56px 16px;
    }

    .gms-card {
        padding: 40px 24px;
    }

    .gms-grid-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .gms-left     { order: 1; }
    .gms-right    { order: 2; margin-top: 40px; }


    /* Testimonials */

    .testimonials-section {
        padding: 0 16px 56px;
    }

    .testimonials-card {
        padding: 40px 24px;
    }

    .testimonial-avatar {
        display: none;
    }

    .app-bottom-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-top: 28px;
        margin-left: -24px;
        margin-right: -24px;
        padding: 24px 24px 0;
    }

    .gms-bottom-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-top: 24px;
        margin-left: -24px;
        margin-right: -24px;
        padding: 24px 24px 0;
    }

}