/* /suites/ page-specific rules only. Shared cinematic base is loaded first via
   <link href="/assets/css/cinematic-base.css">. Do not duplicate base rules here. */

/* ================================================================
   ENTERPRISE SUITES FILM — player, suite themes, new scenes
   ================================================================ */
:root{--core:#4da3ff;--flow:#34d399;--manage:#f5b445;--grow:#a78bfa;--lead:#f472b6}

/* ---- film player (auto-play / pause / replay / skip / jump) ---- */
.player{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:999px;
  background:rgba(9,18,32,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(120,160,220,.22);box-shadow:0 12px 40px rgba(0,0,0,.5);
  opacity:0;animation:plIn .8s ease 1.4s forwards;max-width:min(92vw,720px)}
@keyframes plIn{to{opacity:1}}
body.ui-hidden .player,body.playing .player{opacity:0;pointer-events:none}
.pl-btn{appearance:none;border:1px solid rgba(120,160,220,.25);background:rgba(255,255,255,.05);
  color:var(--ink);width:38px;height:38px;border-radius:50%;font-size:.9rem;cursor:pointer;
  display:grid;place-items:center;transition:background .18s,border-color .18s,transform .18s;flex:none}
.pl-btn:hover{background:rgba(34,211,208,.16);border-color:var(--cyan);transform:translateY(-1px)}
.pl-skip{width:auto;border-radius:999px;padding:0 .9rem;font-size:.76rem;font-weight:600;letter-spacing:.02em}
.pl-track{position:relative;flex:1;min-width:120px;height:4px;border-radius:999px;background:rgba(140,170,210,.2)}
.pl-track #plBar{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--blue))}
.pl-mark{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  border:2px solid rgba(9,18,32,.9);cursor:pointer;padding:0;transition:transform .18s}
.pl-mark:hover{transform:scale(1.5)}
.pl-mark.m-core{background:var(--core)}.pl-mark.m-flow{background:var(--flow)}
.pl-mark.m-manage{background:var(--manage)}.pl-mark.m-grow{background:var(--grow)}.pl-mark.m-lead{background:var(--lead)}
.pl-suites{display:flex;gap:.35rem}
.pl-dot{font-size:.68rem;font-weight:700;letter-spacing:.03em;text-decoration:none;cursor:pointer;
  padding:.3rem .55rem;border-radius:999px;color:#cfe0f5;border:1px solid transparent;transition:.18s;white-space:nowrap}
.pl-dot:hover{color:#fff}
.pl-dot.d-core:hover{background:color-mix(in srgb,var(--core) 22%,transparent);border-color:var(--core)}
.pl-dot.d-flow:hover{background:color-mix(in srgb,var(--flow) 22%,transparent);border-color:var(--flow)}
.pl-dot.d-manage:hover{background:color-mix(in srgb,var(--manage) 22%,transparent);border-color:var(--manage)}
.pl-dot.d-grow:hover{background:color-mix(in srgb,var(--grow) 22%,transparent);border-color:var(--grow)}
.pl-dot.d-lead:hover{background:color-mix(in srgb,var(--lead) 22%,transparent);border-color:var(--lead)}
@media(max-width:820px){.pl-suites{display:none}}
body.film-playing{cursor:none}
body.film-playing .player{cursor:auto}

/* ---- per-suite scene theming ---- */
.suite{--accent:var(--cyan)}
.suite--core{--accent:var(--core)}.suite--flow{--accent:var(--flow)}
.suite--manage{--accent:var(--manage)}.suite--grow{--accent:var(--grow)}.suite--lead{--accent:var(--lead)}
.suite .eyebrow{color:var(--accent)}
.suite::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.5;
  background:radial-gradient(60% 50% at 50% 40%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
.suite .frame{box-shadow:0 30px 80px color-mix(in srgb,var(--accent) 18%,rgba(0,0,0,.5))}
.suite .frame.float.sm{max-width:62%}
.mthumbs{display:flex;gap:.9rem;margin-top:1rem}
.mthumbs .frame{flex:1;max-width:none}

/* ---- birth of AICP : rings + core assembling from light ---- */
.corebirth{position:relative;width:min(440px,80vw);height:min(440px,80vw);margin:2rem auto}
.cb-glow{position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,208,.5),rgba(77,163,255,.15) 55%,transparent 72%);
  filter:blur(6px);opacity:0;transition:opacity 1s ease}
.corebirth.on .cb-glow{opacity:1;animation:cbPulse 3.4s ease-in-out infinite}
@keyframes cbPulse{50%{transform:scale(1.08)}}
.cb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(120,180,240,.28);
  opacity:0;transform:scale(.6);transition:opacity .8s ease,transform .9s ease}
.cb-ring.r2{inset:14%;border-style:dashed}.cb-ring.r3{inset:28%}
.corebirth.on .cb-ring{opacity:1;transform:scale(1)}
.corebirth.on .cb-ring.r1{animation:cbSpin 26s linear infinite}
.corebirth.on .cb-ring.r2{animation:cbSpin 18s linear infinite reverse}
.corebirth.on .cb-ring.r3{animation:cbSpin 12s linear infinite}
@keyframes cbSpin{to{transform:rotate(360deg)}}
.cb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);text-align:center;
  width:38%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;opacity:0;
  background:radial-gradient(circle,rgba(10,24,44,.95),rgba(10,24,44,.6));
  border:1px solid rgba(34,211,208,.5);box-shadow:0 0 60px rgba(34,211,208,.4) inset,0 0 40px rgba(34,211,208,.3);
  transition:opacity 1s ease .3s,transform 1s cubic-bezier(.2,.8,.2,1) .3s}
.corebirth.on .cb-core{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cb-core b{display:block;font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:.04em}
.cb-core span{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.cb-in{list-style:none;position:absolute;inset:0;margin:0;padding:0}
.cb-in li{position:absolute;left:50%;top:50%;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:#bcd4f0;white-space:nowrap;opacity:0}
.cb-in li:nth-child(1){--a:0}.cb-in li:nth-child(2){--a:60}.cb-in li:nth-child(3){--a:120}
.cb-in li:nth-child(4){--a:180}.cb-in li:nth-child(5){--a:240}.cb-in li:nth-child(6){--a:300}
.corebirth.on .cb-in li{animation:cbIn .9s ease forwards}
.corebirth.on .cb-in li:nth-child(1){animation-delay:.2s}.corebirth.on .cb-in li:nth-child(2){animation-delay:.34s}
.corebirth.on .cb-in li:nth-child(3){animation-delay:.48s}.corebirth.on .cb-in li:nth-child(4){animation-delay:.62s}
.corebirth.on .cb-in li:nth-child(5){animation-delay:.76s}.corebirth.on .cb-in li:nth-child(6){animation-delay:.9s}
@keyframes cbIn{0%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--a)*1deg)) translateX(220px) rotate(calc(var(--a)*-1deg))}
  60%{opacity:1}100%{opacity:.9;transform:translate(-50%,-50%) rotate(calc(var(--a)*1deg)) translateX(96px) rotate(calc(var(--a)*-1deg))}}

/* ---- five suites emerging : energy arms radiating from AICP ---- */
.streams5{position:relative;width:min(560px,90vw);height:min(420px,70vw);margin:2rem auto}
.s5-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:80px;height:80px;border-radius:50%;display:grid;place-content:center;font-weight:800;color:#fff;
  background:radial-gradient(circle,rgba(10,24,44,.95),rgba(10,24,44,.5));border:1px solid rgba(34,211,208,.5);
  box-shadow:0 0 40px rgba(34,211,208,.35)}
