/* ==========================================================
   intiAI DARK MODE — VISUAL FIXES
   ========================================================== */

html[data-theme="dark"] {
    --dark-bg: #0d0f16;
    --dark-surface: #151822;
    --dark-surface-2: #1b1f2b;
    --dark-border: rgba(255,255,255,.09);
    --dark-text: #f4f5fa;
    --dark-muted: #b7bdca;
    --dark-soft: #8f97a8;
    --dark-purple: #9b98ff;
}


/* ----------------------------------------------------------
   GENERAL BODY / SECTIONS
---------------------------------------------------------- */

html[data-theme="dark"] body {
    background: #0d0f16 !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] main,
html[data-theme="dark"] section {
    color: var(--dark-text);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #ffffff !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li {
    color: var(--dark-muted);
}


/* ----------------------------------------------------------
   WHITE / LIGHT CARDS
---------------------------------------------------------- */

html[data-theme="dark"] .card,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .learning-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .example-card,
html[data-theme="dark"] .problem-card,
html[data-theme="dark"] .solution-card,
html[data-theme="dark"] details {
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}


/* Catch containers with inline white backgrounds */

html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"] {
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}


/* Text inside cards */

html[data-theme="dark"] .card p,
html[data-theme="dark"] .guide-card p,
html[data-theme="dark"] .learning-card p,
html[data-theme="dark"] .feature-card p,
html[data-theme="dark"] .info-card p,
html[data-theme="dark"] .content-card p,
html[data-theme="dark"] .example-card p,
html[data-theme="dark"] .problem-card p,
html[data-theme="dark"] .solution-card p {
    color: var(--dark-muted) !important;
}


/* ----------------------------------------------------------
   LEARN MEGA MENU
---------------------------------------------------------- */

html[data-theme="dark"] .learn-menu,
html[data-theme="dark"] .learn-dropdown,
html[data-theme="dark"] .learn-panel,
html[data-theme="dark"] .learn-mega,
html[data-theme="dark"] .mega-menu,
html[data-theme="dark"] .mega-menu-panel {
    background: #181b25 !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.45) !important;
}

html[data-theme="dark"] .learn-menu h3,
html[data-theme="dark"] .learn-menu strong,
html[data-theme="dark"] .learn-menu .label,
html[data-theme="dark"] .learn-dropdown h3,
html[data-theme="dark"] .learn-dropdown strong {
    color: #9da4b4 !important;
}

html[data-theme="dark"] .learn-menu a,
html[data-theme="dark"] .learn-dropdown a,
html[data-theme="dark"] .learn-panel a,
html[data-theme="dark"] .mega-menu a {
    color: #aaa7ff !important;
}

html[data-theme="dark"] .learn-menu a:hover,
html[data-theme="dark"] .learn-dropdown a:hover,
html[data-theme="dark"] .learn-panel a:hover,
html[data-theme="dark"] .mega-menu a:hover {
    color: #ffffff !important;
}


/* ----------------------------------------------------------
   NAVIGATION
---------------------------------------------------------- */

html[data-theme="dark"] header,
html[data-theme="dark"] nav {
    background: rgba(13,15,22,.95) !important;
}

html[data-theme="dark"] nav a {
    color: #c9ced9 !important;
}

html[data-theme="dark"] nav a:hover {
    color: #ffffff !important;
}


/* Contact button remains button-like */

html[data-theme="dark"] nav .btn,
html[data-theme="dark"] nav .button,
html[data-theme="dark"] nav a[href="/contact/"] {
    color: #ffffff !important;
}


/* ----------------------------------------------------------
   MUTED TEXT
---------------------------------------------------------- */

html[data-theme="dark"] .muted,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .description,
html[data-theme="dark"] .meta {
    color: var(--dark-muted) !important;
}


/* ----------------------------------------------------------
   DIVIDERS / BORDERS
---------------------------------------------------------- */

html[data-theme="dark"] hr {
    border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] [class*="border"] {
    border-color: rgba(255,255,255,.10);
}


/* ----------------------------------------------------------
   FORM ELEMENTS
---------------------------------------------------------- */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #10131b !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.13) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #7f8797 !important;
}


/* ----------------------------------------------------------
   LINKS
---------------------------------------------------------- */

html[data-theme="dark"] main a:not(.btn):not(.button) {
    color: var(--dark-purple);
}


/* ----------------------------------------------------------
   DARK SECTIONS THAT WERE ALREADY GOOD
---------------------------------------------------------- */

