:root,
html.theme-dark {
  color-scheme: dark;
  --accent2: #0099ff;
  --accent-2: #0099ff;
  --accent3: #f59e0b;
  --accent-3: #f59e0b;
  --post: #a78bfa;
  --theme-primary: var(--accent, #00ffb2);
  --theme-secondary: var(--accent-2, var(--accent2, #0099ff));
  --theme-accent: var(--accent-3, var(--accent3, #f59e0b));
  --theme-glow: color-mix(in srgb, var(--theme-primary) 28%, transparent);
  --theme-border: color-mix(in srgb, var(--theme-primary) 24%, var(--border));
  --theme-bg: var(--page-bg, var(--bg));
  --theme-text: var(--text);
  --muted: #8b94a5;
  --page-bg:
    radial-gradient(circle at top left, rgba(0, 255, 178, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(0, 153, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #090d12 0%, #06080b 55%, #040608 100%);
  --nav-bg: rgba(6, 8, 11, 0.68);
  --nav-bg-scrolled: rgba(6, 8, 11, 0.78);
  --panel-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--surface);
  --card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
    rgba(14, 18, 24, 0.78);
  --card-bg-flat: rgba(255, 255, 255, 0.025);
  --card-hover-bg: var(--surface2);
  --field-bg: rgba(255, 255, 255, 0.035);
  --button-on-accent: #04110e;
  --button-bg: linear-gradient(135deg, var(--theme-primary) 0%, color-mix(in srgb, var(--theme-secondary) 72%, var(--theme-primary)) 100%);
  --button-shadow: 0 18px 42px color-mix(in srgb, var(--theme-primary) 22%, transparent);
  --soft-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
  --hover-shadow: 0 28px 68px rgba(0, 0, 0, 0.38);
  --hero-title-stroke: rgba(255, 255, 255, 0.2);
  --hero-scrim:
    linear-gradient(90deg, rgba(4, 7, 10, 0.82) 0%, rgba(4, 7, 10, 0.5) 38%, rgba(4, 7, 10, 0.28) 70%, rgba(4, 7, 10, 0.58) 100%),
    linear-gradient(180deg, rgba(4, 7, 10, 0.1), rgba(4, 7, 10, 0.52));
  --hero-depth-fade: linear-gradient(180deg, transparent 0%, rgba(4, 7, 10, 0.36) 100%);
  --hero-canvas-opacity: 0.92;
  --hero-grid-opacity: 0.12;
  --hero-wire-opacity: 0.2;
  --hero-particle-opacity: 0.86;
  --home-hero-canvas-opacity: 1;
  --home-hero-particle-opacity: 0.55;
  --home-hero-grid-opacity: 0.06;
  --home-hero-wire-opacity: 0.25;
  --building-grid-opacity: 0.05;
  --building-floor-opacity-scale: 0.12;
  --contact-particle-opacity: 0.6;
  --cursor-blend-mode: screen;
}

body.accent-amber {
  --accent: #ffb454;
  --accent2: #ff7a59;
  --accent-2: #ff7a59;
  --accent3: #ffd27a;
  --accent-3: #ffd27a;
  --hero-grid: #ffb454;
  --hero-glow: #ff7a59;
  --hero-particle-a: #ffb454;
  --hero-particle-b: #ff7a59;
  --hero-particle-c: #ffd27a;
  --hero-orb-a: rgba(255, 180, 84, 0.16);
  --hero-orb-b: rgba(255, 122, 89, 0.11);
  --cursor-color: #ffb454;
  --cursor-ring: rgba(255, 180, 84, 0.48);
  --cursor-glow: rgba(255, 151, 72, 0.36);
  --page-bg:
    radial-gradient(circle at 18% 0%, rgba(255, 180, 84, 0.14), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(255, 122, 89, 0.08), transparent 24%),
    linear-gradient(180deg, #120b06 0%, #06080b 58%, #040608 100%);
}

body.accent-blue {
  --accent: #7a8cff;
  --accent2: #69e5ff;
  --accent-2: #69e5ff;
  --accent3: #b7c1ff;
  --accent-3: #b7c1ff;
  --hero-grid: #7a8cff;
  --hero-glow: #69e5ff;
  --hero-particle-a: #7a8cff;
  --hero-particle-b: #69e5ff;
  --hero-particle-c: #b7c1ff;
  --hero-orb-a: rgba(122, 140, 255, 0.16);
  --hero-orb-b: rgba(105, 229, 255, 0.1);
  --cursor-color: #8b9aff;
  --cursor-ring: rgba(122, 140, 255, 0.5);
  --cursor-glow: rgba(105, 229, 255, 0.32);
  --page-bg:
    radial-gradient(circle at 15% 0%, rgba(122, 140, 255, 0.15), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(105, 229, 255, 0.08), transparent 24%),
    linear-gradient(180deg, #070815 0%, #06080b 58%, #040608 100%);
}

body.accent-pipeline {
  --accent: #38d5ff;
  --accent2: #18f0d5;
  --accent-2: #18f0d5;
  --accent3: #7dd3fc;
  --accent-3: #7dd3fc;
  --hero-grid: #38d5ff;
  --hero-glow: #18f0d5;
  --hero-particle-a: #38d5ff;
  --hero-particle-b: #18f0d5;
  --hero-particle-c: #7dd3fc;
  --hero-orb-a: rgba(56, 213, 255, 0.16);
  --hero-orb-b: rgba(24, 240, 213, 0.1);
  --cursor-color: #38d5ff;
  --cursor-ring: rgba(56, 213, 255, 0.48);
  --cursor-glow: rgba(24, 240, 213, 0.3);
  --page-bg:
    radial-gradient(circle at 18% 0%, rgba(56, 213, 255, 0.14), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(24, 240, 213, 0.08), transparent 22%),
    linear-gradient(180deg, #060a0f 0%, #06080b 58%, #040608 100%);
}

body.accent-academy {
  --accent: #c8ff4d;
  --accent2: #7dffa8;
  --accent-2: #7dffa8;
  --accent3: #f7ff9c;
  --accent-3: #f7ff9c;
  --hero-grid: #c8ff4d;
  --hero-glow: #7dffa8;
  --hero-particle-a: #c8ff4d;
  --hero-particle-b: #7dffa8;
  --hero-particle-c: #f7ff9c;
  --hero-orb-a: rgba(200, 255, 77, 0.15);
  --hero-orb-b: rgba(125, 255, 168, 0.1);
  --cursor-color: #c8ff4d;
  --cursor-ring: rgba(200, 255, 77, 0.5);
  --cursor-glow: rgba(125, 255, 168, 0.3);
  --page-bg:
    radial-gradient(circle at 14% 4%, rgba(200, 255, 77, 0.14), transparent 26%),
    radial-gradient(circle at 86% 12%, rgba(125, 255, 168, 0.08), transparent 24%),
    linear-gradient(180deg, #080b07 0%, #06080b 58%, #040608 100%);
}

html.theme-light {
  color-scheme: light;
  --bg: #f7f9fc;
  --surface: rgba(255, 255, 255, 0.86);
  --surface2: #edf3f8;
  --surface-strong: rgba(255, 255, 255, 0.96);
  --border: rgba(18, 31, 47, 0.12);
  --text: #111827;
  --muted: #5f6b7a;
  --accent: #008f6a;
  --accent2: #006faa;
  --accent-2: #006faa;
  --accent3: #a85f00;
  --accent-3: #a85f00;
  --post: #6650c9;
  --theme-primary: var(--accent, #008f6a);
  --theme-secondary: var(--accent-2, var(--accent2, #006faa));
  --theme-accent: var(--accent-3, var(--accent3, #a85f00));
  --theme-glow: color-mix(in srgb, var(--theme-primary) 18%, transparent);
  --theme-border: color-mix(in srgb, var(--theme-primary) 24%, var(--border));
  --theme-bg: var(--page-bg, var(--bg));
  --theme-text: var(--text);
  --shadow: 0 24px 68px rgba(18, 31, 47, 0.12);
  --page-bg:
    radial-gradient(circle at 12% -8%, rgba(0, 143, 106, 0.11), transparent 28%),
    radial-gradient(circle at 90% 6%, rgba(0, 111, 170, 0.1), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 48%, #eef3f8 100%);
  --nav-bg: rgba(255, 255, 255, 0.78);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.9);
  --panel-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 251, 253, 0.78)),
    var(--surface);
  --card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 248, 252, 0.82)),
    rgba(255, 255, 255, 0.86);
  --card-bg-flat: rgba(255, 255, 255, 0.74);
  --card-hover-bg: #f5f8fb;
  --field-bg: rgba(255, 255, 255, 0.82);
  --button-on-accent: #ffffff;
  --button-bg: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 92%, #03110c) 0%, color-mix(in srgb, var(--theme-primary) 68%, var(--theme-secondary)) 100%);
  --button-shadow: 0 16px 34px color-mix(in srgb, var(--theme-primary) 22%, transparent);
  --soft-shadow: 0 24px 70px rgba(18, 31, 47, 0.12);
  --hover-shadow: 0 24px 54px rgba(18, 31, 47, 0.14);
  --hero-title-stroke: rgba(17, 24, 39, 0.24);
  --hero-grid: #008f6a;
  --hero-glow: #007a5b;
  --hero-particle-a: #007a5b;
  --hero-particle-b: #006faa;
  --hero-particle-c: #6650c9;
  --hero-orb-a: rgba(0, 143, 106, 0.12);
  --hero-orb-b: rgba(0, 111, 170, 0.1);
  --hero-scrim:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.62) 38%, rgba(255, 255, 255, 0.34) 70%, rgba(255, 255, 255, 0.76) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(244, 248, 252, 0.68));
  --hero-depth-fade: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.78) 100%);
  --hero-canvas-opacity: 0.54;
  --hero-grid-opacity: 0.14;
  --hero-wire-opacity: 0.17;
  --hero-particle-opacity: 0.44;
  --home-hero-canvas-opacity: 0.68;
  --home-hero-particle-opacity: 0.34;
  --home-hero-grid-opacity: 0.14;
  --home-hero-wire-opacity: 0.18;
  --building-grid-opacity: 0.13;
  --building-floor-opacity-scale: 0.18;
  --contact-particle-opacity: 0.34;
  --cursor-color: #007a5b;
  --cursor-ring: rgba(0, 122, 91, 0.38);
  --cursor-glow: rgba(0, 122, 91, 0.18);
  --cursor-blend-mode: multiply;
}

html.theme-light body.accent-pipeline {
  --accent: #007fa8;
  --accent2: #007f7a;
  --accent-2: #007f7a;
  --accent3: #3178bc;
  --accent-3: #3178bc;
  --hero-grid: #007fa8;
  --hero-glow: #007f7a;
  --hero-particle-a: #007fa8;
  --hero-particle-b: #007f7a;
  --hero-particle-c: #3178bc;
  --hero-orb-a: rgba(0, 127, 168, 0.13);
  --hero-orb-b: rgba(0, 127, 122, 0.1);
  --cursor-color: #007fa8;
  --cursor-ring: rgba(0, 127, 168, 0.38);
  --page-bg:
    radial-gradient(circle at 18% -6%, rgba(0, 127, 168, 0.13), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(0, 127, 122, 0.09), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f6fbfd 48%, #edf6f8 100%);
}

html.theme-light body.accent-academy {
  --accent: #617a00;
  --accent2: #008456;
  --accent-2: #008456;
  --accent3: #917000;
  --accent-3: #917000;
  --hero-grid: #617a00;
  --hero-glow: #008456;
  --hero-particle-a: #617a00;
  --hero-particle-b: #008456;
  --hero-particle-c: #917000;
  --hero-orb-a: rgba(97, 122, 0, 0.13);
  --hero-orb-b: rgba(0, 132, 86, 0.1);
  --cursor-color: #617a00;
  --cursor-ring: rgba(97, 122, 0, 0.4);
  --page-bg:
    radial-gradient(circle at 14% -4%, rgba(97, 122, 0, 0.13), transparent 27%),
    radial-gradient(circle at 86% 12%, rgba(0, 132, 86, 0.09), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fbfcf4 48%, #f0f5e6 100%);
}

html.theme-light body.accent-blue {
  --accent: #4e5bd4;
  --accent2: #007d9e;
  --accent-2: #007d9e;
  --accent3: #5967b8;
  --accent-3: #5967b8;
  --hero-grid: #4e5bd4;
  --hero-glow: #007d9e;
  --hero-particle-a: #4e5bd4;
  --hero-particle-b: #007d9e;
  --hero-particle-c: #5967b8;
  --hero-orb-a: rgba(78, 91, 212, 0.13);
  --hero-orb-b: rgba(0, 125, 158, 0.1);
  --cursor-color: #4e5bd4;
  --cursor-ring: rgba(78, 91, 212, 0.38);
  --page-bg:
    radial-gradient(circle at 15% -4%, rgba(78, 91, 212, 0.13), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(0, 125, 158, 0.09), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8f9ff 48%, #eef2fb 100%);
}

html.theme-light body.accent-amber {
  --accent: #b45f00;
  --accent2: #b64a2e;
  --accent-2: #b64a2e;
  --accent3: #9c6a00;
  --accent-3: #9c6a00;
  --hero-grid: #b45f00;
  --hero-glow: #b64a2e;
  --hero-particle-a: #b45f00;
  --hero-particle-b: #b64a2e;
  --hero-particle-c: #9c6a00;
  --hero-orb-a: rgba(180, 95, 0, 0.13);
  --hero-orb-b: rgba(182, 74, 46, 0.09);
  --cursor-color: #b45f00;
  --cursor-ring: rgba(180, 95, 0, 0.4);
  --page-bg:
    radial-gradient(circle at 18% -4%, rgba(180, 95, 0, 0.13), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(182, 74, 46, 0.09), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fff9f4 48%, #f8f0e8 100%);
}

html.theme-light body.accent-silver {
  --accent: #4b5d6d;
  --accent2: #008f6a;
  --accent-2: #008f6a;
  --hero-grid: #4b5d6d;
  --hero-glow: #008f6a;
  --hero-particle-a: #4b5d6d;
  --hero-particle-b: #008f6a;
  --hero-particle-c: #688095;
}

html.theme-light,
html.theme-light body {
  background: var(--page-bg);
}

body {
  --theme-primary: var(--accent, #00ffb2);
  --theme-secondary: var(--accent-2, var(--accent2, #0099ff));
  --theme-accent: var(--accent-3, var(--accent3, #f59e0b));
  --theme-glow: color-mix(in srgb, var(--theme-primary) 28%, transparent);
  --theme-border: color-mix(in srgb, var(--theme-primary) 24%, var(--border));
  --theme-bg: var(--page-bg, var(--bg));
  --theme-text: var(--text);
  --button-bg: linear-gradient(135deg, var(--theme-primary) 0%, color-mix(in srgb, var(--theme-secondary) 72%, var(--theme-primary)) 100%);
  --button-shadow: 0 18px 42px color-mix(in srgb, var(--theme-primary) 22%, transparent);
  background: var(--page-bg, var(--bg));
  transition: background-color 0.28s ease, color 0.28s ease;
}

html.theme-light body {
  --theme-glow: color-mix(in srgb, var(--theme-primary) 18%, transparent);
  --button-bg: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 92%, #03110c) 0%, color-mix(in srgb, var(--theme-primary) 68%, var(--theme-secondary)) 100%);
  --button-shadow: 0 16px 34px color-mix(in srgb, var(--theme-primary) 22%, transparent);
}

html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.28s ease,
    background 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s ease,
    opacity 0.28s ease !important;
}

html.theme-light body::before {
  background-image:
    linear-gradient(rgba(18, 31, 47, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 31, 47, 0.055) 1px, transparent 1px);
  opacity: 0.28;
}

html.theme-light body::after {
  border-color: color-mix(in srgb, var(--theme-primary) 18%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 10%, transparent), color-mix(in srgb, var(--theme-secondary) 8%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(18, 31, 47, 0.055) 55px),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(18, 31, 47, 0.04) 55px);
  opacity: 0.34;
}

#cursor {
  mix-blend-mode: var(--cursor-blend-mode, screen);
  box-shadow: 0 0 18px var(--cursor-glow, color-mix(in srgb, var(--accent) 48%, transparent));
}

#cursor-ring {
  border-color: var(--cursor-ring, color-mix(in srgb, var(--accent) 46%, transparent));
  box-shadow: 0 0 34px var(--cursor-glow, color-mix(in srgb, var(--accent) 24%, transparent));
}

.site-nav,
nav#nav {
  background: var(--nav-bg);
}

nav#nav.scrolled {
  background: var(--nav-bg-scrolled);
}

html.theme-light .site-nav,
html.theme-light nav#nav {
  box-shadow: 0 10px 34px rgba(18, 31, 47, 0.06);
}

html.theme-light .nav-links a {
  color: var(--muted);
}

html.theme-light .nav-links a:hover,
html.theme-light .nav-links a:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
  background: rgba(255, 255, 255, 0.62);
}

html.theme-light .nav-links a.active {
  color: var(--theme-primary);
  border-color: color-mix(in srgb, var(--theme-primary) 24%, transparent);
  background: color-mix(in srgb, var(--theme-primary) 9%, white);
}

.theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--field-bg);
  color: var(--text);
  box-shadow: none;
  cursor: none;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--theme-primary) 34%, var(--border));
  background: color-mix(in srgb, var(--theme-primary) 8%, var(--field-bg));
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary) 14%, transparent);
}

.theme-toggle svg {
  position: absolute;
  width: 19px;
  height: 19px;
  stroke: currentColor;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-toggle .theme-toggle-sun {
  opacity: 0;
  transform: rotate(-25deg) scale(0.72);
}

.theme-toggle .theme-toggle-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html.theme-light .theme-toggle .theme-toggle-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html.theme-light .theme-toggle .theme-toggle-moon {
  opacity: 0;
  transform: rotate(25deg) scale(0.72);
}

.nav-cta,
.btn-primary,
.contact-copy-button {
  background: var(--button-bg);
  color: var(--button-on-accent);
  box-shadow: var(--button-shadow);
}

.nav-cta:hover,
.btn-primary:hover,
.contact-copy-button:hover,
.contact-copy-button:focus-visible {
  box-shadow: var(--button-shadow);
}

html.theme-light .btn-ghost,
html.theme-light .btn-secondary,
html.theme-light .contact-mail-link {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.72);
}

html.theme-light .btn-ghost:hover,
html.theme-light .btn-secondary:hover,
html.theme-light .contact-mail-link:hover,
html.theme-light .contact-mail-link:focus-visible {
  border-color: color-mix(in srgb, var(--theme-primary) 28%, var(--border));
  background: color-mix(in srgb, var(--theme-primary) 6%, white);
}

.hero-badge,
.status-badge {
  border-color: color-mix(in srgb, var(--theme-primary) 25%, transparent);
  background: color-mix(in srgb, var(--theme-primary) 8%, transparent);
  color: var(--theme-primary);
}

.hero-badge-dot,
.status-badge::before,
.section-kicker::before {
  background: currentColor;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--theme-primary) 10%, transparent);
}

html.theme-light .hero {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--theme-primary) 8%, transparent), transparent 34%),
    radial-gradient(circle at 76% 26%, color-mix(in srgb, var(--theme-secondary) 8%, transparent), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(247, 249, 252, 0.9));
}

