/* ==========================================
   responsive.css — Breakpoints
   ========================================== */

   @media (max-width: 900px) {
    nav {
        padding: 16px 24px;
        flex-wrap: wrap;
    }
    .nav-hamburger { display: flex; }
    .nav-cta-btn { display: none; }

    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding: 16px 0 8px;
        order: 10;
    }

    .nav-links li { padding: 10px 0; }

    nav.nav-open .nav-links { display: flex; }
    nav.nav-open .nav-cta-btn { display: none; }

    .hero { padding: 100px 24px 40px; }
    .hero-content { grid-template-columns: 1fr; gap: 40px; }
    .hero-right { order: -1; height: 400px; }

    .phone-mockup { width: 180px; height: 380px; }
    .floating-card-1 { width: 110px; height: 145px; left: 5px; top: 10px; }
    .floating-card-2 { width: 100px; height: 130px; right: 5px; bottom: 30px; }
    .floating-badge { font-size: 9px; right: 0; top: 40px; }

    .problem-section { padding: 60px 24px; }
    .problem-grid { grid-template-columns: 1fr 1fr; }

    .evolves-section { grid-template-columns: 1fr; padding: 60px 24px; }
    .evolves-right { flex-wrap: wrap; justify-content: center; }

    .ai-layer-section { padding: 60px 24px; }
    .ai-layer-top { grid-template-columns: 1fr; }
    .ai-phone-center { flex-wrap: wrap; justify-content: center; }
    .ai-gallery-img { width: 120px !important; height: 160px !important; }
    .ai-phone { width: 220px; height: 440px; }

    .features-section { padding: 60px 24px; }

    .cta-banner { padding: 60px 24px; }

    .participants-section { padding: 60px 24px; }
    .participants-header { grid-template-columns: 1fr; }
    .participant-card { grid-template-columns: 1fr; }
    .participant-card.reverse { direction: ltr; }

    .built-by-section { grid-template-columns: 1fr; padding: 60px 24px; }

    .faq-section { padding: 60px 24px; }
    .faq-grid { grid-template-columns: 1fr; }

    .flow-section { padding: 60px 24px; }
    .flow-steps { flex-direction: column; align-items: center; }
    .flow-step-arrow { padding-top: 0; transform: rotate(90deg); margin: 8px 0; }

    .final-cta { padding: 60px 24px; }

    .footer-grid { grid-template-columns: 1fr; }
    footer { padding: 40px 24px 20px; }
}

@media (max-width: 600px) {
    .problem-grid { grid-template-columns: 1fr; }

    .hero-right { height: 340px; }
    .phone-mockup { width: 160px; height: 340px; border-radius: 28px; }
    .phone-mockup-inner { border-radius: 22px; }
    .floating-card-1 { width: 95px; height: 125px; }
    .floating-card-2 { width: 90px; height: 115px; }
    .floating-badge { display: none; }

    .ai-gallery-img { display: none !important; }
    .ai-gallery-stack { display: none; }
    .ai-phone { width: 200px; height: 400px; }

    .evolves-right .fashion-img { width: 120px; height: 170px; }

    .demo-phone-frame { width: 300px; height: 620px; border-radius: 36px; }
    .demo-iframe { border-radius: 28px; }

    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}