/* ===========================================================
   RESPONSIVE CSS
   PART 1
   Large Desktop → Tablet
=========================================================== */


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

@media (max-width:1400px){

    .container{
        width:min(1180px,92%);
    }

    .hero-grid{
        gap:70px;
    }

    .dashboard{
        transform:scale(.96);
    }

}


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

@media (max-width:1200px){

    h1{
        font-size:3.3rem;
    }

    h2{
        font-size:2.5rem;
    }

    .hero-grid{
        gap:60px;
    }

    .feature-grid,
    .template-grid,
    .pricing-grid,
    .testimonial-grid,
    .why-grid{

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

    }

    .stats-grid{

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

    }

    .footer-grid{

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

        gap:40px;

    }

}


/* ==========================================
   ≤ 1100px
========================================== */

@media (max-width:1100px){

    .hero-left h1{

        font-size:3rem;

    }

    .dashboard{

        transform:scale(.9);

        transform-origin:center;

    }

    .dashboard-grid{

        grid-template-columns:1fr;

    }

    .analytics-grid{

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

    }

}


/* ==========================================
   ≤ 1024px
========================================== */

@media (max-width:1024px){

    section{

        padding:90px 0;

    }

    .hero{

        min-height:auto;

        padding-top:70px;

    }

    .hero-grid{

        gap:55px;

    }

    .hero-buttons{

        flex-wrap:wrap;

        gap:16px;

    }

    .hero-stats{

        gap:25px;

        flex-wrap:wrap;

    }

    .dashboard-preview{

        max-width:100%;

    }

}


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

