.hero {

  isolation: isolate;

  --mouse-x: 0px;

  --mouse-y: 0px;

}

.particle-canvas {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 3;

  pointer-events: none;

  mix-blend-mode: screen;

  opacity: 0.92;

}

.hero-glow {

  position: absolute;

  z-index: 2;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(1px);

  will-change: transform;

}

.glow-one {

  width: 38vw;

  height: 38vw;

  min-width: 420px;

  min-height: 420px;

  right: -12vw;

  top: -17vw;

  background: radial-gradient(

    circle at 45% 52%,

    rgba(189, 213, 74, 0.16),

    rgba(25, 88, 141, 0.07) 38%,

    transparent 69%

  );

  border: 1px solid rgba(189, 213, 74, 0.17);

  box-shadow:

    0 0 0 65px rgba(189, 213, 74, 0.025),

    0 0 0 130px rgba(197, 220, 239, 0.018);

  animation: premiumOrbit 14s ease-in-out infinite;

  transform: translate(var(--mouse-x), var(--mouse-y));

}

.glow-two {

  width: 24vw;

  height: 24vw;

  min-width: 280px;

  min-height: 280px;

  right: 18vw;

  bottom: -16vw;

  background: radial-gradient(circle, rgba(36, 121, 188, 0.2), transparent 67%);

  animation: premiumPulse 9s ease-in-out infinite;

}

.hero-content {

  z-index: 5;

}

.trust-strip {

  z-index: 5;

}

.hero-content:before {

  content: "";

  position: absolute;

  width: 68px;

  height: 1px;

  left: -88px;

  top: 68px;

  background: linear-gradient(90deg, transparent, #bdd54a);

  box-shadow: 0 0 12px rgba(189, 213, 74, 0.7);

}

.hero h1 {

  position: relative;

  text-shadow: 0 12px 45px rgba(0, 0, 0, 0.28);

}

.hero h1 em {

  position: relative;

}

.hero h1 em:after {

  content: "";

  position: absolute;

  left: 1%;

  right: 0;

  bottom: -8px;

  height: 1px;

  background: linear-gradient(90deg, #bdd54a, transparent);

  transform: scaleX(0);

  transform-origin: left;

  animation: lineReveal 1.4s 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;

}

.hero-content > * {

  opacity: 0;

  transform: translateY(22px);

  animation: contentReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;

}

.hero-content .eyebrow {

  animation-delay: 0.1s;

}

.hero-content h1 {

  animation-delay: 0.22s;

}

.hero-content .hero-copy {

  animation-delay: 0.38s;

}

.hero-content .hero-actions {

  animation-delay: 0.52s;

}

@keyframes premiumOrbit {

  0%,

  100% {

    transform: translate3d(var(--mouse-x), var(--mouse-y), 0) rotate(0deg);

  }

  50% {

    transform: translate3d(

        calc(var(--mouse-x) - 30px),

        calc(var(--mouse-y) + 25px),

        0

      )

      rotate(7deg);

  }

}

@keyframes premiumPulse {

  0%,

  100% {

    opacity: 0.45;

    transform: scale(0.94);

  }

  50% {

    opacity: 1;

    transform: scale(1.1);

  }

}

@keyframes contentReveal {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

@keyframes lineReveal {

  to {

    transform: scaleX(1);

  }

}

@media (max-width: 800px) {

  .particle-canvas {

    opacity: 0.68;

  }

  .glow-one {

    right: -65vw;

    top: -10vw;

  }

  .glow-two {

    right: -25vw;

    bottom: -10vw;

  }

  .hero-content:before {

    display: none;

  }

}

@media (prefers-reduced-motion: reduce) {

  .glow-one,

  .glow-two,

  .hero-content > *,

  .hero h1 em:after {

    animation: none;

    opacity: 1;

    transform: none;

  }

}