/* ---- AnvesionTech VDI product page (/vdi/) ---- */
main { --space-section:clamp(52px, 7vw, 104px) }
:root { --ok-rgb:62, 230, 154;--bad-rgb:255, 107, 107;--warn-rgb:255, 181, 71;--info-rgb:110, 168, 255;--sky2-rgb:124, 240, 255 }

.sprite { position:absolute;width:0;height:0;overflow:hidden }
.ico { width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round }
.chip .ico { width:12px;height:12px }
.inline-link { color:var(--pa);text-decoration:underline;text-decoration-color:rgba(var(--pa-rgb),.4);text-underline-offset:3px;transition:text-decoration-color .3s }
.inline-link:hover { text-decoration-color:var(--pa) }
[data-ambient].is-off, [data-ambient].is-off * { animation-play-state:paused !important }
/* without motion the stories stack: show the first state of each stage */
html:not(.motion) .story__stage [data-on]:not([data-on~="0"]) { display:none }

/* mono labels */
.stream__head, .vm b, .caps__title, .how__k, .fl-dc__lbl, .fl-node__s, .fl-host__t, .fl-ep__cap, .fl-tag, .ty__av, .ty__lbl, .ty__note, .ty__own em, .ty__foot,
.life__steps b, .lc__ver em, .lc__poolhead, .lc__legend, .lc__backlbl, .bx-net__lane em, .bx-gpu__tags em, .bx-prof__s i, .bx-dev span,
.pol__head, .pr__sw, .st-rec__dot, .kpi__t, .dr--h, .dr__host, .dr__help, .stack__lvl { font-family:var(--font-mono) }

/* Shared stage / panel chrome */
.stream__dc, .flow, .ty, .lc, .pol, .access__band { position:relative;border-radius:22px;border:1px solid var(--line-strong);background:radial-gradient(90% 70% at 85% 0%, rgba(var(--pa-rgb),.08), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)), var(--bg-elev);box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 40px 120px -40px rgba(0,0,0,.95), 0 30px 90px -50px rgba(var(--pa-rgb),.35) }
.flow::before, .ty::before { content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-image:linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);background-size:6.25% 8.333%;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 85%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 85%) }

