/* 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:960px;
    text-align:left;
}

.hero-lockup{
    max-width:620px;
}

/* Tricolor lockup — бяло / зелено / червено като българското знаме */
.hero-lockup{
    display:flex;
    align-items:stretch;
    gap:14px;
}

.hero-tricolor{
    flex-shrink:0;
    width:4px;
    border-radius:2px;
    background:linear-gradient(
        180deg,
        #fff 0%,
        #fff 33.33%,
        #00966e 33.33%,
        #00966e 66.66%,
        #d01c1f 66.66%,
        #d01c1f 100%
    );
    box-shadow:0 0 12px rgba(0,0,0,.35);
}

.hero-lockup__content{
    min-width:0;
}

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

.hero .line-white,
.hero .line-green{
    display:block;
    font-family:var(--font-primary);
    font-size:clamp(26px,4.2vw,48px);
    font-weight:700;
    line-height:1.05;
    text-transform:uppercase;
    text-align:left;
    white-space:nowrap;
    letter-spacing:.03em;
    text-shadow:
        0 2px 3px rgba(0,0,0,.5),
        0 5px 14px rgba(0,0,0,.32);
}

.hero .line-white{
    color:#fff;
}

.hero .line-green{
    color:#4ade80;
    margin-top:4px;
}

.hero-tagline{
    display:inline-block;
    margin:14px 0 0;
    padding:8px 0;
    max-width:100%;
    font-family:var(--font-primary);
    font-size:clamp(15px,2.5vw,29px);
    font-weight:600;
    line-height:1.35;
    color:#ff6b6b;
    text-shadow:0 1px 2px rgba(0,0,0,.4);
}

.hero-subtitle{
    margin-top:136px;
    padding-left:18px;
    font-family:var(--font-primary);
    font-size:15px;
    font-weight:400;
    line-height:1.55;
    color:rgba(255,255,255,.92);
    white-space:nowrap;
}

/* Hero — desktop */
@media(min-width:1100px){
    .hero .line-white,
    .hero .line-green{
        font-size:48px;
    }

    .hero-tagline{
        font-size:29px;
    }

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

/* Hero — mobile */
@media(max-width:768px){
    .hero{
        align-items:stretch;
        min-height:calc(100svh - var(--nav-h));
        min-height:calc(100dvh - var(--nav-h));
    }

    .hero .container{
        display:flex;
        flex-direction:column;
        flex:1;
        padding-top:32px;
        padding-bottom:24px;
    }

    .hero-body{
        display:flex;
        flex-direction:column;
        flex:1;
        width:100%;
    }

    .hero-lockup{
        gap:10px;
    }

    .hero-tricolor{
        width:3px;
    }

    .hero .line-white,
    .hero .line-green{
        font-size:clamp(24px,7vw,32px);
        white-space:normal;
    }

    .hero-tagline{
        font-size:clamp(14px,3.8vw,18px);
        padding:7px 0;
    }

    .hero-subtitle{
        display:none;
    }

    .hero-btn--mobile-hide{
        display:none !important;
    }
}

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

.hero-buttons .btn{
    height:46px;
    padding:0 18px;
    font-size:10px;
    letter-spacing:.07em;
}

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

@media(min-width:769px){
    .hero-buttons{
        flex-wrap:nowrap;
    }
}

/* Mobile — бутоните най-отдолу (след base .hero-buttons, за да не се презаписва margin-top) */
@media(max-width:768px){
    .hero{
        height:calc(100dvh - var(--nav-h));
        min-height:calc(100dvh - var(--nav-h));
    }

    .hero .container{
        min-height:100%;
        height:100%;
    }

    .hero-body{
        min-height:100%;
        justify-content:space-between;
    }

    .hero-lockup{
        flex-shrink:0;
    }

    .hero .hero-buttons{
        margin-top:auto;
        flex-shrink:0;
        width:100%;
        padding:16px 13px 0;
        gap:10px;
    }
}