/* Hero spotlight effect for main hero section (green palette) */
.main-hero {
    position: relative;
    background: #0b0d0c;
    color: #f8fafc;
    overflow: hidden;
}

.main-hero .hero-content {
    position: relative;
    z-index: 2;
}

.main-hero-spotlight-layer {
    position: absolute;
    inset: -12% -6% 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    filter: blur(3px);
}

.main-hero-spotlight {
    position: absolute;
    width: var(--size, 30rem);
    height: var(--size, 30rem);
    border-radius: 50%;
    background: rgba(183, 255, 74, 0.055);
    opacity: 0.28;
    mix-blend-mode: screen;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(var(--scale, 1));
    transition:
        transform var(--duration, 16s) ease-in-out,
        opacity 1.6s ease-in-out;
    will-change: transform, opacity;
    box-shadow: 0 0 85px rgba(183,255,74,0.18), 0 0 140px rgba(67,196,82,0.12);
}

.main-hero-spotlight::after {
    content: "";
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: rgba(220, 252, 231, 0.045);
    opacity: 0.62;
    filter: blur(7px);
}

.main-hero-spotlight.is-dimmed {
    opacity: 0.2;
}

/* Utility: slightly different size variant */
.main-hero-spotlight.small { --size: 18rem; --duration: 10s; }
.main-hero-spotlight.large { --size: 38rem; --duration: 20s; }