@property --perimeter-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

:is(.service-argument-grid > article, .service-funnel__steps > li) {
  --card-color: 161, 161, 170;
  --perimeter-angle: 0turn;
  --perimeter-light: conic-gradient(from var(--perimeter-angle) at 50% 50%,
    transparent 0deg,
    rgba(161, 161, 170, .12) 35deg,
    rgba(161, 161, 170, .95) 75deg,
    rgba(167, 139, 250, 1) 115deg,
    rgba(52, 211, 153, 1) 148deg,
    rgba(209, 250, 229, 1) 158deg,
    rgba(52, 211, 153, .5) 176deg,
    transparent 200deg);
  isolation: isolate;
}
:is(.service-argument-grid > article, .service-funnel__steps > li):nth-child(3n + 2) { --card-color: 167, 139, 250; }
:is(.service-argument-grid > article, .service-funnel__steps > li):nth-child(3n + 3) { --card-color: 52, 211, 153; }
body:not(.conversion-page) .service-funnel__steps > li {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(var(--card-color), .32);
  border-radius: 24px;
  background: #101925;
}
:is(.service-argument-grid > article, .service-funnel__steps > li)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  box-sizing: border-box;
  padding: 3px;
  background: var(--perimeter-light);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(var(--card-color), .6));
}
.has-section-motion :is(.service-argument-grid > article, .service-funnel__steps > li) {
  --perimeter-angle: 0turn;
}
.has-section-motion :is(.service-argument-grid > article, .service-funnel__steps > li).is-light-visible {
  animation: card-light-orbit 6000ms ease-in-out 1 forwards;
}
.has-section-motion :is(.service-argument-grid > article, .service-funnel__steps > li).is-light-complete {
  --perimeter-angle: 1turn;
  animation: none;
}
.has-section-motion :is(.service-argument-grid > article, .service-funnel__steps > li)::before {
  opacity: .35;
  transition: opacity 600ms ease;
}
.has-section-motion :is(.service-argument-grid > article, .service-funnel__steps > li).is-light-visible::before {
  opacity: 1;
}
:is(.service-argument-grid > article, .service-funnel__steps > li) > .card-inner-glow {
  --glow-width: clamp(14px, 2vw, 24px);
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  filter: blur(10px);
  opacity: .85;
  pointer-events: none;
}
:is(.service-argument-grid > article, .service-funnel__steps > li) > .card-inner-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-sizing: border-box;
  padding: var(--glow-width);
  background: var(--perimeter-light);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.has-section-motion :is(.service-argument-grid > article, .service-funnel__steps > li) > .card-inner-glow {
  opacity: .15;
  transition: opacity 600ms ease;
}
.has-section-motion :is(.service-argument-grid > article, .service-funnel__steps > li).is-light-visible > .card-inner-glow {
  opacity: .85;
}
.service-funnel__steps > li > :is(p, .process-icon) { position: relative; z-index: 1; }
.service-funnel__steps .process-icon {
  position: relative;
  color: rgb(var(--card-color));
  border-color: rgba(var(--card-color), .48);
  background: rgba(var(--card-color), .12);
}
.process-icon.is-draw-ready .process-icon__stroke {
  opacity: 0;
  stroke-dasharray: var(--stroke-length);
  stroke-dashoffset: var(--stroke-length);
}
.process-icon.is-icon-visible .process-icon__stroke {
  animation: process-icon-draw 1400ms cubic-bezier(.4, 0, .2, 1) var(--stroke-delay) both;
}
.process-icon.is-icon-complete .process-icon__stroke {
  opacity: 1;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
.process-icon.is-draw-ready::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(var(--card-color), .65);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.process-icon.is-icon-visible::after { animation: process-icon-halo 1700ms ease-out both; }
.process-icon.is-icon-complete::after { animation: none; opacity: 0; }
@keyframes card-light-orbit {
  from { --perimeter-angle: 0turn; }
  to { --perimeter-angle: 1turn; }
}
@keyframes process-icon-draw {
  0% { opacity: 0; stroke-dashoffset: var(--stroke-length); }
  8% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes process-icon-halo {
  0% { opacity: 0; transform: scale(.82); }
  30% { opacity: .65; }
  100% { opacity: 0; transform: scale(1.22); }
}
@media (max-width: 640px) {
  body:not(.conversion-page) .service-funnel__steps > li { padding: 18px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .has-section-motion :is(.service-argument-grid > article, .service-funnel__steps > li) { --perimeter-angle: 1turn; animation: none; }
  .has-section-motion :is(.service-argument-grid > article, .service-funnel__steps > li)::before { opacity: .7; filter: none; transition: none; }
  .has-section-motion :is(.service-argument-grid > article, .service-funnel__steps > li) > .card-inner-glow { opacity: .5; transition: none; }
  .process-icon.is-draw-ready .process-icon__stroke { opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .process-icon.is-draw-ready::after { animation: none; opacity: 0; }
}