.hero-content {
  position: relative;
  z-index: 6;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero-title-orbits {
  position: absolute;
  left: 50%;
  top: 13.25rem;
  width: min(82vw, 520px);
  height: min(82vw, 520px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.title-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: heroTitleOrbit 46s linear infinite;
}

.title-orbit-2 {
  inset: 8%;
  animation-duration: 58s;
  animation-direction: reverse;
}

.title-orbit-3 {
  inset: 16%;
  animation-duration: 72s;
}

.title-orb {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 18px currentColor;
}

.orb-cyan {
  background: #00d9ff;
  color: #00d9ff;
}

.orb-green {
  background: #00f29a;
  color: #00f29a;
}

.orb-purple {
  background: #c07aff;
  color: #c07aff;
}

@keyframes heroTitleOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-vial-mount .vial-svg {
  display: block;
  height: auto;
  opacity: 1;
  filter:
    drop-shadow(0 10px 32px var(--vial-shadow, rgba(0, 229, 255, 0.22)))
    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.08));
}

/* Stack above .hero-content and ambient layers (home.css used z-index:5; wins with !important) */
.hero .hero-vials,
.hero-vials {
  position: absolute;
  inset: 0;
  z-index: 28 !important;
  display: block !important;
  pointer-events: none;
  visibility: visible !important;
}

.hero .hero-vial-mount {
  position: relative;
  display: block;
  line-height: 0;
  min-width: 72px;
  min-height: 120px;
}

.hero-vial-float {
  position: absolute;
  opacity: 1;
  will-change: transform, opacity;
  animation: vialEntry 900ms cubic-bezier(0.2, 0.85, 0.22, 1) both;
}

.low-gpu .hero-vials,
.android-gpu .hero-vials {
  display: block !important;
}

.hero-vial-1 {
  top: 14%;
  right: clamp(6rem, 14vw, 16rem);
  --vial-shadow: rgba(0, 229, 255, 0.28);
  animation-delay: 60ms;
}

.hero-vial-2 {
  top: 52%;
  right: clamp(16rem, 28vw, 26rem);
  --vial-shadow: rgba(0, 255, 136, 0.26);
  animation-delay: 180ms;
}

.hero-vial-3 {
  top: 62%;
  right: clamp(2.5rem, 7vw, 9rem);
  --vial-shadow: rgba(176, 96, 255, 0.24);
  animation-delay: 300ms;
}

.hero-vial-float.is-floating-1 {
  animation: heroVialFloat1 6.8s ease-in-out infinite;
}

.hero-vial-float.is-floating-2 {
  animation: heroVialFloat2 7.6s ease-in-out infinite;
}

.hero-vial-float.is-floating-3 {
  animation: heroVialFloat3 7.2s ease-in-out infinite;
}

.vial-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 180px;
  height: 80px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(26px);
  opacity: 0.42;
}

.vial-glow--cyan {
  background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.34) 0%, rgba(0, 229, 255, 0) 72%);
}

.vial-glow--green {
  background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.3) 0%, rgba(0, 255, 136, 0) 72%);
}

.vial-glow--purple {
  background: radial-gradient(ellipse at center, rgba(176, 96, 255, 0.28) 0%, rgba(176, 96, 255, 0) 72%);
}

@keyframes vialEntry {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes heroVialFloat1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(-8px, -14px, 0) rotate(-1deg); }
}

@keyframes heroVialFloat2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50% { transform: translate3d(7px, -12px, 0) rotate(0.2deg); }
}

@keyframes heroVialFloat3 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg); }
  50% { transform: translate3d(-6px, -10px, 0) rotate(2deg); }
}

.hero-vial-1 .hero-vial-mount .vial-svg { width: 155px; }
.hero-vial-2 .hero-vial-mount .vial-svg { width: 140px; }
.hero-vial-3 .hero-vial-mount .vial-svg {
  width: 125px;
  filter:
    drop-shadow(0 6px 24px rgba(176, 96, 255, 0.1))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35))
    blur(0.4px);
}

@media (max-width: 768px) {
  .hero-title-orbits {
    top: 11.9rem;
    width: min(88vw, 420px);
    height: min(88vw, 420px);
  }

  /* ── Mobile: vials float BEHIND the text ──────────────────────────
     Desktop stacks three vials in front of .hero-content (z:28) as
     a product-beside-copy layout. On mobile the copy takes the full
     width so the vials become ambient decoration — BEHIND the
     headline + CTA (z:2, below .hero-content z:6), softened opacity
     so text stays readable, and reduced from three bottles to TWO
     so the hero doesn't feel crowded. The third bottle is hidden
     entirely at mobile widths. */
  .hero .hero-vials,
  .hero-vials {
    z-index: 2 !important;
    opacity: 0.38;
    mix-blend-mode: normal;
  }

  .hero-vial-mount .vial-svg {
    width: 138px !important;
  }

  /* Diagonal balance: cyan bottle leans off the top-right edge,
     green bottle leans off the bottom-left edge. Text column flows
     between them. The hero has overflow:hidden so the negative
     offsets clip cleanly. */
  .hero-vial-1 {
    top: 6%;
    right: 2%;
    left: auto;
    bottom: auto;
  }

  .hero-vial-2 {
    bottom: 8%;
    left: 2%;
    top: auto;
    right: auto;
  }

  /* Third vial hidden on mobile per request — two is enough. */
  .hero-vial-3 {
    display: none !important;
  }

  /* Glow follows each remaining vial — default left:50% top:56% of
     the vial mount still matches, just resized for the larger drop
     shadow on mobile. */
  .vial-glow {
    width: 150px;
    height: 68px;
    filter: blur(22px);
    opacity: 0.55;
  }
}

@media (max-width: 480px) {
  .hero-title-orbits {
    top: 10.6rem;
    width: min(95vw, 340px);
    height: min(95vw, 340px);
  }

  .hero-vial-mount .vial-svg {
    width: 112px !important;
  }

  .hero .hero-vials,
  .hero-vials {
    opacity: 0.32;
  }

  .vial-glow {
    width: 120px;
    height: 58px;
    filter: blur(18px);
    opacity: 0.5;
  }

  /* Tighter lean at small widths — two bottles hug the edges more
     so the full text column stays visible between them. */
  .hero-vial-1 {
    top: 5%;
    right: -2%;
    left: auto;
    bottom: auto;
  }
  .hero-vial-2 {
    bottom: 9%;
    left: -2%;
    top: auto;
    right: auto;
  }
  .hero-vial-3 {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-orbit {
    animation: none;
  }
}