.service-page {
  overflow: hidden;
  background: var(--white);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.service-page section {
  scroll-margin-top: calc(var(--hdr-h, 84px) + 40px);
}

.service-hero {
  position: relative;
  padding: 88px 0 96px;
  background:
    radial-gradient(900px 440px at 85% -10%, rgba(46, 134, 240, .16), transparent 62%),
    radial-gradient(720px 360px at 12% 18%, rgba(15, 174, 145, .09), transparent 58%),
    linear-gradient(180deg, #fbfcfe 0%, #eef4fc 100%);
  border-bottom: 1px solid var(--slate-200);
}

.service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(10, 77, 173, .045) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(10, 77, 173, .045) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 80%);
}

.service-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
  gap: 64px;
  align-items: center;
}

.service-hero__copy {
  max-width: 720px;
}

.service-hero h1 {
  margin-top: 14px;
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.service-hero__headline {
  margin-top: 14px;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--sky-800);
}

.service-hero .lede {
  margin-top: 22px;
  font-size: 20px;
}

.service-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.service-hero__signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 42px;
  max-width: 660px;
}

.service-signal {
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(195, 205, 220, .82);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 42px -34px rgba(11, 18, 32, .35);
  backdrop-filter: blur(14px);
}

.service-signal b {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.25;
}

.service-signal span {
  display: block;
  margin-top: 7px;
  color: var(--slate-500);
  font-size: 13px;
  line-height: 1.45;
}

.service-hero__visual {
  min-width: 0;
}

.service-visual {
  position: relative;
  min-height: 520px;
  border: 1px solid rgba(177, 196, 222, .82);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(420px 250px at 82% 20%, rgba(46, 134, 240, .22), transparent 70%),
    radial-gradient(360px 260px at 18% 86%, rgba(15, 174, 145, .14), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,248,251,.94));
  box-shadow: var(--shadow-3);
}

.service-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(10, 77, 173, .07) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(10, 77, 173, .07) 1px, transparent 1px) 0 0 / 34px 34px;
}

.service-visual__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(195, 205, 220, .76);
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(14px);
  font-family: var(--font-mono);
  color: var(--slate-500);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-visual__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 5px rgba(15, 174, 145, .12);
}

.service-visual__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(187, 213, 247, .8);
  border-radius: 999px;
  background: rgba(238, 244, 252, .78);
  color: var(--sky-700);
}

.service-visual__lines {
  position: absolute;
  inset: 60px 22px 34px;
  width: calc(100% - 44px);
  height: calc(100% - 94px);
  overflow: visible;
}

.service-visual__line {
  fill: none;
  stroke: rgba(22, 101, 216, .28);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
}

.service-visual__flow {
  fill: none;
  stroke: var(--sky-600);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 10 210;
  animation: service-flow 5.8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(46, 134, 240, .45));
}

.service-visual__flow--teal {
  stroke: var(--teal-500);
  animation-delay: -1.8s;
}

.service-visual__flow--amber {
  stroke: var(--amber-500);
  animation-delay: -3.2s;
}

.service-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  gap: 9px;
  min-width: 108px;
  padding: 14px 12px 12px;
  border: 1px solid rgba(195, 205, 220, .9);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 20px 42px -30px rgba(11, 18, 32, .42);
  backdrop-filter: blur(12px);
}

.service-node--primary {
  border-color: rgba(46, 134, 240, .45);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(238,244,252,.92));
}

.service-node--secure {
  border-color: rgba(15, 174, 145, .42);
}

.service-node__glyph {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--sky-700), var(--sky-500));
  box-shadow: 0 10px 22px -14px rgba(10, 77, 173, .72);
}

.service-node--secure .service-node__glyph {
  background: linear-gradient(135deg, var(--teal-500), #1cc6a6);
}

.service-node__glyph::before,
.service-node__glyph::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
}

.service-node__glyph::before {
  left: 9px;
  right: 9px;
  top: 12px;
  height: 4px;
}

.service-node__glyph::after {
  left: 12px;
  right: 12px;
  top: 22px;
  height: 4px;
}

.service-visual--switching {
  background:
    radial-gradient(430px 260px at 78% 22%, rgba(15, 174, 145, .2), transparent 70%),
    radial-gradient(380px 260px at 20% 84%, rgba(46, 134, 240, .18), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,246,252,.96));
}

.service-visual--switching .service-node__glyph {
  border-radius: 9px;
  background: linear-gradient(180deg, var(--ink-80), var(--sky-800));
}

.service-visual--switching .service-node__glyph::before {
  left: 7px;
  right: 7px;
  top: 10px;
  height: 5px;
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.9) 0 10%,
      transparent 10% 18%,
      rgba(90,163,246,.95) 18% 28%,
      transparent 28% 36%,
      rgba(255,255,255,.9) 36% 46%,
      transparent 46% 54%,
      rgba(15,174,145,.95) 54% 64%,
      transparent 64% 72%,
      rgba(255,255,255,.9) 72% 82%,
      transparent 82% 100%);
}

.service-visual--switching .service-node__glyph::after {
  left: 8px;
  right: 8px;
  top: 23px;
  height: 5px;
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      rgba(90,163,246,.95) 0 12%,
      transparent 12% 20%,
      rgba(255,255,255,.9) 20% 32%,
      transparent 32% 40%,
      rgba(15,174,145,.95) 40% 52%,
      transparent 52% 60%,
      rgba(255,255,255,.9) 60% 72%,
      transparent 72% 80%,
      rgba(90,163,246,.95) 80% 92%,
      transparent 92% 100%);
}

.service-visual--security {
  background:
    radial-gradient(440px 260px at 76% 22%, rgba(15, 174, 145, .19), transparent 70%),
    radial-gradient(380px 260px at 18% 82%, rgba(10, 77, 173, .17), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(242,247,250,.96));
}

.service-visual--security::after {
  content: "";
  position: absolute;
  inset: 78px 34px 76px;
  border-radius: 18px;
  border: 1px solid rgba(15, 174, 145, .18);
  background:
    linear-gradient(90deg, rgba(10,77,173,.055) 0 32%, transparent 32% 34%, rgba(15,174,145,.065) 34% 66%, transparent 66% 68%, rgba(228,155,20,.045) 68% 100%);
  pointer-events: none;
}

.service-visual--security .service-node {
  z-index: 2;
}

.service-visual--security .service-visual__lines {
  z-index: 1;
}

.service-visual--security .service-node__glyph {
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(circle at 50% 33%, rgba(255,255,255,.8), transparent 25%),
    linear-gradient(135deg, var(--sky-800), var(--teal-500));
}

.service-visual--security .service-node__glyph::before {
  left: 10px;
  right: 10px;
  top: 9px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.9);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
}

.service-visual--security .service-node__glyph::after {
  left: 12px;
  right: 12px;
  top: 22px;
  height: 9px;
  border-radius: 3px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22);
}

.service-visual--datacenter {
  background:
    radial-gradient(450px 280px at 78% 22%, rgba(46, 134, 240, .2), transparent 72%),
    radial-gradient(380px 250px at 18% 84%, rgba(15, 174, 145, .14), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,245,252,.97));
}

.service-visual--datacenter::after {
  content: "";
  position: absolute;
  inset: 78px 38px 76px;
  border-radius: 18px;
  border: 1px solid rgba(46, 134, 240, .16);
  background:
    linear-gradient(90deg, rgba(10,77,173,.045) 0 30%, transparent 30% 33%, rgba(15,174,145,.055) 33% 64%, transparent 64% 67%, rgba(10,77,173,.04) 67% 100%),
    repeating-linear-gradient(0deg, rgba(11,18,32,.035) 0 1px, transparent 1px 22px);
  pointer-events: none;
}

.service-visual--datacenter .service-node {
  z-index: 2;
}

.service-visual--datacenter .service-visual__lines {
  z-index: 1;
}

.service-visual--datacenter .service-node__glyph {
  border-radius: 8px;
  background: linear-gradient(180deg, #0b1730, var(--sky-800));
}

.service-visual--datacenter .service-node__glyph::before {
  left: 8px;
  right: 8px;
  top: 8px;
  height: 20px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.85) 0 12%, transparent 12% 22%, rgba(90,163,246,.95) 22% 34%, transparent 34% 44%, rgba(15,174,145,.95) 44% 56%, transparent 56% 66%, rgba(255,255,255,.85) 66% 78%, transparent 78% 100%),
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(255,255,255,.22) 5px 6px);
}

.service-visual--datacenter .service-node__glyph::after {
  left: 11px;
  right: 11px;
  top: 31px;
  height: 3px;
  border-radius: 999px;
  background: rgba(15, 174, 145, .95);
  box-shadow: 0 0 12px rgba(15,174,145,.5);
}

.service-visual--onboarding {
  background:
    radial-gradient(430px 270px at 78% 22%, rgba(46, 134, 240, .22), transparent 72%),
    radial-gradient(360px 240px at 20% 82%, rgba(15, 174, 145, .16), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,247,252,.97));
}

.service-visual--onboarding::after {
  content: "";
  position: absolute;
  inset: 82px 36px 76px;
  z-index: 0;
  border: 1px solid rgba(46, 134, 240, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 26%, rgba(46,134,240,.16) 0 9%, transparent 10%),
    linear-gradient(90deg, rgba(10,77,173,.045) 0 25%, transparent 25% 28%, rgba(15,174,145,.06) 28% 58%, transparent 58% 61%, rgba(46,134,240,.048) 61% 100%),
    repeating-linear-gradient(0deg, rgba(11,18,32,.032) 0 1px, transparent 1px 28px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  pointer-events: none;
}

.service-visual--onboarding .service-visual__bar {
  z-index: 3;
}

.service-visual--onboarding .service-visual__lines {
  z-index: 1;
}

.service-visual--onboarding .service-node {
  z-index: 2;
}

.service-visual--onboarding .service-node__glyph {
  overflow: hidden;
  border: 1px solid rgba(10, 77, 173, .24);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(222,234,249,.96));
}

.service-visual--onboarding .service-node__glyph::before {
  left: 8px;
  right: 8px;
  top: 8px;
  height: 7px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, var(--sky-600) 0 38%, rgba(15,174,145,.95) 38% 68%, rgba(228,155,20,.9) 68% 100%);
  box-shadow: 0 11px 0 rgba(10,77,173,.18);
}

.service-visual--onboarding .service-node__glyph::after {
  left: 12px;
  right: 12px;
  top: 27px;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 174, 145, .95);
  box-shadow:
    -8px -7px 0 -2px rgba(46,134,240,.9),
    8px -7px 0 -2px rgba(228,155,20,.88);
}

.service-visual--wifi-lifecycle {
  min-height: 620px;
  background:
    radial-gradient(520px 320px at 28% 44%, rgba(46, 134, 240, .18), transparent 72%),
    radial-gradient(420px 280px at 76% 34%, rgba(15, 174, 145, .13), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(238,245,252,.97));
}

.service-visual--wifi-lifecycle::after {
  content: "";
  position: absolute;
  inset: 58px 18px 76px;
  border: 1px solid rgba(46, 134, 240, .11);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(10,77,173,.04) 0 42%, transparent 42% 44%, rgba(15,174,145,.04) 44% 100%),
    repeating-linear-gradient(0deg, rgba(11,18,32,.028) 0 1px, transparent 1px 26px);
  pointer-events: none;
}

.wifi-visual__stage {
  position: absolute;
  inset: 68px 22px 104px;
}