html[data-theme="dark"] .dark,
html[data-theme="dark"] .dark-section {
    background: #0b0d12 !important;
}



/* ==========================================================
   intiAI DARK MODE — FINAL CONTRAST PASS
   ========================================================== */


/* ----------------------------------------------------------
   FORCE TEXT CONTENT TO REMAIN VISIBLE
---------------------------------------------------------- */

html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: #ffffff !important;
}

html[data-theme="dark"] em {
    color: #d7dbe5 !important;
}


/* ----------------------------------------------------------
   GENERIC CARD / GRID CHILD FIX
   Catches the remaining white cards
---------------------------------------------------------- */

html[data-theme="dark"] .grid > div,
html[data-theme="dark"] [class*="grid"] > div,
html[data-theme="dark"] [class*="cards"] > div,
html[data-theme="dark"] [class*="card-grid"] > div {
    background-color: #171a22 !important;
    color: #eef0f6 !important;
    border-color: rgba(255,255,255,.09) !important;
}


/* Text inside generic cards */

html[data-theme="dark"] .grid > div p,
html[data-theme="dark"] [class*="grid"] > div p,
html[data-theme="dark"] [class*="cards"] > div p,
html[data-theme="dark"] [class*="card-grid"] > div p {
    color: #b7bdca !important;
}

html[data-theme="dark"] .grid > div li,
html[data-theme="dark"] [class*="grid"] > div li,
html[data-theme="dark"] [class*="cards"] > div li,
html[data-theme="dark"] [class*="card-grid"] > div li {
    color: #b7bdca !important;
}

html[data-theme="dark"] .grid > div h3,
html[data-theme="dark"] [class*="grid"] > div h3,
html[data-theme="dark"] [class*="cards"] > div h3,
html[data-theme="dark"] [class*="card-grid"] > div h3 {
    color: #ffffff !important;
}


/* ----------------------------------------------------------
   BEFORE / AFTER BOXES
---------------------------------------------------------- */

html[data-theme="dark"] .before,
html[data-theme="dark"] .after,
html[data-theme="dark"] [class*="before"],
html[data-theme="dark"] [class*="after"] {
    background: #171a22 !important;
    border-color: rgba(255,255,255,.09) !important;
    color: #eef0f6 !important;
}

html[data-theme="dark"] .before li,
html[data-theme="dark"] .after li,
html[data-theme="dark"] [class*="before"] li,
html[data-theme="dark"] [class*="after"] li {
    color: #b7bdca !important;
}


/* ----------------------------------------------------------
   CONTENT BOXES WITH WHITE BACKGROUNDS
---------------------------------------------------------- */

html[data-theme="dark"] div[style*="background"],
html[data-theme="dark"] article[style*="background"] {
    border-color: rgba(255,255,255,.09);
}


/*
   Only convert obviously light inline backgrounds.
*/

html[data-theme="dark"] [style*="#fff"],
html[data-theme="dark"] [style*="#FFF"],
html[data-theme="dark"] [style*="#ffffff"],
html[data-theme="dark"] [style*="#FFFFFF"],
html[data-theme="dark"] [style*="rgb(255, 255, 255)"] {
    background-color: #171a22 !important;
    color: #eef0f6 !important;
}


/* ----------------------------------------------------------
   SECONDARY BUTTONS
---------------------------------------------------------- */

html[data-theme="dark"] a.btn:not(.btn-primary),
html[data-theme="dark"] a.button:not(.button-primary),
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .secondary-button {
    background: #1b1f2b !important;
    color: #aaa7ff !important;
    border-color: rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] a.btn:not(.btn-primary):hover,
html[data-theme="dark"] a.button:not(.button-primary):hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .secondary-button:hover {
    background: #222633 !important;
    color: #ffffff !important;
}


/* ----------------------------------------------------------
   CTA LINKS THAT LOOK LIKE BUTTONS
---------------------------------------------------------- */

html[data-theme="dark"] a[href="/contact/"]:not(nav a) {
    border-color: rgba(255,255,255,.12);
}


/* ----------------------------------------------------------
   LIST SEPARATORS IN DARK CARDS
---------------------------------------------------------- */

html[data-theme="dark"] .card hr,
html[data-theme="dark"] [class*="card"] hr,
html[data-theme="dark"] [class*="panel"] hr {
    border-color: rgba(255,255,255,.10) !important;
}


/* ----------------------------------------------------------
   LEARN MENU — FINAL DARK OVERRIDE
---------------------------------------------------------- */

