/* ========================================
   Alternating Section Backgrounds - Light Theme
   ======================================== */

/* Light Blue Background Color */
:root {
    --light-blue-bg: #f0f7ff;
    --light-blue-border: #d0e4ff;
}

/* ========================================
   Section Background Pattern (Light Theme)
   ======================================== */

/* LIGHT BLUE Sections */
body.light-theme .value-snapshot,
body.light-theme .quick-stats,
body.light-theme .live-telemetry,
body.light-theme .trust-signals {
    background: var(--light-blue-bg) !important;
    background-image: none !important;
}

/* WHITE Sections */
body.light-theme .dcbx-scroll-section,
body.light-theme .target-sectors,
body.light-theme .key-features,
body.light-theme .cta-section {
    background: #ffffff !important;
    background-image: none !important;
}

/* ========================================
   Value Snapshot Section (Light Blue)
   ======================================== */
body.light-theme .value-snapshot {
    padding: 4rem 0;
}

body.light-theme .value-snapshot .value-card {
    background: #ffffff;
    border: 2px solid var(--light-blue-border);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.08);
    transition: all 0.3s ease;
}

body.light-theme .value-snapshot .value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.15);
    border-color: var(--primary-color);
}

body.light-theme .value-snapshot .value-icon {
    color: var(--primary-color);
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 102, 204, 0.05));
}

body.light-theme .value-snapshot h3 {
    color: var(--text-primary);
}

body.light-theme .value-snapshot p {
    color: var(--text-secondary);
}

/* ========================================
   Target Sectors Section (White)
   ======================================== */
body.light-theme .target-sectors {
    padding: 4rem 0;
}

body.light-theme .target-sectors .section-title {
    color: var(--text-primary);
}

body.light-theme .target-sectors .section-subtitle {
    color: var(--text-secondary);
}

body.light-theme .target-sectors .sector-card {
    background: #ffffff;
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

body.light-theme .target-sectors .sector-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

body.light-theme .target-sectors .sector-icon {
    color: var(--primary-color);
}

body.light-theme .target-sectors h3 {
    color: var(--text-primary);
}

body.light-theme .target-sectors p {
    color: var(--text-secondary);
}

/* ========================================
   Quick Stats Section (Light Blue)
   ======================================== */
body.light-theme .quick-stats {
    background: var(--light-blue-bg) !important;
    background-image: none !important;
    padding: 4rem 0;
}

body.light-theme .quick-stats .stat-item {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 1rem;
    border: 2px solid var(--light-blue-border);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.08);
    transition: all 0.3s ease;
}

body.light-theme .quick-stats .stat-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.15);
    border-color: var(--primary-color);
}

body.light-theme .quick-stats .stat-number {
    color: var(--primary-color) !important;
    font-weight: 800;
}

body.light-theme .quick-stats .stat-suffix {
    color: var(--primary-color) !important;
    font-weight: 700;
}

body.light-theme .quick-stats .stat-label {
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* ========================================
   Key Features Section (White)
   ======================================== */
body.light-theme .key-features {
    padding: 4rem 0;
}

body.light-theme .key-features .section-title {
    color: var(--text-primary);
}

body.light-theme .key-features .feature-item {
    background: #ffffff;
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

body.light-theme .key-features .feature-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

body.light-theme .key-features .feature-icon {
    color: var(--primary-color);
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 102, 204, 0.05));
}

body.light-theme .key-features h3 {
    color: var(--text-primary);
}

body.light-theme .key-features p {
    color: var(--text-secondary);
}

/* ========================================
   Live Telemetry Section (Light Blue)
   ======================================== */
body.light-theme .live-telemetry {
    background: var(--light-blue-bg) !important;
    padding: 4rem 0;
}

body.light-theme .live-telemetry .section-title {
    color: var(--text-primary);
}

body.light-theme .live-telemetry .section-subtitle {
    color: var(--text-secondary);
}

body.light-theme .live-telemetry .telemetry-grid {
    background-color: #ffffff;
    border: 2px solid var(--light-blue-border);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.08);
}

body.light-theme .live-telemetry .metric-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
}

body.light-theme .live-telemetry .metric-label {
    color: var(--text-secondary);
}

body.light-theme .live-telemetry .metric-value {
    color: var(--text-primary);
}

body.light-theme .live-telemetry .status-badge {
    background: #10b981;
    color: #ffffff;
}

/* ========================================
   CTA Section (White)
   ======================================== */
body.light-theme .cta-section {
    background: #ffffff !important;
    background-image: none !important;
    padding: 4rem 0;
}

body.light-theme .cta-section .cta-content h2 {
    color: var(--text-primary) !important;
    font-weight: 700;
}

body.light-theme .cta-section .cta-content p {
    color: var(--text-secondary) !important;
    font-weight: 500;
}

body.light-theme .cta-section .btn-primary {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border: none;
}

body.light-theme .cta-section .btn-primary:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
}

body.light-theme .cta-section .btn-outline {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
}

body.light-theme .cta-section .btn-outline:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

/* ========================================
   Trust Signals Section (Light Blue)
   ======================================== */
body.light-theme .trust-signals {
    background: var(--light-blue-bg) !important;
    padding: 4rem 0;
}

body.light-theme .trust-signals .section-title {
    color: var(--text-primary);
}

body.light-theme .trust-signals .trust-item {
    background: #ffffff;
    border: 2px solid var(--light-blue-border);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.08);
    transition: all 0.3s ease;
}

body.light-theme .trust-signals .trust-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.15);
    border-color: var(--primary-color);
}

body.light-theme .trust-signals .trust-icon {
    color: var(--primary-color);
}

body.light-theme .trust-signals h3 {
    color: var(--text-primary);
}

body.light-theme .trust-signals p {
    color: var(--text-secondary);
}

/* ========================================
   DCBx Scroll Section (White)
   ======================================== */
body.light-theme .dcbx-scroll-section {
    background: #ffffff !important;
    background-image: none !important;
}

body.light-theme .dcbx-scroll-section .dcbx-title {
    color: var(--text-primary);
}

body.light-theme .dcbx-scroll-section .dcbx-subtitle {
    color: var(--text-secondary);
}

/* Content panels */
body.light-theme .dcbx-scroll-section .content-panel {
    background: #ffffff;
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

body.light-theme .dcbx-scroll-section .content-panel h3 {
    color: var(--text-primary);
}

body.light-theme .dcbx-scroll-section .content-panel p {
    color: var(--text-secondary);
}

body.light-theme .dcbx-scroll-section .panel-number {
    color: var(--primary-color);
}

body.light-theme .dcbx-scroll-section .feature-list li {
    color: var(--text-secondary);
}

body.light-theme .dcbx-scroll-section .feature-list i {
    color: var(--primary-color);
}

/* Progress bar */
body.light-theme .dcbx-progress-bar {
    background: var(--border-color);
}

body.light-theme .dcbx-progress-fill {
    background: var(--primary-color);
}

body.light-theme .dcbx-progress-text {
    color: var(--text-primary);
}

/* Component labels */
body.light-theme .component-label {
    background: rgba(0, 102, 204, 0.1);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

/* ========================================
   Dark Theme Overrides
   ======================================== */

/* Keep gradient backgrounds in dark theme */
body.dark-theme .quick-stats {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
}

body.dark-theme .live-telemetry {
    background: var(--bg-primary) !important;
}

body.dark-theme .trust-signals {
    background: var(--bg-secondary) !important;
}

body.dark-theme .value-snapshot {
    background: var(--bg-primary) !important;
}