/* ============================================================
   SYMIA — live system demo styling (shared)
   Distinct "telemetry" palette: near-black + amber/orange accents.
   Used by IdentityDemo / ServicesDemo / CredentialsDemo and any
   page that embeds them. Self-scoped: vars live on .demowrap/.demo.
   ============================================================ */
.demowrap,.demo{--d-bg:#06080e;--d-bg2:#0a0d16;--d-line:#1b2233;--d-line2:#2a3346;--d-amber:#f1c21b;--d-orange:#ff832b;--d-blue:#4589ff;--d-blue2:#0f62fe;--d-dim:#7e8aa3;--d-dim2:#566077}
.demowrap{display:flex;flex-direction:column;gap:1px;background:var(--d-line);border:1px solid var(--d-line)}
.demo{background:var(--d-bg);position:relative;overflow:hidden;min-height:540px;display:flex;flex-direction:column}
.demo.alt{background:var(--d-bg2)}
.gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(241,194,27,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(241,194,27,.045) 1px,transparent 1px);background-size:38px 38px;z-index:0}
.scor{position:absolute;width:14px;height:14px;z-index:4;pointer-events:none}
.scor.tl{top:14px;left:14px;border-top:2px solid var(--d-amber);border-left:2px solid var(--d-amber)}
.scor.tr{top:14px;right:14px;border-top:2px solid var(--d-amber);border-right:2px solid var(--d-amber)}
.scor.bl{bottom:14px;left:14px;border-bottom:2px solid var(--d-amber);border-left:2px solid var(--d-amber)}
.scor.br{bottom:14px;right:14px;border-bottom:2px solid var(--d-amber);border-right:2px solid var(--d-amber)}
.demohead{position:relative;z-index:3;display:flex;align-items:center;gap:16px;padding:24px 34px;border-bottom:1px solid var(--d-line)}
.dnum{font-family:var(--mono);font-size:13px;color:var(--d-amber);letter-spacing:.12em}
.dttl{font-size:19px;font-weight:600;color:#fff;letter-spacing:-.01em;flex:1}
.dstat{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--d-dim);display:inline-flex;align-items:center;gap:9px;text-transform:uppercase}
.dot{width:8px;height:8px;background:var(--d-amber);display:inline-block;animation:blink 1.3s infinite steps(1)}
.dbody{position:relative;z-index:2;flex:1;padding:42px 40px;display:flex;align-items:center}
.dcap{position:relative;z-index:3;padding:18px 34px;border-top:1px solid var(--d-line);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--d-dim2);display:flex;align-items:center;gap:12px}
.dcap .csq{width:8px;height:8px;background:var(--d-orange);flex:none}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.2}}

