.elementor-element.taa-section-gradient {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.elementor-element.taa-section-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Places it above the background but below content */
}

.elementor-element.taa-section-gradient > * {
    position: relative;
    z-index: 1;
}

/* ACTUAL BACKGROUNDS */

.elementor-element.taa-section-gradient.home-hero::before {
    background: 
        /* Top left purple gradient - half cut horizontally */
        radial-gradient(
        ellipse at 0% 0%, 
        rgba(158, 110, 230, 0.28) 0%, 
        rgba(158, 110, 230, 0) 50%
        ),
        /* Bottom left blue gradient - half cut horizontally */
        radial-gradient(
        ellipse at 0% 100%, 
        rgba(92, 195, 250, 0.28) 0%, 
        rgba(92, 195, 250, 0) 50%
        ),
        /* Bottom right pink gradient - quarter cut horizontally */
        radial-gradient(
        ellipse at 100% 70%, 
        rgba(250, 117, 248, 0.28) 0%, 
        rgba(250, 117, 248, 0) 50%
    );
}

.elementor-element.taa-section-gradient.home-first::before {
    background: 
        /* Top left purple gradient - half cut horizontally */
        radial-gradient(
        ellipse at 0% 0%, 
        rgba(158, 110, 230, 0.28) 0%, 
        rgba(158, 110, 230, 0) 50%
        ),
        /* Bottom right pink gradient - quarter cut horizontally */
        radial-gradient(
        ellipse at 140% 50%, 
        rgba(92, 195, 250, 0.28) 0%, 
        rgba(92, 195, 250, 0) 50%
    );
}

.elementor-element.taa-section-gradient.consolidated::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: 
        /* Triple gradient overlap section - all three brand colors in one spot */
        radial-gradient(
            circle at 60% 40%, 
            rgba(158, 110, 230, 0.20) 0%, /* Purple */
            rgba(158, 110, 230, 0) 15%
        ),
        radial-gradient(
            circle at 65% 45%, 
            rgba(92, 195, 250, 0.20) 0%, /* Blue */
            rgba(92, 195, 250, 0) 18%
        ),
        radial-gradient(
            circle at 55% 35%, 
            rgba(250, 117, 248, 0.20) 0%, /* Pink */
            rgba(250, 117, 248, 0) 12%
        ),
        
        /* Top section gradients - adjusted for less padding */
        radial-gradient(
            circle at 15% 20%, /* 25% → 20%, closer to original 10% */
            rgba(158, 110, 230, 0.25) 0%, /* Purple */
            rgba(158, 110, 230, 0) 20%
        ),
        radial-gradient(
            circle at 85% 25%, /* 30% → 25%, closer to original 15% */
            rgba(92, 195, 250, 0.22) 0%, /* Blue */
            rgba(92, 195, 250, 0) 25%
        ),
        
        /* Middle section gradients - no change needed */
        radial-gradient(
            circle at 30% 50%, 
            rgba(250, 117, 248, 0.18) 0%, /* Pink */
            rgba(250, 117, 248, 0) 20%
        ),
        radial-gradient(
            circle at 88% 55%, 
            rgba(158, 110, 230, 0.20) 0%, /* Purple */
            rgba(158, 110, 230, 0) 22%
        ),
        
        /* Bottom section gradients - adjusted for less padding */
        radial-gradient(
            circle at 10% 73%, /* 70% → 73%, closer to original 80% */
            rgba(92, 195, 250, 0.24) 0%, /* Blue */
            rgba(92, 195, 250, 0) 18%
        ),
        radial-gradient(
            circle at 45% 85%, /* 75% → 80%, closer to original 90% */
            rgba(250, 204, 105, 0.18) 0%, /* Yellow */
            rgba(250, 204, 105, 0) 15%
        ),
        radial-gradient(
            circle at 80% 70%, /* 65% → 70%, closer to original 85% */
            rgba(250, 117, 248, 0.20) 0%, /* Pink */
            rgba(250, 117, 248, 0) 20%
        );
}

.taa-main-background::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-color: black;
    background: 
        /* Triple gradient overlap section - all three brand colors in one spot */
        radial-gradient(
            circle at 60% 40%, 
            rgba(158, 110, 230, 0.20) 0%, /* Purple */
            rgba(158, 110, 230, 0) 15%
        ),
        radial-gradient(
            circle at 65% 45%, 
            rgba(92, 195, 250, 0.20) 0%, /* Blue */
            rgba(92, 195, 250, 0) 18%
        ),
        radial-gradient(
            circle at 55% 35%, 
            rgba(250, 117, 248, 0.20) 0%, /* Pink */
            rgba(250, 117, 248, 0) 12%
        ),
        
        /* Top section gradients - adjusted for less padding */
        radial-gradient(
            circle at 15% 20%, /* 25% → 20%, closer to original 10% */
            rgba(158, 110, 230, 0.25) 0%, /* Purple */
            rgba(158, 110, 230, 0) 20%
        ),
        radial-gradient(
            circle at 85% 25%, /* 30% → 25%, closer to original 15% */
            rgba(92, 195, 250, 0.22) 0%, /* Blue */
            rgba(92, 195, 250, 0) 25%
        ),
        
        /* Middle section gradients - no change needed */
        radial-gradient(
            circle at 30% 50%, 
            rgba(250, 117, 248, 0.18) 0%, /* Pink */
            rgba(250, 117, 248, 0) 20%
        ),
        radial-gradient(
            circle at 88% 55%, 
            rgba(158, 110, 230, 0.20) 0%, /* Purple */
            rgba(158, 110, 230, 0) 22%
        ),
        
        /* Bottom section gradients - adjusted for less padding */
        radial-gradient(
            circle at 10% 73%, /* 70% → 73%, closer to original 80% */
            rgba(92, 195, 250, 0.24) 0%, /* Blue */
            rgba(92, 195, 250, 0) 18%
        ),
        radial-gradient(
            circle at 45% 85%, /* 75% → 80%, closer to original 90% */
            rgba(250, 204, 105, 0.18) 0%, /* Yellow */
            rgba(250, 204, 105, 0) 15%
        ),
        radial-gradient(
            circle at 80% 70%, /* 65% → 70%, closer to original 85% */
            rgba(250, 117, 248, 0.20) 0%, /* Pink */
            rgba(250, 117, 248, 0) 20%
        );
}

.elementor-element.taa-section-gradient.earlyAccess::before {
    background: 
        radial-gradient(
        ellipse at 50% 150%, 
        rgba(92, 192, 250, 0.28) 0%, 
        rgba(92, 195, 248, 0.0) 75%
        ),
        radial-gradient(
        ellipse at 100% 100%, 
        rgba(158, 110, 230, 0.28) 0%, 
        rgba(158, 110, 230, 0.0) 75%
        );
}

.elementor-element.taa-section-gradient.footer::before {
    background: 
        /* Top left purple gradient - half cut horizontally */
        radial-gradient(
        ellipse at 50% 45%, 
        rgba(92, 195, 250, 0.28) 0%, 
        rgba(92, 195, 248, 0.0) 71%
        ),
        /* Bottom right pink gradient - quarter cut horizontally */
        radial-gradient(
        ellipse at 100% 100%, 
        rgba(158, 110, 230, 0.28) 0%, 
        rgba(158, 110, 230, 0.0) 75%
        );
}