#hero-canvas {
  opacity: var(--home-hero-canvas-opacity, 1);
}

html.theme-light .hero h1 .line2 {
  -webkit-text-stroke-color: var(--hero-title-stroke);
}

html.theme-light .hero-sub,
html.theme-light .section-body,
html.theme-light .lede,
html.theme-light .feature-list li,
html.theme-light .statement-band p {
  color: var(--muted);
}

.panel {
  background: var(--panel-bg);
  box-shadow: var(--soft-shadow);
}

.canvas-section {
  margin-left: 0;
  margin-right: 0;
}

html.theme-light .panel::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), transparent 42%);
}

html.theme-light .chip,
html.theme-light .site-link,
html.theme-light .mini-card,
html.theme-light .tool-cell,
html.theme-light .flow-step {
  background: var(--card-bg-flat);
  border-color: var(--border);
  color: var(--muted);
}

html.theme-light .chip,
html.theme-light .link-title,
html.theme-light .tool-cell strong {
  color: var(--text);
}

html.theme-light .site-link:hover,
html.theme-light .site-link:focus-visible,
html.theme-light .site-link.current {
  color: var(--text);
  border-color: color-mix(in srgb, var(--theme-primary) 24%, var(--border));
  background: color-mix(in srgb, var(--theme-primary) 7%, white);
}

