/* Dark Theme Override - Force dark backgrounds on all hero sections */

/* Override CSS variables to dark theme */
:root {
    --primary-color: #667eea !important;
    --secondary-color: #764ba2 !important;
    --text-dark: #ffffff !important;
    --text-light: rgba(255, 255, 255, 0.8) !important;
    --bg-light: #1a1b3a !important;
    --bg-white: #0f0a0f !important;
    --bg-dark: #1a1b3a !important;
    --bg-darker: #0f0a0f !important;
    --text-primary: #ffffff !important;
    --text-secondary: rgba(255, 255, 255, 0.7) !important;
    --border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Override body background */
body {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
}

/* Override all hero sections with dark theme */
.pricing-hero,
.features-hero,
.about-hero,
.contact-hero,
.how-it-works-hero,
section[class$="-hero"] {
    background: linear-gradient(135deg, #1a1b3a 0%, #0f0a0f 100%) !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
}

/* Add animated background effect */
.pricing-hero::before,
.features-hero::before,
.about-hero::before,
.contact-hero::before,
.how-it-works-hero::before,
section[class$="-hero"]::before {
    content: '';
    position: absolute;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 40% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%);
    animation: floatingGradient 30s ease-in-out infinite;
    pointer-events: none;
}

/* Ensure all text is visible */
.pricing-hero *,
.features-hero *,
.about-hero *,
.contact-hero *,
.how-it-works-hero *,
section[class$="-hero"] * {
    position: relative;
    z-index: 1;
}

/* Override heading colors */
.pricing-hero h1,
.features-hero h1,
.about-hero h1,
.contact-hero h1,
.how-it-works-hero h1,
section[class$="-hero"] h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Override paragraph colors */
.pricing-hero p,
.features-hero p,
.about-hero p,
.contact-hero p,
.how-it-works-hero p,
section[class$="-hero"] p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix billing toggle visibility */
.billing-toggle {
    color: #ffffff !important;
}

.billing-toggle span {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix any light backgrounds in other sections */
.story-section,
.values-section,
.stats-section,
.faq-section {
    background: var(--bg-darker) !important;
    color: var(--text-primary) !important;
}

/* Ensure process section is dark */
.process-section {
    background: linear-gradient(135deg, rgba(26, 27, 58, 0.9) 0%, rgba(15, 10, 15, 0.9) 100%) !important;
}

/* Animation for background effect */
@keyframes floatingGradient {
    0%, 100% {
        transform: rotate(0deg) translateY(0);
    }
    33% {
        transform: rotate(120deg) translateY(-10%);
    }
    66% {
        transform: rotate(240deg) translateY(10%);
    }
}

/* Override any remaining white/light backgrounds */
section {
    background-color: var(--bg-darker);
    color: var(--text-primary);
}

/* Specific overrides for stubborn elements */
.container {
    color: inherit !important;
}

/* Fix form inputs on contact page */
.contact-form input,
.contact-form textarea,
.contact-form select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}