/* Light background dots parallax */
.light-bg-dots {
    position: relative;
    overflow: hidden;
}

.light-bg-dots::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
    transform: translateY(var(--scroll-offset, 0px));
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}

/* Dark background dots parallax */
.gradient-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-image: radial-gradient(circle, rgba(200, 200, 220, 0.3) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
    transform: translateY(var(--scroll-offset, 0px));
    pointer-events: none;
    will-change: transform;
    z-index: 1;
}

/* Ensure content cards appear above dots */
.bg-white {
    position: relative;
    z-index: 1;
}