/* ===================================
   1400px
=================================== */

@media (max-width:1400px){

    .hero,
    .stats,
    .feature-grid{

        max-width:1200px;

    }

}

/* ===================================
   1200px
=================================== */

@media (max-width:1200px){

    .hero{

        gap:50px;

    }

    .feature-grid{

        grid-template-columns:
            repeat(3,1fr);

    }

    .stats{

        grid-template-columns:
            repeat(2,1fr);

    }

    .usecase-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}

/* ===================================
   992px
=================================== */

@media (max-width:992px){

    .navbar{

        padding:16px 20px;

    }

    .nav-menu{

        gap:18px;

    }

    .hero{

        grid-template-columns:1fr;

        text-align:center;

        min-height:auto;

        padding-top:180px;

    }

    .hero-content{

        order:2;

    }

    .hero-image{

        order:1;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-tags{

        justify-content:center;

    }

    .feature-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

    .phone-mockup{

        max-width:380px;

    }

    .download-card{

        padding:50px 30px;

    }

}

/* ===================================
   768px
=================================== */

@media (max-width:768px){

    .navbar{

        flex-wrap:wrap;

        gap:15px;

    }

    .nav-menu{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero h1{

        font-size:3rem;

    }

    .stats{

        grid-template-columns:1fr;

    }

    .feature-grid{

        grid-template-columns:1fr;

    }

    .usecase-grid{

        grid-template-columns:1fr;

    }

    .download-card h2{

        font-size:2rem;

    }

    .footer{

        padding:35px 20px;

    }

    .footer-contact{

        flex-direction:column;

        gap:12px;

    }

    .download-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:320px;

    }

}

/* ===================================
   576px
=================================== */

@media (max-width:576px){

    section{

        padding:
            80px
            24px;

    }

    .navbar{

        width:95%;

        top:10px;

        padding:14px 16px;

    }

    .logo-wrapper span{

        font-size:1rem;

    }

    .hero{

        padding-top:160px;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-tags{

        gap:8px;

    }

    .hero-tags span{

        font-size:.8rem;

        padding:8px 12px;

    }

    .phone-mockup{

        max-width:300px;

        border-radius:28px;

    }

    .feature-card{

        min-height:220px;

        padding:25px;

    }

    .feature-card img{

        width:60px;
        height:60px;

    }

    .feature-card h3{

        font-size:1rem;

    }

    .stat-card{

        min-height:140px;

    }

    .stat-card h2{

        font-size:2rem;

    }

    .swiper-slide img{

        max-width:280px;

    }

    .download-card{

        padding:40px 20px;

    }

    .faq-question{

        font-size:.95rem;

        padding:20px;

    }

    .faq-answer{

        font-size:.9rem;

    }

}

/* ===================================
   EXTRA SMALL
=================================== */

@media (max-width:420px){

    .hero h1{

        font-size:2rem;

    }

    .btn-primary,
    .btn-secondary{

        font-size:.9rem;

        padding:12px 18px;

    }

    .phone-mockup{

        max-width:260px;

    }

    .download-card h2{

        font-size:1.6rem;

    }

}