/**
 * Light Theme Override for LeadspathPRO AI
 * Transforms the dark website to a beautiful light version
 * Maintains all structure, animations, and functionality
 * Enhanced with matching hover effects and animations from dark theme
 */

/* Import keyframe animations for use in light theme */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 102, 204, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 102, 204, 0.6);
    }
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes shimmerWave {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes floatUp {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

:root {
    /* ===== LIGHT THEME COLOR PALETTE ===== */
    
    /* Background Colors - Light */
    --primary-bg: #ffffff;           /* Pure white main background */
    --secondary-bg: #f8fafc;         /* Very light gray sections */
    --surface-bg: #f1f5f9;           /* Light gray surfaces */
    --elevated-bg: #e2e8f0;          /* Elevated elements */
    
    /* Accent Colors - Adjusted for light theme */
    --primary-accent: #0066cc;       /* Deeper blue for better contrast */
    --secondary-accent: #e91e63;     /* Adjusted pink for readability */
    --success-accent: #16a34a;       /* Deeper green for contrast */
    --warning-accent: #ea580c;       /* Deeper orange for visibility */
    
    /* Gradient Colors - Light theme optimized */
    --gradient-primary: linear-gradient(135deg, #0066cc 0%, #003d7a 100%);
    --gradient-secondary: linear-gradient(135deg, #e91e63 0%, #ad1457 100%);
    --gradient-success: linear-gradient(135deg, #16a34a 0%, #059669 100%);
    
    /* Text Colors - Dark text on light backgrounds */
    --text-primary: #0f172a;         /* Nearly black primary text */
    --text-secondary: #475569;       /* Medium gray secondary text */
    --text-tertiary: #64748b;        /* Light gray tertiary text */
    
    /* Glass Morphism - Light version */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.1);
    
    /* Additional Light Theme Variables */
    --hero-overlay: rgba(255, 255, 255, 0.95);
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* High Contrast Text Variables */
    --heading-primary: #0f172a;
    --heading-secondary: #1e293b;
    --body-text: #374151;
    --accent-blue: #0066cc;
}

/* ===== LIGHT THEME SPECIFIC OVERRIDES ===== */

/* ===== LOGO ENHANCEMENT FOR LIGHT THEME ===== */

/* Clean logo display for transparent PNG */
.logo-img {
    background: transparent !important;
    transition: all 0.3s ease !important;
}

/* Subtle hover effects for professional feel */
.nav-brand .logo:hover .logo-img,
.logo:hover .logo-img,
.footer-brand:hover .logo-img {
    transform: scale(1.02) !important;
    opacity: 0.9 !important;
}

/* Body and main containers */
body {
    background-color: var(--primary-bg) !important;
    color: var(--text-primary) !important;
}

/* Hero section adjustments */
.hero-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

.hero-overlay {
    background: var(--hero-overlay) !important;
}

/* Navigation adjustments - High Contrast */
.navbar,
.nav,
.header {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.navbar .nav-link,
.nav-link,
.nav-menu a {
    color: #1e293b !important;
    font-weight: 500 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.nav-link:hover,
.nav-link.active {
    color: #0066cc !important;
}

.nav-brand .logo,
.logo {
    filter: none !important;
}

.nav-dropdown .dropdown-menu {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.dropdown-link {
    color: #1e293b !important;
}

.dropdown-link:hover {
    background: #f1f5f9 !important;
    color: #0066cc !important;
}

/* Card and surface elements */
.feature-card,
.pricing-card,
.blog-card,
.testimonial-card {
    background: var(--secondary-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: var(--card-shadow) !important;
}

.feature-card:hover,
.pricing-card:hover,
.blog-card:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-4px) !important;
}

/* Glass morphism elements */
.glass-card,
.glass-surface {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 8px 32px var(--glass-shadow) !important;
}

/* ===== COMPREHENSIVE BUTTON & ICON WHITE TEXT FIX ===== */

/* ALL Primary buttons - Blue background with WHITE text - Universal Coverage */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
.cta-button,
.hero-demo-btn,
.glow-btn,
button.btn-primary,
a.btn-primary,
.primary-btn,
.call-to-action,
.action-btn,
.demo-btn,
.get-started-btn,
.contact-btn,
.learn-more-btn {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.3) !important;
}

/* ALL child elements in buttons - Force WHITE */
.btn-primary *,
.cta-button *,
.hero-demo-btn *,
.glow-btn *,
button.btn-primary *,
a.btn-primary *,
.primary-btn *,
.call-to-action *,
.action-btn *,
.demo-btn *,
.get-started-btn *,
.contact-btn *,
.learn-more-btn * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Button text, spans, and icons - Force WHITE */
.btn-primary span,
.btn-primary i,
.btn-primary svg,
.cta-button span,
.cta-button i,
.cta-button svg,
.hero-demo-btn span,
.hero-demo-btn i,
.hero-demo-btn svg,
.glow-btn span,
.glow-btn i,
.glow-btn svg,
button span,
button i,
button svg,
a.btn-primary span,
a.btn-primary i,
a.btn-primary svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* FontAwesome icons in buttons */
.btn-primary .fa,
.btn-primary .fas,
.btn-primary .far,
.btn-primary .fab,
.cta-button .fa,
.cta-button .fas,
.hero-demo-btn .fa,
.glow-btn .fa,
button .fa,
button .fas,
button .far,
button .fab {
    color: #ffffff !important;
}

/* Hover states - Darker blue, still WHITE text */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.cta-button:hover,
.hero-demo-btn:hover,
.glow-btn:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.primary-btn:hover,
.call-to-action:hover,
.action-btn:hover {
    background: #0052a3 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4) !important;
}

/* ALL child elements in hovered buttons - Force WHITE */
.btn-primary:hover *,
.cta-button:hover *,
.hero-demo-btn:hover *,
.glow-btn:hover *,
button:hover *,
a.btn-primary:hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Secondary buttons - Login button fix */
.btn-secondary,
.btn-secondary:not(:hover) {
    background: transparent !important;
    border: 2px solid #0066cc !important;
    color: #0f172a !important;  /* Dark text - visible on white */
    font-weight: 500 !important;
}

/* Ensure text and icons are dark when not hovering */
.btn-secondary:not(:hover) *,
.btn-secondary:not(:hover) span,
.btn-secondary:not(:hover) i,
.btn-secondary:not(:hover) svg {
    color: #0f172a !important;
    fill: #0f172a !important;
}

/* Blue background with white text on hover */
.btn-secondary:hover {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

.btn-secondary:hover *,
.btn-secondary:hover span,
.btn-secondary:hover i,
.btn-secondary:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ===== CARD ICONS & FEATURE ICONS - WHITE IN BLUE/COLORED BACKGROUNDS ===== */

/* Feature cards with blue/colored backgrounds */
.feature-card .icon,
.feature-card .feature-icon,
.card-icon,
.icon-box,
.icon-container,
.service-icon,
.benefit-icon {
    background: var(--gradient-primary) !important;
}

/* ALL icons inside blue/colored backgrounds - WHITE */
.feature-card .icon *,
.feature-card .feature-icon *,
.card-icon *,
.icon-box *,
.icon-container *,
.service-icon *,
.benefit-icon *,
.feature-card .icon i,
.feature-card .feature-icon i,
.card-icon i,
.icon-box i,
.icon-container i,
.service-icon i,
.benefit-icon i {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* FontAwesome icons specifically */
.feature-card .fa,
.feature-card .fas,
.feature-card .far,
.feature-card .fab,
.icon-box .fa,
.icon-box .fas,
.icon-container .fa,
.icon-container .fas {
    color: #ffffff !important;
}

/* Hover states for icons - Keep WHITE even when background changes */
.feature-card:hover .icon *,
.feature-card:hover .feature-icon *,
.card-icon:hover *,
.icon-box:hover *,
.icon-container:hover *,
.feature-card:hover .icon i,
.card-icon:hover i,
.icon-box:hover i,
.icon-container:hover i {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Red hover backgrounds still get WHITE icons */
.feature-card:hover .icon[style*="background: red"] *,
.feature-card:hover .icon[style*="background:#e91e63"] *,
.icon-box:hover[style*="background: red"] *,
.icon-box:hover[style*="background:#e91e63"] * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* SVG icons in cards */
.feature-card svg,
.card-icon svg,
.icon-box svg,
.icon-container svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.feature-card svg *,
.card-icon svg *,
.icon-box svg *,
.icon-container svg * {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Ensure any colored icon containers have white icons */
[class*="icon"][style*="background: #0066cc"] *,
[class*="icon"][style*="background: #e91e63"] *,
[class*="icon"][style*="background: rgb"] *,
[class*="icon"][style*="linear-gradient"] * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Universal icon fix - any icon in colored background */
.bg-blue .icon *,
.bg-primary .icon *,
.bg-accent .icon *,
[style*="background: #0066cc"] .icon *,
[style*="background: #e91e63"] .icon * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ===== ADDITIONAL COMPREHENSIVE WHITE TEXT/ICON RULES ===== */

/* Any link styled as button */
a[class*="btn"],
a[class*="button"],
.button-link {
    color: #ffffff !important;
}

a[class*="btn"] *,
a[class*="button"] *,
.button-link * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Navigation buttons */
.nav-actions .btn-primary,
.nav-actions .glow-btn,
.header .btn-primary {
    color: #ffffff !important;
}

.nav-actions .btn-primary *,
.nav-actions .glow-btn *,
.header .btn-primary * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* CTA sections and hero buttons */
.cta-section button,
.cta-section a[class*="btn"],
.hero-section button,
.hero-section a[class*="btn"],
.hero-actions button,
.hero-actions a[class*="btn"] {
    color: #ffffff !important;
}

.cta-section button *,
.cta-section a[class*="btn"] *,
.hero-section button *,
.hero-section a[class*="btn"] *,
.hero-actions button *,
.hero-actions a[class*="btn"] * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Form submit buttons */
form button[type="submit"],
form input[type="submit"],
.form-submit,
.submit-btn {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
}

/* Pricing cards and action buttons */
.pricing-card button,
.pricing-card a[class*="btn"],
.pricing-btn,
.plan-btn,
.subscribe-btn {
    color: #ffffff !important;
}

.pricing-card button *,
.pricing-card a[class*="btn"] *,
.pricing-btn *,
.plan-btn *,
.subscribe-btn * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Footer buttons */
.footer button,
.footer a[class*="btn"],
.footer-cta {
    color: #ffffff !important;
}

.footer button *,
.footer a[class*="btn"] *,
.footer-cta * {
    color: #ffffff !important;
}

/* Any element with primary gradient background needs white text */
[style*="gradient"][style*="#0066cc"],
.gradient-bg,
.primary-bg-gradient {
    color: #ffffff !important;
}

[style*="gradient"][style*="#0066cc"] *,
.gradient-bg *,
.primary-bg-gradient * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Image/Icon overlays with blue backgrounds */
.image-overlay[style*="background: #0066cc"],
.overlay-blue,
.blue-overlay {
    color: #ffffff !important;
}

.image-overlay[style*="background: #0066cc"] *,
.overlay-blue *,
.blue-overlay * {
    color: #ffffff !important;
}

/* ===== ABOUT US PAGE - CTA BUTTONS ===== */

/* CTA Section styling */
.cta-section {
    background: rgba(248, 250, 252, 0.95) !important;
    border: 2px solid rgba(0, 102, 204, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.08) !important;
}

.cta-section h2 {
    color: #0f172a !important;
}

/* Primary CTA button - Already styled by global button rules */
.cta-btn:not(.secondary) {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border: none !important;
}

.cta-btn:not(.secondary) i {
    color: #ffffff !important;
}

/* Secondary CTA button - Light theme styling */
.cta-btn.secondary {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #0066cc !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Force text and icon visibility */
.cta-btn.secondary,
.cta-btn.secondary span,
.cta-btn.secondary i {
    color: #0f172a !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.cta-btn.secondary i {
    font-size: 0.9rem !important;
}

.cta-btn.secondary:hover {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.4) !important;
}

.cta-btn.secondary:hover,
.cta-btn.secondary:hover span,
.cta-btn.secondary:hover i {
    color: #ffffff !important;
}

/* ===== PRICING PAGE - ALL PLANS INCLUDE SECTION ===== */

/* All Plans Include container - Light theme */
.all-plans-include {
    background: rgba(248, 250, 252, 0.95) !important;
    border: 2px solid rgba(0, 102, 204, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.08) !important;
}

/* Title styling */
.all-plans-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.all-plans-title::before {
    content: "✅";
    filter: none !important;
}

/* Grid items - Light cards */
.all-plans-item {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 102, 204, 0.15) !important;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.05) !important;
}

/* Shimmer effect - Light theme */
.all-plans-item::before {
    background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.08), transparent) !important;
}

/* Hover state */
.all-plans-item:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(0, 102, 204, 0.4) !important;
    box-shadow: 
        0 8px 24px rgba(0, 102, 204, 0.15),
        0 0 0 1px rgba(0, 102, 204, 0.3) !important;
    transform: translateY(-5px) !important;
}

/* Icons - Blue color */
.all-plans-icon {
    filter: none !important;
    opacity: 1 !important;
}

.all-plans-item:hover .all-plans-icon {
    transform: scale(1.15) rotate(-5deg) !important;
    filter: drop-shadow(0 4px 8px rgba(0, 102, 204, 0.3)) !important;
}

/* Text - Dark readable color */
.all-plans-text {
    color: #475569 !important;
    font-weight: 500 !important;
}

.all-plans-item:hover .all-plans-text {
    color: #0f172a !important;
}

/* ===== CASE STUDY DEMO BUTTONS - ALWAYS VISIBLE ===== */

/* Case study action buttons - Always visible and styled */
.case-actions,
.case-actions .results-btn,
.case-actions .demo-btn {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Results button - Match demo button styling (blue with white text) */
.results-btn {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2) !important;
}

.results-btn span,
.results-btn i {
    color: #ffffff !important;
}

.results-btn:hover {
    background: linear-gradient(135deg, #0052a3 0%, #003366 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.4) !important;
}

.results-btn:hover span,
.results-btn:hover i {
    color: #ffffff !important;
}

/* Demo button - Always visible blue gradient */
.case-actions .demo-btn {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2) !important;
}

.case-actions .demo-btn span,
.case-actions .demo-btn i {
    color: #ffffff !important;
}

.case-actions .demo-btn:hover {
    background: linear-gradient(135deg, #0052a3 0%, #003366 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.4) !important;
}

.case-actions .demo-btn:hover span,
.case-actions .demo-btn:hover i {
    color: #ffffff !important;
}

/* Ensure buttons visible on card hover */
.case-study-card:hover .case-actions,
.case-study-card:hover .results-btn,
.case-study-card:hover .demo-btn {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== TESTIMONIALS CAROUSEL BUTTONS - ALWAYS VISIBLE ===== */

/* Slider navigation buttons - Always visible with good contrast */
.slider-btn,
.slider-btn.prev,
.slider-btn.next {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #0066cc !important;
    color: #0066cc !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15) !important;
}

/* Icons inside buttons */
.slider-btn i,
.slider-btn svg {
    color: #0066cc !important;
    opacity: 1 !important;
}

/* Hover state for navigation buttons */
.slider-btn:hover {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: scale(1.15) !important;
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.4) !important;
}

.slider-btn:hover i,
.slider-btn:hover svg {
    color: #ffffff !important;
}

/* Disabled state */
.slider-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    transform: scale(1) !important;
    background: rgba(248, 250, 252, 0.8) !important;
    border-color: rgba(0, 102, 204, 0.3) !important;
    color: rgba(0, 102, 204, 0.5) !important;
}

/* Carousel dots - visible styling */
.carousel-dot {
    background: rgba(0, 102, 204, 0.3) !important;
    border: 1px solid #0066cc !important;
    opacity: 1 !important;
}

.carousel-dot.active {
    background: var(--gradient-primary) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.4) !important;
}

.carousel-dot:hover {
    background: rgba(0, 102, 204, 0.5) !important;
    transform: scale(1.2) !important;
}

/* ===== AI SOLUTION CATEGORY ICONS - WHITE ICONS ON BLUE ===== */

/* Category icon circles - All white icons on blue backgrounds */
.category-icon,
.voice-ai .category-icon,
.conversation-ai .category-icon,
.content-ai .category-icon,
.workflow-ai .category-icon {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 32px rgba(0, 102, 204, 0.3) !important;
}

/* Ensure icons inside are white */
.category-icon i,
.category-icon svg,
.category-icon .fa,
.category-icon .fas {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Hover state - keep white icons */
.category-icon:hover,
.ai-category:hover .category-icon {
    background: linear-gradient(135deg, #0052a3 0%, #003366 100%) !important;
    color: #ffffff !important;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 40px rgba(0, 102, 204, 0.4) !important;
}

.category-icon:hover i,
.category-icon:hover svg,
.ai-category:hover .category-icon i,
.ai-category:hover .category-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ===== INDUSTRIES SECTION FIXES ===== */

/* Industry Cards - Equal Height & Alignment */
.industries-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 32px !important;
    align-items: stretch !important;
}

.industry-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 520px !important;
}

.industry-image {
    flex-shrink: 0 !important;
    height: 200px !important;
}

.industry-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 32px !important;
    justify-content: space-between !important;
}

.industry-title {
    margin-bottom: 12px !important;
    min-height: 34px !important;
}

.industry-description {
    flex-grow: 1 !important;
    margin-bottom: 20px !important;
    min-height: 90px !important;
}

.industry-category {
    margin-bottom: 24px !important;
    flex-shrink: 0 !important;
}

.industry-learn-more {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* Industry icons - WHITE icons on blue backgrounds */
.industry-icon,
.industry-card .icon,
.industries .icon {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
}

/* All icons inside industry cards - Force WHITE */
.industry-icon *,
.industry-icon i,
.industry-icon .fa,
.industry-icon .fas,
.industry-icon svg,
.industry-card .icon *,
.industry-card .icon i,
.industry-card .icon .fa,
.industry-card .icon .fas,
.industry-card .icon svg,
.industries .icon *,
.industries .icon i,
.industries .icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Industry icon hover - KEEP WHITE even with red background */
.industry-card:hover .industry-icon,
.industry-card:hover .icon {
    color: #ffffff !important;
}

.industry-card:hover .industry-icon *,
.industry-card:hover .industry-icon i,
.industry-card:hover .icon *,
.industry-card:hover .icon i {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* ===== CARD BUTTONS FIX - VISIBLE & STYLED ===== */

/* Learn More / Card Action Buttons - Blue styled, not invisible */
.industry-learn-more,
.card-learn-more,
.learn-more-btn,
.read-more-btn,
.card-action-btn,
.feature-card button,
.service-card button,
.blog-card button {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2) !important;
}

/* Card button text and icons - WHITE */
.industry-learn-more *,
.card-learn-more *,
.learn-more-btn *,
.read-more-btn *,
.card-action-btn *,
.feature-card button *,
.service-card button *,
.blog-card button *,
.industry-learn-more i,
.card-learn-more i,
.learn-more-btn i,
.read-more-btn i {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Card button hover - Smooth transition with darker blue */
.industry-learn-more:hover,
.card-learn-more:hover,
.learn-more-btn:hover,
.read-more-btn:hover,
.card-action-btn:hover,
.feature-card button:hover,
.service-card button:hover,
.blog-card button:hover {
    background: linear-gradient(135deg, #0052a3 0%, #003366 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.industry-learn-more:hover *,
.card-learn-more:hover *,
.learn-more-btn:hover *,
.read-more-btn:hover *,
.card-action-btn:hover *,
.feature-card button:hover *,
.service-card button:hover *,
.blog-card button:hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Ensure card buttons are never invisible */
.card button,
.industry-card button,
.feature-card button,
.service-card button {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== ADVANCED HOVER EFFECTS & ANIMATIONS - MATCHING DARK THEME ===== */

/* Glass Card Shimmer Effect */
.glass-card::before,
.feature-card::before,
.pricing-card::before,
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.15), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.glass-card:hover::before,
.feature-card:hover::before,
.pricing-card:hover::before,
.service-card:hover::before {
    left: 100%;
}

/* Enhanced Glass Card Hover - Matching Dark Theme */
.glass-card:hover,
.feature-card:hover,
.service-card:hover {
    transform: translateY(-8px);
    background: rgba(248, 250, 252, 0.95) !important;
    border-color: rgba(0, 102, 204, 0.4) !important;
    box-shadow: 
        0 20px 60px rgba(0, 102, 204, 0.15),
        0 0 0 1px rgba(0, 102, 204, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Feature Icon 3D Flip Effect - Matching Dark Theme */
.feature-card:hover .feature-icon,
.service-card:hover .icon,
.interactive-card:hover .step-icon {
    transform: rotateY(180deg);
    background: var(--gradient-secondary) !important;
    box-shadow: 0 15px 40px rgba(233, 30, 99, 0.3) !important;
}

.feature-icon,
.service-card .icon,
.step-icon {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Interactive Card Icon Scale & Rotate */
.interactive-card:hover .step-icon,
.interactive-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Step/Feature Number Pulse on Hover */
.interactive-card .step-number,
.interactive-card .feature-number,
.industry-number {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-card:hover .step-number,
.interactive-card:hover .feature-number,
.industry-card:hover .industry-number {
    transform: scale(1.15);
    background: var(--gradient-primary) !important;
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.4) !important;
}

/* Pricing Card Enhanced Hover - Dark Theme Match */
.pricing-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 25px 80px rgba(0, 102, 204, 0.2),
        0 0 0 1px rgba(0, 102, 204, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Featured Pricing Card Rotating Border Effect */
.pricing-card.featured {
    position: relative;
    overflow: hidden;
}

.pricing-card.featured::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent,
        rgba(0, 102, 204, 0.15),
        transparent,
        rgba(233, 30, 99, 0.15),
        transparent
    );
    animation: spin 4s linear infinite;
    z-index: -1;
}

/* Testimonial Card Tilt Effect */
.testimonial-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: 
        0 20px 60px rgba(0, 102, 204, 0.15),
        0 0 0 1px rgba(0, 102, 204, 0.2) !important;
}

.testimonial-card:hover::after {
    opacity: 0.15;
}

/* Blog Card Enhanced Hover */
.blog-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 60px rgba(0, 102, 204, 0.15),
        0 0 0 1px rgba(0, 102, 204, 0.2) !important;
}

.blog-card:hover .blog-image {
    transform: scale(1.05);
}

.blog-image {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Stat Counter Number Animation */
.stat-number,
.counter-number {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-item:hover .stat-number,
.counter-wrapper:hover .counter-number {
    transform: scale(1.1);
    color: var(--primary-accent) !important;
}

/* Icon Glow Pulse on Hover */
.feature-icon:hover,
.service-icon:hover,
.benefit-icon:hover {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Button Energy Fill Effect */
.btn-primary,
.cta-button,
.hero-demo-btn,
.industry-learn-more {
    position: relative;
    overflow: hidden;
}

.btn-primary::after,
.cta-button::after,
.hero-demo-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::after,
.cta-button:hover::after,
.hero-demo-btn:hover::after {
    width: 300px;
    height: 300px;
}

/* Logo/Image Hover Effects */
.logo-item:hover,
.partner-logo:hover,
.client-logo:hover {
    transform: scale(1.1);
    filter: grayscale(0%) brightness(1.2);
}

.logo-item,
.partner-logo,
.client-logo {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: grayscale(50%) brightness(0.9);
}

/* Nav Link Underline Animation */
.nav-link::after,
.footer-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.footer-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link,
.footer-link {
    position: relative;
}

/* FAQ Accordion Smooth Expand */
.faq-item,
.accordion-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover,
.accordion-item:hover {
    background: rgba(248, 250, 252, 0.8) !important;
    border-color: rgba(0, 102, 204, 0.3) !important;
}

.faq-item.active,
.accordion-item.active {
    background: rgba(240, 247, 255, 0.9) !important;
    border-color: var(--primary-accent) !important;
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.1) !important;
}

/* Form Input Focus Effects */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-accent) !important;
    box-shadow: 
        0 0 0 3px rgba(0, 102, 204, 0.1),
        0 4px 12px rgba(0, 102, 204, 0.15) !important;
    transform: translateY(-2px);
}

input,
textarea,
select {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero Section Enhanced Animations */
.hero-title,
.section-title {
    animation: fadeInUp 0.8s ease-out;
}

.hero-subtitle,
.section-subtitle {
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero-buttons,
.hero-actions {
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll Reveal Animations - Light Theme Adjusted */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation Delays for Cards */
.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }
.feature-card:nth-child(4) { animation-delay: 0.4s; }

.industry-card:nth-child(1) { animation-delay: 0.1s; }
.industry-card:nth-child(2) { animation-delay: 0.2s; }
.industry-card:nth-child(3) { animation-delay: 0.3s; }

.pricing-card:nth-child(1) { animation-delay: 0.15s; }
.pricing-card:nth-child(2) { animation-delay: 0.3s; }
.pricing-card:nth-child(3) { animation-delay: 0.45s; }

/* Tag/Badge Hover Effects */
.tag,
.badge,
.category-badge,
.label {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tag:hover,
.badge:hover,
.category-badge:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2) !important;
}

/* Social Media Icon Hover */
.social-link,
.social-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-link:hover,
.social-icon:hover {
    transform: translateY(-3px) scale(1.1);
    color: var(--primary-accent) !important;
    filter: drop-shadow(0 4px 8px rgba(0, 102, 204, 0.3));
}

/* CTA Section Pulse Effect */
.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 102, 204, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: floatUp 4s ease-in-out infinite;
}

/* Stats/Counter Hover Enhancement */
.stat-item,
.counter-wrapper {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-item:hover,
.counter-wrapper:hover {
    transform: translateY(-5px) scale(1.02);
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 
        0 12px 30px rgba(0, 102, 204, 0.2),
        0 0 0 1px rgba(0, 102, 204, 0.3) !important;
}

/* Process Step Connector Animation */
.step-connector::after,
.process-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-accent), transparent);
    animation: shimmerWave 2s linear infinite;
}

/* Image Overlay Hover */
.image-wrapper,
.img-container {
    position: relative;
    overflow: hidden;
}

.image-wrapper img,
.img-container img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-wrapper:hover img,
.img-container:hover img {
    transform: scale(1.08);
}

.image-wrapper::after,
.img-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(233, 30, 99, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.image-wrapper:hover::after,
.img-container:hover::after {
    opacity: 1;
}

/* Tooltip Animations */
.tooltip,
[data-tooltip]::after {
    animation: scaleIn 0.2s ease-out;
}

/* Loading States */
.loading,
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(248, 250, 252, 1) 0%,
        rgba(226, 232, 240, 1) 50%,
        rgba(248, 250, 252, 1) 100%
    );
    background-size: 200% 100%;
    animation: shimmerWave 1.5s ease-in-out infinite;
}

/* Checkbox/Radio Custom Animations */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    animation: scaleIn 0.2s ease-out;
}

/* Tab Hover Effects */
.tab,
.tab-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab:hover,
.tab-button:hover {
    background: rgba(240, 247, 255, 0.8) !important;
    border-color: rgba(0, 102, 204, 0.3) !important;
    transform: translateY(-2px);
}

.tab.active,
.tab-button.active {
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

/* ===== ANIMATED ELEMENTS & BLUE BACKGROUNDS ===== */

/* Any blue background elements should have WHITE text */
[style*="background: #0066cc"],
[style*="background-color: #0066cc"],
.bg-blue,
.blue-bg,
.accent-bg {
    color: #ffffff !important;
}

/* Animated logo and graphics with blue backgrounds */
.hero-visual *[fill="#0066cc"],
.hero-visual *[style*="fill:#0066cc"],
.animated-icon[style*="background:#0066cc"],
.stats-icon[style*="background:#0066cc"] {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* SVG elements in blue containers */
.hero-visual svg text,
.animated-graphic svg text,
.icon-container svg text {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Ensure all text in blue gradient backgrounds is white */
[style*="linear-gradient"] *,
.gradient-bg *,
.primary-gradient * {
    color: #ffffff !important;
}

/* ===== HERO SECTION ANIMATED ELEMENTS ===== */

/* Hero visual and animated elements */
.hero-visual,
.hero-animation,
.animated-element {
    color: #ffffff !important;
}

/* Specific fixes for animated text in hero section */
.hero-visual .animated-text,
.hero-visual .floating-text,
.hero-animation .text-element {
    color: #ffffff !important;
    fill: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Stats and counters in animated sections */
.stats-number,
.animated-counter,
.floating-stat {
    color: #ffffff !important;
}

/* Any canvas or SVG text elements */
canvas + .text-overlay,
.svg-text-overlay,
.animation-text {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Force white text in blue animated containers */
.hero-section .animated-element *,
.hero-visual .blue-container *,
.animated-logo * {
    color: #ffffff !important;
}

/* ===== AI VISUALIZATION SPECIFIC FIXES ===== */

/* Brain core and blue elements */
.brain-core,
.brain-core *,
.ai-brain .blue-element,
.ai-brain .blue-element * {
    color: #ffffff !important;
}

/* Data nodes and tooltips with blue backgrounds */
.data-node[style*="background: #0066cc"] .node-label,
.data-node[style*="background:#0066cc"] .node-label,
.tooltip[style*="background: #0066cc"],
.tooltip[style*="background:#0066cc"] {
    color: #ffffff !important;
}

/* Floating particles and animated elements */
.floating-particles .particle[style*="background: blue"],
.floating-particles .particle[style*="background: #0066cc"],
.animated-element[style*="background: #0066cc"] {
    color: #ffffff !important;
}

/* Any text elements in AI visualization */
.ai-visualization .text,
.ai-visualization .label,
.ai-visualization .title,
.hero-visual .text {
    color: #ffffff !important;
}

/* Statistics and counters in hero section */
.hero-stats .stat-number,
.hero-stats .stat-label,
.animated-stat * {
    color: var(--text-primary) !important; /* Keep dark for readability on light bg */
}

/* But if they have blue backgrounds, make them white */
.hero-stats .stat-number[style*="background: #0066cc"],
.hero-stats .stat-label[style*="background: #0066cc"] {
    color: #ffffff !important;
}

/* ===== UNIVERSAL BLUE BACKGROUND TEXT CONTRAST ===== */

/* Universal rule: Any element with blue background gets white text */
*[style*="background-color: #0066cc"],
*[style*="background: #0066cc"],
*[style*="background-color:#0066cc"],
*[style*="background:#0066cc"],
*[style*="background-color: rgb(0, 102, 204)"],
*[style*="background: rgb(0, 102, 204)"] {
    color: #ffffff !important;
}

/* Universal rule: Any element with blue gradient gets white text */
*[style*="linear-gradient"][style*="#0066cc"],
*[style*="radial-gradient"][style*="#0066cc"],
.gradient-primary,
.bg-gradient-primary {
    color: #ffffff !important;
}

/* Ensure child elements inherit white text in blue containers */
*[style*="background: #0066cc"] *,
*[style*="background-color: #0066cc"] *,
.gradient-primary *,
.bg-gradient-primary * {
    color: inherit !important;
}

/* Override any black text specifically in blue backgrounds */
*[style*="background: #0066cc"] span,
*[style*="background: #0066cc"] p,
*[style*="background: #0066cc"] div,
*[style*="background: #0066cc"] text {
    color: #ffffff !important;
}

/* ===== DEMO STATISTICS - SIMPLE COLOR CONTRAST FIX ===== */

/* Keep original layout, only fix colors for better contrast */
.demo-stats {
    /* Keep original container styling, just improve background */
    background: rgba(248, 250, 252, 0.8) !important;
}

/* Stat cards - Light background with dark text for better contrast */
.stat-item {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #0066cc !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15) !important;
}

.stat-item:hover {
    background: #f8fafc !important;
    border-color: #0052a3 !important;
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.25) !important;
}

/* Stat numbers - Blue numbers for visibility */
.stat-item .stat-number {
    color: #0066cc !important;
    font-weight: 700 !important;
}

/* Stat labels - Dark gray for readability */
.stat-item .stat-label {
    color: #374151 !important;
    font-weight: 500 !important;
}

/* Footer adjustments */
.footer {
    background: var(--surface-bg) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Code blocks and technical elements */
pre,
code,
.code-block {
    background: var(--elevated-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Form elements */
.form-control,
.form-input {
    background: white !important;
    border: 1px solid #d1d5db !important;
    color: var(--text-primary) !important;
}

.form-control:focus,
.form-input:focus {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
}

/* Modal and popup elements */
.modal-content {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Pricing section specific - High Contrast */
.pricing-section {
    background: #ffffff !important;
}

.pricing-card {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.pricing-featured {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 2px solid #0066cc !important;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.15) !important;
}

.pricing-card h3,
.pricing-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.pricing-card .price,
.pricing-price {
    color: #0066cc !important;
    font-weight: 800 !important;
}

.pricing-card .price-period,
.pricing-period {
    color: #475569 !important;
}

.pricing-card ul li,
.pricing-features li {
    color: #374151 !important;
}

.pricing-card .btn,
.pricing-cta {
    background: #0066cc !important;
    color: white !important;
    border: none !important;
}

.pricing-card .btn:hover,
.pricing-cta:hover {
    background: #0052a3 !important;
}

/* Pricing Modal - Light Theme Override */
.plan-modal {
    background: rgba(0, 0, 0, 0.5) !important;
}

.plan-modal-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.close-plan-modal {
    color: #64748b !important;
    background: rgba(100, 116, 139, 0.1) !important;
}

.close-plan-modal:hover {
    color: #0f172a !important;
    background: rgba(100, 116, 139, 0.2) !important;
}

.plan-selection-section {
    background: #ffffff !important;
}

.selected-plan-icon {
    background: var(--gradient-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2) !important;
}

.selected-plan-info h3 {
    color: #0f172a !important;
}

.selected-plan-info p {
    color: #64748b !important;
}

.plan-pricing-toggle {
    background: rgba(0, 102, 204, 0.1) !important;
}

.plan-toggle-option {
    color: #64748b !important;
}

.plan-toggle-option.active {
    color: #ffffff !important;
}

.plan-toggle-slider {
    background: var(--gradient-primary) !important;
}

.plan-price-main {
    background: var(--gradient-primary) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.plan-price-period {
    color: #64748b !important;
}

.plan-price-savings {
    color: #10b981 !important;
}

.plan-feature-item {
    color: #475569 !important;
}

.plan-feature-item::before {
    color: #10b981 !important;
}

.change-plan-link {
    color: #0066cc !important;
}

.change-plan-link:hover {
    color: #0052a3 !important;
}

.order-summary-section {
    background: rgba(248, 250, 252, 0.95) !important;
    border-left: 1px solid #e2e8f0 !important;
}

.order-summary-title {
    color: #0f172a !important;
}

.order-plan-name {
    color: #0066cc !important;
}

.order-billing-type {
    color: #64748b !important;
}

.order-pricing {
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.order-subtotal {
    color: #64748b !important;
}

.order-subtotal span:last-child,
.order-total span:last-child {
    color: #0f172a !important;
}

.order-total {
    color: #0f172a !important;
}

.next-billing {
    color: #64748b !important;
}

.trust-signals {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e2e8f0 !important;
}

.trust-item {
    color: #475569 !important;
}

.trust-item::before {
    color: #10b981 !important;
}

.start-plan-button {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2) !important;
}

.start-plan-button:hover {
    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%) !important;
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Blog and content sections */
.blog-section,
.content-section {
    background: var(--secondary-bg) !important;
}

/* Stats and metrics - Minimal adjustments to preserve design */
.stat-card {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: var(--card-shadow) !important;
}

/* Very targeted text color improvements - preserve all other styling */
.stats-container .stat-number,
.demo-stats .number,
.hero-stats .number {
    color: #0066cc !important;
}

.stats-container .stat-label,
.demo-stats .label,
.hero-stats .label {
    color: #4a5568 !important;
}

/* Icons and decorative elements */
.icon-circle {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    color: var(--primary-accent) !important;
}

/* Testimonial specific adjustments */
.testimonial-quote {
    color: var(--text-secondary) !important;
}

.testimonial-author {
    color: var(--text-primary) !important;
}

/* AI Animation and visual elements - Enhanced Visibility */
.ai-brain-core {
    background: linear-gradient(135deg, #0066cc, #003d7a) !important;
    box-shadow: 0 0 40px rgba(0, 102, 204, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
}

.service-node {
    background: white !important;
    border: 3px solid #0066cc !important;
    color: #0066cc !important;
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.25) !important;
    font-weight: 600 !important;
}

.service-node:hover {
    background: #0066cc !important;
    color: white !important;
    transform: scale(1.1) !important;
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4) !important;
}

/* Animation rings and visual effects */
.ai-ring,
.orbit-ring {
    border: 2px solid rgba(0, 102, 204, 0.3) !important;
    background: rgba(0, 102, 204, 0.1) !important;
}

.pulse-ring {
    border: 2px solid #0066cc !important;
    background: rgba(0, 102, 204, 0.2) !important;
}

/* Chat mockup adjustments */
.chat-mockup {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.chat-header {
    background: var(--surface-bg) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.message.ai {
    background: #f0f9ff !important;
    color: var(--text-primary) !important;
}

.message.customer {
    background: var(--primary-accent) !important;
    color: white !important;
}

/* Enhanced Animations and Effects */
.glow-effect,
.glow-btn {
    box-shadow: 0 0 20px rgba(0, 102, 204, 0.3) !important;
}

.glow-btn:hover {
    box-shadow: 0 0 30px rgba(0, 102, 204, 0.5) !important;
}

/* Progress bars and loading elements */
.progress-bar {
    background: linear-gradient(90deg, #0066cc, #003d7a) !important;
}

.progress-track {
    background: #e2e8f0 !important;
}



/* Card hover effects enhanced */
.card:hover,
.feature-card:hover,
.pricing-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0, 102, 204, 0.15) !important;
}

/* Animation particles and visual effects */
.particle,
.floating-element {
    background: rgba(0, 102, 204, 0.6) !important;
    border: 1px solid rgba(0, 102, 204, 0.8) !important;
}

.pulse-animation {
    animation: pulse-light 2s infinite !important;
}

@keyframes pulse-light {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 102, 204, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
    }
}

/* Badge and tag elements */
.badge,
.tag {
    background: var(--primary-accent) !important;
    color: white !important;
}

.badge.secondary {
    background: var(--surface-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Experience section badge - White text on blue background */
.experience-badge {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3) !important;
}

.experience-badge span {
    color: #ffffff !important;
}

/* Table elements */
.table {
    background: white !important;
    color: var(--text-primary) !important;
}

.table th {
    background: var(--surface-bg) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
}

.table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Accordion and expandable elements */
.accordion-item {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.accordion-header {
    background: var(--secondary-bg) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.dropdown-item:hover {
    background: var(--secondary-bg) !important;
}

/* Scrollbar customization for light theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Comprehensive Text Contrast Fixes */
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.feature-title,
.card-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

p, span, div,
.hero-subtitle,
.section-subtitle,
.feature-description,
.card-description {
    color: #374151 !important;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.hero-title {
    color: #0f172a !important;
}

.hero-subtitle {
    color: #475569 !important;
}

/* All Section Backgrounds */
.section,
.feature-section,
.demo-section,
.testimonial-section {
    background: #ffffff !important;
    color: #374151 !important;
}

/* Feature Cards Enhanced */
.feature-card h3 {
    color: #0f172a !important;
}

.feature-card p {
    color: #374151 !important;
}

.feature-icon {
    background: #0066cc !important;
    color: white !important;
}

/* Selection styling for light theme */
::selection {
    background: rgba(0, 102, 204, 0.2);
    color: var(--text-primary);
}

/* Focus styles for accessibility */
*:focus {
    outline: 2px solid var(--primary-accent);
    outline-offset: 2px;
}

/* Loading states */
.loading-spinner {
    border-color: #e2e8f0;
    border-top-color: var(--primary-accent);
}

/* Mobile Navigation Improvements */
.nav-toggle,
.hamburger {
    background: #1e293b !important;
}

.nav-toggle span {
    background: #1e293b !important;
}

.mobile-nav {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Media queries for responsive light theme adjustments */
@media (max-width: 768px) {
    .hero-section {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    }
    
    .mobile-menu {
        background: white !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }
    
    .nav-menu {
        background: white !important;
    }
    
    .nav-menu.active {
        background: white !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }
}



/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-accent: #0052cc;
        --text-primary: #000000;
        --text-secondary: #333333;
    }
}

/* Theme Switcher Styles */
.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-bg) !important;
    color: var(--text-secondary) !important;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-right: 12px;
}

.theme-switcher:hover {
    background: var(--elevated-bg) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-switcher i {
    font-size: 12px;
}

/* Print styles for light theme */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .theme-switcher {
        display: none !important;
    }
}