/* ===== Movenzo Services Pro: animation + beauty for the services pages ===== */
body.sp{--sp-lime:#b7e35a;--sp-g:#3f9d68}

/* scroll progress line */
.sp-bar{position:fixed;left:0;top:0;width:100%;height:3px;z-index:99999;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#3f9d68,#b7e35a)}

/* hero: entrance + drifting glow */
body.sp .svc-hero .ph-text>*{animation:spUp .7s cubic-bezier(.2,.8,.2,1) both}
body.sp .svc-hero .ph-text>*:nth-child(1){animation-delay:.15s}
body.sp .svc-hero .ph-text>*:nth-child(2){animation-delay:.28s}
body.sp .svc-hero .ph-text>*:nth-child(3){animation-delay:.41s}
body.sp .svc-hero .ph-text>*:nth-child(4){animation-delay:.54s}
body.sp .svc-hero .ph-text>*:nth-child(5){animation-delay:.67s}
body.sp .svc-hero::after{content:"";position:absolute;left:-160px;bottom:-190px;width:460px;height:460px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(63,157,104,.38),transparent 65%);animation:spDrift 9s ease-in-out infinite alternate}
body.sp .svc-hero h1{background:linear-gradient(100deg,#fff 0%,#fff 55%,#b7e35a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.sp .svc-hero .ticks span{transition:transform .25s,background .25s,color .25s}
body.sp .svc-hero .ticks span:hover{transform:translateY(-3px)}

/* hero art: floating icon, pulsing rings, bouncing chip */
body.sp .svc-bigic{position:relative;animation:spFloat 4.5s ease-in-out infinite}
body.sp .svc-bigic::before,body.sp .svc-bigic::after{content:"";position:absolute;inset:-10%;border-radius:36%;border:2px solid rgba(183,227,90,.45);animation:spRing 3.2s ease-out infinite;pointer-events:none}
body.sp .svc-bigic::after{animation-delay:1.6s}
body.sp .svc-chip{animation:spBob 3.6s ease-in-out infinite}
body.sp .svc-mosaic .mo{animation:spFloat 5s ease-in-out infinite}
body.sp .svc-mosaic .mo:nth-child(2){animation-delay:.5s}
body.sp .svc-mosaic .mo:nth-child(3){animation-delay:1s}
body.sp .svc-mosaic .mo:nth-child(4){animation-delay:1.5s}
body.sp .svc-mosaic .mo:nth-child(5){animation-delay:2s}
body.sp .svc-mosaic .mo:nth-child(6){animation-delay:2.5s}

/* service cards (all services page) */
body.sp .svc-cards{counter-reset:sp}
body.sp .svc-card{position:relative;overflow:hidden;counter-increment:sp;border-color:rgba(183,227,90,.2);
  background:radial-gradient(320px circle at var(--mx,85%) var(--my,0%),rgba(183,227,90,.14),transparent 60%),linear-gradient(160deg,rgba(63,157,104,.12),transparent 50%),var(--surface)}
body.sp .svc-card::before{content:"0" counter(sp);position:absolute;right:20px;top:6px;font:800 4.4rem/1 "Bricolage Grotesque",sans-serif;color:rgba(183,227,90,.07);pointer-events:none;transition:color .4s,transform .4s}
body.sp .svc-card::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,#3f9d68,#b7e35a);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
body.sp .svc-card:hover::after{transform:scaleX(1)}
body.sp .svc-card:hover::before{color:rgba(183,227,90,.18);transform:translateY(-4px)}
body.sp .svc-card .ic.mk{transition:transform .4s cubic-bezier(.34,1.5,.64,1),box-shadow .4s}
body.sp .svc-card:hover .ic.mk{transform:scale(1.1) rotate(-6deg);box-shadow:0 0 0 6px rgba(183,227,90,.14),0 14px 28px rgba(0,0,0,.35)}
body.sp .svc-card .checks li{transition:transform .25s}
body.sp .svc-card .checks li:hover{transform:translateX(5px)}

/* single service page */
body.sp .svc-aside{border-color:rgba(183,227,90,.3);background:linear-gradient(180deg,rgba(63,157,104,.14),transparent 55%),var(--surface);position:sticky}
body.sp .svc-aside .btn.p{animation:spPulse 2.6s ease-in-out infinite}
body.sp .svc-aside .aside-tel{display:block;text-align:center;margin-top:12px;font-weight:600;transition:letter-spacing .25s,color .25s}
body.sp .svc-aside .aside-tel:hover{letter-spacing:.03em;color:var(--sp-lime)}
body.sp .svc-copy .inc-h{position:relative;padding-bottom:10px}
body.sp .svc-copy .inc-h::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,#3f9d68,#b7e35a)}
body.sp .svc-copy .checks li{transition:transform .25s,color .25s}
body.sp .svc-copy .checks li:hover{transform:translateX(6px);color:var(--sp-lime)}

/* how it works steps */
body.sp .flow li{transition:transform .3s,border-color .3s,box-shadow .3s}
body.sp .flow li:hover{transform:translateY(-6px);border-color:var(--sp-g);box-shadow:0 18px 34px rgba(0,0,0,.28)}
body.sp .flow li::before{box-shadow:0 0 0 0 rgba(183,227,90,.5);animation:spPing 2.8s ease-out infinite}
body.sp .flow li:nth-child(2)::before{animation-delay:.9s}
body.sp .flow li:nth-child(3)::before{animation-delay:1.8s}

/* city tiles + other services */
body.sp .citytile{position:relative;overflow:hidden}
body.sp .citytile::after{content:"→";position:absolute;right:18px;top:50%;transform:translate(-8px,-50%);opacity:0;color:var(--sp-lime);font-weight:800;transition:transform .3s,opacity .3s}
body.sp .citytile:hover::after{transform:translate(0,-50%);opacity:1}
body.sp .areabox .more{display:inline-block;transition:transform .25s,color .25s}
body.sp .areabox:hover .more{transform:translateX(6px);color:var(--sp-lime)}

/* FAQ: plus icon + soft open */
body.sp details summary{list-style:none;position:relative;padding-right:40px}
body.sp details summary::-webkit-details-marker{display:none}
body.sp details summary::after{content:"+";position:absolute;right:0;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;display:grid;place-items:center;background:rgba(183,227,90,.15);color:var(--sp-lime);font-weight:800;transition:transform .3s,background .3s,color .3s}
body.sp details[open] summary::after{transform:rotate(135deg);background:var(--sp-lime);color:#14231a}
body.sp details[open]>p{animation:spUp .35s ease both}

/* scroll reveal (JS adds .sp-r, then .sp-in) */
html.js body.sp .sp-r{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:var(--spd,0s)}
html.js body.sp .sp-r.sp-in{opacity:1;transform:none}

@keyframes spUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes spFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spRing{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.45);opacity:0}}
@keyframes spDrift{from{transform:translate(0,0)}to{transform:translate(70px,-50px)}}
@keyframes spPulse{0%,100%{box-shadow:0 0 0 0 rgba(183,227,90,.45)}50%{box-shadow:0 0 0 12px rgba(183,227,90,0)}}
@keyframes spPing{0%{box-shadow:0 0 0 0 rgba(183,227,90,.55)}70%,100%{box-shadow:0 0 0 12px rgba(183,227,90,0)}}

@media(max-width:760px){
  body.sp .svc-card::before{font-size:3.2rem}
  body.sp .svc-hero::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.sp *,body.sp *::before,body.sp *::after{animation:none!important}
  html.js body.sp .sp-r{opacity:1!important;transform:none!important;transition:none!important}
}