/* Theme overrides keep the original graphite palette as the default. */
:root {
  color-scheme: dark;
  --header-bg: rgba(20, 22, 25, .84);
  --header-scrolled-bg: rgba(20, 22, 25, .96);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EEF1F5;
  --bg-2: #E5EAF1;
  --surface: #FAFBFC;
  --surface-2: #E1E7EF;
  --border: #D2DBE7;
  --border-2: #B9C6D7;
  --text: #182235;
  --dim: #38465A;
  --mute: #49576B;
  --accent: #B94C09;
  --accent-2: #CB5710;
  --accent-soft: rgba(185, 76, 9, .07);
  --accent-line: rgba(185, 76, 9, .3);
  --it: #206FBC;
  --it-soft: rgba(32, 111, 188, .07);
  --it-line: rgba(32, 111, 188, .3);
  --header-bg: rgba(238, 241, 245, .88);
  --header-scrolled-bg: rgba(238, 241, 245, .97);
}

.site-header { background: var(--header-bg); }
.site-header.is-scrolled { background: var(--header-scrolled-bg); }
.nav-inner { gap: 14px; }
.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.theme-toggle:hover { color: var(--it); border-color: var(--it); background: var(--surface-2); }
.theme-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon, [data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }

[data-theme="light"] .ai-neural { --neural-blue: var(--it); --neural-warm: var(--accent); }
[data-theme="light"] #brain-spectrum stop:nth-child(-n+2),
[data-theme="light"] .home-scene-wires #flow stop:nth-child(-n+2) { stop-color: var(--it); }
[data-theme="light"] #brain-spectrum stop:nth-child(n+3),
[data-theme="light"] .home-scene-wires #flow stop:last-child { stop-color: var(--accent); }
[data-theme="light"] .brain-micro-edges { stroke-width: .8; opacity: .62; }
[data-theme="light"] .brain-micro-points { opacity: .95; }
[data-theme="light"] .brain-folds { stroke-width: 1.8; opacity: .9; }
[data-theme="light"] .brain-outline { stroke-width: 2.1; }
[data-theme="light"] .brain-synapses { stroke-width: 1.15; opacity: .8; }
[data-theme="light"] .brain-selected-route { stroke-width: 1.7; opacity: .85; }
[data-theme="light"] .home-data-fiber { stroke-width: 1.7; opacity: .9; }
[data-theme="light"] .home-neural-route { stroke-width: 1.7; opacity: .85; }
[data-theme="light"] .it-infrastructure { --infra-blue: var(--it); --infra-warm: var(--accent); }
[data-theme="light"] .neural-card,
[data-theme="light"] .infra-card { background: linear-gradient(130deg, var(--surface), var(--bg-2)); }
[data-theme="light"] .home-journey a { background: var(--surface); }
[data-theme="light"] .home-connected .industry-strip { background: var(--surface-2); }
[data-theme="light"] .home-pin > span,
[data-theme="light"] .neuron-pin > span { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px currentColor; }
[data-theme="light"] .skip,
[data-theme="light"] .btn-primary { color: #FFFFFF; }

/* The new navigation item and theme control need the compact menu on tablets. */
@media (max-width: 1180px) {
  .js .nav-toggle { display: flex; order: 2; margin-left: 0; }
  .theme-toggle { order: 1; margin-left: auto; }
  .btn-nav-cta { display: none; }
  .js .site-nav {
    position: absolute; top: 80px; left: 0; right: 0;
    flex-direction: column; gap: 4px; margin: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--border);
    padding: 16px var(--pad);
    visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
  }
  .js .site-nav.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  html:not(.js) .nav-inner { height: auto; min-height: 80px; flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) .site-nav { flex-wrap: wrap; margin-left: 0; }
  .nav-link { font-size: 16px; padding: 13px 14px; }
  .nav-link::after { display: none; }
}

@media (max-width: 420px) {
  .nav-inner { gap: 10px; }
  .logo { font-size: 18px; }
  .logo-domain { font-size: 14px; }
  .brand-mark { width: 36px; height: 36px; }
}

/* Use the site theme explicitly; embedded SVG media queries vary on mobile. */
.footer-logo .footer-logo-dark { display: block; }
.footer-logo .footer-logo-light { display: none; }
[data-theme="light"] .footer-logo .footer-logo-dark { display: none; }
[data-theme="light"] .footer-logo .footer-logo-light { display: block; }