Hero Fused Title

<section class="ws-hero relative overflow-hidden bg-[var(--ws-hero-bg)] py-28 text-center">
  <style>
    @keyframes ws-word-in {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .ws-word {
      display: inline-block;
      opacity: 0;
      animation: ws-word-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes ws-cursor-blink {
      0%, 49.9% { opacity: 1; }
      50%, 100%  { opacity: 0; }
    }
    .ws-cursor {
      display: inline-block;
      width: 3px;
      height: 0.85em;
      background: currentColor;
      vertical-align: middle;
      margin: 0 3px;
      border-radius: 1px;
      animation: ws-cursor-blink 1s step-start infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .ws-word  { animation: none; opacity: 1; }
      .ws-cursor { animation: none; }
    }
  </style>

  <div class="mx-auto max-w-4xl px-6">

    <!-- Pre-heading badge -->
    <div class="mb-8 inline-flex items-center gap-2 rounded-full border border-[var(--ws-hero-border)] bg-[var(--ws-hero-border)] px-4 py-1.5">
      <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--ws-hero-action-bg)]"></span>
      <span class="text-xs font-medium uppercase tracking-widest text-[var(--ws-hero-text-muted)]">Now with AI</span>
    </div>

    <!-- Animated headline -->
    <h1
      class="text-balance text-5xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-6xl lg:text-7xl"
      aria-label="Write. Draw. Plan. All at once."
    >
      <span class="ws-word" style="animation-delay: 0ms">Write.</span>
      <span class="ws-cursor" aria-hidden="true"></span>
      <span class="ws-word" style="animation-delay: 150ms">Draw.</span>
      <span class="ws-cursor" aria-hidden="true"></span>
      <span class="ws-word" style="animation-delay: 300ms">Plan.</span>
      <br>
      <span class="ws-word" style="animation-delay: 450ms">All</span>
      <span class="ws-word" style="animation-delay: 550ms">&nbsp;at</span>
      <span class="ws-word" style="animation-delay: 650ms">&nbsp;once.</span>
    </h1>

    <!-- Subline -->
    <p
      class="mx-auto mt-6 max-w-xl text-pretty text-lg leading-relaxed text-[var(--ws-hero-text-soft)]"
      style="animation: ws-word-in 0.5s 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; opacity: 0"
    >
      A workspace where docs, whiteboards, and databases merge seamlessly.
      Built for teams who think visually and ship fast.
    </p>

    <!-- CTA row -->
    <div
      class="mt-10 flex flex-wrap justify-center gap-4"
      style="animation: ws-word-in 0.5s 0.95s cubic-bezier(0.16, 1, 0.3, 1) both; opacity: 0"
    >
      <a
        href="#"
        class="rounded-xl bg-[var(--ws-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-action-text)] transition-colors hover:bg-[var(--ws-hero-action-bg-hover)]"
      >
        Get Started Free
      </a>
      <a
        href="#"
        class="rounded-xl border border-[var(--ws-hero-border)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-text)] transition-colors hover:bg-[var(--ws-hero-border)]"
      >
        View on GitHub
      </a>
    </div>

    <!-- Social proof line -->
    <p
      class="mt-8 text-xs text-[var(--ws-hero-text-muted)]"
      style="animation: ws-word-in 0.5s 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; opacity: 0"
    >
      Trusted by 12,000+ teams · No credit card required
    </p>

  </div>
</section>