/* ---- Mini desktop (decorative Windows / Linux screens) ---- */
.mini { position:relative;display:block;width:100%;aspect-ratio:16 / 10;border-radius:4px;overflow:hidden }
.mini i { position:absolute;display:block }
.mini--win { background:radial-gradient(80% 90% at 28% 18%, rgba(var(--pa-rgb),.45), transparent 60%), linear-gradient(160deg, #10284a, #081425) }
.mini--win .mini__bar { left:0;right:0;bottom:0;height:13%;background:rgba(6,10,18,.92);border-top:1px solid rgba(255,255,255,.1) }
.mini--win .mini__bar::before { content:"";position:absolute;left:44%;top:28%;width:12%;height:44%;border-radius:2px;background:linear-gradient(90deg, var(--pa) 0 22%, transparent 22% 38%, rgba(255,255,255,.5) 38% 60%, transparent 60% 76%, rgba(255,255,255,.35) 76%) }
.mini--win .mini__w { left:14%;top:12%;width:60%;height:60%;border-radius:3px;background:linear-gradient(180deg, rgba(var(--pa-rgb),.85) 0 12%, #15243b 12%);box-shadow:0 4px 12px rgba(0,0,0,.5);overflow:hidden }
.mini--lnx { background:radial-gradient(80% 90% at 75% 25%, rgba(var(--sky2-rgb),.3), transparent 60%), linear-gradient(200deg, #1b1840, #0b0f1d) }
.mini--lnx .mini__bar { left:0;right:0;top:0;height:9%;background:rgba(6,10,18,.92) }
.mini--lnx .mini__bar::before { content:"";position:absolute;left:3%;top:15%;width:4%;height:110%;border-radius:2px;background:transparent }
.mini--lnx::before { content:"";position:absolute;left:3%;top:20%;width:7%;height:62%;border-radius:3px;background:repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 18%, transparent 18% 25%);opacity:.6 }
.mini--lnx .mini__w { left:18%;top:18%;width:64%;height:62%;border-radius:3px;background:linear-gradient(180deg, #2a2f44 0 13%, #0a0e16 13%);box-shadow:0 4px 12px rgba(0,0,0,.5);overflow:hidden }
.mini__w::before { content:"";position:absolute;left:8%;right:20%;top:24%;height:46%;background:repeating-linear-gradient(180deg, rgba(255,255,255,.28) 0 9%, transparent 9% 22%) }
.mini--lnx .mini__w::before { background:repeating-linear-gradient(180deg, rgba(var(--ok-rgb),.55) 0 9%, transparent 9% 22%);right:34% }
.mini__w::after { content:"";position:absolute;left:8%;bottom:14%;width:56%;height:8%;border-radius:1px;background:var(--pa);transform-origin:left;transform:scaleX(.2) }
html.motion .mini__w::after { will-change:transform, opacity;animation:vdi-type 3.2s cubic-bezier(.45, .05, .25, 1) infinite }
@keyframes vdi-type { 0% { transform:scaleX(.04);opacity:0 } 8% { opacity:1 } 68% { transform:scaleX(1);opacity:1 } 86% { transform:scaleX(1);opacity:1 } 100% { transform:scaleX(1);opacity:0 } }
html.motion .ep--thin .mini__w::after, html.motion .vm:nth-child(even) .mini__w::after { animation-delay:-1.1s } html.motion .ep--lap .mini__w::after, html.motion .vm:nth-child(3n) .mini__w::after { animation-delay:-2.2s }

/* ---- HERO ---- */
.hero { position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--header-h) + 36px) 0 48px;overflow:hidden;isolation:isolate }
.hero__glow { right:-24%;top:-30%;opacity:.9 }
.hero__grid { display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:clamp(28px, 4vw, 72px);align-items:center }
.hero__title { font-size:clamp(2.5rem, 1.15rem + 3.6vw, 4.5rem) }
.hero__lead { margin-top:24px;max-width:54ch }
.hero__cta { margin-top:32px }
.hero__chips { list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px }
.hero__visual { position:relative;display:flex;justify-content:center }

.stream { container-type:inline-size;position:relative;width:min(100%, 580px);display:grid;grid-template-areas:"dc" "mid" "eps" }
.stream__dc { grid-area:dc;padding:3.4cqi;border-radius:18px }
.stream__head { display:flex;align-items:center;gap:8px;font-size:clamp(10px, 2cqi, 11.5px);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2) }
.stream__head .dot { color:var(--ok) }
.stream__tag { margin-left:auto;padding:3px 9px;border-radius:999px;color:var(--pa);border:1px solid rgba(var(--pa-rgb),.35);background:rgba(var(--pa-rgb),.08);letter-spacing:.08em }
.stream__pool { list-style:none;margin:2.8cqi 0 2.4cqi;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:2cqi }
.vm { position:relative;display:grid;gap:1.2cqi;padding:1.3cqi;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.025) }
.vm b { font-weight:500;font-size:clamp(9px, 1.9cqi, 11px);letter-spacing:.08em;color:var(--text-3) }
.vm::after { content:"";position:absolute;right:1.6cqi;bottom:1.9cqi;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok) }
html.motion .vm::after { will-change:opacity;animation:vdi-blink 2.8s ease-in-out infinite;animation-delay:calc(var(--k) * -.37s) }
@keyframes vdi-blink { 0%, 100% { opacity:1 } 50% { opacity:.25 } }
.stream__foot { display:flex;align-items:center;justify-content:space-between;gap:10px }
.stream__lock { display:inline-flex;align-items:center;gap:7px;font-size:clamp(11px, 2.2cqi, 13px);font-weight:550;color:var(--ok) }
.stream__lock .ico { width:14px;height:14px }
.stream__hosts { display:flex;gap:5px }
.stream__hosts i { width:22px;height:6px;border-radius:2px;background:rgba(var(--pa-rgb),.35) }
html.motion .stream__hosts i { will-change:opacity;animation:vdi-blink 1.8s ease-in-out infinite }
.stream__hosts i:nth-child(2) { animation-delay:-.4s } .stream__hosts i:nth-child(3) { animation-delay:-.9s } .stream__hosts i:nth-child(4) { animation-delay:-1.3s }

.stream__wires { grid-area:mid;width:100%;height:18cqi;overflow:visible }
.stream__wires path { fill:none;vector-effect:non-scaling-stroke }
.w-base { stroke:rgba(var(--pa-rgb),.22);stroke-width:1.2 }
.w-flow { stroke:rgba(var(--pa-rgb),.55);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:.012 .028 }
.stream__px { grid-area:mid;place-self:center;z-index:2;background:rgba(5,9,15,.92);color:var(--pa);border-color:rgba(var(--pa-rgb),.4);box-shadow:0 0 24px -6px rgba(var(--pa-rgb),.6) }

.stream__eps { grid-area:eps;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr)) }
.ep { display:flex;flex-direction:column;align-items:center;padding-inline:2.2cqi;min-width:0 }
.ep__dev { position:relative;width:100%;padding:3px;border-radius:7px;border:1.5px solid rgba(255,255,255,.2);background:#090d15;box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 16px 40px -18px rgba(var(--pa-rgb),.55) }
.ep--tab .ep__dev { padding-top:0 }
.ep__chrome { display:flex;align-items:center;gap:3px;height:9px;padding:0 3px }
.ep__chrome i { width:4px;height:4px;border-radius:50%;background:#2a3242 }
.ep__chrome em { flex:1;height:4px;margin-left:4px;border-radius:2px;background:rgba(255,255,255,.12) }
.ep__stand { width:16%;height:2.6cqi;background:linear-gradient(180deg, #1b2230, #11161f);clip-path:polygon(30% 0, 70% 0, 100% 100%, 0 100%) }
.ep__base { width:118%;height:1.6cqi;margin-top:-1px;border-radius:0 0 8px 8px;background:linear-gradient(180deg, #2a3242, #141a25) }
.ep__cap { margin-top:2.2cqi;text-align:center;line-height:1.25 }
.ep__cap b { display:block;font-weight:600;font-size:clamp(11.5px, 2.5cqi, 14px);letter-spacing:-.01em }
.ep__cap span { display:block;font-size:clamp(10px, 2.1cqi, 12px);color:var(--text-3) }
.ep--thin .ep__dev, .ep--lap .ep__dev { margin-top:9px }
html.motion .ep { animation:vdi-rise 1s var(--ease-out) both }
html.motion .ep--tab { animation-delay:.45s } html.motion .ep--thin { animation-delay:.6s } html.motion .ep--lap { animation-delay:.75s }
html.motion .stream__dc { animation:vdi-rise 1s var(--ease-out) .15s both }
@keyframes vdi-rise { from { opacity:0;transform:translate3d(0, 18px, 0) } to { opacity:1;transform:none } }

@media (max-width: 900px) {
  .hero { min-height:0;padding-top:calc(var(--header-h) + 28px);padding-bottom:20px }
  .hero__grid { grid-template-columns:minmax(0, 1fr);gap:28px }
  .hero__chips { margin-top:22px }
}
@media (max-width: 640px) {
  main .lead { font-size:1rem;line-height:1.55 }
  .hero__lead { margin-top:18px }
  .hero__cta { margin-top:24px;gap:10px }
  .hero__cta .btn { flex:1 1 auto }
  .hero__cta .btn--lg { min-height:50px;padding:14px 20px;font-size:.94rem }
  .stream__dc { padding:12px }
  .stream__pool { gap:6px;margin:10px 0 9px }
  .vm { padding:5px;gap:4px;border-radius:8px }
  .vm::after { width:5px;height:5px;right:6px;bottom:7px }
  .stream__wires { height:22cqi }
}

/* ---- CAPABILITY MARQUEE ---- */
.caps { padding:12px 0 clamp(36px, 5vw, 72px) }
.caps__head { margin-bottom:18px }
.caps__title { font-size:var(--fs-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);text-align:center }
.caps__marquee .marquee__track { list-style:none;margin:0;padding:0 }
.cap { display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);white-space:nowrap }
.cap .ico { width:16px;height:16px;color:var(--pa) }
.cap strong { font-weight:600;font-size:.92rem;letter-spacing:-.01em }
.cap span { color:var(--text-3);font-size:.88rem }

/* ---- WHY: problem -> answer ledger ---- */
.why__grid { display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);gap:clamp(32px, 5vw, 80px);align-items:center }
.why__copy .lead { margin-top:18px }
.ledger { list-style:none;margin:0;padding:0;display:grid;gap:12px }
.lg { position:relative;display:grid;grid-template-columns:minmax(0, 1fr) 40px minmax(0, 1fr);align-items:stretch }
.lg__bad, .lg__ok { display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid;transition:opacity .6s var(--ease-out), transform .8s var(--ease-out), border-color .6s, background-color .6s, box-shadow .6s }
.lg__bad { border-color:rgba(var(--bad-rgb),.22);background:linear-gradient(180deg, rgba(var(--bad-rgb),.07), rgba(var(--bad-rgb),.015)) }
.lg__ok { border-color:rgba(var(--pa-rgb),.4);background:linear-gradient(180deg, rgba(var(--pa-rgb),.1), rgba(var(--pa-rgb),.02));box-shadow:0 14px 40px -26px rgba(var(--pa-rgb),.9) }
.lg__ico { display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;font-size:17px }
.lg__bad .lg__ico { color:var(--bad);background:rgba(var(--bad-rgb),.1);border:1px solid rgba(var(--bad-rgb),.25) }
.lg__ok .lg__ico { color:var(--pa);background:rgba(var(--pa-rgb),.1);border:1px solid rgba(var(--pa-rgb),.3) }
.lg p { min-width:0;line-height:1.35 }
.lg p b { display:block;font-weight:600;font-size:.98rem;letter-spacing:-.01em }
.lg p span { display:block;margin-top:3px;font-size:.86rem;color:var(--text-2) }
.lg__arrow { position:relative;align-self:center;height:2px;margin:0 6px }
.lg__arrow i { position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg, rgba(var(--bad-rgb),.6), var(--pa));transform-origin:left;transition:transform .7s var(--ease-out) }
.lg__arrow::after { content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;border-top:2px solid var(--pa);border-right:2px solid var(--pa);transform:translateY(-50%) rotate(45deg);transition:opacity .4s .4s }
html.motion .lg:not(.is-lit) .lg__ok { opacity:.18;transform:translate3d(-14px, 0, 0);border-color:var(--line);background:transparent;box-shadow:none }
html.motion .lg:not(.is-lit) .lg__arrow i { transform:scaleX(0) }
html.motion .lg:not(.is-lit) .lg__arrow::after { opacity:0;transition-delay:0s }
html.motion .lg.is-lit .lg__bad { opacity:.62 }

@media (max-width: 900px) { .why__grid { grid-template-columns:minmax(0, 1fr);gap:28px } }
@media (max-width: 640px) {
  .ledger { gap:10px }
  .lg { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);column-gap:16px }
  .lg__arrow { position:absolute;left:50%;top:50%;width:14px;margin:0 0 0 -7px;z-index:1 }
  .lg__arrow::after { width:5px;height:5px }
  .lg__bad, .lg__ok { flex-direction:column;gap:8px;padding:11px 12px;border-radius:12px }
  .lg__ico { width:28px;height:28px;font-size:15px;border-radius:8px }
  .lg p b { font-size:.9rem }
  .lg p span { font-size:.8rem;line-height:1.4 }
}

/* ---- Shared story head / panel copy ---- */
.how { --step-h:68svh }
.types { --step-h:68svh }
html.motion .how .story__panels, html.motion .types .story__panels { grid-template-rows:auto auto auto;align-content:center }
html.motion .how__head { grid-area:1 / 1;margin-bottom:28px }
html.motion .how .story__panel, html.motion .types .story__panel { grid-area:2 / 1 }
html.motion .how .story__dots, html.motion .types .story__dots { grid-area:3 / 1 }
.how__head { margin-bottom:24px }
.how__title { font-size:clamp(1.75rem, 1.15rem + 2.1vw, 3.1rem);max-width:17ch }
.how__k { display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;padding:5px 11px;border-radius:999px;color:var(--pa);background:rgba(var(--pa-rgb),.08);border:1px solid rgba(var(--pa-rgb),.3) }
.how__p { color:var(--text-2);font-size:var(--fs-lead);line-height:1.55;margin-top:12px;max-width:46ch;text-wrap:pretty }

/* ---- HOW IT WORKS stage (percent-positioned nodes over a 100x100 SVG) ---- */
.flow { container-type:inline-size;overflow:hidden }
.flow > * { position:absolute }
.flow__lines { inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none }
.flow__lines path { fill:none;stroke-linecap:round }
.fl-l { stroke:rgba(var(--pa-rgb),.8);stroke-width:.34;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease-in-out) .1s }
.fl-l.is-on, html:not(.motion) .fl-l { stroke-dashoffset:0 }
.fl-px { stroke:rgba(var(--sky2-rgb),.6);stroke-width:.45;stroke-dasharray:.03 .04 }

.fl-dc { left:35%;top:3.5%;width:62%;height:93%;border-radius:14px;border:1px dashed rgba(var(--pa-rgb),.32);background:rgba(var(--pa-rgb),.025) }
.fl-dc__lbl { position:absolute;left:2.2cqi;top:1.6cqi;display:flex;align-items:center;gap:5px;font-size:clamp(10px, 2cqi, 11.5px);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3) }
.fl-dc__lbl .ico { width:1.2em;height:1.2em;color:var(--pa) }