.wifi-visual__floor {
  position: absolute;
  left: 3%;
  top: 9%;
  width: 57%;
  height: 66%;
  border: 1px solid rgba(46, 134, 240, .28);
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(rgba(10,77,173,.065) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(10,77,173,.065) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(244,248,253,.94), rgba(233,242,252,.9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 26px 54px -42px rgba(11, 18, 32, .46);
}

.wifi-floor__label,
.wifi-design-label {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(187, 213, 247, .9);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: var(--sky-700);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.wifi-floor__label {
  left: 14px;
  top: 12px;
}

.wifi-design-label {
  right: 14px;
  bottom: 14px;
  color: var(--teal-600);
  border-color: rgba(15, 174, 145, .28);
  opacity: 0;
  transform: translateY(8px);
  animation: wifi-design-label 16s ease-in-out infinite;
}

.wifi-zone {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(46, 134, 240, .18);
  color: rgba(35, 55, 85, .56);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wifi-zone--lobby {
  left: 4%;
  top: 18%;
  width: 34%;
  height: 34%;
  border-radius: 14px 4px 4px 14px;
}

.wifi-zone--office {
  left: 38%;
  top: 18%;
  width: 31%;
  height: 34%;
}

.wifi-zone--meeting {
  left: 69%;
  top: 18%;
  width: 27%;
  height: 34%;
  border-radius: 4px 14px 14px 4px;
}

.wifi-zone--guest {
  left: 4%;
  top: 52%;
  width: 92%;
  height: 34%;
  border-radius: 4px 4px 14px 14px;
  background: rgba(255,255,255,.24);
}

.wifi-heatmap {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(46,134,240,.3), transparent 23%),
    radial-gradient(circle at 42% 20%, rgba(15,174,145,.24), transparent 22%),
    radial-gradient(circle at 70% 30%, rgba(46,134,240,.28), transparent 22%),
    radial-gradient(circle at 26% 56%, rgba(15,174,145,.24), transparent 24%),
    radial-gradient(circle at 55% 53%, rgba(46,134,240,.24), transparent 24%),
    radial-gradient(circle at 80% 62%, rgba(15,174,145,.2), transparent 25%);
  mix-blend-mode: multiply;
  animation: wifi-heatmap 16s ease-in-out infinite;
}

.wifi-scanner {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(46,134,240,.95), transparent);
  box-shadow: 0 0 20px rgba(46,134,240,.38);
  opacity: 0;
  animation: wifi-scan 16s ease-in-out infinite;
}

.wifi-ap {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 4;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid var(--sky-600);
  box-shadow: 0 0 0 5px rgba(46,134,240,.12);
  opacity: 0;
  animation: wifi-ap-lock 16s ease-in-out infinite;
  animation-delay: var(--d);
}

.wifi-ap::before,
.wifi-ap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(46,134,240,.24);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.32);
  opacity: 0;
  animation: wifi-coverage 3.2s ease-out infinite;
  animation-delay: calc(var(--d) + 4.6s);
}

.wifi-ap::after {
  width: 76px;
  height: 76px;
  border-color: rgba(15,174,145,.18);
  animation-delay: calc(var(--d) + 5.4s);
}

.wifi-ap i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--sky-600);
}

.wifi-interference {
  position: absolute;
  z-index: 4;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(228, 155, 20, .8);
  border-radius: 50%;
  opacity: 0;
  animation: wifi-interference 16s ease-in-out infinite;
}

.wifi-interference::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(228, 155, 20, .8);
}

.wifi-interference--a {
  left: 34%;
  top: 41%;
}

.wifi-interference--b {
  left: 74%;
  top: 49%;
  animation-delay: .55s;
}

.wifi-req-stack {
  position: absolute;
  left: 7%;
  top: 3%;
  z-index: 6;
  display: grid;
  gap: 8px;
  width: 138px;
}

.wifi-req {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(187, 213, 247, .9);
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 28px -24px rgba(11, 18, 32, .5);
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(8px);
  animation: wifi-req-card 16s ease-in-out infinite;
  animation-delay: calc(var(--i) * .14s);
}

.wifi-req::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--teal-500);
}

.wifi-architecture {
  position: absolute;
  right: 4%;
  top: 9%;
  z-index: 6;
  display: grid;
  width: 34%;
  gap: 10px;
}

.wifi-mode,
.wifi-login,
.wifi-switch {
  position: relative;
  min-height: 64px;
  padding: 12px 13px;
  border: 1px solid rgba(187, 213, 247, .82);
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 20px 42px -32px rgba(11, 18, 32, .46);
  backdrop-filter: blur(12px);
}

.wifi-mode {
  opacity: 0;
  transform: translateX(12px);
  animation: wifi-arch-card 16s ease-in-out infinite;
}

.wifi-mode--controller {
  animation-delay: .32s;
}

.wifi-mode b,
.wifi-login b {
  display: block;
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.2;
}

.wifi-mode span,
.wifi-login span,
.wifi-switch small {
  display: block;
  margin-top: 4px;
  color: var(--slate-500);
  font-size: 11px;
  line-height: 1.3;
}

.wifi-switch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  align-items: center;
  min-height: 58px;
  opacity: 0;
  transform: translateY(12px);
  animation: wifi-deploy-card 16s ease-in-out infinite;
}

.wifi-switch span {
  height: 7px;
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      rgba(46,134,240,.95) 0 34%,
      transparent 34% 48%,
      rgba(15,174,145,.95) 48% 72%,
      transparent 72% 100%);
}

.wifi-switch small {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.wifi-login {
  border-color: rgba(15, 174, 145, .34);
  opacity: 0;
  transform: translateX(12px);
  animation: wifi-login-card 16s ease-in-out infinite;
}

.wifi-login::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 14px;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, var(--sky-600) 0 28%, transparent 28% 42%, rgba(15,174,145,.95) 42% 70%, transparent 70% 100%);
  box-shadow: 0 10px 18px -12px rgba(10,77,173,.65);
}

.wifi-links {
  position: absolute;
  inset: 42px 8px 54px;
  z-index: 2;
  width: calc(100% - 16px);
  height: calc(100% - 96px);
  overflow: visible;
}

.wifi-link {
  fill: none;
  stroke-linecap: round;
}

.wifi-link--soft {
  stroke: rgba(22, 101, 216, .22);
  stroke-width: 1.8;
  stroke-dasharray: 5 8;
}

.wifi-packet {
  stroke: var(--sky-600);
  stroke-width: 2.4;
  stroke-dasharray: 8 190;
  filter: drop-shadow(0 0 6px rgba(46,134,240,.45));
  opacity: 0;
  animation: wifi-packet 16s linear infinite;
}

.wifi-packet--teal {
  stroke: var(--teal-500);
  animation-delay: -1.6s;
}

.wifi-packet--amber {
  stroke: var(--amber-500);
  animation-delay: -3.2s;
}

.wifi-validation,
.wifi-docs {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 7px;
}

.wifi-validation {
  right: 5%;
  bottom: 9%;
  width: 216px;
}

.wifi-docs {
  left: 6%;
  bottom: 4%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 50%;
}

.wifi-validation span,
.wifi-docs span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 9px;
  border: 1px solid rgba(187, 213, 247, .86);
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 14px 30px -25px rgba(11, 18, 32, .45);
  opacity: 0;
  transform: translateY(10px);
}

.wifi-validation span {
  animation: wifi-validate 16s ease-in-out infinite;
}

.wifi-validation span::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-right: 7px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 56%, transparent 56%),
    var(--teal-500);
}

.wifi-validation span:nth-child(2) { animation-delay: .18s; }
.wifi-validation span:nth-child(3) { animation-delay: .36s; }

.wifi-docs span {
  justify-content: center;
  animation: wifi-docs 16s ease-in-out infinite;
}

.wifi-docs span:nth-child(2) { animation-delay: .14s; }
.wifi-docs span:nth-child(3) { animation-delay: .28s; }
.wifi-docs span:nth-child(4) { animation-delay: .42s; }

.wifi-lifecycle {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.wifi-lifecycle__step {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(187, 213, 247, .8);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: var(--slate-500);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  animation: wifi-step 16s ease-in-out infinite;
  animation-delay: calc(var(--step) * 2.285s);
}

.service-visual--switching-lifecycle {
  min-height: 620px;
  background:
    radial-gradient(500px 320px at 50% 24%, rgba(46, 134, 240, .18), transparent 72%),
    radial-gradient(420px 280px at 84% 74%, rgba(15, 174, 145, .13), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(238,245,252,.97));
}

.service-visual--switching-lifecycle::after {
  content: "";
  position: absolute;
  inset: 58px 18px 76px;
  border: 1px solid rgba(46, 134, 240, .11);
  border-radius: 18px;
  background:
    linear-gradient(rgba(10,77,173,.048) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(10,77,173,.048) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(237,245,252,.66));
  pointer-events: none;
}

.switching-visual__stage {
  position: absolute;
  inset: 68px 22px 104px;
}

.switching-links {
  position: absolute;
  inset: 6px 8px 0;
  z-index: 1;
  width: calc(100% - 16px);
  height: calc(100% - 6px);
  overflow: visible;
}

.switch-old-link,
.switch-link,
.switch-segment-packet,
.switch-config-packet {
  fill: none;
  stroke-linecap: round;
}

.switch-old-link {
  stroke: rgba(91, 108, 132, .24);
  stroke-width: 1.6;
  stroke-dasharray: 5 8;
  animation: switch-old-fade 16s ease-in-out infinite;
}

.switch-link {
  stroke: rgba(22, 101, 216, .28);
  stroke-width: 2.4;
  opacity: 0;
  animation: switch-link-build 16s ease-in-out infinite;
}

.switch-link--uplink {
  stroke-width: 3.8;
}

.switch-link--redundant {
  stroke: rgba(15, 174, 145, .42);
  stroke-width: 3;
}

.switch-link--edge {
  stroke: rgba(228, 155, 20, .34);
  stroke-width: 2.8;
}

.switch-segment-packet {
  stroke-width: 3.2;
  stroke-dasharray: 11 205;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(46,134,240,.38));
  animation: switch-segment-flow 16s linear infinite;
}

.switch-segment-packet--corporate { stroke: var(--sky-600); animation-delay: -1.1s; }
.switch-segment-packet--guest { stroke: var(--teal-500); animation-delay: -2.2s; }
.switch-segment-packet--byod { stroke: #7c6ee6; animation-delay: -3.3s; }
.switch-segment-packet--iot { stroke: var(--amber-500); animation-delay: -4.4s; }
.switch-segment-packet--voice { stroke: #64748b; animation-delay: -5.5s; }

.switch-config-packet {
  stroke: var(--teal-500);
  stroke-width: 2.8;
  stroke-dasharray: 10 190;
  opacity: 0;
  animation: switch-config-flow 16s linear infinite;
}

.switch-layer-label {
  position: absolute;
  left: 16px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(187, 213, 247, .82);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.switch-layer-label--core { top: 7%; }
.switch-layer-label--dist { top: 30%; }
.switch-layer-label--access { top: 68%; }

.switch-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 5;
  width: 128px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(177, 196, 222, .86);
  border-radius: 12px;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -32px rgba(11, 18, 32, .48);
  backdrop-filter: blur(12px);
  opacity: 0;
  animation: switch-node-build 16s ease-in-out infinite;
}

.switch-node--core {
  border-color: rgba(46, 134, 240, .38);
}

.switch-node--distribution {
  border-color: rgba(15, 174, 145, .34);
}

.switch-node--access {
  border-color: rgba(91, 108, 132, .24);
}

.switch-node b {
  display: block;
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.2;
}

.switch-node small {
  display: block;
  margin-top: 5px;
  color: var(--slate-500);
  font-size: 10px;
  line-height: 1.2;
}

.switch-node__ports {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-top: 7px;
}

.switch-node__ports i {
  height: 4px;
  border-radius: 999px;
  background: rgba(46, 134, 240, .34);
  animation: switch-port-blink 2.8s ease-in-out infinite;
  animation-delay: calc(var(--p) * .12s);
}

.switch-node--distribution .switch-node__ports i {
  background: rgba(15, 174, 145, .42);
}

.switch-node--access .switch-node__ports i {
  background: rgba(100, 116, 139, .36);
}

.switch-edge {
  position: absolute;
  right: 3%;
  top: 25%;
  z-index: 6;
  width: 130px;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid rgba(228, 155, 20, .28);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 20px 42px -34px rgba(11, 18, 32, .46);
  opacity: 0;
  transform: translateX(10px);
  animation: switch-edge-card 16s ease-in-out infinite;
}

.switch-edge b,
.switch-staging b,
.switch-cutover b {
  display: block;
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 12px;
}

.switch-edge span,
.switch-cutover span {
  display: block;
  margin-top: 4px;
  color: var(--slate-500);
  font-size: 10px;
  line-height: 1.25;
}

.switch-endpoints {
  position: absolute;
  inset: 0;
  z-index: 6;
}

.switch-endpoints span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  gap: 4px;
  width: 42px;
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: switch-endpoint-build 16s ease-in-out infinite;
}

.switch-endpoints i {
  width: 18px;
  height: 14px;
  border: 1px solid rgba(46, 134, 240, .32);
  border-radius: 4px;
  background: rgba(255,255,255,.86);
}

.switch-assessment {
  position: absolute;
  left: 5%;
  top: 3%;
  z-index: 8;
  display: grid;
  gap: 7px;
  width: 130px;
}

.switch-assessment span {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 9px;
  border: 1px solid rgba(187, 213, 247, .86);
  border-radius: 9px;
  background: rgba(255,255,255,.9);
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 14px 28px -24px rgba(11, 18, 32, .45);
  opacity: 0;
  transform: translateY(8px);
  animation: switch-assess-card 16s ease-in-out infinite;
  animation-delay: calc(var(--i) * .12s);
}

.switch-assessment span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--sky-600);
}

