/*
  Hero media: app overview with floating sales-channel icons.
  Hides the original prompt-card animation inside the blue panel.
*/

[data-framer-name="Hero Media Wrapper"].framer-dfjnti {
  height: 560px !important;
  overflow: hidden !important;
}

[data-framer-name="Hero Media Wrapper"] .framer-sp7ffo-container {
  display: none !important;
}

.nepton-hero-stage {
  --overview-half: min(300px, 26%);
  --icon-size: 78px;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.nepton-hero-overview {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(600px, 52%);
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  border: 4px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 50px rgba(18, 42, 84, 0.18);
  background: #fff;
  display: block;
}

.nepton-hero-icon {
  position: absolute;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 14px 28px rgba(18, 42, 84, 0.18);
  background: #fff;
  animation: nepton-float 5.4s ease-in-out infinite;
}

.nepton-hero-icon.is-left-1 {
  left: calc(50% - var(--overview-half) - var(--icon-size) - 18px);
  top: 14%;
  animation-duration: 5.2s;
}

.nepton-hero-icon.is-left-2 {
  left: calc(50% - var(--overview-half) - var(--icon-size) - 64px);
  top: 42%;
  animation-duration: 6.1s;
  animation-delay: -1.4s;
}

.nepton-hero-icon.is-left-3 {
  left: calc(50% - var(--overview-half) - var(--icon-size) - 10px);
  top: 68%;
  animation-duration: 5.7s;
  animation-delay: -2.6s;
}

.nepton-hero-icon.is-right-1 {
  left: calc(50% + var(--overview-half) + 22px);
  top: 22%;
  animation-duration: 5.9s;
  animation-delay: -0.8s;
}

.nepton-hero-icon.is-right-2 {
  left: calc(50% + var(--overview-half) + 58px);
  top: 56%;
  animation-duration: 6.4s;
  animation-delay: -2.1s;
}

@keyframes nepton-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@media (max-width: 1199.98px) {
  [data-framer-name="Hero Media Wrapper"].framer-dfjnti {
    height: 500px !important;
  }

  .nepton-hero-stage {
    --overview-half: min(250px, 26%);
    --icon-size: 66px;
  }

  .nepton-hero-overview {
    width: min(500px, 52%);
  }

  .nepton-hero-icon {
    border-radius: 18px;
  }
}

@media (max-width: 809.98px) {
  [data-framer-name="Hero Media Wrapper"].framer-dfjnti {
    height: 420px !important;
  }

  .nepton-hero-stage {
    --overview-half: min(112px, 25%);
    --icon-size: 46px;
  }

  .nepton-hero-overview {
    width: min(224px, 50%);
    border-width: 3px;
    border-radius: 14px;
  }

  .nepton-hero-icon {
    border-radius: 14px;
  }

  .nepton-hero-icon.is-left-1,
  .nepton-hero-icon.is-left-3 {
    left: calc(50% - var(--overview-half) - var(--icon-size) - 6px);
  }

  .nepton-hero-icon.is-left-2 {
    left: calc(50% - var(--overview-half) - var(--icon-size) - 18px);
  }

  .nepton-hero-icon.is-right-1 {
    left: calc(50% + var(--overview-half) + 8px);
  }

  .nepton-hero-icon.is-right-2 {
    left: calc(50% + var(--overview-half) + 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nepton-hero-icon {
    animation: none;
  }
}