Steps Staggered

<section class="ws-steps ws-steps-staggered bg-[var(--ws-steps-bg)] py-16">
  <div class="mx-auto max-w-5xl px-6">
    <div class="text-center">
      <h2 class="text-3xl font-bold text-[var(--ws-steps-text)]">How It Works</h2>
      <p class="mt-3 text-lg text-[var(--ws-steps-text-soft)]">Three simple steps to get started.</p>
    </div>

    <div class="mt-14 space-y-6">
      <!-- Step 1: flush left -->
      <div class="mr-auto max-w-md rounded-2xl border border-[var(--ws-steps-border)] bg-[var(--ws-steps-bg)] p-6 shadow-sm">
        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)]/10 text-sm font-bold text-[var(--ws-steps-accent)]">1</span>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-steps-text)]">Create Your Account</h3>
        <p class="mt-2 text-sm text-[var(--ws-steps-text-soft)]">Sign up in seconds — no credit card required. Start exploring the full pattern library immediately.</p>
      </div>

      <!-- Step 2: indented right -->
      <div class="mx-auto max-w-md rounded-2xl border border-[var(--ws-steps-border)] bg-[var(--ws-steps-bg)] p-6 shadow-sm lg:ml-32">
        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)]/10 text-sm font-bold text-[var(--ws-steps-accent)]">2</span>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-steps-text)]">Browse & Select</h3>
        <p class="mt-2 text-sm text-[var(--ws-steps-text-soft)]">Explore patterns by category, search by use case, or let AI recommend the perfect components for your project.</p>
      </div>

      <!-- Step 3: further right -->
      <div class="ml-auto max-w-md rounded-2xl border border-[var(--ws-steps-border)] bg-[var(--ws-steps-bg)] p-6 shadow-sm">
        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)]/10 text-sm font-bold text-[var(--ws-steps-accent)]">3</span>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-steps-text)]">Copy & Customize</h3>
        <p class="mt-2 text-sm text-[var(--ws-steps-text-soft)]">Copy the HTML directly into your project. Every pattern uses Tailwind utilities — customize everything freely.</p>
      </div>
    </div>
  </div>
</section>