.s5-arm{position:absolute;left:50%;top:50%;text-decoration:none;text-align:center;width:130px;opacity:0;
  transform:translate(-50%,-50%) rotate(calc(var(--i)*72deg - 90deg)) translateX(0) rotate(calc(var(--i)*-72deg + 90deg))}
.streams5.on .s5-arm{animation:s5out .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.15s + var(--i)*.14s)}
@keyframes s5out{to{opacity:1;transform:translate(-50%,-50%) rotate(calc(var(--i)*72deg - 90deg)) translateX(150px) rotate(calc(var(--i)*-72deg + 90deg))}}
.s5-arm i{display:block;width:12px;height:12px;border-radius:50%;margin:0 auto .5rem}
.s5-arm b{display:block;font-size:.95rem;font-weight:700;color:#fff}
.s5-arm span{font-size:.62rem;color:#9fb6d4;letter-spacing:.02em}
.s5-arm.a-core i{background:var(--core);box-shadow:0 0 14px var(--core)}
.s5-arm.a-flow i{background:var(--flow);box-shadow:0 0 14px var(--flow)}
.s5-arm.a-manage i{background:var(--manage);box-shadow:0 0 14px var(--manage)}
.s5-arm.a-grow i{background:var(--grow);box-shadow:0 0 14px var(--grow)}
.s5-arm.a-lead i{background:var(--lead);box-shadow:0 0 14px var(--lead)}

/* ---- V-Core : auth flow lighting up ---- */
.authflow{margin-top:1.6rem}
.af-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.af-step{font-size:.72rem;font-weight:600;padding:.4rem .7rem;border-radius:999px;color:#9fb6d4;
  border:1px solid rgba(120,160,220,.24);opacity:.4;transition:.4s}
.authflow.on .af-step{opacity:1;color:#fff;border-color:var(--core);
  box-shadow:0 0 14px color-mix(in srgb,var(--core) 40%,transparent)}
.authflow.on .af-step.s1{transition-delay:.1s}.authflow.on .af-step.s2{transition-delay:.5s}
.authflow.on .af-step.s3{transition-delay:.9s}.authflow.on .af-step.s4{transition-delay:1.3s}.authflow.on .af-step.s5{transition-delay:1.7s}
.af-apps{display:flex;gap:.5rem;margin-top:1rem}
.af-apps i{width:26px;height:26px;border-radius:7px;background:rgba(120,160,220,.14);border:1px solid rgba(120,160,220,.2);opacity:.35;transition:.4s}
.authflow.on .af-apps i{opacity:1;background:color-mix(in srgb,var(--core) 22%,transparent);border-color:var(--core);transition-delay:2s}
.authflow.on .af-apps i:nth-child(2){transition-delay:2.1s}.authflow.on .af-apps i:nth-child(3){transition-delay:2.2s}
.authflow.on .af-apps i:nth-child(4){transition-delay:2.3s}.authflow.on .af-apps i:nth-child(5){transition-delay:2.4s}.authflow.on .af-apps i:nth-child(6){transition-delay:2.5s}

/* ---- V-Flow : a workflow that draws itself ---- */
.wfdraw{width:100%;max-width:460px;margin-top:1.4rem;overflow:visible}
.wf-edges path{stroke:var(--flow);stroke-dasharray:200;stroke-dashoffset:200;opacity:.7}
.wfdraw.on .wf-edges path{animation:wfDraw 1s ease forwards}
.wfdraw.on .wf-edges path:nth-child(1){animation-delay:.5s}.wfdraw.on .wf-edges path:nth-child(2){animation-delay:1.3s}
.wfdraw.on .wf-edges path:nth-child(3){animation-delay:2.1s}.wfdraw.on .wf-edges path:nth-child(4){animation-delay:2.1s}
@keyframes wfDraw{to{stroke-dashoffset:0}}
.wf-nodes .wn{fill:rgba(12,28,24,.9);stroke:var(--flow);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.wfdraw.on .wn{animation:wfPop .5s cubic-bezier(.2,1.4,.4,1) forwards}
.wfdraw.on .wn:nth-child(1){animation-delay:.2s}.wfdraw.on .wn:nth-child(2){animation-delay:1s}
.wfdraw.on .wn:nth-child(3){animation-delay:1.8s}.wfdraw.on .wn:nth-child(4){animation-delay:2.7s}.wfdraw.on .wn:nth-child(5){animation-delay:2.9s}
@keyframes wfPop{to{opacity:1;transform:scale(1)}}
.wf-token{fill:#eafff9;opacity:0;filter:drop-shadow(0 0 6px var(--flow))}
.wfdraw.on .wf-token{opacity:1;offset-path:path("M50 105 H400");animation:wfTok 3.2s linear .8s infinite}
@keyframes wfTok{0%{opacity:0;offset-distance:0%}8%{opacity:1}92%{opacity:1}100%{opacity:0;offset-distance:100%}}

/* ---- V-Manage : document lifecycle steps ---- */
.doclife{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;counter-reset:dl;padding:0}
.doclife li{font-size:.72rem;font-weight:600;padding:.4rem .7rem .4rem 1.7rem;border-radius:8px;color:#9fb6d4;
  border:1px solid rgba(120,160,220,.24);position:relative;opacity:.4;transition:.45s;counter-increment:dl}
.doclife li::before{content:counter(dl);position:absolute;left:.55rem;top:50%;transform:translateY(-50%);
  font-size:.6rem;color:var(--manage);font-weight:800}
.doclife.on li{opacity:1;color:#fff;border-color:var(--manage);box-shadow:0 0 12px color-mix(in srgb,var(--manage) 30%,transparent)}
.doclife.on li:nth-child(1){transition-delay:.1s}.doclife.on li:nth-child(2){transition-delay:.4s}
.doclife.on li:nth-child(3){transition-delay:.7s}.doclife.on li:nth-child(4){transition-delay:1s}
.doclife.on li:nth-child(5){transition-delay:1.3s}.doclife.on li:nth-child(6){transition-delay:1.6s}.doclife.on li:nth-child(7){transition-delay:1.9s}

/* ---- V-Grow : knowledge graph grows ---- */
.knowgraph{width:min(620px,92vw);height:auto;margin:1.6rem auto;display:block;overflow:visible}
.kg-edge{stroke:var(--grow);stroke-width:1.4;opacity:0;stroke-dasharray:340;stroke-dashoffset:340}
.knowgraph.on .kg-edge{animation:kgLine 1.4s ease forwards}
@keyframes kgLine{to{opacity:.4;stroke-dashoffset:0}}
.kg-node{fill:#dcd0ff;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.kg-node.hot{fill:var(--grow);filter:drop-shadow(0 0 8px var(--grow))}
.kg-hub{fill:#fff;opacity:0;filter:drop-shadow(0 0 16px var(--grow));transform-box:fill-box;transform-origin:center;transform:scale(0)}
.knowgraph.on .kg-node,.knowgraph.on .kg-hub{animation:kgPop .6s cubic-bezier(.2,1.5,.4,1) forwards}
.knowgraph.on .kg-hub{animation-delay:.2s}
@keyframes kgPop{to{opacity:1;transform:scale(1)}}

/* ---- V-Lead exec dashboard ---- */
.execdash{--accent:var(--lead);max-width:720px;margin:1.6rem auto}
.suite--lead .live-dot,.execdash .live-dot{color:var(--lead)}

/* ---- finale end-card ---- */
.endcard{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.endcard .btn{padding:.7rem 1.3rem;border-radius:999px;font-size:.9rem;font-weight:600;text-decoration:none;transition:.2s}
.endcard .btn-primary{background:linear-gradient(120deg,var(--cyan),var(--blue));color:#04121f}
.endcard .btn-ghost{border:1px solid rgba(150,180,220,.35);color:var(--ink)}
.endcard .btn:hover{transform:translateY(-2px)}
.fin-note{font-size:clamp(.9rem,1.5vw,1.15rem);color:var(--mut);max-width:640px;margin:1rem auto 0}

/* ================================================================
   V2 — business-journey scenes (animation-first, screenshots demoted)
   ================================================================ */
.suite .caption{max-width:640px;margin:1.4rem auto 0;color:#aec4e2}
.suite h2{margin-top:.2rem}

/* small "we actually built this" proof — deliberately understated, dark, dimmed */
.proof{position:relative;max-width:230px;margin:1.7rem auto 0;border-radius:10px;overflow:hidden;
  border:1px solid rgba(120,160,220,.2);box-shadow:0 16px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .8s ease,transform .8s ease;filter:saturate(.92) brightness(.92)}
.proof.in{opacity:.9;transform:none}
.proof img{display:block;width:100%;height:auto}
.proof::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,16,29,.55))}
.proof-tag{position:absolute;z-index:2;left:8px;bottom:7px;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:#cfe0f5;font-weight:700}

/* ---- V-CORE : calm, elegant identity — one sign-in, everything unlocks ---- */
.authseq{position:relative;width:min(460px,86vw);height:min(360px,64vw);margin:2rem auto}
.aq-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;
  display:grid;place-items:center;z-index:3;background:radial-gradient(circle,rgba(10,26,48,.96),rgba(10,26,48,.5));
  border:1px solid color-mix(in srgb,var(--core) 60%,transparent);box-shadow:0 0 0 0 color-mix(in srgb,var(--core) 40%,transparent)}
.authseq.on .aq-core{animation:aqPing 2.6s ease-in-out 1.6s infinite}
@keyframes aqPing{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--core) 30%,transparent)}50%{box-shadow:0 0 0 16px transparent}}
.aq-user{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff,var(--core));box-shadow:0 0 18px var(--core)}
.aq-steps{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.aq-step{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:#dbe9ff;padding:.28rem .6rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--core) 45%,transparent);
  background:rgba(9,20,38,.8);opacity:0}
.authseq.on .aq-step{animation:aqStep 2.2s ease forwards}
.authseq.on .aq-step.s1{animation-delay:.2s}.authseq.on .aq-step.s2{animation-delay:.7s}.authseq.on .aq-step.s3{animation-delay:1.2s}
@keyframes aqStep{0%{opacity:0;transform:translate(-50%,10px) scale(.9)}18%{opacity:1;transform:translate(-50%,-64px) scale(1)}70%{opacity:1;transform:translate(-50%,-64px)}100%{opacity:0;transform:translate(-50%,-84px)}}
.aq-apps{position:absolute;inset:0}
.aq-apps i{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:9px;margin:-17px 0 0 -17px;
  background:rgba(120,160,220,.1);border:1px solid rgba(120,160,220,.18);opacity:.25;
  transform:rotate(calc(var(--a)*45deg)) translateX(140px) rotate(calc(var(--a)*-45deg));transition:.5s}
.authseq.on .aq-apps i{opacity:1;background:color-mix(in srgb,var(--core) 20%,rgba(9,20,38,.6));border-color:var(--core);
  box-shadow:0 0 16px color-mix(in srgb,var(--core) 40%,transparent);transition-delay:calc(1.8s + var(--a)*.12s)}
.aq-granted{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--core);font-weight:700;opacity:0}
.authseq.on .aq-granted{animation:aqGrant .8s ease 3s forwards}
@keyframes aqGrant{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---- V-FLOW : the centerpiece — a process that draws itself and runs ---- */
.flowproc{width:min(900px,94vw);margin:1.6rem auto 0}
.fp-svg{width:100%;height:auto;overflow:visible}
.fp-edges path{stroke:var(--flow);stroke-dasharray:260;stroke-dashoffset:260;opacity:.55}
.flowproc.on .fp-edges path{animation:fpDraw .7s ease forwards}
.flowproc.on .fp-edges path:nth-child(-n+2){animation-delay:.4s}
.flowproc.on .fp-edges path:nth-child(n+3):nth-child(-n+5){animation-delay:1s}
.flowproc.on .fp-edges path:nth-child(n+6):nth-child(-n+8){animation-delay:1.7s}
.flowproc.on .fp-edges path:nth-child(n+9){animation-delay:2.3s}
@keyframes fpDraw{to{stroke-dashoffset:0}}
.fp-nodes .fn{fill:rgba(10,30,26,.92);stroke:var(--flow);stroke-width:2.2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5)}
.fn-start,.fn-end{fill:color-mix(in srgb,var(--flow) 28%,rgba(10,30,26,.9))}
.flowproc.on .fn{animation:fpPop .5s cubic-bezier(.2,1.4,.4,1) forwards}
.flowproc.on .fn-start{animation-delay:.15s}.flowproc.on .fn:nth-child(2){animation-delay:.7s}
.flowproc.on .fn-gate:nth-child(3){animation-delay:1.1s}
.flowproc.on .fn-dept:nth-child(4){animation-delay:1.4s}.flowproc.on .fn-dept:nth-child(5){animation-delay:1.55s}.flowproc.on .fn-dept:nth-child(6){animation-delay:1.7s}
.flowproc.on .fn-gate:nth-child(7){animation-delay:2s}.flowproc.on .fn-appr{animation-delay:2.3s}.flowproc.on .fn-sign{animation-delay:2.6s}.flowproc.on .fn-end{animation-delay:2.9s}
@keyframes fpPop{to{opacity:1;transform:scale(1)}}
.fp-token{fill:#eafff9;opacity:0;filter:drop-shadow(0 0 7px var(--flow));offset-path:path("M46 150 H864")}
.flowproc.on .fp-token{animation:fpTok 3.4s linear infinite}
.flowproc.on .fp-token.t1{animation-delay:3.2s}.flowproc.on .fp-token.t2{animation-delay:4.1s}.flowproc.on .fp-token.t3{animation-delay:5s}
@keyframes fpTok{0%{opacity:0;offset-distance:0%}6%{opacity:1}94%{opacity:1}100%{opacity:0;offset-distance:100%}}
.fp-labels{display:flex;justify-content:space-between;max-width:900px;margin:.4rem auto 0;padding:0 .5rem}
.fp-labels span{font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:#8fb8a8;opacity:0}
.flowproc.on .fp-labels span{animation:fpFade .5s ease forwards;animation-delay:3s}

/* ---- V-MANAGE : follow ONE document across its whole life ---- */
.docjourney{position:relative;width:min(820px,94vw);height:170px;margin:2rem auto 0}
.dj-rail{position:absolute;left:2%;right:2%;top:44px;height:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--manage) 55%,transparent),transparent)}
.dj-doc{position:absolute;top:16px;left:2%;width:46px;height:58px;border-radius:5px;background:linear-gradient(160deg,#fdfefe,#d6e0ec);
  box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.4) inset;opacity:0}
.docjourney.on .dj-doc{animation:djMove 8.4s cubic-bezier(.5,0,.5,1) .4s infinite}
@keyframes djMove{0%{opacity:0;left:2%}5%{opacity:1}11%{left:2%}23%{left:15.7%}37%{left:29.4%}51%{left:43.1%}63%{left:54.8%}75%{left:66.5%}87%{left:80%}95%{opacity:1;left:93%}100%{opacity:0;left:93%}}
.dj-doc .dj-lines{position:absolute;left:7px;right:7px;top:12px;bottom:9px;
  background:repeating-linear-gradient(180deg,#9fb0c6 0 1.5px,transparent 1.5px 6px);opacity:.55}
.dj-doc .dj-scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--manage);box-shadow:0 0 10px var(--manage);opacity:0}
.docjourney.on .dj-scan{animation:djScan 8.4s linear .4s infinite}
@keyframes djScan{0%,10%{opacity:0}11%{opacity:1;top:0}17%{top:100%}18%{opacity:0}100%{opacity:0}}
.dj-doc .dj-tag{position:absolute;left:50%;top:-10px;transform:translateX(-50%) scale(.6);font-size:.5rem;font-weight:700;
  padding:.12rem .34rem;border-radius:4px;background:var(--manage);color:#241500;opacity:0;white-space:nowrap}
.docjourney.on .dj-tag{animation:djTag 8.4s ease .4s infinite}
@keyframes djTag{0%,23%{opacity:0;transform:translateX(-50%) scale(.6)}30%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
.dj-doc .dj-check{position:absolute;right:-6px;bottom:-6px;width:18px;height:18px;border-radius:50%;background:var(--manage);color:#241500;
  font-size:.7rem;display:grid;place-items:center;opacity:0;transform:scale(0)}
.docjourney.on .dj-check{animation:djChk 8.4s ease .4s infinite}
@keyframes djChk{0%,44%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
.dj-stations{list-style:none;position:absolute;left:0;right:0;top:64px;display:flex;justify-content:space-between;padding:0 1.4%;margin:0}
.dj-stations li{position:relative;font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:#8aa2c0;opacity:.4;
  padding-top:14px;text-align:center;width:11%;transition:color .3s,opacity .3s}
.dj-stations li::before{content:"";position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:rgba(140,170,210,.3);transition:.3s}
.docjourney.on .dj-stations li{animation:djStat 8.4s ease .4s infinite}
.docjourney.on .dj-stations li:nth-child(1){animation-delay:.9s}.docjourney.on .dj-stations li:nth-child(2){animation-delay:1.9s}
.docjourney.on .dj-stations li:nth-child(3){animation-delay:3s}.docjourney.on .dj-stations li:nth-child(4){animation-delay:4s}
.docjourney.on .dj-stations li:nth-child(5){animation-delay:5s}.docjourney.on .dj-stations li:nth-child(6){animation-delay:6s}
.docjourney.on .dj-stations li:nth-child(7){animation-delay:7s}.docjourney.on .dj-stations li:nth-child(8){animation-delay:7.9s}
@keyframes djStat{0%,6%{color:#8aa2c0;opacity:.4}8%{color:#fff;opacity:1}14%{color:var(--manage)}22%{color:#cbb48a;opacity:.85}100%{opacity:.55}}
.docjourney.on .dj-stations li.lit::before,.docjourney.on .dj-stations li:hover::before{background:var(--manage);box-shadow:0 0 10px var(--manage)}

/* ---- V-GROW : organic knowledge growth ---- */
.knowgrow{width:min(720px,94vw);height:auto;margin:1.4rem auto;display:block;overflow:visible}
.knowgrow .kg-edge{stroke:var(--grow);stroke-width:1.4;opacity:0;stroke-dasharray:300;stroke-dashoffset:300}
.knowgrow.on .kg-edge{animation:kgLine 1.1s ease forwards;animation-delay:var(--d,0s)}
.knowgrow .kg-node{fill:#dcd0ff;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.knowgrow .kg-node.hot{fill:var(--grow);filter:drop-shadow(0 0 8px var(--grow))}
.knowgrow .kg-hub{fill:#fff;opacity:0;filter:drop-shadow(0 0 18px var(--grow));transform-box:fill-box;transform-origin:center;transform:scale(0)}
.knowgrow.on .kg-node,.knowgrow.on .kg-hub{animation:kgPop .6s cubic-bezier(.2,1.5,.4,1) forwards;animation-delay:var(--d,0s)}
.knowgrow.on .kg-hub{animation:kgPop .6s cubic-bezier(.2,1.5,.4,1) forwards, kgHubPulse 3s ease-in-out 1.4s infinite}
@keyframes kgHubPulse{50%{filter:drop-shadow(0 0 28px var(--grow))}}

/* ---- V-LEAD : the executive story ---- */
.leadstory{max-width:560px;margin:1.6rem auto 0;text-align:left}
.ls-kpis{display:flex;gap:1.6rem;justify-content:center}
.ls-kpi{text-align:center}
.ls-kpi b{display:block;font-size:2rem;font-weight:800;color:#fff;line-height:1}
.ls-kpi small{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#9fb6d4}
.ls-chart{width:100%;height:120px;margin:1.2rem 0 .6rem}
.ls-line{stroke:var(--lead);stroke-width:3;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--lead) 60%,transparent));
  stroke-dasharray:640;stroke-dashoffset:640}
.leadstory.on .ls-line{animation:lsDraw 1.8s ease .3s forwards}
@keyframes lsDraw{to{stroke-dashoffset:0}}
.ls-risk{font-size:.74rem;font-weight:600;color:#ffd0e2;padding:.4rem .7rem;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--lead) 45%,transparent);background:color-mix(in srgb,var(--lead) 12%,transparent);
  opacity:0;transform:translateX(-8px)}
.leadstory.on .ls-risk{animation:lsFade .6s ease 1.9s forwards}
.ls-insight{margin-top:.6rem;font-size:.8rem;color:#eaf2ff;padding:.5rem .8rem;border-radius:8px;
  border:1px solid rgba(150,180,220,.25);background:rgba(255,255,255,.04);opacity:0;transform:translateY(8px);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ls-insight b{color:var(--lead)}
.ls-decide{margin-left:auto;font-weight:700;color:var(--lead)}
.leadstory.on .ls-insight{animation:lsFade .6s ease 2.6s forwards}
@keyframes lsFade{to{opacity:1;transform:none}}
@keyframes fpFade{to{opacity:1}}

/* ---- reduced motion : reveal everything, no looping ---- */
@media(prefers-reduced-motion:reduce){
  .authseq.on .aq-apps i,.authseq.on .aq-step,.authseq.on .aq-granted,
  .flowproc.on .fn,.flowproc.on .fp-edges path,.flowproc.on .fp-labels span,
  .knowgrow.on .kg-edge,.knowgrow.on .kg-node,.knowgrow.on .kg-hub,
  .leadstory.on .ls-risk,.leadstory.on .ls-insight,.leadstory.on .ls-line,.proof.in{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .flowproc.on .fp-token,.docjourney.on .dj-doc,.docjourney.on .dj-scan,.docjourney.on .dj-tag,.docjourney.on .dj-check,.docjourney.on .dj-stations li,.authseq.on .aq-core,.knowgrow.on .kg-hub{animation:none!important}
  .docjourney .dj-doc{opacity:1;left:47%}
  .suite-prods.on .sp-card{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---- "Inside V-X" : the products living under each suite (accent-coloured, staggered) ---- */
.suite-prods{margin:1.7rem auto 0;max-width:760px}
.sp-eyebrow{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--accent);opacity:.85;margin-bottom:.7rem}
.sp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:.6rem;max-width:760px;margin:0 auto;text-align:left}
.sp-card{display:block;text-decoration:none;padding:.72rem .85rem;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,rgba(9,18,32,.5));
  opacity:0;transform:translateY(12px);transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.sp-card b{display:block;font-size:.86rem;font-weight:700;color:#fff;margin-bottom:.22rem;transition:color .2s ease}
.sp-card span{display:block;font-size:.71rem;line-height:1.42;color:#a9c0de}
.suite-prods.on .sp-card{animation:spIn .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.25s + var(--i,0)*.09s)}
@keyframes spIn{to{opacity:1;transform:translateY(0)}}
/* two-column suite scene : journey on the left, the products panel on the right */
.suite-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(272px,1fr);gap:clamp(1.4rem,4vw,3.4rem);
  align-items:center;max-width:1240px;width:100%;text-align:left}
.sj-main,.sj-side{min-width:0}
.suite-grid .eyebrow,.suite-grid h2,.suite-grid .caption{text-align:left;margin-left:0;margin-right:0;max-width:none}
.suite-grid .caption{margin-top:1.2rem}
.sj-main .authseq,.sj-main .flowproc,.sj-main .knowgrow,.sj-main .leadstory,.sj-main .docjourney,.sj-main .knowgrow{max-width:100%;width:100%}
.sj-side .suite-prods{margin:0;max-width:none}
.sj-side .sp-cards{grid-template-columns:1fr;max-width:none}
.sj-side .proof{margin:1.1rem 0 0;max-width:196px}
.sj-side .proof img{filter:none}
@media(max-width:900px){
  .suite-grid{grid-template-columns:1fr;text-align:center;gap:1.2rem}
  .suite-grid .eyebrow,.suite-grid h2,.suite-grid .caption{text-align:center}
  .sj-side .sp-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .sj-side .proof{margin:1rem auto 0}
}
.sp-card:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent);
  box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 24%,transparent);transform:translateY(-3px)}
.sp-card:hover b{color:var(--accent)}

/* ================================================================
   PRODUCT BEATS — the suite's products, woven into the journey and
   explained; each reveals in order, then a highlight travels through.
   ================================================================ */
.pbeats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;max-width:860px;
  margin:1.7rem auto 0;text-align:left}
.pbeats-wide{grid-template-columns:repeat(auto-fit,minmax(196px,1fr));max-width:1120px}
.pb{position:relative;text-decoration:none;padding:.8rem .95rem .8rem 1.15rem;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,rgba(9,18,32,.5));
  opacity:0;transform:translateY(12px);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease,background .3s ease}
.pb::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:3px;
  background:color-mix(in srgb,var(--accent) 45%,transparent);opacity:.55;transition:opacity .3s,box-shadow .3s}
.pb b{display:block;color:#fff;font-size:.9rem;margin-bottom:.26rem;transition:color .3s ease}
.pb span{display:block;font-size:.735rem;line-height:1.46;color:#a9c0de}
.pbeats.on .pb{animation:pbIn .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.3s + var(--i,0)*.16s)}
@keyframes pbIn{to{opacity:1;transform:translateY(0)}}
.pb.now{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);
  box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 26%,transparent);transform:translateY(-4px)}
.pb.now b{color:var(--accent)}
.pb.now::before{opacity:1;box-shadow:0 0 14px var(--accent)}
.pb:hover{border-color:var(--accent);transform:translateY(-2px)}

/* ================================================================
   PRODUCT SPOTLIGHTS — each product gets its own animated motif (a
   little "product journey") plus a real 2-3 sentence explanation, so
   the film teaches what every product actually is. A vertical tour of
   alternating rows that reveal + animate as the viewer scrolls through.
   ================================================================ */
.prod-tour{max-width:1060px;margin:2.6rem auto 0;display:flex;flex-direction:column;gap:clamp(2rem,6.4vh,4.4rem)}
.spot{display:grid;grid-template-columns:228px 1fr;align-items:center;gap:clamp(1.4rem,4vw,3rem);
  text-decoration:none;text-align:left;opacity:0;transform:translateY(30px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1)}
.spot.on{opacity:1;transform:none}
.spot-alt{grid-template-columns:1fr 228px}
.spot-alt .mvis{order:2}
.spot-alt .spot-txt{order:1}
.spot-txt{max-width:48ch}
.spot-k{display:block;font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--accent);opacity:.92;margin-bottom:.6rem}
.spot-txt h3{font-size:clamp(1.35rem,2.7vw,2.05rem);line-height:1.06;color:#fff;margin:0 0 .72rem;letter-spacing:-.01em}
.spot-txt p{font-size:clamp(.9rem,1.35vw,1.03rem);line-height:1.62;color:#c4d5eb;margin:0}
.spot-more{display:inline-block;margin-top:1.05rem;font-size:.8rem;font-weight:600;color:var(--accent);
  opacity:0;transform:translateX(-6px);transition:opacity .5s ease .35s,transform .5s ease .35s}
.spot.on .spot-more{opacity:.95;transform:none}
.spot:hover .spot-more{text-decoration:underline}
.spot:hover .mvis{transform:translateY(-5px);box-shadow:0 24px 58px color-mix(in srgb,var(--accent) 32%,transparent)}

/* motif stage — one square canvas per product, tinted by the suite accent */
.mvis{position:relative;width:100%;aspect-ratio:1/.84;max-width:228px;justify-self:center;border-radius:22px;overflow:hidden;
  background:radial-gradient(125% 120% at 32% 20%,color-mix(in srgb,var(--accent) 16%,rgba(9,18,32,.62)),rgba(6,13,25,.74));
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  box-shadow:0 16px 42px color-mix(in srgb,var(--accent) 15%,transparent),inset 0 0 40px color-mix(in srgb,var(--accent) 8%,transparent);
  transition:transform .5s ease,box-shadow .5s ease}
.mvis i{position:absolute;background:var(--accent);display:block}
.mvis::before,.mvis::after{content:"";position:absolute}
@media (max-width:760px){
  .spot,.spot-alt{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.1rem}
  .spot-alt .mvis{order:0}.spot-alt .spot-txt{order:1}
  .spot-txt{max-width:52ch}.mvis{max-width:168px}
}

/* ---- the motifs. Structural shapes are visible statically; the looping
        micro-motion is added only when motion is welcome. ---- */

/* m-auth : a lock, three MFA dots lighting, the shackle lifting = access */
.m-auth::before{width:46px;height:36px;border-radius:8px;left:50%;top:50%;transform:translate(-50%,4px);background:var(--accent)}
.m-auth::after{width:32px;height:32px;border:5px solid var(--accent);border-bottom:none;border-radius:32px 32px 0 0;
  left:50%;top:50%;transform:translate(-50%,-30px);transform-origin:left bottom}
.m-auth i{width:8px;height:8px;border-radius:50%;top:calc(50% + 24px);opacity:.3}
.m-auth i:nth-child(1){left:calc(50% - 16px)}.m-auth i:nth-child(2){left:calc(50% - 4px)}.m-auth i:nth-child(3){left:calc(50% + 8px)}

/* m-shield : a shield with a scan sweeping down and a check landing */
.m-shield::before{width:66px;height:78px;left:50%;top:50%;transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--accent) 26%,transparent);border:2px solid var(--accent);
  border-radius:14px 14px 42px 42px/14px 14px 60px 60px}
.m-shield::after{width:20px;height:11px;border-left:4px solid var(--accent);border-bottom:4px solid var(--accent);
  left:50%;top:50%;transform:translate(-50%,-40%) rotate(-45deg);opacity:0}
.m-shield i{width:52px;height:2px;background:var(--accent);left:50%;top:calc(50% - 30px);transform:translateX(-50%);
  box-shadow:0 0 12px var(--accent);opacity:0}

/* m-chart : four bars rising over a baseline */
.m-chart::after{width:112px;height:2px;background:color-mix(in srgb,var(--accent) 55%,transparent);left:50%;top:calc(50% + 34px);transform:translateX(-50%)}
.m-chart i{width:18px;bottom:calc(50% - 34px);border-radius:4px 4px 0 0;height:14px;opacity:.9}
.m-chart i:nth-child(1){left:calc(50% - 52px);height:28px}
.m-chart i:nth-child(2){left:calc(50% - 28px);height:46px}
.m-chart i:nth-child(3){left:calc(50% - 4px);height:34px}
.m-chart i:nth-child(4){left:calc(50% + 20px);height:60px}

/* m-flow : a track with three nodes and a token running through */
.m-flow::before{width:132px;height:3px;background:color-mix(in srgb,var(--accent) 40%,transparent);left:50%;top:50%;transform:translate(-50%,-50%)}
.m-flow i:nth-child(-n+3){width:20px;height:20px;border-radius:6px;top:50%;transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--accent) 22%,transparent);border:2px solid var(--accent)}
.m-flow i:nth-child(1){left:calc(50% - 56px)}.m-flow i:nth-child(2){left:50%}.m-flow i:nth-child(3){left:calc(50% + 56px)}
.m-flow i:nth-child(4){width:12px;height:12px;border-radius:50%;top:50%;left:calc(50% - 56px);
  transform:translate(-50%,-50%);box-shadow:0 0 14px var(--accent)}

