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

.hero{

    position:relative;

    overflow:hidden;

    padding:180px 0 140px;

    background:
        radial-gradient(circle at top left,#dbeafe 0%,transparent 35%),
        radial-gradient(circle at bottom right,#ede9fe 0%,transparent 35%),
        linear-gradient(to bottom,#ffffff,#f8fafc);

}

.hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:70px;
}

.hero-badge{
    display:inline-flex;
    padding:10px 18px;
    background:#eef2ff;
    color:#2563eb;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    margin-bottom:30px;
}

.hero-title{
    font-size:72px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:-2px;
    margin-bottom:25px;
}

.hero-title span{
    display:block;
    color:#2563eb;
}

.hero-description{
    font-size:22px;
    line-height:1.8;
    color:var(--muted);
    max-width:640px;
    margin-bottom:45px;
}

.hero-buttons{
    display:flex;
    gap:18px;
    margin-bottom:60px;
}

.hero-stats{
    display:flex;
    gap:50px;
}

.hero-stats strong{
    display:block;
    font-size:30px;
    font-weight:800;
}

.hero-stats span{
    color:var(--muted);
    font-size:15px;
}

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

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

}

/* Left Glow */

.gradient-one{

    position:absolute;

    width:700px;

    height:700px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:#2563eb20;

    filter:blur(120px);

    animation:glowOne 12s ease-in-out infinite;

}

/* Right Glow */

.gradient-two{

    position:absolute;

    width:650px;

    height:650px;

    right:-180px;

    bottom:-220px;

    border-radius:50%;

    background:#9333ea15;

    filter:blur(120px);

    animation:glowTwo 14s ease-in-out infinite;

}

/* Grid */

.grid-overlay{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),

        linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px);

    background-size:48px 48px;

    mask-image:radial-gradient(circle,#000 35%,transparent 100%);

    opacity:.45;

}

/* Keep content above background */

.hero-grid{

    position:relative;

    z-index:2;

}

@keyframes glowOne{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(80px,60px);

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes glowTwo{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-70px,-50px);

    }

    100%{

        transform:translate(0,0);

    }

}