Feature Highlight

<!--
  Copy and a decorative gradient panel, side by side on desktop and stacked on
  mobile. The media is inline SVG on a gradient - no external image - and carries
  no text, so it needs no scrim. The CTA is full width until there is room.
-->
<section class="grid w-full items-center gap-8 rounded-2xl border border-gray-200 bg-white p-6 sm:p-8 md:grid-cols-2 dark:border-gray-800 dark:bg-gray-900">
  <div class="order-2 md:order-1">
    <p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">Workflow</p>
    <h2 class="mt-2 text-2xl font-bold leading-tight tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
      Automate the busywork, keep the craft
    </h2>
    <p class="mt-3 text-sm leading-relaxed text-gray-600 sm:text-base dark:text-gray-400">
      Let the platform handle triage, routing and follow-ups so your team spends its hours on the work only people can do.
    </p>
    <a
      href="#"
      class="mt-5 inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none sm:w-auto dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900"
    >
      See how it works
    </a>
  </div>
  <div class="order-1 md:order-2">
    <div class="relative aspect-[4/3] w-full overflow-hidden rounded-xl bg-gradient-to-br from-blue-500 via-indigo-500 to-purple-600">
      <svg viewBox="0 0 200 150" class="absolute inset-0 h-full w-full" aria-hidden="true" focusable="false">
        <circle cx="150" cy="40" r="50" fill="rgba(255,255,255,0.15)" />
        <rect x="24" y="90" width="120" height="14" rx="7" fill="rgba(255,255,255,0.25)" />
        <rect x="24" y="112" width="80" height="10" rx="5" fill="rgba(255,255,255,0.18)" />
      </svg>
    </div>
  </div>
</section>