.hero-visual {
  transform-style: preserve-3d;
}

.visual-orbit {
  animation: pma-orbit 18s linear infinite;
  box-shadow: 0 0 28px rgba(30, 216, 237, .08), inset 0 0 24px rgba(86, 125, 255, .06);
}

.orbit-b {
  animation-direction: reverse;
  animation-duration: 24s;
}

.growth-card {
  transform-style: preserve-3d;
  animation: pma-card-float 7s ease-in-out infinite;
  transition: transform .35s ease, box-shadow .35s ease;
}

.hero-visual:hover .growth-card {
  transform: rotateY(-4deg) rotateX(2deg) translateZ(18px);
  box-shadow: 0 32px 90px #000b, 0 0 60px #12c2d02c;
}

.orb {
  animation: pma-orb-float 6s ease-in-out infinite, pma-orb-glow 4s ease-in-out infinite alternate;
  transform-style: preserve-3d;
}

.floating-chip {
  animation: pma-chip-float 5s ease-in-out infinite;
}

.chip-b {
  animation-delay: -2.4s;
}

.hero-spark {
  animation: pma-spark 3.8s ease-in-out infinite;
}

.service-card,
.portfolio-card,
.pricing-card,
.metric-card {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.75,.25,1), border-color .3s ease, box-shadow .3s ease;
}

.service-card:hover,
.portfolio-card:hover,
.pricing-card:hover,
.metric-card:hover {
  transform: perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-7px) translateZ(8px);
  box-shadow: 0 22px 48px #0007, 0 0 28px #21d9eb17;
}

.button.primary {
  background-size: 180% 180%;
  animation: pma-gradient 7s ease infinite;
}

@keyframes pma-orbit {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

@keyframes pma-card-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes pma-orb-float {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  50% { translate: 0 -16px; rotate: 5deg; }
}

@keyframes pma-orb-glow {
  from { filter: saturate(.9) brightness(.95); }
  to { filter: saturate(1.25) brightness(1.15); }
}

@keyframes pma-chip-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

@keyframes pma-spark {
  0%, 100% { opacity: .65; scale: .88; }
  50% { opacity: 1; scale: 1.12; }
}

@keyframes pma-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}