/* Interaction layer: preserves the original editorial layout and palette. */
.hero-chapter { position: relative; }
.hero { --assembly: 1; }
.hero-bottom::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px;
  height: 1px; background: #6487eb; transform: scaleX(var(--assembly));
  transform-origin: right; opacity: .65;
}
.system-caption .diagram-label { min-width: 180px; text-align: right; }
.live-topology {
  transform: perspective(1100px) rotateX(var(--scene-rx, 0deg)) rotateY(var(--scene-ry, 0deg));
  transition: none; contain: layout style; touch-action: pan-y;
}
.live-topology .grid-lines { opacity: .7; }
.live-topology .central-node { filter: drop-shadow(0 20px 19px #0005); }
.live-topology .node-base { transition: stroke .35s, fill .35s; }
.live-topology .node-near .node-base { stroke: #8baafa; fill: #222e43; }
.live-topology .node-near .device-icon { stroke: #cfddff; }
.connection-base { stroke: #35415b; stroke-width: 1; }
.connection-trace { stroke: #6589e4; stroke-width: 1.5; }
.connection-pulse { fill: #b3caff; stroke: none; }
.support-ring { transition: opacity .5s; }
.system-foot { flex-wrap: wrap; min-height: 43px; }
.motion-toggle {
  margin-left: auto; padding: 8px 2px; color: #a9b9db; background: none;
  border: 0; font-size: 12px; cursor: pointer; line-height: 1.3;
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px;
}
.motion-toggle::before { content: 'Ⅱ'; font-size: 11px; }
.motion-toggle[aria-pressed='true']::before { content: '▷'; }
.motion-toggle:disabled { cursor: default; color: #9fa8ba; }
.motion-toggle:hover:not(:disabled) { color: white; }
.hero[data-stage='2'] .pulse-dot { background: #b7caff; }
.partner { position: relative; --connection: 1; }
.partner::before {
  content: ''; position: absolute; right: var(--pad); top: 0;
  width: 42%; height: 1px; background: #6487eb;
  transform: scaleX(var(--connection)); transform-origin: right;
}
.system-enhanced .partner h2 > span {
  color: #7d91c9;
  background: linear-gradient(90deg, #6489ff 0%, #6489ff calc(var(--connection) * 100%), #88909f calc(var(--connection) * 100%), #88909f 100%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.mini-system { max-width: none; height: clamp(260px, 26vw, 345px); margin: -15px -28px -4px; perspective: 1100px; }
.mini-system > .topology { width: 100%; height: 100%; max-height: none; display: block; }
.mini-system .satellite text { font-size: 14px; letter-spacing: 1.4px; }
.mini-system .device-icon { stroke-width: 2; }
.mini-system .connection-trace { stroke-width: 2; }
.mini-system .central-node { filter: none; }
.mini-system .grid-lines { opacity: .45; }
.topology-note { min-height: 38px; margin: 0 0 25px; padding-top: 12px; border-top: 1px solid #30394a; color: #a9b8d4; font-size: 12px; line-height: 1.6; }
.solution-content { min-height: 266px; }
.choices { align-self: start; }
.choices button { position: relative; isolation: isolate; }
.choices button::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 2px; background: #7e9dff; transform: scaleY(0); transition: transform .35s;
}
.choices button[aria-pressed='true']::before { transform: scaleY(1); }
.choices button b { transition: transform .3s, opacity .3s; }
.choices button:hover b { transform: translate(2px, -2px); }
.process { position: relative; isolation: isolate; --clarity: 1; }
.process::before {
  content: ''; position: absolute; left: var(--pad); right: var(--pad); top: 0;
  height: 1px; background: #4f6db6; transform: scaleX(var(--clarity)); transform-origin: left;
}
.process::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(#425579 0.5px, transparent .5px);
  background-size: 24px 24px; opacity: calc(.055 + var(--clarity) * .025);
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
.process-track { --progress: 1; }
.process-track::before { background: #6b81af; transition: none; }
.step { transition: border-color .4s, color .4s, box-shadow .4s, background .4s; }
.step-connected .step { border-color: #4d6cad; color: #254d98; box-shadow: 0 0 0 5px #7189b812; background: #f1f3f7; }
.process-track h3 { transition: color .4s; }
.step-connected h3 { color: #274879; }
.about { --time-progress: 1; }
.since strong > span { display: inline-block; transform: translateX(calc(var(--time-progress) * 7px)); }
.time-rail { height: 34px; margin-top: 28px; position: relative; max-width: 380px; border-top: 1px solid #343a45; }
.time-rail i { position: absolute; top: -1px; left: 0; height: 1px; width: 100%; background: #7591d7; transform: scaleX(var(--time-progress)); transform-origin: left; }
.time-rail i::after { content: ''; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; background: #a2b9f3; border-radius: 50%; }
.time-rail > span { position: absolute; right: 0; top: 10px; color: #98a5bf; font-size: 12px; }
.contact::before { content: ''; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 1px; background: #ced9ff; transform: scaleX(var(--arrived, 1)); transform-origin: left; }
.button { transform: translate(var(--magnetic-x, 0px), var(--magnetic-y, 0px)); transition: transform .25s ease-out, background .25s, box-shadow .25s; }
.button:hover { transform: translate(var(--magnetic-x, 0px), calc(var(--magnetic-y, 0px) - 1px)); box-shadow: 0 4px 14px #0002; }
.button > span, .text-link > span, .header-cta > span { display: inline-block; transition: transform .3s; }
.button:hover > span, .text-link:hover > span, .header-cta:hover > span { transform: translate(2px, -2px); }
.text-link { position: relative; }
.text-link::after { content: ''; position: absolute; bottom: -1px; height: 1px; width: 100%; left: 0; transform: scaleX(0); transform-origin: left; background: #83a1f3; transition: transform .35s; }
.text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(1); }
.header nav a { position: relative; }
.header nav a::after { content: ''; position: absolute; bottom: -7px; left: 0; right: 0; height: 1px; background: #88a6ff; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.header nav a:hover::after, .header nav a:focus-visible::after { transform: scaleX(1); }
.repair-link { color: #969fab; font-size: 13px; border-bottom-color: #3c414a; }
@media (min-width: 1100px) and (min-height: 850px) and (prefers-reduced-motion: no-preference) {
  .system-enhanced .hero-chapter { padding-bottom: 52svh; }
  .system-enhanced .hero-chapter > .hero { position: sticky; top: 0; }
}
@media (max-width: 1050px) and (min-width: 761px) {
  .mini-system { margin-left: -14px; margin-right: -14px; }
  .motion-toggle { font-size: 11px; }
}
@media (max-width: 760px) {
  .hero-chapter { padding-bottom: 0; }
  .system { pointer-events: auto; }
  .live-topology { transform: none; }
  .live-topology .grid-lines { opacity: .45; }
  .system-foot { font-size: 11px; gap: 7px; }
  .motion-toggle { font-size: 11px; min-height: 44px; }
  .system-foot .pulse-dot { display: none; }
  .mini-system { margin: -7px -17px 0; height: 270px; min-height: 240px; }
  .mini-system > .topology { min-height: 240px; }
  .mini-system .satellite text { font-size: 17px; letter-spacing: 1px; }
  .topology-note { margin-bottom: 20px; font-size: 12px; min-height: 52px; }
  .solution-content { min-height: 295px; }
  .choices { scroll-snap-type: x proximity; }
  .choices button { scroll-snap-align: start; }
  .choices button::before { top: auto; bottom: 0; width: 100%; height: 2px; transform: scaleX(0); }
  .choices button[aria-pressed='true']::before { transform: scaleX(1); }
  .process-track::before { transition: none; }
  .time-rail { max-width: 310px; margin-top: 22px; }
  .contact-row .button { max-width: 100%; gap: 28px; }
  .button:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chapter { padding-bottom: 0 !important; }
  .hero-chapter > .hero { position: relative !important; }
  .live-topology, .button, .since strong > span { transform: none !important; }
  .connection-pulse { display: none; }
  .process-track::before, .hero-bottom::before, .partner::before, .time-rail i, .contact::before, .process::before { transform: none !important; }
}
html[data-motion='paused'] *, html[data-motion='paused'] *::before, html[data-motion='paused'] *::after { animation: none !important; transition: none !important; }
html[data-motion='paused'] { scroll-behavior: auto; }
html[data-motion='paused'] .live-topology, html[data-motion='paused'] .button { transform: none; }
html[data-motion='paused'] .connection-pulse { display: none; }