/* Landing page for hazbins-forever.com; builds on /style.css (frames, banner, buttons). */

.landing { display: flex; flex-direction: column; }
.hero {
  flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: clamp(32px, 10vh, 96px) 16px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.hero-crests { display: flex; gap: 18px; margin-bottom: -6px; }
.hero-crests .faction-icon { width: 48px; height: 48px; filter: drop-shadow(0 3px 4px #000); }
.hero-frame { padding-top: 24px; padding-bottom: 22px; }
.hero-frame .banner-title { font-size: clamp(52px, 13vw, 96px); }

.hero-panel { width: 100%; padding: 24px clamp(20px, 5vw, 40px) 22px; text-align: center; }
.hero-lead { margin: 0 0 10px; font: 600 clamp(20px, 4.4vw, 24px)/1.35 var(--display); color: var(--gold-soft); letter-spacing: .02em; }
.hero-text { margin: 0 auto 20px; max-width: 34em; color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-actions .btn { font-size: 14px; padding: 13px 22px 12px; }
.hero-note { margin: 16px 0 0; color: var(--muted); font-style: italic; font-size: 16px; }