/* ============================================================
   services.css
   Services hub — layered on top of service-cloud.css
   Page-specific styles only (hero hub grid, scroll-rail, pillars,
   why grid, industries chips, stats band, 10 unique SVG anims).
   Inherits the rest from service-cloud.css.
   ============================================================ */

/* ============== HERO · layered service-tile grid ============== */
.hero-hub .hero-grid {
  grid-template-columns: 1.05fr 1fr;
}

.hub-vis {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 1400px;
}

.hub-floor {
  position: absolute;
  inset: 12% 6% 0 6%;
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(30, 99, 233, .14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 40%, rgba(255, 107, 53, .12), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.hub-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hub-lines line {
  stroke-dasharray: 1.2 1.6;
  animation: hubDash 12s linear infinite;
}

@keyframes hubDash {
  to { stroke-dashoffset: -40; }
}

.hub-grid {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-6deg);
  transition: transform 320ms var(--ease-spring);
  z-index: 2;
}

.hub-tile {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: clamp(8px, 1vw, 14px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  color: var(--c-navy);
  min-height: clamp(76px, 9vw, 108px);
  text-decoration: none;
  transform: translateZ(calc(var(--d, 0) * 30px));
  transition: transform 320ms var(--ease-spring),
              box-shadow 320ms var(--ease-out),
              border-color 200ms var(--ease-out);
  box-shadow: 0 8px 22px -16px rgba(11, 30, 63, .35);
  animation: hubFloat 6s ease-in-out infinite;
  animation-delay: calc(var(--gx, 0) * .12s + var(--gy, 0) * .18s);
  overflow: hidden;
}

.hub-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(160px circle at 30% 20%, rgba(30, 99, 233, .12), transparent 60%);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  pointer-events: none;
}

.hub-tile:hover {
  border-color: var(--c-blue);
  transform: translateZ(calc(var(--d, 0) * 30px + 20px)) scale(1.04);
  box-shadow: 0 22px 40px -24px rgba(11, 30, 63, .4);
}

.hub-tile:hover::before { opacity: 1; }

@keyframes hubFloat {
  0%, 100% { transform: translateZ(calc(var(--d, 0) * 30px)) translateY(0); }
  50%      { transform: translateZ(calc(var(--d, 0) * 30px)) translateY(-4px); }
}

.hub-tile .ht-ico {
  width: clamp(26px, 3vw, 32px);
  height: clamp(26px, 3vw, 32px);
  color: var(--c-blue);
  display: inline-grid;
  place-items: center;
}

.hub-tile .ht-ico svg { width: 100%; height: 100%; }

.hub-tile .ht-lbl {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(.78rem, .9vw, .92rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-navy);
  line-height: 1.1;
}

/* center hub tile */
.hub-tile-hub {
  background: linear-gradient(160deg, #0B1E3F 0%, #1648A6 130%);
  color: var(--c-white);
  display: grid;
  place-items: center;
  text-align: center;
  border-color: #0B1E3F;
  cursor: default;
  pointer-events: none;
  box-shadow: 0 18px 36px -16px rgba(30, 99, 233, .55);
}

.hub-tile-hub .ht-hub-core {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(.92rem, 1.1vw, 1.05rem);
  color: var(--c-white);
  letter-spacing: .02em;
  position: relative;
  z-index: 2;
}

.hub-tile-hub .ht-hub-ring {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1.5px solid rgba(94, 234, 212, .55);
  animation: hubRing 3s ease-out infinite;
}

.hub-tile-hub .ht-hub-ring-2 {
  animation-delay: -1.5s;
}

@keyframes hubRing {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* CTA tile (bottom-right) */
.hub-tile-cta {
  background: linear-gradient(135deg, var(--c-blue), #4F8BFF);
  color: var(--c-white);
  border-color: transparent;
  text-decoration: none;
}

.hub-tile-cta .ht-cta-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1;
}

.hub-tile-cta .ht-cta-lbl {
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.25;
  opacity: .94;
}

.hub-tile-cta:hover {
  border-color: transparent;
}

/* ============== Pillars (ecosystem intro) ============== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pillar {
  position: relative;
  padding: 30px 28px 26px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: transform var(--t-mid) var(--ease-spring),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
  overflow: hidden;
}

.pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-spring);
}

.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--c-blue);
  box-shadow: 0 24px 50px -28px rgba(11, 30, 63, .25);
}

.pillar:hover::before {
  transform: scaleX(1);
}

.pillar-ix {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  color: var(--c-blue);
  background: rgba(30, 99, 233, .08);
  padding: 4px 10px;
  border-radius: 5px;
  margin-bottom: 16px;
}

.pillar h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.pillar p {
  color: var(--c-mute);
  font-size: .98rem;
  margin-bottom: 18px;
}

.pillar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pillar-tags li {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--c-navy);
  padding: 5px 10px;
  background: var(--c-bg-2);
  border-radius: 4px;
  border: 1px solid var(--c-line);
}

/* ============== SCROLL-RAIL · alternating service rows ============== */
.showcase .section-h {
  margin-bottom: 70px;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
  position: relative;
}

/* connector spine between rows */
.rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  bottom: 30px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(30, 99, 233, .22) 0 6px, transparent 6px 14px);
  transform: translateX(-.5px);
  pointer-events: none;
}

.rail-row {
  position: relative;
}

.rail-link {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
  padding: clamp(30px, 4vw, 50px);
  background: linear-gradient(160deg, var(--c-white), var(--c-bg-2) 130%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-spring),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.rail-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 90% at 0%   50%, rgba(30, 99, 233, .08), transparent 60%),
    radial-gradient(ellipse 50% 90% at 100% 50%, rgba(255, 107, 53, .08), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
  pointer-events: none;
}

.rail-link:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 99, 233, .35);
  box-shadow: 0 36px 72px -36px rgba(11, 30, 63, .25);
}

