/* ==========================================================
   FINAL DARK MODE SECTION BACKGROUND CONTROL - ALL PAGES
   This block is intentionally in footer.php so it loads AFTER
   page-level <style> blocks and wins over older rules.
   ========================================================== */
html[data-theme="dark"] body {
    background-color: #020817 !important;
}

/* Alternate all direct page sections, including page hero, stats and content sections */
html[data-theme="dark"] main#main-content > section:nth-of-type(odd),
html[data-theme="dark"] body main#main-content > section:nth-of-type(odd),
body.dark-mode main#main-content > section:nth-of-type(odd) {
    background: #020817 !important;
    background-color: #020817 !important;
}

html[data-theme="dark"] main#main-content > section:nth-of-type(even),
html[data-theme="dark"] body main#main-content > section:nth-of-type(even),
body.dark-mode main#main-content > section:nth-of-type(even) {
    background: #0b1424 !important;
    background-color: #0b1424 !important;
}

/* Stronger override for old section-light / section-dark classes in dark mode */
html[data-theme="dark"] main#main-content > section.section-light:nth-of-type(odd),
html[data-theme="dark"] main#main-content > section.section-dark:nth-of-type(odd),
html[data-theme="dark"] main#main-content > section.light-section:nth-of-type(odd),
body.dark-mode main#main-content > section.section-light:nth-of-type(odd),
body.dark-mode main#main-content > section.section-dark:nth-of-type(odd),
body.dark-mode main#main-content > section.light-section:nth-of-type(odd) {
    background: #020817 !important;
    background-color: #020817 !important;
}

html[data-theme="dark"] main#main-content > section.section-light:nth-of-type(even),
html[data-theme="dark"] main#main-content > section.section-dark:nth-of-type(even),
html[data-theme="dark"] main#main-content > section.light-section:nth-of-type(even),
body.dark-mode main#main-content > section.section-light:nth-of-type(even),
body.dark-mode main#main-content > section.section-dark:nth-of-type(even),
body.dark-mode main#main-content > section.light-section:nth-of-type(even) {
    background: #0b1424 !important;
    background-color: #0b1424 !important;
}

/* Remove old gradient overlays that made several dark sections look identical */
html[data-theme="dark"] main#main-content > section.section-dark::before,
body.dark-mode main#main-content > section.section-dark::before {
    display: none !important;
}

/* Text readability in dark mode */
html[data-theme="dark"] main#main-content section h1,
html[data-theme="dark"] main#main-content section h2,
html[data-theme="dark"] main#main-content section h3,
html[data-theme="dark"] main#main-content section h4,
body.dark-mode main#main-content section h1,
body.dark-mode main#main-content section h2,
body.dark-mode main#main-content section h3,
body.dark-mode main#main-content section h4 {
    color: #f8fbff !important;
}

html[data-theme="dark"] main#main-content section p,
html[data-theme="dark"] main#main-content section li,
html[data-theme="dark"] main#main-content section .section-description,
body.dark-mode main#main-content section p,
body.dark-mode main#main-content section li,
body.dark-mode main#main-content section .section-description {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] main#main-content section .eyebrow,
body.dark-mode main#main-content section .eyebrow {
    color: #fb923c !important;
}

/* Cards/boxes need a third shade so they remain visible inside both alternate backgrounds */
html[data-theme="dark"] main#main-content section .card,
html[data-theme="dark"] main#main-content section .case-card,
html[data-theme="dark"] main#main-content section .price-card,
html[data-theme="dark"] main#main-content section .portfolio-card,
html[data-theme="dark"] main#main-content section .service-card,
html[data-theme="dark"] main#main-content section .industry-card,
html[data-theme="dark"] main#main-content section .industry-box,
html[data-theme="dark"] main#main-content section .workflow-card,
html[data-theme="dark"] main#main-content section .process-card,
html[data-theme="dark"] main#main-content section .static-service-card,
html[data-theme="dark"] main#main-content section .faq-hover-item,
html[data-theme="dark"] main#main-content section .feature-card,
html[data-theme="dark"] main#main-content section .benefit-card,
html[data-theme="dark"] main#main-content section .testimonial-card,
html[data-theme="dark"] main#main-content section .sector-fit-card,
html[data-theme="dark"] main#main-content section .focus-block,
html[data-theme="dark"] main#main-content section .project-card,
body.dark-mode main#main-content section .card,
body.dark-mode main#main-content section .case-card,
body.dark-mode main#main-content section .price-card,
body.dark-mode main#main-content section .portfolio-card,
body.dark-mode main#main-content section .service-card,
body.dark-mode main#main-content section .industry-card,
body.dark-mode main#main-content section .industry-box,
body.dark-mode main#main-content section .workflow-card,
body.dark-mode main#main-content section .process-card,
body.dark-mode main#main-content section .static-service-card,
body.dark-mode main#main-content section .faq-hover-item,
body.dark-mode main#main-content section .feature-card,
body.dark-mode main#main-content section .benefit-card,
body.dark-mode main#main-content section .testimonial-card,
body.dark-mode main#main-content section .sector-fit-card,
body.dark-mode main#main-content section .focus-block,
body.dark-mode main#main-content section .project-card {
    background: #111c2f !important;
    background-color: #111c2f !important;
    border-color: rgba(255,255,255,0.13) !important;
    color: #dbeafe !important;
}

