html.js .is-scroll-card {
  --scroll-x: 0px;
  --scroll-y: 34px;
  --scroll-z: 0px;
  --scroll-rx: 0deg;
  --scroll-ry: 0deg;
  --scroll-delay: calc(var(--scroll-card-order, 0) * 16ms);
  opacity: .001 !important;
  transform: translate3d(var(--scroll-x), var(--scroll-y), 0) scale(.98) !important;
  transform-origin: center center;
  transition:
    opacity .48s ease var(--scroll-delay),
    transform .66s cubic-bezier(.16,1,.3,1) var(--scroll-delay),
    border-color .26s ease,
    box-shadow .26s ease !important;
  will-change: auto;
}

html.js .is-scroll-card.is-card-visible {
  opacity: 1 !important;
  transform: translate3d(0,0,0) scale(1) !important;
}

html.js .is-scroll-card.is-card-settled {
  --scroll-delay: 0ms;
  will-change: auto;
}


html.js .service-card:nth-child(odd) { --scroll-x: -30px; }
html.js .service-card:nth-child(even) { --scroll-x: 30px; }

html.js .value-card:nth-child(odd) { --scroll-x: 26px; --scroll-y: 28px; }
html.js .value-card:nth-child(even) { --scroll-x: -26px; --scroll-y: 28px; }

html.js .system-plane-ui { --scroll-x: -48px; --scroll-y: 26px; --scroll-z: -88px; --scroll-ry: 7deg; --scroll-delay: 0ms; }
html.js .system-plane-logic { --scroll-x: 48px; --scroll-y: 26px; --scroll-z: -88px; --scroll-ry: -7deg; --scroll-delay: 45ms; }
html.js .system-plane-data { --scroll-x: -48px; --scroll-y: 26px; --scroll-z: -88px; --scroll-ry: 7deg; --scroll-delay: 0ms; }
html.js .system-plane-api { --scroll-x: 48px; --scroll-y: 26px; --scroll-z: -88px; --scroll-ry: -7deg; --scroll-delay: 45ms; }

html.js .method .system-plane.is-scroll-card {
  transform:
    perspective(1100px)
    translate3d(var(--scroll-x), var(--scroll-y), var(--scroll-z))
    rotateX(7deg)
    rotateY(var(--scroll-ry))
    scale(.965) !important;
  transition:
    opacity .40s ease var(--scroll-delay),
    transform .56s cubic-bezier(.16,1,.3,1) var(--scroll-delay),
    border-color .24s ease,
    box-shadow .24s ease !important;
}

html.js .method .system-plane.is-scroll-card.is-card-visible {
  transform: perspective(1100px) translate3d(0,0,0) rotateX(0) rotateY(0) scale(1) !important;
}


html body .service-card.is-scroll-card,
html body .value-card.is-scroll-card {
  border-color: rgba(226,235,250,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.09),
    0 18px 34px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.method .system-stage {
  perspective: 1200px;
  transform-style: preserve-3d;
}

html body .method .system-plane {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(220,231,249,.34);
  border-radius: 20px;
  background:
    radial-gradient(circle at 84% 7%, rgba(108,135,241,.13), transparent 13rem),
    linear-gradient(148deg, #1d2b3e 0%, #131e2d 52%, #0d1622 100%) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.11),
    0 8px 0 -4px #070d15,
    0 24px 42px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(3,7,12,.46) !important;
}

html body .method .system-plane::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1px;
  display: block !important;
  border-radius: 18px;
  pointer-events: none;
  background:
    linear-gradient(122deg, rgba(255,255,255,.07), transparent 25% 68%, rgba(91,119,224,.035)),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 34%);
  opacity: .78;
}

html body .method .system-plane::after {
  z-index: 3;
  inset: 0;
  border: 0;
  border-top: 1px solid rgba(255,105,112,.82);
  border-left: 1px solid rgba(255,105,112,.36);
  border-right: 1px solid rgba(126,151,235,.14);
  border-radius: inherit;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  pointer-events: none;
}

.method .system-plane > * {
  position: relative;
  z-index: 2;
}

.method .system-plane p {
  max-width: 34ch;
  margin: 14px 0 0;
  color: rgba(231,237,247,.67);
  font-size: .72rem;
  line-height: 1.45;
}

.method .system-plane strong {
  letter-spacing: .01em;
  text-shadow: 0 8px 22px rgba(0,0,0,.32);
}

.method .system-plane small {
  margin-top: 5px;
}


html.js .service-card.is-scroll-card:not(.is-card-settled),
html.js .value-card.is-scroll-card:not(.is-card-settled),
html.js .method .system-plane.is-scroll-card:not(.is-card-settled) {
  box-shadow: 0 10px 22px rgba(0,0,0,.28) !important;
}

@media (hover: hover) and (pointer: fine) {
  html.js .is-scroll-card.is-card-settled:hover {
    border-color: rgba(235,242,255,.38);
    transform: translate3d(0,-5px,0) scale(1.008) !important;
  }

  html.js .method .system-plane.is-card-settled:hover {
    box-shadow:
      0 2px 0 rgba(255,255,255,.13),
      0 10px 0 -5px #070d15,
      0 28px 48px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 0 0 1px rgba(3,7,12,.46) !important;
    transform: perspective(1100px) translate3d(0,-5px,16px) rotateX(0) rotateY(0) scale(1.008) !important;
  }
}

@media (max-width: 900px) {
  html.js .is-scroll-card {
    --scroll-x: 0px;
    --scroll-y: 28px;
    --scroll-z: 0px;
    --scroll-rx: 0deg;
    --scroll-ry: 0deg;
    --scroll-delay: 0ms;
  }

  html.js .system-plane-ui,
  html.js .system-plane-data { --scroll-x: -24px; --scroll-ry: 4deg; }

  html.js .system-plane-logic,
  html.js .system-plane-api { --scroll-x: 24px; --scroll-ry: -4deg; }
}

@media (max-width: 720px) {
  html body .method .system-plane {
    min-height: 166px;
    padding-bottom: 24px;
  }

  .method .system-plane p {
    max-width: 31ch;
    margin-top: 11px;
    font-size: .69rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .is-scroll-card,
  html.js .is-scroll-card.is-card-visible,
  html.js .is-scroll-card.is-card-settled {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}