/* ==========================================================
   HERO SECTION
========================================================== */

.hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:#0b1812;
}

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

.hero-background{
    position:absolute;
    inset:0;
    z-index:0;
}

.hero-slide{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    opacity:0;
    transition:opacity 1s ease-in-out;
}

.hero-slide.active{
    opacity:1;
}

.hero-overlay{

    position:absolute;
    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.65) 0%,
            rgba(0,0,0,.45) 40%,
            rgba(0,0,0,.20) 100%
        );

    z-index:2;

}

/* ==========================================================
   CONTAINER
========================================================== */

.hero-container{
    position:relative;
    z-index:5;

    width:min(1320px,92%);
    margin:0 auto;

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

    min-height:100vh;
}

/* ==========================================================
   HERO CONTENT
========================================================== */
.hero-content{

    width:100%;
    max-width:700px;

    position:relative;
    z-index:5;

    background:none;

    border:none;

    box-shadow:none;

    backdrop-filter:none;

    padding:0;
}

/* ==========================================================
   BADGE
========================================================== */

.hero-badge{

    display:inline-flex;
    align-items:center;

    padding:12px 22px;

    border-radius:50px;

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

    border:1px solid rgba(201,226,101,.40);

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    margin-bottom:28px;
}

/* ==========================================================
   TITLE
========================================================== */

.hero-title{

    font-size:clamp(3rem,6vw,5.8rem);

    line-height:1.05;

    color:#fff;

    font-weight:900;

    text-shadow:

        0 8px 30px rgba(0,0,0,.45);

    margin-bottom:22px;

}
.hero-title span{

    display:block;

    color:#C9E265;
}

/* ==========================================================
   DESCRIPTION
========================================================== */


.hero-description{

    max-width:560px;

    color:rgba(255,255,255,.92);

    font-size:18px;

    line-height:1.8;

    text-shadow:

        0 3px 15px rgba(0,0,0,.35);

    margin-bottom:35px;

}
/* ==========================================================
   HERO TRUST BADGES
========================================================== */

.hero-trust{

    display:flex;
    flex-wrap:wrap;

    gap:14px;

    margin-bottom:40px;
}

.hero-trust span{

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

    padding:12px 20px;

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

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

    border-radius:50px;

    color:#ffffff;

    font-size:14px;

    font-weight:500;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    transition:.35s ease;
}

.hero-trust span:hover{

    transform:translateY(-4px);

    background:rgba(201,226,101,.15);

    border-color:#C9E265;
}

.hero-trust svg{

    width:18px;
    height:18px;

    color:#C9E265;

    stroke-width:2.2;

    flex-shrink:0;
}

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

.hero-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    width:100%;
}

.stat-card{

    padding:24px 20px;

    border-radius:24px;

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

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

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    text-align:center;

    transition:.35s ease;
}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:#C9E265;

    box-shadow:

        0 18px 40px rgba(0,0,0,.20);
}

.stat-card strong{

    display:block;

    font-size:32px;

    font-weight:800;

    color:#ffffff;

    margin-bottom:8px;
}

.stat-card span{

    display:block;

    font-size:14px;

    color:rgba(255,255,255,.75);

    line-height:1.5;
}
/* ==========================================================
   HERO NAVIGATION DOTS
========================================================== */

.hero-dots{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:14px;

    z-index:20;
}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

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

    cursor:pointer;

    transition:all .35s ease;
}

.dot:hover{

    transform:scale(1.2);

    background:#C9E265;
}

.dot.active{

    width:42px;

    border-radius:30px;

    background:#C9E265;

    box-shadow:0 0 18px rgba(201,226,101,.45);
}

/* ==========================================================
   HERO NAVIGATION ARROWS
========================================================== */

.hero-prev,
.hero-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

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

    color:#fff;

    font-size:22px;

    cursor:pointer;

    transition:.35s ease;

    z-index:20;
}

.hero-prev{

    left:30px;
}

