/* ============================================================
   KONTROL SYSTEMS — design system v2
   Doctrine: black field, hairline structure, typographic mass.
   Accent is a signal, not a theme.
   ============================================================ */

:root{
  --bg:        #050607;
  --bg-2:      #0A0C0E;
  --bg-3:      #101215;
  --line:      #1B1E23;
  --line-2:    #2A2E34;
  --text:      #F4F5F6;
  --muted:     #9BA1A8;
  --dim:       #5B6168;
  --amber:     #FFB224;
  --paper:     #F2F3F4;   /* inverted band */
  --ink:       #050607;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1280px;
  --pad: clamp(20px, 4vw, 48px);
  --header-h: 72px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--amber); color:var(--ink); }

a{ color:inherit; text-decoration:none; }
p a, .prose a{ border-bottom:1px solid var(--line-2); transition:border-color .2s; }
p a:hover, .prose a:hover{ border-color:var(--amber); }

img, svg{ display:block; max-width:100%; }

:focus-visible{ outline:1px solid var(--text); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip-link{
  position:fixed; left:-9999px; top:0; z-index:200;
  background:var(--text); color:var(--ink);
  font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  padding:12px 16px;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-weight:600; letter-spacing:-0.025em; line-height:1.02; text-wrap:balance; }
h1{ font-size:clamp(2.9rem, 7.4vw, 6.6rem); }
h2{ font-size:clamp(2.1rem, 4.6vw, 3.9rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.6rem); letter-spacing:-0.015em; line-height:1.15; }
h4{ font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }

.lead{
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.55; color:var(--muted);
  max-width:52ch; text-wrap:pretty;
}

.eyebrow{
  font:500 11.5px/1 var(--mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim);
  display:flex; align-items:center; gap:12px;
  margin-bottom:26px;
}
.eyebrow::before{ content:""; width:7px; height:7px; background:var(--amber); flex:none; }

.gridref{
  font:400 11px/1.7 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font:500 12.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  padding:17px 26px; border:1px solid transparent;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s;
}
.btn .arrow{ font-family:var(--mono); transition:transform .25s; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-solid{ background:var(--text); color:var(--ink); }
.btn-solid:hover{ background:var(--amber); }
.btn-line{ border-color:var(--line-2); color:var(--text); background:transparent; }
.btn-line:hover{ border-color:var(--text); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  max-width:none;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand-mark{ width:26px; height:26px; flex:none; }
.brand-word{
  font:600 14px/1 var(--mono); letter-spacing:.26em; color:var(--text);
  display:flex; gap:.55em;
}
.brand-word span{ color:var(--dim); font-weight:400; }

.site-nav{ display:flex; align-items:center; gap:clamp(20px, 3vw, 44px); }
.site-nav a:not(.btn){
  font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); padding:8px 0; position:relative;
  transition:color .2s;
}
.site-nav a:not(.btn):hover{ color:var(--text); }
.site-nav a[aria-current="page"]{ color:var(--text); }
.site-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--amber);
}
.site-nav .btn{ padding:13px 20px; }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-2); color:var(--text);
  font:500 11.5px/1 var(--mono); letter-spacing:.2em;
  padding:11px 16px; cursor:pointer;
}

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .site-nav{
    display:none;
    position:fixed; inset:var(--header-h) 0 0 0;
    background:var(--bg);
    border-top:1px solid var(--line);
    padding:10vh var(--pad);
    flex-direction:column; align-items:flex-start; gap:8px;
  }
  .site-nav.open{ display:flex; }
  .site-nav a:not(.btn){
    font-size:clamp(1.7rem, 8vw, 2.6rem);
    font-family:var(--sans); font-weight:600; letter-spacing:-0.02em;
    text-transform:none; color:var(--text);
    padding:14px 0; width:100%; border-bottom:1px solid var(--line);
  }
  .site-nav a[aria-current="page"]::after{ display:none; }
  .site-nav a[aria-current="page"]{ color:var(--amber); }
  .site-nav .btn{ margin-top:34px; padding:17px 26px; }
  html.nav-locked, html.nav-locked body{ overflow:hidden; }
}