html.theme-light .what-card,
html.theme-light .stat,
html.theme-light .phase-card,
html.theme-light .product-card,
html.theme-light .use-card,
html.theme-light .step-num,
html.theme-light .metric-card,
html.theme-light .capability-card,
html.theme-light .process-step,
html.theme-light .academy-track,
html.theme-light .case-card,
html.theme-light .statement-band,
html.theme-light .stage-node,
html.theme-light .stage-panel,
html.theme-light .stage-chip {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

html.theme-light .phases,
html.theme-light .use-cases,
html.theme-light footer,
html.theme-light .cta-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(241, 246, 251, 0.9)),
    var(--surface2);
}

html.theme-light .phases-grid,
html.theme-light .use-cases-grid,
html.theme-light .stats-row {
  background: var(--border);
}

html.theme-light .what-card:hover,
html.theme-light .product-card:hover,
html.theme-light .stage-node:hover,
html.theme-light .stage-panel:hover,
html.theme-light .stage-chip:hover,
html.theme-light .mini-card:hover,
html.theme-light .metric-card:hover,
html.theme-light .capability-card:hover,
html.theme-light .process-step:hover,
html.theme-light .academy-track:hover,
html.theme-light .case-card:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  box-shadow: var(--hover-shadow);
}

html.theme-light .what-card:hover {
  box-shadow: -4px 0 0 0 var(--theme-primary), var(--hover-shadow);
}

