.hero-scroll-cue {
  position: absolute;
  z-index: 12;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  color: #d5eaff;
  animation: hero-cue-reveal .7s ease both;
}
.hero-scroll-cue[hidden] { display: none; }
.hero-scroll-label { font-size: 12px; letter-spacing: .08em; }
.hero-scroll-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 48px;
  border: 1px solid #b6d7ff55;
  border-radius: 24px;
  background: #8ed9ff08;
  font-size: 23px;
  animation: hero-cue-drift 2s ease-in-out infinite;
}
.hero-scroll-cue:hover .hero-scroll-arrow { border-color: #8ed9ff; background: #8ed9ff18; }
.hero-scroll-cue:focus-visible { outline: 2px solid #8ed9ff; outline-offset: 3px; border-radius: 12px; }
@keyframes hero-cue-reveal { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-cue-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
@media (max-width: 767px) {
  .hero-scroll-cue { left: auto; right: 18px; bottom: 14px; transform: none; padding: 8px; }
  .hero-scroll-label { max-width: 105px; font-size: 11px; line-height: 1.5; }
  .hero-scroll-arrow { width: 32px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue, .hero-scroll-arrow { animation: none; }
}