/* m-rules : a decision diamond with two branches, the chosen one glowing */
.m-rules::before{width:44px;height:44px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);
  background:color-mix(in srgb,var(--accent) 22%,transparent);border:2px solid var(--accent);border-radius:8px}
.m-rules i:nth-child(1),.m-rules i:nth-child(2){width:40px;height:3px;left:calc(50% + 24px);border-radius:3px;transform-origin:left center}
.m-rules i:nth-child(1){top:calc(50% - 22px);transform:rotate(-32deg)}
.m-rules i:nth-child(2){top:calc(50% + 22px);transform:rotate(32deg);opacity:.35}
.m-rules i:nth-child(3){width:16px;height:16px;border-radius:5px;top:calc(50% - 30px);left:calc(50% + 66px);
  transform:translateY(-50%);box-shadow:0 0 12px var(--accent)}

/* m-engine : a rotating process ring with a running core */
.m-engine::before{width:74px;height:74px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);
  border:4px solid color-mix(in srgb,var(--accent) 26%,transparent);border-top-color:var(--accent);border-right-color:var(--accent)}
.m-engine::after{width:14px;height:14px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);box-shadow:0 0 16px var(--accent)}
.m-engine i{width:8px;height:8px;border-radius:50%;top:calc(50% - 41px);left:50%;transform:translateX(-50%);opacity:.9}

