<!-- AI Agent Featured Card - Spans full row -->
<div class="mt-5">
  <div class="hero-card-wrapper hero-glow-violet-wrapper">
    <a href="/product/ai-agent" class="hero-card hero-glow-violet group flex items-center gap-5 rounded-2xl bg-white px-6 py-5 ring-1 ring-inset ring-gray-200 transition-all hover:ring-violet-300">
      <!-- Icon -->
      <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
        <%- include('../icons/ai-agent') %>
      </div>

      <!-- Content -->
      <div class="flex-1 text-left">
        <div class="flex items-center gap-2">
          <span class="text-sm font-medium text-gray-900">AI Agent</span>
        </div>
        <div class="mt-1 text-xs text-gray-500">Automatically detect, diagnose, and resolve incidents with AI-powered root cause analysis and code fixes.</div>
      </div>

      <!-- Arrow -->
      <svg class="h-4 w-4 text-gray-400 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg>
    </a>
  </div>
</div>
