.paths {
  --surface-luma: 0.94;
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(181, 233, 253, 0.44);
  background:
    radial-gradient(980px 480px at 102% -18%, rgba(40, 181, 223, 0.11), transparent 64%),
    radial-gradient(840px 380px at -10% 0%, rgba(58, 199, 238, 0.1), transparent 68%),
    linear-gradient(182deg, rgba(255, 255, 255, 0.998), rgba(243, 250, 255, 0.992));
  box-shadow: 0 24px 56px rgba(5, 22, 35, 0.15);
  padding: 1.18rem;
  overflow: hidden;
}

.paths::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(680px 280px at 8% 18%, rgba(110, 222, 248, 0.12), transparent 74%),
    radial-gradient(560px 260px at 92% 80%, rgba(220, 183, 96, 0.08), transparent 76%),
    linear-gradient(118deg, rgba(214, 245, 255, 0.06), transparent 42%, rgba(220, 184, 98, 0.04));
  mix-blend-mode: screen;
  opacity: 0.2;
  animation: paths-drift 13s ease-in-out infinite alternate;
}

.paths-head {
  --surface-luma: 0.95;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.36rem;
  margin-bottom: 0.74rem;
  border-radius: 14px;
  border: 1px solid rgba(184, 236, 254, 0.38);
  background:
    radial-gradient(460px 190px at 0% 0%, rgba(62, 203, 239, 0.16), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(245, 251, 255, 0.992));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 26px rgba(5, 22, 35, 0.12);
  padding: 0.92rem 0.96rem;
}

.paths-head .badge {
  justify-self: start;
}

.paths-head h2 {
  color: rgba(6, 56, 80, 0.998);
  text-shadow: none;
}

.paths-head p {
  color: rgba(8, 66, 93, 0.995);
  font-size: 1rem;
  font-weight: 560;
  line-height: 1.66;
  text-wrap: pretty;
}

.paths-grid {
  position: relative;
  z-index: 1;
  margin-top: 0.62rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.path-card {
  --surface-luma: 0.95;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0.62rem;
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(195, 240, 255, 0.5);
  background:
    radial-gradient(580px 310px at 0% -20%, rgba(71, 210, 245, 0.1), transparent 66%),
    linear-gradient(182deg, rgba(255, 255, 255, 0.998), rgba(246, 251, 255, 0.994));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 20px 46px rgba(5, 22, 35, 0.14);
  padding: 1rem;
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.path-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(90deg, rgba(54, 203, 242, 0.92), rgba(28, 148, 187, 0.86));
}

.path-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(225, 249, 255, 0.2);
  pointer-events: none;
}

.path-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  justify-self: start;
  border-radius: 999px;
  border: 1px solid var(--smart-chip-border, rgba(123, 198, 231, 0.34));
  background: var(--smart-chip-bg, rgba(11, 79, 113, 0.92));
  color: var(--smart-chip-text, var(--smart-heading, rgba(224, 246, 255, 0.96)));
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 760;
  padding: 0.2rem 0.5rem;
}

.path-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.56rem;
}

.path-emblem {
  position: relative;
  width: 2.46rem;
  height: 2.46rem;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(181, 230, 249, 0.46);
  background:
    radial-gradient(circle at 24% 18%, rgba(241, 252, 255, 0.9), transparent 58%),
    linear-gradient(158deg, rgba(72, 210, 247, 0.94), rgba(20, 129, 170, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(236, 251, 255, 0.44),
    0 10px 24px rgba(2, 11, 20, 0.24);
}

.path-emblem::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.06rem;
  height: 1.06rem;
  background: rgba(243, 252, 255, 0.99);
  -webkit-mask: var(--path-tag-mask, none) center / contain no-repeat;
  mask: var(--path-tag-mask, none) center / contain no-repeat;
}

.path-emblem::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 1px solid rgba(205, 241, 255, 0.26);
  pointer-events: none;
}

