/* Decorative motion stays inside each card; copy and contact controls stay still. */
.hero-demo{overflow:hidden}
.voice-target{position:relative;display:inline-flex;max-width:100%;isolation:isolate;border-radius:5px}
.voice-effect-mount{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;overflow:hidden}
.voice-contact-shape{height:100%;width:100%;border-radius:5px}
.brief-form>.voice-target{display:flex;width:100%;margin-top:20px}
.brief-form>.voice-target>.button{width:100%;margin-top:0}
@media(max-width:560px){.brief-form>.voice-target>.button{font-size:12px}}
.tiny-browser{animation:browser-float 6s var(--ease-in-out) infinite}
.tiny-phone{animation:phone-float 6s var(--ease-in-out) -3s infinite}
.tiny-browser em{animation:browser-tile 6s var(--ease-in-out) -1.5s infinite}
.tiny-browser b,.tiny-phone span{animation:visual-glow 3s ease-in-out infinite alternate}
.orbit-ring{animation-duration:12s}.ring-two{animation-duration:18s}
.orbit-core{animation:core-float 4s var(--ease-in-out) infinite}
.visual-ripple>i{animation:outward-ripple 3s linear infinite}
.visual-ripple>i:nth-child(2){animation-delay:-1s}
.visual-ripple>i:nth-child(3){animation-delay:-2s}
.visual-ripple>div{animation:offer-float 4s var(--ease-in-out) infinite}
.visual-renew .renew-before{animation:before-float 6s var(--ease-in-out) infinite}
.visual-renew .renew-after{animation:after-float 6s var(--ease-in-out) infinite}
.renew-after>b{position:relative;overflow:hidden}
.renew-after>b:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent,#ddd6fe55,transparent);animation:tile-shine 4s linear infinite}
.photo-motion .hero-photo,.photo-motion>img,.photo-motion .mini-site>img,.photo-motion .professional-content>img{animation:photo-pan 10s var(--ease-in-out) infinite alternate;transform-origin:50% 45%}
.mini-site.photo-motion>img{animation:photo-pan 10s var(--ease-in-out) infinite alternate}
.mini-site.photo-motion .professional-content>img{animation:photo-pan 10s var(--ease-in-out) -3s infinite alternate}
.photo-motion.personal-signature>img,.photo-motion.contact-person>img{animation:avatar-float 5s var(--ease-in-out) infinite}

@keyframes browser-float{0%,100%{transform:translateY(3px) rotate(-3deg)}50%{transform:translateY(-8px) rotate(0deg)}}
@keyframes phone-float{0%,100%{transform:translateY(2px) rotate(6deg)}50%{transform:translateY(-9px) rotate(11deg)}}
@keyframes browser-tile{0%,100%{transform:rotate(10deg) scale(1)}50%{transform:rotate(-8deg) scale(1.08)}}
@keyframes visual-glow{from{opacity:.65}to{opacity:1}}
@keyframes core-float{0%,100%{transform:translateY(3px) scale(.97)}50%{transform:translateY(-4px) scale(1.06)}}
@keyframes outward-ripple{from{transform:translate(-50%,-50%) scale(.58);opacity:.8}to{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
@keyframes offer-float{0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)}}
@keyframes before-float{0%,100%{transform:translateY(8px) rotate(-9deg) scale(.95);opacity:.65}50%{transform:translateY(-6px) rotate(-3deg) scale(1);opacity:1}}
@keyframes after-float{0%,100%{transform:translateY(-7px) rotate(7deg) scale(1.04)}50%{transform:translateY(7px) rotate(2deg) scale(.98)}}
@keyframes tile-shine{0%,20%{transform:translateX(-100%)}65%,100%{transform:translateX(100%)}}
@keyframes photo-pan{from{transform:scale(1.025) translateY(.4%)}to{transform:scale(1.085) translateY(-.4%)}}
@keyframes avatar-float{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}

@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .service-visual *,html:not([data-motion="full"]) .service-visual *:after,html:not([data-motion="full"]) .photo-motion img{animation:none!important}}