/* ==========================================
   Hero
========================================== */

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    overflow:visible;

}

.hero-content{

    max-width:720px;

    z-index:2;

}

.hero h1{

    font-family:"Space Grotesk",sans-serif;

    font-size:clamp(4rem,8vw,6.5rem);

    font-weight:700;

    letter-spacing:-3px;

    color:var(--text-primary);

    margin-bottom:.75rem;

    text-shadow:
        0 0 10px rgba(124,58,237,.15),
        0 0 35px rgba(124,58,237,.08);

}


.hero p{

    font-size:1.35rem;

    line-height:1.8;

    color:var(--text-secondary);

    max-width:650px;

    margin:0 auto 3rem;

}

.scroll{

    color:var(--accent-light);

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.8rem;

}

/* =======================================================
   Ambient Orbs
======================================================= */

.hero-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.45;

    pointer-events:none;

}

.hero-orb-left{

    width:520px;

    height:520px;

    top:-180px;

    left:-150px;

    background:rgba(124,58,237,.28);

}

.hero-orb-right{

    width:420px;

    height:420px;

    bottom:-150px;

    right:-120px;

    background:rgba(80,140,255,.18);

}

/* =======================================================
   Hero Grid
======================================================= */

.hero-grid{

    position:absolute;

    inset:0;

    background:

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

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

    background-size:60px 60px;

    mask-image:radial-gradient(circle at center, black 30%, transparent 90%);

    opacity:.25;

    pointer-events:none;

}

.hero-kicker{

    display:inline-block;

    margin-bottom:1.25rem;

    color:var(--accent-light);

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:.75rem;

}