html.theme-light .product-card:hover,
html.theme-light .phase-card:hover,
html.theme-light .use-card:hover,
html.theme-light .stat:hover {
  background: var(--card-hover-bg);
}

html.theme-light .phase-card:hover .phase-features li {
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

html.theme-light .pre .phase-tag {
  background: color-mix(in srgb, var(--theme-primary) 9%, white);
  color: var(--theme-primary);
  border-color: color-mix(in srgb, var(--theme-primary) 24%, transparent);
}

html.theme-light .during .phase-tag {
  background: color-mix(in srgb, var(--theme-secondary) 9%, white);
  color: var(--theme-secondary);
  border-color: color-mix(in srgb, var(--theme-secondary) 24%, transparent);
}

html.theme-light .post .phase-tag {
  background: color-mix(in srgb, var(--post) 9%, white);
  color: var(--post);
  border-color: color-mix(in srgb, var(--post) 24%, transparent);
}

html.theme-light .phase-case,
html.theme-light .division-badge {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--border);
}

html.theme-light .division-badge:hover,
html.theme-light .division-badge:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  color: var(--text);
}

html.theme-light .division-badge.active {
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, white);
}

html.theme-light .icon-svg {
  color: var(--accent);
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--accent) 12%, transparent));
}

html.theme-light .what-icon,
html.theme-light .product-icon,
html.theme-light .use-title-icon {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, white) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

