.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-container{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

    position:relative;

    z-index:2;

}

.hero-left h1{

    font-family:"Space Grotesk";

    font-size:4.8rem;

    line-height:1.1;

    margin:25px 0;

}

.hero-left h1 span{

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-left p{

    color:var(--gray);

    line-height:1.9;

    font-size:1.15rem;

    max-width:620px;

}

.hero-badge{

    display:inline-flex;

    padding:10px 22px;

    border-radius:50px;

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

    color:var(--secondary);

    backdrop-filter:blur(20px);

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.btn-primary{

    background:var(--gradient);

    color:#000;

    padding:18px 34px;

    border-radius:60px;

    font-weight:700;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 50px rgba(32,196,255,.35);

}

.btn-outline{

    padding:18px 34px;

    border-radius:60px;

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

    transition:.35s;

}

.btn-outline:hover{

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

}

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

}

.hero-right img{

    width:520px;

    position:relative;

    z-index:2;

    animation:float 5s ease-in-out infinite;

}

.hero-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(32,196,255,.35),
    transparent 70%);

    filter:blur(60px);

}

.hero-numbers{

    display:flex;

    gap:60px;

    margin-top:70px;

}

.hero-numbers h2{

    font-size:2rem;

    color:var(--primary);

}

.hero-numbers span{

    color:var(--gray);

}

.hero-background{

    position:absolute;

    inset:0;

}

.grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:60px 60px;

    mask-image:radial-gradient(circle, black 40%, transparent 90%);

}

.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}

.one{

    width:450px;

    height:450px;

    background:#20C4FF22;

    top:-150px;

    left:-100px;

}

.two{

    width:500px;

    height:500px;

    background:#58F29B15;

    right:-100px;

    bottom:-120px;

}

.three{

    width:250px;

    height:250px;

    background:#20C4FF20;

    top:35%;

    left:45%;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}