/* MotionFlow homepage motion layer — CSS/SVG only, no video. Honours prefers-reduced-motion. */
.mo-wrap{position:relative}
.mo-wrap>svg.mo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* shared glows */
.mo .glow{fill:#F47B20;opacity:.0;filter:url(#moBlur);animation:moBreath 3.2s ease-in-out infinite}
.mo .ring{fill:none;stroke:#F47B20;stroke-width:.7;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center;animation:moRing 2.4s ease-out infinite}
.mo .ring.r2{animation-delay:.4s}.mo .ring.r3{animation-delay:.8s}
.mo .spark{fill:#fff;opacity:.95}
.mo .halo{fill:#F47B20;filter:url(#moBlur);opacity:.75}
.mo .trail{fill:none;stroke:#F47B20;stroke-width:.55;stroke-linecap:round;stroke-dasharray:1.2 2.4;opacity:.55;animation:moDash 2.2s linear infinite}
.mo .tick{fill:none;stroke:#fff;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;animation:moTick 4s ease-in-out infinite}
.mo .tickbg{fill:#F47B20;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:moPop 4s cubic-bezier(.2,.9,.25,1.2) infinite}
.mo .dot{fill:#141B3D;opacity:.25;animation:moType 1.2s ease-in-out infinite}
.mo .dot.d2{animation-delay:.2s}.mo .dot.d3{animation-delay:.4s}
.mo .pop{fill:none;stroke:#F47B20;stroke-width:.8;opacity:0;transform-box:fill-box;transform-origin:center;animation:moPopRing 4.8s ease-out infinite}
.mo .pop.p2{animation-delay:1.2s}.mo .pop.p3{animation-delay:2.4s}.mo .pop.p4{animation-delay:3.6s}
.mo .blink{fill:#F47B20;opacity:0;filter:url(#moBlur);animation:moBlink 2.6s ease-in-out infinite}
@keyframes moBreath{0%,100%{opacity:0}50%{opacity:.55}}
@keyframes moRing{0%{opacity:0;transform:scale(.6)}20%{opacity:.9}100%{opacity:0;transform:scale(1.35)}}
@keyframes moDash{to{stroke-dashoffset:-7.2}}
@keyframes moTick{0%,30%{stroke-dashoffset:14}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}
@keyframes moPop{0%,24%{transform:scale(0)}34%{transform:scale(1.15)}40%,85%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes moType{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-.6px)}}
@keyframes moPopRing{0%{opacity:0;transform:scale(.4)}8%{opacity:1}30%,100%{opacity:0;transform:scale(1.6)}}
@keyframes moBlink{0%,100%{opacity:0}50%{opacity:.6}}
/* hero: slow drifting light behind the phone */
.hero::before{animation:heroDrift 16s ease-in-out infinite alternate;will-change:transform}
@keyframes heroDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2.5%,1.5%,0) scale(1.05)}100%{transform:translate3d(2%,-1.5%,0) scale(1.03)}}
/* filmstrip: a soft light sweep across the live picture */
.slide .art::after{content:"";position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transform:translateX(-70%);opacity:0;pointer-events:none}
.slide.on .art::after{animation:moSheen 7s ease-in-out infinite}
@keyframes moSheen{0%,60%{transform:translateX(-70%);opacity:0}65%{opacity:1}80%{transform:translateX(70%);opacity:1}81%,100%{opacity:0;transform:translateX(70%)}}
/* how-it-works tiles and job cards: the picture breathes slightly under the overlay */
.step3 .tile,.jimg{position:relative}
/* cursor glow on the dark sections (desktop only) */
.mo-cursor{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(244,123,32,.16),rgba(38,52,118,.12) 45%,transparent 70%);opacity:0;transition:opacity .4s;mix-blend-mode:screen;will-change:transform}
.mo-cursor.on{opacity:1}
@media (pointer:coarse),(max-width:900px){ .mo-cursor{display:none} }
/* magnetic primary buttons (desktop only) */
@media (pointer:fine){ .btn-primary,.btn-wa{transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .2s;will-change:transform} }
@media (prefers-reduced-motion:reduce){
  .mo *{animation:none!important} .mo .glow,.mo .blink{opacity:.35} .mo .ring,.mo .pop{opacity:0} .mo .tick{stroke-dashoffset:0} .mo .tickbg{transform:scale(1)}
  .hero::before{animation:none} .slide.on .art::after{animation:none} .mo-cursor{display:none}
}