<section class="hero-stats-wrap">
  <div class="hero-centered">
    <h1 class="hero-title">Everything you need<br/>to ship faster.</h1>
    <p class="hero-sub">Production-ready interface patterns. Copy the code, keep the quality.</p>
    <a href="#" class="btn btn-primary" style="font-size:1rem;padding:0.75rem 2rem">Start building →</a>
  </div>
  <div class="hero-divider"></div>
  <div class="hero-metrics">
    <div class="hero-metric">
      <span class="metric-value">150+</span>
      <span class="metric-label">UI patterns</span>
    </div>
    <div class="metric-sep"></div>
    <div class="hero-metric">
      <span class="metric-value">12</span>
      <span class="metric-label">Categories</span>
    </div>
    <div class="metric-sep"></div>
    <div class="hero-metric">
      <span class="metric-value">0</span>
      <span class="metric-label">Dependencies</span>
    </div>
    <div class="metric-sep"></div>
    <div class="hero-metric">
      <span class="metric-value">Free</span>
      <span class="metric-label">Always</span>
    </div>
  </div>
</section>

<style>
.hero-stats-wrap { display: flex; flex-direction: column; align-items: center; gap: 3rem; padding: clamp(4rem, 8vw, 7rem) 1rem; }
.hero-divider { width: 100%; max-width: 900px; height: 1px; background: var(--border); }
.hero-metrics { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; justify-content: center; }
.hero-metric { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.metric-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
.metric-label { font-size: 0.8125rem; color: var(--muted); }
.metric-sep { width: 1px; height: 2.5rem; background: var(--border); }
@media (max-width: 540px) { .metric-sep { display: none; } }
</style>