/* ==========================
   HERO SECTION
========================== */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:120px 8% 60px;
    background:
        radial-gradient(circle at top right,#8B5CF622,transparent 40%),
        radial-gradient(circle at bottom left,#3B82F622,transparent 35%),
        #070B12;
    overflow:hidden;
}

.hero-content{
    width:50%;
    z-index:2;
}

.hero-subtitle{
    color:#8B5CF6;
    font-size:18px;
    margin-bottom:15px;
    text-transform:uppercase;
    letter-spacing:3px;
}

.hero-title{
    color:#ffffff;
    font-size:72px;
    line-height:1.1;
    font-family:'Orbitron',sans-serif;
    font-weight:800;
}

.hero-title span{
    color:#8B5CF6;
    text-shadow:0 0 25px #8B5CF6;
}

.hero-text{
    color:#bdbdbd;
    font-size:18px;
    max-width:600px;
    line-height:1.8;
}

.hero-buttons{
    margin-top:40px;
    display:flex;
    gap:20px;
}

.btn-primary{

    background:#8B5CF6;

    color:white;

    padding:16px 36px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;
}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 0 30px #8B5CF6;

}

.btn-secondary{

    border:2px solid #8B5CF6;

    padding:16px 36px;

    border-radius:50px;

    transition:.35s;

}

.btn-secondary:hover{

    background:#8B5CF6;

}

.hero-image{

    width:45%;

    display:flex;

    justify-content:center;

    position:relative;

}

.hero-image img{

    width:100%;

    max-width:600px;

    border-radius:30px;

    box-shadow:0 0 60px rgba(139,92,246,.35);

    animation:float 4s ease-in-out infinite;

}

.glow{

    position:absolute;

    width:420px;

    height:420px;

    background:#8B5CF6;

    filter:blur(180px);

    opacity:.25;

    z-index:-1;

}

.stats{

    margin-top:70px;

    display:flex;

    gap:50px;

}

.stat h2{

    color:#8B5CF6;

    font-size:40px;

}

.stat p{

    color:#a8a8a8;

    margin-top:8px;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}

@media(max-width:992px){

.hero{

flex-direction:column;

text-align:center;

padding-top:140px;

}

.hero-content{

width:100%;

}

.hero-image{

width:100%;

margin-top:50px;

}

.hero-title{

font-size:48px;

}

.hero-buttons{

justify-content:center;

}

.stats{

justify-content:center;

flex-wrap:wrap;

}

}
.btn-primary,
.btn-secondary{
    transition:0.4s;
}

.btn-primary:hover{
    transform:translateY(-5px) scale(1.05);
}

.btn-secondary:hover{
    transform:translateY(-5px);
}
.hero-title{
    color:#fff;
}