/* ========================================
   CRITICAL: BUTTON FIXES - Light Mode
   ALL buttons must be visible in light mode
   ======================================== */

/* Primary buttons - gradient background with white text */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] a.btn-primary,
:root[data-theme="light"] button.btn-primary,
:root[data-theme="light"] [class*="btn-primary"],
:root[data-theme="light"] [style*="background: linear-gradient"],
:root[data-theme="light"] [style*="background:linear-gradient"],
:root[data-theme="light"] .btn-cta,
:root[data-theme="light"] button[style*="background: linear-gradient"],
:root[data-theme="light"] a[style*="background: linear-gradient"][style*="border-radius"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    font-weight: 600 !important;
}

:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] a.btn-primary:hover,
:root[data-theme="light"] button.btn-primary:hover,
:root[data-theme="light"] [class*="btn-primary"]:hover,
:root[data-theme="light"] [style*="background: linear-gradient"]:hover,
:root[data-theme="light"] [style*="background:linear-gradient"]:hover {
    background: linear-gradient(135deg, #5568d3 0%, #653b8b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* Secondary buttons - white background with purple border */
:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] a.btn-secondary,
:root[data-theme="light"] button.btn-secondary {
    background: #ffffff !important;
    color: #667eea !important;
    border: 2px solid #667eea !important;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.1) !important;
}

:root[data-theme="light"] .btn-secondary:hover,
:root[data-theme="light"] a.btn-secondary:hover,
:root[data-theme="light"] button.btn-secondary:hover {
    background: #667eea !important;
    color: #ffffff !important;
    border-color: #667eea !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Ensure button icons stay visible */
:root[data-theme="light"] .btn-primary i,
:root[data-theme="light"] .btn-primary:hover i,
:root[data-theme="light"] a.btn-primary i,
:root[data-theme="light"] button.btn-primary i {
    color: #ffffff !important;
}

:root[data-theme="light"] .btn-secondary i {
    color: #667eea !important;
}

:root[data-theme="light"] .btn-secondary:hover i {
    color: #ffffff !important;
}
/**
 * TechInnovate - Comprehensive Light Mode Fixes
 * This file ensures all elements are visible and properly styled in light mode
 */

/* ========================================
   HERO SECTIONS - Light Mode
   ======================================== */

:root[data-theme="light"] .hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f5 100%) !important;
}

:root[data-theme="light"] .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.9) 100%) !important;
}

:root[data-theme="light"] .hero-badge {
    background: rgba(102, 126, 234, 0.1) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color: #667eea !important;
}

:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .hero h1 {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .hero-subtitle,
:root[data-theme="light"] .hero p,
:root[data-theme="light"] .hero-description {
    color: #2c3e50 !important;
}

:root[data-theme="light"] .hero-content h1,
:root[data-theme="light"] .hero-content h2,
:root[data-theme="light"] .hero-content h3,
:root[data-theme="light"] .hero-content p {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .gradient-text {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Stats in Light Mode */
:root[data-theme="light"] .hero-stats {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
}

:root[data-theme="light"] .stat-label {
    color: #6c757d !important;
}

:root[data-theme="light"] .stat-value,
:root[data-theme="light"] .stat-number {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .stat-item,
:root[data-theme="light"] .stat-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    color: #1a1f3a !important;
}

:root[data-theme="light"] .stat-content {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .hero-side-stats .stat-card {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
}

/* ========================================
   SECTION BACKGROUNDS - Light Mode
   ======================================== */

:root[data-theme="light"] section {
    background: #ffffff !important;
    color: #1a1f3a !important;
}

:root[data-theme="light"] section:nth-child(even) {
    background: #f8f9fa !important;
}

:root[data-theme="light"] .section-title {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .section-subtitle {
    color: #2c3e50 !important;
}

/* ========================================
   ALL TEXT ELEMENTS - Light Mode
   ======================================== */

/* Ensure ALL text is visible in light mode */
:root[data-theme="light"] * {
    color: inherit;
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6 {
    color: #1a1f3a !important;
}

:root[data-theme="light"] p,
:root[data-theme="light"] span:not(.gradient-text):not([style*="color"]),
:root[data-theme="light"] div:not([style*="color"]),
:root[data-theme="light"] li,
:root[data-theme="light"] a:not(.btn):not([style*="color"]),
:root[data-theme="light"] label,
:root[data-theme="light"] td,
:root[data-theme="light"] th {
    color: #2c3e50 !important;
}

/* Stats and Metrics */
:root[data-theme="light"] .stat-text,
:root[data-theme="light"] .metric-label,
:root[data-theme="light"] .metric-value,
:root[data-theme="light"] .roi-text,
:root[data-theme="light"] .deployment-text,
:root[data-theme="light"] [class*="stat"],
:root[data-theme="light"] [class*="metric"] {
    color: #1a1f3a !important;
}

/* Articles and Blog Content */
:root[data-theme="light"] article,
:root[data-theme="light"] article *,
:root[data-theme="light"] .article-content,
:root[data-theme="light"] .article-content *,
:root[data-theme="light"] .blog-content,
:root[data-theme="light"] .blog-content * {
    color: #2c3e50 !important;
}

:root[data-theme="light"] article h1,
:root[data-theme="light"] article h2,
:root[data-theme="light"] article h3,
:root[data-theme="light"] .article-title,
:root[data-theme="light"] .blog-title {
    color: #1a1f3a !important;
}

/* ========================================
   CARDS - Light Mode
   ======================================== */

:root[data-theme="light"] .card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .product-card,
:root[data-theme="light"] .blog-card,
:root[data-theme="light"] .case-study-card {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    color: #1a1f3a !important;
}

:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .feature-card:hover,
:root[data-theme="light"] .service-card:hover,
:root[data-theme="light"] .product-card:hover {
    border-color: #667eea !important;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.15) !important;
}

/* Card Headers */
:root[data-theme="light"] .card h2,
:root[data-theme="light"] .card h3,
:root[data-theme="light"] .card h4,
:root[data-theme="light"] .card h5 {
    color: #1a1f3a !important;
}

/* Card Text */
:root[data-theme="light"] .card p,
:root[data-theme="light"] .card li,
:root[data-theme="light"] .card span:not(.gradient-text) {
    color: #2c3e50 !important;
}

/* ========================================
   PRICING CARDS - Light Mode
   ======================================== */

:root[data-theme="light"] .pricing-card {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
}

:root[data-theme="light"] .pricing-card.featured,
:root[data-theme="light"] .pricing-card.popular {
    border-color: #667eea !important;
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.2) !important;
}

:root[data-theme="light"] .pricing-card h3,
:root[data-theme="light"] .pricing-card h4 {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .price {
    color: #667eea !important;
}

:root[data-theme="light"] .pricing-feature {
    color: #2c3e50 !important;
}

/* ========================================
   FEATURE SECTIONS - Light Mode
   ======================================== */

:root[data-theme="light"] .feature-icon {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
}

:root[data-theme="light"] .feature-title {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .feature-description {
    color: #2c3e50 !important;
}

/* ========================================
   STATS SECTIONS - Light Mode
   ======================================== */

:root[data-theme="light"] .stats-section {
    background: #f8f9fa !important;
}

:root[data-theme="light"] .stat-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
}

:root[data-theme="light"] .stat-number {
    color: #667eea !important;
}

:root[data-theme="light"] .stat-label {
    color: #6c757d !important;
}

/* ========================================
   TESTIMONIALS - Light Mode
   ======================================== */

:root[data-theme="light"] .testimonial-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
}

:root[data-theme="light"] .testimonial-text {
    color: #2c3e50 !important;
}

:root[data-theme="light"] .testimonial-author {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .testimonial-role {
    color: #6c757d !important;
}

/* ========================================
   TECH CARDS - Light Mode Fixes
   ======================================== */

/* Tech cards on service pages */
:root[data-theme="light"] .tech-card {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

:root[data-theme="light"] .tech-card:hover {
    border-color: #667eea !important;
    background: #f8f9ff !important;
}

:root[data-theme="light"] .tech-name {
    color: #1a1f3a !important;
    font-weight: 600 !important;
}

/* Tech cards on homepage */
:root[data-theme="light"] .tech-card-hidden h4,
:root[data-theme="light"] [style*="tech-card"] h4 {
    color: #1a1f3a !important;
}

/* Specific color adjustments for dark icons in light mode */
:root[data-theme="light"] .tech-icon[style*="#231F20"],
:root[data-theme="light"] .tech-icon[style*="#000000"],
:root[data-theme="light"] .tech-icon[style*="color: #231F20"],
:root[data-theme="light"] .tech-icon[style*="color: #000000"] {
    filter: brightness(0.4) !important;
}

/* Ensure all tech card text is readable */
:root[data-theme="light"] [class*="tech-"] h3,
:root[data-theme="light"] [class*="tech-"] h4,
:root[data-theme="light"] [class*="tech-"] h5,
:root[data-theme="light"] [class*="tech-"] p {
    color: #1a1f3a !important;
}

/* ========================================
   CTA SECTIONS - Light Mode
   ======================================== */

:root[data-theme="light"] .cta-section {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
}

:root[data-theme="light"] .cta-section h2,
:root[data-theme="light"] .cta-section p {
    color: #ffffff !important;
}

/* ========================================
   TECHNOLOGY STACK - Light Mode
   ======================================== */

:root[data-theme="light"] .tech-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
}

:root[data-theme="light"] .tech-card:hover {
    border-color: #667eea !important;
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.15) !important;
}

:root[data-theme="light"] .tech-card h4 {
    color: #1a1f3a !important;
}

/* ========================================
   CASE STUDIES - Light Mode
   ======================================== */

:root[data-theme="light"] .case-study-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
}

:root[data-theme="light"] .case-study-title {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .case-study-description {
    color: #2c3e50 !important;
}

:root[data-theme="light"] .case-study-metric {
    color: #667eea !important;
}

/* ========================================
   ABOUT PAGE - Light Mode
   ======================================== */

:root[data-theme="light"] .about-hero {
    background: #ffffff !important;
}

:root[data-theme="light"] .team-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
}

:root[data-theme="light"] .timeline-item {
    background: #ffffff !important;
    border-left: 3px solid #667eea !important;
}

/* ========================================
   EVENTS PAGE - Light Mode
   ======================================== */

:root[data-theme="light"] .event-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
}

:root[data-theme="light"] .event-date {
    background: #667eea !important;
    color: #ffffff !important;
}

:root[data-theme="light"] .event-title {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .event-description {
    color: #2c3e50 !important;
}

/* ========================================
   INLINE STYLE OVERRIDES - Light Mode
   ======================================== */

/* Override inline dark backgrounds */
:root[data-theme="light"] div[style*="background: #"] {
    background: #ffffff !important;
}

:root[data-theme="light"] div[style*="background: linear-gradient(135deg, #0"] {
    background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;
}

:root[data-theme="light"] div[style*="background: rgba(10"] {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Override inline dark text colors */
:root[data-theme="light"] div[style*="color: #fff"],
:root[data-theme="light"] div[style*="color: #ffffff"],
:root[data-theme="light"] div[style*="color: rgba(255, 255, 255"] {
    color: #1a1f3a !important;
}

:root[data-theme="light"] span[style*="color: #fff"],
:root[data-theme="light"] span[style*="color: #ffffff"],
:root[data-theme="light"] span[style*="color: rgba(255, 255, 255"]:not(.gradient-text) {
    color: #1a1f3a !important;
}

/* Override inline borders */
:root[data-theme="light"] div[style*="border: 1px solid rgba(102, 126, 234"] {
    border: 1px solid #e9ecef !important;
}

/* ========================================
   SPECIFIC ELEMENT FIXES - Light Mode
   ======================================== */

/* Fix for sections with inline dark styles */
:root[data-theme="light"] section[style*="background: var(--bg-primary)"],
:root[data-theme="light"] section[style*="background: var(--bg-secondary)"] {
    background: #ffffff !important;
}

:root[data-theme="light"] section[style*="background: var(--bg-secondary)"]:nth-child(even) {
    background: #f8f9fa !important;
}

/* Fix for containers with dark backgrounds */
:root[data-theme="light"] .container[style*="background"],
:root[data-theme="light"] .hero-container[style*="background"] {
    background: transparent !important;
}

/* Fix service description text */
:root[data-theme="light"] .service-desc {
    color: #2c3e50 !important;
}

/* Fix product price visibility */
:root[data-theme="light"] .product-price,
:root[data-theme="light"] .price-tag {
    color: #667eea !important;
}

/* Fix icon containers */
:root[data-theme="light"] .icon-container {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
}

/* ========================================
   BADGE & TAG FIXES - Light Mode
   ======================================== */

:root[data-theme="light"] .badge,
:root[data-theme="light"] .tag {
    background: #f8f9fa !important;
    color: #667eea !important;
    border: 1px solid #e9ecef !important;
}

:root[data-theme="light"] .badge-primary {
    background: #667eea !important;
    color: #ffffff !important;
    border: none !important;
}

/* ========================================
   LIST FIXES - Light Mode
   ======================================== */

:root[data-theme="light"] ul li,
:root[data-theme="light"] ol li {
    color: #2c3e50 !important;
}

:root[data-theme="light"] ul li::marker,
:root[data-theme="light"] ol li::marker {
    color: #667eea !important;
}

/* ========================================
   LINK FIXES - Light Mode
   ======================================== */

:root[data-theme="light"] a:not(.btn-primary):not(.btn-secondary):not(.header-btn) {
    color: #667eea !important;
}

:root[data-theme="light"] a:not(.btn-primary):not(.btn-secondary):not(.header-btn):hover {
    color: #764ba2 !important;
}

/* ========================================
   DIVIDER FIXES - Light Mode
   ======================================== */

:root[data-theme="light"] hr,
:root[data-theme="light"] .divider {
    border-color: #e9ecef !important;
    background: #e9ecef !important;
}

/* ========================================
   CASE STUDIES PAGE - Light Mode
   ======================================== */

:root[data-theme="light"] .case-studies-hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

:root[data-theme="light"] .case-studies-hero h1 {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

:root[data-theme="light"] .hero-subtitle {
    color: #2c3e50 !important;
}

:root[data-theme="light"] .filter-btn {
    background: #ffffff !important;
    color: #1a1f3a !important;
    border-color: #dee2e6 !important;
}

:root[data-theme="light"] .filter-btn.active,
:root[data-theme="light"] .filter-btn:hover {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* ========================================
   INLINE STYLED ELEMENTS - Light Mode Override
   ======================================== */

/* Override white text in inline styles for light mode */
:root[data-theme="light"] [style*="color: white"],
:root[data-theme="light"] [style*="color: #fff"],
:root[data-theme="light"] [style*="color: #ffffff"],
:root[data-theme="light"] [style*="color:white"],
:root[data-theme="light"] [style*="color:#fff"],
:root[data-theme="light"] [style*="color:#ffffff"],
:root[data-theme="light"] [style*="color: rgba(255,255,255"],
:root[data-theme="light"] [style*="color:rgba(255,255,255"] {
    color: #1a1f3a !important;
}

/* Override specific white text elements but keep gradient backgrounds */
:root[data-theme="light"] div[style*="color: #ffffff"]:not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]),
:root[data-theme="light"] span[style*="color: #ffffff"]:not([style*="background: linear-gradient"]),
:root[data-theme="light"] p[style*="color: #ffffff"]:not([style*="background: linear-gradient"]),
:root[data-theme="light"] h1[style*="color: #ffffff"]:not([style*="background: linear-gradient"]),
:root[data-theme="light"] h2[style*="color: #ffffff"]:not([style*="background: linear-gradient"]),
:root[data-theme="light"] h3[style*="color: #ffffff"]:not([style*="background: linear-gradient"]) {
    color: #1a1f3a !important;
}

/* Stats with white/light text */
:root[data-theme="light"] [style*="color: rgba(255,255,255,0.8)"],
:root[data-theme="light"] [style*="color: rgba(255,255,255,0.9)"],
:root[data-theme="light"] [style*="color:rgba(255,255,255,0.8)"],
:root[data-theme="light"] [style*="color:rgba(255,255,255,0.9)"] {
    color: #2c3e50 !important;
}

/* ========================================
   BLOG & ARTICLE SPECIFIC - Light Mode
   ======================================== */

:root[data-theme="light"] .blog-hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

:root[data-theme="light"] .blog-hero h1,
:root[data-theme="light"] .blog-hero h2,
:root[data-theme="light"] .blog-hero p {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .blog-card,
:root[data-theme="light"] .article-card {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
}

:root[data-theme="light"] .blog-card:hover,
:root[data-theme="light"] .article-card:hover {
    border-color: #667eea !important;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.15) !important;
}

:root[data-theme="light"] .blog-title,
:root[data-theme="light"] .article-title {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .blog-excerpt,
:root[data-theme="light"] .article-excerpt,
:root[data-theme="light"] .blog-content p,
:root[data-theme="light"] .article-content p {
    color: #2c3e50 !important;
}

:root[data-theme="light"] .blog-meta,
:root[data-theme="light"] .article-meta {
    color: #6c757d !important;
}

:root[data-theme="light"] .read-more {
    color: #667eea !important;
}

/* ========================================
   VIEW ALL / LOAD MORE BUTTONS - Light Mode
   ======================================== */

:root[data-theme="light"] .view-all-btn,
:root[data-theme="light"] .load-more-btn,
:root[data-theme="light"] [class*="view-all"],
:root[data-theme="light"] [class*="load-more"] {
    background: var(--card-bg) !important;
    color: #1a1f3a !important;
    border: 2px solid #667eea !important;
}

:root[data-theme="light"] .view-all-btn:hover,
:root[data-theme="light"] .load-more-btn:hover {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
}

/* ========================================
   COMPREHENSIVE FALLBACK - Light Mode
   ======================================== */

/* Catch-all for any remaining light text on light backgrounds */
:root[data-theme="light"] section[style*="background: #"] *:not([style*="background: linear-gradient"]):not(.gradient-text):not(.btn-primary):not(.btn-secondary):not(button[style*="background: linear-gradient"]) {
    color: #2c3e50 !important;
}

:root[data-theme="light"] section[style*="background: #"] h1,
:root[data-theme="light"] section[style*="background: #"] h2,
:root[data-theme="light"] section[style*="background: #"] h3,
:root[data-theme="light"] section[style*="background: #"] h4,
:root[data-theme="light"] section[style*="background: #"] h5,
:root[data-theme="light"] section[style*="background: #"] h6 {
    color: #1a1f3a !important;
}

/* Ensure stats and metrics are always visible */
:root[data-theme="light"] [class*="roi"],
:root[data-theme="light"] [class*="ROI"],
:root[data-theme="light"] [class*="deploy"],
:root[data-theme="light"] [class*="time"],
:root[data-theme="light"] [class*="metric"],
:root[data-theme="light"] [class*="average"],
:root[data-theme="light"] [class*="lift"] {
    color: #1a1f3a !important;
}

/* ========================================
   GRID & LAYOUT FIXES - Light Mode
   ======================================== */

:root[data-theme="light"] .grid-item,
:root[data-theme="light"] .flex-item {
    color: #1a1f3a !important;
}

/* ========================================
   ANIMATION & TRANSITION FIXES
   ======================================== */

:root[data-theme="light"] * {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 768px) {
    :root[data-theme="light"] .hero {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f5 100%) !important;
    }
    
    :root[data-theme="light"] .hero-overlay {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    :root[data-theme="light"] .hero h1,
    :root[data-theme="light"] .hero h2,
    :root[data-theme="light"] .hero-title {
        color: #1a1f3a !important;
        text-shadow: none !important;
    }
    
    :root[data-theme="light"] .hero p,
    :root[data-theme="light"] .hero-description {
        color: #2c3e50 !important;
        text-shadow: none !important;
    }
    
    /* Ensure buttons are visible on mobile light mode */
    :root[data-theme="light"] .hero .btn-primary,
    :root[data-theme="light"] .hero-cta .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2) !important;
    }
    
    :root[data-theme="light"] .hero .btn-secondary,
    :root[data-theme="light"] .hero-cta .btn-secondary {
        background: #ffffff !important;
        color: #667eea !important;
        border: 2px solid #667eea !important;
        box-shadow: 0 2px 10px rgba(102, 126, 234, 0.15) !important;
    }
}

/* ========================================
   STAT CARD FIX - Hero Side Stats
   ======================================== */

/* Fix for "AVERAGE ROI LIFT" and "TIME TO DEPLOYMENT" visibility */
:root[data-theme="light"] .stat-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #e9ecef !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* ========================================
   HERO STATS FIX - 30+ AI Products, 500+ Projects, 4.9/5
   CRITICAL: Maximum specificity overrides for light mode
   ======================================== */

/* Fix for hero stats items not visible in light mode */
:root[data-theme="light"] .hero-stats {
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 2rem !important;
    border-radius: 20px !important;
    border: 2px solid #e9ecef !important;
}

:root[data-theme="light"] .hero-stats .stat-item {
    background: transparent !important;
}

/* CRITICAL: Override inline styles with maximum specificity */
:root[data-theme="light"] .hero-stats .stat-number,
:root[data-theme="light"] .hero-stats .stat-content .stat-number,
:root[data-theme="light"] .stat-item .stat-number,
:root[data-theme="light"] .stat-item .stat-content .stat-number {
    color: #1a1f3a !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #1a1f3a !important;
    background: none !important;
    text-shadow: none !important;
}

:root[data-theme="light"] .hero-stats .stat-label,
:root[data-theme="light"] .hero-stats .stat-content .stat-label,
:root[data-theme="light"] .stat-item .stat-label,
:root[data-theme="light"] .stat-item .stat-content .stat-label {
    color: #495057 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

:root[data-theme="light"] .hero-stats .stat-icon {
    color: #667eea !important;
    background: rgba(102, 126, 234, 0.15) !important;
}

:root[data-theme="light"] .hero-stats .stat-icon i {
    color: #667eea !important;
}

/* Additional fallback selectors */
:root[data-theme="light"] .stat-content .stat-number {
    color: #1a1f3a !important;
    -webkit-text-fill-color: #1a1f3a !important;
    background: none !important;
}

:root[data-theme="light"] .stat-content .stat-label {
    color: #495057 !important;
}

/* Products page stats banner */
:root[data-theme="light"] .stats-banner {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05)) !important;
    border: 2px solid #e9ecef !important;
}

:root[data-theme="light"] .stats-banner .stat-item h3 {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

:root[data-theme="light"] .stats-banner .stat-item p {
    color: #6c757d !important;
}

:root[data-theme="light"] .stat-card-label {
    color: #6c757d !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

:root[data-theme="light"] .stat-card-value {
    color: #1a1f3a !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    -webkit-text-fill-color: #1a1f3a !important;
    background: none !important;
}

/* ========================================
   CONTACT PAGE CTA BUTTON FIX
   ======================================== */

/* Ensure CTA buttons are visible in both light and dark mode */
:root[data-theme="dark"] .cta-btn-primary {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #4F46E5 !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2) !important;
}

:root[data-theme="dark"] .cta-btn-primary:hover {
    background: #ffffff !important;
    color: #4F46E5 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.4) !important;
}

:root[data-theme="dark"] .cta-btn-primary i {
    color: #4F46E5 !important;
}

:root[data-theme="light"] .cta-btn-primary {
    background: #ffffff !important;
    color: #4F46E5 !important;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15) !important;
}

:root[data-theme="light"] .cta-btn-primary:hover {
    background: #f8f9fa !important;
    color: #4F46E5 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.25) !important;
}

:root[data-theme="light"] .stat-card-desc {
    color: #6c757d !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

/* Hero side stats container */
:root[data-theme="light"] .hero-side-stats {
    background: transparent !important;
}

:root[data-theme="light"] .hero-side-stats .stat-card {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* ========================================
   VIEW ALL ARTICLES BUTTON FIX
   ======================================== */

/* Fix for "View All Articles" button with inline gradient and white text */
:root[data-theme="light"] a[href="/resources/blog.html"],
:root[data-theme="light"] a[href*="blog.html"],
:root[data-theme="light"] a[style*="linear-gradient"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
}

:root[data-theme="light"] a[href="/resources/blog.html"]:hover,
:root[data-theme="light"] a[href*="blog.html"]:hover {
    background: linear-gradient(135deg, #5568d3 0%, #653b8b 100%) !important;
    color: white !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4) !important;
}

/* Any button/link with gradient background should keep white text */
:root[data-theme="light"] [style*="background: linear-gradient"],
:root[data-theme="light"] [style*="background:linear-gradient"] {
    color: white !important;
}

/* ========================================
   COMPREHENSIVE SITE-WIDE LIGHT MODE FIXES
   ======================================== */

/* All page hero sections */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .products-hero,
:root[data-theme="light"] section[style*="background: linear-gradient"] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

:root[data-theme="light"] .hero h1,
:root[data-theme="light"] .hero h2,
:root[data-theme="light"] .hero p,
:root[data-theme="light"] .products-hero h1,
:root[data-theme="light"] .products-hero p {
    color: #1a1f3a !important;
}

/* Product cards on all pages */
:root[data-theme="light"] .product-card,
:root[data-theme="light"] .product-featured-card {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] .product-card:hover,
:root[data-theme="light"] .product-featured-card:hover {
    border-color: #667eea !important;
    box-shadow: 0 20px 50px rgba(102, 126, 234, 0.2) !important;
}

:root[data-theme="light"] .product-title,
:root[data-theme="light"] .product-name {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .product-description,
:root[data-theme="light"] .product-desc {
    color: #6c757d !important;
}

:root[data-theme="light"] .product-category {
    color: #667eea !important;
    background: rgba(102, 126, 234, 0.1) !important;
}

/* Filter buttons */
:root[data-theme="light"] .filter-section {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
}

:root[data-theme="light"] .filter-btn {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    color: #1a1f3a !important;
}

:root[data-theme="light"] .filter-btn:hover,
:root[data-theme="light"] .filter-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: transparent !important;
}

/* Service cards */
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .solution-card {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
}

:root[data-theme="light"] .service-card h3,
:root[data-theme="light"] .feature-card h3,
:root[data-theme="light"] .solution-card h3 {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .service-card p,
:root[data-theme="light"] .feature-card p,
:root[data-theme="light"] .solution-card p {
    color: #6c757d !important;
}

/* About page team cards */
:root[data-theme="light"] .team-card,
:root[data-theme="light"] .team-member {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
}

:root[data-theme="light"] .team-card h4,
:root[data-theme="light"] .team-member h4 {
    color: #1a1f3a !important;
}

/* Contact page form */
:root[data-theme="light"] .contact-form,
:root[data-theme="light"] form {
    background: #ffffff !important;
}

:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    color: #1a1f3a !important;
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: #6c757d !important;
}

:root[data-theme="light"] label {
    color: #1a1f3a !important;
}

/* Pricing cards */
:root[data-theme="light"] .pricing-card,
:root[data-theme="light"] .plan-card {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
}

:root[data-theme="light"] .pricing-card h3,
:root[data-theme="light"] .plan-card h3 {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .price {
    color: #667eea !important;
}

:root[data-theme="light"] .pricing-feature,
:root[data-theme="light"] .plan-feature {
    color: #6c757d !important;
}

/* FAQ sections */
:root[data-theme="light"] .faq-item,
:root[data-theme="light"] .accordion-item {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
}

:root[data-theme="light"] .faq-question,
:root[data-theme="light"] .accordion-header {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .faq-answer,
:root[data-theme="light"] .accordion-body {
    color: #6c757d !important;
}

/* Testimonial cards */
:root[data-theme="light"] .testimonial-card,
:root[data-theme="light"] .review-card {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
}

:root[data-theme="light"] .testimonial-text,
:root[data-theme="light"] .review-text {
    color: #6c757d !important;
}

:root[data-theme="light"] .testimonial-author,
:root[data-theme="light"] .review-author {
    color: #1a1f3a !important;
}

/* Footer */
:root[data-theme="light"] footer {
    background: #f8f9fa !important;
    border-top: 2px solid #e9ecef !important;
}

:root[data-theme="light"] footer h4,
:root[data-theme="light"] footer h5 {
    color: #1a1f3a !important;
}

:root[data-theme="light"] footer p,
:root[data-theme="light"] footer li,
:root[data-theme="light"] footer a {
    color: #6c757d !important;
}

:root[data-theme="light"] footer a:hover {
    color: #667eea !important;
}

/* All section headings */
:root[data-theme="light"] section h1,
:root[data-theme="light"] section h2,
:root[data-theme="light"] section h3,
:root[data-theme="light"] section h4 {
    color: #1a1f3a !important;
}

:root[data-theme="light"] section p,
:root[data-theme="light"] section li {
    color: #6c757d !important;
}

/* CRITICAL FIX: Stat numbers must NOT use transparent text fill in light mode */
:root[data-theme="light"] .stat-number,
:root[data-theme="light"] [class*="stat-number"],
:root[data-theme="light"] .stat-card .stat-number,
:root[data-theme="light"] .hero-side-stats .stat-number {
    -webkit-text-fill-color: #1a1f3a !important;
    color: #1a1f3a !important;
    background: none !important;
    text-shadow: none !important;
}

/* Ensure gradient text stays visible ONLY for intentional gradient text, not stats */
:root[data-theme="light"] .gradient-text:not(.stat-number),
:root[data-theme="light"] h1 > [style*="-webkit-text-fill-color: transparent"],
:root[data-theme="light"] h2 > [style*="-webkit-text-fill-color: transparent"] {
    -webkit-text-fill-color: transparent !important;
}

/* ========================================
   HEADER & NAVIGATION - Light Mode
   ======================================== */

:root[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e9ecef !important;
    backdrop-filter: blur(20px) !important;
}

/* Navigation Light Mode - Desktop & Mobile */
:root[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e9ecef !important;
    backdrop-filter: blur(10px) !important;
}

:root[data-theme="light"] .header-logo {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .logo-icon {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
}

:root[data-theme="light"] .nav-link {
    color: #1a1f3a !important;
    font-weight: 500 !important;
}

:root[data-theme="light"] .nav-link:hover {
    color: #667eea !important;
}

:root[data-theme="light"] .nav-link i {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .nav-dropdown {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .dropdown-link {
    color: #2c3e50 !important;
}

:root[data-theme="light"] .dropdown-link:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
}

:root[data-theme="light"] .header-btn {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .header-btn:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
}

:root[data-theme="light"] .mobile-toggle {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .currency-dropdown select {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    color: #1a1f3a !important;
}

:root[data-theme="light"] .btn-cta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

:root[data-theme="light"] .btn-cta:hover {
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4) !important;
}

/* Mobile navigation in light mode */
@media (max-width: 1024px) {
    :root[data-theme="light"] .header-nav {
        background: #ffffff !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    }
    
    :root[data-theme="light"] .nav-link {
        background: #f8f9fa !important;
        color: #1a1f3a !important;
    }
    
    :root[data-theme="light"] .nav-link:hover {
        background: rgba(102, 126, 234, 0.1) !important;
    }
    
    /* Ensure mobile toggle button is visible in light mode */
    :root[data-theme="light"] .mobile-toggle {
        color: #1a1f3a !important;
        background: transparent !important;
        border: none !important;
    }
    
    :root[data-theme="light"] .mobile-toggle:hover {
        color: #667eea !important;
    }
}

/* Megamenu in light mode */
:root[data-theme="light"] .megamenu-column h4 {
    color: #1a1f3a !important;
    border-bottom-color: rgba(102, 126, 234, 0.3) !important;
}

:root[data-theme="light"] .megamenu-link {
    color: #2c3e50 !important;
}

:root[data-theme="light"] .megamenu-link:hover {
    background: rgba(102, 126, 234, 0.1) !important;
}

:root[data-theme="light"] .megamenu-link strong {
    color: #1a1f3a !important;
}

/* ========================================
   HERO SECTION TEXT - Light Mode
   ======================================== */

:root[data-theme="light"] .hero-badge {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
}

:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .hero h1 {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .hero-description,
:root[data-theme="light"] .hero p {
    color: #2c3e50 !important;
}

:root[data-theme="light"] .gradient-text {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ========================================
   MOBILE NAVIGATION FIXES - Critical
   ======================================== */

/* Ensure mobile navigation is visible when active */
@media (max-width: 1024px) {
    .header-nav.active {
        display: flex !important;
        left: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: all !important;
        z-index: 9999 !important;
    }
    
    .header-nav.active .nav-menu {
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .header-nav.active .nav-item {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .header-nav.active .nav-link {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Mobile toggle must be visible */
    .mobile-toggle {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10000 !important;
    }
    
    /* Light mode mobile nav background */
    :root[data-theme="light"] .header-nav {
        background: #ffffff !important;
        border-right: 1px solid #e9ecef !important;
    }
    
    /* Light mode mobile nav items */
    :root[data-theme="light"] .header-nav .nav-link {
        color: #1a1f3a !important;
        background: #f8f9fa !important;
    }
    
    :root[data-theme="light"] .header-nav .nav-link:hover {
        background: #667eea !important;
        color: #ffffff !important;
    }
    
    /* Light mode dropdown items in mobile */
    :root[data-theme="light"] .nav-dropdown {
        background: #f8f9fa !important;
    }
    
    :root[data-theme="light"] .dropdown-link {
        color: #1a1f3a !important;
    }
    
    :root[data-theme="light"] .dropdown-link:hover {
        background: #667eea !important;
        color: #ffffff !important;
    }
}

/* ========================================
   DESKTOP NAVIGATION LIGHT MODE FIXES
   ======================================== */

/* Light mode header */
:root[data-theme="light"] .site-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e9ecef !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Light mode nav links */
:root[data-theme="light"] .header-nav .nav-link {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .header-nav .nav-link:hover {
    color: #667eea !important;
}

/* Light mode dropdowns */
:root[data-theme="light"] .nav-dropdown {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .dropdown-link {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .dropdown-link:hover {
    background: #f8f9fa !important;
    color: #667eea !important;
}

/* Light mode megamenu */
:root[data-theme="light"] .megamenu-dropdown,
:root[data-theme="light"] .has-megamenu .megamenu-dropdown {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(102, 126, 234, 0.25) !important;
    box-shadow: 0 25px 80px rgba(102, 126, 234, 0.2), 0 0 0 1px rgba(102, 126, 234, 0.1) !important;
}

/* Ensure megamenu visibility is preserved in all themes */
.has-megamenu:hover .megamenu-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

:root[data-theme="light"] .megamenu-section-title,
:root[data-theme="light"] .megamenu-column h4 {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .megamenu-item,
:root[data-theme="light"] .megamenu-link {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .megamenu-item:hover,
:root[data-theme="light"] .megamenu-link:hover {
    background: #f8f9fa !important;
    color: #667eea !important;
}

:root[data-theme="light"] .megamenu-link span {
    color: #6c757d !important;
}

:root[data-theme="light"] .megamenu-link:hover span {
    color: #667eea !important;
}

/* Light mode mobile toggle icon */
:root[data-theme="light"] .mobile-toggle {
    color: #1a1f3a !important;
}

:root[data-theme="light"] .mobile-toggle:hover {
    color: #667eea !important;
    background: #f8f9fa !important;
}

/* ========================================
   PRINT MODE - Light Only
   ======================================== */

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
}