/* m-form : three field rows filling, then a check */
.m-form::before{width:88px;height:96px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:12px;
  background:color-mix(in srgb,var(--accent) 8%,rgba(9,18,32,.4));border:1.5px solid color-mix(in srgb,var(--accent) 34%,transparent)}
.m-form i{height:7px;border-radius:4px;left:calc(50% - 30px);width:8px;background:var(--accent);opacity:.9}
.m-form i:nth-child(1){top:calc(50% - 26px)}.m-form i:nth-child(2){top:calc(50% - 6px)}.m-form i:nth-child(3){top:calc(50% + 14px)}
.m-form::after{width:16px;height:9px;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);
  left:calc(50% + 20px);top:calc(50% + 26px);transform:rotate(-45deg);opacity:0}

/* m-portal : a window with a service card sliding in */
.m-portal::before{width:104px;height:82px;left:50%;top:50%;transform:translate(-50%,-46%);border-radius:12px;
  background:color-mix(in srgb,var(--accent) 8%,rgba(9,18,32,.45));border:1.5px solid color-mix(in srgb,var(--accent) 36%,transparent)}
.m-portal::after{width:104px;height:16px;left:50%;top:50%;transform:translate(-50%,calc(-46% + 0px));
  background:color-mix(in srgb,var(--accent) 30%,transparent);border-radius:12px 12px 0 0}
