<section class="hero-mesh">
  <div class="mesh-bg"></div>
  <div class="hero-centered" style="position:relative;z-index:1">
    <div class="hero-eyebrow">Open source · Free forever</div>
    <h1 class="hero-title">Design with intention.</h1>
    <p class="hero-sub">Reference patterns built around calm, purposeful UI. No noise, no bloat.</p>
    <div class="hero-actions">
      <a href="#" class="btn btn-primary">Browse patterns →</a>
      <a href="#" class="btn btn-ghost">Read the docs</a>
    </div>
  </div>
</section>

<style>
.hero-mesh {
  position: relative; overflow: hidden;
  padding: clamp(5rem, 12vw, 10rem) 1rem;
  display: flex; justify-content: center;
}
.mesh-bg {
  position: absolute; inset: -50%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(196,100,10,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(42,90,106,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(138,58,106,0.10) 0%, transparent 50%);
  animation: meshShift 8s ease-in-out infinite alternate;
}
@keyframes meshShift {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1.1) rotate(3deg); }
}
</style>