.elementor-23 .elementor-element.elementor-element-b381c26{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS *//* ============================================================
   THEME OVERRIDE SYSTEM — Light / Dark Mode
   Overrides inline styles, third-party CSS, and browser defaults
   ============================================================ */

/* ── 1. CSS Custom Properties (Token System) ─────────────── */
:root {
  /* Light Mode Defaults */
  --bg-primary:       #ffffff;
  --bg-secondary:     #f4f4f5;
  --bg-surface:       #e8e8eb;
  --text-primary:     #0f0f10;
  --text-secondary:   #4b4b52;
  --text-muted:       #8f8f99;
  --border-color:     #d1d1d8;
  --accent:           #2563eb;
  --accent-hover:     #1d4ed8;
  --shadow:           0 2px 12px rgba(0, 0, 0, 0.08);
  --overlay:          rgba(255, 255, 255, 0.85);
  --scrollbar-thumb:  #c4c4cc;
  --scrollbar-track:  #f0f0f3;

  color-scheme: light;
}

/* ── 2. Dark Mode via [data-theme] attribute ─────────────── */
[data-theme="dark"] {
  --bg-primary:       #0d0d0f;
  --bg-secondary:     #17171a;
  --bg-surface:       #1f1f24;
  --text-primary:     #f1f1f3;
  --text-secondary:   #a8a8b3;
  --text-muted:       #5a5a66;
  --border-color:     #2e2e36;
  --accent:           #3b82f6;
  --accent-hover:     #60a5fa;
  --shadow:           0 2px 16px rgba(0, 0, 0, 0.45);
  --overlay:          rgba(13, 13, 15, 0.85);
  --scrollbar-thumb:  #3a3a44;
  --scrollbar-track:  #17171a;

  color-scheme: dark;
}

/* ── 3. OS-Level Preference Fallback (no JS needed) ─────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:       #0d0d0f;
    --bg-secondary:     #17171a;
    --bg-surface:       #1f1f24;
    --text-primary:     #f1f1f3;
    --text-secondary:   #a8a8b3;
    --text-muted:       #5a5a66;
    --border-color:     #2e2e36;
    --accent:           #3b82f6;
    --accent-hover:     #60a5fa;
    --shadow:           0 2px 16px rgba(0, 0, 0, 0.45);
    --overlay:          rgba(13, 13, 15, 0.85);
    --scrollbar-thumb:  #3a3a44;
    --scrollbar-track:  #17171a;
    color-scheme: dark;
  }
}

/* ── 4. Nuclear Override Layer ───────────────────────────── */
/*  Uses :where() to stay low-specificity where possible,    */
/*  but applies !important only where inline styles fight.   */

html,
html body,
html body * {
  /* Force color inheritance from token system */
  color: var(--text-primary);
  background-color: transparent; /* let containers set bg */
  border-color: var(--border-color);
  accent-color: var(--accent);
}

/* Root canvas — this is the one that needs hard bg */
html,
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* ── 5. Common Element Overrides ─────────────────────────── */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

/* Paragraphs, spans, labels, li */
p, span, li, label, td, th, caption, figcaption, cite, q, blockquote {
  color: var(--text-secondary) !important;
}

/* Muted / helper text */
small, .muted, [class*="muted"], [class*="helper"], [class*="caption"] {
  color: var(--text-muted) !important;
}

/* Links */
a {
  color: var(--accent) !important;
}
a:hover, a:focus {
  color: var(--accent-hover) !important;
}

/* ── 6. Surfaces & Cards ─────────────────────────────────── */

/* Card / panel / modal surface */
.card, [class*="card"],
.panel, [class*="panel"],
.modal, [class*="modal"],
aside, [role="complementary"],
nav, [role="navigation"],
header, [role="banner"],
footer, [role="contentinfo"],
section, article, main {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Inner surfaces */
.surface, [class*="surface"],
.container, [class*="container"],
.wrapper, [class*="wrapper"] {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

/* ── 7. Form Elements ────────────────────────────────────── */
input, textarea, select, option {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  caret-color: var(--accent);
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

input:focus, textarea:focus, select:focus {
  outline-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Buttons */
button, [role="button"], [type="button"], [type="submit"], [type="reset"] {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Primary / CTA buttons — only override if using a .btn-primary pattern */
.btn-primary, [class*="btn-primary"], [class*="button-primary"] {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

/* ── 8. Tables ───────────────────────────────────────────── */
table {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

thead, th {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

tbody tr:nth-child(even) {
  background-color: var(--bg-secondary) !important;
}

tbody tr:nth-child(odd) {
  background-color: var(--bg-primary) !important;
}

/* ── 9. Code & Pre blocks ────────────────────────────────── */
code, pre, kbd, samp {
  background-color: var(--bg-surface) !important;
  color: var(--accent) !important;
  border-color: var(--border-color) !important;
}

/* ── 10. Dividers & Borders ──────────────────────────────── */
hr, [role="separator"] {
  border-color: var(--border-color) !important;
  background-color: var(--border-color) !important;
}

/* ── 11. Scrollbars (Webkit) ─────────────────────────────── */
* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 4px;
}

/* ── 12. Selection ───────────────────────────────────────── */
::selection {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}

/* ── 13. SVG Icons ───────────────────────────────────────── */
svg[class*="icon"], svg[role="img"] {
  fill: currentColor;
  color: var(--text-secondary) !important;
}

/* ── 14. Images & Media (optional dimming in dark mode) ─── */
[data-theme="dark"] img,
[data-theme="dark"] video {
  filter: brightness(0.92) contrast(1.02);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img,
  :root:not([data-theme="light"]) video {
    filter: brightness(0.92) contrast(1.02);
  }
}

/* ── 15. Smooth Transition (optional — remove if jarring) ── */
*,
*::before,
*::after {
  transition:
    background-color 0.22s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

/* ─────────────────────────────────────────────────────────── */
/* JS TOGGLE SNIPPET (add to your script):

   const toggle = document.getElementById('theme-toggle');
   toggle.addEventListener('click', () => {
     const html = document.documentElement;
     const isDark = html.getAttribute('data-theme') === 'dark';
     html.setAttribute('data-theme', isDark ? 'light' : 'dark');
     localStorage.setItem('theme', isDark ? 'light' : 'dark');
   });

   // On page load — restore saved preference:
   const saved = localStorage.getItem('theme');
   if (saved) document.documentElement.setAttribute('data-theme', saved);

─────────────────────────────────────────────────────────── *//* End custom CSS */