.rail-link:hover::before { opacity: 1; }

.rail-flip .rail-link {
  grid-template-columns: 1fr 1.05fr;
}

.rail-flip .rail-body { order: 2; }
.rail-flip .rail-vis  { order: 1; }

.rail-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.rt-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: .76rem;
  color: var(--c-blue);
  background: rgba(30, 99, 233, .1);
  padding: 4px 10px;
  border-radius: 5px;
  font-weight: 600;
}

.rt-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: .76rem;
  color: var(--c-mute);
  letter-spacing: .02em;
}

.rail-body h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--c-navy);
  margin: 0 0 16px;
}

.rail-body p {
  color: var(--c-mute);
  font-size: 1.02rem;
  margin-bottom: 22px;
  max-width: 540px;
}

.rail-caps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
}

.rail-caps li {
  position: relative;
  padding-left: 22px;
  font-size: .95rem;
  color: var(--c-navy);
}

.rail-caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-accent));
  border-radius: 1px;
}

.rail-cta {
  color: var(--c-blue);
  font-weight: 700;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 1rem;
}

.rail-cta span {
  transition: transform var(--t-fast) var(--ease-spring);
  display: inline-block;
}

.rail-link:hover .rail-cta span {
  transform: translateX(8px);
}

.rail-vis {
  display: grid;
  place-items: center;
  aspect-ratio: 18 / 13;
  position: relative;
  background:
    linear-gradient(160deg, var(--c-white), var(--c-bg) 130%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.rail-vis::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 99, 233, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 99, 233, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
  pointer-events: none;
}

.rail-vis .rv {
  position: relative;
  width: 92%;
  height: auto;
  z-index: 1;
}

/* ============== 10 unique service-card SVG animations ============== */

/* --- 01 · Cloud --- */
.rv-cloud .rv-c1 { transform-box: fill-box; transform-origin: center; animation: rvCloudFloat 5s ease-in-out infinite; }
.rv-cloud .rv-c2 { transform-box: fill-box; transform-origin: center; animation: rvCloudFloat 6s ease-in-out infinite; animation-delay: -1s; }
.rv-cloud .rv-c3 { transform-box: fill-box; transform-origin: center; animation: rvCloudFloat 4.5s ease-in-out infinite; animation-delay: -2s; }

@keyframes rvCloudFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.rv-cloud .rv-pulse line { stroke-dasharray: 2 4; animation: rvCloudPulse 1.6s linear infinite; }
.rv-cloud .rv-pulse line:nth-child(2) { animation-delay: .2s; }
.rv-cloud .rv-pulse line:nth-child(3) { animation-delay: .4s; }
.rv-cloud .rv-pulse line:nth-child(4) { animation-delay: .6s; }
.rv-cloud .rv-pulse line:nth-child(5) { animation-delay: .8s; }

@keyframes rvCloudPulse {
  to { stroke-dashoffset: -18; }
}

.rv-cloud .rv-orb { offset-path: path('M 80 165 Q 130 110, 208 105 T 290 140'); }
.rv-cloud .rv-orb-1 { animation: rvOrb 4s linear infinite; }
.rv-cloud .rv-orb-2 { animation: rvOrb 4s linear infinite 2s; }

@keyframes rvOrb {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- 02 · Migration --- */
.rv-mig .rv-mig-arc { animation: rvMigArc 3.2s linear infinite; }
.rv-mig .rv-mig-arc-2 { animation-delay: .8s; }
.rv-mig .rv-mig-arc-3 { animation-delay: 1.6s; }

@keyframes rvMigArc {
  to { stroke-dashoffset: -44; }
}

.rv-mig .rv-mig-pkt {
  offset-path: path('M 100 105 Q 180 50, 260 105');
  animation: rvMigPkt 3.5s ease-in-out infinite;
}

@keyframes rvMigPkt {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- 03 · Infrastructure --- */
.rv-infra .rv-infra-leds circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: rvInfraLed 1.4s ease-in-out infinite;
}
.rv-infra .rv-infra-leds circle:nth-child(2)  { animation-delay: .1s; }
.rv-infra .rv-infra-leds circle:nth-child(3)  { animation-delay: .2s; }
.rv-infra .rv-infra-leds circle:nth-child(4)  { animation-delay: .3s; }
.rv-infra .rv-infra-leds circle:nth-child(5)  { animation-delay: .4s; }
.rv-infra .rv-infra-leds circle:nth-child(6)  { animation-delay: .5s; }
.rv-infra .rv-infra-leds circle:nth-child(7)  { animation-delay: .6s; }
.rv-infra .rv-infra-leds circle:nth-child(8)  { animation-delay: .7s; }
.rv-infra .rv-infra-leds circle:nth-child(9)  { animation-delay: .8s; }
.rv-infra .rv-infra-leds circle:nth-child(10) { animation-delay: .9s; }
.rv-infra .rv-infra-leds circle:nth-child(11) { animation-delay: 1.0s; }
.rv-infra .rv-infra-leds circle:nth-child(12) { animation-delay: 1.1s; }
.rv-infra .rv-infra-leds circle:nth-child(13) { animation-delay: 1.2s; }
.rv-infra .rv-infra-leds circle:nth-child(14) { animation-delay: 1.3s; }
.rv-infra .rv-infra-leds circle:nth-child(15) { animation-delay: 1.4s; }
.rv-infra .rv-infra-leds circle:nth-child(16) { animation-delay: 1.5s; }

@keyframes rvInfraLed {
  0%, 100% { opacity: .25; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

.rv-infra .rv-infra-wires path {
  stroke-dasharray: 4 5;
  animation: rvInfraWire 1.5s linear infinite;
}

@keyframes rvInfraWire {
  to { stroke-dashoffset: -18; }
}

.rv-infra .rv-infra-router-led {
  transform-box: fill-box;
  transform-origin: center;
  animation: rvInfraLed 1.2s ease-in-out infinite;
}

/* --- 04 · Digital Transformation --- */
.rv-dx .rv-dx-arc {
  animation: rvDxArc 4s linear infinite;
}

@keyframes rvDxArc {
  to { stroke-dashoffset: -32; }
}

.rv-dx .rv-dx-st circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: rvDxStation 3s ease-in-out infinite;
}
.rv-dx .rv-dx-st circle:nth-child(2) { animation-delay: .25s; }
.rv-dx .rv-dx-st circle:nth-child(3) { animation-delay: .5s; }
.rv-dx .rv-dx-st circle:nth-child(4) { animation-delay: .75s; }

@keyframes rvDxStation {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

.rv-dx .rv-dx-rocket {
  offset-path: path('M 100 125 C 170 50, 200 200, 260 125');
  animation: rvDxRocket 6s ease-in-out infinite;
}

@keyframes rvDxRocket {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- 05 · DR --- */
.rv-dr .rv-dr-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: rvDrShield 2.6s ease-out infinite;
}

@keyframes rvDrShield {
  0%   { transform: scale(1);    opacity: .9; }
  100% { transform: scale(1.18); opacity: 0; }
}

.rv-dr .rv-dr-leds circle,
.rv-dr .rv-dr-leds-2 circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: rvDrLed 1.2s ease-in-out infinite;
}
.rv-dr .rv-dr-leds circle:nth-child(2)  { animation-delay: .2s; }
.rv-dr .rv-dr-leds circle:nth-child(3)  { animation-delay: .4s; }
.rv-dr .rv-dr-leds circle:nth-child(4)  { animation-delay: .6s; }
.rv-dr .rv-dr-leds-2 circle             { animation-delay: .15s; }
.rv-dr .rv-dr-leds-2 circle:nth-child(2){ animation-delay: .35s; }
.rv-dr .rv-dr-leds-2 circle:nth-child(3){ animation-delay: .55s; }
.rv-dr .rv-dr-leds-2 circle:nth-child(4){ animation-delay: .75s; }

@keyframes rvDrLed {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

.rv-dr .rv-dr-rep {
  animation: rvDrRep 2s linear infinite;
}

@keyframes rvDrRep {
  to { stroke-dashoffset: -20; }
}

.rv-dr .rv-dr-pkt {
  offset-path: path('M 108 198 Q 180 240, 252 198');
  animation: rvDrPkt 3.5s ease-in-out infinite;
}

@keyframes rvDrPkt {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- 06 · Solutions Development --- */
.rv-dev .rv-dev-lines rect {
  transform-box: fill-box;
  transform-origin: left center;
  animation: rvDevType 4.4s steps(20, end) infinite;
}
.rv-dev .rv-dev-lines rect:nth-child(2) { animation-delay: .1s; }
.rv-dev .rv-dev-lines rect:nth-child(3) { animation-delay: .25s; }
.rv-dev .rv-dev-lines rect:nth-child(4) { animation-delay: .4s; }
.rv-dev .rv-dev-lines rect:nth-child(5) { animation-delay: .55s; }
.rv-dev .rv-dev-lines rect:nth-child(6) { animation-delay: .7s; }
.rv-dev .rv-dev-lines rect:nth-child(7) { animation-delay: .85s; }
.rv-dev .rv-dev-lines rect:nth-child(8) { animation-delay: 1.0s; }
.rv-dev .rv-dev-lines rect:nth-child(9) { animation-delay: 1.15s; }
.rv-dev .rv-dev-lines rect:nth-child(10){ animation-delay: 1.3s; }
.rv-dev .rv-dev-lines rect:nth-child(11){ animation-delay: 1.45s; }
.rv-dev .rv-dev-lines rect:nth-child(12){ animation-delay: 1.6s; }

@keyframes rvDevType {
  0%   { transform: scaleX(0); }
  50%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

.rv-dev .rv-dev-nodes {
  transform-box: fill-box;
  transform-origin: center;
  animation: rvDevPulse 2.4s ease-in-out infinite;
}

@keyframes rvDevPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* --- 07 · Consultation --- */
.rv-consult .rv-cb {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: rvConsultBar 3.5s ease-in-out infinite;
}

@keyframes rvConsultBar {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}

.rv-consult .rv-consult-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: rvConsultLine 4s ease-out infinite;
}

@keyframes rvConsultLine {
  0%   { stroke-dashoffset: 220; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

.rv-consult .rv-consult-pin {
  transform-box: fill-box;
  transform-origin: center;
  animation: rvConsultPin 2.4s ease-in-out infinite;
}

@keyframes rvConsultPin {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* --- 08 · Training --- */
.rv-tr .rv-tr-cap {
  transform-box: fill-box;
  transform-origin: center;
  animation: rvTrCap 5s ease-in-out infinite;
}

@keyframes rvTrCap {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}

.rv-tr .rv-tr-tassel {
  transform-box: fill-box;
  transform-origin: 140px 28px;
  animation: rvTrTassel 3s ease-in-out infinite;
}

@keyframes rvTrTassel {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.rv-tr .rv-tr-nodes circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: rvTrNode 3s ease-in-out infinite;
}
.rv-tr .rv-tr-nodes circle:nth-child(3) { animation-delay: .3s; }
.rv-tr .rv-tr-nodes circle:nth-child(5) { animation-delay: .6s; }
.rv-tr .rv-tr-nodes circle:nth-child(7) { animation-delay: .9s; }

@keyframes rvTrNode {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(30, 99, 233, .3); }
  50%      { transform: scale(1.08); }
}

.rv-tr .rv-tr-links line {
  stroke-dasharray: 3 5;
  animation: rvTrLink 2s linear infinite;
}

@keyframes rvTrLink {
  to { stroke-dashoffset: -16; }
}

/* --- 09 · Outsourcing --- */
.rv-out .rv-out-engineer {
  offset-path: path('M 270 122 C 240 50, 130 60, 75 122');
  animation: rvOutMove 5.5s ease-in-out infinite;
}

@keyframes rvOutMove {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- 10 · Digital Marketing --- */
.rv-dm .rv-dm-dot { offset-path: path('M 90 45 L 145 110 L 145 200 L 180 200'); }
.rv-dm .rv-dm-dot-1 { animation: rvDmFlow 3.2s ease-in-out infinite; }
.rv-dm .rv-dm-dot-2 { animation: rvDmFlow 3.2s ease-in-out infinite 1s; }
.rv-dm .rv-dm-dot-3 { animation: rvDmFlow 3.2s ease-in-out infinite 2s; }

@keyframes rvDmFlow {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ============== Why-NAS grid (reuses .dt-inner from service-cloud.css) ============== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.why-grid .dt-inner {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 26px 24px 24px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-spring),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
  overflow: hidden;
}

.why-grid .dt-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(30, 99, 233, .1), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
  pointer-events: none;
}

.why-card { perspective: 1200px; }

.why-card:hover .dt-inner {
  box-shadow: 0 30px 60px -25px rgba(11, 30, 63, .25);
  border-color: rgba(30, 99, 233, .4);
}

.why-card:hover .dt-inner::before { opacity: 1; }

/* ============== Industries chips ============== */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.ind-chip {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
  padding: 18px 22px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.ind-chip::after {
  content: "→";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  color: var(--c-blue);
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}

.ind-chip:hover {
  transform: translateY(-3px);
  border-color: var(--c-blue);
  box-shadow: 0 18px 40px -22px rgba(11, 30, 63, .25);
}

.ind-chip:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.ind-ico {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(30, 99, 233, .1), rgba(94, 234, 212, .12));
  color: var(--c-blue);
}

.ind-ico svg {
  width: 24px;
  height: 24px;
}

.ind-lbl {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  color: var(--c-navy);
  font-size: 1rem;
  letter-spacing: -.01em;
}

.ind-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  color: var(--c-mute);
  letter-spacing: .02em;
}

/* ============== Stats band ============== */
.stats-sec {
  position: relative;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}

.stat {
  position: relative;
  padding: 36px 28px 30px;
  background: linear-gradient(160deg, var(--c-white), var(--c-bg-2) 130%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-spring),
              box-shadow var(--t-mid) var(--ease-out);
}

.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 99, 233, .12), transparent 70%);
  opacity: .8;
  pointer-events: none;
}

.stat::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-spring);
}

.stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -32px rgba(11, 30, 63, .3);
}

.stat:hover::after { transform: scaleX(1); }

.stat-num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  color: var(--c-navy);
  letter-spacing: -.03em;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.stat-suf {
  color: var(--c-blue);
}

.stat-lbl {
  display: block;
  font-size: .92rem;
  color: var(--c-mute);
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

/* ============== Responsive ============== */
@media (max-width: 1024px) {
  .pillars {
    grid-template-columns: 1fr;
  }

  .rail-link,
  .rail-flip .rail-link {
    grid-template-columns: 1fr;
  }

  .rail-flip .rail-body { order: initial; }
  .rail-flip .rail-vis  { order: initial; }

  .rail::before { display: none; }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hub-grid {
    transform: rotateX(4deg) rotateY(-2deg);
  }
}

@media (max-width: 720px) {
  .hub-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    transform: none;
  }

  .hub-tile { animation: none; transform: none !important; min-height: 88px; }
  .hub-tile:hover { transform: scale(1.03) !important; }

  .hub-tile-hub { grid-column: 2; }
  .hub-tile-cta { grid-column: 3; }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat {
    padding: 24px 22px 20px;
  }

  .ind-grid {
    grid-template-columns: 1fr;
  }

  .rail-link {
    padding: 24px;
  }

  .rail-vis {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-tile,
  .hub-lines line,
  .rv * { animation: none !important; }
}