/* Service pages: motion and graphics */
.sh{position:relative;overflow:hidden;min-height:min(88vh,860px);display:flex;align-items:center;padding:110px 0 120px;border-bottom:1px solid var(--line);isolation:isolate}
.sh-bg{position:absolute;inset:-6%;background-size:cover;background-position:center;z-index:-3;filter:saturate(.75) brightness(.8);animation:shKb 24s ease-in-out infinite alternate;will-change:transform}
@keyframes shKb{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.18) translate3d(-2.5%,-2%,0)}}
.sh:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(100deg,rgba(10,22,38,.97) 0%,rgba(10,22,38,.88) 42%,rgba(10,22,38,.55) 75%,rgba(10,22,38,.75) 100%),radial-gradient(circle at 80% 40%,rgba(242,176,53,.18),transparent 45%)}
.sh-grid{position:absolute;inset:0;z-index:-1;opacity:.35;background-image:linear-gradient(rgba(201,212,227,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(201,212,227,.07) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(circle at 70% 50%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(circle at 70% 50%,#000 10%,transparent 70%);animation:shGrid 18s linear infinite}
@keyframes shGrid{to{background-position:56px 56px,56px 56px}}
.sh-in{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.sh h1{font-size:clamp(2.4rem,5.4vw,4.4rem)}
.sh h1 .w{display:inline-block;opacity:0;transform:translateY(28px) rotate(2deg);animation:shWord .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.15s + var(--i)*.09s)}
@keyframes shWord{to{opacity:1;transform:none}}
.sh .lead,.sh .btns,.sh-trust{opacity:0;animation:shFade .9s ease forwards}
.sh .lead{animation-delay:.6s}.sh .btns{animation-delay:.8s}.sh-trust{animation-delay:1s}
@keyframes shFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sh-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.sh-trust span{font-size:.82rem;font-weight:700;color:#fff;padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:rgba(10,22,38,.55);backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:8px}
.sh-trust span:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(242,176,53,.7);animation:shPing 2.2s infinite}
@keyframes shPing{70%{box-shadow:0 0 0 9px rgba(242,176,53,0)}100%{box-shadow:0 0 0 0 rgba(242,176,53,0)}}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.35);border-radius:14px}
.scroll-cue:after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--amber);animation:shCue 1.8s infinite}
@keyframes shCue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Orbit graphic */
.orbit{position:relative;width:min(440px,82vw);aspect-ratio:1;margin:auto;opacity:0;animation:shFade 1.2s .4s ease forwards}
.orbit .ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(201,212,227,.28)}
.orbit .r1{animation:spin 40s linear infinite}
.orbit .r2{inset:12%;border:1px solid rgba(242,176,53,.35);border-left-color:transparent;border-bottom-color:transparent;animation:spin 9s linear infinite reverse}
.orbit .r3{inset:24%;border:2px solid rgba(242,176,53,.18);border-top-color:var(--amber);animation:spin 5s linear infinite}
.orbit .r1:before,.orbit .r2:before{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--amber);box-shadow:0 0 18px var(--amber)}
.orbit .r2:before{top:auto;bottom:14%;left:6%;width:7px;height:7px;background:#fff;box-shadow:0 0 14px #fff}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .core{position:absolute;inset:33%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#1E3A5F,#0B1A2E 70%);border:1px solid rgba(242,176,53,.45);box-shadow:0 0 0 10px rgba(242,176,53,.06),0 0 60px rgba(242,176,53,.25);overflow:hidden;animation:corePulse 3.2s ease-in-out infinite}
@keyframes corePulse{50%{box-shadow:0 0 0 18px rgba(242,176,53,.03),0 0 80px rgba(242,176,53,.4)}}
.orbit .core svg{width:42%;height:42%;color:var(--amber);position:relative;z-index:2;filter:drop-shadow(0 0 10px rgba(242,176,53,.5))}
.orbit .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(242,176,53,.55),rgba(242,176,53,0) 70deg,transparent 360deg);animation:spin 3s linear infinite;z-index:1}
.orbit .track{position:absolute;inset:0;animation:spin 60s linear infinite}
.orbit .chip{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(min(440px,82vw) * -.5)) rotate(calc(var(--a) * -1))}
.orbit .chip span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:.78rem;font-weight:700;color:#fff;padding:8px 13px;border-radius:99px;background:rgba(19,41,74,.92);border:1px solid rgba(242,176,53,.4);box-shadow:0 10px 30px rgba(0,0,0,.35);animation:spinBack 60s linear infinite}
@keyframes spinBack{from{rotate:0deg}to{rotate:-360deg}}
.ph-wrap .badge{position:absolute;right:-26px;top:-26px;width:116px;aspect-ratio:1;z-index:3;animation:spin 16s linear infinite;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}
.ph-wrap .badge text{font:800 10px Montserrat,Inter,sans-serif;fill:var(--amber);text-transform:uppercase}
.ph-wrap .badge circle.bg{fill:rgba(10,22,38,.85);stroke:rgba(242,176,53,.35)}

