body{margin:0;background:#FFFFFF}
a{color:#B84A00}a:hover{color:#0B1220}
.gridbg{background-image:linear-gradient(rgba(11,18,32,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,18,32,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 55% 45%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 55% 45%,#000 20%,transparent 78%)}
.gridbgDark{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 75%)}
.silverText{background:linear-gradient(100deg,#FF6A00 0%,#FFB347 30%,#FF6A00 55%,#FF8A2B 78%,#FF6A00 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
.btnP:hover{filter:brightness(1.12)}
.btnS:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.4)}
.blink{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.ico{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.swap{animation:swap .8s cubic-bezier(.22,.61,.36,1)}
@keyframes swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{to{stroke-dashoffset:-18}}

/* nav */
.navBtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:0;color:#E4DFD7;font:500 15px/1 'Inter',system-ui,sans-serif;text-decoration:none;cursor:pointer}
.navBtn:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
.mItem{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:14px;text-decoration:none;color:#0B1220}
.mItem:hover{background:#F7F1EA;color:#0B1220}
.mIco{flex:none;width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#FFFFFF,#F4EADD);color:#B84A00;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(11,18,32,.08)}
.mobLink{display:block;padding:10px 0;color:#0B1220;text-decoration:none;font-size:15px;border-bottom:1px solid #F1ECE5}
.mobOnly{display:none}
@media (max-width:1060px){.navLinks{display:none}.mobOnly{display:inline-flex}}
@media (max-width:520px){.hdrDemo{display:none}}

/* hero orbit */
.heroGrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
@media (max-width:1100px){.heroGrid{grid-template-columns:minmax(0,1fr)}}
.orbitWrap{position:relative;width:min(620px,100%);aspect-ratio:1/1}
.spin{position:absolute;inset:0;animation:spin 90s linear infinite}
.counter{position:absolute;inset:0;animation:spin 90s linear infinite reverse}
.heroViz.still *{animation-play-state:paused!important}
.rot{transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite}
.rotR{transform-box:fill-box;transform-origin:center;animation:spin 28s linear infinite reverse}
.sweep{position:absolute;inset:9%;border-radius:50%;animation:spin 14s linear infinite}
/* One continuous 36s cycle, 6s per domain, with 1.4s overlaps so domains cross-fade into each other.
   Every layer below runs on keyframes delayed by --d (its domain's slot); nothing is switched by script. */
.spoke{position:absolute;left:50%;top:50%;width:41%;height:1px;margin-top:-.5px;transform-origin:0 50%;background:rgba(255,255,255,.16)}
.beam{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;opacity:0;transform-origin:0 50%;animation:kB 36s ease-in-out infinite backwards;animation-delay:var(--d)}
.beamB{background:linear-gradient(90deg,var(--p),var(--p));box-shadow:0 0 14px rgba(255,106,0,.35)}
.beamT{background:linear-gradient(90deg,var(--p),var(--t));box-shadow:0 0 14px rgba(220,38,38,.35);animation-name:kBeamT}
.spoke.info .beamT{background:linear-gradient(90deg,var(--p),var(--p));box-shadow:0 0 14px rgba(255,106,0,.35)}
.pw{position:absolute;inset:0}
.pwIn{animation:kOff 36s ease-in-out infinite backwards;animation-delay:var(--d)}
.pwOut{opacity:0;animation:kOn 36s ease-in-out infinite backwards;animation-delay:var(--d)}
@keyframes kT{0%{opacity:0}3.33%{opacity:1}8.33%{opacity:1}11.67%{opacity:0}100%{opacity:0}}
@keyframes kB{0%{opacity:0}8.33%{opacity:0}11.67%{opacity:1}15.56%{opacity:1}19.44%{opacity:0}100%{opacity:0}}
@keyframes kBeamT{0%{opacity:0;transform:scaleX(.1)}3.33%{opacity:1;transform:scaleX(1)}8.33%{opacity:1;transform:scaleX(1)}11.67%{opacity:0;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes kOn{0%{opacity:0}3.33%{opacity:1}15.56%{opacity:1}19.44%{opacity:0}100%{opacity:0}}
@keyframes kOff{0%{opacity:1}3.33%{opacity:0}15.56%{opacity:0}19.44%{opacity:1}100%{opacity:1}}
@keyframes kRing{0%{opacity:0;transform:scale(.86)}3.33%{opacity:1;transform:scale(1)}8.33%{opacity:1;transform:scale(1)}11.67%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(.86)}}
@keyframes kRingB{0%{opacity:0;transform:scale(.94)}8.33%{opacity:0;transform:scale(.94)}11.67%{opacity:1;transform:scale(1)}15.56%{opacity:1;transform:scale(1)}19.44%{opacity:0;transform:scale(1.08)}100%{opacity:0;transform:scale(.94)}}
@keyframes kIco{0%{color:#E9E4DC}3.33%{color:var(--t)}8.33%{color:var(--t)}11.67%{color:#FFFFFF}15.56%{color:#FFFFFF}19.44%{color:#E9E4DC}100%{color:#E9E4DC}}
@keyframes kIcoI{0%{color:#E9E4DC}3.33%{color:var(--p)}8.33%{color:var(--p)}11.67%{color:#FFFFFF}15.56%{color:#FFFFFF}19.44%{color:#E9E4DC}100%{color:#E9E4DC}}
.pkt{position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%}
.pIn{background:#8C97AA;animation:pIn 3.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes pIn{0%{left:88%;opacity:0}20%{opacity:.85}80%{opacity:.85}100%{left:30%;opacity:0}}
.pOut{background:#FFFFFF;box-shadow:0 0 0 2px var(--p),0 0 10px var(--p);animation:pOut 1.8s cubic-bezier(.45,0,.55,1) infinite}
.pOut.late{animation-delay:.9s}
@keyframes pOut{0%{left:28%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:86%;opacity:0}}
/* domain nodes: every state is its own layer on the shared cycle */
.node{position:absolute;width:15.5%;aspect-ratio:1/1;transform:translate(-50%,-50%);z-index:2}
.nodeDisc{position:absolute;inset:0;border-radius:50%;background:linear-gradient(160deg,#1A2338,#111A2C);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 30px -16px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;overflow:hidden}
.nFill{position:absolute;inset:0;border-radius:50%;background:linear-gradient(150deg,#FFB347,var(--p) 55%,#C24E00);opacity:0;animation:kB 36s ease-in-out infinite backwards;animation-delay:var(--d)}
.nIco{position:relative;color:#E9E4DC;animation:kIco 36s ease-in-out infinite backwards;animation-delay:var(--d)}
.node.info .nIco{animation-name:kIcoI}
.nRing{position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--t);opacity:0;animation:kRing 36s ease-in-out infinite backwards;animation-delay:var(--d)}
.nRingB{border-color:var(--p);animation-name:kRingB}
.node.info .nRingT{border-color:var(--p)}
.nHalo{position:absolute;inset:-30%;border-radius:50%;opacity:0;animation:kT 36s ease-in-out infinite backwards;animation-delay:var(--d)}
.nHaloB{background:radial-gradient(closest-side,rgba(255,106,0,.22),rgba(255,106,0,0));animation-name:kB}
.nHaloT{background:radial-gradient(closest-side,rgba(220,38,38,.24),rgba(220,38,38,0))}
.node.info .nHaloT{background:radial-gradient(closest-side,rgba(255,106,0,.22),rgba(255,106,0,0))}
.nodeLbl{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;white-space:nowrap;font:600 13px/1.1 'Inter',system-ui,sans-serif;color:#EDE8E0}
.badges{display:grid}
.badges>span{grid-area:1/1;justify-self:center}
.nodeSt{font:500 10px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:999px;color:#FFFFFF;opacity:0;animation:kT 36s ease-in-out infinite backwards;animation-delay:var(--d)}
.bDet{background:var(--t)}
.bReq{background:var(--p)}
.bRes{background:var(--p);animation-name:kB}
/* hub status text follows the 6s rhythm: analysing, then acting */
.hubSt{display:grid}
.hubSt>span{grid-area:1/1}
.hsA{animation:kHA 6s ease-in-out infinite}
.hsB{opacity:0;animation:kHB 6s ease-in-out infinite}
@keyframes kHA{0%{opacity:1}45%{opacity:1}60%{opacity:0}92%{opacity:0}100%{opacity:1}}
@keyframes kHB{0%{opacity:0}45%{opacity:0}60%{opacity:1}92%{opacity:1}100%{opacity:0}}
/* status card: 12 stacked messages, each fading in for its 3s slot and out into the next */
.hudStack{display:grid}
.hudMsg{grid-area:1/1;display:flex;align-items:center;gap:14px;opacity:0;animation:kMsg 36s ease-in-out infinite backwards}
@keyframes kMsg{0%{opacity:0;transform:translateY(8px)}2.6%{opacity:1;transform:translateY(0)}7.6%{opacity:1;transform:translateY(0)}10%{opacity:0;transform:translateY(-8px)}100%{opacity:0;transform:translateY(-8px)}}
.segBar{display:block;height:100%;border-radius:2px;opacity:0;animation:kOn 36s ease-in-out infinite backwards}
.cPulse{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--p);animation:cp 3.6s cubic-bezier(.22,.61,.36,1) infinite}
.cPulse.late{animation-delay:1.8s}
@keyframes cp{from{transform:scale(1);opacity:.55}to{transform:scale(1.75);opacity:0}}
@media (max-width:560px){.nodeLbl{font-size:11px}.nodeLblName{display:none}.cTxt{display:none}}

.indCard{transition:background-color .5s var(--ez)}
.indCard:hover{background-color:#FFFFFF!important}
.indArrow{color:#A3ADBD;transition:color .5s var(--ez),transform .5s var(--ez)}
.indCard:hover .indArrow{color:var(--p);transform:translateX(3px)}
/* platform: verbs × domains */
.vbBtn{display:flex;flex-direction:column;gap:6px;min-height:44px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#E4DFD7;cursor:pointer;text-align:left;font:inherit;transition:background-color .8s var(--ez),border-color .8s var(--ez),color .8s var(--ez),box-shadow .8s var(--ez)}
.vbBtn:hover{background-color:rgba(255,255,255,.12)}
.vbBtn.on{background-color:#FFFFFF;color:#0B1220;border-color:#FFFFFF;box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
.vbCount{flex:none;font:500 11px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.14);transition:background-color .8s var(--ez),color .8s var(--ez)}
.vbBtn.on .vbCount{background:var(--p);color:var(--s)}
.dmCard{scroll-margin-top:24px;border-radius:20px;padding:26px;background:#FAF8F5;border:1px solid #E8E1D6;display:flex;flex-direction:column;gap:12px}
.dmHit{font:500 11px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--pt);white-space:nowrap}
.vChip{font-size:13px;padding:6px 11px;border-radius:999px;background:#FFFFFF;border:1px solid #E6DFD4;color:#2B3A57;transition:opacity .9s var(--ez),background-color .9s var(--ez),border-color .9s var(--ez),color .9s var(--ez)}
.vChip.hit{background:#FFF1E5;border-color:var(--p);color:var(--pt)}
.vChip.dim{opacity:.32}
/* scenario — one colour per state: observe slate, detected orange, verifying blue, boundary amber, resolved green */
.scWrap{--cObs:#475569;--cThr:#DC2626;--cInf:#2563EB;--cChk:#6D28D9;--cOk:#047857}
.scBoard{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr))}
.scMap{position:relative;width:100%;aspect-ratio:1/0.84;min-height:380px}
.scLn{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.scBase{stroke:#C9D0DA;stroke-width:1.2}
.scObs{stroke:var(--p);stroke-width:1.1;stroke-dasharray:2 6;opacity:.2;animation:dash 1.8s linear infinite;transition:opacity 1.2s var(--ez)}
.scObs.on{opacity:.8}
.scFlow{stroke-width:2.6;stroke-dasharray:7 7;opacity:0;animation:dash .9s linear infinite;transition:opacity 1.2s var(--ez),stroke 1.2s var(--ez)}
.scFlow.on{opacity:1}
.scNode{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:170px;text-align:center;z-index:2}
.pWs{left:15%;top:36%}.pPh{left:15%;top:79%}.pAi{left:85%;top:36%}.pSv{left:85%;top:79%}
.scIcoW{position:relative;width:64px;height:64px;margin-bottom:2px}
.scHalo{position:absolute;inset:-18px;border-radius:50%;opacity:0;transition:opacity 1.2s var(--ez);animation:breathe 2.8s ease-in-out infinite}
.hObs{background:radial-gradient(closest-side,rgba(71,85,105,.22),rgba(71,85,105,0))}
.hThr{background:radial-gradient(closest-side,rgba(220,38,38,.26),rgba(220,38,38,0))}
.hInf{background:radial-gradient(closest-side,rgba(37,99,235,.22),rgba(37,99,235,0))}
.hChk{background:radial-gradient(closest-side,rgba(109,40,217,.22),rgba(109,40,217,0))}
.hOk{background:radial-gradient(closest-side,rgba(4,120,87,.24),rgba(4,120,87,0))}
.scNode.s-obs .hObs,.scNode.s-thr .hThr,.scNode.s-inf .hInf,.scNode.s-chk .hChk,.scNode.s-ok .hOk{opacity:1}
@keyframes breathe{50%{transform:scale(1.1)}}
.scIco{position:absolute;inset:0;border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(160deg,#FFFFFF,#F1EAE0);border:1.5px solid #D9D0C2;color:var(--s);box-shadow:0 14px 30px -18px rgba(11,18,32,.45);transition:border-color 1.2s var(--ez),color 1.2s var(--ez)}
.scFill{position:absolute;inset:0;background:linear-gradient(150deg,#059669,#065F46);opacity:0;transition:opacity 1.2s var(--ez)}
.scIco svg{position:relative}
.scNode.s-obs .scIco{border-color:var(--cObs);color:var(--cObs)}
.scNode.s-thr .scIco{border-color:var(--cThr);color:var(--cThr)}
.scNode.s-inf .scIco{border-color:var(--cInf);color:var(--cInf)}
.scNode.s-chk .scIco{border-color:var(--cChk);color:var(--cChk)}
.scNode.s-ok .scIco{border-color:var(--cOk);color:#FFFFFF}
.scNode.s-ok .scFill{opacity:1}
.scNode.s-done .scIco{border-color:var(--cOk);color:var(--cOk)}
.scName{font:600 13px/1.2 'Inter',system-ui,sans-serif;color:#0B1220;white-space:nowrap;background:rgba(250,246,240,.94);padding:2px 7px;border-radius:7px}
.scSub{font:400 11px/1.3 'Inter',system-ui,sans-serif;color:#5E6B82;white-space:nowrap;background:rgba(250,246,240,.94);padding:1px 7px;border-radius:7px;margin-top:-4px}
/* stacked cross-fading text: every variant is always in the DOM, only opacity changes */
.stk{display:grid}
.stk>*{grid-area:1/1;opacity:0;transition:opacity 1s var(--ez),transform 1s var(--ez)}
.stk>.on{opacity:1}
.stkL>*{justify-self:start}
.stkC>*{justify-self:center}
.scTags{min-height:20px}
.tg{font:600 10px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:5px 9px;border-radius:999px;color:#FFFFFF;transform:translateY(3px)}
.tg.on{transform:none}
.tg.k-obs{background:var(--cObs)}.tg.k-thr{background:var(--cThr)}.tg.k-inf{background:var(--cInf)}.tg.k-chk{background:var(--cChk)}.tg.k-ok{background:var(--cOk)}
.tg.k-done{background:#E7F4EF;color:var(--cOk);box-shadow:inset 0 0 0 1px rgba(4,120,87,.35)}
.scId{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 18px;border-radius:20px;background:#FFFFFF;border:1.5px solid #D9D0C2;box-shadow:0 0 0 8px rgba(255,255,255,.85),0 24px 46px -26px rgba(11,18,32,.5);transition:border-color 1.2s var(--ez)}
.scId.s-obs{border-color:var(--cObs)}.scId.s-thr{border-color:var(--cThr)}.scId.s-inf{border-color:var(--cInf)}.scId.s-chk{border-color:var(--cChk)}.scId.s-ok{border-color:var(--cOk)}
.scAgent{position:absolute;left:50%;top:11%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px}
.agOrb{position:relative;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1C2742,#0B1220 75%);color:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px rgba(255,255,255,.9),0 16px 30px -14px rgba(11,18,32,.6)}
.agRing{position:absolute;inset:-12px;border-radius:50%;border:1.5px dashed var(--p);opacity:.5;animation:spin 12s linear infinite}
.agPulse{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--p);animation:cp 2.6s cubic-bezier(.22,.61,.36,1) infinite}
.agPh{font:600 10px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;background:rgba(250,246,240,.94);padding:4px 8px;border-radius:7px}
.agPh>.a0{color:var(--cObs)}.agPh>.a1{color:var(--cThr)}.agPh>.a1i{color:var(--cInf)}.agPh>.a2{color:var(--cChk)}.agPh>.a3{color:var(--cOk)}
/* loop rows */
.lpRow{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px;border-radius:14px;opacity:.4;overflow:hidden;--rc:var(--cObs);transition:opacity 1s var(--ez),background-color 1s var(--ez)}
.lpRow.r1{--rc:var(--cThr)}.lpRow.r1.info{--rc:var(--cInf)}.lpRow.r2{--rc:var(--cChk)}.lpRow.r3{--rc:var(--cOk)}
.lpRow.done{opacity:1}
.lpRow.active{opacity:1;background-color:#F7F1EA}
.lpDot{position:relative;width:42px;height:42px;border-radius:12px;border:1.5px solid #D9D0C2;background:#FFFFFF;color:#5E6B82;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color 1s var(--ez),color 1s var(--ez)}
.lpDot>i{position:absolute;inset:0;background:var(--rc);opacity:0;transition:opacity 1s var(--ez)}
.lpDot>svg{position:relative}
.lpRow.done .lpDot{border-color:var(--rc);color:var(--rc)}
.lpRow.active .lpDot{border-color:var(--rc);color:#FFFFFF}
.lpRow.active .lpDot>i{opacity:1}
.lpLbl{display:block;font:500 10px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--rc);margin-bottom:6px}
.lpVal>span{font-weight:600;font-size:15px;line-height:1.3;color:#0B1220}
.lpBar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--rc);transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:opacity .6s var(--ez)}
.lpRow.active .lpBar{opacity:1;animation:fillBar 1.8s linear forwards}
@keyframes fillBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.scTitle>h3{margin:0;font-family:'Plus Jakarta Sans','Helvetica Neue',sans-serif;font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-0.02em;color:#0B1220;text-wrap:balance;transform:translateY(6px)}
.scTitle>h3.on{transform:none}
.chip{padding:4px 9px;border-radius:6px;border:1px solid var(--p);color:var(--pt);white-space:nowrap}
@media (max-width:640px){.scMap{aspect-ratio:1/1.1}.scNode{width:120px}.scName{font-size:11px}.scSub,.scIdMeta,.scIdName,.scAgent .scName{display:none!important}.scIcoW{width:46px;height:46px}.tg{font-size:9px;padding:4px 7px}.scId{padding:8px;border-radius:50%}.hideSm{display:none}}
@media (prefers-reduced-motion:reduce){.spin,.counter,.rot,.rotR,.sweep,.pkt,.cPulse,.nHalo,.scObs,.scFlow,.scHalo,.agRing,.agPulse,.lpRow.active .lpBar,.blink,.swap,.silverText{animation:none}}
html{scroll-behavior:smooth}img{max-width:100%}button{font:inherit}