html[data-theme="dark"] main#main-content section .card h3,
html[data-theme="dark"] main#main-content section .case-card h3,
html[data-theme="dark"] main#main-content section .portfolio-card h3,
html[data-theme="dark"] main#main-content section .service-card h3,
html[data-theme="dark"] main#main-content section .industry-card h3,
html[data-theme="dark"] main#main-content section .workflow-card h3,
html[data-theme="dark"] main#main-content section .process-card h3,
body.dark-mode main#main-content section .card h3,
body.dark-mode main#main-content section .case-card h3,
body.dark-mode main#main-content section .portfolio-card h3,
body.dark-mode main#main-content section .service-card h3,
body.dark-mode main#main-content section .industry-card h3,
body.dark-mode main#main-content section .workflow-card h3,
body.dark-mode main#main-content section .process-card h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] main#main-content section .card p,
html[data-theme="dark"] main#main-content section .case-card p,
html[data-theme="dark"] main#main-content section .portfolio-card p,
html[data-theme="dark"] main#main-content section .service-card p,
html[data-theme="dark"] main#main-content section .industry-card p,
html[data-theme="dark"] main#main-content section .workflow-card p,
html[data-theme="dark"] main#main-content section .process-card p,
body.dark-mode main#main-content section .card p,
body.dark-mode main#main-content section .case-card p,
body.dark-mode main#main-content section .portfolio-card p,
body.dark-mode main#main-content section .service-card p,
body.dark-mode main#main-content section .industry-card p,
body.dark-mode main#main-content section .workflow-card p,
body.dark-mode main#main-content section .process-card p {
    color: #cfe0ff !important;
}

/* Stats strips should not flatten the page */
html[data-theme="dark"] main#main-content > section.stats-strip:nth-of-type(odd),
html[data-theme="dark"] main#main-content > section.trust-stats:nth-of-type(odd),
html[data-theme="dark"] main#main-content > section.stats-section:nth-of-type(odd),
body.dark-mode main#main-content > section.stats-strip:nth-of-type(odd),
body.dark-mode main#main-content > section.trust-stats:nth-of-type(odd),
body.dark-mode main#main-content > section.stats-section:nth-of-type(odd) {
    background: #020817 !important;
    border-color: rgba(255,255,255,0.10) !important;
}

html[data-theme="dark"] main#main-content > section.stats-strip:nth-of-type(even),
html[data-theme="dark"] main#main-content > section.trust-stats:nth-of-type(even),
html[data-theme="dark"] main#main-content > section.stats-section:nth-of-type(even),
body.dark-mode main#main-content > section.stats-strip:nth-of-type(even),
body.dark-mode main#main-content > section.trust-stats:nth-of-type(even),
body.dark-mode main#main-content > section.stats-section:nth-of-type(even) {
    background: #0b1424 !important;
    border-color: rgba(255,255,255,0.10) !important;
}


/* ==========================================================
   NESTED PAGE SECTION FIX - service pages wrap sections inside
   .generic-service-page, so direct-child selectors are not enough.
   This fixes Amazon page and all similar inner pages.
   ========================================================== */
html[data-theme="dark"] main#main-content section:nth-of-type(odd),
html[data-theme="dark"] main#main-content .generic-service-page > section:nth-of-type(odd),
html[data-theme="dark"] main#main-content .ecommerce-service-page > section:nth-of-type(odd),
body.dark-mode main#main-content section:nth-of-type(odd),
body.dark-mode main#main-content .generic-service-page > section:nth-of-type(odd),
body.dark-mode main#main-content .ecommerce-service-page > section:nth-of-type(odd) {
    background: #020817 !important;
    background-color: #020817 !important;
}

html[data-theme="dark"] main#main-content section:nth-of-type(even),
html[data-theme="dark"] main#main-content .generic-service-page > section:nth-of-type(even),
html[data-theme="dark"] main#main-content .ecommerce-service-page > section:nth-of-type(even),
body.dark-mode main#main-content section:nth-of-type(even),
body.dark-mode main#main-content .generic-service-page > section:nth-of-type(even),
body.dark-mode main#main-content .ecommerce-service-page > section:nth-of-type(even) {
    background: #0b1424 !important;
    background-color: #0b1424 !important;
}

