/* ========================================
   RESPONSIVE.CSS
   Адаптивные стили
======================================== */


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

@media (max-width:1200px){

    .container{

        max-width:1000px;

    }

    .hero-content{

        gap:60px;

        grid-template-columns:1fr 420px;

    }

}


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

@media (max-width:992px){

    h1{

        font-size:52px;

    }

    h2{

        font-size:38px;

    }

    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-left{

        max-width:100%;

    }

    .hero-right{

        order:-1;

    }

    .hero-right img{

        width:300px;

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

    .app-info{

        grid-template-columns:1fr;

    }

}


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

@media (max-width:768px){

    .header{

        position:relative;

    }

    .header-inner{

        height:auto;

        flex-direction:column;

        justify-content:center;

        gap:22px;

        padding:24px 0;

    }

    .logo{

        justify-content:center;

    }

    .logo-subtitle{

        display:none;

    }

    .nav{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    .header-btn{

        width:100%;

    }

    section{

        padding:80px 0;

    }

    .hero{

        padding-top:40px;

        min-height:auto;

    }

    h1{

        font-size:44px;

    }

    h2{

        font-size:34px;

    }

    .hero-left p{

        font-size:18px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:340px;

    }

    .cards,
    .devices-grid,
    .manual-grid{

        grid-template-columns:1fr;

    }

    .trial-box{

        padding:50px 30px;

    }

}


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

@media (max-width:576px){

    .container{

        padding:0 18px;

    }

    h1{

        font-size:36px;

        line-height:1.15;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:20px;

    }

    .hero{

        padding-bottom:70px;

    }

    .hero-right img{

        width:220px;

    }

    .badge{

        font-size:13px;

        padding:8px 14px;

    }

    .card,
    .device-card,
    .faq-item{

        padding:24px;

    }

    .trial-box{

        padding:40px 24px;

        border-radius:22px;

    }

    .trial-box p{

        font-size:16px;

    }

    .hero-features{

        gap:10px;

    }

    .hero-features div{

        font-size:14px;

        padding:8px 12px;

    }

}


/* ========================================
   420px
======================================== */

@media (max-width:420px){

    h1{

        font-size:31px;

    }

    h2{

        font-size:26px;

    }

    .logo img{

        width:40px;

        height:40px;

    }

    .logo-title{

        font-size:20px;

    }

    .nav{

        gap:14px;

        font-size:15px;

    }

    .hero-right img{

        width:180px;

    }

    .btn-primary,
    .btn-secondary,
    .header-btn{

        padding:15px 18px;

        font-size:15px;

    }

}


/* ==========================
   INSTALL GUIDE MOBILE
========================== */

@media (max-width:900px){

.guide-step{

flex-direction:column;

align-items:flex-start;

gap:24px;
}

.guide-image{

width:100%;
}

}