html { scroll-behavior: smooth; }

.btn-primary { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.btn-primary:focus-visible { outline: 3px solid rgba(220,38,38,0.5); outline-offset: 3px; }

.hero-with-stars { position: relative; min-height: 70vh; overflow: hidden; }
.star-banner { position: absolute; left: 0; right: 0; height: 60px; overflow: hidden; z-index: 1; }
.star-banner-top { top: 0; background: #1e3a8a; }
.star-banner-bottom { bottom: 0; background: #dc2626; }

/* Make the track long enough; JS will fill it and we animate it. */
.star-track { display: flex; gap: 50px; width: max-content; will-change: transform; }

.star-banner-top .star-track { animation: scrollLeft 30s linear infinite; }
.star-banner-bottom .star-track { animation: scrollRight 30s linear infinite; }

@keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.star { width: 35px; height: 35px; flex-shrink: 0; }
.hero-content { position: relative; z-index: 10; padding-top: 80px; padding-bottom: 80px; }

/* Toast */
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(17,24,39,0.95);
  color: white;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 9999;
  max-width: min(92vw, 520px);
}
#toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .star-banner-top .star-track,
  .star-banner-bottom .star-track { animation: none; }
  .btn-primary { transition: none; }
  .btn-primary:hover { transform: none; box-shadow: none; }
}