html[data-theme="dark"] .learn-menu-panel,
html[data-theme="dark"] .learn-menu-content,
html[data-theme="dark"] .learn-menu .menu-panel,
html[data-theme="dark"] .learn-menu > div {
    background: #181b25 !important;
    color: #eef0f6 !important;
    border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .learn-menu span,
html[data-theme="dark"] .learn-menu small {
    color: #9299a9 !important;
}


/* ----------------------------------------------------------
   DARK MODE CARD HOVER — subtle only
---------------------------------------------------------- */

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] [class*="card"]:hover {
    border-color: rgba(155,152,255,.22) !important;
}


/* ----------------------------------------------------------
   DON'T DESTROY INTENTIONALLY DARK FEATURE SECTIONS
---------------------------------------------------------- */

html[data-theme="dark"] .dark,
html[data-theme="dark"] .dark-section {
    background-color: #0a0c11 !important;
}


/* ----------------------------------------------------------
   TEXT SELECTION — little intiAI touch
---------------------------------------------------------- */

html[data-theme="dark"] ::selection {
    background: #5b57ff;
    color: #ffffff;
}


/* ==========================================================
   intiAI DARK MODE — FINAL PAGE-SPECIFIC POLISH
   ========================================================== */

/* -------------------------------------------
   Generic white cards still surviving
------------------------------------------- */

html[data-theme="dark"] .wrap > .grid > div,
html[data-theme="dark"] .wrap > [class*="grid"] > div,
html[data-theme="dark"] .two-col > div,
html[data-theme="dark"] .three-col > div {
    background: #171a22 !important;
    color: #eef0f6 !important;
    border-color: rgba(255,255,255,.10) !important;
}

/* -------------------------------------------
   Card headings and body copy
------------------------------------------- */

html[data-theme="dark"] .wrap > .grid > div h3,
html[data-theme="dark"] .wrap > [class*="grid"] > div h3,
html[data-theme="dark"] .two-col > div h3,
html[data-theme="dark"] .three-col > div h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] .wrap > .grid > div p,
html[data-theme="dark"] .wrap > [class*="grid"] > div p,
html[data-theme="dark"] .two-col > div p,
html[data-theme="dark"] .three-col > div p,
html[data-theme="dark"] .two-col > div li,
html[data-theme="dark"] .three-col > div li {
    color: #c1c6d2 !important;
}

/* -------------------------------------------
   Before / After cards
------------------------------------------- */

html[data-theme="dark"] .compare-grid > div,
html[data-theme="dark"] .comparison-grid > div,
html[data-theme="dark"] .before-after > div {
    background: #171a22 !important;
    color: #eef0f6 !important;
    border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .compare-grid li,
html[data-theme="dark"] .comparison-grid li,
html[data-theme="dark"] .before-after li {
    color: #c1c6d2 !important;
}

/* -------------------------------------------
   Automation / example cards
------------------------------------------- */

html[data-theme="dark"] .examples-grid > div,
html[data-theme="dark"] .automation-grid > div,
html[data-theme="dark"] .use-cases > div {
    background: #171a22 !important;
    color: #eef0f6 !important;
    border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .examples-grid p,
html[data-theme="dark"] .automation-grid p,
html[data-theme="dark"] .use-cases p {
    color: #c1c6d2 !important;
}

/* -------------------------------------------
   Better card separation
------------------------------------------- */

html[data-theme="dark"] .card,
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] .compare-grid > div,
html[data-theme="dark"] .comparison-grid > div,
html[data-theme="dark"] .examples-grid > div,
html[data-theme="dark"] .automation-grid > div {
    box-shadow:
        0 14px 34px rgba(0,0,0,.20) !important;
}

/* -------------------------------------------
   Make normal body text slightly brighter
------------------------------------------- */

html[data-theme="dark"] p,
html[data-theme="dark"] li {
    color: #c7ccd7;
}

/* -------------------------------------------
   Muted explanatory text
------------------------------------------- */

html[data-theme="dark"] .muted,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .description,
html[data-theme="dark"] .meta {
    color: #aeb5c4 !important;
}

/* -------------------------------------------
   Consistent section backgrounds
------------------------------------------- */

html[data-theme="dark"] body,
html[data-theme="dark"] main {
    background: #0d0f16 !important;
}

html[data-theme="dark"] section {
    background-color: transparent;
}

html[data-theme="dark"] .dark,
html[data-theme="dark"] .dark-section {
    background: #0a0c11 !important;
}

/* -------------------------------------------
   Better secondary buttons
------------------------------------------- */

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] a.button:not(.primary),
html[data-theme="dark"] a.btn:not(.primary) {
    background: #1b1f2b !important;
    color: #aaa7ff !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* -------------------------------------------
   Purple accent text
------------------------------------------- */

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .kicker {
    color: #7f7bff !important;
}

/* -------------------------------------------
   Dividers inside dark cards
------------------------------------------- */

html[data-theme="dark"] hr,
html[data-theme="dark"] .divider {
    border-color: rgba(255,255,255,.10) !important;
}


/* ==========================================================
   intiAI DARK MODE — FINAL PAGE-SPECIFIC POLISH
   ========================================================== */

/* -------------------------------------------
   Generic white cards still surviving
------------------------------------------- */

html[data-theme="dark"] .wrap > .grid > div,
html[data-theme="dark"] .wrap > [class*="grid"] > div,
html[data-theme="dark"] .two-col > div,
html[data-theme="dark"] .three-col > div {
    background: #171a22 !important;
    color: #eef0f6 !important;
    border-color: rgba(255,255,255,.10) !important;
}

/* -------------------------------------------
   Card headings and body copy
------------------------------------------- */

html[data-theme="dark"] .wrap > .grid > div h3,
html[data-theme="dark"] .wrap > [class*="grid"] > div h3,
html[data-theme="dark"] .two-col > div h3,
html[data-theme="dark"] .three-col > div h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] .wrap > .grid > div p,
html[data-theme="dark"] .wrap > [class*="grid"] > div p,
html[data-theme="dark"] .two-col > div p,
html[data-theme="dark"] .three-col > div p,
html[data-theme="dark"] .two-col > div li,
html[data-theme="dark"] .three-col > div li {
    color: #c1c6d2 !important;
}