.path-tag::before {
  content: "";
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 999px;
  background: rgba(240, 251, 255, 0.99);
  -webkit-mask: var(--path-tag-mask, none) center / contain no-repeat;
  mask: var(--path-tag-mask, none) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(2, 11, 20, 0.32));
  transition: transform var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out);
}

.path-tag--msp {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v4H4V5Zm0 6h7v8H4v-8Zm9 0h7v3h-7v-3Zm0 5h7v3h-7v-3Z'/%3E%3C/svg%3E");
}

.path-tag--reseller {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM6.2 6H21l-1.7 8.2a2 2 0 0 1-2 1.6H9a2 2 0 0 1-2-1.6L5.4 2H2v2h1.9L6.2 16H19v-2H7.2L6.7 12h11.3l1-4.8H6.4l-.2-1.2Z'/%3E%3C/svg%3E");
}

.path-tag--comms {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 3v-3H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm3 5h10v2H7V9Zm0 4h7v2H7v-2Z'/%3E%3C/svg%3E");
}

.path-tag--trust {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 20 6v7c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V6l8-4Zm0 3.2L6 7.8V13c0 3.6 2.2 6.9 6 8.7 3.8-1.8 6-5.1 6-8.7V7.8l-6-2.6Z'/%3E%3C/svg%3E");
}

