/* Background override to ensure uniform black background */
:root {
    --primary-color: rgb(0, 0, 0) !important;
    --secondary-color: #1a1a1a !important;
    --background-color: rgb(0, 0, 0) !important;
    --section-bg: rgb(0, 0, 0) !important;
    --card-bg: rgb(0, 0, 0) !important;
    --gold-accent: #F4D09E !important;
    --blue-accent: #0E2641 !important;
    --purple-accent: #5D3FD3 !important;
}

body, 
.products-section, 
.pricing, 
.help, 
.contact, 
footer,
.about,
.services,
section:not(.hero) {
    background-color: rgb(0, 0, 0) !important;
}

/* Create animated gradient for hero section */
.hero {
    background-color: rgb(0, 0, 0) !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    right: -50% !important;
    bottom: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: 
        radial-gradient(circle at 20% 20%, rgba(14, 38, 65, 0.7) 0%, transparent 40%),
        radial-gradient(circle at 50% 70%, rgba(93, 63, 211, 0.6) 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(244, 208, 158, 0.6) 0%, transparent 40%) !important;
    opacity: 1 !important;
    z-index: -1 !important;
    animation: gradientMovement1 16s linear infinite !important;
}

/* Adding an additional layer for randomness */
.hero::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    right: -50% !important;
    bottom: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: 
        radial-gradient(circle at 30% 60%, rgba(14, 38, 65, 0.5) 0%, transparent 40%),
        radial-gradient(circle at 70% 40%, rgba(93, 63, 211, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 40% 30%, rgba(244, 208, 158, 0.4) 0%, transparent 40%) !important;
    opacity: 0.7 !important;
    z-index: -1 !important;
    animation: gradientMovement2 20s ease-in-out infinite !important;
}

@keyframes gradientMovement1 {
    0% {
        transform: translate(0%, 0%);
    }
    20% {
        transform: translate(-18%, 12%);
    }
    40% {
        transform: translate(-22%, -5%);
    }
    60% {
        transform: translate(-10%, -18%);
    }
    80% {
        transform: translate(5%, -10%);
    }
    100% {
        transform: translate(0%, 0%);
    }
}

@keyframes gradientMovement2 {
    0% {
        transform: translate(0%, 0%) rotate(0deg);
    }
    33% {
        transform: translate(10%, -15%) rotate(1deg);
    }
    66% {
        transform: translate(-12%, -8%) rotate(-1deg);
    }
    100% {
        transform: translate(0%, 0%) rotate(0deg);
    }
}

/* Remove background images and gradients for other sections */
.products-section::before,
.contact::before,
.pricing::before,
.help::before,
section:not(.hero)::before,
.hero-stats::before {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* Remove all background images and gradients */
.products-section,
.pricing,
.help,
.contact,
section:not(.hero) {
    background-image: none !important;
    background: rgb(0, 0, 0) !important;
}

/* Remove borders from product sections */
.role-section {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.product-card {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Make sure cards/containers are transparent */
.role-products-showcase {
    background-color: transparent !important;
}

/* Ensure that the media section has proper contrast */
.product-media {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
}

/* Additional overrides for persistent fading effects */
.products-section::after,
.pricing::after,
.help::after,
.contact::after,
section:not(.hero)::after,
div:not(.hero)::before,
div:not(.hero)::after {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    opacity: 0 !important;
}

/* Force black backgrounds on all containers */
.products-content,
.pricing-content,
.help-content,
.contact-content,
.footer-content {
    background-color: rgb(0, 0, 0) !important;
}

/* Remove any backdrop filters that might create fading effects */
*:not(.hero, .hero::before) {
    backdrop-filter: none !important;
}

/* Override any linear gradients */
[style*="linear-gradient"]:not(.hero, .hero::before),
[style*="radial-gradient"]:not(.hero, .hero::before),
[class*="gradient"]:not(.hero, .hero::before),
.gradient:not(.hero, .hero::before) {
    background: rgb(0, 0, 0) !important;
    background-image: none !important;
}

/* Target common gradient classes and elements */
.bg-gradient:not(.hero),
.gradient-bg:not(.hero),
.gradient-overlay:not(.hero),
.overlay:not(.hero) {
    background: rgb(0, 0, 0) !important;
    background-image: none !important;
}

/* Override inline styles that might contain gradients */
[style]:not(.hero, .hero::before) {
    background-image: none !important;
}