<section class="hero-centered">
  <div class="hero-eyebrow">New · Interface Pattern Catalog</div>
  <h1 class="hero-title">Patterns to shape<br/>the screen.</h1>
  <p class="hero-sub">A focused catalog of interface references for designers and frontend teams building calmer, sharper products.</p>
  <div class="hero-actions">
    <a href="#" class="btn btn-primary">Browse patterns →</a>
    <a href="#" class="btn btn-ghost">View on GitHub</a>
  </div>
</section>

<style>
.hero-centered {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 1.5rem;
  padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 5vw, 2rem);
  max-width: 720px; margin: 0 auto;
}
.hero-eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-dim);
  padding: 0.25rem 0.875rem; border-radius: 9999px;
}
.hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.05; margin: 0;
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.175rem); color: var(--muted);
  line-height: 1.7; max-width: 560px; margin: 0;
}
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
</style>