/* =========================
   RESET
========================= */

.hero,
.hero *{
    box-sizing:border-box;
}

/* =========================
   THEME (INSTALLATÉR)
========================= */

:root{
    --accent:#2f7bdc;
    --accent-dark:#1f5fa8;
    --accent-soft:rgba(47,123,220,0.15);

    --hero-glow:rgba(47,123,220,0.18);
}

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

.hero{
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    padding:120px 0 80px;

    font-family:system-ui, sans-serif;
    color:#fff;

    overflow:hidden;
}

/* =========================
   BACKGROUND
========================= */

.hero__bg{
    position:absolute;
    inset:0;

    background:
        linear-gradient(90deg, rgba(0,0,0,0.78), rgba(0,0,0,0.35)),
        url("../img/hero.jpeg") center/cover no-repeat;

    filter:brightness(0.82) contrast(1.15) saturate(1.05);
    z-index:0;
}

/* blue water glow */
.hero__overlay{
    position:absolute;
    inset:0;

    background:radial-gradient(
        circle at 25% 20%,
        var(--hero-glow),
        transparent 55%
    );

    z-index:1;
}

/* content layer */
.hero .container{
    position:relative;
    z-index:2;
}

/* =========================
   LAYOUT
========================= */

.hero__wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
}

.hero__content{
    max-width:650px;
}

/* =========================
   TYPO
========================= */

.hero__title{
    font-size:clamp(38px, 4vw, 60px);
    line-height:1.05;
    font-weight:900;
    letter-spacing:-1px;
}

.hero__title span{
    color:var(--accent);
}

.hero__text{
    margin-top:18px;
    font-size:16px;
    line-height:1.7;
    color:rgba(255,255,255,0.75);
    max-width:520px;
}

/* =========================
   BUTTONS
========================= */

.hero__buttons{
    display:flex;
    gap:14px;
    margin-top:32px;
}

.btn{
    height:52px;
    padding:0 22px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;

    transition:all .35s cubic-bezier(.2,.8,.2,1);
    text-decoration:none;
}

/* primary */
.btn-primary{
    background:linear-gradient(135deg,var(--accent-dark),var(--accent));
    color:#fff;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px var(--accent-soft);
}

/* secondary */
.btn-secondary{
    border:1px solid rgba(47,123,220,0.25);
    background:rgba(47,123,220,0.06);
    color:#fff;
}

.btn-secondary:hover{
    transform:translateY(-3px);
    border-color:rgba(47,123,220,0.5);
    background:rgba(47,123,220,0.10);
}

/* =========================
   STATS
========================= */

.hero__stats{
    display:flex;
    gap:40px;

    margin-top:40px;
    padding-top:24px;

    border-top:1px solid rgba(47,123,220,0.15);
}

.hero__stat strong{
    font-size:28px;
    display:block;
    color:#fff;
}

.hero__stat span{
    font-size:11px;
    color:rgba(255,255,255,0.6);
    text-transform:uppercase;
}

/* =========================
   REVIEW BOX
========================= */

.hero__review-box{
    display:flex;
    align-items:center;
    gap:10px;

    height:64px;
    padding:0 14px;

    border-radius:12px;

    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.10);

    text-decoration:none;
    color:#fff;

    transition:all .35s cubic-bezier(.2,.8,.2,1);
}

.hero__review-box img{
    width:26px;
    height:26px;
    object-fit:contain;
}

.hero__review-box strong{
    font-size:22px;
    font-weight:900;
}

.hero__review-box:hover{
    transform:translateY(-3px) scale(1.03);
    border-color:rgba(47,123,220,0.5);
    box-shadow:0 18px 40px rgba(47,123,220,0.15);
}

/* =========================
   RIGHT CARDS
========================= */

.hero__cards{
    position:relative;
    width:420px;
    height:420px;
}

.card{
    position:absolute;

    padding:22px;
    border-radius:16px;

    background:rgba(15,18,22,0.72);
    border:1px solid rgba(47,123,220,0.12);

    box-shadow:0 30px 80px rgba(0,0,0,0.35);

    transition:transform .35s ease, border-color .35s ease;
}

.card h3{
    font-size:15px;
    margin-bottom:8px;
    color:#fff;
}

.card p{
    font-size:13px;
    color:rgba(255,255,255,0.65);
    line-height:1.6;
}

/* positions */
.card--main{
    width:270px;
    top:25px;
    left:0;
}

.card--secondary{
    width:270px;
    top:145px;
    left:75px;
}

.card--small{
    width:180px;
    bottom:25px;
    right:10px;
}

/* hover */
.card:hover{
    transform:translateY(-6px);
    border-color:rgba(47,123,220,0.35);
}

/* =========================
   TRUST BAR
========================= */

.hero__trust{
    margin-top:60px;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;

    gap:14px;
}

.hero__trust div{
    padding:10px 14px;

    border-radius:999px;
    border:1px solid rgba(47,123,220,0.12);

    font-size:12px;
    color:rgba(255,255,255,0.65);
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

.hero{
    padding:100px 0 60px;
}

.hero__wrapper{
    flex-direction:column;
    align-items:flex-start;
    gap:40px;
}

.hero__buttons{
    flex-direction:column;
    width:100%;
}

.btn{
    width:100%;
}

.hero__stats{
    flex-wrap:wrap;
    gap:16px;
}

.hero__cards{
    display:none;
}

.hero__title{
    font-size:34px;
}

.hero__text{
    font-size:15px;
}
}