.fl-ep { left:3%;top:26%;width:26%;display:flex;flex-direction:column;align-items:center;z-index:2 }
.fl-ep__scr { position:relative;width:100%;aspect-ratio:4 / 3;border-radius:8px;border:1.5px solid rgba(255,255,255,.22);background:#080c14;overflow:hidden;box-shadow:0 18px 40px -20px rgba(var(--pa-rgb),.6) }
.fl-ep__stand { width:22%;height:3cqi;background:linear-gradient(180deg, #1b2230, #11161f);clip-path:polygon(30% 0, 70% 0, 100% 100%, 0 100%) }
.fl-ep__cap { margin-top:1.4cqi;font-size:clamp(10px, 2cqi, 11.5px);letter-spacing:.06em;color:var(--text-3);white-space:nowrap }
.fl-scr { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqi;padding:1.4cqi;text-align:center }
.fl-scr b { font-weight:600;font-size:clamp(10px, 2.4cqi, 13px);line-height:1.15 }
.fl-in { display:block;width:84%;padding:.5cqi 1cqi;border-radius:4px;border:1px solid var(--line-strong);background:rgba(255,255,255,.04);font-style:normal;font-family:var(--font-mono);font-size:clamp(10px, 2cqi, 11.5px);color:var(--text-2);text-align:left;line-height:1.3 }
.fl-mfa { display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:clamp(10px, 2cqi, 11.5px);color:var(--ok);line-height:1.2 }
.fl-mfa .ico { width:1.2em;height:1.2em }
.fl-spin { width:5cqi;height:5cqi;border-radius:50%;border:2px solid rgba(var(--pa-rgb),.25);border-top-color:var(--pa) }
html.motion .fl-spin { will-change:transform;animation:vdi-spin .9s linear infinite }
@keyframes vdi-spin { to { transform:rotate(360deg) } }
.fl-bar { display:block;width:70%;height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden }
.fl-bar i { display:block;height:100%;background:linear-gradient(90deg, var(--pa), var(--pa-2));transform-origin:left;transform:scaleX(.92) }
.fl-bar i { will-change:transform }
html.motion .fl-scr.is-on .fl-bar i { animation:vdi-fill 1.6s cubic-bezier(.22, .61, .36, 1) .15s both }
@keyframes vdi-fill { from { transform:scaleX(.05) } to { transform:scaleX(1) } }
.fl-scr--desk { padding:0 }
.fl-scr--desk .mini { width:100%;height:100%;aspect-ratio:auto;border-radius:0 }

.fl-node { z-index:2;display:grid;align-content:center;gap:.6cqi;padding:1.4cqi 2cqi;border-radius:12px;border:1px solid var(--line-strong);background:#0b0f18;transition:border-color .6s, box-shadow .6s, opacity .6s }
.fl-gw { left:39%;top:12%;width:25%;height:26% }
.fl-br { left:69%;top:12%;width:25%;height:26%;grid-template-rows:auto auto auto }
.fl-node.is-on, html:not(.motion) .fl-node { border-color:rgba(var(--pa-rgb),.6);box-shadow:0 0 0 1px rgba(var(--pa-rgb),.1), 0 14px 36px -18px rgba(var(--pa-rgb),.9) }
html.motion .fl-node:not(.is-on) { opacity:.5 }
.fl-node__t { display:flex;align-items:center;gap:.4em;font-weight:600;font-size:clamp(11px, 2.6cqi, 15px);letter-spacing:-.01em;line-height:1.15 }
.fl-node__t .ico { color:var(--pa);width:1.1em;height:1.1em }
.fl-node__s { font-size:clamp(10px, 1.95cqi, 11.5px);color:var(--text-3);line-height:1.25;white-space:nowrap }
.fl-br .fl-sub, .fl-br .fl-ok { grid-row:2;grid-column:1 }
.fl-br .fl-sub2 { grid-row:3;grid-column:1;color:var(--pa) }
.fl-ok { color:var(--ok) }

.fl-hosts { left:39%;top:46%;width:55%;height:46%;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:3.5cqi;z-index:2 }
.fl-host { display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:1cqi;padding:1.2cqi;border-radius:10px;border:1px solid var(--line-strong);background:#0b0f18;min-height:0 }
.fl-host__t { grid-column:1 / -1;font-size:clamp(10px, 1.9cqi, 11px);letter-spacing:.06em;color:var(--text-3);white-space:nowrap;line-height:1.2 }
.fl-sl { position:relative;border-radius:5px;border:1px dashed rgba(var(--pa-rgb),.35);min-height:0 }
.fl-sl.is-busy { border:1px solid var(--line);background:rgba(255,255,255,.06) }
.fl-sl.is-busy::after { content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--text-3) }
.fl-sl--pick { transition:background-color .6s, border-color .6s, box-shadow .6s }
.fl-sl--pick.is-on, html:not(.motion) .fl-sl--pick { border:1px solid var(--pa);background:rgba(var(--pa-rgb),.28);box-shadow:0 0 18px -2px rgba(var(--pa-rgb),.8) }
.fl-sl--pick.is-on::after { content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff }
.fl-tag { left:58%;top:42%;transform:translate(-50%, -50%);z-index:3;padding:2px 8px;border-radius:999px;font-size:clamp(10px, 1.9cqi, 11px);letter-spacing:.08em;text-transform:uppercase;color:var(--pa-2);background:rgba(5,9,15,.95);border:1px solid rgba(var(--sky2-rgb),.45);white-space:nowrap;line-height:1.3 }

/* ---- ACCESS STRIP ---- */
.access__band { display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 2fr);gap:clamp(20px, 3vw, 48px);align-items:center;padding:clamp(20px, 3vw, 36px);border-radius:24px }
.access__head .eyebrow { margin-bottom:10px }
.access__head .h3 { max-width:18ch }
.access__list { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px }
.ac { display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);min-width:0 }
.ac__ico { display:grid;place-items:center;width:34px;height:34px;margin-bottom:6px;border-radius:10px;color:var(--pa);background:rgba(var(--pa-rgb),.1);border:1px solid rgba(var(--pa-rgb),.25);font-size:17px }
.ac b { font-weight:600;font-size:.98rem;letter-spacing:-.01em }
.ac > span:last-child { font-size:.86rem;color:var(--text-2);line-height:1.4 }
@media (max-width: 1100px) { .access__band { grid-template-columns:minmax(0, 1fr) } }
@media (max-width: 640px) {
  .access__list { grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px }
  .ac { padding:12px }
  .ac b { font-size:.92rem }
  .ac > span:last-child { font-size:.8rem }
  .access__head .h3 { font-size:1.3rem }
}

/* ---- DESKTOP TYPES stage ---- */
.ty { container-type:inline-size;overflow:hidden }
.ty > *, .ty__set > * { position:absolute }
.ty__users { list-style:none;margin:0;padding:0;inset:0;z-index:3;pointer-events:none }
.ty__users li { position:absolute;left:calc(var(--x) * 1%);top:4%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.8cqi }
.ty__av { display:grid;place-items:center;width:9cqi;height:9cqi;border-radius:50%;font-size:clamp(10px, 2.2cqi, 13px);font-weight:500;color:var(--pa);background:radial-gradient(circle at 30% 25%, rgba(var(--pa-rgb),.3), rgba(var(--pa-rgb),.06));border:1px solid rgba(var(--pa-rgb),.5);box-shadow:0 0 22px -6px rgba(var(--pa-rgb),.7) }
.ty__users b { font-weight:600;font-size:clamp(10px, 2.3cqi, 13px);line-height:1 }
.ty__set { inset:0 }
.ty__lines { inset:0;width:100%;height:100%;z-index:1 }
.ty__lines path { fill:none;stroke:rgba(var(--pa-rgb),.75);stroke-width:.32;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-in-out) .15s }
.ty__set.is-on .ty__lines path, html:not(.motion) .ty__lines path { stroke-dashoffset:0 }
.ty__lbl { display:flex;align-items:center;gap:5px;font-size:clamp(10px, 2cqi, 11.5px);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);line-height:1.2;white-space:nowrap }
.ty__lbl .ico { color:var(--pa) }
.ty__frame { left:5%;top:47%;width:90%;height:48%;border-radius:14px;border:1px dashed rgba(var(--pa-rgb),.32);background:rgba(var(--pa-rgb),.025);z-index:0 }
.ty__frame .ty__lbl { position:absolute;left:2cqi;top:1.4cqi }
.ty__note { position:absolute;left:50%;bottom:2cqi;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:clamp(10px, 1.9cqi, 11px);letter-spacing:.06em;color:var(--pa-2);border:1px solid rgba(var(--sky2-rgb),.35);background:rgba(5,9,15,.9);white-space:nowrap;line-height:1.4 }
.ty__d { left:calc(var(--x) * 1%);top:60%;width:10.5%;aspect-ratio:4 / 3;transform:translateX(-50%);z-index:2;display:grid;place-items:center;border-radius:7px;border:1px dashed rgba(255,255,255,.22);background:#0b0f18;color:var(--text-3);font-size:clamp(12px, 3cqi, 18px) }
.ty__d.is-use { border:1px solid rgba(var(--pa-rgb),.55);background:rgba(var(--pa-rgb),.12);color:var(--pa) }
.ty__d--reset { border:1px solid rgba(var(--sky2-rgb),.55);color:var(--pa-2);background:rgba(var(--sky2-rgb),.08) }
html.motion .ty__set.is-on .ty__d--reset .ico { will-change:transform;animation:vdi-spin-r 2.4s var(--ease-in-out) infinite }
@keyframes vdi-spin-r { 0%, 30% { transform:rotate(0) } 70%, 100% { transform:rotate(-360deg) } }
.ty__own { left:calc(var(--x) * 1%);top:56%;width:19%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6cqi;padding:2cqi 1cqi;border-radius:10px;border:1px solid rgba(var(--pa-rgb),.5);background:linear-gradient(180deg, rgba(var(--pa-rgb),.14), rgba(var(--pa-rgb),.03)) }
.ty__own .ico { color:var(--pa);font-size:clamp(14px, 4cqi, 24px) }
.ty__own b { font-weight:600;font-size:clamp(10px, 2.3cqi, 13px);line-height:1.1;white-space:nowrap }
.ty__own em { font-style:normal;font-size:clamp(10px, 1.8cqi, 10.5px);letter-spacing:0;color:var(--text-3);line-height:1.1 }
.ty__host { left:20%;top:48%;width:60%;height:46%;z-index:2;display:grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:auto repeat(4, minmax(0, 1fr));gap:1cqi;padding:1.8cqi 2.2cqi;border-radius:12px;border:1px solid rgba(var(--pa-rgb),.5);background:linear-gradient(180deg, rgba(var(--pa-rgb),.1), rgba(var(--pa-rgb),.02)), #0b0f18 }
.ty__sess { display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:2cqi;padding:0 1.4cqi;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);min-height:0 }
.ty__sess b { font-weight:600;font-size:clamp(10px, 2.1cqi, 12px);line-height:1;min-width:7ch }
.ty__sess i { height:4px;border-radius:4px;background:linear-gradient(90deg, var(--pa), rgba(var(--pa-rgb),.2));transform-origin:left }
html.motion .ty__set.is-on .ty__sess i { will-change:transform;animation:vdi-sess 2.6s ease-in-out infinite alternate }
.ty__sess:nth-child(3) i { animation-delay:-.7s !important } .ty__sess:nth-child(4) i { animation-delay:-1.3s !important } .ty__sess:nth-child(5) i { animation-delay:-1.9s !important }
@keyframes vdi-sess { from { transform:scaleX(.35) } to { transform:scaleX(.95) } }
.ty__app { left:calc(var(--x) * 1%);top:57%;width:24%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.8cqi;padding:0 0 2cqi;border-radius:9px;overflow:hidden;border:1px solid rgba(var(--pa-rgb),.5);background:#0b0f18;box-shadow:0 14px 34px -18px rgba(var(--pa-rgb),.9) }
.ty__appbar { display:block;width:100%;height:2.6cqi;margin-bottom:1.2cqi;background:linear-gradient(90deg, rgba(var(--pa-rgb),.85), rgba(var(--pa-rgb),.4)) }
.ty__app .ico { color:var(--pa);font-size:clamp(14px, 4cqi, 24px) }
.ty__app b { font-weight:600;font-size:clamp(10px, 2.3cqi, 13px);line-height:1.1;white-space:nowrap }
.ty__foot { left:50%;bottom:3.5%;transform:translateX(-50%);padding:2px 9px;border-radius:999px;font-size:clamp(10px, 1.9cqi, 11px);letter-spacing:.06em;text-transform:uppercase;color:var(--pa-2);border:1px solid rgba(var(--sky2-rgb),.35);background:rgba(5,9,15,.9);white-space:nowrap;line-height:1.4 }
html.motion .ty__set > :not(svg) { transition:opacity .6s var(--ease-out), translate .8s var(--ease-out) }
html.motion .ty__set:not(.is-on) > :not(svg) { opacity:0;translate:0 10px }

@media (max-width: 900px) {
  .how, .types { --step-h:60svh }
  html.motion .how__head { margin-bottom:12px }
  html.motion .how__head .eyebrow { margin-bottom:8px }
  .how__title { font-size:1.5rem;max-width:none }
  .how__k { margin-bottom:8px;padding:4px 10px }
  .how__p { font-size:.98rem;margin-top:6px }
  .story .h3 { font-size:1.25rem }
}

/* ---- IMAGE LIFECYCLE (pinned) ---- */
.life { position:relative }
html.motion .life__pin { height:200svh }
html.motion .life__sticky { position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-top:var(--header-h);overflow:hidden }
html:not(.motion) .life__sticky { padding-block:var(--space-section) }
.life__grid { display:grid;grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);gap:clamp(32px, 5vw, 80px);align-items:center }
.life__steps { list-style:none;margin:28px 0 0;padding:0;display:grid;gap:6px }
.life__steps li { display:grid;grid-template-columns:38px minmax(0, 1fr);gap:10px;padding:10px 12px;border-radius:12px;border:1px solid transparent;transition:opacity .5s, background-color .5s, border-color .5s }
.life__steps b { font-weight:500;font-size:var(--fs-xs);letter-spacing:.1em;color:var(--pa);padding-top:3px }
.life__steps span { color:var(--text-2);font-size:.95rem;line-height:1.45 }
.life__steps strong { display:block;color:var(--text);font-weight:600;font-size:1.02rem;letter-spacing:-.01em }
html.motion .life__steps li:not(.is-lit) { opacity:.32 }
.life__steps li.is-lit { border-color:rgba(var(--pa-rgb),.25);background:rgba(var(--pa-rgb),.05) }

.lc { container-type:inline-size;display:grid;gap:16px;padding:clamp(16px, 2.4vw, 26px) }
.lc__rail { position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:10px;padding-top:36px }
.lc__ver { display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--line-strong);background:#0b0f18;white-space:nowrap;transition:opacity .6s, border-color .6s, box-shadow .6s;position:relative;z-index:1 }
.lc__ver .ico { color:var(--pa);font-size:18px }
.lc__ver b { font-weight:600;font-size:.95rem }
.lc__ver em { font-style:normal;font-size:11px;letter-spacing:.06em;padding:2px 7px;border-radius:999px;color:var(--pa);border:1px solid rgba(var(--pa-rgb),.4) }
.lc__ver--2 .ico, .lc__ver--2 em { color:var(--pa-2);border-color:rgba(var(--sky2-rgb),.45) }
.lc__ver.is-lit, html:not(.motion) .lc__ver { border-color:rgba(var(--pa-rgb),.55);box-shadow:0 12px 34px -18px rgba(var(--pa-rgb),.9) }
html.motion .lc__ver:not(.is-lit) { opacity:.35 }
.lc__link { height:2px;border-radius:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden }
.lc__link i { position:absolute;inset:0;background:linear-gradient(90deg, var(--pa), var(--pa-2));transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease-out) }
.lc__link.is-lit i, html:not(.motion) .lc__link i { transform:none }
.lc__back { position:absolute;left:80px;right:58px;top:12px;height:24px;border:1.6px solid var(--warn);border-bottom:0;border-radius:18px 18px 0 0;clip-path:inset(0 0 0 100%);transition:clip-path 1s var(--ease-in-out);pointer-events:none }
.lc__back::after { content:"";position:absolute;left:-5px;bottom:-1px;width:8px;height:8px;border-right:1.6px solid var(--warn);border-bottom:1.6px solid var(--warn);transform:rotate(45deg) }
.lc__back.is-lit, html:not(.motion) .lc__back { clip-path:inset(-10px -10px 0 -10px) }
.lc__backlbl { position:absolute;left:50%;top:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);background:#0b0f18;border:1px solid rgba(var(--warn-rgb),.4);white-space:nowrap;line-height:1.4;transition:opacity .5s .4s }
html.motion .lc__backlbl:not(.is-lit) { opacity:0;transition-delay:0s }