html.theme-light .what-card:nth-child(2) .what-icon,
html.theme-light .product-card:nth-child(2) .product-icon {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 10%, white) !important;
}

html.theme-light .what-card:nth-child(3) .what-icon,
html.theme-light .product-card:nth-child(3) .product-icon {
  color: var(--post);
  background: color-mix(in srgb, var(--post) 10%, white) !important;
}

html.theme-light .what-card:nth-child(4) .what-icon {
  color: var(--accent-3);
  background: color-mix(in srgb, var(--accent-3) 10%, white) !important;
}

html.theme-light .product-glow {
  opacity: 0.32;
  filter: blur(2px);
}

html.theme-light .product-card:nth-child(1) .product-glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}

html.theme-light .product-card:nth-child(2) .product-glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 70%);
}

html.theme-light .product-card:nth-child(3) .product-glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--post) 10%, transparent), transparent 70%);
}

html.theme-light .use-card::after,
html.theme-light .use-card:hover::after {
  color: color-mix(in srgb, var(--accent) 7%, transparent);
}

html.theme-light .canvas-section {
  background:
    radial-gradient(circle at 74% 50%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 34%),
    linear-gradient(180deg, #f9fbfd, #edf3f8);
}

html.theme-light .canvas-overlay {
  background: linear-gradient(to right, var(--bg) 0%, rgba(247, 249, 252, 0) 30%, rgba(247, 249, 252, 0) 70%, var(--bg) 100%);
}

html.theme-light .page-hero {
  background:
    radial-gradient(circle at 24% 12%, var(--hero-orb-a), transparent 31%),
    radial-gradient(circle at 82% 18%, var(--hero-orb-b), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(246, 249, 252, 0.58) 46%, rgba(255, 255, 255, 0.72)),
    rgba(255, 255, 255, 0.74);
  border-color: color-mix(in srgb, var(--accent) 18%, rgba(18, 31, 47, 0.08));
  box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html.theme-light .page-hero::before {
  background: var(--hero-scrim);
}

html.theme-light .page-hero::after {
  background:
    radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--hero-grid, var(--accent)) 12%, transparent), transparent 46%),
    var(--hero-depth-fade);
  mix-blend-mode: multiply;
  opacity: 0.56;
}

