.svc-split{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(17rem,.85fr);
  gap:1.5rem 2.5rem;
  align-items:start;
  padding:0 4vw 2.5rem;
}
.svc-split .steps li{padding-left:0;padding-right:1rem}
.svc-split .rail,
.svc-split .scroll-row,
.svc-split .mosaic,
.svc-split .strip{
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
}
.svc-split .rail{grid-template-columns:1fr}
.svc-split .scroll-row{grid-template-columns:1fr}
.svc-split .mosaic{grid-template-columns:1fr 1fr}
.svc-split .strip{grid-template-columns:1fr}
.svc-split .scroll-row article{min-height:14rem}
.svc-stage{
  position:sticky;
  top:6.5rem;
  height:min(32rem,72vh);
  border:1px solid hsla(0,0%,100%,.12);
  background:
    radial-gradient(circle at 50% 42%,rgba(45,212,191,.18),transparent 42%),
    radial-gradient(circle at 70% 70%,rgba(108,106,255,.2),transparent 46%),
    #0b0828;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.5rem 1.4rem;
}
.svc-stage__field{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.svc-stage__glow{
  position:absolute;
  left:50%;
  top:42%;
  width:14rem;
  height:14rem;
  margin:-7rem 0 0 -7rem;
  border-radius:50%;
  background:radial-gradient(circle,var(--svc-a,#2dd4bf) 0%,transparent 68%);
  opacity:.45;
  filter:blur(8px);
  animation:svc-pulse 3.6s ease-in-out infinite;
}
.svc-stage__core{
  position:absolute;
  left:50%;
  top:42%;
  width:7.2rem;
  height:7.2rem;
  margin:-3.6rem 0 0 -3.6rem;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#fff,transparent 28%),
    radial-gradient(circle at 50% 50%,var(--svc-a,#2dd4bf),var(--svc-b,#6c6aff) 70%,#08051f 100%);
  box-shadow:0 0 40px rgba(45,212,191,.35);
  animation:svc-float 5.5s ease-in-out infinite;
}
.svc-stage__ring,
.svc-stage__orbit{
  position:absolute;
  left:50%;
  top:42%;
  border:1px solid rgba(45,212,191,.35);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.svc-stage__ring{
  width:12.5rem;
  height:12.5rem;
  animation:svc-spin 14s linear infinite;
  border-top-color:var(--svc-a,#2dd4bf);
  border-right-color:transparent;
}
.svc-stage__ring--2{
  width:16.5rem;
  height:16.5rem;
  animation-duration:22s;
  animation-direction:reverse;
  border-color:rgba(108,106,255,.25);
  border-bottom-color:var(--svc-b,#6c6aff);
}
.svc-stage__orbit{
  width:19.5rem;
  height:19.5rem;
  border-color:transparent;
  animation:svc-spin 10s linear infinite;
}
.svc-stage__orbit i{
  position:absolute;
  top:-4px;
  left:50%;
  width:8px;
  height:8px;
  margin-left:-4px;
  border-radius:50%;
  background:var(--svc-a,#2dd4bf);
  box-shadow:0 0 12px var(--svc-a,#2dd4bf);
}
.svc-stage__dot{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  opacity:.7;
  animation:svc-drift 6s ease-in-out infinite;
}
.svc-stage__dot.d1{left:18%;top:22%;animation-delay:-.6s}
.svc-stage__dot.d2{right:16%;top:30%;width:4px;height:4px;animation-delay:-1.8s;background:var(--svc-a,#2dd4bf)}
.svc-stage__dot.d3{left:22%;bottom:28%;animation-delay:-2.4s;background:var(--svc-b,#6c6aff)}
.svc-stage__dot.d4{right:24%;bottom:22%;width:5px;height:5px;animation-delay:-3.2s}
.svc-stage__copy{position:relative;z-index:1}
.svc-stage__kicker{
  margin:0 0 .35rem;
  font-family:Azonix,sans-serif;
  font-size:1.1rem;
  color:var(--svc-a,#2dd4bf);
  letter-spacing:.08em;
}
.svc-stage__title{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:1.15rem;
  line-height:1.35;
  max-width:18ch;
}
.svc-split[data-active="0"]{--svc-a:#2dd4bf;--svc-b:#6c6aff}
.svc-split[data-active="1"]{--svc-a:#6c6aff;--svc-b:#2dd4bf}
.svc-split[data-active="2"]{--svc-a:#ff658b;--svc-b:#6c6aff}
.svc-split[data-active="3"]{--svc-a:#2dd4bf;--svc-b:#ff658b}
.svc-split[data-active="4"]{--svc-a:#6c6aff;--svc-b:#ff658b}
.svc-split[data-active="5"]{--svc-a:#2dd4bf;--svc-b:#6c6aff}
.svc-split .steps li.is-active,
.svc-split .rail article.is-active,
.svc-split .scroll-row article.is-active,
.svc-split .mosaic article.is-active,
.svc-split .strip > div.is-active,
.svc-split .approach-grid article.is-active{
  background:rgba(45,212,191,.05);
}
@media (max-width:900px){
  .svc-split{grid-template-columns:1fr}
  .svc-stage{position:relative;top:auto;height:18rem;margin-bottom:1rem}
}

@keyframes svc-pulse{
  0%,100%{transform:scale(.92);opacity:.32}
  50%{transform:scale(1.12);opacity:.55}
}
@keyframes svc-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes svc-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes svc-drift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

@media (prefers-reduced-motion: no-preference) {
  .is-svc .svc-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--d, 0ms);
  }
  .is-svc .svc-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .is-svc .steps {
    position: relative;
  }
  .is-svc .steps:before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(45,212,191,.75), rgba(45,212,191,.08));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.15s cubic-bezier(.22,1,.36,1) .15s;
    pointer-events: none;
  }
  .is-svc .steps.is-in:before {
    transform: scaleY(1);
  }
  .is-svc .steps li {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1), background .35s ease;
    transition-delay: var(--d, 0ms);
  }
  .is-svc .steps li.is-in {
    opacity: 1;
    transform: none;
  }
  .is-svc .steps li:before {
    transition: color .35s ease, text-shadow .35s ease, transform .35s ease;
  }
  .is-svc .steps li.is-in:before {
    animation: svc-num-in .7s cubic-bezier(.22,1,.36,1) both;
    animation-delay: var(--d, 0ms);
  }
  .is-svc .steps li:hover {
    background: rgba(45,212,191,.045);
  }
  .is-svc .steps li:hover:before {
    color: #7ff6e4;
    text-shadow: 0 0 18px rgba(45,212,191,.45);
    transform: translateY(-2px);
  }

  .is-svc .feature-card,
  .is-svc .rail article,
  .is-svc .scroll-row article,
  .is-svc .mosaic article,
  .is-svc .strip > div,
  .is-svc .mag-side article,
  .is-svc .metric-board > div {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
    transition-delay: var(--d, 0ms);
  }
  .is-svc .feature-card.is-in,
  .is-svc .rail article.is-in,
  .is-svc .scroll-row article.is-in,
  .is-svc .mosaic article.is-in,
  .is-svc .strip > div.is-in,
  .is-svc .mag-side article.is-in,
  .is-svc .metric-board > div.is-in {
    opacity: 1;
    transform: none;
  }
  .is-svc .feature-card.is-in:hover,
  .is-svc .scroll-row article.is-in:hover,
  .is-svc .mosaic article.is-in:hover {
    border-color: rgba(45,212,191,.55);
    box-shadow: 0 16px 40px rgba(8,5,31,.35);
    transform: translateY(-4px);
  }

}

.is-svc .steps h2,
.is-svc .steps p {
  font-family: "Segoe UI", Arial, sans-serif;
  word-spacing: normal;
}

@keyframes svc-num-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.86);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