.m-portal i{width:60px;height:34px;border-radius:8px;left:50%;top:calc(50% + 8px);transform:translate(-50%,20px);
  background:color-mix(in srgb,var(--accent) 26%,transparent);border:1.5px solid var(--accent);opacity:0}

/* m-ai : a pulsing intelligence core with orbiting sparks */
.m-ai::before{width:34px;height:34px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--accent);box-shadow:0 0 26px var(--accent)}
.m-ai::after{width:78px;height:78px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1.5px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.m-ai i{width:9px;height:9px;border-radius:50%;left:50%;top:50%;margin:-4.5px 0 0 -4.5px;box-shadow:0 0 10px var(--accent)}

/* m-plug : a hub with connectors reaching out to systems */
.m-plug::before{width:26px;height:26px;border-radius:8px;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--accent);box-shadow:0 0 16px var(--accent)}
.m-plug i:nth-child(-n+3){width:36px;height:2.5px;background:color-mix(in srgb,var(--accent) 55%,transparent);left:50%;top:50%;transform-origin:left center}
.m-plug i:nth-child(1){transform:rotate(0deg)}.m-plug i:nth-child(2){transform:rotate(130deg)}.m-plug i:nth-child(3){transform:rotate(230deg)}
.m-plug i:nth-child(4),.m-plug i:nth-child(5),.m-plug i:nth-child(6){width:12px;height:12px;border-radius:4px;top:50%;left:50%;
  background:color-mix(in srgb,var(--accent) 22%,transparent);border:2px solid var(--accent)}
