.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(
            120% 120% at 80% 20%,
            #1a1f25 0%,
            #0e1115 60%,
            #080a0d 100%
    );
}
.min-vh-20 {
    min-height: 20vh;
}
.min-vh-90 {
    min-height: 90vh;
}

.hero-title {
    font-size: var(--fs-h1);
    line-height: 1.05;
    margin-bottom: 1rem;
}

.hero-text {
    font-size: var(--fs-body);
    margin-bottom: 2rem;
    color: var(--text-muted);
    max-width: 42rem;
}
#edge-arch-canvas,
#hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
    #edge-arch-canvas,
    #hero-canvas {
        opacity: 0.25;
    }
}
.hero-content {
    position: relative;
    z-index: 1;
}