.hero-next{

    right:30px;
}

.hero-prev:hover,
.hero-next:hover{

    background:#C9E265;

    color:#111;

    transform:translateY(-50%) scale(1.08);

    box-shadow:

        0 15px 35px rgba(201,226,101,.35);
}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator{

    position:absolute;

    bottom:38px;

    right:40px;

    z-index:20;
}

.scroll-indicator span{

    display:block;

    width:28px;

    height:48px;

    border:2px solid rgba(255,255,255,.55);

    border-radius:50px;

    position:relative;
}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    top:8px;

    left:50%;

    transform:translateX(-50%);

    width:5px;

    height:10px;

    border-radius:10px;

    background:#C9E265;

    animation:scrollMouse 2s infinite;
}

@keyframes scrollMouse{

    0%{

        opacity:1;

        transform:translate(-50%,0);
    }

    100%{

        opacity:0;

        transform:translate(-50%,18px);
    }
}

/* ==========================================================
   PREMIUM HOVER EFFECTS
========================================================== */

.hero-content{

    transition:transform .45s ease;
}

.hero-content:hover{

    transform:translateY(-4px);
}

.hero-badge,
.hero-trust span,
.stat-card{

    transition:all .35s ease;
}

.hero-badge:hover{

    background:rgba(201,226,101,.16);

    border-color:#C9E265;
}

/* ==========================================================
   RESPONSIVE DESIGN
========================================================== */

/* ---------- Large Laptop ---------- */

@media (max-width: 1200px){

    .hero-content{
        max-width:560px;
        padding:42px;
    }

    .hero-title{
        font-size:clamp(3rem,5vw,4.8rem);
    }

}


/* ---------- Tablet ---------- */

@media (max-width:991px){

    .hero{

        min-height:auto;

        padding:120px 0 90px;

    }

    .hero-container{

        min-height:auto;

        justify-content:center;

    }

    .hero-content{

        max-width:100%;

        padding:40px;

        text-align:center;

        align-items:center;

    }

    .hero-description{

        max-width:650px;

    }

    .hero-trust{

        justify-content:center;

    }

    .hero-stats{

        grid-template-columns:repeat(3,1fr);

    }

    .hero-prev,
    .hero-next{

        display:none;

    }

}


/* ---------- Mobile ---------- */

@media (max-width:768px){

    .hero{

        padding:100px 0 70px;

    }

    .hero-content{

    padding:0;

    background:none;

    border:none;

    box-shadow:none;

}

    .hero-title{

        font-size:clamp(2.4rem,9vw,3.4rem);

        line-height:1.1;

        letter-spacing:-1px;

    }

    .hero-description{

        font-size:15px;

        line-height:1.7;

    }

    .hero-badge{

        font-size:13px;

        padding:10px 18px;

    }

    .hero-trust{

        gap:10px;

    }

    .hero-trust span{

        width:100%;

        justify-content:center;

        font-size:13px;

        padding:12px 18px;

    }

    .hero-stats{

        grid-template-columns:1fr;

        gap:14px;

    }

    .stat-card{

        padding:20px;

    }

    .stat-card strong{

        font-size:28px;

    }

    .hero-dots{

        bottom:20px;

    }

    .scroll-indicator{

        display:none;

    }

}


/* ---------- Small Phones ---------- */

@media (max-width:480px){

    .hero{

        padding:90px 0 60px;

    }

    .hero-content{

        padding:24px 18px;

    }

    .hero-title{

        font-size:2.2rem;

    }

    .hero-description{

        font-size:14px;

    }

    .hero-badge{

        font-size:12px;

    }

    .hero-trust span{

        font-size:12px;

        padding:10px 14px;

    }

    .stat-card{

        border-radius:18px;

    }

    .stat-card strong{

        font-size:24px;

    }

}


/* ==========================================================
   HERO ENTRANCE ANIMATION
========================================================== */

.hero-content{

    animation:heroFadeUp .9s ease both;

}

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}