/* =====================================================================
   DARK THEME  —  activated by html[data-theme="dark"]
   Scoped overrides only. The light theme files are never touched.
   Palette: deep brand navy, layered surfaces, soft hairline borders.
   ===================================================================== */

:root[data-theme="dark"] {
  /* shared tokens (used by header/nav via var()) */
  --bg: #0a0e1a;
  --fg: #e9eef7;
  --muted: #aebbd2;
  --accent: #5b9bf5;
  --accent-deep: #9fc2ff;

  /* dark-only tokens */
  --d-base: #0a0e1a;     /* page background            */
  --d-alt: #0c1322;      /* alternate section          */
  --d-surface: #121a2c;  /* card                       */
  --d-surface-2: #16203a;/* elevated card / row        */
  --d-glass: rgba(255, 255, 255, 0.05);
  --d-line: rgba(255, 255, 255, 0.08);
  --d-line-2: rgba(255, 255, 255, 0.14);
  --d-t1: #e9eef7;       /* primary text               */
  --d-t2: #b3c0d6;       /* secondary text             */
  --d-t3: #8593ad;       /* muted / labels             */
  --d-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  --d-shadow-sm: 0 16px 36px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

[data-theme="dark"] html { background: var(--d-base); }
[data-theme="dark"] body { background: var(--d-base); color: var(--d-t1); }

/* ===================== HEADER / NAV ===================== */
[data-theme="dark"] .site-header.scrolled {
  background: rgba(11, 16, 28, 0.66);
  border-bottom-color: var(--d-line);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* logo has dark text — give it a light backing in dark mode so it stays legible */
[data-theme="dark"] .nav-brand {
  background: rgba(255, 255, 255, 0.94);
  padding: 5px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .nav-drawer-logo {
  background: rgba(255, 255, 255, 0.94);
  padding: 5px 12px;
  border-radius: 10px;
}

/* theme toggle in dark mode: warm sun icon, glassy chip */
[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--d-line-2);
  color: #ffd27a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
/* dark mode → sun spins in, moon spins out */
[data-theme="dark"] .theme-toggle .ic-sun  { transform: rotate(0deg) scale(1); opacity: 1; }
[data-theme="dark"] .theme-toggle .ic-moon { transform: rotate(90deg) scale(0); opacity: 0; }

@media (max-width: 900px) {
  [data-theme="dark"] .nav-links {
    background: linear-gradient(180deg, #121a2c 0%, #0a0e1a 100%);
    border-right-color: var(--d-line);
    box-shadow: 22px 0 60px rgba(0, 0, 0, 0.7);
  }
  [data-theme="dark"] .nav-drawer-head { border-bottom-color: var(--d-line); }
  [data-theme="dark"] .nav-close {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--d-line-2);
    color: var(--d-t1);
  }
  [data-theme="dark"] .nav-close:hover { background: rgba(255, 255, 255, 0.14); }
  [data-theme="dark"] .dropdown a:hover { background: rgba(91, 155, 245, 0.16); }
}

/* ===================== HERO ===================== */
[data-theme="dark"] .hero { background: var(--d-base); }
[data-theme="dark"] .hero::after {
  background: linear-gradient(180deg, rgba(10, 14, 26, 0) 0%, var(--d-base) 90%);
}
/* softer top halo in dark mode so it doesn't read as a hard band */
[data-theme="dark"] .hero::before {
  background: radial-gradient(ellipse 62% 100% at 50% 0%,
    rgba(231, 238, 247, 0.42) 0%,
    rgba(231, 238, 247, 0.20) 44%,
    rgba(231, 238, 247, 0.08) 66%,
    rgba(231, 238, 247, 0) 82%);
}
/* settle the bright product photo into the dark page */
[data-theme="dark"] .hero-bg img { filter: brightness(0.84) contrast(1.03) saturate(1.02); }
/* make the dark-text tagline PNG show as light text on the dark hero floor */
[data-theme="dark"] .hero-tagline img { filter: brightness(0) invert(0.92); }

/* ===================== PLATFORM ===================== */
[data-theme="dark"] .platform { background: var(--d-base); }
[data-theme="dark"] .platform-title { color: var(--d-t1); }
[data-theme="dark"] .platform-sub { color: var(--d-t2); }
[data-theme="dark"] .pcard {
  background: var(--d-surface);
  border-color: var(--d-line);
  box-shadow: var(--d-shadow);
}
[data-theme="dark"] .pcard:hover { border-color: var(--d-line-2); }
[data-theme="dark"] .pcard-media { background: linear-gradient(160deg, #131c30, #0f1626); border-color: var(--d-line); }
[data-theme="dark"] .pcard-tag {
  background: rgba(18, 26, 44, 0.85);
  color: var(--accent-deep);
}

/* ===================== PRODUCTS ===================== */
/* (slides are full-bleed dark photos already — only the frame changes) */
[data-theme="dark"] .products { background: var(--d-base); }
[data-theme="dark"] .products-title { color: var(--d-t1); }
[data-theme="dark"] .products-sub { color: var(--d-t2); }
[data-theme="dark"] .pdot { background: rgba(255, 255, 255, 0.22); }
[data-theme="dark"] .pdot.active { background: var(--accent); }
[data-theme="dark"] .parrow {
  background: var(--d-surface-2);
  border-color: var(--d-line-2);
  color: var(--accent-deep);
  box-shadow: var(--d-shadow-sm);
}
[data-theme="dark"] .parrow:hover { background: var(--accent); color: #fff; }

/* ===================== AI COPILOT ===================== */
/* keep the branded blue, but deepen it and re-blend the seams into the dark page */
[data-theme="dark"] .copilot {
  background:
    linear-gradient(to bottom,
      #0a0e1a 0,
      rgba(10, 14, 26, 0.82) 28px,
      rgba(10, 14, 26, 0.5) 90px,
      rgba(10, 14, 26, 0.18) 160px,
      rgba(10, 14, 26, 0) 230px),
    linear-gradient(to top,
      #0a0e1a 0,
      rgba(10, 14, 26, 0.7) 70px,
      rgba(10, 14, 26, 0.32) 150px,
      rgba(10, 14, 26, 0) 230px),
    radial-gradient(120% 130% at 6% -10%, rgba(120, 180, 255, 0.4) 0%, rgba(120, 180, 255, 0) 42%),
    radial-gradient(90% 90% at 100% 110%, rgba(40, 60, 180, 0.5) 0%, rgba(40, 60, 180, 0) 55%),
    linear-gradient(150deg, #1d3f96 0%, #1a3479 52%, #1d2c63 100%);
}

/* ===================== WHAT AI UNLOCKS ===================== */
[data-theme="dark"] .ai-unlocks {
  background-color: #0b1120;
  background-blend-mode: overlay, normal;
}
[data-theme="dark"] .ai-unlocks::after {
  background: linear-gradient(to bottom, rgba(11, 17, 32, 0), var(--d-base));
}
[data-theme="dark"] .ai-title { color: var(--d-t1); }
[data-theme="dark"] .ai-sub { color: var(--d-t2); }
/* the colored sticky-note cards (c1..c5) stay light & vivid on purpose —
   they read as bright accents against the dark page. */

[data-theme="dark"] .why-title { color: var(--d-t1); }
[data-theme="dark"] .why-sub { color: var(--d-t2); }
[data-theme="dark"] .why-item {
  background: linear-gradient(180deg, #131c30 0%, #111a2c 100%);
  border: 1px solid var(--d-line);
}
[data-theme="dark"] .why-tx h4 { color: var(--d-t1); }
[data-theme="dark"] .why-tx p { color: var(--d-t2); }

/* ===================== INDUSTRIES ===================== */
[data-theme="dark"] .industries { background: var(--d-base); }
[data-theme="dark"] .ind-title { color: var(--d-t1); }
[data-theme="dark"] .ind-sub { color: var(--d-t2); }
[data-theme="dark"] .ind-card {
  background: var(--d-surface);
  box-shadow: var(--d-shadow);
}
/* darken the photo overlay + bottom fade so the light text stays readable */
[data-theme="dark"] .ind-overlay {
  background: linear-gradient(100deg,
    rgba(18, 26, 44, 0.97) 0%,
    rgba(18, 26, 44, 0.92) 36%,
    rgba(18, 26, 44, 0.45) 62%,
    rgba(18, 26, 44, 0.08) 100%);
}
[data-theme="dark"] .ind-card::after {
  background: linear-gradient(to top, #121a2c 0%, rgba(18, 26, 44, 0.85) 30%, rgba(18, 26, 44, 0) 100%);
}
[data-theme="dark"] .ind-card-title { color: var(--d-t1); }
[data-theme="dark"] .ind-card-desc { color: var(--d-t2); }
[data-theme="dark"] .ind-pill { color: var(--d-t2); }
[data-theme="dark"] .ind-pill::before {
  background: rgba(22, 32, 58, 0.85);
  border-color: var(--d-line-2);
}
[data-theme="dark"] .ind-cta {
  background: linear-gradient(120deg, rgba(91, 155, 245, 0.16), rgba(47, 107, 216, 0.12));
  border-color: rgba(91, 155, 245, 0.3);
}
[data-theme="dark"] .ind-cta-tx p { color: var(--d-t3); }
@media (max-width: 900px) {
  [data-theme="dark"] .ind-arrow {
    background: var(--d-surface-2);
    color: var(--accent-deep);
    box-shadow: var(--d-shadow-sm);
  }
  [data-theme="dark"] .ind-dot { background: rgba(255, 255, 255, 0.22); }
}

/* ===================== MORE WAYS TO CONNECT ===================== */
[data-theme="dark"] .connect { background: var(--d-base); }
[data-theme="dark"] .conn-heading { color: var(--d-t1); }
[data-theme="dark"] .conn-sub { color: var(--d-t2); }
[data-theme="dark"] .conn-card {
  background: var(--d-surface);
  box-shadow: var(--d-shadow);
}
[data-theme="dark"] .conn-title { color: var(--d-t1); }
[data-theme="dark"] .conn-desc { color: var(--d-t2); }
[data-theme="dark"] .conn-btn {
  background: var(--d-surface-2);
  color: var(--accent-deep);
}
[data-theme="dark"] .conn-btn:hover { background: linear-gradient(120deg, #4a90f0, #2f6bd8); color: #fff; }
@media (max-width: 900px) {
  [data-theme="dark"] .conn-arrow {
    background: var(--d-surface-2);
    color: var(--accent-deep);
    box-shadow: var(--d-shadow-sm);
  }
  [data-theme="dark"] .conn-dot { background: rgba(255, 255, 255, 0.22); }
}

/* ===================== TESTIMONIALS ===================== */
[data-theme="dark"] .reviews { background: var(--d-base); }
[data-theme="dark"] .rev-heading { color: var(--d-t1); }
[data-theme="dark"] .rev-card {
  background: linear-gradient(160deg, #141d31 0%, #101829 100%);
  border-color: var(--d-line-2);
  box-shadow: var(--d-shadow);
}
[data-theme="dark"] .rev-text { color: var(--d-t2); }
[data-theme="dark"] .rev-name { color: var(--d-t1); }
[data-theme="dark"] .rev-arrow {
  background: var(--d-surface-2);
  border-color: var(--d-line-2);
  color: var(--accent-deep);
  box-shadow: var(--d-shadow-sm);
}
[data-theme="dark"] .rev-arrow:hover { background: #3f7fe6; color: #fff; }
[data-theme="dark"] .rev-dot { background: rgba(255, 255, 255, 0.22); }
[data-theme="dark"] .rev-dot.active { background: var(--accent); }

/* ===================== CONTACT ===================== */
[data-theme="dark"] .contact { background: var(--d-base); }
[data-theme="dark"] .ct-title { color: var(--d-t1); }
[data-theme="dark"] .ct-sub { color: var(--d-t2); }
[data-theme="dark"] .ct-chip {
  background: var(--d-surface);
  box-shadow: var(--d-shadow-sm);
}
[data-theme="dark"] .ct-chip p { color: var(--d-t1); }
[data-theme="dark"] .ct-card {
  background: rgba(18, 26, 44, 0.55);
  border-color: var(--d-line);
  box-shadow: var(--d-shadow);
}
[data-theme="dark"] .ct-row {
  background: var(--d-surface-2);
  box-shadow: var(--d-shadow-sm);
}
[data-theme="dark"] .ct-label { color: var(--d-t3); }
[data-theme="dark"] .ct-val { color: var(--d-t1); }

/* ===================== FOOTER ===================== */
[data-theme="dark"] .site-footer { background: var(--d-base); }
/* keep the sky photo visible in dark mode, darken the veil for text contrast */
[data-theme="dark"] .site-footer::after {
  background: linear-gradient(180deg,
    rgba(6, 10, 20, 0.72) 0%,
    rgba(6, 10, 20, 0.58) 32%,
    rgba(6, 10, 20, 0.70) 100%);
}
[data-theme="dark"] .ft-card {
  background: none;
  border: none;
  box-shadow: none;
}
[data-theme="dark"] .ft-col {
  border: none;
  box-shadow: none;
  background: none;
}
/* brighter text + subtle shadow so everything reads clearly over the clouds */
[data-theme="dark"] .ft-tag { color: #ffffff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .ft-note { color: #d4ddee; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
[data-theme="dark"] .ft-app {
  background: var(--d-surface-2);
  border-color: var(--d-line);
  box-shadow: var(--d-shadow-sm);
}
[data-theme="dark"] .ft-app small { color: var(--d-t3); }
[data-theme="dark"] .ft-app strong { color: var(--d-t1); }
[data-theme="dark"] .ft-col h4 { color: #aeb9cf; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .ft-col a { color: #e7edf8; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
[data-theme="dark"] .ft-col a:hover { color: #8fc0ff; }
[data-theme="dark"] .ft-info { color: #e7edf8; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
[data-theme="dark"] .ft-info:hover { color: #8fc0ff; }
[data-theme="dark"] .ft-info svg { color: #7fb3ff; }
[data-theme="dark"] .ft-bottom { border-top-color: rgba(190, 205, 235, 0.22); }
[data-theme="dark"] .ft-bottom p { color: #c4cee0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }