/* =====================================================================
   Services deck: pinned, cards stack on scroll, each with a live visual.
   ===================================================================== */
.deck { background: #0B0930; color: #fff; }
.deck__stage { height: 100svh; box-sizing: border-box; display: grid; grid-template-columns: minmax(15rem, 22rem) 1fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center; padding: 5.5rem var(--sc-gutter) 2.5rem; overflow: hidden;
  background: radial-gradient(50rem 30rem at 70% 40%, rgba(68,48,233,.22), transparent 65%), #0B0930; }
.deck__side h2 { margin: 0; font-weight: 900; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.04; }
.deck__side > p { color: #B4B1CC; margin: 0.8rem 0 1.8rem; font-size: 1.05rem; line-height: 1.6; }
.deck__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.deck__list li { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.8rem; border-radius: 12px; color: #8C89A8; font-weight: 500;
  transition: color 300ms ease, background-color 300ms ease, transform 300ms ease; }
.deck__list li .num { font-size: 0.85rem; color: #5E5A80; transition: color 300ms ease; }
.deck__list li.on { color: #fff; background: rgba(140,125,244,.14); transform: translateX(-6px); }
.deck__list li.on .num { color: var(--brand-300); }
.deck__cards { position: relative; height: min(66svh, 34rem); }
.deck__card { position: absolute; inset: 0; border-radius: 32px; padding: clamp(1.6rem, 3vw, 2.8rem); display: grid; grid-template-columns: 1fr 1.05fr; gap: 2rem; align-items: center;
  background: radial-gradient(36rem 24rem at 15% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(150deg, var(--tint), #0E0B33 120%);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 50px 100px -40px rgba(0,0,0,.8); transform-origin: 50% 0; will-change: transform, filter; }
.deck__card:not(:first-child) { transform: translateY(115%); }
.deck__k { display: inline-block; color: var(--brand-200); font-size: 1.1rem; letter-spacing: 0.08em; }
.deck__card h3 { margin: 0.6rem 0 0.9rem; font-weight: 900; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.04; }
.deck__card p { margin: 0 0 1.6rem; color: #DCD9F0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.65; max-width: 34ch; }
.deck__vis { height: 100%; display: grid; place-items: center; }
.deck__vis svg { width: 100%; max-width: 30rem; height: auto; overflow: visible; }

/* the live visuals */
.v-stroke { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v-fill { fill: #B4A9F8; }
.v-soft { fill: rgba(255,255,255,.14); }
.v-glow { fill: #4430E9; filter: drop-shadow(0 0 18px rgba(140,125,244,.9)); animation: v-breath 2.6s ease-in-out infinite; transform-origin: 160px 120px; }
.v-chip { fill: #fff; }
.v-t { font: 700 14px "Heebo", sans-serif; fill: #08062C; text-anchor: middle; }
.v-dash { fill: none; stroke: #B4A9F8; stroke-width: 3; stroke-dasharray: 6 10; animation: v-flow 1.1s linear infinite; }
.v-track { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.v-node { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.5); stroke-width: 2; }
.v-done { fill: #22C55E; stroke: #22C55E; animation: v-breath 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.v-shield { stroke: #B4A9F8; }
.v-scan { animation: v-scan 2.4s ease-in-out infinite; }
.v-check { fill: none; stroke: #22C55E; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 110; animation: v-draw 2.4s ease-in-out infinite; }
.v-needle { transform-origin: 110px 120px; animation: v-swing 3.4s ease-in-out infinite; }
.v-road { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; animation: v-flow 1.6s linear infinite; }
.v-bar { fill: rgba(180,169,248,.75); transform-box: fill-box; transform-origin: 50% 100%; animation: v-grow 2.8s ease-in-out infinite; }
.v-b2 { animation-delay: .15s; } .v-b3 { animation-delay: .3s; } .v-b4 { animation-delay: .45s; } .v-b5 { animation-delay: .6s; fill: #22C55E; }
.v-line { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; animation: v-draw2 2.8s ease-in-out infinite; }
.v-pulse { animation: v-pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.v-blink { animation: v-blink 3.6s infinite; transform-box: fill-box; transform-origin: center; }
.v-bub { opacity: 0; animation: v-bub 4.5s ease-in-out infinite; }
.v-bub2 { animation-delay: 1.2s; } .v-bub3 { animation-delay: 2.4s; }
.v-dot1, .v-dot2, .v-dot3 { animation: v-type 1s ease-in-out infinite; } .v-dot2 { animation-delay: .15s; } .v-dot3 { animation-delay: .3s; }
@keyframes v-flow { to { stroke-dashoffset: -32; } }
@keyframes v-breath { 50% { transform: scale(1.08); } }
@keyframes v-scan { 0%,100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(150px); opacity: 1; } }
@keyframes v-draw { 0%,15% { stroke-dashoffset: 110; } 45%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 110; } }
@keyframes v-draw2 { 0% { stroke-dashoffset: 320; } 50%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 320; } }
@keyframes v-swing { 0%,100% { transform: rotate(-28deg); } 50% { transform: rotate(38deg); } }
@keyframes v-grow { 0%,100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
@keyframes v-pulse { 50% { transform: scale(1.5); opacity: .6; } }
@keyframes v-blink { 0%,44%,50%,100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
@keyframes v-bub { 0%,8% { opacity: 0; transform: translateY(10px); } 18%,70% { opacity: 1; transform: none; } 85%,100% { opacity: 0; } }
@keyframes v-type { 50% { transform: translateY(-3px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .deck__vis * { animation: none !important; } }
@media (max-width: 900px) {
  .deck__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding-top: 4.6rem; gap: 1rem; }
  .deck__side > p, .deck__list { display: none; }
  .deck__side h2 { font-size: 1.9rem; }
  .deck__cards { height: 72svh; }
  .deck__card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0.5rem; padding: 1.4rem; align-content: start; }
  .deck__vis { order: -1; height: 26svh; }
  .deck__card h3 { font-size: 1.8rem; margin: 0.3rem 0 0.5rem; }
  .deck__card p { font-size: 0.98rem; margin-bottom: 1rem; }
}