.lc__pool { padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02) }
.lc__poolhead { display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px;line-height:1.3 }
.lc__count { display:grid;text-align:right;color:var(--pa) }
.lc__count > span { grid-area:1 / 1;transition:opacity .4s }
.lc__c2 { opacity:0;color:var(--pa-2) }
.lc__poolwrap.is-lit .lc__c1, html:not(.motion) .lc__c1 { opacity:0 }
.lc__poolwrap.is-lit .lc__c2, html:not(.motion) .lc__c2 { opacity:1 }
.lc__tiles { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8, minmax(0, 1fr));gap:8px }
.lc__tiles li { --tc:var(--info);--tc-rgb:var(--info-rgb);position:relative;aspect-ratio:4 / 3;border-radius:6px;border:1px solid rgba(var(--tc-rgb),.45);background:linear-gradient(180deg, rgba(var(--tc-rgb),.22), rgba(var(--tc-rgb),.06));transition:opacity .5s var(--ease-out), transform .6s var(--ease-spring), border-color .5s, background-color .5s;transition-delay:calc(var(--k) * 35ms) }
.lc__tiles li i { position:absolute;left:18%;right:18%;top:26%;height:14%;border-radius:2px;background:rgba(var(--tc-rgb),.7);transition:background-color .5s;transition-delay:inherit }
.lc__tiles li::after { content:"";position:absolute;right:12%;bottom:16%;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.7 }
html.motion .lc__pool:not(.is-lit) .lc__tiles li { opacity:0;transform:scale(.55) }
.lc__poolwrap.is-lit .lc__tiles li, html:not(.motion) .lc__tiles li { --tc:var(--pa-2);--tc-rgb:var(--sky2-rgb);transition-delay:calc(var(--k) * 55ms) }
.lc__lean.is-lit .t-spare, html:not(.motion) .t-spare { border-style:dashed;background:transparent }
.lc__lean.is-lit .t-spare::after, html:not(.motion) .t-spare::after { opacity:0 }
.lc__lean.is-lit .t-off, html:not(.motion) .t-off { opacity:.28;filter:grayscale(1) }
.lc__lean.is-lit .t-off::after, html:not(.motion) .t-off::after { opacity:0 }
.lc__legend { display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);line-height:1.3 }
.lc__legend span { display:inline-flex;align-items:center;gap:6px }
.lc__legend span::before { content:"";width:10px;height:8px;border-radius:2px;border:1px solid rgba(var(--sky2-rgb),.6);background:rgba(var(--sky2-rgb),.2) }
.lc__legend .lg-spare::before { border-style:dashed;background:transparent }
.lc__legend .lg-off::before { opacity:.35;filter:grayscale(1) }
html.motion .lc[data-ambient] .lc__tiles li::after { will-change:opacity;animation:vdi-blink 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * -.31s) }

