/*
==========================================================
GAME HERO
==========================================================
*/

.uet-game-hero{

    position:relative;

    min-height:820px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:140px 60px 100px;

}

.uet-game-hero-background{

    position:absolute;

    inset:0;

    z-index:1;

}

.uet-game-hero-background img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.uet-game-hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

        linear-gradient(
            180deg,
            rgba(7,10,18,.72),
            rgba(7,10,18,.88)
        ),

        radial-gradient(
            circle at left center,
            rgba(0,180,255,.12),
            transparent 45%
        ),

        radial-gradient(
            circle at right center,
            rgba(255,0,180,.10),
            transparent 45%
        );

}

.uet-game-hero-inner{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1450px;

    display:grid;

    grid-template-columns:360px 1fr;

    align-items:center;

    gap:80px;

}






/*
==========================================================
LEFT
==========================================================
*/

.uet-game-left{

    display:flex;

    justify-content:center;

    align-items:center;

}

.uet-game-logo{

    width:270px;
    height:270px;

    border-radius:50%;

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

    backdrop-filter:blur(25px);

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

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

        0 0 60px rgba(0,180,255,.18);

}

.uet-game-logo img{

    width:210px;
    height:210px;

    object-fit:contain;

}





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

.uet-game-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.uet-game-title{

    font-size:78px;

    font-weight:900;

    line-height:1.05;

    margin-bottom:28px;

    color:#FFF;

}

.uet-hero-badges{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:28px;

}

.uet-hero-chips{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:30px;

}

.uet-game-description{

    max-width:720px;

    color:#D8D8D8;

    font-size:22px;

    line-height:1.7;

    margin-bottom:40px;

}



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

.uet-hero-stats{

    display:grid;

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

    gap:24px;

    margin:55px 0;

}

.uet-hero-stat-card{

    padding:28px;

    border-radius:22px;

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

    backdrop-filter:blur(25px);

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

    transition:.35s ease;

    overflow:hidden;

    position:relative;

}

.uet-hero-stat-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,180,255,.35);

    box-shadow:

        0 15px 45px rgba(0,180,255,.18);

}

.uet-hero-stat-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.uet-hero-stat-icon{

    font-size:28px;

}

.uet-hero-stat-value{

    font-size:46px;

    font-weight:900;

    color:#FFF;

}

.uet-hero-stat-title{

    display:block;

    color:#9EA5B5;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-size:12px;

    font-weight:700;

}

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

.uet-hero-buttons{

    display:flex;

    gap:20px;

    align-items:center;

}
/*
==========================================================
HERO ANIMATION
==========================================================
*/

.uet-game-logo{

    animation:

        uetFloat 5s ease-in-out infinite;

}

@keyframes uetFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}
.uet-game-hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-180px;

    top:-100px;

    background:

        radial-gradient(

            circle,

            rgba(0,170,255,.18),

            transparent 70%

        );

    filter:blur(40px);

    animation:uetGlow 8s ease infinite;

    z-index:2;

}

@keyframes uetGlow{

    0%{

        opacity:.45;

        transform:scale(1);

    }

    50%{

        opacity:.8;

        transform:scale(1.15);

    }

    100%{

        opacity:.45;

        transform:scale(1);

    }

}