html.theme-light .visual-stage::before {
  border-color: rgba(18, 31, 47, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), transparent 42%),
    rgba(255, 255, 255, 0.42);
  box-shadow: 0 26px 64px rgba(18, 31, 47, 0.13);
}

html.theme-light .visual-stage::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 13%, transparent), color-mix(in srgb, var(--theme-secondary) 10%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(18, 31, 47, 0.065) 29px),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(18, 31, 47, 0.052) 29px);
}

html.theme-light .flow-step:hover {
  background: color-mix(in srgb, var(--theme-primary) 6%, white);
}

html.theme-light .contact-section:not(.contact-section--hero)::after {
  opacity: 0.12;
  filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--theme-primary) 10%, transparent));
}

html.theme-light .contact-shell {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary) 9%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 252, 0.78)),
    rgba(255, 255, 255, 0.86);
  border-color: color-mix(in srgb, var(--theme-primary) 18%, rgba(18, 31, 47, 0.12));
  box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html.theme-light .contact-shell::before {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--theme-primary) 10%, transparent), transparent 31%),
    linear-gradient(120deg, transparent 48%, color-mix(in srgb, var(--theme-secondary) 5%, transparent), transparent 84%);
}

html.theme-light .contact-section--hero .contact-shell {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(246, 249, 252, 0.66)),
    rgba(255, 255, 255, 0.7);
}

