.services-intro{--deep:#25123F;position:relative;isolation:isolate;overflow:hidden;min-height:570px;height:min(760px,82svh);background:#25123f;color:#fff}
.intro-character{position:absolute;top:4%;right:1%;width:62%;height:92%;object-fit:contain;object-position:right center;opacity:0;z-index:1;filter:none;transition:opacity .25s ease}
.services-intro[data-state="arriving"] .intro-character,.services-intro[data-state="cards"] .intro-character,.services-intro[data-state="ready"] .intro-character,.services-intro[data-state="departing"] .intro-character{opacity:1}
.intro-video-tint{position:absolute;top:4%;right:1%;width:62%;height:92%;z-index:2;pointer-events:none;background:linear-gradient(90deg,#25123f 0%,#25123ff2 14%,#25123fbd 30%,transparent 57%,transparent 76%,#25123f 100%),linear-gradient(180deg,#25123f 0%,#25123fe8 15%,#25123f9c 34%,transparent 56%,transparent 82%,#25123f 100%);opacity:1;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);mask-image:radial-gradient(ellipse at center,transparent 28%,#000 71%);-webkit-mask-image:radial-gradient(ellipse at center,transparent 28%,#000 71%)}
.intro-content{position:absolute;inset:0;z-index:3;max-width:1440px;margin:auto}
.intro-copy{position:absolute;left:7%;top:50%;transform:translateY(-50%);width:min(390px,34vw);text-shadow:0 2px 16px #16092480}.intro-packages-title{margin:0 0 13px;color:#fff;font:800 clamp(22px,2.3vw,30px)/1.15 Manrope,sans-serif;letter-spacing:-.035em}.intro-copy .eyebrow{color:#f3a6d0}.intro-copy h2{margin:0;color:#fff;font:800 clamp(30px,3.4vw,46px)/1.08 Manrope,sans-serif;letter-spacing:-.045em}.intro-copy h2 span{color:#eca2d0}.intro-welcome{max-width:390px;margin:14px 0 0;color:#f0e9f7;font-size:13px;line-height:1.75}.intro-hint{margin:12px 0 0;color:#f3a6d0;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.intro-play{margin-top:12px;padding:10px 15px;border:1px solid #ffffff80;border-radius:9px;background:#7436c8;color:#fff;font-weight:800;cursor:pointer}
.service-orbit{position:absolute;inset:0;z-index:3;pointer-events:none}.service-orbit-item{--x:50%;--y:65%;position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px;width:104px;min-height:108px;padding:7px 6px;border:1px solid #ffffff62;border-radius:16px;background:linear-gradient(150deg,#ffffff30,#ffffff12);box-shadow:0 10px 28px #12072355,inset 0 1px #ffffff55;backdrop-filter:blur(8px);color:#fff;text-align:center;cursor:pointer;pointer-events:none;visibility:hidden;opacity:0;transform:translate(-50%,-50%) scale(.12);transform-origin:center;will-change:left,top,transform,opacity;transition:box-shadow .2s,background .2s}
.service-orbit-item img{display:block;width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 4px 7px #11061e70)}.service-orbit-item span{font-size:9px;font-weight:800;line-height:1.15;text-shadow:0 1px 6px #1b0b2a}
.service-orbit-item:hover,.service-orbit-item:focus-visible{z-index:5;background:#7436c8ba;box-shadow:0 0 0 2px #f3a6d0,0 0 25px #b65ef4b0,0 12px 30px #10051e88}
.service-orbit-item.internet{--x:54%;--y:48%}.service-orbit-item.cctv{--x:73%;--y:34%}.service-orbit-item.solar{--x:91%;--y:48%}.service-orbit-item.web{--x:54%;--y:70%}.service-orbit-item.cyber{--x:73%;--y:69%}.service-orbit-item.dstv{--x:91%;--y:70%}
.services-intro[data-state="cards"] .service-orbit-item{visibility:visible;pointer-events:none;animation:service-fly-out .5s cubic-bezier(.18,.92,.25,1.22) both;animation-delay:calc(.04s + var(--i)*.08s)}
.services-intro[data-state="ready"] .service-orbit-item{visibility:visible;pointer-events:auto;left:var(--x);top:var(--y);opacity:1;transform:translate(-50%,-50%)}
.services-intro[data-state="departing"] .service-orbit-item{visibility:visible;pointer-events:none}.services-intro[data-state="departing"] .service-orbit-item:not(.is-selected){animation:service-return .55s cubic-bezier(.6,0,.9,.45) both;animation-delay:calc(var(--i)*.055s)}.services-intro[data-state="departing"] .service-orbit-item.is-selected{animation:selected-dock .55s cubic-bezier(.2,.75,.3,1) both}
.services-intro[data-state="complete"] .service-orbit-item{visibility:hidden;opacity:0;pointer-events:none}
.redirect-status{position:absolute;left:62%;top:3%;bottom:auto;z-index:6;display:none;align-items:center;gap:9px;max-width:calc(100% - 24px);padding:11px 17px;border:1px solid #ffffff70;border-radius:999px;background:#25123fdb;box-shadow:0 8px 24px #12072370;color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em;transform:translateX(-35%);white-space:nowrap;backdrop-filter:blur(6px)}
.services-intro[data-state="departing"] .redirect-status{display:flex}.redirect-dots{display:inline-flex;align-items:center;gap:3px;height:12px}.redirect-dots i{width:5px;height:5px;border-radius:50%;background:#f3a6d0;animation:redirect-dot .9s ease-in-out infinite}.redirect-dots i:nth-child(2){animation-delay:.15s}.redirect-dots i:nth-child(3){animation-delay:.3s}
@keyframes redirect-dot{0%,60%,100%{opacity:.28;transform:translateY(1px)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes service-fly-out{0%{left:var(--bag-x,70%);top:var(--bag-y,75%);opacity:0;transform:translate(-50%,-50%) rotate(-35deg) scale(.12)}62%{left:var(--x);top:var(--y);opacity:1;transform:translate(-50%,-50%) rotate(9deg) scale(1.1)}82%{transform:translate(-50%,-50%) rotate(-3deg) scale(.96)}100%{left:var(--x);top:var(--y);opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}}
@keyframes service-return{0%{left:var(--x);top:var(--y);opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{left:var(--bag-x,70%);top:var(--bag-y,75%);opacity:0;transform:translate(-50%,-50%) rotate(540deg) scale(.08)}}
@keyframes selected-dock{0%{left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(1)}100%{left:92%;top:13%;transform:translate(-50%,-50%) scale(.72)}}
@media(max-width:900px){.services-intro{min-height:560px;height:min(700px,84svh)}.intro-character{right:0;width:68%;height:90%}.intro-video-tint{top:4%;right:0;width:68%;height:90%}.intro-copy{left:5%;width:37vw}.service-orbit-item{width:94px;min-height:98px}.service-orbit-item img{width:60px;height:60px}.service-orbit-item.internet{--x:53%;--y:48%}.service-orbit-item.cctv{--x:73%;--y:34%}.service-orbit-item.solar{--x:92%;--y:48%}.service-orbit-item.web{--x:53%;--y:70%}.service-orbit-item.cyber{--x:73%;--y:69%}.service-orbit-item.dstv{--x:92%;--y:70%}}
@media(max-width:600px){.services-intro{--bag-x:50%;--bag-y:75%;height:100svh;min-height:620px;max-height:850px}.intro-character{top:auto;right:0;bottom:0;width:100%;height:58%;object-position:center bottom}.intro-video-tint{top:auto;right:0;bottom:0;width:100%;height:58%}.intro-copy{top:5%;left:5%;width:90%;transform:none;text-align:center}.intro-packages-title{margin-bottom:9px;font-size:22px}.intro-copy .eyebrow{margin-bottom:9px;font-size:9px}.intro-copy h2{font-size:clamp(27px,8vw,36px)}.intro-welcome{margin:9px auto 0;max-width:360px;font-size:11px;line-height:1.55}.intro-hint{font-size:9px}.service-orbit-item{width:78px;min-height:79px;padding:4px 3px;gap:1px;border-radius:13px}.service-orbit-item img{width:49px;height:49px}.service-orbit-item span{font-size:8px}.service-orbit-item.internet{--x:19%;--y:41%}.service-orbit-item.cctv{--x:50%;--y:36%}.service-orbit-item.solar{--x:81%;--y:41%}.service-orbit-item.web{--x:19%;--y:59%}.service-orbit-item.cyber{--x:50%;--y:56%}.service-orbit-item.dstv{--x:81%;--y:59%}.services-intro[data-state="departing"] .service-orbit-item.is-selected{animation:selected-dock-mobile .55s cubic-bezier(.2,.75,.3,1) both}.redirect-status{left:46%;top:39.5%;bottom:auto;transform:translateX(-50%);font-size:10px;padding:10px 14px}}
@keyframes selected-dock-mobile{0%{left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(1)}100%{left:83%;top:15%;transform:translate(-50%,-50%) scale(.68)}}
@media(max-width:370px){.service-orbit-item{width:73px;min-height:75px}.service-orbit-item img{width:46px;height:46px}.service-orbit-item.internet,.service-orbit-item.web{--x:17%}.service-orbit-item.solar,.service-orbit-item.dstv{--x:83%}}
@media(prefers-reduced-motion:reduce){.services-intro[data-state="cards"] .service-orbit-item,.services-intro[data-state="departing"] .service-orbit-item{animation-duration:.01ms;animation-delay:0ms}.redirect-dots i{animation:none;opacity:1}.intro-character{transition:none}}
#services .service-card.is-selected-service{position:relative;border:2px solid var(--purple);box-shadow:0 0 0 5px #7436c82b,0 18px 45px #32107835;scroll-margin-top:110px}
#services .service-selection-note{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:9px 12px;border-radius:8px;background:var(--purple);color:#fff;font-size:11px;font-weight:800;box-shadow:0 5px 16px #7436c83a}
#services .service-card.is-selected-service .service-selection-note:after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}

/* Phone-only character and card framing adjustments. */
@media(max-width:600px){
  .services-intro::before{content:"";position:absolute;z-index:0;right:0;bottom:8%;width:100%;height:68%;pointer-events:none;background:radial-gradient(ellipse at 58% 14%,#4b2b69 0%,#3f245c 34%,#35204e 61%,#25123f 100%)}
  .intro-character{bottom:8%}
  .intro-video-tint{bottom:8%;height:68%;background:linear-gradient(180deg,#4b2b69 0%,#422660 20%,#3a2158 36%,rgba(53,32,78,.82) 48%,rgba(37,18,63,.28) 68%,transparent 84%,#25123f 100%),linear-gradient(90deg,#25123f 0%,#25123fc9 12%,transparent 42%,transparent 72%,#25123f 100%);mask-image:linear-gradient(180deg,#000 0%,#000 8%,rgba(0,0,0,.88) 20%,transparent 51%,transparent 80%,#000 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 8%,rgba(0,0,0,.88) 20%,transparent 51%,transparent 80%,#000 100%)}
  .service-orbit-item{width:64px;min-height:66px;padding:3px 2px;gap:2px;border-radius:11px}
  .service-orbit-item img{width:40px;height:40px}
  .service-orbit-item span{font-size:7px}
}
@media(max-width:370px){
  .service-orbit-item{width:60px;min-height:62px}
  .service-orbit-item img{width:36px;height:36px}
}
@media(max-width:600px){
  .services-intro::before{top:8%;right:0;bottom:8%;width:100%;height:auto;background:radial-gradient(ellipse at 52% 50%,#4b2b69 0%,#3f245c 38%,#35204e 67%,#25123f 100%)}
  .intro-character{top:12%;right:0;bottom:auto;width:100%;height:76%;object-position:center center}
  .intro-video-tint{top:8%;right:0;bottom:8%;width:100%;height:auto;background:linear-gradient(180deg,#25123f 0%,#3b2158 14%,rgba(59,33,88,.78) 25%,rgba(37,18,63,.12) 43%,transparent 57%,rgba(37,18,63,.18) 64%,rgba(37,18,63,.72) 76%,#25123f 88%,#25123f 100%),linear-gradient(90deg,#25123f 0%,rgba(37,18,63,.72) 12%,transparent 36%,transparent 66%,rgba(37,18,63,.72) 88%,#25123f 100%);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);mask-image:radial-gradient(ellipse at center,transparent 31%,rgba(0,0,0,.65) 73%,#000 100%);-webkit-mask-image:radial-gradient(ellipse at center,transparent 31%,rgba(0,0,0,.65) 73%,#000 100%)}
  .service-orbit-item.cctv{--x:50%;--y:31%}
  .service-orbit-item.internet,.service-orbit-item.solar{--y:40%}
  .service-orbit-item.web,.service-orbit-item.cyber,.service-orbit-item.dstv{--y:69%}
}