/* =============================================
 *    MOBILE OVERFLOW & PERFORMANCE FIXES
 *    ============================================= */

/* 1. Contain all sections  prevent horizontal scroll on mobile */
.elementor-2024 .e-con,
.elementor-2024 .e-con-full,
.elementor-2024 .elementor-widget-html {
	    max-width: 100% !important;
	    overflow-x: hidden !important;
}

/* 2. Fix ticker banner overflow  clip scrolling text inside section */
.ticker-banner,
.ticker-wrap {
	    overflow: hidden !important;
	    max-width: 100% !important;
}

/* 3. Fix builds-container  was defaulting to 900px on mobile */
.builds-container {
	    width: 100% !important;
	    max-width: 900px !important;
	    box-sizing: border-box !important;
}

/* 4. Fix process-container  was 1100px on mobile */
.process-container {
	    width: 100% !important;
	    max-width: 1100px !important;
	    box-sizing: border-box !important;
}

/* 5. Fix pricing grid max-width on mobile */
@media (max-width: 900px) {
	.pricing-grid {
		        width: 100% !important;
		        max-width: 100% !important;
		        box-sizing: border-box !important;
	}
	.pricing-card {
		        box-sizing: border-box !important;
		        width: 100% !important;
	}
}

/* 6. Performance: GPU-composite particle animations */
.bb-particle {
	    will-change: transform, opacity !important;
}

/* 7. Performance: Replace text-shadow animation with GPU-composited filter glow */
@keyframes glowPulse {
	0%, 100% { filter: drop-shadow(0 0 8px rgba(0,255,136,0.6)) drop-shadow(0 0 16px rgba(0,255,136,0.3)); }
	50% { filter: drop-shadow(0 0 14px rgba(0,255,136,0.9)) drop-shadow(0 0 28px rgba(0,255,136,0.5)); }
}

/* 8. Reduce particle count impact on mobile */
@media (max-width: 768px) {
	.bb-particle:nth-child(n+16) {
		        display: none !important;
	}
}

/* 9. Fix orb blur performance  blur is expensive on mobile */
@media (max-width: 768px) {
	.hero-orb {
		        filter: blur(60px) !important;
	}
	.bb-orb {
		        filter: blur(40px) !important;
	}
}

/* 10. Reduce canvas/animation GPU load on mobile (keep effects visible) */
@media (max-width: 767px) {
  #bbLightningCanvas {
    opacity: 0.3 !important;
  }
  .bb-glow-orb {
    filter: blur(40px) !important;
    animation-duration: 8s !important;
  }
  .bb-particle {
    animation-duration: 12s !important;
  }
}

/* 11. Prevent horizontal scroll on mobile */
@media (max-width: 767px) {
  body {
    overflow-x: hidden !important;
  }
  .elementor-section-wrap,
  .elementor-section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}