<section class="hero-dark">
  <div class="hero-glow"></div>
  <div class="hero-dark-inner">
    <div class="hero-eyebrow" style="background:rgba(255,255,255,0.08);color:#fff">✦ Now in public beta</div>
    <h1 class="hero-title" style="color:#fff">The interface<br/>pattern catalog.</h1>
    <p class="hero-sub" style="color:rgba(255,255,255,0.55)">Copy-paste ready HTML and CSS patterns for teams who care about details.</p>
    <div class="hero-actions">
      <a href="#" class="btn" style="background:#fff;color:#1C1A17">Browse catalog →</a>
      <a href="#" class="btn" style="border:1px solid rgba(255,255,255,0.2);color:#fff;background:transparent">GitHub ↗</a>
    </div>
  </div>
</section>

<style>
.hero-dark {
  background: #0D0C0A; position: relative; overflow: hidden;
  padding: clamp(5rem, 12vw, 10rem) clamp(1rem, 5vw, 2rem);
  display: flex; justify-content: center;
}
.hero-glow {
  position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,100,10,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.hero-dark-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 1.5rem; max-width: 680px; position: relative;
}
</style>