/* Extra separation for repeated final sections on service pages */
html[data-theme="dark"] main#main-content section.client-feedback-section,
body.dark-mode main#main-content section.client-feedback-section {
    background: #0b1424 !important;
    background-color: #0b1424 !important;
}

html[data-theme="dark"] main#main-content section.client-feedback-section + section,
body.dark-mode main#main-content section.client-feedback-section + section {
    background: #020817 !important;
    background-color: #020817 !important;
}

/* Dark mode boxes that were still showing white in Client Feedback and side panels */
html[data-theme="dark"] main#main-content section .client-confidence-card,
html[data-theme="dark"] main#main-content section .side-panel,
html[data-theme="dark"] main#main-content section .quote-card,
html[data-theme="dark"] main#main-content section .feedback-card,
body.dark-mode main#main-content section .client-confidence-card,
body.dark-mode main#main-content section .side-panel,
body.dark-mode main#main-content section .quote-card,
body.dark-mode main#main-content section .feedback-card {
    background: #111c2f !important;
    background-color: #111c2f !important;
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.24) !important;
    color: #dbeafe !important;
}

html[data-theme="dark"] main#main-content section .client-confidence-card p,
html[data-theme="dark"] main#main-content section .client-confidence-card span,
html[data-theme="dark"] main#main-content section .client-confidence-card .client-meta,
html[data-theme="dark"] main#main-content section .side-panel p,
html[data-theme="dark"] main#main-content section .side-panel li,
body.dark-mode main#main-content section .client-confidence-card p,
body.dark-mode main#main-content section .client-confidence-card span,
body.dark-mode main#main-content section .client-confidence-card .client-meta,
body.dark-mode main#main-content section .side-panel p,
body.dark-mode main#main-content section .side-panel li {
    color: #cfe0ff !important;
}

html[data-theme="dark"] main#main-content section .client-confidence-card strong,
html[data-theme="dark"] main#main-content section .client-confidence-card h3,
html[data-theme="dark"] main#main-content section .side-panel h2,
html[data-theme="dark"] main#main-content section .side-panel h3,
body.dark-mode main#main-content section .client-confidence-card strong,
body.dark-mode main#main-content section .client-confidence-card h3,
body.dark-mode main#main-content section .side-panel h2,
body.dark-mode main#main-content section .side-panel h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] main#main-content section .quote-mark,
body.dark-mode main#main-content section .quote-mark {
    color: #fb923c !important;
}


/* ==========================================================
   FINAL WHITE-BOX FIX - DARK MODE
   Covers workflow boxes, quality/security boxes, proof pills,
   image notes and other older components that still had #fff.
   ========================================================== */
html[data-theme="dark"] main#main-content section .mini-process-list > div,
html[data-theme="dark"] main#main-content section .engagement-options > div,
html[data-theme="dark"] main#main-content section .quality-check-grid > div,
html[data-theme="dark"] main#main-content section .hero-proof-row span,
html[data-theme="dark"] main#main-content section .category-pill-grid span,
html[data-theme="dark"] main#main-content section .image-note,
html[data-theme="dark"] main#main-content section .amazon-task-card,
html[data-theme="dark"] main#main-content section .keyword-card,
html[data-theme="dark"] main#main-content section .keyword-layer-grid article,
html[data-theme="dark"] main#main-content section .case-snapshot-grid article,
html[data-theme="dark"] main#main-content section .title-example-card,
html[data-theme="dark"] main#main-content section .keyword-intent-card,
html[data-theme="dark"] main#main-content section .sector-fit-card,
html[data-theme="dark"] main#main-content section .content-panel,
html[data-theme="dark"] main#main-content section .image-panel,
html[data-theme="dark"] main#main-content section .service-list-card,
html[data-theme="dark"] main#main-content section .process-item,
html[data-theme="dark"] main#main-content section .faq-item,
html[data-theme="dark"] main#main-content section .check-list li,
html[data-theme="dark"] main#main-content section .badge,
body.dark-mode main#main-content section .mini-process-list > div,
body.dark-mode main#main-content section .engagement-options > div,
body.dark-mode main#main-content section .quality-check-grid > div,
body.dark-mode main#main-content section .hero-proof-row span,
body.dark-mode main#main-content section .category-pill-grid span,
body.dark-mode main#main-content section .image-note,
body.dark-mode main#main-content section .amazon-task-card,
body.dark-mode main#main-content section .keyword-card,
body.dark-mode main#main-content section .keyword-layer-grid article,
body.dark-mode main#main-content section .case-snapshot-grid article,
body.dark-mode main#main-content section .title-example-card,
body.dark-mode main#main-content section .keyword-intent-card,
body.dark-mode main#main-content section .sector-fit-card,
body.dark-mode main#main-content section .content-panel,
body.dark-mode main#main-content section .image-panel,
body.dark-mode main#main-content section .service-list-card,
body.dark-mode main#main-content section .process-item,
body.dark-mode main#main-content section .faq-item,
body.dark-mode main#main-content section .check-list li,
body.dark-mode main#main-content section .badge {
    background: #111c2f !important;
    background-color: #111c2f !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #dbeafe !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
}

