/* ===================================================================
 * Neutral Theme Override - Replace Blue with White/Grey
 * Changes all blue accents to neutral white/grey palette
 * COMPREHENSIVE OVERRIDE - All blue colors replaced
 * ================================================================ */

/* ===================================================================
 * ROOT VARIABLES - Override Primary Colors
 * ================================================================ */

:root {
    --primary: #e2e8f0 !important;
    --accent: #ffffff !important;
}

/* ===================================================================
 * BORDERS - White/Grey Instead of Blue
 * ================================================================ */

.card,
.stat-item,
.industry-card,
.pillar-item,
#problem .prose,
#gen-ai-spotlight .feature-item {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.card:hover,
.stat-item:hover,
.industry-card:hover,
.pillar-item:hover,
#problem .prose:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===================================================================
 * SHADOWS - Neutral Grey Instead of Blue
 * ================================================================ */

.card,
.stat-item,
.industry-card,
.pillar-item,
#problem .prose {
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(255, 255, 255, 0.03),
        0 12px 24px rgba(255, 255, 255, 0.02),
        0 24px 48px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.card:hover,
.stat-item:hover,
.industry-card:hover,
.pillar-item:hover,
#problem .prose:hover {
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(255, 255, 255, 0.05),
        0 20px 40px rgba(255, 255, 255, 0.03),
        0 32px 64px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ===================================================================
 * STATS COUNTER - Neutral Shadows
 * ================================================================ */

#stats-counter .stat-item {
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(255, 255, 255, 0.03),
        0 16px 32px rgba(255, 255, 255, 0.02),
        0 28px 56px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#stats-counter .stat-item:hover {
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 12px 24px rgba(255, 255, 255, 0.05),
        0 24px 48px rgba(255, 255, 255, 0.03),
        0 40px 80px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ===================================================================
 * STAT VALUES - White Instead of Blue
 * ================================================================ */

#stats-counter .stat-value {
    color: #ffffff !important;
}

#stats-counter .stat-item:hover .stat-value {
    color: #f1f5f9 !important;
}

/* ===================================================================
 * ICON BOXES - Neutral Glow
 * ================================================================ */

.icon-box,
.pillar-icon,
.industry-icon,
.feature-icon {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(255, 255, 255, 0.03),
        0 8px 16px rgba(255, 255, 255, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.card:hover .icon-box,
.card:hover .pillar-icon,
.card:hover .industry-icon,
.card:hover .feature-icon {
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(255, 255, 255, 0.05),
        0 12px 24px rgba(255, 255, 255, 0.03),
        0 0 20px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ===================================================================
 * SECTION BADGES - White/Grey
 * ================================================================ */

.section-badge {
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

#gen-ai-spotlight .section-badge {
    color: #cbd5e1 !important;
}

/* ===================================================================
 * BUTTONS - Neutral Theme
 * ================================================================ */

.btn,
.hero-btn-primary-large {
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%) !important;
    color: #000000 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.btn:hover,
.hero-btn-primary-large:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%) !important;
}

.hero-btn-secondary-large {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.hero-btn-secondary-large:hover {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ===================================================================
 * LINKS - White/Grey
 * ================================================================ */

a {
    color: #e2e8f0 !important;
}

a:hover {
    color: #ffffff !important;
}

/* ===================================================================
 * CHALLENGE SECTION - Neutral Border
 * ================================================================ */

#problem .prose {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

#problem .prose:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

#problem .prose::before {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3),
        rgba(200, 200, 200, 0.3)
    ) !important;
}

#problem .prose::after {
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
    ) !important;
}

/* ===================================================================
 * FORM INPUTS - Neutral Focus
 * ================================================================ */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(255, 255, 255, 0.05),
        0 0 0 3px rgba(255, 255, 255, 0.1),
        inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ===================================================================
 * LORDICON COLORS - Keep Colorful (No Override)
 * Icons remain with their original colors
 * ================================================================ */

/* Icons keep their original colorful appearance - no changes needed */

/* ===================================================================
 * HEADINGS - Ensure White/Light Grey
 * ================================================================ */

h1, h2, h3, h4, h5, h6 {
    color: #f8fafc !important;
}

/* ===================================================================
 * HERO SECTION - Neutral Accents
 * ================================================================ */

.hero-trust-item {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.hero-metric-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.hero-metric-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ===================================================================
 * CAPABILITY TAGS - Neutral
 * ================================================================ */

#coverage .capability-tag {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

#coverage .capability-tag:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05)) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ===================================================================
 * OVERRIDE ALL BLUE SHADOWS FROM LAYERED-SHADOWS.CSS
 * ================================================================ */

.card,
.stat-item,
.industry-card,
.pillar-item,
.guide-card,
.pitfall-card,
.location-card,
.expert-card,
.testimonial-card,
.faq-item,
.process-step,
#problem .prose,
#gen-ai-spotlight .feature-item,
#benefits .card {
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(255, 255, 255, 0.03),
        0 12px 24px rgba(255, 255, 255, 0.02),
        0 24px 48px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.card:hover,
.stat-item:hover,
.industry-card:hover,
.pillar-item:hover,
.guide-card:hover,
.pitfall-card:hover,
.location-card:hover,
.expert-card:hover,
.testimonial-card:hover,
.process-step:hover,
#problem .prose:hover,
#gen-ai-spotlight .feature-item:hover,
#benefits .card:hover {
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(255, 255, 255, 0.05),
        0 20px 40px rgba(255, 255, 255, 0.03),
        0 32px 64px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ===================================================================
 * OVERRIDE ODOMETER-STATS.CSS BLUE COLORS
 * ================================================================ */

#stats-counter {
    background: #000000 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#stats-counter::before {
    background: none !important;
}

#stats-counter .stat-item {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

#stats-counter .stat-item::before {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3),
        rgba(200, 200, 200, 0.3)
    ) !important;
}

#stats-counter .stat-item::after {
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    ) !important;
}

#stats-counter .stat-item:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ===================================================================
 * OVERRIDE CHALLENGE SECTION BLUE COLORS
 * ================================================================ */

#problem .prose {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

#problem .prose:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#problem .prose::before {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3),
        rgba(200, 200, 200, 0.3)
    ) !important;
}

#problem .prose::after {
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
    ) !important;
}