.switch-segments {
  position: absolute;
  left: 50%;
  top: 4%;
  z-index: 8;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 42%;
  transform: translateX(-50%);
}

.switch-segment {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(187, 213, 247, .82);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--ink-80);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  opacity: 0;
  transform: translateY(8px);
  animation: switch-segment-tags 16s ease-in-out infinite;
}

.switch-segment::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--sky-600);
}

.switch-segment--guest::before { background: var(--teal-500); }
.switch-segment--byod::before { background: #7c6ee6; }
.switch-segment--iot::before { background: var(--amber-500); }
.switch-segment--voice::before { background: #64748b; }

.switch-design-label {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(15, 174, 145, .28);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--teal-600);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translate(-50%, 8px);
  opacity: 0;
  animation: switch-design-label 16s ease-in-out infinite;
}

.switch-staging {
  position: absolute;
  right: 4%;
  top: 49%;
  z-index: 8;
  display: grid;
  gap: 6px;
  width: 164px;
  padding: 12px;
  border: 1px solid rgba(187, 213, 247, .86);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -32px rgba(11, 18, 32, .48);
  opacity: 0;
  transform: translateX(12px);
  animation: switch-staging-card 16s ease-in-out infinite;
}

.switch-staging span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: rgba(238, 244, 252, .9);
  color: var(--slate-600);
  font-size: 10px;
  font-weight: 600;
}

.switch-cutover {
  position: absolute;
  right: 5%;
  bottom: 31%;
  z-index: 8;
  width: 150px;
  padding: 11px 12px;
  border: 1px solid rgba(228, 155, 20, .3);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -34px rgba(11, 18, 32, .46);
  opacity: 0;
  transform: translateY(10px);
  animation: switch-cutover-card 16s ease-in-out infinite;
}

.switch-cutover::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amber-500) 0 42%, rgba(187, 213, 247, .7) 42% 100%);
}

.switch-validation,
.switch-docs {
  position: absolute;
  z-index: 9;
  display: grid;
  gap: 7px;
}

.switch-validation {
  left: 4%;
  bottom: 4%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 54%;
}

.switch-docs {
  right: 4%;
  bottom: 4%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 36%;
}

.switch-validation span,
.switch-docs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 8px;
  border: 1px solid rgba(187, 213, 247, .86);
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 30px -25px rgba(11, 18, 32, .45);
  opacity: 0;
  transform: translateY(10px);
}

.switch-validation span {
  animation: switch-validation-card 16s ease-in-out infinite;
}

.switch-validation span::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 56%, transparent 56%),
    var(--teal-500);
}

.switch-validation span:nth-child(2) { animation-delay: .12s; }
.switch-validation span:nth-child(3) { animation-delay: .24s; }
.switch-validation span:nth-child(4) { animation-delay: .36s; }
.switch-validation span:nth-child(5) { animation-delay: .48s; }

.switch-docs span {
  animation: switch-doc-card 16s ease-in-out infinite;
}

.switch-docs span:nth-child(2) { animation-delay: .12s; }
.switch-docs span:nth-child(3) { animation-delay: .24s; }
.switch-docs span:nth-child(4) { animation-delay: .36s; }
.switch-docs span:nth-child(5) { animation-delay: .48s; }

.switch-lifecycle {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.switch-lifecycle__step {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(187, 213, 247, .8);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: var(--slate-500);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  animation: switch-step 16s ease-in-out infinite;
  animation-delay: calc(var(--step) * 2.285s);
}

.service-visual--security-lifecycle {
  min-height: 620px;
  background:
    radial-gradient(520px 320px at 50% 40%, rgba(46, 134, 240, .16), transparent 72%),
    radial-gradient(420px 280px at 82% 70%, rgba(15, 174, 145, .12), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(239,246,251,.97));
}

.service-visual--security-lifecycle::after {
  content: "";
  position: absolute;
  inset: 58px 18px 76px;
  border: 1px solid rgba(46, 134, 240, .11);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(10,77,173,.045) 0 34%, transparent 34% 36%, rgba(15,174,145,.045) 36% 62%, transparent 62% 64%, rgba(10,77,173,.04) 64% 100%),
    repeating-linear-gradient(0deg, rgba(11,18,32,.028) 0 1px, transparent 1px 30px);
  pointer-events: none;
}

.security-visual__stage {
  position: absolute;
  inset: 68px 22px 104px;
}

.security-links {
  position: absolute;
  inset: 4px 8px 0;
  z-index: 1;
  width: calc(100% - 16px);
  height: calc(100% - 4px);
  overflow: visible;
}

.security-dependency-line,
.security-flow,
.security-migration-line,
.security-ha-heartbeat {
  fill: none;
  stroke-linecap: round;
}

.security-dependency-line {
  stroke: rgba(91, 108, 132, .24);
  stroke-width: 1.6;
  stroke-dasharray: 5 8;
  animation: security-dependency 17s ease-in-out infinite;
}

.security-flow {
  stroke-width: 3;
  stroke-dasharray: 10 210;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(46,134,240,.32));
  animation: security-flow 17s linear infinite;
}

.security-flow--approved {
  stroke: var(--sky-600);
  animation-delay: -1.2s;
}

.security-flow--guest {
  stroke: var(--teal-500);
  animation-delay: -2.4s;
}

.security-flow--vpn {
  stroke: #7c6ee6;
  animation-delay: -3.6s;
}

.security-flow--blocked {
  stroke: rgba(228, 155, 20, .82);
  stroke-dasharray: 9 170;
  animation: security-blocked-flow 17s ease-in-out infinite;
}

.security-migration-line {
  stroke: rgba(228, 155, 20, .42);
  stroke-width: 2.6;
  stroke-dasharray: 7 8;
  opacity: 0;
  animation: security-migration-line 17s ease-in-out infinite;
}

.security-ha-heartbeat {
  stroke: rgba(15, 174, 145, .86);
  stroke-width: 2.8;
  stroke-dasharray: 8 120;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(15,174,145,.34));
  animation: security-heartbeat 2.6s linear infinite;
}

.security-zones {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.security-zone {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  align-content: center;
  width: 122px;
  min-height: 62px;
  padding: 12px;
  border: 1px solid rgba(177, 196, 222, .86);
  border-radius: 14px;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 38px -32px rgba(11, 18, 32, .46);
  backdrop-filter: blur(12px);
  opacity: 0;
  animation: security-zone-build 17s ease-in-out infinite;
}

.security-zone b {
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.2;
}

.security-zone span {
  margin-top: 5px;
  color: var(--slate-500);
  font-size: 10px;
  line-height: 1.25;
}

.security-zone--guest,
.security-zone--cloud {
  border-color: rgba(15, 174, 145, .28);
}

.security-zone--internet {
  border-color: rgba(228, 155, 20, .26);
}

.security-fw {
  position: absolute;
  z-index: 6;
  display: grid;
  align-content: center;
  width: 128px;
  min-height: 70px;
  padding: 13px 14px;
  border: 1px solid rgba(46, 134, 240, .34);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,246,252,.94));
  box-shadow: 0 22px 44px -32px rgba(11, 18, 32, .5);
  opacity: 0;
  animation: security-fw-build 17s ease-in-out infinite;
}

.security-fw--primary {
  left: 48%;
  top: 40%;
  transform: translate(-50%, -50%);
}

.security-fw--secondary {
  left: 58%;
  top: 49%;
  transform: translate(-50%, -50%);
  border-color: rgba(15, 174, 145, .28);
}

.security-fw b {
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 12px;
}

.security-fw span {
  margin-top: 5px;
  color: var(--slate-500);
  font-size: 10px;
}

.security-fw i {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 5px rgba(15,174,145,.12);
}

.security-fw--secondary i {
  background: rgba(46, 134, 240, .7);
}

.security-denied {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(228, 155, 20, .36);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #8a5d12;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, 8px);
  animation: security-denied 17s ease-in-out infinite;
}

.security-discovery,
.security-rules,
.security-policy,
.security-old-policy,
.security-new-policy,
.security-migration,
.security-logging,
.security-validation,
.security-docs {
  position: absolute;
  z-index: 8;
}

.security-discovery {
  left: 4%;
  top: 3%;
  display: grid;
  gap: 7px;
  width: 120px;
}

.security-discovery span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(187, 213, 247, .86);
  border-radius: 9px;
  background: rgba(255,255,255,.9);
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 14px 28px -24px rgba(11, 18, 32, .45);
  opacity: 0;
  transform: translateY(8px);
  animation: security-discovery-card 17s ease-in-out infinite;
  animation-delay: calc(var(--i) * .12s);
}

.security-discovery span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--sky-600);
}

.security-rules {
  left: 33%;
  top: 3%;
  display: grid;
  gap: 6px;
  width: 170px;
  padding: 12px;
  border: 1px solid rgba(187, 213, 247, .86);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -32px rgba(11, 18, 32, .46);
  opacity: 0;
  transform: translateY(10px);
  animation: security-rules-card 17s ease-in-out infinite;
}

.security-rules b,
.security-policy b,
.security-old-policy b,
.security-new-policy b,
.security-logging b {
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 12px;
}

.security-rules span,
.security-policy span,
.security-old-policy span,
.security-new-policy span,
.security-migration span,
.security-logging span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: rgba(238, 244, 252, .9);
  color: var(--slate-600);
  font-size: 10px;
  font-weight: 600;
}

.security-rules .is-review {
  background: rgba(255, 247, 229, .92);
  color: #8a5d12;
}

.security-policy {
  right: 4%;
  top: 3%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 180px;
  padding: 12px;
  border: 1px solid rgba(15, 174, 145, .28);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -32px rgba(11, 18, 32, .46);
  opacity: 0;
  transform: translateX(10px);
  animation: security-policy-card 17s ease-in-out infinite;
}

.security-policy b {
  grid-column: 1 / -1;
}

.security-old-policy,
.security-new-policy {
  bottom: 23%;
  display: grid;
  gap: 5px;
  width: 120px;
  padding: 10px;
  border: 1px solid rgba(187, 213, 247, .82);
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 36px -30px rgba(11,18,32,.46);
  opacity: 0;
  animation: security-migration-card 17s ease-in-out infinite;
}

.security-old-policy {
  left: 24%;
}

.security-new-policy {
  right: 24%;
  border-color: rgba(15, 174, 145, .28);
}

.security-migration {
  left: calc(50% - 165px);
  bottom: 16%;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  width: 330px;
  opacity: 0;
  animation: security-migration-card 17s ease-in-out infinite;
}

.security-migration span {
  border: 1px solid rgba(228, 155, 20, .22);
  background: rgba(255,255,255,.9);
}

.security-logging {
  right: 5%;
  top: 35%;
  display: grid;
  gap: 5px;
  width: 134px;
  padding: 10px;
  border: 1px solid rgba(187, 213, 247, .82);
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 36px -30px rgba(11,18,32,.46);
  opacity: 0;
  transform: translateX(10px);
  animation: security-logging-card 17s ease-in-out infinite;
}

.security-validation {
  left: 4%;
  bottom: 3%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 50%;
}

.security-docs {
  right: 4%;
  bottom: 3%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 42%;
}

.security-validation span,
.security-docs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 8px;
  border: 1px solid rgba(187, 213, 247, .86);
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 30px -25px rgba(11, 18, 32, .45);
  opacity: 0;
  transform: translateY(10px);
}

