/* ==========================================================================
   Hero header — shared between index.html and amazon/index.html
   (both used the exact same header/h1/.subtitle treatment).
   ========================================================================== */
header {
  text-align: center;
  padding: 64px 20px 40px;
}

header h1 {
  font-size: clamp(2.3rem, 3vw, 3.2rem);
  color: var(--accent);
  text-shadow: 0 0 20px rgba(255, 140, 0, 0.6);
}

.subtitle {
  color: var(--grey);
  margin-top: 10px;
  animation: fadeIn 2s ease 0s 1 normal both;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  header { padding: 56px 20px 32px; }
}