/* ---------- hero (home) ---------- */
.hero{
  position:relative;
  min-height:calc(100svh - var(--header-h));
  display:flex; align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero .wrap{ position:relative; z-index:2; width:100%; padding-block:clamp(48px, 6vh, 90px); }
.hero h1{ max-width:13ch; }
.hero .lead{ margin-top:30px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:44px; }

.hero-vis{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.hero-vis svg{ width:100%; height:100%; object-fit:cover; }
.net-line{ fill:none; stroke:var(--line); stroke-width:1; }
.net-arc{ fill:none; stroke:var(--line-2); stroke-width:1; }
.net-node{ fill:#3A4046; }
.net-hot{ fill:var(--amber); }
.net-pulse{
  fill:none; stroke:var(--amber); stroke-width:1; opacity:0;
  transform-origin:center; transform-box:fill-box;
  animation:pulse 4.5s ease-out infinite;
}
.net-pulse.d1{ animation-delay:1.6s; }
.net-pulse.d2{ animation-delay:3.1s; }
@keyframes pulse{
  0%{ opacity:0; transform:scale(.25); }
  12%{ opacity:.55; }
  60%{ opacity:0; transform:scale(1); }
  100%{ opacity:0; }
}
.hero-vis::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 34%, transparent 62%),
    linear-gradient(0deg, var(--bg) 4%, transparent 42%);
}

.scroll-cue{
  position:absolute; right:var(--pad); bottom:34px; z-index:2;
  font:400 10.5px/1 var(--mono); letter-spacing:.3em; color:var(--dim);
  writing-mode:vertical-rl;
}

/* ---------- sections ---------- */
.section{ padding-block:clamp(80px, 9vw, 128px); border-top:1px solid var(--line); }
.section.alt{ background:var(--bg-2); }
.section-head{ max-width:880px; margin-bottom:clamp(42px, 5vw, 68px); }
.section-head .lead{ margin-top:26px; }

/* statement band */
.statement{ padding-block:clamp(92px, 11vw, 148px); border-top:1px solid var(--line); }
.statement h2{ font-size:clamp(2.3rem, 5.6vw, 4.7rem); max-width:20ch; }
.statement .lead{ margin-top:30px; }

/* ---------- doctrine (numbered) ---------- */
.doct{ border-top:1px solid var(--line); }
.doct-item{
  display:grid;
  grid-template-columns: 84px minmax(0, 340px) 1fr;
  gap:clamp(18px, 3.5vw, 64px);
  padding-block:clamp(34px, 4.5vw, 56px);
  border-bottom:1px solid var(--line);
}
.doct-item .num{
  font:400 13px/1.9 var(--mono); color:var(--dim); letter-spacing:.1em;
}
.doct-item h3{ padding-top:2px; }
.doct-item p{ color:var(--muted); max-width:58ch; }
@media (max-width: 760px){
  .doct-item{ grid-template-columns: 56px 1fr; }
  .doct-item p{ grid-column:2; margin-top:10px; }
}

/* ---------- platform index rows ---------- */
.plat{ border-top:1px solid var(--line); }
.plat-row{
  display:grid;
  grid-template-columns: 64px minmax(0,1.15fr) minmax(0,1fr) 60px;
  align-items:center;
  gap:clamp(16px, 3vw, 48px);
  padding-block:clamp(34px, 4.6vw, 58px);
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background .25s;
}
.plat-row:hover{ background:var(--bg-2); }
.plat-num{ font:400 12.5px/1 var(--mono); color:var(--dim); letter-spacing:.1em; }
.plat-tag{
  font:500 10.5px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); display:block; margin-bottom:14px;
}
.plat-name{
  font-size:clamp(1.6rem, 3.4vw, 2.9rem);
  font-weight:600; letter-spacing:-0.02em; line-height:1.04;
}
.plat-desc{ color:var(--muted); font-size:.98rem; max-width:52ch; }
.plat-arrow{
  font:400 22px/1 var(--mono); color:var(--dim);
  justify-self:end; transition:transform .25s, color .25s;
}
.plat-row:hover .plat-arrow{ transform:translateX(6px); color:var(--amber); }
.plat-row.plat-open .plat-name{ color:var(--muted); font-weight:500; }
@media (max-width: 860px){
  .plat-row{ grid-template-columns: 44px 1fr 34px; }
  .plat-desc{ grid-column:2; margin-top:12px; }
  .plat-arrow{ grid-row:1; grid-column:3; }
}

