/* KNX04 production layer — loaded last to keep the final visual contract explicit. */
:root {
  --content: 1280px;
  --header-height: 76px;
  --knx-purple: #8d2bff;
  --knx-purple-strong: #6b21c7;
  --knx-black: #050606;
  --knx-white: #f8fff3;
}

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

html,
body { background: var(--bg); }
body { overflow-x: hidden; overflow-x: clip; }
.container { width: min(var(--content), calc(100% - clamp(32px, 6vw, 96px))); margin-inline: auto; }
.nav-shell { position: relative; width: 100%; max-width: var(--content); margin-inline: auto; }
.site-header,
main,
.site-footer { width: 100%; }
.button,
.icon-button,
.language-switcher { min-height: 44px; }
.button--small,
.language-switcher { min-height: 38px; }
.field input,
.field textarea,
.field select { font-size: 16px; }

.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");
}
.about-mark img {
  content: url("../img/brand/knx04/01_LOGOS/svg/KNX04_Mark_Dark.svg?v=20260830-knx04");
}

:root[data-theme="light"] body {
  background: radial-gradient(circle at 78% 8%, rgb(107 33 199 / 6%), transparent 34rem), var(--bg);
}
: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 18px rgb(107 33 199 / 18%));
}
: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 20px 28px rgb(107 33 199 / 20%));
}
:root[data-theme="light"] :focus-visible { outline-color: var(--knx-purple-strong); }
:root[data-theme="light"] .site-header.is-scrolled { background: rgb(252 251 255 / 88%); border-color: rgb(107 33 199 / 20%); }
:root[data-theme="light"] .nav-shell { border-color: rgb(20 16 24 / 15%); background: rgb(255 255 255 / 90%); box-shadow: 0 20px 50px -38px rgb(20 16 24 / 34%), 0 0 0 1px rgb(107 33 199 / 8%); }
:root[data-theme="light"] .icon-button { background: rgb(255 255 255 / 60%); }
:root[data-theme="light"] .icon-button:hover { border-color: rgb(107 33 199 / 50%); background: rgb(107 33 199 / 10%); }
:root[data-theme="light"] .site-nav { background: rgb(255 255 255 / 96%); }
:root[data-theme="light"] .site-nav a::after { background: var(--knx-purple-strong); }
:root[data-theme="light"] .button--accent { background: linear-gradient(135deg, #6b21c7, #8d2bff 58%, #4d147f); color: #ffffff; 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 / 76%), inset 0 1px 0 rgb(255 255 255 / 62%); }
:root[data-theme="light"] .button--ghost { border-color: rgb(20 16 24 / 28%); background: rgb(255 255 255 / 48%); color: var(--ink-soft); }
:root[data-theme="light"] .button--ghost:hover { border-color: rgb(107 33 199 / 52%); 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(--knx-purple-strong); }
:root[data-theme="light"] .status-led { background: var(--knx-purple-strong); box-shadow: 0 0 0 5px rgb(107 33 199 / 12%), 0 0 22px rgb(107 33 199 / 44%); }
:root[data-theme="light"] .hero--signal,
:root[data-theme="light"] .page-hero { background: radial-gradient(ellipse at 76% 38%, rgb(107 33 199 / 12%), transparent 34rem), radial-gradient(ellipse at 18% 112%, rgb(20 16 24 / 5%), transparent 32rem), var(--bg-deep); }
:root[data-theme="light"] .hero--signal::before,
:root[data-theme="light"] .page-hero::before { background-image: linear-gradient(rgb(20 16 24 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 6%) 1px, transparent 1px); }
:root[data-theme="light"] .hero--signal::after { background: radial-gradient(circle, rgb(107 33 199 / 12%), transparent 70%); }
:root[data-theme="light"] .hero-copy h1 strong { background: linear-gradient(104deg, #4d147f, #8d2bff 62%, #141018); background-clip: text; -webkit-background-clip: text; }
:root[data-theme="light"] .hero-lead { color: var(--ink-soft); }
:root[data-theme="light"] .hero-signature span::before { background: var(--knx-purple-strong); }
:root[data-theme="light"] .ticker { border-color: rgb(20 16 24 / 18%); background: rgb(255 255 255 / 86%); color: #514957; }
:root[data-theme="light"] .ticker i { color: var(--knx-purple-strong); }
: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 / 18%), rgb(107 33 199 / 5%) 48%, transparent 72%); }
:root[data-theme="light"] .signal-field__glow--two { background: radial-gradient(circle, rgb(141 43 255 / 12%), transparent 70%); }
:root[data-theme="light"] .signal-field__grid { background-image: linear-gradient(rgb(20 16 24 / 14%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 10%) 1px, transparent 1px); opacity: .38; }
:root[data-theme="light"] .signal-field__line { background: linear-gradient(90deg, transparent, rgb(107 33 199 / 58%), transparent); box-shadow: 0 0 20px rgb(107 33 199 / 22%); }
:root[data-theme="light"] .signal-field__ring { border-color: rgb(107 33 199 / 28%); box-shadow: inset 0 0 28px rgb(107 33 199 / 9%), 0 0 36px rgb(20 16 24 / 8%); }
:root[data-theme="light"] .signal-field__ring::before { border-top-color: rgb(20 16 24 / 60%); }
:root[data-theme="light"] .signal-field__ring::after { border-color: rgb(107 33 199 / 25%); }
:root[data-theme="light"] .signal-node { border-color: rgb(107 33 199 / 46%); background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(235 226 246 / 92%)); box-shadow: 0 12px 26px -16px rgb(20 16 24 / 42%), inset 0 0 14px rgb(255 255 255 / 72%); }
:root[data-theme="light"] .signal-node::before { border-color: rgb(20 16 24 / 58%); box-shadow: 0 0 14px rgb(107 33 199 / 22%); }
:root[data-theme="light"] .signal-particle { background: var(--knx-purple-strong); box-shadow: 0 0 0 6px rgb(107 33 199 / 10%), 0 0 20px rgb(107 33 199 / 44%); }
:root[data-theme="light"] .signal-artifact { border-color: rgb(107 33 199 / 55%); background: radial-gradient(circle at 32% 20%, rgb(255 255 255 / 98%), transparent 11%), linear-gradient(145deg, #ffffff 0%, #efe7f7 53%, #d9c9eb 100%); box-shadow: 0 0 0 12px rgb(107 33 199 / 7%), 0 28px 66px -24px rgb(20 16 24 / 38%), 0 0 54px rgb(107 33 199 / 16%), inset 10px 12px 20px rgb(255 255 255 / 72%), inset -16px -18px 28px rgb(20 16 24 / 12%); }
:root[data-theme="light"] .signal-artifact::before { border-color: rgb(20 16 24 / 70%); 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(20 16 24 / 76%); 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 / 5%); }
:root[data-theme="light"] .signal-artifact__lens { border-color: rgb(107 33 199 / 34%); }
: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: var(--knx-purple-strong); text-shadow: 0 0 16px rgb(255 255 255 / 86%); }
:root[data-theme="light"] .signal-interface { border-color: rgb(107 33 199 / 24%); background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(240 234 248 / 92%)); box-shadow: 0 32px 72px -38px rgb(20 16 24 / 34%), inset 0 1px 0 rgb(255 255 255 / 92%); }
:root[data-theme="light"] .interface-top b,
:root[data-theme="light"] .interface-map i { color: var(--knx-purple-strong); background-color: var(--knx-purple-strong); }
:root[data-theme="light"] .interface-map { background-image: linear-gradient(rgb(20 16 24 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 8%) 1px, transparent 1px); }
:root[data-theme="light"] .interface-map::before,
:root[data-theme="light"] .interface-map::after { border-color: rgb(107 33 199 / 30%); }
:root[data-theme="light"] .metric-rail { background: linear-gradient(90deg, rgb(107 33 199 / 6%), transparent 42%, rgb(20 16 24 / 4%)), #ffffff; }
:root[data-theme="light"] .section--intro { background: linear-gradient(180deg, #f3eef9, #ffffff 50%, #f1ebf7); }
: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(20 16 24 / 6%) 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 / 62%); border-color: rgb(107 33 199 / 25%); }
:root[data-theme="light"] .step-mark::before,
:root[data-theme="light"] .step-mark::after { background: var(--knx-purple-strong); }
: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(20 16 24 / 14%); background: linear-gradient(145deg, rgb(255 255 255 / 97%), rgb(241 235 248 / 94%)); box-shadow: 0 24px 60px -46px rgb(20 16 24 / 42%); }
: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 / 42%); background: linear-gradient(145deg, #ffffff, #ebe1f5); }
:root[data-theme="light"] .capability--feature { background: radial-gradient(circle at 82% 13%, rgb(107 33 199 / 12%), transparent 35%), #ffffff; }
:root[data-theme="light"] .capability-icon { border-color: rgb(107 33 199 / 38%); background: linear-gradient(145deg, rgb(107 33 199 / 8%), rgb(20 16 24 / 4%)); 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: var(--knx-purple-strong); }
:root[data-theme="light"] .capability-wire { background-image: linear-gradient(rgb(20 16 24 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 8%) 1px, transparent 1px); }
:root[data-theme="light"] .case-art--review { background: radial-gradient(circle at 80% 36%, rgb(107 33 199 / 17%), transparent 30%), linear-gradient(145deg, #ffffff, #e8dcf3 72%); }
:root[data-theme="light"] .case-art--b2b { background: radial-gradient(circle at 76% 32%, rgb(141 43 255 / 16%), transparent 30%), linear-gradient(145deg, #f8f5fb, #ded0ed 75%); }
:root[data-theme="light"] .case-art--ops { background: radial-gradient(circle at 76% 32%, rgb(107 33 199 / 16%), transparent 28%), linear-gradient(145deg, #f1ebf7, #d4c4e5 75%); }
:root[data-theme="light"] .case-art::before { background-image: linear-gradient(rgb(20 16 24 / 8%) 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(20 16 24 / 72%); box-shadow: 0 0 28px rgb(107 33 199 / 23%); }
:root[data-theme="light"] .case-art i::after { background: rgb(20 16 24 / 76%); }
:root[data-theme="light"] .section--security { background: linear-gradient(145deg, #eee7f5, #ffffff 58%, #e7dcf2); }
:root[data-theme="light"] .security-panel { background: linear-gradient(145deg, rgb(255 255 255 / 98%), rgb(239 231 247 / 95%)); }
:root[data-theme="light"] .security-check > strong,
:root[data-theme="light"] .security-check > span { color: var(--knx-purple-strong); }
:root[data-theme="light"] .cta-panel { border-color: rgb(107 33 199 / 34%); background: radial-gradient(circle at 82% 14%, rgb(141 43 255 / 20%), transparent 28%), linear-gradient(125deg, #6b21c7, #24102f 74%); color: #ffffff; }
:root[data-theme="light"] .cta-panel .button { background: #ffffff; color: #24102f; }
:root[data-theme="light"] .site-footer { background: #141018; color: #ffffff; }
:root[data-theme="light"] .site-footer .brand strong,
:root[data-theme="light"] .site-footer .brand small,
:root[data-theme="light"] .site-footer p,
:root[data-theme="light"] .site-footer a:not(.brand),
:root[data-theme="light"] .site-footer .footer-meta { color: #ffffff; }
:root[data-theme="light"] .site-footer .footer-label { color: #c9a7ff; }
:root[data-theme="light"] .page-hero { background: radial-gradient(circle at 78% 20%, rgb(107 33 199 / 11%), transparent 30rem), linear-gradient(125deg, #f3eef9, #ebe2f5); }
:root[data-theme="light"] .detail-card { background: rgb(255 255 255 / 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, #ffffff, #e8dcf3); }
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select { border-color: rgb(20 16 24 / 20%); background: #ffffff; color: var(--ink); }
: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 / 58%); box-shadow: 0 0 0 3px rgb(107 33 199 / 13%); }
:root[data-theme="light"] .language-switcher { background: rgb(255 255 255 / 76%); }
:root[data-theme="light"] .language-switcher option { background: #ffffff; color: var(--ink); }
:root[data-theme="light"] .toast { border-color: rgb(107 33 199 / 32%); background: rgb(255 255 255 / 97%); color: var(--ink); }

@media (max-width: 1180px) {
  .hero-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 58px); }
  .security-layout { gap: clamp(36px, 6vw, 80px); }
}

@media (max-width: 980px) {
  :root { --header-height: 68px; }
  .container { width: min(var(--content), calc(100% - 48px)); }
  .nav-shell { grid-template-columns: auto auto; justify-content: space-between; }
  .site-nav { top: calc(100% + 7px); right: 0; left: 0; }
  .hero { min-height: 780px; }
  .hero-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .hero-copy h1 { font-size: clamp(3rem, 6.2vw, 5rem); }
  .signal-artifact { width: 215px; }
  .signal-interface { width: 250px; }
}

@media (max-width: 760px) {
  .container { width: min(var(--content), calc(100% - 32px)); }
  .site-header { padding: 7px 0; }
  .brand img { width: 38px; height: 38px; flex-basis: 38px; }
  .brand small { max-width: 154px; }
  .hero { min-height: auto; padding-top: 118px; padding-bottom: 94px; }
  .hero-layout { grid-template-columns: 1fr; min-height: 650px; align-items: start; }
  .hero-copy h1 { max-width: 9.5ch; font-size: clamp(3.1rem, 13vw, 5rem); }
  .hero-side,
  .hero-foot { display: none; }
  .signal-field__ring--one { right: -44%; width: 680px; }
  .signal-field__ring--two { right: -31%; width: 560px; }
  .signal-field__ring--three { right: -7%; width: 380px; }
  .signal-field__glow--one { right: -22%; width: 560px; }
  .signal-field__grid { right: -35%; width: 130%; }
  .signal-artifact { top: 34%; right: -2%; width: 210px; }
  .signal-interface { right: 2%; bottom: 17%; width: 250px; }
  .metric-grid,
  .capability-grid,
  .case-grid,
  .card-grid,
  .service-intent-grid,
  .detail-grid { grid-template-columns: 1fr; }
  .metric { border-right: 0; }
  .metric:nth-child(3) { border-bottom: 1px solid var(--line); }
  .metric:nth-child(4) { border-bottom: 0; }
  .split-layout,
  .security-layout,
  .about-layout,
  .contact-layout { grid-template-columns: 1fr; }
  .section-sticky,
  .contact-note,
  .about-mark { position: static; }
  .section-heading { display: block; }
  .section-heading > .lead { margin-top: 20px; }
  .capability--wide,
  .info-card--wide { grid-column: auto; }
  .capability--wide { display: block; }
  .capability--wide .capability-icon { margin-bottom: 30px; }
  .capability-wire { display: none; }
  .case-card--large { grid-row: auto; }
  .case-card--large .case-art { min-height: 310px; }
  .case-detail { grid-template-columns: 1fr; }
  .about-mark { min-height: 280px; }
  .form-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .cta-panel { display: block; }
  .cta-panel .button { margin-top: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .page-index { gap: 18px; flex-wrap: wrap; line-height: 1.5; }
}

/* Case visuals: each service gets its own visual language instead of a repeated magnifier. */
:root {
  --case-signal: #b7ff00;
  --case-violet: #8d2bff;
  --case-paper: #f8fff3;
  --case-panel-fill: rgb(248 255 243 / 7%);
}

:root[data-theme="light"] {
  --case-signal: #6b21c7;
  --case-violet: #8d2bff;
  --case-paper: #141018;
  --case-panel-fill: rgb(20 16 24 / 7%);
}

.case-art::after,
.case-art i { display: none; }

.case-art__label,
.case-art small {
  position: relative;
  z-index: 2;
}

.case-art__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  padding: clamp(8px, 2vw, 18px);
  overflow: visible;
  opacity: .92;
  pointer-events: none;
}

.case-art__visual--review { color: var(--case-signal); }
.case-art__visual--b2b { color: var(--case-violet); }
.case-art__visual--ops { color: var(--case-signal); }

.case-art__wire {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .82;
}

.case-art__wire--soft {
  stroke: var(--case-violet);
  opacity: .42;
}

.case-art__panel,
.case-art__doc {
  fill: var(--case-panel-fill);
  stroke: currentColor;
  stroke-width: 2;
}

.case-art__panel--alt,
.case-art__doc--back {
  stroke: var(--case-violet);
  opacity: .8;
}

.case-art__bar {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: .9;
}

.case-art__bar--alt {
  stroke: var(--case-violet);
  opacity: .75;
}

.case-art__node {
  fill: var(--case-paper);
  stroke: currentColor;
  stroke-width: 3;
}

.case-art__node--small {
  fill: currentColor;
  stroke: var(--case-paper);
}

.case-art__check {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.case-art__radar,
.case-art__crosshair {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.case-art__radar--inner {
  stroke: var(--case-signal);
  opacity: .72;
}

.case-art__crosshair {
  stroke: currentColor;
  opacity: .6;
}

.case-art__arrow {
  fill: none;
  stroke: var(--case-signal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.case-art__connector {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .5;
}

.case-art strong { z-index: 2; }

/* Second polish pass: visual systems are intentionally different per case. */
.case-art--review {
  background: radial-gradient(circle at 78% 30%, rgb(183 255 0 / 13%), transparent 28%), radial-gradient(circle at 16% 92%, rgb(141 43 255 / 25%), transparent 38%), linear-gradient(145deg, #35185e, #0b0912 76%);
}

.case-art--b2b {
  background: radial-gradient(circle at 78% 26%, rgb(141 43 255 / 25%), transparent 31%), radial-gradient(circle at 24% 88%, rgb(183 255 0 / 8%), transparent 32%), linear-gradient(145deg, #211737, #09080e 78%);
}

.case-art--ops {
  background: radial-gradient(circle at 76% 74%, rgb(141 43 255 / 27%), transparent 34%), radial-gradient(circle at 12% 20%, rgb(183 255 0 / 9%), transparent 30%), linear-gradient(145deg, #3c1e61, #0a0810 78%);
}

.case-art__visual {
  shape-rendering: geometricPrecision;
  transform: translateZ(0);
}

.case-art__visual--review { filter: drop-shadow(0 0 14px rgb(183 255 0 / 16%)); }
.case-art__visual--b2b { filter: drop-shadow(0 0 14px rgb(141 43 255 / 22%)); }
.case-art__visual--ops { filter: drop-shadow(0 0 14px rgb(183 255 0 / 13%)); }

.case-art__dash {
  fill: none;
  stroke: var(--case-paper);
  stroke-width: 1;
  stroke-dasharray: 2 8;
  opacity: .34;
}

.case-art__quote {
  fill: none;
  stroke: var(--case-signal);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .75;
}

.case-art__signal-window,
.case-art__index {
  fill: var(--case-panel-fill);
  stroke: currentColor;
  stroke-width: 2;
}

.case-art__signal-window {
  stroke: var(--case-signal);
  opacity: .75;
}

.case-art__signal-bars,
.case-art__signal-spark,
.case-art__index-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.case-art__signal-bars {
  stroke: var(--case-paper);
  stroke-width: 3;
  opacity: .65;
}

.case-art__signal-spark {
  stroke: var(--case-signal);
  stroke-width: 3;
  opacity: .95;
}

.case-art__point {
  fill: var(--case-signal);
  stroke: var(--case-paper);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px var(--case-signal));
}

.case-art__index {
  stroke: var(--case-violet);
  opacity: .82;
}

.case-art__index-line {
  stroke: var(--case-paper);
  stroke-width: 3;
  opacity: .62;
}

.case-art--review:hover .case-art__visual { transform: translate3d(5px, -3px, 0) rotate(-.4deg); }
.case-art--b2b:hover .case-art__visual { transform: translate3d(-4px, -4px, 0) rotate(.4deg); }
.case-art--ops:hover .case-art__visual { transform: translate3d(4px, 2px, 0) rotate(.35deg); }

:root[data-theme="light"] .case-art--review {
  background: radial-gradient(circle at 78% 30%, rgb(107 33 199 / 13%), transparent 28%), radial-gradient(circle at 16% 92%, rgb(141 43 255 / 10%), transparent 38%), linear-gradient(145deg, #ffffff, #e5d8f0 76%);
}

:root[data-theme="light"] .case-art--b2b {
  background: radial-gradient(circle at 78% 26%, rgb(141 43 255 / 13%), transparent 31%), radial-gradient(circle at 24% 88%, rgb(107 33 199 / 7%), transparent 32%), linear-gradient(145deg, #ffffff, #e4d8ef 78%);
}

:root[data-theme="light"] .case-art--ops {
  background: radial-gradient(circle at 76% 74%, rgb(141 43 255 / 14%), transparent 34%), radial-gradient(circle at 12% 20%, rgb(107 33 199 / 7%), transparent 30%), linear-gradient(145deg, #ffffff, #dfd1eb 78%);
}

:root[data-theme="light"] .case-art__visual--review { filter: drop-shadow(0 0 14px rgb(107 33 199 / 15%)); }
:root[data-theme="light"] .case-art__visual--b2b { filter: drop-shadow(0 0 14px rgb(141 43 255 / 17%)); }
:root[data-theme="light"] .case-art__visual--ops { filter: drop-shadow(0 0 14px rgb(107 33 199 / 15%)); }

/* Capability cards: four distinct symbols and a balanced 2x2 composition. */
.capability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.capability {
  --cap-accent: #f8fff3;
  --cap-secondary: #8d2bff;
  --cap-border: rgb(248 255 243 / 25%);
  --cap-fill: rgb(248 255 243 / 7%);
  min-height: 365px;
  background: linear-gradient(145deg, rgb(22 17 31 / 98%), rgb(11 10 17 / 98%));
}

.capability:nth-child(1) {
  --cap-accent: #b7ff00;
  --cap-secondary: #8d2bff;
  --cap-border: rgb(183 255 0 / 36%);
  --cap-fill: rgb(183 255 0 / 8%);
}

.capability:nth-child(2) {
  --cap-accent: #c9a7ff;
  --cap-secondary: #b7ff00;
  --cap-border: rgb(201 167 255 / 34%);
  --cap-fill: rgb(141 43 255 / 9%);
}

.capability:nth-child(3) {
  --cap-accent: #f8fff3;
  --cap-secondary: #b7ff00;
  --cap-border: rgb(248 255 243 / 25%);
  --cap-fill: rgb(248 255 243 / 6%);
}

.capability:nth-child(4) {
  --cap-accent: #b7ff00;
  --cap-secondary: #c9a7ff;
  --cap-border: rgb(183 255 0 / 34%);
  --cap-fill: rgb(183 255 0 / 7%);
}

.capability--feature {
  background: radial-gradient(circle at 82% 13%, rgb(183 255 0 / 10%), transparent 35%), linear-gradient(145deg, rgb(28 26 30 / 98%), rgb(14 12 21 / 98%));
}

.capability--wide {
  grid-column: auto;
  display: block;
  min-height: 365px;
}

.capability--wide .capability-icon { margin-bottom: 54px; }
.capability--wide > div:first-of-type { position: relative; z-index: 2; }

.capability-icon {
  display: grid;
  place-items: center;
  border-color: var(--cap-border);
  background: var(--cap-fill);
  color: var(--cap-accent);
  box-shadow: inset 0 0 22px var(--cap-fill), 0 14px 30px -24px var(--cap-accent);
}

.capability-icon::before,
.capability-icon::after { display: none; }

.capability-icon__svg {
  width: 44px;
  height: 44px;
  overflow: visible;
  color: var(--cap-accent);
  shape-rendering: geometricPrecision;
}

.capability-icon__svg * { vector-effect: non-scaling-stroke; }

.capability-icon__grid,
.capability-icon__line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
}

.capability-icon__grid { stroke-width: 1; opacity: .28; }
.capability-icon__line { stroke-width: 1.5; opacity: .5; }

.capability-icon__route,
.capability-icon__arrow,
.capability-icon__cursor,
.capability-icon__check {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capability-icon__route { stroke: currentColor; stroke-width: 2.4; }
.capability-icon__arrow { stroke: var(--cap-secondary); stroke-width: 1.8; }
.capability-icon__node { fill: var(--cap-secondary); stroke: var(--cap-accent); stroke-width: 1.5; }

.capability-icon__browser,
.capability-icon__block,
.capability-icon__shield,
.capability-icon__lock {
  stroke: currentColor;
  stroke-width: 1.8;
}

.capability-icon__browser,
.capability-icon__shield { fill: var(--cap-fill); }
.capability-icon__block { fill: transparent; }
.capability-icon__block--two { stroke: var(--cap-secondary); }
.capability-icon__block--three { fill: var(--cap-secondary); opacity: .18; }
.capability-icon__connector { fill: none; stroke: var(--cap-secondary); stroke-width: 1.5; stroke-linecap: round; }
.capability-icon__dot { fill: var(--cap-secondary); }
.capability-icon__cursor { stroke: var(--cap-accent); stroke-width: 1.8; fill: var(--cap-fill); }
.capability-icon__shield { stroke: var(--cap-accent); }
.capability-icon__check { stroke: var(--cap-secondary); stroke-width: 2; }
.capability-icon__lock { fill: var(--cap-secondary); opacity: .25; }

.capability-wire {
  position: absolute;
  right: 28px;
  bottom: 25px;
  width: min(48%, 250px);
  height: 142px;
  border-color: var(--cap-border);
  background-image: linear-gradient(rgb(248 255 243 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(248 255 243 / 5%) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .92;
}

.capability-wire__svg { width: 100%; height: 100%; overflow: visible; }
.capability-wire__route { fill: none; stroke: var(--cap-secondary); stroke-width: 1.5; stroke-linecap: round; opacity: .8; }
.capability-wire__route--soft { stroke: var(--cap-accent); opacity: .36; }
.capability-wire__signal { fill: var(--cap-fill); stroke: var(--cap-accent); stroke-width: 1.5; }
.capability-wire__line { fill: none; stroke: var(--cap-accent); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.capability-wire__node { fill: var(--cap-accent); stroke: var(--cap-secondary); stroke-width: 2; filter: drop-shadow(0 0 8px var(--cap-accent)); }

.capability:hover .capability-icon__svg { filter: drop-shadow(0 0 10px var(--cap-accent)); }
.capability:nth-child(1):hover .capability-icon__svg { transform: translateY(-2px) rotate(-4deg); }
.capability:nth-child(2):hover .capability-icon__svg { transform: translateY(-2px) rotate(3deg); }
.capability:nth-child(3):hover .capability-icon__svg { transform: translateY(-2px) scale(1.04); }
.capability:nth-child(4):hover .capability-icon__svg { transform: translateY(-2px) rotate(-3deg); }

:root[data-theme="light"] .capability {
  --cap-accent: #6b21c7;
  --cap-secondary: #8d2bff;
  --cap-border: rgb(107 33 199 / 34%);
  --cap-fill: rgb(107 33 199 / 7%);
  background: linear-gradient(145deg, #ffffff, #eee7f7);
}

:root[data-theme="light"] .capability:nth-child(1),
:root[data-theme="light"] .capability:nth-child(4) {
  --cap-accent: #6b21c7;
  --cap-secondary: #141018;
  --cap-border: rgb(107 33 199 / 38%);
  --cap-fill: rgb(107 33 199 / 8%);
}

:root[data-theme="light"] .capability:nth-child(2) {
  --cap-accent: #8d2bff;
  --cap-secondary: #6b21c7;
}

:root[data-theme="light"] .capability:nth-child(3) {
  --cap-accent: #141018;
  --cap-secondary: #6b21c7;
  --cap-border: rgb(20 16 24 / 24%);
  --cap-fill: rgb(20 16 24 / 5%);
}

:root[data-theme="light"] .capability--feature {
  background: radial-gradient(circle at 82% 13%, rgb(107 33 199 / 10%), transparent 35%), linear-gradient(145deg, #ffffff, #eee5f7);
}

:root[data-theme="light"] .capability-wire {
  background-image: linear-gradient(rgb(20 16 24 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(107 33 199 / 7%) 1px, transparent 1px);
}

@media (max-width: 760px) {
  .capability-grid { grid-template-columns: 1fr; }
  .capability--wide { min-height: 330px; }
  .capability--wide .capability-icon { margin-bottom: 30px; }
  .capability-wire { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; margin-top: 25px; }
}

@media (max-width: 520px) {
  .capability-wire { height: 118px; }
}

/* 100% viewport calibration: preserve the 80% reference composition at normal browser zoom. */
:root {
  --content: 1280px;
  --header-height: 68px;
}

.container { width: min(var(--content), calc(100% - clamp(32px, 5.5vw, 80px))); }
.site-header { padding: 8px 0; }
.nav-shell { min-height: 48px; gap: 20px; padding: 4px 8px 4px 6px; }
.brand img { width: 38px; height: 38px; flex-basis: 38px; }
.brand strong { font-size: .9rem; }
.site-nav { gap: clamp(12px, 1.8vw, 24px); }
.site-nav a { font-size: .7rem; }
.icon-button { width: 34px; height: 34px; }
.button { min-height: 42px; padding-inline: 16px; font-size: .72rem; }
.button--small { min-height: 34px; }

.hero {
  min-height: min(760px, 100svh);
  padding: calc(var(--header-height) + 58px) 0 76px;
}

.hero-layout {
  grid-template-columns: minmax(0, .84fr) minmax(360px, 1.16fr);
  gap: clamp(28px, 4vw, 64px);
  min-height: 520px;
}

.hero-copy h1 {
  margin-top: 20px;
  font-size: clamp(3rem, 5.7vw, 5.7rem);
}

.hero-lead {
  max-width: 560px;
  margin-top: 22px;
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
}

.hero-actions { margin-top: 25px; }
.hero-signature { margin-top: 28px; gap: 12px; font-size: .54rem; }
.hero-side { padding-bottom: 28px; font-size: .54rem; }
.hero-foot { bottom: 42px; font-size: .52rem; }
.ticker { font-size: .54rem; }
.ticker__track { padding-block: 10px; }

.metric { min-height: 82px; padding: 12px 18px; }
.metric b { font-size: clamp(1.45rem, 2.8vw, 2.35rem); }
.metric span { font-size: .68rem; }

.section { padding-block: clamp(72px, 7.5vw, 112px); }
.section-heading { margin-bottom: 32px; }
.section-heading h2 { max-width: 700px; font-size: clamp(2.25rem, 4.5vw, 4.2rem); }
.section-heading > .lead { max-width: 390px; font-size: .95rem; }

.capability { min-height: 310px; padding: 24px; }
.capability--wide { min-height: 310px; }
.capability-icon { width: 52px; height: 52px; margin-bottom: 34px; border-radius: 10px; }
.capability--wide .capability-icon { margin-bottom: 34px; }
.capability-icon__svg { width: 38px; height: 38px; }
.capability h3 { margin-top: 12px; font-size: clamp(1.4rem, 2.1vw, 2.15rem); }
.capability p:not(.capability-code) { margin-top: 10px; font-size: .84rem; }
.capability .text-link { margin-top: 16px; font-size: .74rem; }
.capability-wire { right: 24px; bottom: 22px; height: 116px; }

.case-card--large .case-art { min-height: 350px; }
.case-art { min-height: 220px; padding: 20px; }
.case-art strong { font-size: clamp(2.25rem, 4.4vw, 4.4rem); }
.case-copy { padding: 20px; }
.case-copy h3 { margin-top: 10px; font-size: clamp(1.25rem, 1.9vw, 1.8rem); }
.case-copy p:not(.case-type) { margin-top: 10px; font-size: .84rem; }

.page-hero { padding-block: 150px 70px; }
.detail-card,
.info-card,
.security-panel,
.project-form { padding: 24px; }
.cta-panel { padding: clamp(26px, 4vw, 48px); }
.site-footer { padding-top: 58px; }

@media (max-width: 1180px) {
  .hero-layout { gap: clamp(24px, 3vw, 42px); }
  .hero-copy h1 { font-size: clamp(3rem, 5.4vw, 5.2rem); }
}

@media (max-width: 980px) {
  :root { --header-height: 64px; }
  .container { width: min(var(--content), calc(100% - 48px)); }
  .hero { min-height: 700px; padding-top: calc(var(--header-height) + 48px); padding-bottom: 66px; }
  .hero-layout { min-height: 500px; }
  .signal-artifact { width: 200px; }
  .signal-interface { width: 236px; }
}

@media (max-width: 760px) {
  .container { width: min(var(--content), calc(100% - 32px)); }
  .site-header { padding: 6px 0; }
  .nav-shell { min-height: 46px; }
  .hero { min-height: auto; padding-top: 104px; padding-bottom: 82px; }
  .hero-layout { grid-template-columns: 1fr; min-height: 610px; }
  .hero-copy h1 { max-width: 9.2ch; font-size: clamp(3rem, 13vw, 4.8rem); }
  .hero-lead { max-width: 500px; font-size: .98rem; }
  .section { padding-block: 70px; }
  .section-heading h2 { font-size: clamp(2.25rem, 10vw, 3.4rem); }
  .section-heading > .lead { max-width: 520px; }
  .capability { min-height: 300px; }
  .capability--wide { min-height: 300px; }
  .capability--wide .capability-icon { margin-bottom: 30px; }
  .capability-wire { height: 112px; }
  .case-art { min-height: 230px; }
  .case-card--large .case-art { min-height: 300px; }
  .page-hero { padding-block: 124px 56px; }
}

@media (max-width: 520px) {
  .nav-shell { padding-inline: 5px; }
  .brand strong { font-size: .84rem; }
  .brand small { max-width: 136px; }
  .hero-copy h1 { font-size: clamp(2.9rem, 14.2vw, 4.4rem); }
  .hero-actions { margin-top: 22px; }
  .hero-signature { margin-top: 24px; }
  .capability { padding: 22px; min-height: 290px; }
  .capability--wide { min-height: 290px; }
  .case-art strong { font-size: 2.85rem; }
}