Features Bento First Span

<section class="ws-features ws-features-bento bg-[var(--ws-features-card-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">

    <!-- Section header -->
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold text-[var(--ws-features-text)] sm:text-4xl">Everything you need</h2>
      <p class="mt-4 text-lg text-[var(--ws-features-text-soft)]">Built for teams that move fast without breaking things.</p>
    </div>

    <!-- Bento grid: first item spans 2 rows -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:grid-rows-2">

      <!-- First card — spans 2 rows, accent bg, visually dominant -->
      <div class="group relative overflow-hidden rounded-2xl bg-violet-600 p-8 text-white sm:row-span-2 lg:row-span-2">
        <!-- Visual illustration placeholder -->
        <div class="mb-6 flex h-40 items-center justify-center rounded-xl bg-violet-500/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 text-violet-200 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
          </svg>
        </div>
        <div class="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-violet-100">
          Core Feature
        </div>
        <h3 class="mt-4 text-2xl font-bold leading-tight">AI-powered workflow automation</h3>
        <p class="mt-3 text-violet-100/90 leading-relaxed">
          Let our AI handle the repetitive work. Define your rules once and watch tasks route, prioritize, and complete themselves — saving your team hours every week.
        </p>
        <a href="#" class="mt-6 inline-flex items-center gap-2 rounded-xl bg-white px-5 py-2.5 text-sm font-semibold text-violet-700 transition hover:bg-violet-50"><!-- ws-ok -->
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>

      <!-- Card 2 -->
      <div class="flex flex-col gap-4 rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-6">
        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
        <div>
          <h3 class="font-semibold text-[var(--ws-features-text)]">Smart task routing</h3>
          <p class="mt-1.5 text-sm text-[var(--ws-features-text-soft)]">Automatically assign tasks to the right person based on role, availability, and workload.</p>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="flex flex-col gap-4 rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-6">
        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
          </svg>
        </div>
        <div>
          <h3 class="font-semibold text-[var(--ws-features-text)]">Real-time analytics</h3>
          <p class="mt-1.5 text-sm text-[var(--ws-features-text-soft)]">Track team velocity, project health, and bottlenecks with live dashboards and alerts.</p>
        </div>
      </div>

      <!-- Card 4 -->
      <div class="flex flex-col gap-4 rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-6">
        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
        </div>
        <div>
          <h3 class="font-semibold text-[var(--ws-features-text)]">Instant integrations</h3>
          <p class="mt-1.5 text-sm text-[var(--ws-features-text-soft)]">Connect Slack, GitHub, Notion, and 50+ other tools in under a minute — no engineers needed.</p>
        </div>
      </div>

      <!-- Card 5 -->
      <div class="flex flex-col gap-4 rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-6">
        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-rose-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
          </svg>
        </div>
        <div>
          <h3 class="font-semibold text-[var(--ws-features-text)]">Enterprise-grade security</h3>
          <p class="mt-1.5 text-sm text-[var(--ws-features-text-soft)]">SOC 2 certified, end-to-end encrypted, with SSO and role-based access control built in.</p>
        </div>
      </div>

    </div>
  </div>
</section>