.scroll-hint {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: clamp(2.75rem, 5vh, 4rem) !important;
  left: 50% !important;
  z-index: 25;
  display: flex !important;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  color: #2c6e63;
  background: rgba(253, 251, 248, 0.82);
  border: 1px solid rgba(44, 110, 99, 0.28);
  border-radius: 9999px;
  box-shadow: 0 5px 18px rgba(44, 110, 99, 0.2);
  transform: translateX(-50%) !important;
  animation: scroll-hint-attention 1.35s ease-in-out infinite !important;
  -webkit-tap-highlight-color: transparent;
}

.scroll-hint span {
  display: none !important;
}

.scroll-hint svg {
  display: block;
  width: 30px !important;
  height: 30px !important;
  filter: drop-shadow(0 1px 1px rgba(44, 110, 99, 0.18));
}

.scroll-hint-arrow {
  animation: scroll-hint-bounce 1.05s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
}

@keyframes scroll-hint-attention {
  0%, 100% {
    opacity: 0.9;
    box-shadow: 0 5px 18px rgba(44, 110, 99, 0.18);
  }
  50% {
    opacity: 1;
    box-shadow: 0 7px 24px rgba(44, 110, 99, 0.32);
  }
}

@keyframes scroll-hint-bounce {
  0%, 100% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint,
  .scroll-hint-arrow {
    animation: none !important;
  }
}