/* KNX04 / Neon brand system
   Base visual language; production.css applies the final light-mode contract. */
:root {
  color-scheme: dark;
  --h04-black: #050606;
  --h04-black-2: #0d100e;
  --h04-white: #f8fff3;
  --h04-white-2: #d7e0d3;
  --h04-green: #b7ff00;
  --h04-green-deep: #6e9f00;
  --h04-purple: #8d2bff;
  --h04-purple-soft: #c78aff;
  --bg: var(--h04-black);
  --bg-deep: #080a09;
  --surface: var(--h04-black-2);
  --surface-raised: #151718;
  --surface-soft: #1c201d;
  --ink: var(--h04-white);
  --ink-soft: #c2cec0;
  --ink-dim: #8e9a8b;
  --brand: var(--h04-green);
  --brand-2: var(--h04-purple);
  --accent: var(--h04-green);
  --accent-light: #d9ff88;
  --line: rgb(248 255 243 / 14%);
  --line-strong: rgb(183 255 0 / 42%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --h04-green: var(--h04-purple);
  --h04-green-deep: var(--h04-purple);
  --h04-white: #ffffff;
  --h04-white-2: #ece8f3;
  --bg: #fcfbff;
  --bg-deep: #f3eef9;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #eee8f7;
  --ink: #141018;
  --ink-soft: #4e4756;
  --ink-dim: #6c6472;
  --brand: var(--h04-purple);
  --brand-2: var(--h04-purple);
  --accent: var(--h04-purple);
  --accent-light: #5c1ba8;
  --line: rgb(20 16 24 / 15%);
  --line-strong: rgb(107 33 199 / 38%);
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }
body::selection { background: var(--accent); color: var(--h04-black); }
:focus-visible { outline: 2px solid var(--h04-green); outline-offset: 4px; }

.site-header.is-scrolled {
  background: rgb(5 6 6 / 78%);
  border-color: rgb(183 255 0 / 23%);
}
.nav-shell {
  border-color: rgb(248 255 243 / 16%);
  background: rgb(5 6 6 / 78%);
  box-shadow: 0 18px 50px -40px #000, 0 0 0 1px rgb(141 43 255 / 10%);
}
.brand img {
  content: url("../img/brand/knx04/01_LOGOS/svg/KNX04_Mark_Dark.svg?v=20260830-knx04");
  object-fit: contain;
}
.brand--footer img {
  content: url("../img/brand/knx04/01_LOGOS/svg/KNX04_Name_Dark.svg?v=20260830-knx04");
  width: min(320px, 100%);
  height: auto;
  flex: 0 1 auto;
}
.about-mark img {
  content: url("../img/brand/knx04/01_LOGOS/svg/KNX04_Mark_Dark.svg?v=20260830-knx04");
  width: min(230px, 80%);
  height: auto;
  border-radius: 0;
  filter: drop-shadow(0 0 28px rgb(183 255 0 / 25%));
}
:root[data-theme="light"] .site-header.is-scrolled { background: rgb(240 244 237 / 88%); }
:root[data-theme="light"] .nav-shell {
  border-color: rgb(13 18 15 / 15%);
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 18px 50px -40px rgb(13 18 15 / 24%), 0 0 0 1px rgb(107 33 199 / 8%);
}
:root[data-theme="light"] .brand img {
  content: url("../img/brand/knx04/01_LOGOS/svg/KNX04_Mark_Light.svg?v=20260830-knx04");
  filter: drop-shadow(0 0 16px rgb(107 33 199 / 16%));
}
:root[data-theme="light"] .brand--footer img {
  content: url("../img/brand/knx04/01_LOGOS/svg/KNX04_Name_Light.svg?v=20260830-knx04");
  filter: none;
}
:root[data-theme="light"] .about-mark img {
  content: url("../img/brand/knx04/01_LOGOS/svg/KNX04_Mark_Light.svg?v=20260830-knx04");
  filter: drop-shadow(0 0 28px rgb(107 33 199 / 15%));
}

.site-nav a::after { background: var(--h04-green); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.icon-button:hover { border-color: var(--h04-green); background: rgb(183 255 0 / 12%); color: var(--ink); }
.button--accent {
  background: linear-gradient(135deg, var(--h04-green), #86c400);
  color: var(--h04-black);
  box-shadow: 0 16px 36px -20px rgb(183 255 0 / 72%), inset 0 1px 0 rgb(248 255 243 / 55%);
}
.button--accent:hover { box-shadow: 0 24px 48px -20px rgb(183 255 0 / 82%), inset 0 1px 0 rgb(248 255 243 / 62%); }
.button--ghost { border-color: var(--line-strong); background: rgb(255 255 255 / 2%); }
.button--ghost:hover { border-color: var(--h04-purple); background: rgb(141 43 255 / 13%); }
.text-link { color: var(--accent-light); }
.text-link:hover { color: var(--h04-green); }
.eyebrow, .hero-side__index, .step-number, .capability-code, .case-type { color: var(--accent-light); }
.status-led {
  background: var(--h04-green);
  box-shadow: 0 0 0 5px rgb(183 255 0 / 11%), 0 0 22px rgb(183 255 0 / 90%);
}

.hero--signal {
  background: radial-gradient(ellipse at 73% 44%, rgb(141 43 255 / 19%), transparent 34rem), radial-gradient(ellipse at 23% 110%, rgb(183 255 0 / 9%), transparent 34rem), var(--bg-deep);
}
.hero--signal::before {
  background-image: linear-gradient(rgb(248 255 243 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(248 255 243 / 5%) 1px, transparent 1px);
}
.hero--signal::after { background: radial-gradient(circle, rgb(141 43 255 / 14%), transparent 70%); }
.hero-copy h1 strong { background: linear-gradient(104deg, var(--h04-green), #e6ffad 48%, var(--h04-purple-soft)); background-clip: text; -webkit-background-clip: text; }
.hero-lead { color: var(--ink-soft); }
.hero-signature span::before { background: var(--h04-green); }
.ticker { background: rgb(5 6 6 / 76%); color: var(--ink-soft); }
.ticker i { color: var(--h04-green); }

.signal-field__glow--one { background: radial-gradient(circle, rgb(141 43 255 / 28%), rgb(141 43 255 / 10%) 48%, transparent 71%); }
.signal-field__glow--two { background: radial-gradient(circle, rgb(183 255 0 / 20%), transparent 70%); }
.signal-field__grid {
  background-image: linear-gradient(rgb(183 255 0 / 18%) 1px, transparent 1px), linear-gradient(90deg, rgb(141 43 255 / 18%) 1px, transparent 1px);
}
.signal-field__line { background: linear-gradient(90deg, transparent, rgb(183 255 0 / 70%), transparent); box-shadow: 0 0 22px rgb(183 255 0 / 42%); }
.signal-field__ring { border-color: rgb(183 255 0 / 27%); box-shadow: inset 0 0 26px rgb(141 43 255 / 16%), 0 0 34px rgb(141 43 255 / 16%); }
.signal-field__ring::before { border-top-color: rgb(248 255 243 / 76%); }
.signal-field__ring::after { border-color: rgb(141 43 255 / 42%); }
.signal-node {
  border-color: rgb(183 255 0 / 52%);
  background: linear-gradient(145deg, rgb(183 255 0 / 21%), rgb(141 43 255 / 38%));
  box-shadow: 0 0 22px rgb(183 255 0 / 28%), inset 0 0 14px rgb(248 255 243 / 14%);
}
.signal-node::before { border-color: rgb(248 255 243 / 78%); box-shadow: 0 0 14px rgb(183 255 0 / 60%); }
.signal-particle { background: var(--h04-green); box-shadow: 0 0 0 6px rgb(183 255 0 / 12%), 0 0 22px rgb(183 255 0 / 95%); }

/* El artefacto central conserva una geometria circular exacta en ambos temas. */
.signal-artifact {
  width: min(21vw, 270px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border-color: rgb(183 255 0 / 76%);
  background: radial-gradient(circle at 32% 23%, rgb(248 255 243 / 17%), transparent 11%), radial-gradient(circle at 50% 48%, rgb(183 255 0 / 17%), rgb(141 43 255 / 36%) 44%, rgb(5 6 6 / 90%) 76%);
  box-shadow: 0 0 0 12px rgb(183 255 0 / 7%), 0 0 78px rgb(141 43 255 / 55%), inset 0 0 34px rgb(248 255 243 / 19%);
}
.signal-artifact::before { border-color: rgb(248 255 243 / 78%); box-shadow: 0 0 24px rgb(183 255 0 / 58%), inset 0 0 16px rgb(248 255 243 / 26%); }
.signal-artifact::after { border-color: rgb(183 255 0 / 78%); filter: drop-shadow(0 0 11px rgb(183 255 0 / 72%)); }
.signal-artifact__halo { border-color: rgb(141 43 255 / 28%); box-shadow: 0 0 0 20px rgb(141 43 255 / 7%); }
.signal-artifact__lens { border-color: rgb(183 255 0 / 45%); }
.signal-artifact__beam { background: linear-gradient(90deg, transparent, rgb(183 255 0 / 55%), transparent); }
.signal-artifact__mark { color: var(--h04-green); text-shadow: 0 0 18px rgb(183 255 0 / 92%); }
.signal-interface {
  border-color: rgb(141 43 255 / 35%);
  background: linear-gradient(145deg, rgb(13 16 14 / 84%), rgb(5 6 6 / 78%));
  box-shadow: 0 30px 70px -40px #000, inset 0 1px 0 rgb(248 255 243 / 10%);
}
.interface-top b { color: var(--h04-green); }
.interface-map { background-image: linear-gradient(rgb(183 255 0 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(141 43 255 / 8%) 1px, transparent 1px); }
.interface-map::before { border-color: rgb(183 255 0 / 42%); }
.interface-map::after { border-color: rgb(141 43 255 / 54%); box-shadow: 0 0 30px rgb(141 43 255 / 65%); }
.interface-map i { background: var(--h04-green); box-shadow: 0 0 13px var(--h04-green); }

.metric-rail { background: linear-gradient(90deg, rgb(141 43 255 / 9%), transparent 35%, rgb(183 255 0 / 6%)), var(--surface); }
.section--intro { background: linear-gradient(180deg, var(--bg), var(--surface) 50%, var(--bg)); }
.section--intro::before, .section--capabilities::before, .section--cases::before {
  background-image: linear-gradient(rgb(248 255 243 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(248 255 243 / 4%) 1px, transparent 1px);
}
.step-mark { border-color: var(--line-strong); }
.step-mark::before, .step-mark::after { background: var(--h04-green); }
.capability, .case-card, .info-card, .security-panel, .project-form {
  border-color: var(--line);
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
}
.capability:hover, .case-card:hover, .info-card:hover { border-color: rgb(183 255 0 / 48%); background: linear-gradient(145deg, rgb(141 43 255 / 15%), var(--surface)); }
.capability--feature { background: radial-gradient(circle at 82% 13%, rgb(183 255 0 / 12%), transparent 35%), var(--surface-raised); }
.capability-icon { border-color: rgb(183 255 0 / 46%); background: rgb(183 255 0 / 8%); box-shadow: inset 0 0 22px rgb(141 43 255 / 11%); }
.capability-icon::before, .capability-icon::after { background: var(--h04-green); }
.capability-wire { background-image: linear-gradient(rgb(183 255 0 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(141 43 255 / 9%) 1px, transparent 1px); }
.case-art--review { background: radial-gradient(circle at 76% 28%, rgb(183 255 0 / 20%), transparent 30%), linear-gradient(145deg, #161b12, #241439 75%); }
.case-art--b2b { background: radial-gradient(circle at 76% 32%, rgb(141 43 255 / 24%), transparent 30%), linear-gradient(145deg, #10150f, #171d26 75%); }
.case-art--ops { background: radial-gradient(circle at 76% 32%, rgb(183 255 0 / 16%), transparent 28%), linear-gradient(145deg, #141711, #24163a 75%); }
.case-art::before { background-image: linear-gradient(rgb(248 255 243 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(248 255 243 / 8%) 1px, transparent 1px); }
.case-art::after { border-color: rgb(183 255 0 / 62%); box-shadow: 0 0 0 24px rgb(141 43 255 / 9%), 0 0 45px rgb(183 255 0 / 18%); }
.case-art i { border-color: rgb(183 255 0 / 72%); box-shadow: 0 0 28px rgb(183 255 0 / 28%); }
.case-art i::after { background: rgb(183 255 0 / 68%); }
.section--security { background: linear-gradient(145deg, #0b100d, #101116 58%, #17102a); }
.security-panel { background: linear-gradient(145deg, rgb(21 23 24 / 94%), rgb(10 13 11 / 94%)); }
.security-check > strong { color: var(--h04-green); }
.security-check > span { color: var(--h04-purple-soft); }
.cta-panel { border-color: rgb(183 255 0 / 28%); background: radial-gradient(circle at 82% 14%, rgb(183 255 0 / 14%), transparent 28%), linear-gradient(125deg, #141914, #1e1230 74%); }
.site-footer { background: #090d0a; }
.page-hero { background: radial-gradient(circle at 78% 20%, rgb(141 43 255 / 16%), transparent 30rem), var(--bg-deep); }
.detail-card { border-color: var(--line); background: rgb(255 255 255 / 4%); }
.case-detail__visual, .about-mark { background: radial-gradient(circle, rgb(141 43 255 / 18%), transparent 60%), var(--surface); }
.field input, .field textarea, .field select { border-color: var(--line); background: var(--surface); color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--h04-green); box-shadow: 0 0 0 3px rgb(183 255 0 / 13%); }
.language-switcher { border-color: var(--line); background: rgb(255 255 255 / 4%); }
.toast { border-color: rgb(183 255 0 / 32%); background: rgb(13 16 14 / 94%); }

:root[data-theme="light"] .button--accent {
  background: linear-gradient(135deg, var(--h04-purple), #8f4be0);
  color: #ffffff;
  box-shadow: 0 16px 36px -20px rgb(107 33 199 / 48%), inset 0 1px 0 rgb(255 255 255 / 55%);
}
:root[data-theme="light"] .button--ghost { background: rgb(13 18 15 / 2%); }
:root[data-theme="light"] .button--ghost:hover { background: rgb(107 33 199 / 9%); }
:root[data-theme="light"] .hero--signal {
  background: radial-gradient(ellipse at 73% 44%, rgb(107 33 199 / 10%), transparent 34rem), radial-gradient(ellipse at 23% 110%, rgb(120 168 0 / 9%), transparent 34rem), var(--bg-deep);
}
:root[data-theme="light"] .hero--signal::before { background-image: linear-gradient(rgb(13 18 15 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(13 18 15 / 5%) 1px, transparent 1px); }
:root[data-theme="light"] .hero--signal::after { background: radial-gradient(circle, rgb(107 33 199 / 10%), transparent 70%); }
:root[data-theme="light"] .hero-copy h1 strong { background: linear-gradient(104deg, #5b8a00, #6b21c7 72%); background-clip: text; -webkit-background-clip: text; }
:root[data-theme="light"] .signal-field__glow--one { background: radial-gradient(circle, rgb(107 33 199 / 16%), rgb(107 33 199 / 5%) 48%, transparent 71%); }
:root[data-theme="light"] .signal-field__glow--two { background: radial-gradient(circle, rgb(120 168 0 / 12%), transparent 70%); }
:root[data-theme="light"] .signal-field__grid { background-image: linear-gradient(rgb(107 33 199 / 10%) 1px, transparent 1px), linear-gradient(90deg, rgb(120 168 0 / 10%) 1px, transparent 1px); }
:root[data-theme="light"] .signal-field__line { background: linear-gradient(90deg, transparent, rgb(107 33 199 / 40%), transparent); box-shadow: 0 0 22px rgb(107 33 199 / 22%); }
:root[data-theme="light"] .signal-field__ring { border-color: rgb(107 33 199 / 22%); box-shadow: inset 0 0 26px rgb(107 33 199 / 9%), 0 0 34px rgb(107 33 199 / 8%); }
:root[data-theme="light"] .signal-field__ring::before { border-top-color: rgb(13 18 15 / 48%); }
:root[data-theme="light"] .signal-field__ring::after { border-color: rgb(107 33 199 / 24%); }
:root[data-theme="light"] .signal-node { border-color: rgb(107 33 199 / 34%); background: linear-gradient(145deg, rgb(120 168 0 / 16%), rgb(107 33 199 / 13%)); box-shadow: 0 0 22px rgb(107 33 199 / 13%), inset 0 0 14px rgb(255 255 255 / 60%); }
:root[data-theme="light"] .signal-node::before { border-color: rgb(13 18 15 / 48%); box-shadow: 0 0 14px rgb(120 168 0 / 28%); }
:root[data-theme="light"] .signal-particle { background: var(--h04-purple); box-shadow: 0 0 0 6px rgb(107 33 199 / 9%), 0 0 22px rgb(107 33 199 / 48%); }
:root[data-theme="light"] .signal-artifact { border-color: rgb(107 33 199 / 48%); background: radial-gradient(circle at 32% 23%, rgb(255 255 255 / 90%), transparent 11%), radial-gradient(circle at 50% 48%, rgb(120 168 0 / 13%), rgb(107 33 199 / 15%) 44%, rgb(255 255 255 / 95%) 76%); box-shadow: 0 0 0 12px rgb(107 33 199 / 5%), 0 0 60px rgb(107 33 199 / 15%), inset 0 0 34px rgb(255 255 255 / 78%); }
:root[data-theme="light"] .signal-artifact::before { border-color: rgb(13 18 15 / 52%); box-shadow: 0 0 24px rgb(107 33 199 / 17%), inset 0 0 16px rgb(255 255 255 / 64%); }
:root[data-theme="light"] .signal-artifact::after { border-color: rgb(107 33 199 / 46%); filter: drop-shadow(0 0 10px rgb(107 33 199 / 22%)); }
:root[data-theme="light"] .signal-artifact__halo { border-color: rgb(107 33 199 / 15%); box-shadow: 0 0 0 20px rgb(107 33 199 / 4%); }
:root[data-theme="light"] .signal-artifact__lens { border-color: rgb(107 33 199 / 29%); }
:root[data-theme="light"] .signal-artifact__beam { background: linear-gradient(90deg, transparent, rgb(107 33 199 / 25%), transparent); }
:root[data-theme="light"] .signal-artifact__mark { color: var(--h04-purple); text-shadow: 0 0 16px rgb(107 33 199 / 22%); }
:root[data-theme="light"] .signal-interface { border-color: rgb(107 33 199 / 18%); background: linear-gradient(145deg, rgb(255 255 255 / 92%), rgb(226 234 221 / 90%)); box-shadow: 0 30px 70px -40px rgb(13 18 15 / 23%), inset 0 1px 0 rgb(255 255 255 / 88%); }
:root[data-theme="light"] .interface-top b { color: var(--h04-purple); }
:root[data-theme="light"] .interface-map { background-image: linear-gradient(rgb(13 18 15 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 7%) 1px, transparent 1px); }
:root[data-theme="light"] .interface-map::before { border-color: rgb(107 33 199 / 27%); }
:root[data-theme="light"] .interface-map::after { border-color: rgb(107 33 199 / 30%); box-shadow: 0 0 26px rgb(107 33 199 / 15%); }
:root[data-theme="light"] .interface-map i { background: var(--h04-purple); box-shadow: 0 0 13px rgb(107 33 199 / 42%); }
:root[data-theme="light"] .metric-rail { background: linear-gradient(90deg, rgb(107 33 199 / 6%), transparent 35%, rgb(120 168 0 / 5%)), var(--surface); }
:root[data-theme="light"] .section--security { background: linear-gradient(145deg, #e4ebdf, #f7faf5 58%, #ece5f5); }
:root[data-theme="light"] .security-panel { background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(226 234 221 / 92%)); }
:root[data-theme="light"] .security-check > strong { color: var(--h04-purple); }
:root[data-theme="light"] .cta-panel { border-color: rgb(107 33 199 / 22%); background: radial-gradient(circle at 82% 14%, rgb(120 168 0 / 12%), transparent 28%), linear-gradient(125deg, #dfe9d9, #eee5f8 74%); }
:root[data-theme="light"] .site-footer { background: #e1e9df; }
:root[data-theme="light"] .page-hero { background: radial-gradient(circle at 78% 20%, rgb(107 33 199 / 9%), transparent 30rem), var(--bg-deep); }
:root[data-theme="light"] .case-detail__visual, :root[data-theme="light"] .about-mark { background: radial-gradient(circle, rgb(107 33 199 / 10%), transparent 60%), var(--surface); }
:root[data-theme="light"] .detail-card { background: rgb(255 255 255 / 70%); }
:root[data-theme="light"] .field input, :root[data-theme="light"] .field textarea, :root[data-theme="light"] .field select { background: #ffffff; }
:root[data-theme="light"] .field input:focus, :root[data-theme="light"] .field textarea:focus, :root[data-theme="light"] .field select:focus { border-color: rgb(107 33 199 / 52%); box-shadow: 0 0 0 3px rgb(107 33 199 / 11%); }






.signal-field__glow--one {  }
.signal-field__glow--two {  }
.signal-field__ring--one {  }
.signal-field__ring--two {  }
.signal-field__ring--three {  }
:root[data-theme="light"] .signal-field__glow--one {  }
:root[data-theme="light"] .signal-field__glow--two {  }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {    }
}

/* Refinamiento visual 02: el claro debe tener profundidad, no apariencia de lienzo blanco. */
.brand img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 10px rgb(183 255 0 / 18%));
}
.brand--footer img {
  filter: none;
}

:root[data-theme="light"] {
  --bg: #e8efe9;
  --bg-deep: #dbe6de;
  --surface: #f3f8f3;
  --surface-raised: #f8fbf7;
  --surface-soft: #d4e1d7;
  --ink: #0b1510;
  --ink-soft: #34453a;
  --ink-dim: #607266;
  --brand: #5f1ead;
  --brand-2: #527d00;
  --accent: #6b21c7;
  --accent-light: #572095;
  --line: rgb(11 21 16 / 16%);
  --line-strong: rgb(107 33 199 / 44%);
}

:root[data-theme="light"] body {
  background: radial-gradient(circle at 76% 8%, rgb(107 33 199 / 6%), transparent 34rem), var(--bg);
}
:root[data-theme="light"] .site-header.is-scrolled {
  background: rgb(232 239 233 / 86%);
  border-color: rgb(107 33 199 / 20%);
  box-shadow: 0 18px 45px -36px rgb(20 36 25 / 46%);
}
:root[data-theme="light"] .nav-shell {
  border-color: rgb(50 72 58 / 24%);
  background: linear-gradient(135deg, rgb(250 253 249 / 94%), rgb(235 243 236 / 90%));
  box-shadow: 0 20px 50px -38px rgb(20 36 25 / 55%), 0 0 0 1px rgb(107 33 199 / 7%);
}
:root[data-theme="light"] .brand img {
  filter: drop-shadow(0 5px 10px rgb(59 91 57 / 22%));
}
:root[data-theme="light"] .brand--footer img { filter: none; }
:root[data-theme="light"] .icon-button {
  background: rgb(255 255 255 / 42%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
}
:root[data-theme="light"] .icon-button:hover {
  border-color: rgb(107 33 199 / 50%);
  background: rgb(107 33 199 / 10%);
}
:root[data-theme="light"] .button--accent {
  background: linear-gradient(135deg, #6b21c7, #8b45dc 58%, #5a1da4);
  color: #fff;
  box-shadow: 0 18px 40px -22px rgb(73 26 125 / 68%), inset 0 1px 0 rgb(255 255 255 / 48%);
}
:root[data-theme="light"] .button--accent:hover {
  box-shadow: 0 26px 54px -23px rgb(73 26 125 / 72%), inset 0 1px 0 rgb(255 255 255 / 62%);
}
:root[data-theme="light"] .button--ghost {
  border-color: rgb(50 72 58 / 35%);
  background: rgb(255 255 255 / 28%);
  color: var(--ink-soft);
}
:root[data-theme="light"] .button--ghost:hover {
  border-color: rgb(107 33 199 / 48%);
  background: rgb(107 33 199 / 10%);
  color: var(--ink);
}
:root[data-theme="light"] .text-link,
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .hero-side__index,
:root[data-theme="light"] .step-number,
:root[data-theme="light"] .capability-code,
:root[data-theme="light"] .case-type {
  color: var(--accent-light);
}
:root[data-theme="light"] .status-led {
  background: #78a800;
  box-shadow: 0 0 0 5px rgb(120 168 0 / 12%), 0 0 20px rgb(120 168 0 / 46%);
}

:root[data-theme="light"] .hero--signal {
  background:
    radial-gradient(ellipse at 76% 38%, rgb(107 33 199 / 17%), transparent 35rem),
    radial-gradient(ellipse at 18% 112%, rgb(120 168 0 / 15%), transparent 34rem),
    linear-gradient(122deg, #edf4ee 0%, #dce8df 53%, #e8e0f0 100%);
}
:root[data-theme="light"] .hero--signal::before {
  background-image: linear-gradient(rgb(24 43 31 / 10%) 1px, transparent 1px), linear-gradient(90deg, rgb(24 43 31 / 10%) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 68%) 58%, transparent 98%);
}
:root[data-theme="light"] .hero--signal::after {
  background: radial-gradient(circle, rgb(107 33 199 / 13%), transparent 70%);
  filter: blur(22px);
}
:root[data-theme="light"] .hero-copy h1 strong {
  background: linear-gradient(104deg, #4d7600 0%, #6b21c7 68%, #263c2d 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
:root[data-theme="light"] .hero-lead { color: #3d5144; }
:root[data-theme="light"] .hero-signature span::before { background: #6b21c7; }
:root[data-theme="light"] .ticker {
  border-color: rgb(50 72 58 / 22%);
  background: rgb(225 235 227 / 82%);
  color: #4d5f52;
  backdrop-filter: blur(16px);
}
:root[data-theme="light"] .ticker i { color: #6b21c7; }

:root[data-theme="light"] .signal-field__glow {
  mix-blend-mode: multiply;
  filter: blur(30px);
}
:root[data-theme="light"] .signal-field__glow--one {
  background: radial-gradient(circle, rgb(107 33 199 / 21%), rgb(107 33 199 / 7%) 48%, transparent 72%);
}
:root[data-theme="light"] .signal-field__glow--two {
  background: radial-gradient(circle, rgb(120 168 0 / 18%), transparent 70%);
}
:root[data-theme="light"] .signal-field__grid {
  background-image: linear-gradient(rgb(36 62 45 / 16%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 11%) 1px, transparent 1px);
  opacity: .42;
}
:root[data-theme="light"] .signal-field__line {
  background: linear-gradient(90deg, transparent, rgb(107 33 199 / 60%), rgb(120 168 0 / 48%), transparent);
  box-shadow: 0 0 20px rgb(107 33 199 / 25%);
}
:root[data-theme="light"] .signal-field__ring {
  border-color: rgb(40 65 48 / 35%);
  box-shadow: inset 0 0 28px rgb(107 33 199 / 10%), 0 0 36px rgb(73 102 79 / 12%);
}
:root[data-theme="light"] .signal-field__ring::before { border-top-color: rgb(25 44 32 / 68%); }
:root[data-theme="light"] .signal-field__ring::after { border-color: rgb(107 33 199 / 28%); }
:root[data-theme="light"] .signal-node {
  border-color: rgb(107 33 199 / 46%);
  background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(211 229 213 / 92%) 58%, rgb(107 33 199 / 18%));
  box-shadow: 0 12px 26px -16px rgb(32 51 39 / 72%), inset 0 0 14px rgb(255 255 255 / 70%);
}
:root[data-theme="light"] .signal-node::before {
  border-color: rgb(79 110 70 / 72%);
  box-shadow: 0 0 14px rgb(120 168 0 / 36%);
}
:root[data-theme="light"] .signal-particle {
  background: #6b21c7;
  box-shadow: 0 0 0 6px rgb(107 33 199 / 11%), 0 0 20px rgb(107 33 199 / 52%);
}
:root[data-theme="light"] .signal-artifact {
  border-color: rgb(28 54 37 / 58%);
  background:
    radial-gradient(circle at 32% 20%, rgb(255 255 255 / 92%), transparent 11%),
    linear-gradient(145deg, #f5faf4 0%, #dce9df 53%, #b9cbbf 100%);
  box-shadow:
    0 0 0 12px rgb(107 33 199 / 7%),
    0 28px 66px -24px rgb(26 45 33 / 60%),
    0 0 54px rgb(107 33 199 / 16%),
    inset 10px 12px 20px rgb(255 255 255 / 72%),
    inset -16px -18px 28px rgb(62 42 85 / 18%);
}
:root[data-theme="light"] .signal-artifact::before {
  border-color: rgb(38 66 47 / 72%);
  box-shadow: 0 0 25px rgb(107 33 199 / 22%), inset 0 0 17px rgb(255 255 255 / 72%);
}
:root[data-theme="light"] .signal-artifact::after {
  border-color: rgb(47 78 55 / 78%);
  filter: drop-shadow(0 0 10px rgb(107 33 199 / 25%));
}
:root[data-theme="light"] .signal-artifact__halo {
  border-color: rgb(107 33 199 / 22%);
  box-shadow: 0 0 0 20px rgb(107 33 199 / 6%);
}
:root[data-theme="light"] .signal-artifact__lens { border-color: rgb(120 168 0 / 44%); }
:root[data-theme="light"] .signal-artifact__beam { background: linear-gradient(90deg, transparent, rgb(107 33 199 / 42%), transparent); }
:root[data-theme="light"] .signal-artifact__mark { color: #345700; text-shadow: 0 0 16px rgb(255 255 255 / 86%); }
:root[data-theme="light"] .signal-interface {
  border-color: rgb(38 66 47 / 28%);
  background: linear-gradient(145deg, rgb(249 253 248 / 95%), rgb(210 226 214 / 91%));
  box-shadow: 0 32px 72px -38px rgb(27 47 34 / 48%), inset 0 1px 0 rgb(255 255 255 / 92%);
}
:root[data-theme="light"] .interface-top b { color: #6b21c7; }
:root[data-theme="light"] .interface-map {
  background-image: linear-gradient(rgb(37 67 47 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 10%) 1px, transparent 1px);
}
:root[data-theme="light"] .interface-map::before { border-color: rgb(79 110 70 / 45%); }
:root[data-theme="light"] .interface-map::after { border-color: rgb(107 33 199 / 44%); box-shadow: 0 0 28px rgb(107 33 199 / 21%); }
:root[data-theme="light"] .interface-map i { background: #78a800; box-shadow: 0 0 13px rgb(120 168 0 / 62%); }

:root[data-theme="light"] .metric-rail {
  background: linear-gradient(90deg, rgb(107 33 199 / 8%), transparent 38%, rgb(120 168 0 / 9%)), #f3f8f3;
}
:root[data-theme="light"] .section--intro {
  background: linear-gradient(180deg, #e8efe9, #f3f8f3 50%, #e4ede6);
}
:root[data-theme="light"] .section--intro::before,
:root[data-theme="light"] .section--capabilities::before,
:root[data-theme="light"] .section--cases::before {
  background-image: linear-gradient(rgb(31 58 41 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 6%) 1px, transparent 1px);
}
:root[data-theme="light"] .step-mark { background: rgb(255 255 255 / 36%); }
:root[data-theme="light"] .step-mark::before,
:root[data-theme="light"] .step-mark::after { background: #6b21c7; }
:root[data-theme="light"] .capability,
:root[data-theme="light"] .case-card,
:root[data-theme="light"] .info-card,
:root[data-theme="light"] .security-panel,
:root[data-theme="light"] .project-form {
  border-color: rgb(38 66 47 / 17%);
  background: linear-gradient(145deg, rgb(250 253 249 / 96%), rgb(231 240 233 / 94%));
  box-shadow: 0 24px 60px -46px rgb(31 55 39 / 55%);
}
:root[data-theme="light"] .capability:hover,
:root[data-theme="light"] .case-card:hover,
:root[data-theme="light"] .info-card:hover {
  border-color: rgb(107 33 199 / 38%);
  background: linear-gradient(145deg, #fbfdfb, #dfeae2);
}
:root[data-theme="light"] .capability--feature { background: radial-gradient(circle at 82% 13%, rgb(120 168 0 / 13%), transparent 35%), #f5faf5; }
:root[data-theme="light"] .capability-icon {
  border-color: rgb(107 33 199 / 38%);
  background: linear-gradient(145deg, rgb(107 33 199 / 8%), rgb(120 168 0 / 11%));
  box-shadow: inset 0 0 22px rgb(107 33 199 / 8%);
}
:root[data-theme="light"] .capability-icon::before,
:root[data-theme="light"] .capability-icon::after { background-color: #6b21c7; }
:root[data-theme="light"] .capability-wire { background-image: linear-gradient(rgb(31 58 41 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 9%) 1px, transparent 1px); }
:root[data-theme="light"] .case-art--review { background: radial-gradient(circle at 80% 36%, rgb(107 33 199 / 19%), transparent 30%), linear-gradient(145deg, #e7f0e7, #c9dad0 72%); }
:root[data-theme="light"] .case-art--b2b { background: radial-gradient(circle at 76% 32%, rgb(120 168 0 / 15%), transparent 30%), linear-gradient(145deg, #e8f0ea, #c7d5df 75%); }
:root[data-theme="light"] .case-art--ops { background: radial-gradient(circle at 76% 32%, rgb(107 33 199 / 18%), transparent 28%), linear-gradient(145deg, #eee9f4, #d4d9cf 75%); }
:root[data-theme="light"] .case-art::before { background-image: linear-gradient(rgb(30 54 39 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 8%) 1px, transparent 1px); }
:root[data-theme="light"] .case-art::after { border-color: rgb(107 33 199 / 44%); box-shadow: 0 0 0 24px rgb(107 33 199 / 7%), 0 0 45px rgb(107 33 199 / 18%); }
:root[data-theme="light"] .case-art i { border-color: rgb(64 95 68 / 82%); box-shadow: 0 0 28px rgb(107 33 199 / 23%); }
:root[data-theme="light"] .case-art i::after { background: rgb(64 95 68 / 78%); }
:root[data-theme="light"] .section--security { background: linear-gradient(145deg, #d9e6dc, #f1f6f1 58%, #e6ddf0); }
:root[data-theme="light"] .security-panel { background: linear-gradient(145deg, rgb(250 253 249 / 98%), rgb(218 231 220 / 94%)); box-shadow: 0 36px 100px -58px rgb(27 47 34 / 46%), inset 0 1px 0 rgb(255 255 255 / 94%); }
:root[data-theme="light"] .security-check > strong { color: #6b21c7; }
:root[data-theme="light"] .security-check > span { color: #527d00; }
:root[data-theme="light"] .cta-panel {
  border-color: rgb(107 33 199 / 34%);
  background: radial-gradient(circle at 82% 14%, rgb(120 168 0 / 18%), transparent 28%), linear-gradient(125deg, #d8e6da, #eadff3 74%);
  box-shadow: 0 34px 90px -56px rgb(35 53 41 / 46%);
}
:root[data-theme="light"] .cta-panel .button { background: linear-gradient(135deg, #6b21c7, #8b45dc); color: #fff; }
:root[data-theme="light"] .site-footer { background: #d8e4da; }
:root[data-theme="light"] .page-hero { background: radial-gradient(circle at 78% 20%, rgb(107 33 199 / 14%), transparent 30rem), linear-gradient(125deg, #e7efe8, #dce7df); }
:root[data-theme="light"] .detail-card { background: rgb(248 252 248 / 76%); }
:root[data-theme="light"] .case-detail__visual,
:root[data-theme="light"] .about-mark { background: radial-gradient(circle, rgb(107 33 199 / 13%), transparent 60%), linear-gradient(145deg, #f2f8f2, #d4e2d7); }
:root[data-theme="light"] .about-mark img { filter: drop-shadow(0 20px 26px rgb(34 60 43 / 28%)); }
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select { background: rgb(251 253 250 / 98%); }
:root[data-theme="light"] .field input:focus,
:root[data-theme="light"] .field textarea:focus,
:root[data-theme="light"] .field select:focus { border-color: rgb(107 33 199 / 56%); box-shadow: 0 0 0 3px rgb(107 33 199 / 13%); }
:root[data-theme="light"] .language-switcher { background: rgb(255 255 255 / 46%); }
:root[data-theme="light"] .language-switcher option { background: #f3f8f3; color: var(--ink); }