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

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(242, 183, 5, 0.18), transparent 60%),
        linear-gradient(135deg, #f0f9f2 0%, #fdfaf2 55%, #ffffff 100%);
}

.hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(8px);
    opacity: 0.5;
    pointer-events: none;
}
.hero-blob--green {
    width: 22rem; height: 22rem;
    background: radial-gradient(circle, rgba(46,162,77,0.25), transparent 70%);
    top: -6rem; right: -4rem;
}
.hero-blob--gold {
    width: 16rem; height: 16rem;
    background: radial-gradient(circle, rgba(242,183,5,0.25), transparent 70%);
    bottom: -5rem; left: -3rem;
}

.hero-stat {
    backdrop-filter: blur(6px);
}

@keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.hero-float {
    animation: float-soft 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .hero-float { animation: none; }
}