@media (max-width:992px){

    .nav-links{

        display:none;

    }

    .menu-btn{

        display:flex;

    }

    .nav-buttons .btn-outline{

        display:inline-flex !important;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-left{

        max-width:760px;

        margin:0 auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-right{

        margin-top:30px;

        display:flex;

        justify-content:center;

    }

    .dashboard{

        width:100%;

        max-width:680px;

    }

    .dashboard-showcase{

        text-align:center;

    }

    .dashboard-showcase .container{

        display:flex;

        flex-direction:column;

        gap:50px;

    }

    .dashboard-content{

        order:1;

    }

    .dashboard-preview{

        order:2;

    }

}

/* ===========================================================
   RESPONSIVE CSS
   PART 2
   Tablet → Mobile
=========================================================== */


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

@media (max-width:768px){

    section{
        padding:80px 0;
    }

    h1{
        font-size:2.7rem;
        line-height:1.15;
    }

    h2{
        font-size:2rem;
    }

    p{
        font-size:15px;
    }

    .container{
        width:min(94%,720px);
    }

    .hero{
        padding-top:50px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        width:100%;
    }

    .hero-buttons .btn{
        width:100%;
        max-width:320px;
        justify-content:center;
    }

    .hero-stats{
        gap:18px;
    }

    .feature-grid,
    .template-grid,
    .why-grid,
    .pricing-grid,
    .testimonial-grid,
    .stats-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

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

    .company-slider{
        gap:12px;
    }

    .company-slider span{
        padding:12px 20px;
    }

    .dashboard{
        transform:none;
    }

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

}


/* ==========================================
   ≤ 640px
========================================== */

@media (max-width:640px){

    .navbar{
        padding:14px 0;
    }

    .logo img{
        height:42px;
    }

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

    .hero-left p{
        font-size:15px;
    }

    .hero-badge{
        margin-inline:auto;
    }

    .dashboard{
        padding:20px;
    }

    .dashboard-top{
        flex-wrap:wrap;
        gap:10px;
    }

    .cta-content{
        padding:40px 28px;
        text-align:center;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:center;
        gap:16px;
    }

    .cta-buttons .btn{
        width:100%;
        max-width:320px;
        justify-content:center;
    }

}


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

@media (max-width:576px){

    section{
        padding:70px 0;
    }

    h1{
        font-size:2.2rem;
    }

    h2{
        font-size:1.8rem;
    }

    .hero-stats{
        flex-direction:column;
        gap:16px;
    }

    .feature-card,
    .template-card,
    .price-card,
    .testimonial-card,
    .why-card{
        padding:24px;
    }

    .faq-item{
        padding:20px;
    }

    .footer{
        text-align:center;
    }

    .footer-grid{
        gap:32px;
    }

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

}

/* ===========================================================
   RESPONSIVE CSS
   PART 3
   Small Mobile Devices
=========================================================== */


/* ==========================================
   ≤ 480px
========================================== */

@media (max-width:480px){

    .container{
        width:min(94%,100%);
    }

    section{
        padding:60px 0;
    }

    h1{
        font-size:2rem;
        line-height:1.15;
    }

    h2{
        font-size:1.65rem;
        line-height:1.25;
    }

    .hero-left p,
    .section-subtitle{
        font-size:14px;
    }

    .hero-buttons .btn,
    .cta-buttons .btn{
        width:100%;
        max-width:none;
        min-height:52px;
    }

    .dashboard,
    .dashboard-preview{
        border-radius:20px;
    }

    .dashboard{
        padding:18px;
    }

    .feature-card,
    .template-card,
    .price-card,
    .testimonial-card,
    .why-card,
    .faq-item{
        padding:20px;
    }

    .company-slider span{
        font-size:13px;
        padding:10px 16px;
    }

}


/* ==========================================
   ≤ 430px
========================================== */

@media (max-width:430px){

    .navbar{
        padding:12px 0;
    }

    .logo img{
        height:38px;
    }

    .hero{
        padding-top:40px;
    }

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

    .hero-badge{
        font-size:13px;
        padding:8px 14px;
    }

    .hero-stats{
        gap:14px;
    }

    .hero-stats h3{
        font-size:1.4rem;
    }

    .dashboard-top{
        justify-content:center;
        text-align:center;
    }

    .cta-content{
        padding:32px 20px;
    }

}


/* ==========================================
   ≤ 390px
========================================== */

@media (max-width:390px){

    h1{
        font-size:1.8rem;
    }

    h2{
        font-size:1.5rem;
    }

    .btn{
        font-size:14px;
        padding:13px 18px;
    }

    .hero-left p,
    .feature-card p,
    .template-card p,
    .testimonial-card p,
    .why-card p{
        font-size:14px;
    }

    .analytics-card{
        padding:18px;
    }

    .stat-box{
        padding:20px;
    }

    .footer-bottom{
        font-size:13px;
    }

}


/* ==========================================
   ≤ 360px
========================================== */

@media (max-width:360px){

    h1{
        font-size:1.65rem;
    }

    h2{
        font-size:1.4rem;
    }

    .container{
        width:95%;
    }

    .hero-buttons,
    .cta-buttons{
        gap:12px;
    }

    .dashboard{
        padding:16px;
    }

    .feature-card,
    .template-card,
    .price-card,
    .testimonial-card,
    .why-card{
        padding:18px;
    }

    .company-slider{
        gap:10px;
    }

}


/* ==========================================
   ≤ 320px
========================================== */

@media (max-width:320px){

    h1{
        font-size:1.5rem;
    }

    h2{
        font-size:1.3rem;
    }

    p{
        font-size:13px;
    }

    .btn{
        width:100%;
        padding:12px 16px;
        font-size:13px;
    }

    .hero-buttons,
    .cta-buttons{
        width:100%;
    }

    .dashboard{
        padding:14px;
    }

    .hero-badge{
        font-size:12px;
    }

    .company-slider span{
        width:100%;
        text-align:center;
    }

}


/* ==========================================
   TOUCH DEVICES
========================================== */

@media (hover:none){

    .btn:hover,
    .feature-card:hover,
    .template-card:hover,
    .price-card:hover,
    .testimonial-card:hover,
    .why-card:hover,
    .stat-box:hover,
    .dashboard-preview:hover{
        transform:none;
    }

    .feature-card:active,
    .template-card:active,
    .price-card:active{
        transform:scale(.98);
    }

}


/* ==========================================
   LANDSCAPE PHONES
========================================== */

@media (max-height:600px) and (orientation:landscape){

    .hero{
        min-height:auto;
        padding:70px 0;
    }

    section{
        padding:55px 0;
    }

}

/* ===========================
   PLATFORM PREVIEW MOBILE FIX
=========================== */

@media (max-width: 992px){

    .dashboard-preview{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .sidebar{
        border-right:none;
        border-bottom:1px solid var(--border);
        padding:20px;
    }

    .sidebar ul{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .dashboard-content{
        padding:20px;
    }

    .dashboard-header{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

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

@media (max-width:576px){

    .sidebar ul{
        grid-template-columns:1fr;
    }

    .dashboard-header h3{
        font-size:24px;
    }
}