/* Service hero visuals (copied from the design sources: V2-Svc-*.dc.html). Loops pause off-screen via [data-fx-loop]. */
.vs, .fx-stage { --blue: #5B2BD9; --blue-soft: #EEEBFE; --orange: #EE5A3A; --orange-soft: #FFE8E2; --surface: #fff; }
.vs .v-tag{padding: 5px 10px; border-radius: 999px; background: #EEEBFE; color: #4A1FC0; font-size: 12px; font-weight: 600}
.vs .v-chip{animation:vChip 8s cubic-bezier(.2,.8,.2,1) infinite both}
@keyframes vChip{0%{opacity:0;transform:translateY(10px) scale(.95)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}
.wb{animation:wbIn 8s cubic-bezier(.2,.8,.2,1) infinite both}.wb1{animation-delay:.1s}.wb2{animation-delay:.4s}.wb3{animation-delay:.7s}.wb4{animation-delay:1s}
@keyframes wbIn{0%{opacity:0;transform:translateY(14px)}6%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.wp-type{animation:wpType 8s steps(24) infinite both}
@keyframes wpType{0%,8%{max-width:0}38%,100%{max-width:300px}}
.wp-caret{animation:wpCaret .9s steps(1) infinite}@keyframes wpCaret{50%{opacity:0}}
.wp-btn{animation:wpBtn 8s ease-in-out infinite}@keyframes wpBtn{0%,44%,56%,100%{transform:none}48%{transform:scale(.92)}}
.wp-toast{animation:wpToast 8s cubic-bezier(.2,.8,.2,1) infinite both}@keyframes wpToast{0%,50%{opacity:0;transform:translate(-50%,14px)}56%,88%{opacity:1;transform:translate(-50%,0)}95%,100%{opacity:0;transform:translate(-50%,0)}}
.sh-btn{animation:shBtn 7s ease-in-out infinite}@keyframes shBtn{0%,20%,30%,100%{transform:none}24%{transform:scale(.94)}}
.sh-n0{animation:shN0 7s steps(1) infinite}.sh-n1{animation:shN1 7s steps(1) infinite}
@keyframes shN0{0%,25%{opacity:1}26%,100%{opacity:0}}@keyframes shN1{0%,25%{opacity:0}26%,95%{opacity:1}96%,100%{opacity:0}}
.sh-toast{animation:shToast 7s cubic-bezier(.2,.8,.2,1) infinite both}@keyframes shToast{0%,40%{opacity:0;transform:translateY(16px)}48%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
.rd-new{animation:rdClip 7s cubic-bezier(.6,0,.3,1) infinite}@keyframes rdClip{0%,10%{clip-path:inset(0 0 0 100%)}45%,62%{clip-path:inset(0 0 0 0%)}90%,100%{clip-path:inset(0 0 0 100%)}}
.rd-line{animation:rdLine 7s cubic-bezier(.6,0,.3,1) infinite}@keyframes rdLine{0%,10%{left:100%}45%,62%{left:0%}90%,100%{left:100%}}
.cr-b{animation:crB 3s ease-in-out infinite}@keyframes crB{0%,100%{opacity:.9}50%{opacity:.55}}
.cr-r{animation:crR 8s cubic-bezier(.2,.8,.2,1) infinite both}@keyframes crR{0%{opacity:0;transform:translateX(-10px)}6%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.sk-line{stroke-dasharray:100;animation:skL 8s cubic-bezier(.4,0,.2,1) infinite}@keyframes skL{0%{stroke-dashoffset:100}35%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.sk-area{animation:skA 8s ease infinite}@keyframes skA{0%,20%{opacity:0}40%,90%{opacity:1}100%{opacity:0}}
.sk-dot{transform-box:fill-box;transform-origin:center;animation:skD 8s ease infinite}@keyframes skD{0%,32%{transform:scale(0)}38%{transform:scale(1.4)}42%,90%{transform:scale(1)}100%{transform:scale(0)}}
.sk-a{animation:skNa 8s steps(1) infinite}.sk-b{animation:skNb 8s steps(1) infinite}
@keyframes skNa{0%,40%{opacity:1}41%,100%{opacity:0}}@keyframes skNb{0%,40%{opacity:0}41%,95%{opacity:1}96%,100%{opacity:0}}
.lc-you{animation:lcY 8s cubic-bezier(.2,.8,.2,1) infinite}.lc-a{animation:lcA 8s cubic-bezier(.2,.8,.2,1) infinite}.lc-b{animation:lcB 8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes lcY{0%,25%{transform:translateY(124px)}40%,90%{transform:translateY(0)}100%{transform:translateY(124px)}}
@keyframes lcA{0%,25%{transform:translateY(0)}40%,90%{transform:translateY(62px)}100%{transform:translateY(0)}}
@keyframes lcB{0%,25%{transform:translateY(62px)}40%,90%{transform:translateY(124px)}100%{transform:translateY(62px)}}
.ai-q{animation:aiQ 9s cubic-bezier(.2,.8,.2,1) infinite both}@keyframes aiQ{0%{opacity:0;transform:translateY(10px)}6%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
.ai-typing{animation:aiT 9s infinite both}@keyframes aiT{0%,10%{opacity:0}14%,30%{opacity:1}33%,100%{opacity:0}}
.ai-d{animation:aiD 1s ease-in-out infinite}@keyframes aiD{50%{transform:translateY(-3px);opacity:.4}}
.ai-a{animation:aiA 9s cubic-bezier(.2,.8,.2,1) infinite both}@keyframes aiA{0%,32%{opacity:0;transform:translateY(10px)}38%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
.gb-1{animation:gb1 8s cubic-bezier(.2,.8,.2,1) infinite}.gb-2{animation:gb2 8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes gb1{0%{opacity:0;transform:translateY(16px)}6%,44%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes gb2{0%,50%{opacity:0;transform:translateY(16px)}56%,94%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
.gb-reply{animation:gbR 8s cubic-bezier(.2,.8,.2,1) infinite both}@keyframes gbR{0%,18%{opacity:0;transform:translateY(10px)}24%,44%{opacity:1;transform:none}50%,68%{opacity:0}74%,94%{opacity:1;transform:none}100%{opacity:0}}
.pp-b{transform-origin:left center;animation:ppB 8s cubic-bezier(.2,.8,.2,1) infinite both}@keyframes ppB{0%{transform:scaleX(0)}20%,90%{transform:none}100%{transform:scaleX(0)}}
.pp-social{animation:ppS 6s ease-in-out infinite}@keyframes ppS{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.so-p{animation:soP 8s cubic-bezier(.2,.8,.2,1) infinite both}@keyframes soP{0%{opacity:0;transform:scale(.6)}8%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.so-phone{animation:ppS 7s ease-in-out infinite}
.so-badge{animation:wpToastB 8s cubic-bezier(.2,.8,.2,1) infinite both}@keyframes wpToastB{0%,45%{opacity:0;transform:translateY(10px)}52%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.br-g{stroke-dasharray:100;animation:brG 8s cubic-bezier(.4,0,.2,1) infinite}@keyframes brG{0%{stroke-dashoffset:100}20%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.br-mark{animation:brM 8s cubic-bezier(.3,1.4,.5,1) infinite both}@keyframes brM{0%,8%{transform:scale(.5) rotate(-20deg);opacity:0}20%,92%{transform:none;opacity:1}100%{opacity:0}}
.br-sw{transform-origin:bottom;animation:brS 8s cubic-bezier(.2,.8,.2,1) infinite both}@keyframes brS{0%,10%{transform:scaleY(0)}22%,92%{transform:none}100%{transform:scaleY(0)}}
.br-card{animation:ppS 6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.wp-type{max-width:300px}.rd-new{clip-path:none}.sh-n0{opacity:0}.ai-typing,.gb-2{opacity:0}}

/* Hero visual "ai-automation" (visuals/ai-automation.php): rows light up one after another. */
.fx-aiv__row { animation: fxFlowRow 10s ease-out infinite both; }
@keyframes fxFlowRow { 0% { opacity: .3; } 5%, 58% { opacity: 1; } 68%, 100% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .fx-aiv__row { opacity: 1 !important; } }