/* -------------------------------------------
   Before / After cards
------------------------------------------- */

html[data-theme="dark"] .compare-grid > div,
html[data-theme="dark"] .comparison-grid > div,
html[data-theme="dark"] .before-after > div {
    background: #171a22 !important;
    color: #eef0f6 !important;
    border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .compare-grid li,
html[data-theme="dark"] .comparison-grid li,
html[data-theme="dark"] .before-after li {
    color: #c1c6d2 !important;
}

/* -------------------------------------------
   Automation / example cards
------------------------------------------- */

html[data-theme="dark"] .examples-grid > div,
html[data-theme="dark"] .automation-grid > div,
html[data-theme="dark"] .use-cases > div {
    background: #171a22 !important;
    color: #eef0f6 !important;
    border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .examples-grid p,
html[data-theme="dark"] .automation-grid p,
html[data-theme="dark"] .use-cases p {
    color: #c1c6d2 !important;
}

/* -------------------------------------------
   Better card separation
------------------------------------------- */

html[data-theme="dark"] .card,
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] .compare-grid > div,
html[data-theme="dark"] .comparison-grid > div,
html[data-theme="dark"] .examples-grid > div,
html[data-theme="dark"] .automation-grid > div {
    box-shadow:
        0 14px 34px rgba(0,0,0,.20) !important;
}

/* -------------------------------------------
   Make normal body text slightly brighter
------------------------------------------- */

html[data-theme="dark"] p,
html[data-theme="dark"] li {
    color: #c7ccd7;
}

/* -------------------------------------------
   Muted explanatory text
------------------------------------------- */

html[data-theme="dark"] .muted,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .description,
html[data-theme="dark"] .meta {
    color: #aeb5c4 !important;
}

/* -------------------------------------------
   Consistent section backgrounds
------------------------------------------- */

html[data-theme="dark"] body,
html[data-theme="dark"] main {
    background: #0d0f16 !important;
}

html[data-theme="dark"] section {
    background-color: transparent;
}

html[data-theme="dark"] .dark,
html[data-theme="dark"] .dark-section {
    background: #0a0c11 !important;
}

/* -------------------------------------------
   Better secondary buttons
------------------------------------------- */

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] a.button:not(.primary),
html[data-theme="dark"] a.btn:not(.primary) {
    background: #1b1f2b !important;
    color: #aaa7ff !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* -------------------------------------------
   Purple accent text
------------------------------------------- */

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .kicker {
    color: #7f7bff !important;
}

/* -------------------------------------------
   Dividers inside dark cards
------------------------------------------- */

html[data-theme="dark"] hr,
html[data-theme="dark"] .divider {
    border-color: rgba(255,255,255,.10) !important;
}