.security-validation span {
  animation: security-validation-card 17s ease-in-out infinite;
}

.security-validation span::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 56%, transparent 56%),
    var(--teal-500);
}

.security-validation span:nth-child(2) { animation-delay: .12s; }
.security-validation span:nth-child(3) { animation-delay: .24s; }
.security-validation span:nth-child(4) { animation-delay: .36s; }
.security-validation span:nth-child(5) { animation-delay: .48s; }
.security-validation span:nth-child(6) { animation-delay: .6s; }

.security-docs span {
  animation: security-doc-card 17s ease-in-out infinite;
}

.security-docs span:nth-child(2) { animation-delay: .12s; }
.security-docs span:nth-child(3) { animation-delay: .24s; }
.security-docs span:nth-child(4) { animation-delay: .36s; }
.security-docs span:nth-child(5) { animation-delay: .48s; }
.security-docs span:nth-child(6) { animation-delay: .6s; }

.security-lifecycle {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.security-lifecycle__step {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(187, 213, 247, .8);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: var(--slate-500);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  animation: security-step 17s ease-in-out infinite;
  animation-delay: calc(var(--step) * 2.428s);
}

.service-visual--datacenter-lifecycle {
  min-height: 620px;
  background:
    radial-gradient(540px 340px at 46% 30%, rgba(46, 134, 240, .17), transparent 72%),
    radial-gradient(420px 280px at 80% 72%, rgba(15, 174, 145, .12), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(238,245,252,.97));
}

.service-visual--datacenter-lifecycle::after {
  content: "";
  position: absolute;
  inset: 58px 18px 76px;
  border: 1px solid rgba(46, 134, 240, .11);
  border-radius: 18px;
  background:
    linear-gradient(rgba(10,77,173,.045) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(10,77,173,.045) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(10,77,173,.034) 0 28%, transparent 28% 30%, rgba(15,174,145,.034) 30% 68%, transparent 68% 70%, rgba(10,77,173,.03) 70% 100%);
  pointer-events: none;
}

.dc-visual__stage {
  position: absolute;
  inset: 68px 22px 104px;
}

.dc-links {
  position: absolute;
  inset: 5px 8px 0;
  z-index: 1;
  width: calc(100% - 16px);
  height: calc(100% - 5px);
  overflow: visible;
}

.dc-legacy-line,
.dc-fabric-line,
.dc-segment-flow,
.dc-config-flow,
.dc-migration-wave {
  fill: none;
  stroke-linecap: round;
}

.dc-legacy-line {
  stroke: rgba(91, 108, 132, .24);
  stroke-width: 1.6;
  stroke-dasharray: 5 8;
  animation: dc-legacy-fade 18s ease-in-out infinite;
}

.dc-fabric-line {
  stroke: rgba(22, 101, 216, .28);
  stroke-width: 2.3;
  opacity: 0;
  animation: dc-fabric-build 18s ease-in-out infinite;
}

.dc-fabric-line--uplink {
  stroke-width: 3.3;
}

.dc-fabric-line--rack {
  stroke-width: 2.2;
}

.dc-fabric-line--redundant {
  stroke: rgba(15, 174, 145, .42);
  stroke-width: 3;
}

.dc-segment-flow {
  stroke-width: 3.1;
  stroke-dasharray: 10 210;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(46,134,240,.34));
  animation: dc-segment-flow 18s linear infinite;
}

.dc-segment-flow--apps { stroke: var(--sky-600); animation-delay: -1.1s; }
.dc-segment-flow--storage { stroke: var(--teal-500); animation-delay: -2.2s; }
.dc-segment-flow--management { stroke: #7c6ee6; animation-delay: -3.3s; }
.dc-segment-flow--dmz { stroke: var(--amber-500); animation-delay: -4.4s; }
.dc-segment-flow--backup { stroke: #64748b; animation-delay: -5.5s; }

.dc-config-flow {
  stroke: var(--teal-500);
  stroke-width: 2.7;
  stroke-dasharray: 10 190;
  opacity: 0;
  animation: dc-config-flow 18s linear infinite;
}

.dc-migration-wave {
  stroke: rgba(228, 155, 20, .48);
  stroke-width: 2.7;
  stroke-dasharray: 8 10;
  opacity: 0;
  animation: dc-migration-line 18s ease-in-out infinite;
}

.dc-layer-label {
  position: absolute;
  left: 16px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(187, 213, 247, .82);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.dc-layer-label--spine { top: 7%; }
.dc-layer-label--leaf { top: 32%; }
.dc-layer-label--rack { top: 66%; }

.dc-switch,
.dc-rack {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 5;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(177, 196, 222, .86);
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -32px rgba(11, 18, 32, .48);
  backdrop-filter: blur(12px);
  opacity: 0;
}

.dc-switch {
  width: 118px;
  min-height: 56px;
  padding: 10px 11px;
  border-radius: 12px;
  animation: dc-switch-build 18s ease-in-out infinite;
}

.dc-switch--spine {
  border-color: rgba(46, 134, 240, .38);
}

.dc-switch--leaf {
  border-color: rgba(15, 174, 145, .32);
}

.dc-switch b,
.dc-rack b,
.dc-control b,
.dc-staging b,
.dc-legacy b,
.dc-modern b {
  display: block;
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.2;
}

.dc-switch span,
.dc-rack small,
.dc-control span,
.dc-control small,
.dc-legacy span,
.dc-modern span {
  display: block;
  margin-top: 5px;
  color: var(--slate-500);
  font-size: 10px;
  line-height: 1.25;
}

.dc-rack {
  display: grid;
  width: 76px;
  min-height: 112px;
  padding: 9px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,246,252,.94));
  animation: dc-rack-build 18s ease-in-out infinite;
}

.dc-rack__rows {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.dc-rack__rows i {
  height: 6px;
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      rgba(46,134,240,.9) 0 18%,
      transparent 18% 28%,
      rgba(15,174,145,.9) 28% 42%,
      rgba(204,213,226,.72) 42% 100%);
  animation: dc-led 3s ease-in-out infinite;
  animation-delay: calc(var(--r) * .12s);
}

.dc-workloads {
  position: absolute;
  inset: 0;
  z-index: 6;
}

.dc-workloads span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  gap: 4px;
  width: 46px;
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: dc-workload-build 18s ease-in-out infinite;
}

.dc-workloads i {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(46, 134, 240, .32);
  border-radius: 6px;
  background: rgba(255,255,255,.86);
}

.dc-assessment,
.dc-control,
.dc-staging,
.dc-legacy,
.dc-modern,
.dc-migration,
.dc-validation,
.dc-docs {
  position: absolute;
  z-index: 8;
}

.dc-assessment {
  left: 4%;
  top: 3%;
  display: grid;
  gap: 7px;
  width: 136px;
}

.dc-assessment span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(187, 213, 247, .86);
  border-radius: 9px;
  background: rgba(255,255,255,.9);
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 14px 28px -24px rgba(11, 18, 32, .45);
  opacity: 0;
  transform: translateY(8px);
  animation: dc-assess-card 18s ease-in-out infinite;
  animation-delay: calc(var(--i) * .12s);
}

.dc-assessment span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--sky-600);
}

.dc-segments {
  position: absolute;
  left: 50%;
  top: 4%;
  z-index: 8;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  width: 44%;
  transform: translateX(-50%);
}

.dc-segment {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(187, 213, 247, .82);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--ink-80);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  opacity: 0;
  transform: translateY(8px);
  animation: dc-segment-tags 18s ease-in-out infinite;
}

.dc-segment::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--sky-600);
}

.dc-segment--storage::before { background: var(--teal-500); }
.dc-segment--management::before { background: #7c6ee6; }
.dc-segment--dmz::before { background: var(--amber-500); }
.dc-segment--backup::before { background: #64748b; }

.dc-fabric-label {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(15, 174, 145, .28);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--teal-600);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translate(-50%, 8px);
  opacity: 0;
  animation: dc-fabric-label 18s ease-in-out infinite;
}

.dc-control {
  right: 4%;
  top: 3%;
  width: 176px;
  padding: 12px;
  border: 1px solid rgba(15, 174, 145, .28);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -32px rgba(11, 18, 32, .46);
  opacity: 0;
  transform: translateX(10px);
  animation: dc-control-card 18s ease-in-out infinite;
}

.dc-control small {
  font-size: 9px;
}

.dc-staging {
  right: 4%;
  top: 36%;
  display: grid;
  gap: 6px;
  width: 164px;
  padding: 12px;
  border: 1px solid rgba(187, 213, 247, .86);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -32px rgba(11, 18, 32, .48);
  opacity: 0;
  transform: translateX(12px);
  animation: dc-staging-card 18s ease-in-out infinite;
}

.dc-staging span,
.dc-legacy span,
.dc-modern span,
.dc-migration span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: rgba(238, 244, 252, .9);
  color: var(--slate-600);
  font-size: 10px;
  font-weight: 600;
}

.dc-legacy,
.dc-modern {
  bottom: 23%;
  display: grid;
  gap: 5px;
  width: 120px;
  padding: 10px;
  border: 1px solid rgba(187, 213, 247, .82);
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 36px -30px rgba(11,18,32,.46);
  opacity: 0;
  animation: dc-migration-card 18s ease-in-out infinite;
}

.dc-legacy {
  left: 18%;
}

.dc-modern {
  right: 18%;
  border-color: rgba(15, 174, 145, .28);
}

.dc-migration {
  left: calc(50% - 160px);
  bottom: 16%;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  width: 320px;
  opacity: 0;
  animation: dc-migration-card 18s ease-in-out infinite;
}

.dc-migration span {
  border: 1px solid rgba(228, 155, 20, .22);
  background: rgba(255,255,255,.9);
}

.dc-validation,
.dc-docs {
  display: grid;
  gap: 7px;
}

.dc-validation {
  left: 4%;
  bottom: 3%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 50%;
}

.dc-docs {
  right: 4%;
  bottom: 3%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 42%;
}

.dc-validation span,
.dc-docs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 8px;
  border: 1px solid rgba(187, 213, 247, .86);
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 30px -25px rgba(11, 18, 32, .45);
  opacity: 0;
  transform: translateY(10px);
}

.dc-validation span {
  animation: dc-validation-card 18s ease-in-out infinite;
}

.dc-validation span::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 56%, transparent 56%),
    var(--teal-500);
}

.dc-validation span:nth-child(2) { animation-delay: .12s; }
.dc-validation span:nth-child(3) { animation-delay: .24s; }
.dc-validation span:nth-child(4) { animation-delay: .36s; }
.dc-validation span:nth-child(5) { animation-delay: .48s; }
.dc-validation span:nth-child(6) { animation-delay: .6s; }

.dc-docs span {
  animation: dc-doc-card 18s ease-in-out infinite;
}

.dc-docs span:nth-child(2) { animation-delay: .12s; }
.dc-docs span:nth-child(3) { animation-delay: .24s; }
.dc-docs span:nth-child(4) { animation-delay: .36s; }
.dc-docs span:nth-child(5) { animation-delay: .48s; }
.dc-docs span:nth-child(6) { animation-delay: .6s; }

.dc-lifecycle {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.dc-lifecycle__step {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(187, 213, 247, .8);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: var(--slate-500);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  animation: dc-step 18s ease-in-out infinite;
  animation-delay: calc(var(--step) * 2.571s);
}

.service-visual--guest-lifecycle {
  min-height: 620px;
  background:
    radial-gradient(500px 320px at 38% 38%, rgba(46, 134, 240, .18), transparent 72%),
    radial-gradient(430px 280px at 78% 72%, rgba(15, 174, 145, .13), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(239,246,252,.97));
}

.service-visual--guest-lifecycle::after {
  content: "";
  position: absolute;
  inset: 58px 18px 76px;
  border: 1px solid rgba(46, 134, 240, .11);
  border-radius: 18px;
  background:
    linear-gradient(rgba(10,77,173,.044) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(10,77,173,.044) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(10,77,173,.035) 0 28%, transparent 28% 31%, rgba(15,174,145,.04) 31% 62%, transparent 62% 64%, rgba(10,77,173,.032) 64% 100%);
  pointer-events: none;
}

.guest-visual__stage {
  position: absolute;
  inset: 68px 22px 104px;
}

.guest-links {
  position: absolute;
  inset: 5px 8px 0;
  z-index: 1;
  width: calc(100% - 16px);
  height: calc(100% - 5px);
  overflow: visible;
}

.guest-link,
.guest-flow {
  fill: none;
  stroke-linecap: round;
}

.guest-link--soft {
  stroke: rgba(22, 101, 216, .2);
  stroke-width: 1.8;
  stroke-dasharray: 5 8;
}

.guest-flow {
  stroke-width: 3;
  stroke-dasharray: 10 210;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(46,134,240,.34));
  animation: guest-flow 16s linear infinite;
}