.m-plug i:nth-child(4){transform:translate(30px,-6px)}.m-plug i:nth-child(5){transform:translate(-30px,22px)}.m-plug i:nth-child(6){transform:translate(-26px,-30px)}

/* m-doc : a page with a scan line and a classification tag */
.m-doc::before{width:74px;height:94px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:8px;
  background:color-mix(in srgb,var(--accent) 8%,rgba(9,18,32,.4));border:1.5px solid color-mix(in srgb,var(--accent) 36%,transparent)}
.m-doc::after{width:40px;height:15px;border-radius:5px;left:calc(50% + 14px);top:calc(50% - 30px);
  background:var(--accent);opacity:0;transform:scale(.6)}
.m-doc i{width:52px;height:2px;background:var(--accent);left:50%;top:50%;transform:translate(-50%,-40px);box-shadow:0 0 12px var(--accent)}

/* m-letter : an envelope with a routing dot travelling across */
.m-letter::before{width:96px;height:66px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:8px;
  background:color-mix(in srgb,var(--accent) 10%,rgba(9,18,32,.45));border:1.5px solid var(--accent)}
.m-letter::after{width:0;height:0;border-left:48px solid transparent;border-right:48px solid transparent;
  border-top:32px solid color-mix(in srgb,var(--accent) 30%,transparent);left:50%;top:50%;transform:translate(-50%,-33px)}
