/* ========================================
   PAGES.CSS
   Макеты страниц и расположение секций
======================================== */


/* ========================================
   SECTION
======================================== */

section{

    position:relative;

    padding:100px 0;

}


/* ========================================
   HERO
======================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding-top:60px;
    padding-bottom:120px;

    min-height:90vh;

}


/* ========================================
   HERO GRID BACKGROUND
======================================== */

.grid-bg{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(91,127,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,127,255,.08) 1px,transparent 1px);

    background-size:60px 60px;

    transform:
    perspective(1200px)
    rotateX(75deg)
    scale(2);

    opacity:.4;

    pointer-events:none;

}


/* ========================================
   HERO CONTENT
======================================== */

.hero-content{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 500px;

    align-items:center;

    gap:80px;

    min-height:80vh;

}


/* ========================================
   HERO LEFT
======================================== */

.hero-left{

    max-width:650px;

}

.hero-left p{

    margin:25px 0 35px;

    color:var(--muted);

    font-size:20px;

}


/* ========================================
   HERO RIGHT
======================================== */

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-right img{

    width:80%;

    max-width:340px;

}


/* ========================================
   APP HERO
======================================== */

.app-hero .hero-right img{

    width:260px;

}


/* ========================================
   CONTENT
======================================== */

.content{

    position:relative;

}

.content h2{

    margin-bottom:28px;

}

.content p{

    max-width:900px;

    color:var(--muted);

}


/* ========================================
   BENEFITS
======================================== */

.benefits{

    position:relative;

}


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

.devices{

    position:relative;

}


/* ========================================
   APPLICATIONS
======================================== */

.apps{

    position:relative;

}


/* ========================================
   MANUALS
======================================== */

.manuals{

    position:relative;

}


/* ========================================
   FAQ
======================================== */

.faq{

    position:relative;

}


/* ========================================
   TRIAL
======================================== */

#trial{

    position:relative;

}


/* ========================================
   APP PAGE
======================================== */

.app-page{

    position:relative;

}

.app-description{

    max-width:850px;

}

.app-description p{

    margin-bottom:20px;

    color:var(--muted);

}


/* ========================================
   APP INFO
======================================== */

.app-info{

    display:grid;

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

    gap:30px;

}


/* ========================================
   APP PLATFORM
======================================== */

.platform-list{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}


/* ========================================
   MANUAL GRID
======================================== */

.manual-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:24px;

}


/* ========================================
   SPACING
======================================== */

.mt-30{

    margin-top:30px;

}

.mt-50{

    margin-top:50px;

}

.mt-80{

    margin-top:80px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-50{

    margin-bottom:50px;

}

.mb-80{

    margin-bottom:80px;

}


/* ========================================
   CENTER
======================================== */

.text-center{

    text-align:center;

}

.mx-auto{

    margin-left:auto;

    margin-right:auto;

}


/* ========================================
   MAX WIDTHS
======================================== */

.w-700{

    max-width:700px;

}

.w-800{

    max-width:800px;

}

.w-900{

    max-width:900px;

}


/* ========================================
   ANCHOR OFFSET
======================================== */

html{

    scroll-padding-top:100px;

}


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

.install-guide{

padding:100px 0;
}

.guide-step{

display:flex;
align-items:center;

gap:50px;

padding:40px 0;

border-bottom:
1px solid rgba(255,255,255,.06);
}

.guide-step:last-child{

border-bottom:none;
}

.guide-content{

flex:1;
}

.guide-image{

width:33%;
flex-shrink:0;
}

.guide-image img{

width:100%;

display:block;

border-radius:20px;

border:
1px solid rgba(255,255,255,.08);

background:
rgba(255,255,255,.03);
}

.step-number{

display:inline-block;

margin-bottom:14px;

padding:8px 14px;

border-radius:999px;

background:
rgba(91,127,255,.15);

color:#fff;

font-size:14px;

font-weight:600;
}

.guide-content h3{

margin-bottom:16px;
}

.guide-content p{

margin-bottom:14px;

color:var(--muted);
}

.guide-content ul{

padding-left:20px;

color:var(--muted);
}

.guide-content li{

margin-bottom:8px;
}