@media (min-width: 901px) and (max-height: 820px) {
  .life .h2 { font-size:clamp(2rem, 1.2rem + 2vw, 2.9rem) }
  .life__steps { margin-top:16px }
  .life__steps li { padding:7px 12px }
}
@media (max-width: 900px) {
  html.motion .life__pin { height:170svh }
  .life__grid { grid-template-columns:minmax(0, 1fr);gap:14px }
  .life .h2 { font-size:clamp(1.5rem, 1.1rem + 2vw, 2.2rem) }
  .life .eyebrow { margin-bottom:8px }
  .life__steps { margin-top:12px;gap:2px }
  .life__steps li { grid-template-columns:30px minmax(0, 1fr);gap:6px;padding:6px 10px }
  .life__steps span { font-size:.85rem;line-height:1.35 }
  .life__steps strong { font-size:.95rem }
}
@media (max-width: 640px) {
  html.motion .life__sticky { padding-top:calc(var(--header-h) - 4px) }
  .lc { gap:10px;padding:12px;border-radius:16px }
  .lc__rail { padding-top:30px;gap:6px }
  .lc__ver { padding:7px 9px;gap:6px }
  .lc__ver b { font-size:.82rem }
  .lc__ver .ico { font-size:15px }
  .lc__ver em { font-size:10px;padding:1px 6px }
  .lc__back { left:62px;right:46px;top:10px;height:20px }
  .lc__backlbl { font-size:10px }
  .lc__pool { padding:10px }
  .lc__poolhead { font-size:10px;margin-bottom:8px }
  .lc__tiles { gap:5px }
  .lc__legend { font-size:10px;gap:4px 12px;margin-top:8px }
}
@media (max-width: 640px) and (max-height: 760px) {
  .life .eyebrow { display:none }
  .life .h2 { font-size:1.35rem }
  .life__steps li { padding:4px 8px }
  .life__steps span { font-size:.8rem }
  .life__steps strong { font-size:.9rem }
}

/* ---- USER EXPERIENCE bento ---- */
.bento { display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(12px, 1.4vw, 18px) }
.bx { position:relative;display:flex;flex-direction:column;padding:18px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--bg-elev);min-width:0;overflow:hidden }
.bx--wide { grid-column:span 2;background:radial-gradient(80% 90% at 100% 0%, rgba(var(--pa-rgb),.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--bg-elev);border-color:rgba(var(--pa-rgb),.25) }
.bx h3 { margin-bottom:6px }
.bx p { color:var(--text-2);font-size:.93rem;line-height:1.5 }
.bx__viz { position:relative;height:118px;margin-bottom:16px;border-radius:12px;border:1px solid var(--line);background:#070a11;overflow:hidden;display:grid;place-items:center }

.bx-net { place-items:stretch;padding:12px 14px }
.bx-net__lanes { position:relative;z-index:1;display:grid;gap:9px;align-content:center }
.bx-net__lane { display:grid;grid-template-columns:120px minmax(0, 1fr) 76px;align-items:center;gap:12px }
.bx-net__lane b { font-weight:550;font-size:.82rem;white-space:nowrap }
.bx-net__lane i { height:6px;border-radius:6px;background:linear-gradient(90deg, var(--pa), var(--pa-2));transform-origin:left;transform:scaleX(var(--w));box-shadow:0 0 12px -2px rgba(var(--pa-rgb),.8) }
html.motion .bx-net__lane i { will-change:transform;animation:vdi-bw 3.2s ease-in-out infinite alternate }
.bx-net__lane:nth-child(2) i { animation-delay:-1.1s !important } .bx-net__lane:nth-child(3) i { animation-delay:-2.2s !important }
@keyframes vdi-bw { from { transform:scaleX(var(--w)) } to { transform:scaleX(calc(var(--w) - .14)) } }
.bx-net__lane em { font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pa);text-align:right }
.bx-net__wave { position:absolute;left:0;right:0;bottom:0;width:100%;height:40px;opacity:.35 }
.bx-net__wave path { fill:rgba(var(--pa-rgb),.12) }
.bx-net__wave .ln { fill:none;stroke:var(--pa);stroke-width:1;vector-effect:non-scaling-stroke }

.bx-mm { display:flex;align-items:center;justify-content:center;gap:6px;padding:0 14px }
.bx-mm span { width:30%;aspect-ratio:16 / 10;border-radius:5px;border:1.5px solid rgba(255,255,255,.2);background:linear-gradient(160deg, #10284a, #081425) }
.bx-mm__win { position:absolute;left:21%;width:42%;top:40%;height:22%;transform-origin:left;opacity:.92;border-radius:4px;background:linear-gradient(180deg, rgba(var(--pa-rgb),.9) 0 16%, #15243b 16%);box-shadow:0 6px 18px rgba(0,0,0,.6);border:1px solid rgba(var(--pa-rgb),.5) }
html.motion .bx-mm__win { will-change:transform;animation:vdi-span 6s var(--ease-in-out) infinite }
@keyframes vdi-span { 0%, 15% { transform:translateX(0) scaleX(.55);transform-origin:left } 45%, 70% { transform:translateX(0) scaleX(1.55) } 90%, 100% { transform:translateX(0) scaleX(.55) } }

.bx-call { display:flex;align-items:center;justify-content:center;gap:16px }
.bx-call__cam, .bx-call__mic { display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:var(--pa);background:rgba(var(--pa-rgb),.1);border:1px solid rgba(var(--pa-rgb),.3);font-size:22px }
.bx-call__lvl { display:flex;align-items:center;gap:4px;height:40px }
.bx-call__lvl i { width:5px;height:100%;border-radius:4px;background:var(--pa-2);transform-origin:center;transform:scaleY(.3) }
html.motion .bx-call__lvl i { will-change:transform;animation:vdi-lvl 1s ease-in-out infinite alternate }
.bx-call__lvl i:nth-child(2) { animation-delay:-.3s !important } .bx-call__lvl i:nth-child(3) { animation-delay:-.6s !important } .bx-call__lvl i:nth-child(4) { animation-delay:-.15s !important } .bx-call__lvl i:nth-child(5) { animation-delay:-.45s !important }
@keyframes vdi-lvl { from { transform:scaleY(.2) } to { transform:scaleY(1) } }

.bx-dev { display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 18px;place-items:initial }
.bx-dev span { display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);line-height:1.2 }
.bx-dev span .ico { color:var(--pa);font-size:14px }
.bx-dev span::after { content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok) }

.bx-clip { display:flex;align-items:center;justify-content:space-between;padding:0 22px }
.bx-clip__a, .bx-clip__b { display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);background:rgba(255,255,255,.03);color:var(--text-2);font-size:22px;position:relative;z-index:1 }
.bx-clip__b { color:var(--pa);border-color:rgba(var(--pa-rgb),.4) }
.bx-clip::before { content:"";position:absolute;left:66px;right:66px;top:50%;border-top:1px dashed rgba(var(--pa-rgb),.4) }
.bx-clip__doc { position:absolute;left:50%;top:50%;display:grid;place-items:center;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:8px;color:#04060a;background:var(--pa);font-size:15px;font-style:normal }
html.motion .bx-clip__doc { will-change:transform, opacity;animation:vdi-doc 3s var(--ease-in-out) infinite }
@keyframes vdi-doc { 0% { transform:translateX(-60px);opacity:0 } 15% { opacity:1 } 85% { opacity:1 } 100% { transform:translateX(60px);opacity:0 } }

.bx-gpu { display:flex;align-items:center;justify-content:center;gap:22px;perspective:400px }
.bx-gpu__cube { position:relative;width:46px;height:46px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(35deg) }
html.motion .bx-gpu__cube { animation:vdi-cube 9s linear infinite }
@keyframes vdi-cube { to { transform:rotateX(-24deg) rotateY(395deg) } }
.bx-gpu__cube i { position:absolute;inset:0;border:1px solid rgba(var(--pa-rgb),.8);background:rgba(var(--pa-rgb),.08) }
.bx-gpu__cube i:nth-child(1) { transform:translateZ(23px) } .bx-gpu__cube i:nth-child(2) { transform:rotateY(180deg) translateZ(23px) }
.bx-gpu__cube i:nth-child(3) { transform:rotateY(90deg) translateZ(23px) } .bx-gpu__cube i:nth-child(4) { transform:rotateY(-90deg) translateZ(23px) }
.bx-gpu__cube i:nth-child(5) { transform:rotateX(90deg) translateZ(23px) } .bx-gpu__cube i:nth-child(6) { transform:rotateX(-90deg) translateZ(23px) }
.bx-gpu__tags { display:grid;gap:6px }
.bx-gpu__tags em { font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;color:var(--pa);border:1px solid rgba(var(--pa-rgb),.35);background:rgba(var(--pa-rgb),.08);text-align:center;line-height:1.3 }

.bx-prof { display:flex;align-items:center;justify-content:center;gap:14px }
.bx-prof__u { display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--pa);background:rgba(var(--pa-rgb),.1);border:1px solid rgba(var(--pa-rgb),.35);font-size:21px }
.bx-prof__s { display:grid;gap:5px }
.bx-prof__s i { font-style:normal;display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);padding:3px 9px 3px 6px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.03);line-height:1.3 }
.bx-prof__s i::before { content:"";width:8px;height:8px;border-radius:2px;background:var(--pa) }

