/* NOVERGE motion art. Scenes are decorative SVG/HTML illustrations animated with CSS.
   They pause off screen (.is-live toggled by nv.js) and stop entirely under reduced motion. */

.scene{display:block;width:100%;height:auto;overflow:visible}
.scene text{font-family:var(--font)}
.js .scene *,.js .pm *{animation-play-state:paused}
.js .scene.is-live *,.js .pm.is-live *{animation-play-state:running}

/* shared */
.soft-shadow{fill:rgba(19,48,107,.10)}
.star{fill:#7AB6FF;animation:twinkle 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
.star{transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes blink{0%,45%,100%{opacity:1}50%,95%{opacity:.25}}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dash{to{stroke-dashoffset:-24}}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* devices */
.dev{fill:#fff;stroke:#2D69E3;stroke-width:2}
.dev__screen{fill:#EEF4FF}
.dev__top{fill:#EEF4FF}
.dev__bar{fill:#C7D3E3}
.dev__bar--2{fill:#4F8FFF}
.dev__tile{fill:#DCE8FF}
.dev__dot{fill:#C7D3E3}
.dev__home{fill:#C7D3E3}
.dev__code{fill:#2D69E3;font-weight:700;font-size:15px}
.dev__pins{stroke:#7AB6FF;stroke-width:2.5;stroke-linecap:round}
.win{fill:#fff;stroke:#DCE8FF;stroke-width:1.5}
.win__top{fill:#F2F5F8}
.win__url{fill:#EEF4FF}

/* probe mascot */
.probe__bob{animation:bob 3.4s ease-in-out infinite}
.probe__shadow{fill:rgba(19,48,107,.12);animation:shadowPulse 3.4s ease-in-out infinite}
@keyframes shadowPulse{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.8);opacity:.6}}
.probe__shadow{transform-box:fill-box;transform-origin:center}
.probe__body{fill:#fff;stroke:#2D69E3;stroke-width:2.5}
.probe__visor{fill:#13306B}
.probe__eye{fill:#7AB6FF;animation:blink 4s infinite}
.probe__smile{fill:none;stroke:#2D69E3;stroke-width:2;stroke-linecap:round}
.probe__panel{fill:#DCE8FF;stroke:#2D69E3;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:panelTilt 5s ease-in-out infinite}
.probe__panel--r{animation-delay:-2.5s}
@keyframes panelTilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.probe__grid{stroke:#7AB6FF;stroke-width:1.2;fill:none}
.probe__arm{fill:#C7D3E3}
.probe__mast{stroke:#2D69E3;stroke-width:2.5;stroke-linecap:round}
.probe__light{fill:#FFC94D;animation:blink 1.6s steps(1) infinite}
.probe__ping{fill:none;stroke:#FFC94D;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 1.6s ease-out infinite}
.probe__flame{fill:#7AB6FF;transform-box:fill-box;transform-origin:top center;animation:flame .5s ease-in-out infinite alternate}
@keyframes flame{from{transform:scaleY(.6);opacity:.5}to{transform:scaleY(1.2);opacity:1}}
.probe--wave .probe__mast,.probe--wave .probe__light,.probe--wave .probe__ping{transform-box:fill-box;transform-origin:bottom center}
.probe--wave .probe__mast{animation:wave 1.4s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}

/* ------------------------------------------------------------- hero */
.hero__art{position:relative;width:100%;max-width:640px;aspect-ratio:1/1;justify-self:end}
.hero__art .scene{position:absolute;inset:0;width:100%;height:100%}
.tracks ellipse,.tracks circle{fill:none;stroke:#C7D3E3;stroke-width:1.2}
.tracks circle{stroke-dasharray:2 8}
.planet__lines *{fill:none;stroke:rgba(79,143,255,.32);stroke-width:1.2}
.planet__spin ellipse{transform-box:fill-box;transform-origin:center;animation:meridian 14s linear infinite}
.planet__spin ellipse:nth-child(2){animation-delay:-4.66s}
.planet__spin ellipse:nth-child(3){animation-delay:-9.33s}
@keyframes meridian{0%{transform:scaleX(1)}50%{transform:scaleX(.04)}100%{transform:scaleX(1)}}
.planet__cities circle{fill:#fff;stroke:#2D69E3;stroke-width:1.5;animation:blink 2.6s infinite}
.planet__cities circle:nth-child(2){animation-delay:-.8s}.planet__cities circle:nth-child(3){animation-delay:-1.6s}.planet__cities circle:nth-child(4){animation-delay:-2.2s}
.planet__ring{fill:none;stroke:url(#hgRing);stroke-width:3.5;opacity:.85}
.planet__ring--front{stroke-width:4;opacity:1}
.ringspin{animation:spin 9s linear infinite}
.planet__ringdot{fill:#1B2430}
.orb{animation:spin 32s linear infinite;transform-origin:320px 330px}
.orb--b{animation:spinr 46s linear infinite}
.orb--c{animation:spin 26s linear infinite}
.orb--probe{animation:spinr 16s linear infinite}
.orb__item{transform-box:fill-box;transform-origin:center;animation:spinr 32s linear infinite}
.orb--b .orb__item{animation:spin 46s linear infinite}
.orb--c .orb__item{animation:spinr 26s linear infinite}
.orb--probe .orb__item{animation:spin 16s linear infinite}
.rocket__trail{fill:none;stroke:#7AB6FF;stroke-width:2;stroke-dasharray:6 8;opacity:0;animation:trail 12s linear infinite}
@keyframes trail{0%,78%{opacity:0;stroke-dashoffset:0}80%{opacity:.9}96%{opacity:.9;stroke-dashoffset:-140}100%{opacity:0}}
.rocket__ship{offset-rotate:auto 90deg;offset-distance:0%;opacity:0;animation:fly 12s cubic-bezier(.45,0,.55,1) infinite}
@keyframes fly{0%,78%{offset-distance:0%;opacity:0}80%{opacity:1}96%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
.rocket__body{fill:#fff;stroke:#2D69E3;stroke-width:2.5}
.rocket__fin{fill:#2D69E3}
.rocket__window{fill:#7AB6FF;stroke:#2D69E3;stroke-width:2}
.rocket__flame{fill:#FFC94D;transform-box:fill-box;transform-origin:top center;animation:flame .35s ease-in-out infinite alternate}
.story{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue-100),0 18px 34px -20px rgba(30,74,158,.55);font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;opacity:0;animation:storyPop 12s var(--ease) infinite;animation-delay:var(--d,0s);pointer-events:none}
.story .ic{width:20px;height:20px;color:var(--blue-strong)}
.story i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--blue-50);flex:none}
.story small{display:block;font-weight:400;color:var(--steel);font-size:12px}
@keyframes storyPop{0%{opacity:0;transform:translateY(14px) scale(.7)}4%{opacity:1;transform:none}18%{opacity:1;transform:none}22%{opacity:0;transform:translateY(-10px) scale(.92)}100%{opacity:0}}
.story--1{top:8%;inset-inline-start:0}
.story--2{top:22%;inset-inline-end:-2%}
.story--3{bottom:30%;inset-inline-start:-4%}
.story--4{bottom:12%;inset-inline-end:2%}
.story--5{top:44%;inset-inline-end:-6%}
.js .story{animation-play-state:paused}
.js .is-live .story{animation-play-state:running}
@media (max-width:900px){.hero__art{max-width:460px;justify-self:center}.story{font-size:12px;padding:8px 12px 8px 8px}.story--5{display:none}}

/* --------------------------------------------------------- services */
.tile .scene{margin-top:auto;max-height:260px}
.tile--mobile .scene--phone{width:auto;max-width:100%;height:clamp(340px,36vw,560px);max-height:none;margin:auto}
@media (max-width:980px){.tile--mobile .scene--phone{height:min(420px,90vw)}}
.ph__frame{fill:#13306B}
.ph__notch{fill:#0B1A3D}
.ph__bg{fill:#fff}
.ph__t{fill:#DCE8FF}.ph__t--2{fill:#EEF4FF}
.ph__card{fill:#EEF4FF;stroke:#DCE8FF;stroke-width:1.5}.ph__card--2{fill:#fff}
.ph__ring{fill:none;stroke:#4F8FFF;stroke-width:4}
.ph__check{fill:none;stroke:#2D69E3;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:phCheck 9s var(--ease) infinite}
@keyframes phCheck{0%,34%{stroke-dashoffset:60}44%,62%{stroke-dashoffset:0}66%,100%{stroke-dashoffset:60}}
.ph__btn{fill:#2D69E3}
.ph__bars rect{fill:#4F8FFF;transform-box:fill-box;transform-origin:bottom center;animation:barGrow 9s var(--ease) infinite}
.ph__bars rect:nth-child(2){animation-delay:.1s}.ph__bars rect:nth-child(3){animation-delay:.2s}.ph__bars rect:nth-child(4){animation-delay:.3s}
@keyframes barGrow{0%,66%{transform:scaleY(.1)}74%,100%{transform:scaleY(1)}}
.ph__screens{animation:screens 9s var(--ease-io) infinite}
@keyframes screens{0%,28%{transform:translate(95px,26px)}33%,61%{transform:translate(-35px,26px)}66%,94%{transform:translate(-165px,26px)}100%{transform:translate(95px,26px)}}
.toast{fill:#fff;stroke:#DCE8FF;stroke-width:1.5;filter:drop-shadow(0 8px 12px rgba(30,74,158,.18))}
.toast__dot{fill:#4F8FFF}.toast__dot--ok{fill:#15885B}
.toast__t{fill:#DCE8FF}.toast__t--2{fill:#EEF4FF}
.ph__toast{transform-box:fill-box;transform-origin:center;opacity:0;animation:toastPop 9s var(--ease) infinite}
.ph__toast--2{animation-delay:3s}
@keyframes toastPop{0%,8%{opacity:0;transform:translateY(10px) scale(.8)}12%{opacity:1;transform:none}30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-8px) scale(.9)}}
.kpi{fill:#EEF4FF}.kpi__t{fill:#C7D3E3}
.kpi__v{fill:#2D69E3;transform-box:fill-box;transform-origin:left center;animation:kpiGrow 6s var(--ease) infinite}
.kpi__v--2{animation-delay:.4s}
@keyframes kpiGrow{0%{transform:scaleX(.2)}20%,100%{transform:scaleX(1)}}
.donut__track{fill:none;stroke:#E6ECF2;stroke-width:6}
.donut__val{fill:none;stroke:#2D69E3;stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);animation:donut 6s var(--ease) infinite}
@keyframes donut{0%{stroke-dashoffset:100}30%,100%{stroke-dashoffset:28}}
.donut__hole{fill:#fff}
.bars rect{fill:#4F8FFF;transform-box:fill-box;transform-origin:bottom center;animation:bars 6s var(--ease) infinite}
.bars rect:nth-child(1){--k:1}.bars rect:nth-child(2){--k:.62;animation-delay:.08s}.bars rect:nth-child(3){--k:.82;animation-delay:.16s}.bars rect:nth-child(4){--k:.48;animation-delay:.24s}.bars rect:nth-child(5){--k:.92;animation-delay:.32s}
@keyframes bars{0%{transform:scaleY(.05)}25%,100%{transform:scaleY(var(--k,1))}}
.chart__line{fill:none;stroke:#2D69E3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2s var(--ease) infinite;animation-duration:6s}
.chart__line{animation:chartDraw 6s var(--ease) infinite}
@keyframes chartDraw{0%{stroke-dashoffset:1}35%,100%{stroke-dashoffset:0}}
.chart__end{fill:#2D69E3;transform-box:fill-box;transform-origin:center;animation:endPulse 6s ease-in-out infinite}
@keyframes endPulse{0%,34%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.4)}50%,100%{opacity:1;transform:scale(1)}}
.toggle__track{fill:#C7D3E3;animation:toggleTrack 6s steps(1) infinite}
.toggle__knob{fill:#fff;animation:toggleKnob 6s var(--ease) infinite}
@keyframes toggleTrack{0%,50%{fill:#C7D3E3}55%,100%{fill:#2D69E3}}
@keyframes toggleKnob{0%,50%{transform:translateX(0)}55%,100%{transform:translateX(16px)}}
.pipe{fill:none;stroke:#C7D3E3;stroke-width:3;stroke-dasharray:8 8;animation:dash 1.2s linear infinite}
.node circle{fill:#fff;stroke:#2D69E3;stroke-width:2.5}
.node__i{fill:none;stroke:#2D69E3;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.node--end circle{fill:#2D69E3}.node--end .node__i{stroke:#fff}
.packet rect{fill:#4F8FFF;stroke:#fff;stroke-width:1.5}
.packet--2 rect{fill:#FFC94D}
.gear{fill:#DCE8FF;stroke:#2D69E3;stroke-width:2;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:spin 9s linear infinite}
.gear--b{animation:spinr 7s linear infinite}
.gear--c{animation:spinr 8s linear infinite}
.gear__hole{fill:#fff;stroke:#2D69E3;stroke-width:2}
.blk{transform-box:fill-box;transform-origin:center;animation:blkIn 9s var(--ease) infinite}
.blk--nav{--from:translateY(-30px)}
.blk--hero{--from:translateX(-40px);animation-delay:.15s}
.blk--art{--from:translateX(40px);animation-delay:.3s}
.blk--cards{--from:translateY(40px);animation-delay:.45s}
@keyframes blkIn{0%{opacity:0;transform:var(--from,translateY(20px))}10%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:var(--from,translateY(20px))}}
.blk__f{fill:#DCE8FF}.blk__h{fill:#1B2430}.blk__btn{fill:#2D69E3}.blk__img{fill:#EEF4FF}.blk__sun{fill:#FFC94D}.blk__hill{fill:#7AB6FF}.blk__card{fill:#fff;stroke:#E6ECF2;stroke-width:1.5}
.blk__cta{transform-box:fill-box;transform-origin:center;animation:ctaClick 9s var(--ease) infinite}
@keyframes ctaClick{0%,63%{transform:scale(1)}65%{transform:scale(.88)}68%,100%{transform:scale(1)}}
.cursor path{fill:#1B2430;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.cursor{animation:cursorMove 9s var(--ease) infinite;opacity:0}
@keyframes cursorMove{0%,40%{opacity:0;transform:translate(250px,205px)}46%{opacity:1;transform:translate(250px,205px)}60%{transform:translate(70px,138px)}64%{transform:translate(70px,138px) scale(.85)}67%{transform:translate(70px,138px)}84%{opacity:1;transform:translate(70px,138px)}90%,100%{opacity:0;transform:translate(120px,190px)}}

/* --------------------------------------------------------- stage scenes */
.scene--st{max-width:300px}
.env__back{fill:#DCE8FF}
.env__front{fill:#EEF4FF;stroke:#2D69E3;stroke-width:2;stroke-linejoin:round}
.env__flap{fill:#fff;stroke:#2D69E3;stroke-width:2;stroke-linejoin:round;transform-box:view-box;transform-origin:120px 62px;animation:flap 7s var(--ease-io) infinite}
@keyframes flap{0%,10%{transform:scaleY(1)}22%,86%{transform:scaleY(-1)}96%,100%{transform:scaleY(1)}}
.letter__p{fill:#fff;stroke:#2D69E3;stroke-width:2}
.letter__t{fill:#1B2430}.letter__t--2{fill:#DCE8FF}
.letter{animation:letter 7s var(--ease-io) infinite}
@keyframes letter{0%,24%{transform:translateY(34px)}44%,84%{transform:translateY(-14px)}96%,100%{transform:translateY(34px)}}
.badge__c{fill:#15885B}
.badge__k{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.badge-pop{transform-box:fill-box;transform-origin:center;opacity:0;animation:badge 7s var(--ease) infinite}
@keyframes badge{0%,46%{opacity:0;transform:scale(.3)}52%{opacity:1;transform:scale(1.15)}56%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.6)}}
.badge-pop--late{animation-delay:1.2s}
.tag{fill:#fff;stroke:#2D69E3;stroke-width:2}.tag__d{fill:#FFC94D}.tag__t{fill:#DCE8FF}
.ticket-tag{animation:tagIn 7s var(--ease) infinite;opacity:0}
@keyframes tagIn{0%,54%{opacity:0;transform:translateX(-30px)}62%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateX(-30px)}}
.cam__bg{fill:#EEF4FF}.cam__bg--2{fill:#DCE8FF}
.cam__head{fill:#7AB6FF}.cam__head--2{fill:#2D69E3}
.cam__shoulders{fill:#7AB6FF}.cam__shoulders--2{fill:#2D69E3}
.cam{transform-box:fill-box;transform-origin:center;animation:camBreath 4s ease-in-out infinite}
.cam--b{animation-delay:-2s}
@keyframes camBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.talk rect{fill:#2D69E3;transform-box:fill-box;transform-origin:center;animation:talk .8s ease-in-out infinite alternate}
.talk rect:nth-child(2){animation-delay:-.25s}.talk rect:nth-child(3){animation-delay:-.5s}
.talk--2 rect{animation-delay:-.4s}
@keyframes talk{from{transform:scaleY(.4)}to{transform:scaleY(1.3)}}
.cal__b{fill:#fff;stroke:#2D69E3;stroke-width:2}.cal__h{fill:#2D69E3}.cal__n{fill:#1B2430;font-weight:700;font-size:18px}
.cal{transform-box:fill-box;transform-origin:center;animation:calPop 4s var(--ease) infinite}
@keyframes calPop{0%,10%{transform:scale(1) rotate(0)}14%{transform:scale(1.12) rotate(-4deg)}18%{transform:scale(1) rotate(3deg)}22%,100%{transform:none}}
.doc{fill:#fff;stroke:#2D69E3;stroke-width:2}
.doc__h{fill:#1B2430}
.doc__lines rect{fill:#DCE8FF;transform-box:fill-box;transform-origin:left center;animation:typeIn 6s var(--ease) infinite}
.doc__lines rect:nth-child(2){animation-delay:.2s}.doc__lines rect:nth-child(3){animation-delay:.4s}.doc__lines rect:nth-child(4){animation-delay:.6s}
@keyframes typeIn{0%{transform:scaleX(0)}18%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.doc__rule{fill:#C7D3E3}.doc__t{fill:#DCE8FF}
.doc__total{fill:#2D69E3;transform-box:fill-box;transform-origin:right center;animation:typeIn 6s var(--ease) .8s infinite}
.ptag{fill:#FFC94D;stroke:#1B2430;stroke-width:2;stroke-linejoin:round}.ptag__hole{fill:#fff}.ptag__t{fill:#1B2430;font-weight:700;font-size:12px}
.price-tag{transform-box:fill-box;transform-origin:left center;animation:swing 3s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.sparkle path{stroke:#FFC94D;stroke-width:3;stroke-linecap:round;fill:none}
.sparkle{transform-box:fill-box;transform-origin:center;animation:sparkle 2.4s ease-in-out infinite}
.sparkle--b{animation-delay:-1.2s}
.stamp__ring{fill:none;stroke:#2D69E3;stroke-width:3}.stamp__ring--in{stroke-width:1.5;stroke-dasharray:3 3}
.stamp__check{fill:none;stroke:#2D69E3;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.stamp{transform-box:fill-box;transform-origin:center;opacity:0;animation:stampMark 5s var(--ease) infinite}
@keyframes stampMark{0%,30%{opacity:0;transform:scale(1.6) rotate(-10deg)}34%{opacity:1;transform:scale(.95) rotate(-10deg)}38%,90%{opacity:1;transform:scale(1) rotate(-10deg)}100%{opacity:0}}
.hand__b{fill:#2D69E3}.hand__s{fill:#13306B}
.stamp-hand{animation:stampHand 5s var(--ease-io) infinite}
@keyframes stampHand{0%,8%{transform:translateY(0)}30%{transform:translateY(128px)}36%{transform:translateY(128px)}52%,100%{transform:translateY(0)}}
.bank__roof{fill:#DCE8FF;stroke:#2D69E3;stroke-width:2;stroke-linejoin:round}.bank__beam{fill:#2D69E3}.bank__col{fill:#EEF4FF;stroke:#2D69E3;stroke-width:1.5}.bank__base{fill:#2D69E3}
.coin{fill:#FFC94D;stroke:#1B2430;stroke-width:1.5;animation:coin 5s var(--ease-io) infinite;opacity:0}
.coin--2{animation-delay:.3s}.coin--3{animation-delay:.6s}
@keyframes coin{0%,10%{opacity:0;transform:translateX(-20px)}20%{opacity:1}55%{opacity:1;transform:translateX(56px)}62%,100%{opacity:0;transform:translateX(60px)}}
.pay-arrow{fill:none;stroke:#2D69E3;stroke-width:2;stroke-dasharray:5 5;animation:dash 1s linear infinite}
.receipt__p{fill:#fff;stroke:#2D69E3;stroke-width:2;stroke-linejoin:round}.receipt__t{fill:#1B2430}.receipt__t--2{fill:#DCE8FF}.receipt__bar{fill:#E6ECF2}
.receipt__fill{fill:#2D69E3;transform-box:fill-box;transform-origin:left center;animation:fillBar 5s var(--ease) infinite}
@keyframes fillBar{0%,50%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
.receipt{animation:receiptIn 5s var(--ease) infinite}
@keyframes receiptIn{0%,40%{transform:translateX(40px);opacity:0}52%,100%{transform:none;opacity:1}}
.brick{fill:#DCE8FF;stroke:#2D69E3;stroke-width:2;animation:brickDrop 7s var(--ease) infinite;animation-delay:calc(var(--i,0) * .35s);opacity:0}
.brick--top{fill:#4F8FFF}
@keyframes brickDrop{0%{opacity:0;transform:translateY(-70px)}12%{opacity:1;transform:translateY(0)}15%{transform:translateY(-4px)}18%,86%{transform:translateY(0);opacity:1}94%,100%{opacity:0}}
.brick--hang{animation:none;opacity:1;fill:#7AB6FF}
.crane__mast,.crane__arm{fill:#C7D3E3}.crane__rope{stroke:#1B2430;stroke-width:2}
.crane__hook{animation:hook 3.5s ease-in-out infinite}
@keyframes hook{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,14px)}}
.prog__t{fill:#E6ECF2}.prog__f{fill:#2D69E3;transform-box:fill-box;transform-origin:left center;animation:progFill 7s linear infinite}
@keyframes progFill{0%{transform:scaleX(0)}86%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.bub__b{fill:#fff;stroke:#2D69E3;stroke-width:2;stroke-linejoin:round}.bub__b--me{fill:#2D69E3;stroke:none}
.bub__t{fill:#DCE8FF}.bub__t--w{fill:rgba(255,255,255,.75)}
.bub{transform-box:fill-box;transform-origin:bottom left;opacity:0;animation:bubIn 6s var(--ease) infinite}
.bub--b{transform-origin:bottom right;animation-delay:1.4s}
@keyframes bubIn{0%,6%{opacity:0;transform:scale(.6)}14%{opacity:1;transform:scale(1.05)}18%,84%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.8)}}
.wrench__b{fill:#7AB6FF;stroke:#2D69E3;stroke-width:2;stroke-linejoin:round}
.wrench{transform-box:fill-box;transform-origin:center;animation:wrench 2.4s ease-in-out infinite}
@keyframes wrench{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.tick{transform-box:fill-box;transform-origin:center;opacity:0;animation:badge 6s var(--ease) infinite}
.tick--b{animation-delay:.5s}
.moon{fill:#EEF4FF;stroke:#2D69E3;stroke-width:2}.moon__crater{fill:#DCE8FF}
.flag__pole{stroke:#1B2430;stroke-width:3;stroke-linecap:round}
.flag__cloth{fill:#2D69E3;transform-box:fill-box;transform-origin:left center;animation:flagWave 1.6s ease-in-out infinite}
@keyframes flagWave{0%,100%{transform:skewY(-6deg)}50%{transform:skewY(6deg)}}
.flag{transform-box:fill-box;transform-origin:bottom center;animation:flagRise 6s var(--ease) infinite}
@keyframes flagRise{0%{transform:scaleY(0)}12%,100%{transform:scaleY(1)}}
.cf{transform-box:fill-box;transform-origin:center;animation:cfFall 3.2s linear infinite;animation-delay:var(--d,0s);opacity:0}
@keyframes cfFall{0%{opacity:0;transform:translateY(-40px) rotate(var(--r,0deg))}10%{opacity:1}100%{opacity:0;transform:translateY(90px) rotate(calc(var(--r,0deg) + 200deg))}}
.confetti--burst .cf{animation:cfBurst 2.8s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes cfBurst{0%{opacity:0;transform:translateY(80px) scale(.4) rotate(var(--r,0deg))}15%{opacity:1;transform:translateY(-30px) scale(1) rotate(calc(var(--r,0deg) + 60deg))}100%{opacity:0;transform:translateY(160px) rotate(calc(var(--r,0deg) + 340deg))}}
.lock__orbit{fill:none;stroke:#C7D3E3;stroke-width:1.5;stroke-dasharray:3 6}
.lock__sat{fill:#4F8FFF;transform-origin:80px 80px;animation:spin 6s linear infinite}
.lock__b{fill:#fff;stroke:#2D69E3;stroke-width:2.5}
.lock__sh{fill:none;stroke:#2D69E3;stroke-width:4;stroke-linecap:round;animation:shackle 3s var(--ease) infinite}
@keyframes shackle{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-6px)}90%{transform:translateY(0)}}
.lock__k{fill:#2D69E3}

/* ----------------------------------------------------------- wizard art */
.wz__art{position:relative;padding:10px 10px 0;border-radius:var(--r-card);background:linear-gradient(160deg,#fff,var(--blue-50));border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden;min-height:150px}
.wz__art .scene{display:none;max-height:220px}
.wz__art[data-step="0"] .scene--wz0,.wz__art[data-step="1"] .scene--wz1,.wz__art[data-step="2"] .scene--wz2,.wz__art[data-step="3"] .scene--wz3{display:block;animation:nv-rise 500ms var(--ease)}
.no-js .wz__art{display:none}
@media (max-width:980px){.wz__art{display:none}}
.card{fill:#fff;stroke:#2D69E3;stroke-width:2}.card__top{fill:#2D69E3}
.avatar{fill:#EEF4FF;stroke:#2D69E3;stroke-width:2}.avatar__h{fill:#7AB6FF}.avatar__s{fill:#7AB6FF}
.type rect{fill:#DCE8FF;transform-box:fill-box;transform-origin:left center;animation:typeIn 5s var(--ease) infinite}
.type rect:nth-child(2){animation-delay:.3s}.type rect:nth-child(3){animation-delay:.6s}
.mail__b{fill:#fff;stroke:#2D69E3;stroke-width:2}.mail__f{fill:none;stroke:#2D69E3;stroke-width:2;stroke-linejoin:round}
.mail{animation:bob 3s ease-in-out infinite}
.ring-phone{animation:ringWiggle 2.2s ease-in-out infinite}
@keyframes ringWiggle{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(-12deg)}70%{transform:rotate(12deg)}75%{transform:rotate(-8deg)}80%{transform:rotate(0)}}
.ring-phone{transform-box:fill-box;transform-origin:center}
.ring__w{fill:none;stroke:#4F8FFF;stroke-width:2.5;stroke-linecap:round;animation:blink 2.2s infinite}
.bulb__glow{fill:#FFC94D;opacity:0;animation:glow 4s ease-in-out infinite}
@keyframes glow{0%,20%{opacity:0;transform:scale(.6)}45%,80%{opacity:.35;transform:scale(1)}100%{opacity:0}}
.bulb__glow{transform-box:fill-box;transform-origin:center}
.bulb__g{fill:#fff;stroke:#2D69E3;stroke-width:2.5;animation:bulbOn 4s ease-in-out infinite}
@keyframes bulbOn{0%,20%{fill:#fff}45%,80%{fill:#FFF1BF}100%{fill:#fff}}
.bulb__base{fill:#2D69E3}.bulb__fil{fill:none;stroke:#FFC94D;stroke-width:2.5;stroke-linecap:round}
.ray line{stroke:#FFC94D;stroke-width:3.5;stroke-linecap:round}
.ray{opacity:0;animation:rays 4s ease-in-out infinite}
.ray--b{animation-delay:.15s}.ray--c{animation-delay:.3s}
@keyframes rays{0%,40%{opacity:0}50%,78%{opacity:1}90%,100%{opacity:0}}
.idea{transform-box:fill-box;transform-origin:center;opacity:0;animation:ideaPop 4s var(--ease) infinite}
.idea--b{animation-delay:.2s}.idea--c{animation-delay:.4s}
@keyframes ideaPop{0%,48%{opacity:0;transform:scale(.5) translateY(14px)}58%{opacity:1;transform:scale(1.06)}64%,90%{opacity:1;transform:none}100%{opacity:0}}
.chk__box{fill:#fff;stroke:#2D69E3;stroke-width:2;animation:chkFill 6s steps(1) infinite;animation-delay:calc(var(--i,0) * .6s)}
@keyframes chkFill{0%,15%{fill:#fff}16%,90%{fill:#2D69E3}91%,100%{fill:#fff}}
.chk__k{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:chkDraw 6s var(--ease) infinite;animation-delay:calc(var(--i,0) * .6s)}
@keyframes chkDraw{0%,15%{stroke-dashoffset:30}24%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
.chk__t{fill:#DCE8FF}
.slider__t{fill:#E6ECF2}.slider__k{fill:#2D69E3;stroke:#fff;stroke-width:2.5;animation:slide 6s var(--ease-io) infinite}
@keyframes slide{0%,10%{transform:translateY(0)}45%,60%{transform:translateY(74px)}90%,100%{transform:translateY(0)}}
.clip__b{fill:#2D69E3}.clip__r{fill:#C7D3E3}
.pad{fill:#C7D3E3}.pad--2{fill:#1B2430}
.cd__t{fill:#fff;stroke:#E6ECF2;stroke-width:5}
.cd__v{fill:none;stroke:#2D69E3;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;transform:rotate(-90deg);animation:cdRing 6s linear infinite}
@keyframes cdRing{0%{stroke-dashoffset:0}60%{stroke-dashoffset:100}100%{stroke-dashoffset:100}}
.cd__n{fill:#1B2430;font-weight:700;font-size:20px;opacity:0;animation:cdNum 6s steps(1) infinite}
.cd__n--3{animation-delay:0s}.cd__n--2{animation-delay:1.2s}.cd__n--1{animation-delay:2.4s}
@keyframes cdNum{0%,19%{opacity:1}20%,100%{opacity:0}}
.rocket--pad .rocket__ship{offset-path:none;animation:padLaunch 6s var(--ease-io) infinite;opacity:1;transform-box:fill-box;transform-origin:bottom center}
@keyframes padLaunch{0%,52%{transform:translate(130px,96px)}54%{transform:translate(128px,96px)}56%{transform:translate(132px,96px)}58%{transform:translate(128px,96px)}60%{transform:translate(130px,96px)}82%{transform:translate(130px,-140px)}83%,100%{transform:translate(130px,96px);opacity:0}}
.rocket--pad .rocket__ship{animation-name:padLaunch}
.smoke circle{fill:#EEF4FF;stroke:#DCE8FF;stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0;animation:smoke 6s ease-out infinite}
.smoke circle:nth-child(2){animation-delay:.1s}.smoke circle:nth-child(3){animation-delay:.2s}
@keyframes smoke{0%,58%{opacity:0;transform:scale(.4)}64%{opacity:1;transform:scale(1.2)}80%{opacity:0;transform:scale(2.2) translateY(-10px)}100%{opacity:0}}

/* ---------------------------------------------------------- celebrate */
.celebrate{position:relative;margin:-10px 0 8px;overflow:visible}
.celebrate .scene{max-height:220px}

/* ------------------------------------------------------- portal mock */
.pm{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0;border-radius:var(--r-tile);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3);overflow:hidden;font-size:13.5px;text-align:start}
.pm__side{background:var(--off);border-inline-end:1px solid var(--line);padding:16px 12px}
.pm__logo img{height:22px;width:auto;margin:4px 6px 18px}
.pm__rail{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pm__step{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:12px;color:var(--steel);font-size:13px}
.pm__step i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--silver);background:#fff;flex:none;animation:pmDot 12s steps(1) infinite;animation-delay:calc(var(--i,0) * 1.2s)}
.pm__step{animation:pmStep 12s steps(1) infinite;animation-delay:calc(var(--i,0) * 1.2s)}
@keyframes pmDot{0%,8%{background:#fff;border-color:var(--silver)}9%,92%{background:var(--blue-strong);border-color:var(--blue-strong)}93%,100%{background:#fff;border-color:var(--silver)}}
@keyframes pmStep{0%,8%{color:var(--steel);background:transparent}9%,92%{color:var(--ink);background:var(--blue-50)}93%,100%{color:var(--steel);background:transparent}}
.pm__main{padding:18px;display:grid;gap:12px;align-content:start}
.pm__head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pm__head b{font-weight:500;font-size:16px}
.pm__card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,var(--blue-50),#fff)}
.pm__card b{display:block;font-weight:500}.pm__card small{color:var(--steel)}
.pm__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--blue-strong);color:#fff;flex:none}
.pm__ic .ic{width:20px;height:20px}
.pm__btn{margin-inline-start:auto;padding:8px 14px;border-radius:999px;background:var(--blue-strong);color:#fff;font-size:13px;animation:pmBtn 12s var(--ease) infinite}
@keyframes pmBtn{0%,30%{transform:scale(1)}33%{transform:scale(.9)}36%,100%{transform:scale(1)}}
.pm__chat{display:grid;gap:8px}
.pm__chat .bubble{font-size:13px;padding:9px 13px;max-width:78%;opacity:0;animation:pmBub 12s var(--ease) infinite}
.pm__b1{animation-delay:.6s}.pm__b2{animation-delay:3.2s}.pm__b3{animation-delay:5.4s}
@keyframes pmBub{0%{opacity:0;transform:translateY(8px) scale(.96)}4%,92%{opacity:1;transform:none}96%,100%{opacity:0}}
.pm__upload{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--off);opacity:0;animation:pmBub 12s var(--ease) 7s infinite}
.pm__upload > div{flex:1;display:grid;gap:8px}
.pm__upload b{font-weight:500}
.pm__upload .upload-progress span{transform:scaleX(0);animation:pmProg 12s var(--ease) 7.6s infinite}
@keyframes pmProg{0%{transform:scaleX(0)}18%,100%{transform:scaleX(1)}}
.pm__ok{opacity:0;animation:pmOk 12s var(--ease) 9.8s infinite}
@keyframes pmOk{0%{opacity:0;transform:scale(.5)}5%{opacity:1;transform:scale(1.1)}8%,100%{opacity:1;transform:scale(1)}}
@media (max-width:700px){.pm{grid-template-columns:1fr}.pm__side{display:none}}

/* ------------------------------------------------------ section décor */
.sec--soft{background:linear-gradient(180deg,var(--white),#EEF3FA 50%,var(--white))}
.sec--dots::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(94,107,122,.18) 1px,transparent 1.2px);background-size:24px 24px;-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(60% 60% at 50% 50%,#000 20%,transparent 75%);pointer-events:none}
.sec{isolation:isolate;overflow:clip}
.blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none;animation:blobDrift 22s ease-in-out infinite}
.blob--a{width:420px;height:420px;background:#DCE8FF;inset-inline-start:-140px;top:10%}
.blob--b{width:320px;height:320px;background:#EAF2FF;inset-inline-end:-100px;bottom:5%;animation-delay:-11s}
@keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.12)}}

/* deliverables + trust */
.deliv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.deliv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.deliv{grid-template-columns:1fr}}
.deliv__i{position:relative;overflow:hidden;display:grid;gap:12px;padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);transition:transform 300ms var(--ease),box-shadow 300ms var(--ease)}
.deliv__i::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;border:1px solid var(--blue-100);inset-inline-end:-50px;top:-50px;transition:transform 600ms var(--ease)}
.deliv__ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-strong);transition:transform 300ms var(--ease),background-color 300ms ease,color 300ms ease}
.deliv__ic .ic{width:26px;height:26px}
.deliv__i b{font-weight:500;font-size:16.5px}
.deliv__i p{color:var(--steel);font-size:14.5px;margin:0}
@media (hover:hover){.deliv__i:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}.deliv__i:hover .deliv__ic{background:var(--blue-strong);color:#fff;transform:rotate(-8deg) scale(1.06)}.deliv__i:hover::after{transform:scale(1.4)}}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:980px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trust__i{display:grid;gap:10px;padding:20px;border-radius:20px;background:linear-gradient(170deg,#fff,var(--blue-50));border:1px solid var(--blue-100)}
.trust__i .ic{width:26px;height:26px;color:var(--blue-strong)}
.trust__i b{font-weight:500}
.trust__i span{color:var(--steel);font-size:14px}
.showcase{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:980px){.showcase{grid-template-columns:1fr}}
.showcase__pts{display:grid;gap:12px;margin-top:24px}
.showcase__pt{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.showcase__pt i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--blue-50);color:var(--blue-strong)}
.showcase__pt b{display:block;font-weight:500}
.showcase__pt span{color:var(--steel);font-size:14.5px}

/* FAQ */
.faq{display:grid;gap:10px;max-width:820px}
.faq details{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--sh-1);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;font-weight:500;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:20px;height:20px;color:var(--blue-strong);flex:none;transition:transform 260ms var(--ease)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details[open] summary{background:var(--blue-50)}
.faq__a{padding:4px 20px 18px;color:var(--ink-2);line-height:1.8;font-size:15px}
.faq__a p{margin:0}

/* portal stage art */
.sv__art{width:250px;flex:none;align-self:center}
.sv__art .scene{max-width:250px}
@media (max-width:640px){.sv__art{width:100%;max-width:240px}}
.locked-view .scene--lock{width:140px;height:140px}
.pt-hero__probe{position:absolute;inset-inline-end:clamp(140px,22%,260px);top:8%;width:90px;height:110px;z-index:0}
@media (max-width:640px){.pt-hero__probe{display:none}}
.gate__probe,.auth__probe{position:absolute;width:150px;height:170px;inset-inline-start:12%;top:14%}
.no-js .scene,.no-js .story{animation-play-state:running}

@media (prefers-reduced-motion:reduce){
  .scene *,.story,.pm *,.blob{animation:none!important}
  .story{opacity:1;position:static;display:none}
  .rocket__ship{opacity:1;offset-distance:0%}
  .brick,.bub,.badge-pop,.tick,.idea,.ray,.cursor,.coin,.ticket-tag,.stamp,.pm__chat .bubble,.pm__upload,.pm__ok{opacity:1}
}

/* here scene */
.pulse-rings circle{fill:none;stroke:#4F8FFF;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ringPulse 4s ease-out infinite}
.pulse-rings circle:nth-child(2){animation-delay:1.3s}.pulse-rings circle:nth-child(3){animation-delay:2.6s}
@keyframes ringPulse{0%{transform:scale(.3);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.pin__b{fill:#2D69E3;stroke:#fff;stroke-width:3}.pin__h{fill:#fff}
.pin{transform-box:fill-box;transform-origin:bottom center;animation:pinBounce 2.4s var(--ease) infinite}
@keyframes pinBounce{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-14px) scale(1.04)}45%{transform:translateY(0) scale(.96)}}
.orb-here{animation:spin 14s linear infinite;transform-origin:160px 190px}
.orb-here__i{transform-box:fill-box;transform-origin:center;animation:spinr 14s linear infinite}
.pill__b{fill:#fff;stroke:#DCE8FF;stroke-width:1.5}.pill__t{fill:#1B2430;font-weight:600;font-size:12px}
.pill{animation:bob 4s ease-in-out infinite}
.pill--b{animation-delay:-1s}.pill--c{animation-delay:-2s}.pill--d{animation-delay:-3s}