#root main section[data-cms-hero-template]:not([data-cms-hero-template="original"]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0a1628 !important;
  color: #f8fafc;
}

#root main section[data-cms-hero-template]:not([data-cms-hero-template="original"]) > * {
  position: relative;
  z-index: 1;
}

#root main section[data-cms-hero-template]::before,
#root main section[data-cms-hero-template]::after {
  position: absolute;
  z-index: 0;
  inset: -18%;
  content: "";
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
}

#root main section[data-cms-hero-template="aurora"] {
  background-image: radial-gradient(ellipse at 18% 18%, rgba(34, 211, 238, .18), transparent 42%), linear-gradient(135deg, #081827 0%, #10213b 55%, #14132e 100%) !important;
}
#root main section[data-cms-hero-template="aurora"]::before {
  opacity: .76;
  background: radial-gradient(ellipse at 18% 42%, rgba(34, 211, 238, .42), transparent 38%), radial-gradient(ellipse at 79% 31%, rgba(129, 140, 248, .45), transparent 42%), radial-gradient(ellipse at 57% 88%, rgba(217, 70, 239, .26), transparent 42%);
  filter: blur(38px);
}
#root main section[data-cms-hero-template="aurora"]::after {
  opacity: .34;
  background: linear-gradient(116deg, transparent 14%, rgba(103, 232, 249, .2) 35%, transparent 49%, rgba(192, 132, 252, .19) 69%, transparent 83%);
  filter: blur(18px);
}

#root main section[data-cms-hero-template="orbital"] {
  background-image: radial-gradient(ellipse at 50% 130%, rgba(6, 182, 212, .24), transparent 52%), linear-gradient(145deg, #071524, #0d1d35 56%, #101b31) !important;
}
#root main section[data-cms-hero-template="orbital"]::before {
  inset: 7% 16%;
  opacity: .62;
  border: 1px solid rgba(103, 232, 249, .33);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(103, 232, 249, .035), 0 0 0 72px rgba(129, 140, 248, .04), inset 0 0 80px rgba(34, 211, 238, .12);
}
#root main section[data-cms-hero-template="orbital"]::after {
  inset: 22% 28%;
  opacity: .5;
  border: 1px solid rgba(196, 181, 253, .32);
  border-radius: 50%;
  transform: rotate(-24deg) scaleX(1.3);
}

#root main section[data-cms-hero-template="mesh"] {
  background-image: radial-gradient(ellipse at 10% 4%, rgba(6, 182, 212, .28), transparent 44%), radial-gradient(ellipse at 86% 14%, rgba(139, 92, 246, .25), transparent 42%), linear-gradient(150deg, #09172a, #102039 58%, #0b182a) !important;
}
#root main section[data-cms-hero-template="mesh"]::before {
  opacity: .7;
  background: radial-gradient(ellipse at 25% 78%, rgba(236, 72, 153, .34), transparent 43%), radial-gradient(ellipse at 71% 68%, rgba(245, 158, 11, .23), transparent 38%), radial-gradient(ellipse at 52% 20%, rgba(34, 211, 238, .3), transparent 38%);
  filter: blur(52px);
}

#root main section[data-cms-hero-template="signal"] {
  background-image: radial-gradient(ellipse at 88% 12%, rgba(6, 182, 212, .2), transparent 38%), linear-gradient(145deg, #081827, #0e1e32 68%, #0a1729) !important;
}
#root main section[data-cms-hero-template="signal"]::before {
  inset: 0;
  opacity: .26;
  background-image: linear-gradient(rgba(103, 232, 249, .24) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 232, 249, .2) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(115deg, transparent, #000 46%, #000 74%, transparent);
}
#root main section[data-cms-hero-template="signal"]::after {
  opacity: .6;
  background: radial-gradient(circle at 78% 30%, rgba(34, 211, 238, .25), transparent 24%), radial-gradient(circle at 88% 66%, rgba(129, 140, 248, .18), transparent 27%);
  filter: blur(22px);
}

#root main section[data-cms-hero-template="prism"] {
  background-image: linear-gradient(115deg, #0b1427 4%, #16213b 52%, #10182d 100%) !important;
}
#root main section[data-cms-hero-template="prism"]::before {
  inset: -12% 24% -12% -15%;
  opacity: .76;
  background: linear-gradient(112deg, transparent 4%, rgba(34, 211, 238, .24) 26%, rgba(129, 140, 248, .26) 43%, transparent 58%);
  clip-path: polygon(0 0, 100% 8%, 78% 100%, 9% 82%);
  filter: blur(12px);
}
#root main section[data-cms-hero-template="prism"]::after {
  inset: 2% -20% -24% 48%;
  opacity: .56;
  background: linear-gradient(145deg, transparent 18%, rgba(192, 132, 252, .23) 42%, rgba(34, 211, 238, .12) 58%, transparent 76%);
  clip-path: polygon(24% 0, 100% 18%, 87% 100%, 0 73%);
}

#root main section[data-cms-hero-template][data-cms-hero-motion="animated"]::before {
  animation: cms-hero-float 18s ease-in-out infinite alternate;
}
#root main section[data-cms-hero-template][data-cms-hero-motion="animated"]::after {
  animation: cms-hero-drift 24s ease-in-out infinite alternate;
}
#root main section[data-cms-hero-template="original"][data-cms-hero-motion="animated"]::before {
  opacity: .35;
  background: radial-gradient(ellipse at 18% 24%, rgba(34, 211, 238, .34), transparent 42%), radial-gradient(ellipse at 86% 78%, rgba(168, 85, 247, .32), transparent 46%);
  filter: blur(38px);
}

@keyframes cms-hero-float {
  from { transform: translate3d(-1.5%, -1%, 0) scale(.98); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}
@keyframes cms-hero-drift {
  from { transform: translate3d(1%, 0, 0) rotate(-2deg); }
  to { transform: translate3d(-1%, 1%, 0) rotate(2deg); }
}

@media (max-width: 640px) {
  #root main section[data-cms-hero-template] {
    background-position: center;
    background-size: cover;
  }
  #root main section[data-cms-hero-template]::before,
  #root main section[data-cms-hero-template]::after {
    filter: blur(28px);
  }
  #root main section[data-cms-hero-template="signal"]::before {
    background-size: 34px 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root main section[data-cms-hero-template]::before,
  #root main section[data-cms-hero-template]::after {
    animation: none !important;
  }
}