/* ---------- steps ---------- */
.steps{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.step{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(30px, 3.4vw, 48px);
  background:var(--bg);
}
.step .num{
  display:block; font:400 12.5px/1 var(--mono); color:var(--dim);
  letter-spacing:.1em; margin-bottom:26px;
}
.step h3{ margin-bottom:16px; }
.step p{ color:var(--muted); font-size:.97rem; }
@media (max-width: 860px){ .steps{ grid-template-columns:1fr; } }

/* ---------- capability grid (product pages) ---------- */
.cap-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.cap{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(28px, 3vw, 44px);
  min-height:230px;
  display:flex; flex-direction:column; gap:14px;
  background:var(--bg);
  transition:background .25s;
}
.cap:hover{ background:var(--bg-2); }
.cap .gridref{ color:var(--dim); }
.cap h3{ font-size:1.15rem; }
.cap p{ color:var(--muted); font-size:.95rem; }
@media (max-width: 980px){ .cap-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px){ .cap-grid{ grid-template-columns:1fr; } }

/* ---------- spec rows ---------- */
.spec{ border-top:1px solid var(--line); }
.spec-row{
  display:grid; grid-template-columns:minmax(0, 300px) 1fr;
  gap:clamp(18px, 4vw, 72px);
  padding-block:clamp(26px, 3.2vw, 40px);
  border-bottom:1px solid var(--line);
}
.spec-row dt{
  font:500 12px/1.8 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text);
}
.spec-row dd{ color:var(--muted); max-width:70ch; }
@media (max-width: 720px){ .spec-row{ grid-template-columns:1fr; gap:8px; } }

