<section class="hero-text-only">
  <div class="hero-text-inner">
    <p class="hero-overline">Interface · Pattern · Catalog</p>
    <h1 class="hero-display">Motiff.</h1>
    <div class="hero-text-footer">
      <p class="hero-sub" style="max-width:360px;text-align:left">Copy-paste HTML and CSS interface patterns for teams who ship.</p>
      <a href="#" class="btn btn-primary">Get started →</a>
    </div>
  </div>
</section>

<style>
.hero-text-only { padding: clamp(4rem, 10vw, 8rem) clamp(1.5rem, 5vw, 3rem); }
.hero-text-inner { max-width: 1100px; margin: 0 auto; }
.hero-overline {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1rem;
}
.hero-display {
  font-size: clamp(5rem, 15vw, 12rem); font-weight: 800;
  letter-spacing: -0.05em; line-height: 0.9; margin: 0 0 2.5rem;
}
.hero-text-footer {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 2rem;
}
</style>