/* ==========================================================
   HAS PREKAST
   HERO v10.0
   STEP 1 - LAYOUT
========================================================== */

.hero{
    position:relative;
    min-height:1080px;
    overflow:hidden;
    background:#071526;
    display:flex;
    align-items:center;
}

/* ---------- Media ---------- */

.hero-media{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
}

.hero-media img{

    position:absolute;

    right:-0%;

    bottom:40;

    width:110%;

    max-width:none;

    height:auto;

    object-fit:contain;

    transform:translateY(10px);

    filter:
        drop-shadow(0 35px 80px rgba(0,0,0,.35));

    transition:
        transform .8s ease;

}

/* ---------- Overlay ---------- */

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

    90deg,

    rgba(7,21,38,.98) 0%,

    rgba(7,21,38,.94) 18%,

    rgba(7,21,38,.86) 34%,

    rgba(7,21,38,.58) 48%,

    rgba(7,21,38,.18) 68%,

    rgba(7,21,38,0) 100%

    );

}

/* ---------- Container ---------- */

.hero .container{

    position:relative;

    z-index:5;

    width:min(1400px,92%);

    height:1080px;

    margin:auto;

    display:grid;

    align-items:center;

}

/* ---------- Content ---------- */

.hero-content{

    width:100%;

    max-width:470px;

    padding-top:40px;

}

/* ---------- Desktop ---------- */

@media (min-width:1400px){

.hero-media img{

    width:110%;

}

}
/* ==========================================================
   HERO v10.0
   STEP 2 - CONTENT
========================================================== */

/* ---------- Topline ---------- */

.hero-topline{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:24px;

    color:var(--gold);

    font-size:.90rem;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
}

.hero-topline span{
    width:52px;
    height:2px;
    background:var(--gold);
    flex:none;
}


/* ---------- Title ---------- */

.hero-title{

    margin:0;

    color:#fff;

    font-size:clamp(4rem,5vw,6rem);

    line-height:.92;

    font-weight:500;

    letter-spacing:-2px;

}

.hero-title small{

    display:block;

    margin-bottom:18px;

    color:var(--gold);

    font-size:.30em;

    font-weight:600;

    letter-spacing:5px;

}

.hero-title strong{

    display:block;

    font-weight:700;

}


/* ---------- Text ---------- */

.hero-text{

    max-width:440px;

    margin:36px 0 44px;

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

    font-size:1.12rem;

    line-height:1.9;

}


/* ---------- Buttons ---------- */

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    min-width:200px;

    height:58px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

}
/*======================================
  HERO SHADOW
======================================*/

.hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:220px;

    background:

    linear-gradient(

        to bottom,

        rgba(7,21,38,0),

        rgba(7,21,38,.95)

    );

    z-index:4;

}
/*======================================
  GOLD LIGHT
======================================*/

.hero::before{

    content:"";

    position:absolute;

    right:-220px;

    top:-120px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(200,154,71,.16),

            transparent 70%

        );

    filter:blur(90px);

    z-index:2;

}
.hero:hover .hero-media img{

    transform:

        translateY(0)

        scale(1.015);

}
/* ==========================================================
   HERO v10.0
   STEP 4 - STATS & RESPONSIVE
==========================================================*/

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

.hero-stats{

    position:relative;

    margin-top:-175px;

    z-index:20;

}

.hero-stats .container{

    width:min(1400px,92%);

    margin:auto;

}

.hero-stats-grid{

    display:grid;

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

    gap:24px;

}

.hero-stat{

    padding:36px 30px;

    border-radius:22px;

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

    backdrop-filter:blur(14px);

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

    transition:.35s ease;

}

.hero-stat:hover{

    transform:translateY(-8px);

    border-color:rgba(200,154,71,.35);

    box-shadow:0 25px 60px rgba(0,0,0,.30);

}

.hero-stat-number{

    font-size:2.3rem;

    font-weight:700;

    color:var(--gold);

    margin-bottom:12px;

}

.hero-stat-text{

    color:#fff;

    font-size:1rem;

}


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

@media(max-width:1200px){

.hero-media img{

    width:92%;

    right:-14%;

}

.hero-title{

    font-size:clamp(3.7rem,5vw,5rem);

}

}

@media(max-width:992px){

.hero{

    min-height:auto;

    padding:150px 0 120px;

}

.hero-media{

    position:relative;

    height:420px;

}

.hero-media img{

    width:100%;

    right:auto;

    left:50%;

    transform:translateX(-50%);

}

.hero-overlay{

    background:

    linear-gradient(

        to bottom,

        rgba(7,21,38,.95),

        rgba(7,21,38,.35)

    );

}

.hero-content{

    max-width:700px;

    margin:auto;

    text-align:center;

}

.hero-topline{

    justify-content:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    margin-top:50px;

}

.hero-stats-grid{

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

}

}

@media(max-width:768px){

.hero-title{

    font-size:3rem;

}

.hero-text{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

}

.hero-stats-grid{

    grid-template-columns:1fr;

}

}