@media (max-width: 1024px) { .bento { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) {
  .bento { gap:10px }
  .bx { padding:12px;border-radius:16px }
  .bx__viz { height:82px;margin-bottom:10px;border-radius:10px }
  .bx--wide .bx__viz { height:104px }
  .bx h3 { font-size:.95rem;margin-bottom:4px }
  .bx p { font-size:.82rem;line-height:1.45 }
  .bx-net { padding:10px 12px }
  .bx-net__lane { grid-template-columns:104px minmax(0, 1fr) 62px;gap:8px }
  .bx-net__lane b { font-size:.78rem }
  .bx-net__lane em { font-size:10px }
  .bx-call { gap:8px }
  .bx-call__cam, .bx-call__mic { width:34px;height:34px;font-size:17px;border-radius:9px }
  .bx-call__lvl { gap:3px;height:28px }
  .bx-call__lvl i { width:4px }
  .bx-dev { padding:0 8px;gap:4px }
  .bx-dev span { padding:2px 8px;font-size:10px }
  .bx-clip { padding:0 10px }
  .bx-clip__a, .bx-clip__b { width:34px;height:34px;font-size:17px;border-radius:9px }
  .bx-clip::before { left:46px;right:46px }
  .bx-clip__doc { width:22px;height:22px;margin:-11px 0 0 -11px;font-size:12px }
  @keyframes vdi-doc { 0% { transform:translateX(-36px);opacity:0 } 15% { opacity:1 } 85% { opacity:1 } 100% { transform:translateX(36px);opacity:0 } }
  .bx-gpu { gap:12px }
  .bx-gpu__cube { width:34px;height:34px }
  .bx-gpu__cube i:nth-child(1) { transform:translateZ(17px) } .bx-gpu__cube i:nth-child(2) { transform:rotateY(180deg) translateZ(17px) }
  .bx-gpu__cube i:nth-child(3) { transform:rotateY(90deg) translateZ(17px) } .bx-gpu__cube i:nth-child(4) { transform:rotateY(-90deg) translateZ(17px) }
  .bx-gpu__cube i:nth-child(5) { transform:rotateX(90deg) translateZ(17px) } .bx-gpu__cube i:nth-child(6) { transform:rotateX(-90deg) translateZ(17px) }
  .bx-gpu__tags em { font-size:10px;padding:2px 7px }
  .bx-prof { gap:8px }
  .bx-prof__u { width:34px;height:34px;font-size:17px }
  .bx-prof__s { gap:3px }
  .bx-prof__s i { font-size:10px;padding:1px 7px 1px 5px }
  .bx-mm { padding:0 8px;gap:4px }
}

/* ---- SECURITY & POLICY ---- */
.sec { overflow:hidden;isolation:isolate }
.sec__glow { left:-30%;top:10%;opacity:.6 }
.sec__grid { display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:clamp(32px, 5vw, 80px);align-items:center }
.sec__copy .lead { margin-top:18px }
.pol { padding:6px 0 4px;overflow:hidden }
.pol__head { display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line) }
.pol__head > span { display:inline-flex;align-items:center;gap:8px }
.pol__head .dot { color:var(--pa) }
.pol__head b { font-weight:500;color:var(--pa) }
.pol__rows { list-style:none;margin:0;padding:0 }
.pr { display:grid;grid-template-columns:20px minmax(0, 1fr) auto;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);transition:opacity .5s, background-color .5s }
.pr:last-child { border-bottom:0 }
.pr > .ico { font-size:18px;color:var(--text-3);transition:color .5s }
.pr > span:nth-child(2) { font-size:.95rem;font-weight:500 }
.pr__sw { --c:var(--text-3);--c-rgb:255, 255, 255;position:relative;display:grid;width:78px;height:26px;border-radius:999px;border:1px solid rgba(var(--c-rgb),.35);background:rgba(var(--c-rgb),.06);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;transition:border-color .5s, background-color .5s }
.pr__sw::before { content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 10px rgba(var(--c-rgb),.8);transition:transform .55s var(--ease-spring), background-color .5s }
.pr__sw em { grid-area:1 / 1;align-self:center;font-style:normal;padding-left:28px;color:var(--c);transition:opacity .35s;line-height:1 }
.pr__v { opacity:0 }
.pr--deny { --rc:var(--bad);--rc-rgb:var(--bad-rgb) }
.pr--allow { --rc:var(--ok);--rc-rgb:var(--ok-rgb) }
.pr--on { --rc:var(--pa);--rc-rgb:var(--pa-rgb) }
.pr.is-lit .pr__sw, html:not(.motion) .pr__sw { --c:var(--rc);--c-rgb:var(--rc-rgb) }
.pr.is-lit .pr__sw::before, html:not(.motion) .pr__sw::before { transform:translateX(52px) }
.pr.is-lit .pr__sw em, html:not(.motion) .pr__sw em { padding-left:10px }
.pr.is-lit .pr__off, html:not(.motion) .pr__off { opacity:0 }
.pr.is-lit .pr__v, html:not(.motion) .pr__v { opacity:1 }
.pr.is-lit > .ico, html:not(.motion) .pr > .ico { color:var(--rc) }
html.motion .pr:not(.is-lit) { opacity:.45 }
.pr__sw em { transition:opacity .35s, padding .5s var(--ease-out) }

