/* HERO */
.hero{
    position:relative;
    min-height:520px;
    margin-top:var(--nav-h);
    background:var(--hero-image) right center/cover no-repeat;
    background-color:#050a14;
    display:flex;
    align-items:center;
}

.hero-overlay{
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    background:linear-gradient(105deg,rgba(5,10,20,.58) 0%,rgba(5,10,20,.18) 38%,rgba(5,10,20,0) 62%);
    pointer-events:none;
}

.hero .container{
    position:relative;
    z-index:1;
    width:100%;
    padding-top:44px;
    padding-bottom:52px;
}

.hero-body{
    max-width:620px;
    text-align:left;
}

/* Hero заглавие — ширината на ПЛЕВЕН = НАД ВСИЧКО чрез font-size (JS) */
.hero-lockup{
    display:inline-block;
    max-width:100%;
}

.hero-title{
    margin:0;
    padding:0;
}

.hero .line-white,
.hero .line-red{
    display:block;
    font-family:var(--font-primary);
    font-weight:700;
    text-transform:uppercase;
    text-align:left;
    white-space:nowrap;
    letter-spacing:.02em;
    text-shadow:
        0 2px 3px rgba(0,0,0,.5),
        0 5px 14px rgba(0,0,0,.32);
}

.hero .line-white{
    font-size:clamp(33px,5.1vw,51px);
    line-height:1;
    color:#fff;
}

.hero .line-red{
    font-size:clamp(33px,5.1vw,51px);
    line-height:1.05;
    color:#e31e24;
    margin-top:5px;
}

.hero-subtitle{
    margin-top:20px;
    font-family:var(--font-primary);
    font-size:15px;
    font-weight:400;
    line-height:1.55;
    color:rgba(232,238,247,.92);
    max-width:480px;
}

/* Hero заглавие — desktop */
@media(min-width:1100px){
    .hero .line-red{
        font-size:51px;
        line-height:1.05;
    }

    .hero .line-white{
        font-size:88px;
        line-height:1;
    }

    .hero-subtitle{font-size:16px}
}

/* Hero заглавие — mobile */
@media(max-width:768px){
    .hero .line-red{
        font-size:clamp(28px,8.2vw,36px);
        line-height:1.05;
    }

    .hero .line-white{
        font-size:clamp(40px,11vw,52px);
        line-height:1.05;
        margin-top:0;
    }
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:16px;
    margin-top:32px;
}

.hero-buttons .btn{
    height:50px;
    padding:0 26px;
    font-size:11px;
    letter-spacing:.08em;
}

.hero-buttons .btn .icon{
    width:17px;
    height:17px;
}