Hero Base

<section class="ws-hero relative overflow-hidden bg-[var(--ws-hero-bg)] text-[var(--ws-hero-text)]">
  <div class="mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-2 lg:items-center lg:py-28">
    <div>
      <p class="mb-4 inline-flex rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-[var(--ws-hero-text-soft)]">Webspire Hero</p>
      <h1 class="text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">Build a sharper design system faster.</h1>
      <p class="mt-5 max-w-xl text-pretty text-lg text-[var(--ws-hero-text-soft)]">Ship consistent sections with clear tokens, strict quality gates, and copy-paste patterns your team can adapt in minutes.</p>
      <div class="mt-8 flex flex-wrap gap-3">
        <a href="#" class="rounded-xl bg-white px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-slate-200">Start now</a> <!-- ws-ok -->
        <a href="#" class="rounded-xl border border-white/20 bg-white/5 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:bg-white/10">View patterns</a>
      </div>
    </div>
    <aside class="rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur">
      <p class="text-xs uppercase tracking-[0.2em] text-[var(--ws-hero-text-muted)]">System preview</p>
      <ul class="mt-4 space-y-3 text-sm text-slate-200">
        <li class="flex items-center justify-between"><span>Tokens linked</span><span class="text-emerald-300">Yes</span></li>
        <li class="flex items-center justify-between"><span>Responsive states</span><span class="text-emerald-300">Ready</span></li>
        <li class="flex items-center justify-between"><span>A11y checks</span><span class="text-emerald-300">Passed</span></li>
      </ul>
    </aside>
  </div>
</section>