/* ---------- chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:0; padding:0; }
.chips li, .chips span{
  display:inline-flex; align-items:center; gap:11px;
  font:400 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line-2);
  padding:12px 18px;
  transition:border-color .25s, color .25s;
}
.chips li::before, .chips span::before{
  content:""; width:5px; height:5px; background:var(--amber); flex:none; opacity:.85;
}
.chips li:hover, .chips span:hover{ border-color:var(--dim); color:var(--text); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:clamp(22px, 2.6vw, 32px) 0;
  font-size:clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight:500; letter-spacing:-0.01em;
  color:var(--text); transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font:400 20px/1 var(--mono); color:var(--dim); flex:none;
  transition:transform .25s, color .2s;
}
.faq details[open] summary::after{ transform:rotate(45deg); color:var(--amber); }
.faq details p{ color:var(--muted); max-width:75ch; padding-bottom:30px; margin-top:-6px; }

/* ---------- CTA band (inverted) ---------- */
.cta-band{
  background:var(--paper); color:var(--ink);
  padding-block:clamp(84px, 10vw, 136px);
}
.cta-band .eyebrow{ color:#70757C; }
.cta-band h2{ max-width:22ch; margin-bottom:44px; font-size:clamp(2.2rem, 5vw, 4.2rem); }
.cta-band .btn-solid{ background:var(--ink); color:var(--paper); }
.cta-band .btn-solid:hover{ background:#2A2E33; }
.cta-band .gridref{ color:#8B9096; }

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  padding-block:clamp(48px, 6.5vw, 88px) clamp(44px, 6vw, 80px);
}
.page-hero h1{ max-width:15ch; }
.page-hero .lead{ margin-top:30px; }

/* ---------- prose ---------- */
.prose{ max-width:760px; }
.prose p{ color:var(--muted); margin-bottom:1.5em; }
.prose p strong{ color:var(--text); font-weight:600; }
.prose h3{ color:var(--text); margin:2.2em 0 .8em; }

/* ---------- contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);
  gap:clamp(48px, 6vw, 110px);
  align-items:start;
}
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }

.form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:26px 26px;
  border-top:1px solid var(--line); padding-top:44px;
}
.form-grid .full{ grid-column:1 / -1; }
@media (max-width: 640px){ .form-grid{ grid-template-columns:1fr; } }

label{
  display:block;
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin-bottom:12px;
}
input, select, textarea{
  width:100%;
  background:transparent;
  border:1px solid var(--line-2);
  color:var(--text);
  font:400 15px/1.5 var(--sans);
  padding:15px 16px;
  transition:border-color .2s;
  border-radius:0;
}
textarea{ min-height:170px; resize:vertical; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--text); }
select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235B6168'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
::placeholder{ color:var(--dim); }

.form-status{
  font:400 11px/1.7 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); margin-top:18px; min-height:1em;
}
.form-note{ color:var(--dim); font-size:.85rem; margin-top:14px; max-width:56ch; }

.contact-aside{ border-top:1px solid var(--line); padding-top:44px; }
.contact-aside h4{ margin-bottom:14px; }
.contact-aside p{ color:var(--muted); font-size:.95rem; margin-bottom:30px; max-width:38ch; }
.contact-aside a{ border-bottom:1px solid var(--line-2); transition:border-color .2s; }
.contact-aside a:hover{ border-color:var(--amber); }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:clamp(70px, 8vw, 110px) 40px;
  background:var(--bg);
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap:clamp(36px, 5vw, 72px);
  margin-bottom:clamp(64px, 8vw, 110px);
}
.foot-grid p{ color:var(--dim); font-size:.9rem; margin-top:20px; max-width:34ch; }
.foot-grid h4{ margin-bottom:20px; }
.foot-grid ul{ list-style:none; }
.foot-grid li{ margin-bottom:12px; }
.foot-grid li a{
  color:var(--muted); font-size:.93rem; transition:color .2s;
}
.foot-grid li a:hover{ color:var(--text); }
@media (max-width: 860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .foot-grid{ grid-template-columns:1fr; } }

.foot-bottom{
  display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:space-between;
  border-top:1px solid var(--line); padding-top:26px;
}

/* ---------- 404 ---------- */
.err .wrap{ padding-block:clamp(120px, 18vw, 240px); }
.err-code{
  font:500 11.5px/1 var(--mono); letter-spacing:.26em; color:var(--amber);
  margin-bottom:26px;
}
.err h1{ font-size:clamp(2.2rem, 5.5vw, 4.4rem); }
.err p{ color:var(--muted); margin:26px 0 44px; max-width:52ch; }
.err-links{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .net-pulse{ animation:none; }
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--line-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--dim); }

/* ============================================================
   v3 — MOTION & ILLUSTRATION SYSTEM
   Everything hairline, everything quiet, amber = live signal.
   ============================================================ */

/* ---------- svg shared ---------- */
.svgmono{
  font:400 10px var(--mono); letter-spacing:.18em;
  fill:var(--dim); text-transform:uppercase;
}
.svgmono.hot{ fill:var(--amber); }
.s-line{ stroke:#39414A; fill:none; stroke-width:1; }
.s-line2{ stroke:#525C66; fill:none; stroke-width:1; }
.s-txt{ stroke:#6E7883; fill:none; stroke-width:1.4; }
.s-fill{ fill:#6E7883; }
.s-amber{ stroke:var(--amber); fill:none; stroke-width:1.4; }
.f-amber{ fill:var(--amber); }

/* ---------- keyframes ---------- */
@keyframes drawin{ to{ stroke-dashoffset:0; } }
@keyframes blink{ 0%,100%{ opacity:.15; } 50%{ opacity:1; } }
@keyframes blinkhard{ 0%,45%,100%{ opacity:0; } 50%,90%{ opacity:1; } }
@keyframes sweep{ to{ transform:rotate(360deg); } }
@keyframes ringout{
  0%{ transform:scale(.3); opacity:.7; }
  70%{ opacity:0; } 100%{ transform:scale(1); opacity:0; }
}
@keyframes riseloop{
  0%{ transform:translateY(8px); opacity:0; }
  25%{ opacity:1; } 75%{ opacity:1; }
  100%{ transform:translateY(-10px); opacity:0; }
}
@keyframes chainstep{
  0%,100%{ opacity:.25; } 15%,60%{ opacity:1; }
}
@keyframes gatepass{
  0%,18%{ transform:translateX(0); opacity:1; }
  38%,55%{ transform:translateX(26px); opacity:1; }   /* wait at gate */
  80%{ transform:translateX(64px); opacity:1; }
  90%,100%{ transform:translateX(64px); opacity:0; }
}
@keyframes gatetick{
  0%,36%,100%{ stroke:#3A4046; } 42%,70%{ stroke:var(--amber); }
}
@keyframes barsgrow{
  0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); }
}
@keyframes cursor{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes flicker{
  0%,60%,100%{ opacity:1; }
  62%,66%,70%{ opacity:.1; }
  64%,68%{ opacity:.9; }
}
@keyframes drift1{ 0%{transform:translate(0,0)} 50%{transform:translate(9px,-6px)} 100%{transform:translate(0,0)} }
@keyframes drift2{ 0%{transform:translate(0,0)} 50%{transform:translate(-7px,5px)} 100%{transform:translate(0,0)} }
@keyframes tick{ 0%,90%,100%{ opacity:0 } 12%,80%{ opacity:1 } }

/* reveal stagger */
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
.reveal.d5{ transition-delay:.40s; } .reveal.d6{ transition-delay:.48s; }

/* ---------- ticker ---------- */
.ticker{
  border-block:1px solid var(--line);
  overflow:hidden; padding-block:16px;
  background:var(--bg);
}
.ticker-track{
  display:flex; gap:56px; width:max-content;
  animation:tickmove 36s linear infinite;
}
.ticker span{
  font:500 11px/1 var(--mono); letter-spacing:.26em; text-transform:uppercase;
  color:var(--dim); display:flex; align-items:center; gap:56px; white-space:nowrap;
}
.ticker span::after{ content:""; width:6px; height:6px; background:var(--amber); opacity:.8; }
@keyframes tickmove{ to{ transform:translateX(-50%); } }

/* ---------- hero scene ---------- */
.net-draw{
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:drawin 2.4s ease-out forwards;
}
.net-draw.a2{ animation-delay:.35s; } .net-draw.a3{ animation-delay:.7s; }
.net-draw.a4{ animation-delay:1.05s; } .net-draw.a5{ animation-delay:1.4s; }
.hero-sweep{
  transform-origin:center; transform-box:fill-box;
  animation:sweep 9s linear infinite;
}
.hero-blink{ animation:blink 3.4s ease-in-out infinite; }
.hero-blink.b2{ animation-delay:1.2s; } .hero-blink.b3{ animation-delay:2.1s; }
.hero-label{ animation:tick 8s ease-in-out infinite; }
.hero-label.l2{ animation-delay:2.6s; } .hero-label.l3{ animation-delay:5.2s; }

/* ---------- glyphs (capability icons) ---------- */
.glyph{ width:52px; height:52px; flex:none; }
.glyph .orbitline{ transform-origin:center; transform-box:fill-box; animation:sweep 7s linear infinite; }
.glyph .ring{ transform-origin:center; transform-box:fill-box; animation:ringout 3.2s ease-out infinite; }
.glyph .ring.r2{ animation-delay:1.6s; }
.glyph .rise{ animation:riseloop 2.8s linear infinite; }
.glyph .rise.r2{ animation-delay:.9s; } .glyph .rise.r3{ animation-delay:1.8s; }
.glyph .c1{ animation:chainstep 4.2s ease-in-out infinite; }
.glyph .c2{ animation:chainstep 4.2s ease-in-out infinite 1.05s; }
.glyph .c3{ animation:chainstep 4.2s ease-in-out infinite 2.1s; }
.glyph .c4{ animation:chainstep 4.2s ease-in-out infinite 3.15s; }
.glyph .mover{ animation:gatepass 5s ease-in-out infinite; }
.glyph .gate{ animation:gatetick 5s ease-in-out infinite; }
.glyph .bar{ transform-origin:bottom; transform-box:fill-box; animation:barsgrow 3s ease-in-out infinite; }
.glyph .bar.b2{ animation-delay:.4s; } .glyph .bar.b3{ animation-delay:.8s; } .glyph .bar.b4{ animation-delay:1.2s; }
.glyph .cur{ animation:cursor 1.1s steps(1) infinite; }
.glyph .flick{ animation:flicker 6s linear infinite; }
.glyph .dash{ stroke-dasharray:4 5; animation:dashmove 1.6s linear infinite; }
@keyframes dashmove{ to{ stroke-dashoffset:-18; } }
.glyph .drifta{ animation:drift1 6s ease-in-out infinite; }
.glyph .driftb{ animation:drift2 7s ease-in-out infinite; }

.cap .glyph{ margin-bottom:6px; }

/* doctrine glyph column */
.doct-item{ grid-template-columns: 84px minmax(0,340px) 1fr 64px; }
.doct-item .glyph{ justify-self:end; align-self:start; }
@media (max-width: 760px){
  .doct-item{ grid-template-columns:56px 1fr 44px; }
  .doct-item p{ grid-column:2 / -1; }
}

/* platform row vignettes */
.plat-row{ grid-template-columns: 64px minmax(0,1.05fr) minmax(0,1fr) 120px 40px; }
.plat-vis{ width:120px; height:72px; justify-self:end; opacity:.85; }
.plat-row:hover .plat-vis{ opacity:1; }
@media (max-width: 1020px){
  .plat-row{ grid-template-columns:44px 1fr 34px; }
  .plat-vis{ display:none; }
}

/* ---------- product hero with illustration ---------- */
.ph-grid{
  display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(40px, 5vw, 90px); align-items:center;
}
.ph-illus{ border:1px solid var(--line); background:var(--bg-2); }
.ph-illus svg{ width:100%; height:auto; display:block; }
@media (max-width: 960px){
  .ph-grid{ grid-template-columns:1fr; }
  .ph-illus{ max-width:560px; }
}

/* ---------- wide diagram band ---------- */
.diagram{
  border-top:1px solid var(--line);
  background:var(--bg-2);
  padding-block:clamp(70px, 8vw, 110px);
}
.diagram .wrap > svg{ width:100%; height:auto; display:block; margin-top:clamp(36px, 5vw, 64px); }
.diagram .eyebrow{ margin-bottom:0; }

/* diagram anims */
.pkt{ animation:pktflow 6s linear infinite; }
.pkt.p2{ animation-delay:2s; } .pkt.p3{ animation-delay:4s; }
@keyframes pktflow{
  0%{ transform:translateX(0); opacity:0; }
  6%{ opacity:1; } 90%{ opacity:1; }
  100%{ transform:translateX(var(--tx, 300px)); opacity:0; }
}
.branch{ animation:chainstep 6s ease-in-out infinite; }
.branch.b2{ animation-delay:2s; } .branch.b3{ animation-delay:4s; }
.buffer-dot{ animation:bufwait 7s ease-in-out infinite; }
@keyframes bufwait{
  0%{ transform:translateX(0); opacity:0; } 8%{ opacity:1; }
  30%,58%{ transform:translateX(var(--bx, 180px)); opacity:1; }   /* hold at buffer */
  86%{ transform:translateX(var(--tx, 420px)); opacity:1; }
  92%,100%{ transform:translateX(var(--tx, 420px)); opacity:0; }
}
.linkbreak{ animation:flicker 7s linear infinite; }
.verify{ animation:tick 5s ease-in-out infinite; }

/* ---------- ambient accents ---------- */
.beacon{ width:120px; height:120px; }
.beacon .ring{ transform-origin:center; transform-box:fill-box; animation:ringout 3.6s ease-out infinite; }
.beacon .ring.r2{ animation-delay:1.2s; } .beacon .ring.r3{ animation-delay:2.4s; }

.hero-lite{
  position:absolute; right:clamp(-80px, -4vw, 0px); top:50%; transform:translateY(-50%);
  width:min(46vw, 620px); opacity:.55; pointer-events:none;
}
.page-hero{ position:relative; overflow:hidden; }
.page-hero .wrap{ position:relative; z-index:2; }
@media (max-width: 960px){ .hero-lite{ display:none; } }

.err-vis{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:.5; pointer-events:none;
}
.err-vis svg{ width:min(70vw, 640px); }
.err{ position:relative; overflow:hidden; }
.err .wrap{ position:relative; z-index:2; }

/* ---------- reduced motion: freeze the field ---------- */
@media (prefers-reduced-motion: reduce){
  .ticker-track, .net-draw, .hero-sweep, .hero-blink, .hero-label,
  .glyph *, .pkt, .branch, .buffer-dot, .linkbreak, .verify,
  .beacon .ring, .net-pulse{
    animation:none !important;
  }
  .net-draw{ stroke-dashoffset:0; }
}

/* ============================================================
   v4 — CANVAS SCENES (de-boxed, cinematic)
   ============================================================ */
canvas[data-scene]{ display:block; width:100%; height:100%; }

.hero-vis canvas{ position:absolute; inset:0; }

/* product hero: no frame, bleeds toward viewport edge */
.ph-illus{
  border:0; background:transparent;
  aspect-ratio:4 / 3;
  margin-right:calc(-1 * clamp(0px, 4vw, 60px));
}
@media (max-width: 960px){ .ph-illus{ margin-right:0; aspect-ratio:16/10; } }

/* wide bands */
.diagram canvas{
  width:100%; aspect-ratio: 1200 / 320; display:block;
  margin-top:clamp(36px, 5vw, 64px);
}
@media (max-width: 700px){ .diagram canvas{ aspect-ratio: 1200 / 480; } }

/* row minis */
.plat-vis{ width:120px; height:72px; }
canvas.plat-vis{ width:120px; height:72px; }

/* ambient */
.hero-lite canvas{ aspect-ratio:1; }
canvas.beacon{ width:130px; height:130px; margin-bottom:26px; }
.err-vis canvas{ width:min(70vw, 620px); height:auto; aspect-ratio:1; }

/* rounded stroke language for the small glyphs */
.glyph *{ stroke-linecap:round; stroke-linejoin:round; }