.sec__tiles { margin-top:clamp(24px, 3vw, 40px) }
.st { display:flex;flex-direction:column }
.st h3 { font-size:1rem;margin-bottom:4px }
.st p { font-size:.88rem }
.st__viz { position:relative;height:74px;margin-bottom:12px;border-radius:10px;border:1px solid var(--line);background:#070a11;overflow:hidden;display:grid;place-items:center }
.st-wm { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='60'%3E%3Ctext x='0' y='36' transform='rotate(-18 75 30)' font-family='monospace' font-size='9' fill='rgba(255,255,255,0.22)'%3Ealice %C2%B7 WIN-07 %C2%B7 14:32%3C/text%3E%3C/svg%3E") 0 0 / 150px 60px, #070a11 }
.st-wm__win { width:58%;height:58%;border-radius:4px;border:1px solid rgba(var(--pa-rgb),.4);background:linear-gradient(180deg, rgba(var(--pa-rgb),.5) 0 16%, rgba(21,36,59,.6) 16%) }
.st-rec { display:flex;align-items:center;gap:12px;padding:0 14px }
.st-rec__dot { display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.1em;color:var(--bad) }
.st-rec__dot::before { content:"";width:9px;height:9px;border-radius:50%;background:var(--bad);box-shadow:0 0 10px var(--bad) }
html.motion .st-rec__dot::before { will-change:opacity;animation:vdi-blink 1.4s ease-in-out infinite }
.st-rec__tl { flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden }
.st-rec__tl i { display:block;height:100%;width:100%;background:linear-gradient(90deg, rgba(var(--bad-rgb),.5), var(--bad));transform-origin:left;transform:scaleX(.6) }
html.motion .st-rec__tl i { will-change:transform;animation:vdi-fill 6s linear infinite }
.st-mfa { display:flex;align-items:center;justify-content:center;gap:12px }
.st-mfa > .ico { font-size:28px;color:var(--pa) }
.st-mfa span { display:flex;gap:4px }
.st-mfa span i { width:9px;height:9px;border-radius:50%;background:var(--pa);opacity:.25 }
html.motion .st-mfa span i { will-change:opacity;animation:vdi-code 3s ease-in-out infinite }
.st-mfa span i:nth-child(2) { animation-delay:.25s } .st-mfa span i:nth-child(3) { animation-delay:.5s } .st-mfa span i:nth-child(4) { animation-delay:.75s } .st-mfa span i:nth-child(5) { animation-delay:1s } .st-mfa span i:nth-child(6) { animation-delay:1.25s }
@keyframes vdi-code { 0% { opacity:.25 } 12%, 78% { opacity:1 } 92%, 100% { opacity:.25 } }
.st-log { display:grid;gap:7px;padding:0 16px;place-items:initial;align-content:center }
.st-log i { display:block;height:6px;border-radius:3px;background:linear-gradient(90deg, rgba(var(--ok-rgb),.7) 0 12%, transparent 12% 16%, rgba(255,255,255,.18) 16%) }
.st-log i:nth-child(2) { width:82%;background:linear-gradient(90deg, rgba(var(--warn-rgb),.7) 0 14%, transparent 14% 19%, rgba(255,255,255,.18) 19%) }
.st-log i:nth-child(3) { width:64% }

@media (max-width: 900px) { .sec__grid { grid-template-columns:minmax(0, 1fr);gap:24px } }
@media (max-width: 640px) {
  .pr { padding:9px 14px;gap:10px }
  .pr > span:nth-child(2) { font-size:.9rem }
  .pol__head { padding:10px 14px;font-size:10.5px }
  .st__viz { height:58px;margin-bottom:10px }
  .st h3 { font-size:.92rem }
  .st-mfa span i { width:7px;height:7px }
  .st-rec { gap:8px;padding:0 10px }
}

/* ---- OPERATIONS ---- */
.ops__grid { display:grid;grid-template-columns:minmax(0, 1.65fr) minmax(0, 1fr);gap:clamp(20px, 3vw, 40px);align-items:start }
.ops__dash { box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 40px 120px -40px rgba(0,0,0,.9), 0 30px 90px -50px rgba(var(--pa-rgb),.45) }
.dash { display:grid;gap:14px;padding:16px;background:radial-gradient(70% 60% at 100% 0%, rgba(var(--pa-rgb),.06), transparent 60%), #0a0e16 }
.dash__kpis { display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px }
.kpi { display:grid;gap:8px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.025);justify-items:start;min-width:0 }
.kpi__t { font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);line-height:1.2;white-space:nowrap }
.kpi__sp { width:100%;height:26px;overflow:visible }
.kpi__sp path { fill:none;stroke:var(--pa);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round }
html.motion .kpi__sp path { stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease-in-out) .5s }
html.motion .ops__dash.is-in .kpi__sp path { stroke-dashoffset:0 }
.kpi__hosts { display:flex;gap:6px;height:26px;align-items:center }
.kpi__hosts i { width:14px;height:14px;border-radius:4px;background:rgba(var(--ok-rgb),.2);border:1px solid rgba(var(--ok-rgb),.6) }
.kpi .chip { padding:3px 8px }
.kpi .chip .dot { width:6px;height:6px }
.dash__tbl { border-radius:10px;border:1px solid var(--line);overflow:hidden }
.dr { display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .5fr) minmax(0, 1fr);align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:.86rem;color:var(--text-2) }
.dr:last-child { border-bottom:0 }
.dr > span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.dr--h { font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);background:rgba(255,255,255,.02) }
.dr > span:first-child { color:var(--text);font-weight:500 }
.dr--h > span:first-child { color:var(--text-3);font-weight:400 }
.dr__host { font-size:.8rem }
.dr__q { display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden }
.dr__q i { display:block;height:100%;background:var(--ok);transform-origin:left;transform:scaleX(var(--q)) }
.dr__q--warn i { background:var(--warn) }
html.motion .dr__q i { will-change:transform;animation:vdi-q 4s ease-in-out infinite alternate }
@keyframes vdi-q { from { transform:scaleX(var(--q)) } to { transform:scaleX(calc(var(--q) - .1)) } }
.dr--shadow { background:rgba(var(--warn-rgb),.04) }
.dr__help { grid-column:1 / -1;display:grid;justify-items:start }
.dr__help > span { grid-area:1 / 1;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;transition:opacity .45s, transform .5s var(--ease-out);white-space:nowrap }
.dr__s1 { color:var(--warn);border:1px solid rgba(var(--warn-rgb),.4);background:rgba(var(--warn-rgb),.08) }
.dr__s2 { color:var(--ok);border:1px solid rgba(var(--ok-rgb),.4);background:rgba(var(--ok-rgb),.08) }
html.motion .dr__help > span:not(.is-lit) { opacity:0;transform:translateY(4px) }
.dr__help:has(.dr__s2.is-lit) .dr__s1 { opacity:0 }
html:not(.motion) .dr__s1 { visibility:hidden }

.ops__list { list-style:none;margin:0;padding:0;display:grid;gap:10px }
.ops__list li { display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)) }
.ops__list .ico { font-size:20px;color:var(--pa);margin-top:2px }
.ops__list span { color:var(--text-2);font-size:.92rem;line-height:1.45 }
.ops__list b { display:block;color:var(--text);font-weight:600;font-size:1rem;letter-spacing:-.01em }
.ops__note { margin-top:18px;font-size:var(--fs-sm) }

@media (max-width: 1100px) { .ops__grid { grid-template-columns:minmax(0, 1fr) } .ops__list { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) {
  .dash { padding:10px;gap:10px }
  .dash__kpis { grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px }
  .kpi { padding:9px 10px;gap:6px }
  .kpi__sp, .kpi__hosts { height:20px }
  .dr { grid-template-columns:minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .4fr) minmax(0, .8fr);gap:8px;padding:8px 10px;font-size:.78rem }
  .dr--h { font-size:10px }
  .dr__host { font-size:.74rem }
  .dr__help > span { font-size:10px }
  .ops__list { gap:8px }
  .ops__list li { flex-direction:column;gap:6px;padding:12px }
  .ops__list span { font-size:.8rem }
  .ops__list b { font-size:.92rem }
}

/* ---- ECOSYSTEM stack ---- */
.eco__grid { display:grid;grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);gap:clamp(32px, 5vw, 80px);align-items:center }
.eco__copy .lead { margin-top:18px }
.stack { position:relative;display:grid;gap:26px }
.stack__row { position:relative;display:grid;grid-template-columns:88px minmax(0, 1fr) minmax(0, 1fr);gap:12px;align-items:stretch }
.stack__row:not(:last-child)::after { content:"";position:absolute;left:calc(88px + 12px + (100% - 100px) / 2);top:100%;height:26px;width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg, var(--pa) 0 4px, transparent 4px 8px);background-size:2px 8px;opacity:.7 }
.stack__row:not(:last-child)::before { content:"";position:absolute;left:calc(88px + 12px + (100% - 100px) / 2);top:100%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--pa);box-shadow:0 0 8px var(--pa);opacity:0;pointer-events:none }
html.motion .stack__row:not(:last-child)::before { will-change:transform, opacity;animation:vdi-down 1.6s cubic-bezier(.45, 0, .55, 1) infinite }
@keyframes vdi-down { 0% { transform:translate3d(0, -3px, 0);opacity:0 } 20% { opacity:1 } 80% { opacity:1 } 100% { transform:translate3d(0, 23px, 0);opacity:0 } }
.stack__lvl { align-self:center;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3) }
.sk { --c:var(--pa);--c-rgb:var(--pa-rgb);display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid rgba(var(--c-rgb),.3);background:linear-gradient(180deg, rgba(var(--c-rgb),.08), rgba(var(--c-rgb),.015)), var(--bg-elev);transition:border-color .3s, transform .4s var(--ease-out);min-width:0 }
a.sk:hover { border-color:rgba(var(--c-rgb),.7);transform:translateY(-2px) }
.sk__ico { display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;color:var(--c);background:rgba(var(--c-rgb),.12);border:1px solid rgba(var(--c-rgb),.35);font-size:17px }
.sk > span:last-child { font-size:.86rem;color:var(--text-2);line-height:1.4 }
.sk b { display:block;color:var(--text);font-weight:600;font-size:1rem;letter-spacing:-.01em }
.sk--sos { --c:var(--sos);--c-rgb:62, 230, 193 }
.sk--dm { --c:var(--dm);--c-rgb:155, 123, 255 }
.sk--ztna { --c:var(--ztna);--c-rgb:244, 181, 68;grid-column:2 / -1 }
.sk--vdi { grid-column:2 / -1;box-shadow:0 18px 50px -26px rgba(var(--pa-rgb),.9);border-color:rgba(var(--pa-rgb),.6) }
@media (max-width: 900px) { .eco__grid { grid-template-columns:minmax(0, 1fr);gap:24px } }
@media (max-width: 640px) {
  .stack { gap:22px }
  .stack__row { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:8px 10px }
  .stack__lvl { grid-column:1 / -1 }
  .sk--ztna, .sk--vdi { grid-column:1 / -1 }
  .stack__row:not(:last-child)::after, .stack__row:not(:last-child)::before { left:50% }
  .stack__row:not(:last-child)::after { height:22px }
  .sk { flex-direction:column;gap:8px;padding:12px }
  .sk--ztna, .sk--vdi { flex-direction:row }
  .sk > span:last-child { font-size:.8rem }
  .sk b { font-size:.94rem }
}