.path-tag--industries {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h14v18H5V3Zm2 2v14h10V5H7Zm2 2h2v2H9V7Zm4 0h2v2h-2V7Zm-4 4h2v2H9v-2Zm4 0h2v2h-2v-2Zm-4 4h2v2H9v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

.path-tag--advisory {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 2 8l10 5 10-5-10-5Zm-8 8 8 4 8-4v6l-8 4-8-4v-6Z'/%3E%3C/svg%3E");
}

.path-tag--ringcentral {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4a8 8 0 1 0 8 8h-3.2a4.8 4.8 0 1 1-4.8-4.8V4Zm0 6.2A1.8 1.8 0 1 0 13.8 12 1.8 1.8 0 0 0 12 10.2Z'/%3E%3C/svg%3E");
}

.path-tag--operate {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8a4 4 0 1 0 4 4 4 4 0 0 0-4-4Zm9 3h-2.1a7.9 7.9 0 0 0-.7-1.8l1.5-1.5-1.4-1.4-1.5 1.5a7.9 7.9 0 0 0-1.8-.7V5h-2v2.1a7.9 7.9 0 0 0-1.8.7L8.7 6.3 7.3 7.7l1.5 1.5a7.9 7.9 0 0 0-.7 1.8H6v2h2.1a7.9 7.9 0 0 0 .7 1.8l-1.5 1.5 1.4 1.4 1.5-1.5a7.9 7.9 0 0 0 1.8.7V19h2v-2.1a7.9 7.9 0 0 0 1.8-.7l1.5 1.5 1.4-1.4-1.5-1.5a7.9 7.9 0 0 0 .7-1.8H21Z'/%3E%3C/svg%3E");
}

.path-tag--var {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM6.2 6H21l-1.7 8.2a2 2 0 0 1-2 1.6H9a2 2 0 0 1-2-1.6L5.4 2H2v2h1.9L6.2 16H19v-2H7.2L6.7 12h11.3l1-4.8H6.4l-.2-1.2Z'/%3E%3C/svg%3E");
}

.path-tag--integrate {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7h4v2H7a3 3 0 0 0 0 6h4v2H7a5 5 0 0 1 0-10Zm6 0h4a5 5 0 0 1 0 10h-4v-2h4a3 3 0 0 0 0-6h-4V7Zm-3 4h4v2h-4v-2Z'/%3E%3C/svg%3E");
}

.path-tag--registry {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h9l5 5v13H6V3Zm2 2v14h10V9h-4V5H8Zm2 6h6v2h-6v-2Zm0 4h6v2h-6v-2Z'/%3E%3C/svg%3E");
}

.path-tag--industry {
  --path-tag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h14v18H5V3Zm2 2v14h10V5H7Zm2 2h2v2H9V7Zm4 0h2v2h-2V7Zm-4 4h2v2H9v-2Zm4 0h2v2h-2v-2Zm-4 4h2v2H9v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

.path-title {
  margin: 0;
  font-weight: 790;
  letter-spacing: -0.02em;
  color: rgba(5, 55, 79, 0.999) !important;
  font-size: 1.2rem;
  line-height: 1.3;
  text-wrap: balance;
  text-shadow: none;
}

.path-subtitle {
  margin: 0;
  color: rgba(6, 62, 88, 0.998) !important;
  font-size: 1.02rem;
  line-height: 1.66;
  font-weight: 580;
  text-wrap: pretty;
}

.path-bullets {
  margin: 0;
  padding-left: 1rem;
  color: rgba(7, 64, 91, 0.998) !important;
  font-size: 0.98rem;
  line-height: 1.66;
  font-weight: 560;
}

.path-bullets li::marker {
  color: rgba(10, 97, 132, 0.88);
}

.path-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.48rem;
  margin-top: auto;
  padding-top: 0.14rem;
}

.path-card .cta-secondary {
  background: var(--smart-chip-bg, rgba(240, 250, 255, 0.92));
  border-color: var(--smart-chip-border, rgba(118, 194, 224, 0.44));
  color: var(--smart-chip-text, var(--smart-heading, rgba(7, 64, 90, 0.996)));
}

.path-card:hover {
  transform: translateY(-2px);
  border-color: rgba(114, 197, 229, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 56px rgba(5, 22, 35, 0.2);
}

.path-card:hover .path-tag::before {
  transform: translateY(-1px) scale(1.05);
  filter: drop-shadow(0 2px 4px rgba(2, 11, 20, 0.34));
}

.path-card--msp {
  background:
    radial-gradient(520px 280px at 0% -18%, rgba(61, 204, 241, 0.14), transparent 66%),
    linear-gradient(182deg, rgba(255, 255, 255, 0.998), rgba(246, 251, 255, 0.994));
}

.path-card--reseller {
  background:
    radial-gradient(520px 280px at 0% -18%, rgba(220, 181, 96, 0.14), transparent 66%),
    linear-gradient(182deg, rgba(255, 255, 255, 0.998), rgba(246, 251, 255, 0.994));
}

.path-card--comms {
  background:
    radial-gradient(520px 280px at 0% -18%, rgba(96, 220, 248, 0.14), transparent 66%),
    linear-gradient(182deg, rgba(255, 255, 255, 0.998), rgba(246, 251, 255, 0.994));
}

.path-card--trust {
  background:
    radial-gradient(520px 280px at 0% -18%, rgba(120, 196, 248, 0.14), transparent 66%),
    linear-gradient(182deg, rgba(255, 255, 255, 0.998), rgba(246, 251, 255, 0.994));
}

.path-card--industries {
  background:
    radial-gradient(520px 280px at 0% -18%, rgba(109, 215, 204, 0.13), transparent 66%),
    linear-gradient(182deg, rgba(255, 255, 255, 0.998), rgba(246, 251, 255, 0.994));
}

.path-card--advisory {
  background:
    radial-gradient(520px 280px at 0% -18%, rgba(223, 183, 98, 0.13), transparent 66%),
    linear-gradient(182deg, rgba(255, 255, 255, 0.998), rgba(246, 251, 255, 0.994));
}

@keyframes paths-drift {
  from {
    transform: translateY(-6px) scale(1);
  }
  to {
    transform: translateY(6px) scale(1.02);
  }
}

.path-card--msp::before,
.path-card--msp .path-tag {
  background-image: linear-gradient(90deg, rgba(60, 208, 244, 0.94), rgba(32, 160, 196, 0.9));
}

.path-card--msp .path-emblem {
  background:
    radial-gradient(circle at 26% 22%, rgba(236, 251, 255, 0.88), transparent 58%),
    linear-gradient(156deg, rgba(60, 208, 244, 0.94), rgba(32, 160, 196, 0.9));
}

.path-card--reseller::before,
.path-card--reseller .path-tag {
  background-image: linear-gradient(90deg, rgba(225, 184, 99, 0.92), rgba(171, 128, 48, 0.9));
}

.path-card--reseller .path-emblem {
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 249, 236, 0.9), transparent 58%),
    linear-gradient(156deg, rgba(225, 184, 99, 0.92), rgba(171, 128, 48, 0.9));
}

