html body .method .architecture-scene {
  background:
    radial-gradient(ellipse at 76% 20%, rgba(78, 108, 220, .075), transparent 34rem),
    radial-gradient(ellipse at 22% 82%, rgba(222, 39, 55, .055), transparent 31rem),
    linear-gradient(145deg, rgba(15, 23, 35, .56), rgba(7, 12, 19, .42) 76%) padding-box,
    linear-gradient(125deg, rgba(255, 255, 255, .20), rgba(111, 135, 235, .13) 45%, rgba(239, 41, 50, .23)) border-box !important;
}

html body .method .architecture-visual.system-stage {
  background: transparent !important;
  box-shadow: none !important;
}

.hero [data-count],
.hero .phone-row strong,
.hero .mobile-status-row strong {
  font-variant-numeric: tabular-nums;
}

.hero .is-value-changing {
  animation: live-value-pulse .68s cubic-bezier(.16, 1, .3, 1) both;
}

.hero .chart-line,
.hero .chart-area,
.hero .mobile-chart-line,
.hero .mobile-chart-area {
  --live-chart-scale: 1;
  --live-chart-shift: 0px;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translate3d(0, var(--live-chart-shift), 0) scaleY(var(--live-chart-scale));
  transition: transform .84s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}

.hero .phone-chart i {
  transition: height .72s cubic-bezier(.16, 1, .3, 1), background-color .3s ease;
}

@keyframes live-value-pulse {
  0% { color: inherit; text-shadow: none; transform: translate3d(0, 0, 0); }
  42% { color: #fff; text-shadow: 0 0 16px rgba(113, 133, 255, .30); transform: translate3d(0, -1px, 0); }
  100% { color: inherit; text-shadow: none; transform: translate3d(0, 0, 0); }
}

@media (max-width: 720px) {
  html body .method .architecture-scene {
    background:
      radial-gradient(ellipse at 72% 18%, rgba(78, 108, 220, .07), transparent 28rem),
      radial-gradient(ellipse at 18% 84%, rgba(222, 39, 55, .05), transparent 24rem),
      linear-gradient(145deg, rgba(15, 23, 35, .50), rgba(7, 12, 19, .37) 76%) padding-box,
      linear-gradient(125deg, rgba(255, 255, 255, .18), rgba(111, 135, 235, .12) 45%, rgba(239, 41, 50, .21)) border-box !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .is-value-changing {
    animation: none !important;
  }

  .hero .chart-line,
  .hero .chart-area,
  .hero .mobile-chart-line,
  .hero .mobile-chart-area,
  .hero .phone-chart i {
    transition: none !important;
  }
}