/* Flowsolvio motion layer v3 — transforms/opacity only; static under reduced motion */
.fx .hero{position:relative;overflow:hidden;isolation:isolate}
.fx-hero{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.fx-dotgrid{fill:#3DD6C3;opacity:.16}
.fx-track{fill:none;stroke:#3DD6C3;stroke-width:1.6;opacity:.28}
.fx-w1 .fx-track,.fx-w3 .fx-track{stroke:#0B7F7E;opacity:.55;stroke-width:2}
.fx-launch{fill:#F2674A}
.fx-ring{fill:none;stroke:#F2674A;stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
.fx-pulse{fill:#3DD6C3;filter:drop-shadow(0 0 6px rgba(61,214,195,.9))}
.fx-pulse.coral{fill:#FF8A6E;filter:drop-shadow(0 0 6px rgba(242,103,74,.9))}
.fx-wave{opacity:0;animation:fx-in 1s cubic-bezier(.2,.8,.2,1) calc(var(--i)*180ms + 200ms) forwards}
.fx-on .fx-ring,.hero .fx-ring{animation:fx-ring 2.6s ease-out calc(var(--i)*650ms) infinite}
@keyframes fx-in{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes fx-ring{0%{opacity:.8;transform:scale(1)}80%,100%{opacity:0;transform:scale(3.2)}}
/* text legibility scrim over animation */
.fx .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(15,27,45,.92) 0%,rgba(15,27,45,.75) 45%,rgba(15,27,45,0) 75%)}

/* ---- service variant ---- */
.fx-variant{position:absolute;right:max(24px,calc((100vw - 1200px)/2));top:50%;width:min(36vw,440px);margin-top:calc(min(36vw,440px)*-.375);z-index:0;pointer-events:none;will-change:transform}
.fx-vsvg{width:100%;height:auto;display:block;overflow:visible}
.has-variant .hero-inner>*:not(.fx-variant){max-width:min(620px,56vw)}
@media (max-width:900px){.fx-variant{position:relative;right:auto;top:auto;margin:28px auto 0;width:min(86vw,360px)}.has-variant .hero-inner>*{max-width:none}}
.v-panel{fill:rgba(23,40,64,.72);stroke:rgba(61,214,195,.35);stroke-width:1.5}
.v-line,.v-belt,.v-belt2,.v-axis{fill:none;stroke:#5E7290;stroke-width:2;stroke-linecap:round}
.v-belt2{stroke-dasharray:6 10;opacity:.6}
.v-node{fill:#172840;stroke:#3DD6C3;stroke-width:2}
.v-node.warn{stroke:#FF8A6E}
.v-flag{fill:#F2674A}
.v-beam{fill:#3DD6C3;opacity:.12}.v-beamline{stroke:#3DD6C3;stroke-width:2}
.v-lensc{fill:rgba(61,214,195,.12);stroke:#F7F3EC;stroke-width:3}.v-lensh{stroke:#F7F3EC;stroke-width:5;stroke-linecap:round}
.v-scan{animation:fx-scan 4.2s ease-in-out infinite alternate}
.v-lens{transform:translate(70px,80px);animation:fx-lens 6s ease-in-out infinite}
.v-node{animation:fx-blink 4.2s ease-in-out infinite}.n2{animation-delay:.7s}.n3{animation-delay:1.4s}.n4{animation-delay:2.1s}.n5{animation-delay:2.8s}.n6{animation-delay:3.5s}
.v-flag{transform-box:fill-box;transform-origin:center;animation:fx-pop 2.1s ease-in-out infinite}
@keyframes fx-scan{from{transform:translateY(30px)}to{transform:translateY(250px)}}
@keyframes fx-lens{0%{transform:translate(70px,80px)}33%{transform:translate(200px,170px)}66%{transform:translate(330px,80px)}100%{transform:translate(70px,80px)}}
@keyframes fx-blink{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes fx-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.v-gearc{fill:#172840;stroke:#3DD6C3;stroke-width:3}.v-teeth{stroke:#3DD6C3;stroke-width:6;stroke-linecap:round}.v-hub{fill:#F2674A}
.v-spin{animation:fx-rot 6s linear infinite}
@keyframes fx-rot{to{transform:rotate(360deg)}}
.v-task{transform:translate(30px,190px);opacity:0;animation:fx-task 6s linear calc(var(--i)*1.5s) infinite}
.v-taskr{fill:#F7F3EC}.v-taskl{stroke:#0F1B2D;stroke-width:2.5;stroke-linecap:round}
.v-tick{fill:none;stroke:#0B7F7E;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:fx-tick 6s linear calc(var(--i)*1.5s) infinite}
.v-task .v-taskl{animation:fx-untick 6s linear calc(var(--i)*1.5s) infinite}
@keyframes fx-task{0%{transform:translate(40px,190px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translate(360px,190px);opacity:0}}
@keyframes fx-tick{0%,50%{opacity:0}56%,100%{opacity:1}}
@keyframes fx-untick{0%,50%{opacity:1}56%,100%{opacity:0}}
.v-stream{fill:none;stroke:#3DD6C3;stroke-width:2;opacity:.45}
.v-tile{fill:#F7F3EC;stroke:#3DD6C3;stroke-width:2}
.v-tl{fill:none;stroke:#0F1B2D;stroke-width:3;stroke-linecap:round}
.v-app{animation:fx-bob 4s ease-in-out infinite}.v-app.b{animation-delay:-2s}
@keyframes fx-bob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
.v-sync,.v-core{fill:#F2674A}.v-core{fill:#0F1B2D;stroke:#3DD6C3;stroke-width:3}
.v-syncring{fill:none;stroke:#F2674A;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:fx-ring 2.4s ease-out infinite}
.v-arrow{fill:none;stroke:#F2674A;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.v-satdot{fill:#0B7F7E}.v-sat{animation:fx-bob 5s ease-in-out calc(var(--i)*-.9s) infinite}
.v-bar{fill:#0B7F7E;transform-box:fill-box;transform-origin:bottom;animation:fx-bar 6s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.12s) infinite}
.v-bar:nth-of-type(odd){fill:#3DD6C3}
@keyframes fx-bar{0%{transform:scaleY(0)}25%,85%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:.0}}
.v-trend{fill:none;stroke:#FF8A6E;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.v-end{fill:#F2674A}
.v-reveal{transform-box:fill-box;transform-origin:left;animation:fx-draw 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes fx-draw{0%,10%{transform:scaleX(0)}55%,90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.v-dbg{fill:none;stroke:#2B4060;stroke-width:8}.v-darc{fill:none;stroke:#3DD6C3;stroke-width:8;stroke-linecap:round}
.v-dspin{animation:fx-rot 8s linear infinite}

/* ---- icon ticker ---- */
.fx-ticker{background:var(--ink-950,#070E19);overflow:hidden;padding:14px 0;border-top:1px solid rgba(61,214,195,.18);border-bottom:1px solid rgba(61,214,195,.18)}
.fx-tktrack{display:flex;align-items:center;gap:0;width:max-content;animation:fx-marq 40s linear infinite}
.fx-tk{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#172840;color:#3DD6C3;flex:none}
.fx-tk.c{color:#FF8A6E}.fx-tk svg{width:22px;height:22px}
.fx-tkline{display:block;width:56px;height:2px;margin:0 6px;background:linear-gradient(90deg,rgba(61,214,195,.1),rgba(61,214,195,.6),rgba(61,214,195,.1));flex:none}
@keyframes fx-marq{to{transform:translateX(-50%)}}

/* ---- sections: rhythm, mesh, art ---- */
.fx-sec{position:relative;isolation:isolate;overflow:hidden}

.fx-sec:not(.sec-ink):not(.sec-cream){background-image:radial-gradient(rgba(15,27,45,.09) 1.2px,transparent 1.3px);background-size:26px 26px}
.sec-cream.fx-art{background:var(--cream,#F7F3EC) url(/assets/motion/bg-flow-light.webp) right bottom/cover no-repeat!important}
.sec-ink{background:var(--ink-900,#0F1B2D)!important;color:#C8D3E2}
.sec-ink.fx-art{background:var(--ink-900,#0F1B2D) url(/assets/motion/bg-flow-dark.webp) right center/cover no-repeat!important}
.sec-ink>.wrap>h2,.sec-ink h2:not(.card h2),.sec-ink>.wrap>h3{color:#fff}
.sec-ink>.wrap>p,.sec-ink .intro,.sec-ink>.wrap>ul li,.sec-ink>.wrap>ol li,.sec-ink .split p,.sec-ink .split li{color:#C8D3E2}
.sec-ink>.wrap>p a:not(.btn),.sec-ink .intro a,.sec-ink .split a:not(.btn){color:#3DD6C3}
.sec-ink .eyebrow{color:#3DD6C3}
.sec-ink .card,.sec-ink .plan{box-shadow:0 18px 50px -20px rgba(0,0,0,.6)}
.cta-band.fx-art{background:var(--ink-900) url(/assets/motion/bg-flow-dark.webp) center/cover no-repeat!important}

/* ---- heading motif ---- */
.fx-motif{display:inline-block;width:56px;height:56px;margin:0 0 10px;color:#0A6E6D}
.sec-ink .fx-motif,.cta-band .fx-motif{color:#3DD6C3}
.cta-band .fx-motif{display:block;margin:0 auto 12px}
.fx-motif svg{width:100%;height:100%;overflow:visible}
.fx-motif .o1{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.35}
.fx-motif .o2{fill:currentColor;opacity:.1}
.fx-motif .orb{transform-origin:32px 32px;animation:fx-rot 7s linear infinite}
.fx-motif .orb circle{fill:#F2674A}

/* ---- reveals ---- */
.fx-rv{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.fx-rv.in{opacity:1;transform:none}
/* section h2 wave underline draws in */
.fx .section h2{position:relative}
.fx .section h2::after{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .25s}
.fx .section h2.in::after{transform:scaleX(1)}

/* ---- steps with connector + runner ---- */
ol.fx-steps{position:relative;list-style:none;padding-left:0;counter-reset:fx}
ol.fx-steps>li{position:relative;padding:6px 0 18px 58px;margin:0;counter-increment:fx;min-height:40px}
ol.fx-steps>li::before{content:counter(fx);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#0B7F7E;color:#fff;font-weight:700;box-shadow:0 0 0 6px rgba(11,127,126,.14)}
ol.fx-steps::before{content:"";position:absolute;left:19px;top:20px;bottom:30px;width:2px;background:linear-gradient(#0B7F7E,rgba(11,127,126,.15));transform-origin:top;transform:scaleY(0);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
ol.fx-steps.in::before{transform:scaleY(1)}
.fx-runner{position:absolute;left:14px;top:20px;bottom:30px;width:12px;pointer-events:none}
.fx-runner i{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#F2674A;box-shadow:0 0 0 4px rgba(242,103,74,.25);animation:fx-run 4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes fx-run{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(var(--h,200px));opacity:0}}
.sec-ink ol.fx-steps>li{color:#C8D3E2}
.step-cards.fx-steps{position:relative}
.step-cards .fx-runner{left:0;right:0;top:-14px;bottom:auto;width:auto;height:12px}
.step-cards .fx-runner i{animation-name:fx-runx}
@keyframes fx-runx{0%{transform:translateX(0);opacity:0}10%,90%{opacity:1}100%{transform:translateX(var(--w,600px));opacity:0}}

/* ---- stats sparkline ---- */
.fx-spark{display:block;width:70px;height:18px;margin:10px auto 0}
.fx-spark svg{width:100%;height:100%}
.fx-spark rect{fill:#0B7F7E;transform-box:fill-box;transform-origin:bottom;transform:scaleY(.08);transition:transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i)*90ms + 300ms)}
.fx-spark rect:last-child{fill:#F2674A}
.fx-spark.in rect{transform:none}
.sec-ink .fx-spark rect,.stats .fx-spark rect{fill:#3DD6C3}.stats .fx-spark rect:last-child{fill:#FF8A6E}

/* ---- glow border sweep + hover ---- */
.fx-card{isolation:isolate}
.fx-glow{position:absolute;inset:-2px;border-radius:inherit;overflow:hidden;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s}
.fx-glow::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;margin:-100% 0 0 -100%;background:conic-gradient(from 0deg,transparent 0 60%,#3DD6C3 75%,#F2674A 85%,transparent 95%);animation:fx-rot 4s linear infinite;animation-play-state:paused}
.fx-glow::after{content:"";position:absolute;inset:2px;border-radius:inherit;background:#fff}
.fx-card:hover .fx-glow,.fx-card:focus-within .fx-glow,.plan.featured .fx-glow,.plan.feat .fx-glow{opacity:1}
.fx-card:hover .fx-glow::before,.fx-card:focus-within .fx-glow::before,.plan.featured .fx-glow::before,.plan.feat .fx-glow::before{animation-play-state:running}
.stats .fx-glow::after{background:#172840}
.fx-card:hover{transform:translateY(-6px)}
.fx-card:hover .ico,.fx-card:hover .icon-tile,.fx-card:hover .stat-ico{transform:rotate(-8deg) scale(1.08);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fx-mag{transition:transform .25s cubic-bezier(.2,.8,.2,1)!important;will-change:transform}

/* ---- pause off-screen / hidden tab ---- */
.fx-ticker:not(.fx-on) *,.fx-variant:not(.fx-on) *,ol.fx-steps:not(.fx-on) .fx-runner i,.step-cards:not(.fx-on) .fx-runner i{animation-play-state:paused!important}
.fx-sec:not(.fx-on) .fx-motif .orb{animation-play-state:paused}
.fx-paused *,.fx-paused *::before{animation-play-state:paused!important}

/* ---- reduced motion: static final frame ---- */
@media (prefers-reduced-motion:reduce){
 .fx *,.fx *::before,.fx *::after{animation:none!important;transition:none!important}
 .fx-wave,.fx-rv{opacity:1!important;transform:none!important}
 .fx .section h2::after,ol.fx-steps::before,.fx-spark rect{transform:none!important}
 .fx-runner,.fx-ring,.v-syncring,.v-lens{display:none}
 .v-task{opacity:1}.v-task:nth-child(n){transform:translate(320px,190px)}
 .v-task[style*="--i:0"]{transform:translate(90px,190px)}.v-task[style*="--i:1"]{transform:translate(150px,190px)}
 .v-task[style*="--i:2"]{transform:translate(260px,190px)}.v-task[style*="--i:3"]{transform:translate(330px,190px)}
 .v-task[style*="--i:2"] .v-taskl,.v-task[style*="--i:3"] .v-taskl{opacity:0}.v-task[style*="--i:2"] .v-tick,.v-task[style*="--i:3"] .v-tick{opacity:1}
 .v-scan{transform:translateY(140px)}
 .fx-mag,.fx-card:hover{transform:none!important}
}
.fx .hero-home .hero-inner{width:100%}
.sec-ink p,.sec-ink li,.sec-ink dd,.sec-ink dt,.sec-ink small{color:#C8D3E2}
.sec-ink :is(.card,.plan,form,.panel,.box,.faq-item,details,table,.stat) :is(p,li,dd,dt,small){color:#3A4B63}
.sec-ink :is(.card,.plan) :is(h2,h3,h4){color:#0F1B2D}
.fx .hero a:not(.btn){color:#3DD6C3!important}
.cta-band a:not(.btn){color:#3DD6C3!important}
.fx-variant.fx-demo{position:relative;right:auto;top:auto;margin:0;width:100%}
.sec-cream.fx-art{background:linear-gradient(90deg,#F7F3EC 0,rgba(247,243,236,.92) 45%,rgba(247,243,236,.55) 75%,rgba(247,243,236,.3)),var(--cream,#F7F3EC) url(/assets/motion/bg-flow-light.webp) right bottom/cover no-repeat!important}
.sec-ink.fx-art{background:linear-gradient(90deg,rgba(15,27,45,.96) 0,rgba(15,27,45,.85) 45%,rgba(15,27,45,.35) 80%,rgba(15,27,45,.2)),var(--ink-900,#0F1B2D) url(/assets/motion/bg-flow-dark.webp) right center/cover no-repeat!important}
.cta-band.fx-art{background:linear-gradient(rgba(15,27,45,.7),rgba(15,27,45,.7)),var(--ink-900) url(/assets/motion/bg-flow-dark.webp) center/cover no-repeat!important}
