/* ========================================
   COMPONENTS.CSS
   Переиспользуемые компоненты сайта
======================================== */


/* ========================================
   BADGES
======================================== */

.badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;

    border-radius:999px;

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

    color:#ffffff;

    font-size:14px;
    font-weight:600;

}


section h2{
    text-align:center;
}



/* ========================================
   BUTTON GROUPS
======================================== */

.hero-buttons{

    display:flex;
    gap:16px;

    margin:35px 0;

}


/* ========================================
   FEATURE TAGS
======================================== */

.hero-features{

    display:flex;
    flex-wrap:wrap;

    gap:14px;

}

.hero-features div{

    padding:10px 16px;

    border-radius:12px;

    background:rgba(255,255,255,.04);

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

    color:var(--muted);

    font-size:15px;

}

/* ========================================
   ABOUT
======================================== */

.section-center{
    text-align:center;
}

.section-center .container{
    display:flex;
    flex-direction:column;
    align-items:center;
}

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

.cards,
.devices-grid{

    display:grid;

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

    gap:22px;

}


/* ========================================
   DEFAULT CARD
======================================== */

.card{

    padding:32px;

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

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

    border-radius:22px;

    transition:.25s;

}

.card:hover{

    transform:translateY(-4px);

    border-color:rgba(91,127,255,.35);

}

.card h3{

    margin-bottom:14px;

}

.card p{

    color:var(--muted);

}


/* ========================================
   DEVICE CARD
======================================== */

.device-card{

    display:block;

    padding:32px;

    border-radius:22px;

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

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

    transition:.25s;

}

.device-card:hover{

    transform:translateY(-4px);

    border-color:var(--primary);

}

.device-card h3{

    margin-bottom:8px;

}

.device-card span{

    color:var(--muted);

}


/* ========================================
   APP CARD
======================================== */

.app-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:36px;

    border-radius:22px;

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

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

    transition:.25s;

}

.app-card:hover{

    transform:translateY(-4px);

    border-color:var(--primary);

}

.app-card img{

    width:72px;

    margin-bottom:20px;

}

.app-card p{

    color:var(--muted);

}


/* ========================================
   ADVANTAGE CARD
======================================== */

.advantage-card{

    padding:30px;

    border-radius:22px;

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

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

}

.advantage-card h3{

    margin-bottom:14px;

}

.advantage-card p{

    color:var(--muted);

}


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

.trial-box{

    padding:70px 60px;

    text-align:center;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    rgba(91,127,255,.12),
    rgba(91,127,255,.04)
    );

}

.trial-box h2{

    margin-bottom:18px;

}

.trial-box p{

    max-width:650px;

    margin:0 auto 34px;

    color:var(--muted);

    font-size:18px;

}

.trial-box .btn-primary{

    min-width:260px;

}


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

.faq-item{

    padding:28px;

    margin-bottom:18px;

    border-radius:20px;

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

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

}

.faq-item h3{

    margin-bottom:12px;

}

.faq-item p{

    color:var(--muted);

}


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

.content p{

    margin-bottom:22px;

    color:var(--muted);

}


/* ========================================
   SIMPLE FORM
======================================== */

.form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.form input{

    width:100%;

    padding:16px 18px;

    border:none;

    outline:none;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    color:#fff;

}

.form textarea{

    width:100%;

    min-height:150px;

    resize:vertical;

    padding:16px 18px;

    border:none;

    outline:none;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    color:#fff;

}

.form input::placeholder,
.form textarea::placeholder{

    color:#8f98aa;

}