.m-letter i{width:10px;height:10px;border-radius:50%;top:50%;left:calc(50% - 40px);transform:translateY(-50%);box-shadow:0 0 12px var(--accent)}

/* m-agenda : agenda rows with votes tallying (checks lighting in turn) */
.m-agenda i{height:9px;width:56px;border-radius:4px;left:calc(50% - 18px);background:color-mix(in srgb,var(--accent) 30%,transparent)}
.m-agenda i:nth-child(1){top:calc(50% - 30px)}.m-agenda i:nth-child(2){top:calc(50% - 8px)}.m-agenda i:nth-child(3){top:calc(50% + 14px)}
.m-agenda i::before{content:"";position:absolute;left:-26px;top:-3px;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--accent);background:transparent}
.m-agenda i.tick::before{background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* m-task : a checklist ticking off */
.m-task i{height:9px;width:52px;border-radius:4px;left:calc(50% - 14px);background:color-mix(in srgb,var(--accent) 26%,transparent)}
.m-task i:nth-child(1){top:calc(50% - 30px)}.m-task i:nth-child(2){top:calc(50% - 8px)}.m-task i:nth-child(3){top:calc(50% + 14px)}
.m-task i::before{content:"";position:absolute;left:-26px;top:-4px;width:16px;height:16px;border-radius:4px;border:2px solid var(--accent)}
.m-task i::after{content:"";position:absolute;left:-22px;top:-1px;width:9px;height:5px;border-left:2.5px solid #06101d;border-bottom:2.5px solid #06101d;transform:rotate(-45deg) scale(0);transform-origin:center}
.m-task i.done::before{background:var(--accent)}
.m-task i.done::after{transform:rotate(-45deg) scale(1)}

/* m-archive : a records cabinet, a drawer sliding open */
.m-archive::before{width:84px;height:92px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:8px;
  background:color-mix(in srgb,var(--accent) 8%,rgba(9,18,32,.4));border:1.5px solid color-mix(in srgb,var(--accent) 38%,transparent)}
.m-archive i{width:64px;height:20px;border-radius:5px;left:50%;transform:translateX(-50%);
  background:color-mix(in srgb,var(--accent) 16%,transparent);border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.m-archive i:nth-child(1){top:calc(50% - 26px)}.m-archive i:nth-child(2){top:calc(50% - 2px)}.m-archive i:nth-child(3){top:calc(50% + 22px)}
.m-archive i::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:3px;border-radius:2px;background:var(--accent);transform:translate(-50%,-50%)}

/* m-graph : a knowledge graph — a hub with satellites and edges */
.m-graph::before{width:20px;height:20px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);box-shadow:0 0 16px var(--accent)}
.m-graph i:nth-child(-n+4){width:36px;height:2px;background:color-mix(in srgb,var(--accent) 40%,transparent);left:50%;top:50%;transform-origin:left center}
.m-graph i:nth-child(1){transform:rotate(28deg)}.m-graph i:nth-child(2){transform:rotate(150deg)}
.m-graph i:nth-child(3){transform:rotate(212deg)}.m-graph i:nth-child(4){transform:rotate(320deg)}
.m-graph i:nth-child(n+5){width:12px;height:12px;border-radius:50%;top:50%;left:50%;background:color-mix(in srgb,var(--accent) 30%,transparent);border:2px solid var(--accent)}
.m-graph i:nth-child(5){transform:translate(26px,10px)}.m-graph i:nth-child(6){transform:translate(-38px,16px)}
.m-graph i:nth-child(7){transform:translate(-32px,-24px)}.m-graph i:nth-child(8){transform:translate(22px,-28px)}

/* m-skill : competency bars filling to different levels */
.m-skill::after{width:104px;height:2px;background:color-mix(in srgb,var(--accent) 50%,transparent);left:50%;top:calc(50% + 32px);transform:translateX(-50%)}
.m-skill i{width:22px;bottom:calc(50% - 32px);border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--accent) 80%,transparent)}
.m-skill i:nth-child(1){left:calc(50% - 46px);height:56px}
.m-skill i:nth-child(2){left:calc(50% - 11px);height:34px}
.m-skill i:nth-child(3){left:calc(50% + 24px);height:46px}

/* m-path : a learning path with a marker travelling toward the goal */
.m-path::before{width:118px;height:44px;left:50%;top:50%;transform:translate(-50%,-50%);
  border:none;border-top:2.5px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:50%;
  clip-path:polygon(0 0,100% 0,100% 55%,0 55%)}
.m-path::after{width:16px;height:16px;border-radius:50%;left:calc(50% + 52px);top:calc(50% - 20px);
  background:color-mix(in srgb,var(--accent) 30%,transparent);border:2px solid var(--accent)}
.m-path i{width:12px;height:12px;border-radius:50%;top:calc(50% + 14px);left:calc(50% - 52px);box-shadow:0 0 12px var(--accent)}