html.theme-light .contact-direct-card,
html.theme-light .contact-modal .contact-direct-card {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--theme-primary) 8%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 253, 0.88)),
    rgba(255, 255, 255, 0.88);
  border-color: color-mix(in srgb, var(--theme-primary) 14%, rgba(18, 31, 47, 0.1));
  box-shadow: 0 20px 52px rgba(18, 31, 47, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

html.theme-light .contact-email-value:hover,
html.theme-light .contact-email-value:focus-visible {
  color: var(--theme-primary);
}

html.theme-light .contact-modal-overlay {
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--theme-primary) 10%, transparent), transparent 34%),
    rgba(247, 249, 252, 0.72);
}

html.theme-light .contact-modal {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--theme-primary) 9%, transparent), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.86)),
    rgba(255, 255, 255, 0.94);
  border-color: color-mix(in srgb, var(--theme-primary) 16%, rgba(18, 31, 47, 0.12));
  box-shadow: 0 34px 110px rgba(18, 31, 47, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html.theme-light .contact-modal-close {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(18, 31, 47, 0.12);
  color: var(--text);
}

html.theme-light .footer-clarity,
html.theme-light .footer-brand span,
html.theme-light .accent,
html.theme-light .accent-word,
html.theme-light .section-eyebrow,
html.theme-light .section-kicker,
html.theme-light .status-badge,
html.theme-light .contact-card-kicker,
html.theme-light .contact-modal-label,
html.theme-light .contact-modal-eyebrow,
html.theme-light .stat-val,
html.theme-light .metric-card strong,
html.theme-light .process-step small,
html.theme-light .flow-step span,
html.theme-light .step-num {
  color: var(--accent);
}

html.theme-light .step:hover .step-num {
  border-color: var(--theme-primary);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-primary) 14%, transparent);
}

@media (max-width: 900px) {
  .theme-toggle {
    width: 42px;
    height: 42px;
  }

  nav#nav {
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }
}

@media (max-width: 720px) {
  .site-nav {
    grid-template-columns: auto auto auto;
  }

  .site-nav .theme-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .site-nav .nav-cta {
    grid-column: 3;
    grid-row: 1;
  }

  .site-nav nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-nav .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    overflow: visible;
  }
}