.path-card--comms::before,
.path-card--comms .path-tag {
  background-image: linear-gradient(90deg, rgba(109, 221, 250, 0.92), rgba(41, 163, 202, 0.9));
}

.path-card--comms .path-emblem {
  background:
    radial-gradient(circle at 26% 22%, rgba(238, 251, 255, 0.88), transparent 58%),
    linear-gradient(156deg, rgba(109, 221, 250, 0.92), rgba(41, 163, 202, 0.9));
}

.path-card--ringcentral::before,
.path-card--ringcentral .path-tag {
  background-image: linear-gradient(90deg, rgba(225, 186, 102, 0.94), rgba(173, 129, 48, 0.92));
}

.path-card--trust::before,
.path-card--trust .path-tag {
  background-image: linear-gradient(90deg, rgba(133, 201, 252, 0.92), rgba(68, 132, 214, 0.9));
}

.path-card--trust .path-emblem {
  background:
    radial-gradient(circle at 26% 22%, rgba(239, 251, 255, 0.88), transparent 58%),
    linear-gradient(156deg, rgba(133, 201, 252, 0.92), rgba(68, 132, 214, 0.9));
}

.path-card--industries::before,
.path-card--industries .path-tag {
  background-image: linear-gradient(90deg, rgba(95, 224, 212, 0.92), rgba(34, 156, 146, 0.9));
}

.path-card--industries .path-emblem {
  background:
    radial-gradient(circle at 26% 22%, rgba(236, 251, 248, 0.88), transparent 58%),
    linear-gradient(156deg, rgba(95, 224, 212, 0.92), rgba(34, 156, 146, 0.9));
}

.path-card--advisory::before,
.path-card--advisory .path-tag {
  background-image: linear-gradient(90deg, rgba(226, 186, 104, 0.92), rgba(178, 133, 53, 0.9));
}

.path-card--advisory .path-emblem {
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 249, 236, 0.9), transparent 58%),
    linear-gradient(156deg, rgba(226, 186, 104, 0.92), rgba(178, 133, 53, 0.9));
}

.path-card--operate::before,
.path-card--operate .path-tag {
  background-image: linear-gradient(90deg, rgba(70, 210, 246, 0.92), rgba(33, 163, 201, 0.9));
}

.path-card--var::before,
.path-card--var .path-tag {
  background-image: linear-gradient(90deg, rgba(221, 181, 97, 0.92), rgba(165, 122, 44, 0.9));
}

.path-card--integrate::before,
.path-card--integrate .path-tag {
  background-image: linear-gradient(90deg, rgba(98, 220, 250, 0.92), rgba(38, 160, 199, 0.9));
}

.path-card--registry::before,
.path-card--registry .path-tag {
  background-image: linear-gradient(90deg, rgba(140, 204, 252, 0.92), rgba(75, 136, 214, 0.9));
}

.path-card--industry::before,
.path-card--industry .path-tag {
  background-image: linear-gradient(90deg, rgba(95, 223, 211, 0.92), rgba(35, 155, 145, 0.9));
}

.path-card .path-tag {
  border-color: rgba(197, 238, 254, 0.48);
  box-shadow: inset 0 1px 0 rgba(243, 252, 255, 0.24);
}

@media (max-width: 980px) {
  .paths {
    padding: 0.92rem;
  }

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

@media (min-width: 1220px) {
  .paths-grid {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .paths::after {
    animation: none;
  }
}