.guest-flow--connect { stroke: var(--sky-600); animation-delay: 0s; }
.guest-flow--redirect { stroke: var(--teal-500); animation-delay: -1.6s; }
.guest-flow--approve { stroke: var(--amber-500); animation-delay: -3.2s; }
.guest-flow--auth { stroke: #7c6ee6; animation-delay: -4.4s; }
.guest-flow--segment-a { stroke: var(--teal-500); animation-delay: -5.2s; }
.guest-flow--monitor { stroke: var(--sky-600); animation-delay: -6s; }

.guest-device,
.guest-edge,
.guest-portal,
.guest-approval,
.guest-segmentation,
.guest-dashboard,
.guest-docs,
.guest-sites,
.guest-access-token,
.guest-redirect-label {
  position: absolute;
  z-index: 6;
}

.guest-device {
  left: 4%;
  top: 23%;
  width: 118px;
  height: 196px;
  border: 1px solid rgba(46, 134, 240, .28);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,244,252,.94));
  box-shadow: 0 22px 44px -32px rgba(11,18,32,.5);
  opacity: 0;
  transform: translateY(8px);
  animation: guest-device-build 16s ease-in-out infinite;
}

.guest-device__chrome {
  position: absolute;
  left: 42px;
  right: 42px;
  top: 9px;
  height: 5px;
  border-radius: 999px;
  background: rgba(91, 108, 132, .28);
}

.guest-device__screen {
  position: absolute;
  inset: 22px 11px 12px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  border: 1px solid rgba(187, 213, 247, .8);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 20%, rgba(46,134,240,.18), transparent 48%),
    rgba(255,255,255,.82);
  text-align: center;
}

.guest-ssid {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(238,244,252,.92);
  color: var(--sky-700);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .04em;
}

.guest-device b {
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 13px;
}

.guest-device small {
  color: var(--slate-500);
  font-size: 10px;
}

.guest-wifi-wave {
  position: relative;
  width: 48px;
  height: 34px;
}

.guest-wifi-wave::before,
.guest-wifi-wave::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  border: 2px solid rgba(46,134,240,.72);
  border-bottom: 0;
  border-radius: 40px 40px 0 0;
  transform: translateX(-50%);
  animation: guest-wifi-wave 2.8s ease-in-out infinite;
}

.guest-wifi-wave::before {
  width: 28px;
  height: 15px;
}

.guest-wifi-wave::after {
  width: 46px;
  height: 25px;
  animation-delay: .4s;
}

.guest-edge {
  left: var(--x);
  top: var(--y);
  display: grid;
  align-content: center;
  width: 128px;
  min-height: 60px;
  padding: 11px 12px;
  border: 1px solid rgba(177, 196, 222, .86);
  border-radius: 14px;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -32px rgba(11,18,32,.48);
  backdrop-filter: blur(12px);
  opacity: 0;
  animation: guest-edge-build 16s ease-in-out infinite;
}

.guest-edge--firewall {
  border-color: rgba(15, 174, 145, .3);
}

.guest-edge--sdwan {
  border-color: rgba(228, 155, 20, .26);
}

.guest-edge b,
.guest-portal b,
.guest-approval b,
.guest-dashboard b {
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.2;
}

.guest-edge span,
.guest-portal span {
  margin-top: 5px;
  color: var(--slate-500);
  font-size: 10px;
  line-height: 1.25;
}

.guest-portal {
  left: 51%;
  top: 37%;
  display: grid;
  gap: 7px;
  width: 170px;
  padding: 14px;
  border: 1px solid rgba(46, 134, 240, .32);
  border-radius: 18px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(239,246,252,.94));
  box-shadow: 0 24px 48px -32px rgba(11,18,32,.5);
  opacity: 0;
  animation: guest-portal-card 16s ease-in-out infinite;
}

.guest-portal::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--sky-600) 0 28%, transparent 28% 42%, rgba(15,174,145,.95) 42% 70%, transparent 70% 100%);
  box-shadow: 0 10px 18px -12px rgba(10,77,173,.65);
}

.guest-portal__modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.guest-portal__modules i,
.guest-approval span,
.guest-dashboard__metrics span,
.guest-sites span,
.guest-docs span,
.guest-segmentation span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 7px;
  border-radius: 8px;
  background: rgba(238,244,252,.92);
  color: var(--slate-600);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.guest-approval {
  right: 5%;
  top: 6%;
  display: grid;
  gap: 6px;
  width: 166px;
  padding: 12px;
  border: 1px solid rgba(15, 174, 145, .28);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -32px rgba(11,18,32,.46);
  opacity: 0;
  transform: translateX(10px);
  animation: guest-approval-card 16s ease-in-out infinite;
}

.guest-approval span::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 56%, transparent 56%),
    var(--teal-500);
}

.guest-access-token {
  left: 52%;
  top: 61%;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(15,174,145,.3);
  border-radius: 999px;
  transform: translate(-50%, 8px);
  background: rgba(255,255,255,.9);
  color: var(--teal-600);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  animation: guest-token 16s ease-in-out infinite;
}

.guest-segmentation {
  right: 4%;
  top: 43%;
  display: grid;
  gap: 7px;
  width: 166px;
}

.guest-segmentation span {
  justify-content: space-between;
  min-height: 36px;
  border: 1px solid rgba(187, 213, 247, .82);
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 28px -24px rgba(11,18,32,.45);
  opacity: 0;
  transform: translateX(10px);
  animation: guest-segment-card 16s ease-in-out infinite;
}

.guest-segmentation span:nth-child(2) { animation-delay: .15s; }
.guest-segmentation span:nth-child(3) { animation-delay: .3s; }

.guest-segmentation b {
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 11px;
}

.guest-segmentation small {
  color: var(--slate-500);
  font-size: 9px;
}

.guest-dashboard {
  left: 48%;
  bottom: 12%;
  display: grid;
  gap: 7px;
  width: 182px;
  padding: 12px;
  border: 1px solid rgba(46, 134, 240, .26);
  border-radius: 14px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 42px -32px rgba(11,18,32,.46);
  opacity: 0;
  animation: guest-dashboard-card 16s ease-in-out infinite;
}

.guest-dashboard__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.guest-dashboard__metrics span {
  justify-content: center;
}

.guest-sites {
  left: 4%;
  bottom: 4%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 202px;
  opacity: 0;
  animation: guest-sites-card 16s ease-in-out infinite;
}

.guest-sites span {
  border: 1px solid rgba(187, 213, 247, .82);
  background: rgba(255,255,255,.88);
  color: var(--ink-80);
}

.guest-docs {
  right: 4%;
  bottom: 4%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 220px;
}

.guest-docs span {
  justify-content: center;
  min-height: 30px;
  border: 1px solid rgba(187, 213, 247, .86);
  background: rgba(255,255,255,.92);
  color: var(--ink-80);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 30px -25px rgba(11, 18, 32, .45);
  opacity: 0;
  transform: translateY(10px);
  animation: guest-doc-card 16s ease-in-out infinite;
}

.guest-docs span:nth-child(2) { animation-delay: .12s; }
.guest-docs span:nth-child(3) { animation-delay: .24s; }
.guest-docs span:nth-child(4) { animation-delay: .36s; }

.guest-redirect-label {
  left: 37%;
  top: 26%;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(15,174,145,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--teal-600);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: guest-redirect-label 16s ease-in-out infinite;
}

.guest-lifecycle {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.guest-lifecycle__step {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(187, 213, 247, .8);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: var(--slate-500);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  animation: guest-step 16s ease-in-out infinite;
  animation-delay: calc(var(--step) * 2.666s);
}

.service-node span {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
}

.service-node small {
  color: var(--slate-500);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.service-visual__caption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.service-visual__caption .chip {
  background: rgba(255,255,255,.84);
}

.service-section {
  padding: 104px 0;
}

.service-section--soft {
  background:
    radial-gradient(900px 360px at 90% 10%, rgba(46, 134, 240, .11), transparent 62%),
    var(--slate-50);
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
}

.service-section__head {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 40px;
}

.service-section__head h2 {
  margin-top: 10px;
  font-weight: 800;
}

.service-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr);
  gap: 42px;
  align-items: start;
}

.service-overview__panel {
  padding: 30px;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  background: white;
  box-shadow: var(--shadow-2);
}

.service-overview__panel p {
  color: var(--slate-700);
  font-size: 17px;
  line-height: 1.72;
}

.service-checklist {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  color: var(--slate-700);
  font-size: 14.5px;
  line-height: 1.5;
}

.service-checklist li::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--sky-600);
  box-shadow: 0 0 0 4px var(--sky-100);
}

.lifecycle-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.lifecycle-track::before {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(22, 101, 216, .42), rgba(15, 174, 145, .42), transparent);
}

.lifecycle-step {
  position: relative;
  min-height: 216px;
  padding: 24px;
  border: 1px solid rgba(195, 205, 220, .88);
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 44px -34px rgba(11, 18, 32, .42);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lifecycle-step:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 134, 240, .42);
  box-shadow: 0 24px 50px -34px rgba(10, 77, 173, .44);
}

.lifecycle-step__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--sky-700), var(--sky-500));
  color: white;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 14px 30px -18px rgba(10, 77, 173, .72);
}

.lifecycle-step h3 {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 800;
}

.lifecycle-step p {
  margin-top: 10px;
  color: var(--slate-600);
  font-size: 14.5px;
  line-height: 1.6;
}

.approach-grid,
.capability-grid,
.deliverable-grid,
.integrator-grid,
.related-grid {
  display: grid;
  gap: 18px;
}

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

.approach-card,
.deliverable-card,
.integrator-card,
.related-card {
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  background: white;
  box-shadow: var(--shadow-1);
}

.approach-card {
  min-height: 190px;
  padding: 24px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.approach-card:hover,
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--slate-300);
  box-shadow: var(--shadow-2);
}

.approach-card__icon,
.integrator-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.76), transparent 28%),
    linear-gradient(135deg, var(--sky-700), var(--teal-500));
  margin-bottom: 18px;
}

.approach-card h3,
.integrator-card h3,
.related-card h3 {
  font-weight: 800;
}

.approach-card p,
.integrator-card p,
.related-card p {
  margin-top: 10px;
  color: var(--slate-600);
  font-size: 14.5px;
  line-height: 1.62;
}

.capability-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.capability-card {
  min-height: 156px;
  padding: 20px;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,251,.92));
  box-shadow: var(--shadow-1);
}

.capability-card::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(10,77,173,.18), transparent 56%),
    radial-gradient(circle at 66% 28%, rgba(15,174,145,.42), transparent 28%),
    var(--sky-50);
  border: 1px solid var(--sky-100);
}

.capability-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.25;
}

.capability-card span {
  display: block;
  margin-top: 9px;
  color: var(--slate-600);
  font-size: 13.5px;
  line-height: 1.5;
}

.deliverable-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.deliverable-card {
  min-height: 118px;
  padding: 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.deliverable-card b {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.25;
}

.deliverable-card span {
  color: var(--slate-500);
  font-size: 13px;
  line-height: 1.42;
}

.deliverable-card::before {
  content: "";
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sky-600), var(--teal-500));
}

.integrator-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.integrator-card {
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,251,.92));
}

