.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 40px 120px;
    position: relative;
    overflow: hidden;
}

.hero .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero .hero-bg .hero-bg-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 75% 20%, rgba(0, 217, 255, 0.13), transparent 55%), radial-gradient(ellipse at 15% 80%, rgba(13, 63, 143, 0.08), transparent 50%);
}

.hero .hero-bg .hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 60% 40%, rgba(0, 0, 0, 0.4), transparent 70%);
}

.hero .h-title {
    font-family: 'Unbounded', sans-serif;
    font-size: min(12vw, 200px);
    font-weight: 900;
    line-height: .82;
    position: relative;
    z-index: 1;
}

.hero .h-title .h-t-line {
    overflow: hidden;
    display: block;
    color: var(--text-primary);
}

.hero .h-title .h-t-line .h-t-w {
    display: inline-block;
}

.hero .h-title .h-t-line .h-t-w.stroke {
    -webkit-text-stroke: 2px var(--primary);
    color: transparent;
}