.hero {
    position: relative;
    overflow: hidden;
    background: var(--tadka-dark, #0b0f12);
}

.hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;

    background: radial-gradient(
            900px 420px at 50% 45%,
            rgba(34, 197, 94, 0.28) 0%,
            rgba(34, 197, 94, 0.18) 30%,
            rgba(34, 197, 94, 0.08) 50%,
            transparent 70%
    );

    filter: blur(60px);
    opacity: 0.6;
}

.hero > * {
    position: relative;
    z-index: 1;
}

[aria-hidden="true"] {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}