/*=================================
        ArenaOS
        HERO.CSS
=================================*/


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

.hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:140px 0 80px;

    overflow:hidden;

}


/*=================================
        GRID
=================================*/

.hero-container{

    display:grid;

    grid-template-columns:1fr 1.25fr;

    align-items:center;

    gap:100px;

}


/*=================================
        CONTENT
=================================*/

.hero-content{

    position:relative;

    z-index:5;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero-content h1{

    max-width:680px;

    margin:26px 0;

}

.hero-content p{

    max-width:600px;

    font-size:1.15rem;

    color:var(--text-light);

}

.hero-buttons{

    margin-top:42px;

}


/*=================================
        HIGHLIGHTS
=================================*/

.hero-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:36px;

}

.hero-highlights span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

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

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

    color:var(--text-light);

    font-size:.92rem;

    font-weight:500;

    transition:var(--transition);

}

.hero-highlights span:hover{

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

    border-color:rgba(59,54,232,.30);

}


/*=================================
        VISUAL
=================================*/

.hero-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:760px;

}


/*=================================
        GLOW
=================================*/

.hero-glow{

    position:absolute;

    width:720px;

    height:720px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(25,19,184,.35),

        transparent 70%

    );

    filter:blur(130px);

    z-index:-2;

}


/*=================================
        FLOATING CARDS
=================================*/

.floating-card{

    position:absolute;

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:22px 24px;

    border-radius:22px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(var(--glass-blur));

    box-shadow:var(--shadow-md);

    transition:var(--transition);

}

.floating-card:hover{

    transform:translateY(-8px);

}

.floating-card span{

    color:var(--text-muted);

    font-size:.9rem;

}

.floating-card strong{

    font-size:2rem;

    font-weight:800;

}

.floating-income{

    top:30px;

    right:-40px;

}

.floating-income strong{

    color:var(--success);

}

.floating-users{

    bottom:30px;

    left:-40px;

}


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

@media(max-width:1200px){

    .hero{

        padding-top:120px;

        text-align:center;

    }

    .hero-container{

        grid-template-columns:1fr;

        gap:70px;

    }

    .hero-content{

        max-width:760px;

        margin:auto;

        align-items:center;

    }

    .hero-content h1{

        max-width:none;

    }

    .hero-content p{

        max-width:650px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-highlights{

        justify-content:center;

    }

    .hero-visual{

        min-height:auto;

    }

}

@media(max-width:768px){

    .hero{

        padding:120px 0 70px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-highlights{

        flex-direction:column;

        width:100%;

    }

    .hero-highlights span{

        justify-content:center;

    }

    .floating-card{

        display:none;

    }

}
/*=================================
        HERO LOGO
=================================*/

.hero-logo{

    width:260px;

    margin-bottom:28px;

    filter:drop-shadow(0 0 35px rgba(25,19,184,.35));

    animation:heroLogo 1s ease;

}

@keyframes heroLogo{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}