html[data-theme="dark"] main#main-content section .mini-process-list strong,
html[data-theme="dark"] main#main-content section .engagement-options strong,
html[data-theme="dark"] main#main-content section .quality-check-grid strong,
html[data-theme="dark"] main#main-content section .sector-fit-card strong,
html[data-theme="dark"] main#main-content section .keyword-card h3,
html[data-theme="dark"] main#main-content section .keyword-layer-grid article h3,
html[data-theme="dark"] main#main-content section .case-snapshot-grid article h3,
html[data-theme="dark"] main#main-content section .title-example-card h3,
html[data-theme="dark"] main#main-content section .keyword-intent-card h3,
html[data-theme="dark"] main#main-content section .amazon-task-card h3,
html[data-theme="dark"] main#main-content section .service-list-card h3,
html[data-theme="dark"] main#main-content section .process-item h3,
html[data-theme="dark"] main#main-content section .faq-item h3,
body.dark-mode main#main-content section .mini-process-list strong,
body.dark-mode main#main-content section .engagement-options strong,
body.dark-mode main#main-content section .quality-check-grid strong,
body.dark-mode main#main-content section .sector-fit-card strong,
body.dark-mode main#main-content section .keyword-card h3,
body.dark-mode main#main-content section .keyword-layer-grid article h3,
body.dark-mode main#main-content section .case-snapshot-grid article h3,
body.dark-mode main#main-content section .title-example-card h3,
body.dark-mode main#main-content section .keyword-intent-card h3,
body.dark-mode main#main-content section .amazon-task-card h3,
body.dark-mode main#main-content section .service-list-card h3,
body.dark-mode main#main-content section .process-item h3,
body.dark-mode main#main-content section .faq-item h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] main#main-content section .mini-process-list span,
html[data-theme="dark"] main#main-content section .engagement-options span,
html[data-theme="dark"] main#main-content section .quality-check-grid span,
html[data-theme="dark"] main#main-content section .sector-fit-card span,
html[data-theme="dark"] main#main-content section .keyword-card p,
html[data-theme="dark"] main#main-content section .keyword-layer-grid article p,
html[data-theme="dark"] main#main-content section .case-snapshot-grid article p,
html[data-theme="dark"] main#main-content section .title-example-card p,
html[data-theme="dark"] main#main-content section .keyword-intent-card p,
html[data-theme="dark"] main#main-content section .amazon-task-card p,
html[data-theme="dark"] main#main-content section .service-list-card p,
html[data-theme="dark"] main#main-content section .process-item p,
html[data-theme="dark"] main#main-content section .faq-item p,
body.dark-mode main#main-content section .mini-process-list span,
body.dark-mode main#main-content section .engagement-options span,
body.dark-mode main#main-content section .quality-check-grid span,
body.dark-mode main#main-content section .sector-fit-card span,
body.dark-mode main#main-content section .keyword-card p,
body.dark-mode main#main-content section .keyword-layer-grid article p,
body.dark-mode main#main-content section .case-snapshot-grid article p,
body.dark-mode main#main-content section .title-example-card p,
body.dark-mode main#main-content section .keyword-intent-card p,
body.dark-mode main#main-content section .amazon-task-card p,
body.dark-mode main#main-content section .service-list-card p,
body.dark-mode main#main-content section .process-item p,
body.dark-mode main#main-content section .faq-item p {
    color: #cfe0ff !important;
}

/* Contact / portfolio page boxes that use page-level white backgrounds */
html[data-theme="dark"] main#main-content .form-card,
html[data-theme="dark"] main#main-content .contact-card,
html[data-theme="dark"] main#main-content .contact-option,
html[data-theme="dark"] main#main-content .portfolio-card,
html[data-theme="dark"] main#main-content .case-card,
html[data-theme="dark"] main#main-content .price-card,
body.dark-mode main#main-content .form-card,
body.dark-mode main#main-content .contact-card,
body.dark-mode main#main-content .contact-option,
body.dark-mode main#main-content .portfolio-card,
body.dark-mode main#main-content .case-card,
body.dark-mode main#main-content .price-card {
    background: #111c2f !important;
    background-color: #111c2f !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #dbeafe !important;
}