/* Feature marquee */
.mq{overflow:hidden;border-bottom:1px solid var(--line);background:#081322;padding:18px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:46px;width:max-content;animation:mq 32s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track span{font-family:Montserrat,Inter,sans-serif;font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:.02em;display:inline-flex;align-items:center;gap:46px;white-space:nowrap}
.mq-track span:after{content:"";width:9px;height:9px;transform:rotate(45deg);background:var(--amber)}
@keyframes mq{to{transform:translateX(-50%)}}

/* Photo panel: tilt + sheen + floating badge */
.tilt{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.ph-wrap{position:relative}
.ph-wrap .panel.ph{position:relative}
.ph-wrap .panel.ph:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 6s ease-in-out infinite 1.5s;pointer-events:none}
@keyframes sheen{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.ph-tag{position:absolute;left:-18px;bottom:28px;z-index:3;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:rgba(10,22,38,.92);border:1px solid rgba(242,176,53,.4);box-shadow:0 18px 40px rgba(0,0,0,.4);backdrop-filter:blur(8px);animation:float 5s ease-in-out infinite}
.ph-tag b{color:#fff;display:block;font-size:.95rem}.ph-tag small{color:var(--grey);font-size:.78rem}
.ph-tag i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--navy);font-style:normal;flex:none}
.ph-tag i svg{width:20px;height:20px}
@keyframes float{50%{transform:translateY(-10px)}}

/* How it works: drawing line */
.hsteps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:46px}
.hsteps svg.line{position:absolute;left:8%;right:8%;top:34px;width:84%;height:4px;overflow:visible}
.hsteps svg.line path{stroke:var(--amber);stroke-width:2.5;fill:none;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.2s cubic-bezier(.6,0,.2,1) .2s}
.hsteps.in svg.line path{stroke-dashoffset:0}
.hstep{position:relative;text-align:center;padding:0 10px}
.hstep .num{position:relative;z-index:1;width:68px;height:68px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font:800 1.5rem Montserrat,Inter,sans-serif;color:var(--navy);background:var(--amber);box-shadow:0 0 0 8px rgba(242,176,53,.12);transform:scale(.4);opacity:0;transition:transform .7s cubic-bezier(.3,1.6,.5,1),opacity .4s}
.hsteps.in .hstep .num{position:relative;z-index:1;transform:none;opacity:1}
.hsteps.in .hstep:nth-child(3) .num{transition-delay:.5s}.hsteps.in .hstep:nth-child(4) .num{transition-delay:1.1s}
.hstep h3{margin-bottom:8px}
.hstep p{font-size:.98rem}

/* Card spotlight */
.spot{position:relative;overflow:hidden}
.spot:before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,-40%),rgba(242,176,53,.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.spot:hover:before{opacity:1}

@media (max-width:900px){
.sh{min-height:auto;padding:70px 0 100px}
.sh-in{grid-template-columns:1fr;gap:40px}
.orbit{width:min(280px,62vw);margin:20px auto}
.orbit .chip{transform:rotate(var(--a)) translateY(calc(min(280px,62vw) * -.5)) rotate(calc(var(--a) * -1))}
.orbit .chip span{font-size:.7rem;padding:6px 10px}
.hsteps{grid-template-columns:1fr;gap:34px}
.hsteps svg.line{display:none}
.ph-tag{left:12px;bottom:12px}.ph-wrap .badge{width:92px;right:6px;top:-30px}
}
@media (prefers-reduced-motion:reduce){
.sh-bg,.sh-grid,.orbit *,.orbit,.ph-wrap .badge,.mq-track,.ph-tag,.ph-wrap .panel.ph:after,.scroll-cue:after,.sh-trust span:before{animation:none!important}
.sh h1 .w,.sh .lead,.sh .btns,.sh-trust,.orbit{opacity:1!important;transform:none!important;animation:none!important}
.hsteps svg.line path{stroke-dashoffset:0;transition:none}.hstep .num{position:relative;z-index:1;transform:none;opacity:1;transition:none}
.tilt{transform:none!important}
}