.related-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.related-card {
  display: grid;
  min-height: 220px;
  padding: 24px;
  align-content: space-between;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.related-card small {
  display: inline-flex;
  width: max-content;
  margin-top: 18px;
  color: var(--sky-700);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@keyframes wifi-step {
  0%, 11% {
    color: #fff;
    border-color: rgba(46,134,240,.42);
    background: linear-gradient(135deg, var(--sky-700), var(--teal-500));
    box-shadow: 0 12px 22px -16px rgba(10,77,173,.58);
  }
  16%, 100% {
    color: var(--slate-500);
    border-color: rgba(187, 213, 247, .8);
    background: rgba(255,255,255,.84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  }
}

@keyframes wifi-req-card {
  0%, 2% { opacity: 0; transform: translateY(8px); }
  6%, 18% { opacity: 1; transform: translateY(0); }
  24%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes wifi-scan {
  0%, 14% { opacity: 0; left: 8%; }
  17% { opacity: .95; }
  28% { opacity: .95; left: 90%; }
  32%, 100% { opacity: 0; left: 90%; }
}

@keyframes wifi-interference {
  0%, 15% { opacity: 0; transform: scale(.72); }
  18%, 27% { opacity: 1; transform: scale(1); }
  31%, 100% { opacity: 0; transform: scale(.72); }
}

@keyframes wifi-heatmap {
  0%, 24% { opacity: 0; filter: saturate(.88) blur(2px); }
  30%, 78% { opacity: .92; filter: saturate(1.05) blur(0); }
  86%, 100% { opacity: .68; filter: saturate(.98) blur(.4px); }
}

@keyframes wifi-ap-lock {
  0%, 22% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  31%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes wifi-coverage {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  22% { opacity: .8; }
  82% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes wifi-design-label {
  0%, 27% { opacity: 0; transform: translateY(8px); }
  33%, 72% { opacity: 1; transform: translateY(0); }
  82%, 100% { opacity: 0; transform: translateY(8px); }
}

@keyframes wifi-arch-card {
  0%, 36% { opacity: 0; transform: translateX(12px); }
  43%, 80% { opacity: 1; transform: translateX(0); }
  88%, 100% { opacity: .68; transform: translateX(0); }
}

@keyframes wifi-deploy-card {
  0%, 48% { opacity: 0; transform: translateY(12px); }
  55%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes wifi-login-card {
  0%, 42% { opacity: 0; transform: translateX(12px); }
  49%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes wifi-packet {
  0%, 36% { stroke-dashoffset: 210; opacity: 0; }
  43% { opacity: 1; }
  76% { opacity: 1; }
  100% { stroke-dashoffset: -210; opacity: 0; }
}

@keyframes wifi-validate {
  0%, 62% { opacity: 0; transform: translateY(10px); }
  70%, 88% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: .72; transform: translateY(0); }
}

@keyframes wifi-docs {
  0%, 74% { opacity: 0; transform: translateY(10px); }
  82%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes switch-step {
  0%, 11% {
    color: #fff;
    border-color: rgba(46,134,240,.42);
    background: linear-gradient(135deg, var(--sky-700), var(--teal-500));
    box-shadow: 0 12px 22px -16px rgba(10,77,173,.58);
  }
  16%, 100% {
    color: var(--slate-500);
    border-color: rgba(187, 213, 247, .8);
    background: rgba(255,255,255,.84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  }
}

@keyframes switch-old-fade {
  0%, 16% { opacity: 1; }
  27%, 100% { opacity: .08; }
}

@keyframes switch-link-build {
  0%, 14% { opacity: 0; stroke-dasharray: 4 12; }
  24%, 100% { opacity: 1; stroke-dasharray: 0; }
}

@keyframes switch-node-build {
  0%, 12% { opacity: .48; transform: translate(-50%, -50%) scale(.96); }
  24%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes switch-port-blink {
  0%, 100% { opacity: .34; }
  42%, 54% { opacity: 1; }
}

@keyframes switch-edge-card {
  0%, 28% { opacity: 0; transform: translateX(10px); }
  36%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes switch-endpoint-build {
  0%, 24% { opacity: 0; transform: translate(-50%, -45%); }
  34%, 100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes switch-assess-card {
  0%, 2% { opacity: 0; transform: translateY(8px); }
  6%, 18% { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes switch-segment-tags {
  0%, 27% { opacity: 0; transform: translateY(8px); }
  34%, 68% { opacity: 1; transform: translateY(0); }
  78%, 100% { opacity: .72; transform: translateY(0); }
}

@keyframes switch-segment-flow {
  0%, 27% { stroke-dashoffset: 210; opacity: 0; }
  36% { opacity: 1; }
  78% { opacity: 1; }
  100% { stroke-dashoffset: -210; opacity: .22; }
}

@keyframes switch-design-label {
  0%, 16% { opacity: 0; transform: translate(-50%, 8px); }
  24%, 42% { opacity: 1; transform: translate(-50%, 0); }
  50%, 100% { opacity: 0; transform: translate(-50%, 8px); }
}

@keyframes switch-staging-card {
  0%, 40% { opacity: 0; transform: translateX(12px); }
  47%, 64% { opacity: 1; transform: translateX(0); }
  74%, 100% { opacity: .7; transform: translateX(0); }
}

@keyframes switch-config-flow {
  0%, 42% { stroke-dashoffset: 205; opacity: 0; }
  48%, 62% { opacity: 1; }
  72%, 100% { stroke-dashoffset: -205; opacity: 0; }
}

@keyframes switch-cutover-card {
  0%, 52% { opacity: 0; transform: translateY(10px); }
  58%, 72% { opacity: 1; transform: translateY(0); }
  82%, 100% { opacity: 0; transform: translateY(10px); }
}

@keyframes switch-validation-card {
  0%, 64% { opacity: 0; transform: translateY(10px); }
  72%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: .72; transform: translateY(0); }
}

@keyframes switch-doc-card {
  0%, 75% { opacity: 0; transform: translateY(10px); }
  84%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes security-step {
  0%, 11% {
    color: #fff;
    border-color: rgba(46,134,240,.42);
    background: linear-gradient(135deg, var(--sky-700), var(--teal-500));
    box-shadow: 0 12px 22px -16px rgba(10,77,173,.58);
  }
  16%, 100% {
    color: var(--slate-500);
    border-color: rgba(187, 213, 247, .8);
    background: rgba(255,255,255,.84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  }
}

@keyframes security-zone-build {
  0%, 5% { opacity: 0; transform: translate(-50%, -45%); }
  13%, 100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes security-dependency {
  0%, 24% { opacity: .9; }
  34%, 100% { opacity: .16; }
}

@keyframes security-discovery-card {
  0%, 2% { opacity: 0; transform: translateY(8px); }
  6%, 17% { opacity: 1; transform: translateY(0); }
  24%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes security-rules-card {
  0%, 16% { opacity: 0; transform: translateY(10px); }
  23%, 36% { opacity: 1; transform: translateY(0); }
  44%, 100% { opacity: 0; transform: translateY(10px); }
}

@keyframes security-fw-build {
  0%, 28% { opacity: 0; }
  36%, 100% { opacity: 1; }
}

@keyframes security-policy-card {
  0%, 29% { opacity: 0; transform: translateX(10px); }
  38%, 66% { opacity: 1; transform: translateX(0); }
  78%, 100% { opacity: .72; transform: translateX(0); }
}

@keyframes security-flow {
  0%, 36% { stroke-dashoffset: 220; opacity: 0; }
  44% { opacity: 1; }
  78% { opacity: 1; }
  100% { stroke-dashoffset: -220; opacity: .22; }
}

@keyframes security-blocked-flow {
  0%, 39% { stroke-dashoffset: 170; opacity: 0; }
  46%, 56% { opacity: .92; stroke-dashoffset: 38; }
  62%, 100% { opacity: 0; stroke-dashoffset: 38; }
}

@keyframes security-denied {
  0%, 43% { opacity: 0; transform: translate(-50%, 8px); }
  48%, 57% { opacity: 1; transform: translate(-50%, 0); }
  64%, 100% { opacity: 0; transform: translate(-50%, 8px); }
}

@keyframes security-heartbeat {
  0% { stroke-dashoffset: 120; opacity: .2; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { stroke-dashoffset: -120; opacity: .2; }
}

@keyframes security-migration-line {
  0%, 48% { opacity: 0; stroke-dashoffset: 120; }
  56%, 70% { opacity: 1; }
  82%, 100% { opacity: 0; stroke-dashoffset: -120; }
}

@keyframes security-migration-card {
  0%, 47% { opacity: 0; transform: translateY(10px); }
  55%, 70% { opacity: 1; transform: translateY(0); }
  82%, 100% { opacity: 0; transform: translateY(10px); }
}

@keyframes security-logging-card {
  0%, 20% { opacity: 0; transform: translateX(10px); }
  27%, 86% { opacity: 1; transform: translateX(0); }
  100% { opacity: .72; transform: translateX(0); }
}

@keyframes security-validation-card {
  0%, 65% { opacity: 0; transform: translateY(10px); }
  73%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: .72; transform: translateY(0); }
}

@keyframes security-doc-card {
  0%, 76% { opacity: 0; transform: translateY(10px); }
  84%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes dc-step {
  0%, 11% {
    color: #fff;
    border-color: rgba(46,134,240,.42);
    background: linear-gradient(135deg, var(--sky-700), var(--teal-500));
    box-shadow: 0 12px 22px -16px rgba(10,77,173,.58);
  }
  16%, 100% {
    color: var(--slate-500);
    border-color: rgba(187, 213, 247, .8);
    background: rgba(255,255,255,.84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  }
}

@keyframes dc-legacy-fade {
  0%, 18% { opacity: .9; }
  30%, 100% { opacity: .08; }
}

@keyframes dc-fabric-build {
  0%, 18% { opacity: 0; stroke-dasharray: 4 12; }
  30%, 100% { opacity: 1; stroke-dasharray: 0; }
}

@keyframes dc-switch-build {
  0%, 18% { opacity: 0; transform: translate(-50%, -45%); }
  30%, 100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes dc-rack-build {
  0%, 8% { opacity: 0; transform: translate(-50%, -45%); }
  16%, 100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes dc-led {
  0%, 100% { opacity: .38; }
  42%, 54% { opacity: 1; }
}

@keyframes dc-workload-build {
  0%, 26% { opacity: 0; transform: translate(-50%, -45%); }
  36%, 100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes dc-assess-card {
  0%, 2% { opacity: 0; transform: translateY(8px); }
  6%, 18% { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes dc-segment-tags {
  0%, 28% { opacity: 0; transform: translateY(8px); }
  36%, 70% { opacity: 1; transform: translateY(0); }
  82%, 100% { opacity: .72; transform: translateY(0); }
}

@keyframes dc-segment-flow {
  0%, 34% { stroke-dashoffset: 220; opacity: 0; }
  42% { opacity: 1; }
  80% { opacity: 1; }
  100% { stroke-dashoffset: -220; opacity: .2; }
}

@keyframes dc-fabric-label {
  0%, 18% { opacity: 0; transform: translate(-50%, 8px); }
  28%, 44% { opacity: 1; transform: translate(-50%, 0); }
  54%, 100% { opacity: 0; transform: translate(-50%, 8px); }
}

@keyframes dc-control-card {
  0%, 30% { opacity: 0; transform: translateX(10px); }
  38%, 80% { opacity: 1; transform: translateX(0); }
  100% { opacity: .74; transform: translateX(0); }
}

@keyframes dc-staging-card {
  0%, 42% { opacity: 0; transform: translateX(12px); }
  50%, 64% { opacity: 1; transform: translateX(0); }
  76%, 100% { opacity: .72; transform: translateX(0); }
}

@keyframes dc-config-flow {
  0%, 44% { stroke-dashoffset: 205; opacity: 0; }
  50%, 64% { opacity: 1; }
  74%, 100% { stroke-dashoffset: -205; opacity: 0; }
}

@keyframes dc-migration-line {
  0%, 50% { opacity: 0; stroke-dashoffset: 120; }
  58%, 72% { opacity: 1; }
  84%, 100% { opacity: 0; stroke-dashoffset: -120; }
}

@keyframes dc-migration-card {
  0%, 50% { opacity: 0; transform: translateY(10px); }
  58%, 72% { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(10px); }
}

@keyframes dc-validation-card {
  0%, 66% { opacity: 0; transform: translateY(10px); }
  74%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: .72; transform: translateY(0); }
}

@keyframes dc-doc-card {
  0%, 76% { opacity: 0; transform: translateY(10px); }
  84%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes guest-step {
  0%, 13% {
    color: #fff;
    border-color: rgba(46,134,240,.42);
    background: linear-gradient(135deg, var(--sky-700), var(--teal-500));
    box-shadow: 0 12px 22px -16px rgba(10,77,173,.58);
  }
  18%, 100% {
    color: var(--slate-500);
    border-color: rgba(187, 213, 247, .8);
    background: rgba(255,255,255,.84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  }
}

@keyframes guest-flow {
  0%, 10% { stroke-dashoffset: 220; opacity: 0; }
  22% { opacity: 1; }
  82% { opacity: 1; }
  100% { stroke-dashoffset: -220; opacity: .2; }
}

@keyframes guest-device-build {
  0%, 4% { opacity: 0; transform: translateY(8px); }
  12%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes guest-wifi-wave {
  0%, 100% { opacity: .28; transform: translateX(-50%) scale(.82); }
  50% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes guest-edge-build {
  0%, 10% { opacity: 0; transform: translate(-50%, -45%); }
  20%, 100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes guest-redirect-label {
  0%, 14% { opacity: 0; transform: translateY(8px); }
  22%, 34% { opacity: 1; transform: translateY(0); }
  42%, 100% { opacity: 0; transform: translateY(8px); }
}

@keyframes guest-portal-card {
  0%, 24% { opacity: 0; transform: translate(-50%, -45%); }
  34%, 100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes guest-approval-card {
  0%, 40% { opacity: 0; transform: translateX(10px); }
  50%, 66% { opacity: 1; transform: translateX(0); }
  78%, 100% { opacity: .74; transform: translateX(0); }
}

@keyframes guest-token {
  0%, 46% { opacity: 0; transform: translate(-50%, 8px); }
  56%, 74% { opacity: 1; transform: translate(-50%, 0); }
  86%, 100% { opacity: .72; transform: translate(-50%, 0); }
}

@keyframes guest-segment-card {
  0%, 54% { opacity: 0; transform: translateX(10px); }
  64%, 88% { opacity: 1; transform: translateX(0); }
  100% { opacity: .78; transform: translateX(0); }
}

@keyframes guest-dashboard-card {
  0%, 64% { opacity: 0; transform: translate(-50%, 10px); }
  74%, 100% { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes guest-sites-card {
  0%, 66% { opacity: 0; transform: translateY(10px); }
  76%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes guest-doc-card {
  0%, 74% { opacity: 0; transform: translateY(10px); }
  84%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes service-flow {
  0% { stroke-dashoffset: 220; opacity: .2; }
  12% { opacity: 1; }
  84% { opacity: 1; }
  100% { stroke-dashoffset: -220; opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .service-visual__flow,
  .wifi-req,
  .wifi-scanner,
  .wifi-heatmap,
  .wifi-ap,
  .wifi-ap::before,
  .wifi-ap::after,
  .wifi-interference,
  .wifi-design-label,
  .wifi-mode,
  .wifi-switch,
  .wifi-login,
  .wifi-packet,
  .wifi-validation span,
  .wifi-docs span,
  .wifi-lifecycle__step,
  .switch-old-link,
  .switch-link,
  .switch-segment-packet,
  .switch-config-packet,
  .switch-node,
  .switch-node__ports i,
  .switch-edge,
  .switch-endpoints span,
  .switch-assessment span,
  .switch-segment,
  .switch-design-label,
  .switch-staging,
  .switch-cutover,
  .switch-validation span,
  .switch-docs span,
  .switch-lifecycle__step,
  .security-dependency-line,
  .security-flow,
  .security-migration-line,
  .security-ha-heartbeat,
  .security-zone,
  .security-fw,
  .security-denied,
  .security-discovery span,
  .security-rules,
  .security-policy,
  .security-old-policy,
  .security-new-policy,
  .security-migration,
  .security-logging,
  .security-validation span,
  .security-docs span,
  .security-lifecycle__step,
  .dc-legacy-line,
  .dc-fabric-line,
  .dc-segment-flow,
  .dc-config-flow,
  .dc-migration-wave,
  .dc-switch,
  .dc-rack,
  .dc-rack__rows i,
  .dc-workloads span,
  .dc-assessment span,
  .dc-segment,
  .dc-fabric-label,
  .dc-control,
  .dc-staging,
  .dc-legacy,
  .dc-modern,
  .dc-migration,
  .dc-validation span,
  .dc-docs span,
  .dc-lifecycle__step,
  .guest-flow,
  .guest-device,
  .guest-wifi-wave::before,
  .guest-wifi-wave::after,
  .guest-edge,
  .guest-portal,
  .guest-approval,
  .guest-access-token,
  .guest-segmentation span,
  .guest-dashboard,
  .guest-sites,
  .guest-docs span,
  .guest-redirect-label,
  .guest-lifecycle__step,
  .lifecycle-step,
  .approach-card,
  .related-card {
    animation: none !important;
    transition: none !important;
  }

  .wifi-heatmap,
  .wifi-ap,
  .wifi-design-label,
  .wifi-mode,
  .wifi-switch,
  .wifi-login,
  .wifi-validation span,
  .wifi-docs span {
    opacity: 1;
    transform: none;
  }

  .wifi-scanner,
  .wifi-interference,
  .wifi-packet {
    opacity: 0;
  }

  .switch-link,
  .switch-node,
  .switch-edge,
  .switch-endpoints span,
  .switch-segment,
  .switch-staging,
  .switch-validation span,
  .switch-docs span {
    opacity: 1;
    transform: none;
  }

  .switch-node {
    transform: translate(-50%, -50%);
  }

  .switch-old-link,
  .switch-assessment span,
  .switch-design-label,
  .switch-cutover,
  .switch-segment-packet,
  .switch-config-packet {
    opacity: 0;
  }

  .security-zone,
  .security-fw,
  .security-policy,
  .security-logging,
  .security-validation span,
  .security-docs span {
    opacity: 1;
    transform: none;
  }

  .security-zone {
    transform: translate(-50%, -50%);
  }

  .security-dependency-line,
  .security-ha-heartbeat {
    opacity: .72;
  }

  .security-discovery span,
  .security-rules,
  .security-old-policy,
  .security-new-policy,
  .security-migration,
  .security-denied,
  .security-migration-line,
  .security-flow {
    opacity: 0;
  }

  .dc-fabric-line,
  .dc-switch,
  .dc-rack,
  .dc-workloads span,
  .dc-segment,
  .dc-control,
  .dc-staging,
  .dc-validation span,
  .dc-docs span {
    opacity: 1;
    transform: none;
  }

  .dc-switch,
  .dc-rack,
  .dc-workloads span {
    transform: translate(-50%, -50%);
  }

  .dc-legacy-line,
  .dc-assessment span,
  .dc-fabric-label,
  .dc-legacy,
  .dc-modern,
  .dc-migration,
  .dc-segment-flow,
  .dc-config-flow,
  .dc-migration-wave {
    opacity: 0;
  }

  .guest-device,
  .guest-edge,
  .guest-portal,
  .guest-approval,
  .guest-access-token,
  .guest-segmentation span,
  .guest-dashboard,
  .guest-sites,
  .guest-docs span {
    opacity: 1;
    transform: none;
  }

  .guest-edge,
  .guest-portal,
  .guest-dashboard,
  .guest-access-token {
    transform: translate(-50%, -50%);
  }

  .guest-dashboard {
    transform: translateX(-50%);
  }

  .guest-flow {
    opacity: .72;
  }

  .guest-redirect-label {
    opacity: 0;
  }
}

@media (max-width: 1100px) {
  .service-hero__grid,
  .service-overview,
  .service-section__head {
    grid-template-columns: 1fr;
  }

  .service-hero__visual {
    max-width: 760px;
  }

  .deliverable-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

@media (max-width: 900px) {
  .service-hero {
    padding: 64px 0 72px;
  }

  .service-hero__grid {
    gap: 42px;
  }

  .service-hero__signals,
  .approach-grid,
  .integrator-grid {
    grid-template-columns: 1fr;
  }

  .service-visual {
    min-height: 460px;
  }

  .service-visual--wifi-lifecycle {
    min-height: 620px;
  }

  .wifi-visual__stage {
    inset: 64px 18px 102px;
  }

  .wifi-visual__floor {
    left: 4%;
    top: 10%;
    width: 60%;
    height: 58%;
  }

  .wifi-architecture {
    right: 4%;
    top: 10%;
    width: 30%;
  }

  .wifi-mode,
  .wifi-login,
  .wifi-switch {
    padding: 10px;
  }

  .wifi-req-stack {
    top: 2%;
    left: 5%;
  }

  .wifi-docs {
    bottom: 10%;
    width: 58%;
  }

  .wifi-validation {
    bottom: 8%;
    width: 190px;
  }

  .service-visual--switching-lifecycle {
    min-height: 620px;
  }

  .switching-visual__stage {
    inset: 64px 18px 102px;
  }

  .switch-node {
    width: 116px;
  }

  .switch-edge {
    right: 3%;
    width: 122px;
  }

  .switch-staging {
    right: 3%;
    width: 150px;
  }

  .switch-validation {
    width: 54%;
  }

  .switch-docs {
    width: 38%;
  }

  .service-visual--security-lifecycle {
    min-height: 620px;
  }

  .security-visual__stage {
    inset: 64px 18px 102px;
  }

  .security-zone {
    width: 112px;
  }

  .security-fw {
    width: 118px;
  }

  .security-rules {
    left: 32%;
    width: 150px;
  }

  .security-policy {
    right: 3%;
    width: 162px;
  }

  .security-old-policy,
  .security-new-policy {
    width: 112px;
  }

  .security-migration {
    width: 300px;
  }

  .security-validation {
    width: 50%;
  }

  .security-docs {
    width: 42%;
  }

  .service-visual--datacenter-lifecycle {
    min-height: 620px;
  }

  .dc-visual__stage {
    inset: 64px 18px 102px;
  }

  .dc-switch {
    width: 108px;
  }

  .dc-rack {
    width: 70px;
  }

  .dc-control {
    right: 3%;
    width: 160px;
  }

  .dc-staging {
    right: 3%;
    width: 150px;
  }

  .dc-validation {
    width: 50%;
  }

  .dc-docs {
    width: 42%;
  }

  .service-visual--guest-lifecycle {
    min-height: 620px;
  }

  .guest-visual__stage {
    inset: 64px 18px 102px;
  }

  .guest-edge {
    width: 118px;
  }

  .guest-portal {
    width: 160px;
  }

  .guest-approval,
  .guest-segmentation {
    width: 154px;
  }

  .guest-dashboard {
    width: 170px;
  }

  .guest-docs {
    width: 204px;
  }

  .lifecycle-track {
    grid-template-columns: 1fr;
  }

  .lifecycle-track::before {
    left: 45px;
    right: auto;
    top: 36px;
    bottom: 36px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(22, 101, 216, .4), rgba(15, 174, 145, .4), transparent);
  }
}

@media (max-width: 640px) {
  .service-hero h1 {
    font-size: clamp(38px, 12vw, 48px);
  }

  .service-hero .lede {
    font-size: 18px;
  }

  .service-hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .service-visual {
    min-height: 520px;
  }

  .service-visual--wifi-lifecycle {
    min-height: 720px;
  }

  .service-visual--wifi-lifecycle::after {
    inset: 58px 12px 94px;
  }

  .wifi-visual__stage {
    inset: 62px 14px 128px;
  }

  .wifi-visual__floor {
    left: 4%;
    top: 6%;
    width: 92%;
    height: 40%;
  }

  .wifi-zone {
    font-size: 8px;
  }

  .wifi-floor__label,
  .wifi-design-label {
    height: 22px;
    padding: 0 8px;
    font-size: 8px;
  }

  .wifi-req-stack {
    left: 6%;
    top: 1%;
    width: 118px;
    gap: 5px;
  }

  .wifi-req {
    height: 24px;
    padding: 0 8px;
    font-size: 10px;
  }

  .wifi-architecture {
    left: 4%;
    right: auto;
    top: 50%;
    width: 92%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .wifi-mode,
  .wifi-login,
  .wifi-switch {
    min-height: 56px;
  }

  .wifi-mode b,
  .wifi-login b {
    font-size: 11px;
  }

  .wifi-mode span,
  .wifi-login span,
  .wifi-switch small {
    font-size: 9px;
  }

  .wifi-validation {
    right: 4%;
    bottom: 2%;
    width: 46%;
  }

  .wifi-docs {
    left: 4%;
    bottom: 2%;
    width: 46%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wifi-validation span,
  .wifi-docs span {
    min-height: 26px;
    padding: 6px 7px;
    font-size: 9px;
  }

  .wifi-lifecycle {
    left: 14px;
    right: 14px;
    bottom: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wifi-lifecycle__step {
    height: 30px;
    font-size: 9px;
  }

  .service-visual--switching-lifecycle {
    min-height: 740px;
  }

  .service-visual--switching-lifecycle::after {
    inset: 58px 12px 94px;
  }

  .switching-visual__stage {
    inset: 62px 14px 128px;
  }

  .switch-layer-label {
    left: 10px;
    height: 22px;
    padding: 0 8px;
    font-size: 8px;
  }

  .switch-node {
    width: 88px;
    min-height: 50px;
    padding: 7px;
  }

  .switch-node b {
    font-size: 10px;
  }

  .switch-node small {
    display: none;
  }

  .switch-node__ports {
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }

  .switch-edge {
    right: 3%;
    top: 23%;
    width: 104px;
    min-height: 50px;
    padding: 9px;
  }

  .switch-edge b,
  .switch-staging b,
  .switch-cutover b {
    font-size: 10px;
  }

  .switch-edge span,
  .switch-cutover span {
    font-size: 8px;
  }

  .switch-endpoints span {
    width: 34px;
    font-size: 8px;
  }

  .switch-assessment {
    left: 4%;
    top: 1%;
    width: 108px;
    gap: 5px;
  }

  .switch-assessment span {
    height: 23px;
    padding: 0 7px;
    font-size: 9px;
  }

  .switch-segments {
    left: 50%;
    top: 42%;
    width: 92%;
    justify-content: center;
  }

  .switch-segment {
    height: 22px;
    padding: 0 7px;
    font-size: 8px;
  }

  .switch-design-label {
    top: 49%;
    height: 22px;
    padding: 0 8px;
    font-size: 8px;
  }

  .switch-staging {
    right: 3%;
    top: 48%;
    width: 118px;
    padding: 9px;
    gap: 5px;
  }

  .switch-staging span {
    min-height: 20px;
    padding: 0 6px;
    font-size: 8px;
  }

  .switch-cutover {
    right: 4%;
    bottom: 28%;
    width: 112px;
    padding: 9px;
  }

  .switch-validation {
    left: 4%;
    bottom: 2%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 47%;
  }

  .switch-docs {
    right: 4%;
    bottom: 2%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 43%;
  }

  .switch-validation span,
  .switch-docs span {
    min-height: 26px;
    padding: 6px 6px;
    font-size: 8px;
  }

  .switch-validation span::before {
    display: none;
  }

  .switch-lifecycle {
    left: 14px;
    right: 14px;
    bottom: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .switch-lifecycle__step {
    height: 30px;
    font-size: 9px;
  }

  .service-visual--security-lifecycle {
    min-height: 760px;
  }

  .service-visual--security-lifecycle::after {
    inset: 58px 12px 94px;
  }

  .security-visual__stage {
    inset: 62px 14px 128px;
  }

  .security-zone {
    left: clamp(40px, var(--x), calc(100% - 40px));
    width: 78px;
    min-height: 50px;
    padding: 8px;
  }

  .security-zone b {
    font-size: 9px;
  }

  .security-zone span {
    font-size: 8px;
  }

  .security-fw {
    width: 92px;
    min-height: 58px;
    padding: 10px;
  }

  .security-fw b {
    font-size: 10px;
  }

  .security-fw span {
    font-size: 8px;
  }

  .security-fw--primary {
    left: 47%;
    top: 39%;
  }

  .security-fw--secondary {
    left: 59%;
    top: 49%;
  }

  .security-denied {
    height: 21px;
    padding: 0 7px;
    font-size: 8px;
  }

  .security-discovery {
    left: 4%;
    top: 1%;
    width: 102px;
    gap: 5px;
  }

  .security-discovery span {
    height: 22px;
    padding: 0 7px;
    font-size: 9px;
  }

  .security-rules {
    left: 31%;
    top: 1%;
    width: 126px;
    padding: 9px;
    gap: 5px;
  }

  .security-policy {
    right: 3%;
    top: 1%;
    width: 120px;
    padding: 9px;
    gap: 5px;
  }

  .security-rules b,
  .security-policy b,
  .security-old-policy b,
  .security-new-policy b,
  .security-logging b {
    font-size: 10px;
  }

  .security-rules span,
  .security-policy span,
  .security-old-policy span,
  .security-new-policy span,
  .security-migration span,
  .security-logging span {
    min-height: 19px;
    padding: 0 6px;
    font-size: 8px;
  }

  .security-old-policy,
  .security-new-policy {
    bottom: 28%;
    width: 84px;
    padding: 8px;
  }

  .security-old-policy {
    left: 6%;
  }

  .security-new-policy {
    right: 6%;
  }

  .security-migration {
    left: 6%;
    bottom: 22%;
    width: 88%;
  }

  .security-logging {
    right: 3%;
    top: 58%;
    width: 104px;
    padding: 8px;
  }

  .security-validation {
    left: 4%;
    bottom: 2%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 47%;
  }

  .security-docs {
    right: 4%;
    bottom: 2%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 43%;
  }

  .security-validation span,
  .security-docs span {
    min-height: 26px;
    padding: 6px 6px;
    font-size: 8px;
  }

  .security-validation span::before {
    display: none;
  }

  .security-lifecycle {
    left: 14px;
    right: 14px;
    bottom: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .security-lifecycle__step {
    height: 30px;
    font-size: 9px;
  }

  .service-visual--datacenter-lifecycle {
    min-height: 760px;
  }

  .service-visual--datacenter-lifecycle::after {
    inset: 58px 12px 94px;
  }

  .dc-visual__stage {
    inset: 62px 14px 128px;
  }

  .dc-layer-label {
    left: 10px;
    height: 22px;
    padding: 0 8px;
    font-size: 8px;
  }

  .dc-switch {
    width: 84px;
    min-height: 48px;
    padding: 7px;
  }

  .dc-switch b,
  .dc-rack b,
  .dc-control b,
  .dc-staging b,
  .dc-legacy b,
  .dc-modern b {
    font-size: 10px;
  }

  .dc-switch span,
  .dc-rack small,
  .dc-control span,
  .dc-control small,
  .dc-legacy span,
  .dc-modern span {
    font-size: 8px;
  }

  .dc-rack {
    width: 52px;
    min-height: 90px;
    padding: 7px;
  }

  .dc-rack__rows {
    gap: 3px;
  }

  .dc-rack__rows i {
    height: 5px;
  }

  .dc-workloads span {
    width: 34px;
    font-size: 8px;
  }

  .dc-workloads i {
    width: 15px;
    height: 15px;
  }

  .dc-assessment {
    left: 4%;
    top: 1%;
    width: 114px;
    gap: 5px;
  }

  .dc-assessment span {
    height: 22px;
    padding: 0 7px;
    font-size: 9px;
  }

  .dc-segments {
    left: 50%;
    top: 43%;
    width: 92%;
  }

  .dc-segment {
    height: 22px;
    padding: 0 7px;
    font-size: 8px;
  }

  .dc-fabric-label {
    top: 50%;
    height: 22px;
    padding: 0 8px;
    font-size: 8px;
  }

  .dc-control {
    right: 3%;
    top: 1%;
    width: 122px;
    padding: 9px;
  }

  .dc-staging {
    right: 3%;
    top: 51%;
    width: 118px;
    padding: 9px;
    gap: 5px;
  }

  .dc-staging span,
  .dc-legacy span,
  .dc-modern span,
  .dc-migration span {
    min-height: 19px;
    padding: 0 6px;
    font-size: 8px;
  }

  .dc-legacy,
  .dc-modern {
    bottom: 28%;
    width: 86px;
    padding: 8px;
  }

  .dc-legacy {
    left: 6%;
  }

  .dc-modern {
    right: 6%;
  }

  .dc-migration {
    left: 6%;
    bottom: 22%;
    width: 88%;
  }

  .dc-validation {
    left: 4%;
    bottom: 2%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 47%;
  }

  .dc-docs {
    right: 4%;
    bottom: 2%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 43%;
  }

  .dc-validation span,
  .dc-docs span {
    min-height: 26px;
    padding: 6px 6px;
    font-size: 8px;
  }

  .dc-validation span::before {
    display: none;
  }

  .dc-lifecycle {
    left: 14px;
    right: 14px;
    bottom: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dc-lifecycle__step {
    height: 30px;
    font-size: 9px;
  }

  .service-visual--guest-lifecycle {
    min-height: 780px;
  }

  .service-visual--guest-lifecycle::after {
    inset: 58px 12px 94px;
  }

  .guest-visual__stage {
    inset: 62px 14px 128px;
  }

  .guest-device {
    left: 4%;
    top: 5%;
    width: 92px;
    height: 150px;
  }

  .guest-device__screen {
    inset: 20px 9px 10px;
    gap: 5px;
  }

  .guest-device b {
    font-size: 11px;
  }

  .guest-device small {
    font-size: 8px;
  }

  .guest-ssid {
    min-height: 18px;
    padding: 0 6px;
    font-size: 7px;
  }

  .guest-wifi-wave {
    width: 38px;
    height: 28px;
  }

  .guest-edge {
    width: 96px;
    min-height: 44px;
    padding: 8px;
  }

  .guest-edge--ap {
    --x: 60% !important;
    --y: 12% !important;
  }

  .guest-edge--firewall {
    --x: 60% !important;
    --y: 23% !important;
  }

  .guest-edge--sdwan {
    --x: 60% !important;
    --y: 34% !important;
  }

  .guest-edge b,
  .guest-portal b,
  .guest-approval b,
  .guest-dashboard b {
    font-size: 10px;
  }

  .guest-edge span,
  .guest-portal span {
    font-size: 8px;
  }

  .guest-portal {
    left: 28%;
    top: 48%;
    width: 142px;
    padding: 10px;
    gap: 5px;
  }

  .guest-portal__modules {
    gap: 4px;
  }

  .guest-portal__modules i,
  .guest-approval span,
  .guest-dashboard__metrics span,
  .guest-sites span,
  .guest-docs span,
  .guest-segmentation span {
    min-height: 20px;
    padding: 0 6px;
    font-size: 8px;
  }

  .guest-approval {
    right: 3%;
    top: 42%;
    width: 132px;
    padding: 9px;
    gap: 5px;
  }

  .guest-access-token {
    left: 50%;
    top: 64%;
    height: 22px;
    padding: 0 8px;
    font-size: 8px;
  }

  .guest-segmentation {
    right: 3%;
    top: 59%;
    width: 132px;
    gap: 5px;
  }

  .guest-segmentation span {
    min-height: 31px;
  }

  .guest-segmentation b {
    font-size: 9px;
  }

  .guest-segmentation small {
    font-size: 7px;
  }

  .guest-dashboard {
    left: 50%;
    bottom: 17%;
    width: 150px;
    padding: 9px;
    gap: 5px;
  }

  .guest-dashboard__metrics {
    gap: 4px;
  }

  .guest-sites {
    left: 4%;
    bottom: 5%;
    width: 140px;
    gap: 5px;
  }

  .guest-docs {
    right: 4%;
    bottom: 4%;
    width: 148px;
    gap: 5px;
  }

  .guest-docs span {
    min-height: 25px;
  }

  .guest-redirect-label {
    left: 38%;
    top: 38%;
    height: 21px;
    padding: 0 7px;
    font-size: 7px;
  }

  .guest-lifecycle {
    left: 14px;
    right: 14px;
    bottom: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guest-lifecycle__step {
    height: 30px;
    font-size: 9px;
  }

  .service-node {
    min-width: 96px;
    padding: 12px 10px 10px;
  }

  .service-node__glyph {
    width: 32px;
    height: 32px;
  }

  .service-node span {
    font-size: 12px;
  }

  .service-node small {
    display: none;
  }

  .service-section {
    padding: 72px 0;
  }

  .deliverable-grid,
  .capability-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }
}