/* ---- USE CASES ---- */
.uc { display:flex;flex-direction:column;gap:2px }
.uc .icon-box { margin-bottom:12px }
.uc h3 { font-size:1.02rem }
.uc p { font-size:.9rem;margin-bottom:12px }
.uc .chip { margin-top:auto;align-self:flex-start }
.uc--wide { grid-column:span 2;background:radial-gradient(80% 100% at 100% 0%, rgba(var(--pa-rgb),.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--bg-elev);border-color:rgba(var(--pa-rgb),.25) }
.uc--wide h3 { font-size:1.2rem }
@media (max-width: 640px) {
  .uc .icon-box { margin-bottom:8px }
  .uc h3 { font-size:.92rem }
  .uc--wide h3 { font-size:1.05rem }
  .uc p { margin-bottom:8px }
  .uc .chip { font-size:10px;padding:3px 8px;white-space:normal }
}

/* ---- FAQ ---- */
.faq-sec__head { margin-bottom:var(--space-block) }

@media (max-width: 640px) {
  .section-head { margin-bottom:22px }
}

/* short desktop screens: keep the hero visual inside the first viewport */
@media (min-width: 901px) and (max-height: 820px) {
  .stream { width:min(100%, 470px) }
  .hero__title { font-size:clamp(2.4rem, 1.1rem + 3.2vw, 4rem) }
}

/* ---- Pixel packets: composited transform/opacity motion along the stream curves ----
   Each packet is a full-size box translated by % of its own size (= % of the stream area),
   with the dot pinned to its top-left corner. Keyframes are sampled along the bezier by arc length. */
.stream__pk { grid-area:mid;position:relative;pointer-events:none;z-index:1;overflow:visible }
.pk, .fl-pk i { position:absolute;inset:0;display:block;opacity:0 }
.pk::before, .fl-pk i::before { content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#dff4ff;box-shadow:0 0 6px 1px rgba(var(--pa-rgb),.95), 0 0 14px 2px rgba(var(--pa-rgb),.45) }
html.motion .pk { will-change:transform, opacity;animation-duration:var(--d), var(--d);animation-timing-function:cubic-bezier(.45, .05, .55, .95), linear;animation-iteration-count:infinite }
.pk--a { --d:1.8s;animation-name:vdi-pk-a, vdi-pk-a-o } .pk--b { --d:1.5s;animation-name:vdi-pk-b, vdi-pk-b-o } .pk--c { --d:1.95s;animation-name:vdi-pk-c, vdi-pk-c-o }
html.motion .pk--2 { animation-delay:calc(var(--d) * -.5) }
html:not(.motion) .pk { display:none }
.fl-pk { inset:0;z-index:1;pointer-events:none }
.fl-pk i::before { width:5px;height:5px;left:-2.5px;top:-2.5px;background:#e9fbff;box-shadow:0 0 6px 1px rgba(var(--sky2-rgb),.95) }
html.motion .fl-pk.is-on i { will-change:transform, opacity;animation:vdi-pk-r 1.8s cubic-bezier(.45, .05, .55, .95) infinite, vdi-pk-r-o 1.8s linear infinite }
html.motion .fl-pk i:nth-child(2) { animation-delay:-.6s } html.motion .fl-pk i:nth-child(3) { animation-delay:-1.2s }
html:not(.motion) .fl-pk { display:none }
@keyframes vdi-pk-a { 0.0% { transform:translate3d(50.00%, 0.00%, 0) } 7.4% { transform:translate3d(49.07%, 13.06%, 0) } 15.6% { transform:translate3d(46.53%, 23.57%, 0) } 25.4% { transform:translate3d(42.80%, 32.22%, 0) } 36.7% { transform:translate3d(38.27%, 39.73%, 0) } 48.8% { transform:translate3d(33.33%, 46.79%, 0) } 60.9% { transform:translate3d(28.40%, 54.10%, 0) } 72.3% { transform:translate3d(23.87%, 62.38%, 0) } 82.5% { transform:translate3d(20.13%, 72.32%, 0) } 91.4% { transform:translate3d(17.60%, 84.63%, 0) } 100.0% { transform:translate3d(16.67%, 100.00%, 0) } }
@keyframes vdi-pk-a-o { 0% { opacity:0 } 10% { opacity:1 } 90% { opacity:1 } 100% { opacity:0 } }
@keyframes vdi-pk-b { 0.0% { transform:translate3d(50.00%, 0.00%, 0) } 100.0% { transform:translate3d(50.00%, 100.00%, 0) } }
@keyframes vdi-pk-b-o { 0% { opacity:0 } 10% { opacity:1 } 90% { opacity:1 } 100% { opacity:0 } }
@keyframes vdi-pk-c { 0.0% { transform:translate3d(50.00%, 0.00%, 0) } 7.4% { transform:translate3d(50.93%, 13.06%, 0) } 15.6% { transform:translate3d(53.47%, 23.57%, 0) } 25.4% { transform:translate3d(57.20%, 32.22%, 0) } 36.7% { transform:translate3d(61.73%, 39.73%, 0) } 48.8% { transform:translate3d(66.67%, 46.79%, 0) } 60.9% { transform:translate3d(71.60%, 54.10%, 0) } 72.3% { transform:translate3d(76.13%, 62.38%, 0) } 82.5% { transform:translate3d(79.87%, 72.32%, 0) } 91.4% { transform:translate3d(82.40%, 84.63%, 0) } 100.0% { transform:translate3d(83.33%, 100.00%, 0) } }
@keyframes vdi-pk-c-o { 0% { opacity:0 } 10% { opacity:1 } 90% { opacity:1 } 100% { opacity:0 } }
@keyframes vdi-pk-r { 0.0% { transform:translate3d(66.00%, 53.00%, 0) } 4.1% { transform:translate3d(65.38%, 50.43%, 0) } 8.6% { transform:translate3d(63.73%, 48.55%, 0) } 13.8% { transform:translate3d(61.41%, 47.11%, 0) } 19.5% { transform:translate3d(58.75%, 45.88%, 0) } 25.3% { transform:translate3d(56.09%, 44.59%, 0) } 30.6% { transform:translate3d(53.77%, 43.02%, 0) } 35.3% { transform:translate3d(52.12%, 40.90%, 0) } 39.9% { transform:translate3d(51.50%, 38.00%, 0) } 67.6% { transform:translate3d(39.00%, 31.00%, 0) } 71.1% { transform:translate3d(37.34%, 31.64%, 0) } 74.9% { transform:translate3d(36.03%, 33.34%, 0) } 79.2% { transform:translate3d(34.96%, 35.75%, 0) } 83.8% { transform:translate3d(34.00%, 38.50%, 0) } 88.5% { transform:translate3d(33.04%, 41.25%, 0) } 92.7% { transform:translate3d(31.97%, 43.66%, 0) } 96.5% { transform:translate3d(30.66%, 45.36%, 0) } 100.0% { transform:translate3d(29.00%, 46.00%, 0) } }
@keyframes vdi-pk-r-o { 0% { opacity:0 } 6% { opacity:1 } 94% { opacity:1 } 100% { opacity:0 } }

/* Live dots: core pulses box-shadow (a repaint every frame). On this page the same pulse is
   drawn by a pseudo-element ring animated with transform + opacity only (compositor). */
main .dot--live { position:relative;animation:none }
main .dot--live::after { content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:0;pointer-events:none }
html.motion main .dot--live::after { will-change:transform, opacity;animation:vdi-ring 2s cubic-bezier(.2, .6, .35, 1) infinite }
@keyframes vdi-ring { 0% { transform:scale(1);opacity:.55 } 70%, 100% { transform:scale(2.6);opacity:0 } }