.hero-banner{position:relative}
.scroll-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--padding-close) + 0.5rem);z-index:20;display:flex;align-items:center;justify-content:center}
.scroll-hint-link{display:flex;align-items:center;gap:0.5rem;color:var(--clr-active);text-decoration:none;font-weight:600;font-size:0.95rem}
.scroll-text{background:rgba(255,255,255,0.92);color:var(--clr-active);padding:6px 10px;border-radius:var(--padding-tight);box-shadow:0 6px 18px var(--clr-neutral-shadow)}
.arrow{width:20px;height:20px;display:inline-block;border-left:3px solid var(--clr-active);border-bottom:3px solid var(--clr-active);transform:rotate(-45deg);box-sizing:content-box;margin-bottom:4px}
@keyframes scroll-bounce{0%{transform:translateY(0) rotate(-45deg);opacity:1}50%{transform:translateY(8px) rotate(-45deg);opacity:0.9}100%{transform:translateY(0) rotate(-45deg);opacity:1}}
.arrow{animation:scroll-bounce 1.6s cubic-bezier(.25,.46,.45,.94) infinite}
/* smaller on small screens */
@media (max-width:520px){
	.scroll-text{font-size:0.85rem;padding:5px 8px}
	.arrow{width:16px;height:16px;border-left:2.5px solid var(--clr-active);border-bottom:2.5px solid var(--clr-active)}
}
/* respect reduced motion */
@media (prefers-reduced-motion:reduce){.arrow{animation:none}}