/* ==========================================================
   HERO.CSS
   Первый экран
   ========================================================== */

.hero{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #eff6ff 0%,
            #ffffff 55%,
            #f8fafc 100%
        );
}

.hero::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(37,99,235,.08);
    filter:blur(10px);
}

.hero::after{
    content:"";
    position:absolute;
    bottom:-150px;
    left:-150px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(29,78,216,.05);
}

.hero-container{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:64px;
    align-items:center;
}

.hero-content h1{
    max-width:720px;
    margin-bottom:24px;
}

.hero-subtitle{
    max-width:640px;
    font-size:1.15rem;
    line-height:1.8;
    margin-bottom:40px;
    color:var(--color-text-light);
}



/* ==========================================================
   Кнопки
   ========================================================== */

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:48px;
}



/* ==========================================================
   Преимущества
   ========================================================== */

.hero-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.hero-benefit{
    padding:24px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    transition:all var(--transition);
}

.hero-benefit:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}

.hero-benefit strong{
    display:block;
    margin-bottom:12px;
    font-size:2rem;
    color:var(--color-primary);
}

.hero-benefit span{
    display:block;
    color:var(--color-text);
    line-height:1.6;
}



/* ==========================================================
   Правая карточка
   ========================================================== */

.hero-card{
    padding:36px;
    background:#ffffff;
    border-radius:var(--radius-xl);
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-lg);
}

.hero-card h2{
    margin-bottom:24px;
    font-size:1.6rem;
}

.hero-card ul{
    margin-bottom:32px;
}

.hero-card li{
    position:relative;
    padding-left:28px;
    margin-bottom:20px;
    line-height:1.7;
}

.hero-card li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:0;
    color:var(--color-success);
    font-weight:700;
}

.hero-card strong{
    display:block;
    margin-bottom:4px;
}

.hero-card .button{
    width:100%;
}



/* ==========================================================
   Анимация
   ========================================================== */

.hero-content,
.hero-card{
    animation:heroFade .7s ease;
}

@keyframes heroFade{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}



/* ==========================================================
   Планшеты
   ========================================================== */

@media (max-width:992px){

    .hero-container{
        grid-template-columns:1fr;
        gap:48px;
    }

    .hero-card{
        max-width:650px;
    }

}



/* ==========================================================
   Телефоны
   ========================================================== */

@media (max-width:768px){

    .hero{
        text-align:center;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-benefits{
        grid-template-columns:1fr;
    }

    .hero-card{
        padding:28px;
    }

}



/* ==========================================================
   Маленькие экраны
   ========================================================== */

@media (max-width:480px){

    .hero-content h1{
        font-size:2rem;
    }

    .hero-subtitle{
        font-size:1rem;
    }

    .hero-card{
        padding:24px;
    }

    .hero-benefit{
        padding:20px;
    }

}