/* m-target : concentric rings with a central lock (strategy on target) */
.m-target::before{width:88px;height:88px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.m-target::after{width:52px;height:52px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.m-target i{width:16px;height:16px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);box-shadow:0 0 16px var(--accent)}

/* ---- the looping micro-motion (only when motion is welcome) ---- */
@media (prefers-reduced-motion:no-preference){
  .spot.on .m-auth::after{animation:authLift 3s ease-in-out infinite}
  .spot.on .m-auth i{animation:dotPulse 3s ease-in-out infinite}
  .spot.on .m-auth i:nth-child(2){animation-delay:.22s}
  .spot.on .m-auth i:nth-child(3){animation-delay:.44s}
  @keyframes authLift{0%,45%{transform:translate(-50%,-30px) rotate(0)}60%,82%{transform:translate(-56%,-34px) rotate(-14deg)}100%{transform:translate(-50%,-30px) rotate(0)}}
  @keyframes dotPulse{0%,12%{opacity:.3;box-shadow:none}40%{opacity:1;box-shadow:0 0 10px var(--accent)}70%,100%{opacity:.3;box-shadow:none}}

  .spot.on .m-shield i{animation:scanDown 3s ease-in-out infinite}
  .spot.on .m-shield::after{animation:checkPop 3s ease-in-out infinite}
  @keyframes scanDown{0%{opacity:0;transform:translateX(-50%) translateY(0)}12%{opacity:1}48%{opacity:1;transform:translateX(-50%) translateY(60px)}60%,100%{opacity:0;transform:translateX(-50%) translateY(60px)}}
  @keyframes checkPop{0%,55%{opacity:0;transform:translate(-50%,-40%) rotate(-45deg) scale(.4)}70%,92%{opacity:1;transform:translate(-50%,-40%) rotate(-45deg) scale(1)}100%{opacity:0}}

  .spot.on .m-chart i{transform-origin:bottom;animation:barRise 2.8s ease-in-out infinite}
  .spot.on .m-chart i:nth-child(2){animation-delay:.12s}
  .spot.on .m-chart i:nth-child(3){animation-delay:.24s}
  .spot.on .m-chart i:nth-child(4){animation-delay:.36s}
  @keyframes barRise{0%{transform:scaleY(.15)}45%,70%{transform:scaleY(1)}100%{transform:scaleY(.15)}}

  .spot.on .m-flow i:nth-child(4){animation:tokenRun 3.2s ease-in-out infinite}
  @keyframes tokenRun{0%{left:calc(50% - 56px)}15%{left:calc(50% - 56px)}50%{left:50%}85%,100%{left:calc(50% + 56px)}}

  .spot.on .m-rules i:nth-child(1){animation:ruleA 3s ease-in-out infinite}
  .spot.on .m-rules i:nth-child(2){animation:ruleB 3s ease-in-out infinite}
  .spot.on .m-rules i:nth-child(3){animation:ruleTok 3s ease-in-out infinite}
  @keyframes ruleA{0%,45%{opacity:1}55%,100%{opacity:.3}}
  @keyframes ruleB{0%,45%{opacity:.35}55%,100%{opacity:1}}
  @keyframes ruleTok{0%,30%{opacity:0;top:calc(50% - 30px)}55%{opacity:1;top:calc(50% - 30px)}75%{opacity:1;top:calc(50% + 30px)}100%{opacity:0;top:calc(50% + 30px)}}

  .spot.on .m-engine::before{animation:spin 3.4s linear infinite}
  .spot.on .m-engine i{transform-origin:50% 41px;animation:spin 3.4s linear infinite}
  @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

  .spot.on .m-form i{transform-origin:left center;animation:fieldFill 3s ease-in-out infinite}
  .spot.on .m-form i:nth-child(1){width:52px}
  .spot.on .m-form i:nth-child(2){width:52px;animation-delay:.18s}
  .spot.on .m-form i:nth-child(3){width:38px;animation-delay:.36s}
  .spot.on .m-form::after{animation:checkPop2 3s ease-in-out infinite}
  @keyframes fieldFill{0%{transform:scaleX(.12)}40%,72%{transform:scaleX(1)}100%{transform:scaleX(.12)}}
  @keyframes checkPop2{0%,60%{opacity:0;transform:rotate(-45deg) scale(.3)}74%,92%{opacity:1;transform:rotate(-45deg) scale(1)}100%{opacity:0}}

  .spot.on .m-portal i{animation:cardIn 3.2s ease-in-out infinite}
  @keyframes cardIn{0%,10%{opacity:0;transform:translate(-50%,20px)}40%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,20px)}}

  .spot.on .m-ai::before{animation:corePulse 2.6s ease-in-out infinite}
  .spot.on .m-ai i:nth-child(1){animation:orbit 4s linear infinite}
  .spot.on .m-ai i:nth-child(2){animation:orbit 4s linear infinite;animation-delay:-1.33s}
  .spot.on .m-ai i:nth-child(3){animation:orbit 4s linear infinite;animation-delay:-2.66s}
  @keyframes corePulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}
  @keyframes orbit{to{transform:rotate(360deg) translateX(40px) rotate(-360deg)}}

  .spot.on .m-plug i:nth-child(4),.spot.on .m-plug i:nth-child(5),.spot.on .m-plug i:nth-child(6){animation:sysPulse 2.8s ease-in-out infinite}
  .spot.on .m-plug i:nth-child(5){animation-delay:.35s}
  .spot.on .m-plug i:nth-child(6){animation-delay:.7s}
  @keyframes sysPulse{0%,100%{border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:none}50%{border-color:var(--accent);box-shadow:0 0 12px var(--accent)}}

  .spot.on .m-doc i{animation:scanDoc 3s ease-in-out infinite}
  .spot.on .m-doc::after{animation:tagIn 3s ease-in-out infinite}
  @keyframes scanDoc{0%{opacity:0;transform:translate(-50%,-40px)}12%{opacity:1}55%{opacity:1;transform:translate(-50%,40px)}66%,100%{opacity:0;transform:translate(-50%,40px)}}
  @keyframes tagIn{0%,60%{opacity:0;transform:scale(.6)}74%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}

  .spot.on .m-letter i{animation:route 3.4s ease-in-out infinite}
  @keyframes route{0%,10%{left:calc(50% - 40px)}55%{left:50%}90%,100%{left:calc(50% + 40px)}}

  .spot.on .m-agenda i::before{animation:vote 3.2s ease-in-out infinite;background:transparent;box-shadow:none}
  .spot.on .m-agenda i:nth-child(2)::before{animation-delay:.4s}
  .spot.on .m-agenda i:nth-child(3)::before{animation-delay:.8s}
  @keyframes vote{0%,20%{background:transparent;box-shadow:none}45%,80%{background:var(--accent);box-shadow:0 0 10px var(--accent)}100%{background:transparent;box-shadow:none}}

  .spot.on .m-task i::after{animation:tick 3.2s ease-in-out infinite}
  .spot.on .m-task i:nth-child(2)::after{animation-delay:.4s}
  .spot.on .m-task i:nth-child(3)::after{animation-delay:.8s}
  .spot.on .m-task i::before{animation:tickBox 3.2s ease-in-out infinite}
  .spot.on .m-task i:nth-child(2)::before{animation-delay:.4s}
  .spot.on .m-task i:nth-child(3)::before{animation-delay:.8s}
  @keyframes tick{0%,22%{transform:rotate(-45deg) scale(0)}42%,82%{transform:rotate(-45deg) scale(1)}100%{transform:rotate(-45deg) scale(0)}}
  @keyframes tickBox{0%,22%{background:transparent}42%,82%{background:var(--accent)}100%{background:transparent}}

  .spot.on .m-archive i:nth-child(2){animation:drawer 3s ease-in-out infinite}
  @keyframes drawer{0%,20%{transform:translateX(-50%)}45%,72%{transform:translate(calc(-50% + 14px))}100%{transform:translateX(-50%)}}

  .spot.on .m-graph i:nth-child(n+5){animation:nodeGrow 3s ease-in-out infinite}
  .spot.on .m-graph i:nth-child(6){animation-delay:.2s}
  .spot.on .m-graph i:nth-child(7){animation-delay:.4s}
  .spot.on .m-graph i:nth-child(8){animation-delay:.6s}
  @keyframes nodeGrow{0%,15%{border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:none}45%,80%{border-color:var(--accent);box-shadow:0 0 10px var(--accent)}100%{border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:none}}

  .spot.on .m-skill i{transform-origin:bottom;animation:barRise 3s ease-in-out infinite}
  .spot.on .m-skill i:nth-child(2){animation-delay:.15s}
  .spot.on .m-skill i:nth-child(3){animation-delay:.3s}

  .spot.on .m-path i{animation:march 3.4s ease-in-out infinite}
  @keyframes march{0%,10%{left:calc(50% - 52px);top:calc(50% + 14px)}50%{left:50%;top:calc(50% - 4px)}90%,100%{left:calc(50% + 52px);top:calc(50% - 20px)}}

  .spot.on .m-target::before{animation:ripple 3s ease-out infinite}
  .spot.on .m-target::after{animation:ripple 3s ease-out infinite .4s}
  .spot.on .m-target i{animation:lockIn 3s ease-in-out infinite}
  @keyframes ripple{0%{opacity:.9;transform:translate(-50%,-50%) scale(.7)}70%{opacity:.15}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
  @keyframes lockIn{0%,100%{transform:translate(-50%,-50%) scale(.8);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.1);opacity:1}}
}
@media(max-width:820px){.pbeats,.pbeats-wide{grid-template-columns:1fr;max-width:460px}}
@media(prefers-reduced-motion:reduce){.pbeats.on .pb{animation:none!important;opacity:1!important;transform:none!important}}