/* ===== DEMO 1 — IDENTITY & VERIFICATION ===== */
.d1{display:grid;grid-template-columns:320px 1fr;gap:52px;width:100%;align-items:center}
.idcard{position:relative;background:linear-gradient(160deg,#11192c,#0a0f1c);border:1px solid var(--d-line2);padding:24px;overflow:hidden}
.idtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.idbrand{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;font-weight:600;color:#fff;letter-spacing:.04em}
.idbrand .bsq{width:16px;height:16px;background:var(--d-amber)}
.idflag{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--d-dim);border:1px solid var(--d-line2);padding:4px 7px}
.idmain{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center}
.idphoto{width:84px;height:96px;border:1px solid var(--d-line2);background:#0c1322;position:relative;overflow:hidden}
.idhead{position:absolute;width:40px;height:40px;border:1px solid #2f3b55;border-radius:50% 50% 0 0;top:16px;left:21px}
.idbody{position:absolute;width:60px;height:34px;border:1px solid #2f3b55;border-radius:30px 30px 0 0;bottom:0;left:11px}
.idlines{display:flex;flex-direction:column;gap:9px}
.idln{height:8px;background:#1c2840}
.idln.w1{width:80%}.idln.w2{width:55%}.idln.w3{width:68%}
.idln.hl{background:var(--d-amber);opacity:0;animation:idhl 7s infinite}
.idchip{margin-top:18px;display:flex;align-items:center;justify-content:space-between}
.chip{width:34px;height:26px;border:1px solid var(--d-amber);position:relative;background:repeating-linear-gradient(90deg,transparent,transparent 5px,rgba(241,194,27,.4) 5px,rgba(241,194,27,.4) 6px)}
.idmrz{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--d-dim2)}
.scanline{position:absolute;left:0;right:0;height:3px;background:var(--d-amber);box-shadow:0 0 18px 4px rgba(241,194,27,.75);top:0;opacity:0;animation:scan 7s infinite ease-in-out;z-index:3}
.d1checks{display:flex;flex-direction:column;gap:13px}
.d1row{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:16px}
.d1sq{width:28px;height:28px;border:1.5px solid var(--d-line2);background:transparent;position:relative}
.d1sq.s1{animation:f1 7s infinite}.d1sq.s2{animation:f2 7s infinite}.d1sq.s3{animation:f3 7s infinite}
.d1lab{font-size:15.5px;color:#dfe4ee;font-family:var(--mono);letter-spacing:.01em}
.d1pct{font-family:var(--mono);font-size:12px;color:var(--d-dim);justify-self:end}
.d1pct.p1{animation:tg1 7s infinite}.d1pct.p2{animation:tg2 7s infinite}.d1pct.p3{animation:tg3 7s infinite}
.d1chk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#06080e;font-size:17px;font-weight:700;opacity:0}
.d1chk.c1{animation:ck1 7s infinite}.d1chk.c2{animation:ck2 7s infinite}.d1chk.c3{animation:ck3 7s infinite}
.d1badge{margin-top:6px;display:inline-flex;align-items:center;gap:13px;padding:15px 20px;border:1px solid var(--d-blue);background:rgba(15,98,254,.12);font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:#fff;text-transform:uppercase;opacity:0;animation:badge 7s infinite}
.d1badge .bsq{width:13px;height:13px;background:var(--d-blue)}
@keyframes idhl{0%,30%{opacity:0}36%,90%{opacity:.9}100%{opacity:0}}
@keyframes scan{0%{top:6%;opacity:0}5%{opacity:1}33%{top:90%;opacity:1}39%{top:90%;opacity:0}100%{opacity:0}}
@keyframes f1{0%,24%{background:transparent;border-color:var(--d-line2)}30%,90%{background:var(--d-amber);border-color:var(--d-amber)}100%{background:transparent;border-color:var(--d-line2)}}
@keyframes f2{0%,40%{background:transparent;border-color:var(--d-line2)}46%,90%{background:var(--d-amber);border-color:var(--d-amber)}100%{background:transparent;border-color:var(--d-line2)}}
@keyframes f3{0%,56%{background:transparent;border-color:var(--d-line2)}62%,90%{background:var(--d-amber);border-color:var(--d-amber)}100%{background:transparent;border-color:var(--d-line2)}}
@keyframes ck1{0%,25%{opacity:0}31%,90%{opacity:1}100%{opacity:0}}
@keyframes ck2{0%,41%{opacity:0}47%,90%{opacity:1}100%{opacity:0}}
@keyframes ck3{0%,57%{opacity:0}63%,90%{opacity:1}100%{opacity:0}}
@keyframes tg1{0%,24%{color:var(--d-dim)}30%,100%{color:var(--d-amber)}}
@keyframes tg2{0%,40%{color:var(--d-dim)}46%,100%{color:var(--d-amber)}}
@keyframes tg3{0%,56%{color:var(--d-dim)}62%,100%{color:var(--d-amber)}}
@keyframes badge{0%,66%{opacity:0;transform:translateY(12px)}73%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}

/* ===== DEMO 2 — SERVICES & INTEGRITY ===== */
.d2{display:grid;grid-template-columns:1.55fr 1fr;gap:1px;width:100%;background:var(--d-line);border:1px solid var(--d-line)}
.d2grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--d-line)}
.stile{background:var(--d-bg2);padding:20px 22px;min-height:128px;display:flex;flex-direction:column;gap:12px;position:relative}
.stile.st1{animation:ton1 8s infinite}.stile.st2{animation:ton2 8s infinite}.stile.st3{animation:ton3 8s infinite}
.stile.st4{animation:ton4 8s infinite}.stile.st5{animation:ton5 8s infinite}.stile.st6{animation:ton6 8s infinite}
.stop{display:flex;align-items:center;justify-content:space-between}
.sname{font-family:var(--sans);font-size:16px;font-weight:600;color:#eef1f6;letter-spacing:-.01em}
.sidx{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--d-dim2)}
.smid{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--d-dim);margin-top:auto}
.spwrap{position:relative;height:20px}
.spill{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-dim2)}
.spill .psq{width:9px;height:9px;border:1.5px solid var(--d-dim2)}
.sdone{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-blue);opacity:0}
.sdone .dsq{width:9px;height:9px;background:var(--d-blue)}
.sdone.sv1{animation:dlv1 8s infinite}.sdone.sv2{animation:dlv2 8s infinite}.sdone.sv3{animation:dlv3 8s infinite}
.sdone.sv4{animation:dlv4 8s infinite}.sdone.sv5{animation:dlv5 8s infinite}.sdone.sv6{animation:dlv6 8s infinite}
.d2side{background:var(--d-bg);padding:28px 26px;display:flex;flex-direction:column;gap:22px}
.d2anchor{border:1px solid var(--d-line2);background:linear-gradient(160deg,#11192c,#0a0f1c);padding:20px;position:relative;overflow:hidden}
.d2anchor .asid{font-family:var(--mono);font-size:26px;font-weight:600;color:#fff;letter-spacing:.06em}
.d2anchor .alab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--d-amber);margin-top:6px}
.d2anchor .arule{height:1px;background:var(--d-line2);margin:16px 0}
.d2anchor .aeng{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-dim);display:flex;align-items:center;gap:9px}
.d2anchor .aeng .esq{width:9px;height:9px;background:var(--d-amber);animation:blink 1.3s infinite steps(1)}
.d2metric{display:flex;flex-direction:column;gap:9px}
.d2mlabel{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-dim);display:flex;justify-content:space-between}
.d2track{height:12px;background:#1a2236;position:relative;overflow:hidden}
.d2fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--d-blue);animation:bar 8s infinite}
.d2fill.amb{background:var(--d-amber);animation:bar2 8s infinite}
.d2chip{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:11px 13px;border:1px solid var(--d-orange);color:var(--d-orange);opacity:0;animation:ochip 8s infinite}
.d2chip .xsq{width:11px;height:11px;border:1.5px solid var(--d-orange)}
.d2done{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:0;animation:done2 8s infinite}
.d2done .bsq{width:13px;height:13px;background:var(--d-blue)}
@keyframes ton1{0%,11%{background:var(--d-bg2);box-shadow:inset 0 0 0 transparent}17%,90%{background:#0d1730;box-shadow:inset 3px 0 0 var(--d-blue)}100%{background:var(--d-bg2)}}
@keyframes ton2{0%,16%{background:var(--d-bg2);box-shadow:inset 0 0 0 transparent}22%,90%{background:#0d1730;box-shadow:inset 3px 0 0 var(--d-blue)}100%{background:var(--d-bg2)}}
@keyframes ton3{0%,21%{background:var(--d-bg2);box-shadow:inset 0 0 0 transparent}27%,90%{background:#0d1730;box-shadow:inset 3px 0 0 var(--d-blue)}100%{background:var(--d-bg2)}}
@keyframes ton4{0%,26%{background:var(--d-bg2);box-shadow:inset 0 0 0 transparent}32%,90%{background:#0d1730;box-shadow:inset 3px 0 0 var(--d-blue)}100%{background:var(--d-bg2)}}
@keyframes ton5{0%,31%{background:var(--d-bg2);box-shadow:inset 0 0 0 transparent}37%,90%{background:#0d1730;box-shadow:inset 3px 0 0 var(--d-blue)}100%{background:var(--d-bg2)}}
@keyframes ton6{0%,36%{background:var(--d-bg2);box-shadow:inset 0 0 0 transparent}42%,90%{background:#0d1730;box-shadow:inset 3px 0 0 var(--d-blue)}100%{background:var(--d-bg2)}}
@keyframes dlv1{0%,12%{opacity:0}18%,90%{opacity:1}100%{opacity:0}}
@keyframes dlv2{0%,17%{opacity:0}23%,90%{opacity:1}100%{opacity:0}}
@keyframes dlv3{0%,22%{opacity:0}28%,90%{opacity:1}100%{opacity:0}}
@keyframes dlv4{0%,27%{opacity:0}33%,90%{opacity:1}100%{opacity:0}}
@keyframes dlv5{0%,32%{opacity:0}38%,90%{opacity:1}100%{opacity:0}}
@keyframes dlv6{0%,37%{opacity:0}43%,90%{opacity:1}100%{opacity:0}}
@keyframes bar{0%,14%{width:0}44%,90%{width:100%}100%{width:0}}
@keyframes bar2{0%,46%{width:0}60%,90%{width:100%}100%{width:0}}
@keyframes ochip{0%,50%{opacity:0;transform:translateX(-8px)}57%,90%{opacity:1;transform:translateX(0)}100%{opacity:0}}
@keyframes done2{0%,72%{opacity:0;transform:translateY(8px)}79%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}

/* ===== DEMO 3 — CREDENTIALS & CAPABILITY ===== */
.d3{display:flex;flex-direction:column;gap:30px;width:100%}
.chain{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.blk{width:118px;height:84px;border:1.5px solid var(--d-line2);background:#0c1322;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;position:relative}
.blk.b1{animation:seal1 9s infinite}.blk.b2{animation:seal2 9s infinite}.blk.b3{animation:seal3 9s infinite}.blk.b4{animation:seal4 9s infinite}
.blk .bk{font-family:var(--mono);font-size:12px;font-weight:600;color:#dfe4ee;letter-spacing:.05em}
.blk .bh{font-family:var(--mono);font-size:9px;color:var(--d-dim2);letter-spacing:.04em}
.blk .lock{position:absolute;top:7px;right:8px;width:9px;height:9px;background:var(--d-amber);opacity:0}
.blk.b1 .lock{animation:lock1 9s infinite}.blk.b2 .lock{animation:lock2 9s infinite}.blk.b3 .lock{animation:lock3 9s infinite}.blk.b4 .lock{animation:lock4 9s infinite}
.lnk{width:26px;height:2px;background:var(--d-line2);position:relative;flex:none}
.lnk.k1{animation:link1 9s infinite}.lnk.k2{animation:link2 9s infinite}.lnk.k3{animation:link3 9s infinite}
.d3mid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--d-line);border:1px solid var(--d-line)}
.d3cell{background:var(--d-bg2);padding:26px 28px}
.d3lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-dim);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.d3lbl .lsq{width:8px;height:8px;background:var(--d-amber)}
.issuers{display:flex;flex-wrap:wrap;gap:10px}
.issuer{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--d-line2);background:#0c1322;padding:10px 13px;opacity:0}
.issuer.i1{animation:iss1 9s infinite}.issuer.i2{animation:iss2 9s infinite}.issuer.i3{animation:iss3 9s infinite}.issuer.i4{animation:iss4 9s infinite}
.issuer .iname{font-family:var(--sans);font-size:14px;font-weight:600;color:#eef1f6;letter-spacing:-.01em}
.gG{font-family:'IBM Plex Sans';font-weight:700;font-size:17px;line-height:1}
.wallet{display:flex;flex-direction:column;gap:9px;position:relative}
.wcard{display:flex;align-items:center;gap:12px;border:1px solid var(--d-line2);background:#0c1322;padding:11px 13px;transform:translateX(40px);opacity:0}
.wcard.wc1{animation:wc1 9s infinite}.wcard.wc2{animation:wc2 9s infinite}.wcard.wc3{animation:wc3 9s infinite}
.wcard .wsq{width:26px;height:26px;flex:none;background:linear-gradient(135deg,var(--d-blue),var(--d-blue2))}
.wcard .wt{font-family:var(--mono);font-size:12px;color:#dfe4ee}
.wcard .wv{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--d-amber);letter-spacing:.08em}
.d3foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--d-line);padding-top:24px}
.regions{display:flex;gap:8px;flex-wrap:wrap}
.rchip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--d-dim);border:1px solid var(--d-line2);padding:8px 11px;opacity:.35}
.rchip.r1{animation:reg1 9s infinite}.rchip.r2{animation:reg2 9s infinite}.rchip.r3{animation:reg3 9s infinite}.rchip.r4{animation:reg4 9s infinite}
.d3stamp{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid var(--d-blue);background:rgba(15,98,254,.12);font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:0;animation:stamp 9s infinite}
.d3stamp .bsq{width:13px;height:13px;background:var(--d-blue)}
@keyframes seal1{0%,4%{border-color:var(--d-line2)}9%,14%{border-color:var(--d-amber)}19%,90%{border-color:var(--d-blue)}100%{border-color:var(--d-line2)}}
@keyframes seal2{0%,18%{border-color:var(--d-line2)}23%,28%{border-color:var(--d-amber)}33%,90%{border-color:var(--d-blue)}100%{border-color:var(--d-line2)}}
@keyframes seal3{0%,32%{border-color:var(--d-line2)}37%,42%{border-color:var(--d-amber)}47%,90%{border-color:var(--d-blue)}100%{border-color:var(--d-line2)}}
@keyframes seal4{0%,46%{border-color:var(--d-line2)}51%,56%{border-color:var(--d-amber)}61%,90%{border-color:var(--d-blue)}100%{border-color:var(--d-line2)}}
@keyframes lock1{0%,9%{opacity:0}14%,90%{opacity:1}100%{opacity:0}}
@keyframes lock2{0%,23%{opacity:0}28%,90%{opacity:1}100%{opacity:0}}
@keyframes lock3{0%,37%{opacity:0}42%,90%{opacity:1}100%{opacity:0}}
@keyframes lock4{0%,51%{opacity:0}56%,90%{opacity:1}100%{opacity:0}}
@keyframes link1{0%,14%{background:var(--d-line2)}19%,90%{background:var(--d-blue)}100%{background:var(--d-line2)}}
@keyframes link2{0%,28%{background:var(--d-line2)}33%,90%{background:var(--d-blue)}100%{background:var(--d-line2)}}
@keyframes link3{0%,42%{background:var(--d-line2)}47%,90%{background:var(--d-blue)}100%{background:var(--d-line2)}}
@keyframes iss1{0%,30%{opacity:0;transform:translateY(8px)}36%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes iss2{0%,35%{opacity:0;transform:translateY(8px)}41%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes iss3{0%,40%{opacity:0;transform:translateY(8px)}46%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes iss4{0%,45%{opacity:0;transform:translateY(8px)}51%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes wc1{0%,40%{opacity:0;transform:translateX(40px)}47%,90%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(40px)}}
@keyframes wc2{0%,50%{opacity:0;transform:translateX(40px)}57%,90%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(40px)}}
@keyframes wc3{0%,60%{opacity:0;transform:translateX(40px)}67%,90%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(40px)}}
@keyframes reg1{0%,68%{opacity:.35;color:var(--d-dim);border-color:var(--d-line2)}74%,90%{opacity:1;color:var(--d-blue);border-color:var(--d-blue)}100%{opacity:.35;color:var(--d-dim);border-color:var(--d-line2)}}
@keyframes reg2{0%,71%{opacity:.35;color:var(--d-dim);border-color:var(--d-line2)}77%,90%{opacity:1;color:var(--d-blue);border-color:var(--d-blue)}100%{opacity:.35;color:var(--d-dim);border-color:var(--d-line2)}}
@keyframes reg3{0%,74%{opacity:.35;color:var(--d-dim);border-color:var(--d-line2)}80%,90%{opacity:1;color:var(--d-blue);border-color:var(--d-blue)}100%{opacity:.35;color:var(--d-dim);border-color:var(--d-line2)}}
@keyframes reg4{0%,77%{opacity:.35;color:var(--d-dim);border-color:var(--d-line2)}83%,90%{opacity:1;color:var(--d-blue);border-color:var(--d-blue)}100%{opacity:.35;color:var(--d-dim);border-color:var(--d-line2)}}
@keyframes stamp{0%,80%{opacity:0;transform:scale(.92)}86%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
/* ============================================================
   SECTOR ONTOLOGY RESOLVE — shared by every industry card.
   One animated card: a domain task flows through the ontology
   (Connect -> Model -> Act) to a verdict. Same S-ID grammar,
   compact, timeline ~9s. Only the text differs per sector.
   ============================================================ */
.demo.dsec{min-height:0}
.soc{display:grid;grid-template-columns:308px 1fr;gap:1px;width:100%;background:var(--d-line);border:1px solid var(--d-line)}
.so-left{background:var(--d-bg2);padding:26px 26px 24px;display:flex;flex-direction:column;gap:20px}
.so-prob{font-family:var(--mono);font-size:12px;line-height:1.62;letter-spacing:.01em;color:var(--d-dim);display:flex;gap:11px}
.so-prob .so-psq{width:9px;height:9px;background:var(--d-orange);flex:none;margin-top:3px}
.so-ticket{border:1px solid var(--d-line2);background:linear-gradient(160deg,#11192c,#0a0f1c);padding:16px 18px;position:relative;overflow:hidden}
.so-ticket::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--d-amber);box-shadow:0 0 14px 3px rgba(241,194,27,.6);opacity:0;animation:soscan 9s infinite ease-in-out}
.so-tk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.so-tk-id{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#fff;font-weight:600}
.so-tk-in{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--d-amber);border:1px solid var(--d-line2);padding:3px 7px}
.so-tk-body{font-size:15px;color:#eef1f6;letter-spacing:-.01em;line-height:1.42;margin-bottom:14px}
.so-tk-foot{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-dim2);display:flex;align-items:center;gap:8px}
.so-tk-foot .so-tk-sq{width:8px;height:8px;background:var(--d-amber);animation:blink 1.3s infinite steps(1)}
.so-badge{margin-top:auto;display:inline-flex;align-items:center;gap:11px;padding:13px 16px;border:1px solid var(--d-blue);background:rgba(15,98,254,.12);font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;line-height:1.3;color:#fff;text-transform:uppercase;opacity:0;animation:sobadge 9s infinite}
.so-badge .bsq{width:12px;height:12px;background:var(--d-blue);flex:none}
.so-flow{background:var(--d-bg);padding:24px 26px;display:flex;flex-direction:column;gap:11px}
.so-stage{display:flex;flex-direction:column;gap:13px}
.so-slbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-dim);display:flex;align-items:center;gap:10px}
.so-slbl .so-i{color:var(--d-amber)}
.so-chips{display:flex;flex-wrap:wrap;gap:9px}
.so-chip{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--d-dim2);border:1px solid var(--d-line2);background:#0c1322;padding:9px 12px;opacity:.35}
.so-chip.sc1{animation:sochip1 9s infinite}.so-chip.sc2{animation:sochip2 9s infinite}.so-chip.sc3{animation:sochip3 9s infinite}.so-chip.sc4{animation:sochip4 9s infinite}
.so-ent{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.so-node{font-family:var(--mono);font-size:12px;color:#dfe4ee;border:1.5px solid var(--d-line2);background:#0c1322;padding:10px 13px;opacity:.35}
.so-node.n1{animation:sonode1 9s infinite}.so-node.n2{animation:sonode2 9s infinite}.so-node.n3{animation:sonode3 9s infinite}
.so-lk{width:22px;height:2px;background:var(--d-line2);flex:none}
.so-lk.l1{animation:solink1 9s infinite}.so-lk.l2{animation:solink2 9s infinite}
.so-down{width:2px;height:13px;background:var(--d-line2);margin-left:15px;opacity:.3}
.so-down.d1{animation:sodown1 9s infinite}.so-down.d2{animation:sodown2 9s infinite}
.so-checks{display:flex;flex-direction:column;gap:9px}
.so-row{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:12px}
.so-k{width:20px;height:20px;border:1.5px solid var(--d-line2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:transparent;background:transparent}
.so-k.k1{animation:sok1 9s infinite}.so-k.k2{animation:sok2 9s infinite}.so-k.k3{animation:sok3 9s infinite}
.so-lab{font-family:var(--mono);font-size:13px;color:#dfe4ee;letter-spacing:.01em}
.so-val{font-family:var(--mono);font-size:11px;color:var(--d-dim);justify-self:end;letter-spacing:.04em}
.so-val.v1{animation:sov1 9s infinite}.so-val.v2{animation:sov2 9s infinite}.so-val.v3{animation:sov3 9s infinite}
@keyframes soscan{0%,7%{top:0;opacity:0}9%{opacity:1}18%{top:100%;opacity:1}20%{top:100%;opacity:0}100%{opacity:0}}
@keyframes sochip1{0%,6%{opacity:.35;color:var(--d-dim2);border-color:var(--d-line2)}13%,92%{opacity:1;color:#dfe4ee;border-color:var(--d-blue)}100%{opacity:.35;color:var(--d-dim2);border-color:var(--d-line2)}}
@keyframes sochip2{0%,11%{opacity:.35;color:var(--d-dim2);border-color:var(--d-line2)}18%,92%{opacity:1;color:#dfe4ee;border-color:var(--d-blue)}100%{opacity:.35;color:var(--d-dim2);border-color:var(--d-line2)}}
@keyframes sochip3{0%,16%{opacity:.35;color:var(--d-dim2);border-color:var(--d-line2)}23%,92%{opacity:1;color:#dfe4ee;border-color:var(--d-blue)}100%{opacity:.35;color:var(--d-dim2);border-color:var(--d-line2)}}
@keyframes sochip4{0%,21%{opacity:.35;color:var(--d-dim2);border-color:var(--d-line2)}28%,92%{opacity:1;color:#dfe4ee;border-color:var(--d-blue)}100%{opacity:.35;color:var(--d-dim2);border-color:var(--d-line2)}}
@keyframes sodown1{0%,26%{opacity:.3;background:var(--d-line2)}32%,92%{opacity:1;background:var(--d-blue)}100%{opacity:.3;background:var(--d-line2)}}
@keyframes sodown2{0%,52%{opacity:.3;background:var(--d-line2)}58%,92%{opacity:1;background:var(--d-blue)}100%{opacity:.3;background:var(--d-line2)}}
@keyframes sonode1{0%,28%{opacity:.35;border-color:var(--d-line2);background:#0c1322}34%,92%{opacity:1;border-color:var(--d-amber);background:#0d1730}100%{opacity:.35;border-color:var(--d-line2);background:#0c1322}}
@keyframes sonode2{0%,38%{opacity:.35;border-color:var(--d-line2);background:#0c1322}44%,92%{opacity:1;border-color:var(--d-amber);background:#0d1730}100%{opacity:.35;border-color:var(--d-line2);background:#0c1322}}
@keyframes sonode3{0%,48%{opacity:.35;border-color:var(--d-line2);background:#0c1322}54%,92%{opacity:1;border-color:var(--d-amber);background:#0d1730}100%{opacity:.35;border-color:var(--d-line2);background:#0c1322}}
@keyframes solink1{0%,34%{background:var(--d-line2)}40%,92%{background:var(--d-amber)}100%{background:var(--d-line2)}}
@keyframes solink2{0%,44%{background:var(--d-line2)}50%,92%{background:var(--d-amber)}100%{background:var(--d-line2)}}
@keyframes sok1{0%,54%{background:transparent;border-color:var(--d-line2);color:transparent}60%,92%{background:var(--d-amber);border-color:var(--d-amber);color:#06080e}100%{background:transparent;border-color:var(--d-line2);color:transparent}}
@keyframes sok2{0%,60%{background:transparent;border-color:var(--d-line2);color:transparent}66%,92%{background:var(--d-amber);border-color:var(--d-amber);color:#06080e}100%{background:transparent;border-color:var(--d-line2);color:transparent}}
@keyframes sok3{0%,66%{background:transparent;border-color:var(--d-line2);color:transparent}72%,92%{background:var(--d-amber);border-color:var(--d-amber);color:#06080e}100%{background:transparent;border-color:var(--d-line2);color:transparent}}
@keyframes sov1{0%,59%{color:var(--d-dim)}65%,100%{color:var(--d-amber)}}
@keyframes sov2{0%,65%{color:var(--d-dim)}71%,100%{color:var(--d-amber)}}
@keyframes sov3{0%,71%{color:var(--d-dim)}77%,100%{color:var(--d-amber)}}
@keyframes sobadge{0%,78%{opacity:0;transform:translateY(10px)}84%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}

@media(max-width:900px){.d1,.d2{grid-template-columns:1fr;gap:30px}.d3mid{grid-template-columns:1fr}.dbody{padding:28px 22px}.soc{grid-template-columns:1fr}}
@media(max-width:560px){.dbody{padding:22px 15px}.demohead{padding:18px 20px}.dttl{font-size:16px}.dcap{padding:15px 20px;font-size:11px}.d1{gap:22px}.idcard{max-width:340px;margin:0 auto;width:100%}.chain{gap:0}.blk{width:auto;flex:1 1 0;min-width:0;height:74px}.blk .bh{display:none}.lnk{width:9px}.d3foot{flex-direction:column;align-items:flex-start;gap:16px}.regions{gap:6px}.rchip{font-size:10px;padding:7px 8px}.d2anchor .asid{font-size:22px}}

/* ============================================================
   SECTOR SELECTOR — pick a sector, see its ontology-resolve card.
   Pure-CSS radio/label switcher. Reused on Industries + Home.
   ============================================================ */
.iosel{position:relative}
.iosel>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.iohead{margin-bottom:22px}
.iolab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.iolab .iodot{width:8px;height:8px;background:var(--blue);flex:none}
.iotabs{display:flex;flex-wrap:wrap;gap:8px}
.iotab{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13.5px;color:var(--dim);border:1px solid var(--line);background:var(--ink-1);padding:9px 14px;cursor:pointer;user-select:none;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.iotab .ion{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--dim-3)}
.iotab:hover{color:#fff;border-color:var(--line-2)}
.iocard{display:none}
#io1:checked~.iostage .c1{display:block}
#io1:checked~.iohead .t1{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io1:checked~.iohead .t1 .ion{color:var(--blue-3)}
#io2:checked~.iostage .c2{display:block}
#io2:checked~.iohead .t2{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io2:checked~.iohead .t2 .ion{color:var(--blue-3)}
#io3:checked~.iostage .c3{display:block}
#io3:checked~.iohead .t3{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io3:checked~.iohead .t3 .ion{color:var(--blue-3)}
#io4:checked~.iostage .c4{display:block}
#io4:checked~.iohead .t4{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io4:checked~.iohead .t4 .ion{color:var(--blue-3)}
#io5:checked~.iostage .c5{display:block}
#io5:checked~.iohead .t5{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io5:checked~.iohead .t5 .ion{color:var(--blue-3)}
#io6:checked~.iostage .c6{display:block}
#io6:checked~.iohead .t6{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io6:checked~.iohead .t6 .ion{color:var(--blue-3)}
#io7:checked~.iostage .c7{display:block}
#io7:checked~.iohead .t7{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io7:checked~.iohead .t7 .ion{color:var(--blue-3)}
#io8:checked~.iostage .c8{display:block}
#io8:checked~.iohead .t8{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io8:checked~.iohead .t8 .ion{color:var(--blue-3)}
#io9:checked~.iostage .c9{display:block}
#io9:checked~.iohead .t9{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io9:checked~.iohead .t9 .ion{color:var(--blue-3)}
#io10:checked~.iostage .c10{display:block}
#io10:checked~.iohead .t10{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io10:checked~.iohead .t10 .ion{color:var(--blue-3)}
#io11:checked~.iostage .c11{display:block}
#io11:checked~.iohead .t11{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io11:checked~.iohead .t11 .ion{color:var(--blue-3)}
#io12:checked~.iostage .c12{display:block}
#io12:checked~.iohead .t12{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io12:checked~.iohead .t12 .ion{color:var(--blue-3)}
#io13:checked~.iostage .c13{display:block}
#io13:checked~.iohead .t13{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io13:checked~.iohead .t13 .ion{color:var(--blue-3)}
#io14:checked~.iostage .c14{display:block}
#io14:checked~.iohead .t14{color:#fff;border-color:var(--blue);background:var(--ink-2)}
#io14:checked~.iohead .t14 .ion{color:var(--blue-3)}
@media(max-width:600px){.iotab{font-size:12.5px;padding:8px 11px}}
/* Default selection when the runtime drops the static `checked` attribute */
.iosel:not(:has(input:checked)) .c1{display:block}
.iosel:not(:has(input:checked)) .iohead .t1{color:#fff;border-color:var(--blue);background:var(--ink-2)}
.iosel:not(:has(input:checked)) .iohead .t1 .ion{color:var(--blue-3)}

/* Sector icons on tabs + card header (Lucide) */
.iotab .ioic{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;flex:none}
.iotab .ioicsvg{width:17px;height:17px}
.dic-wrap{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none}
.dic{width:22px;height:22px;color:var(--d-amber)}

/* Compliance badges (icon + acronym) — used on Home / Security */
.compbadges{display:flex;flex-wrap:wrap;gap:10px}
.compbadge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--ink-1);padding:11px 15px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--text)}
.compbadge svg{width:18px;height:18px;color:var(--blue-3);flex:none}
.compbadge:hover{border-color:var(--blue);background:var(--ink-2)}