<!-- Feature grid with categories -->
<div class="mt-16 space-y-10" id="hero-feature-grid">

  <!-- Essentials -->
  <div>
    <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-4 text-left">Essentials</h3>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-5 sm:gap-5 auto-rows-fr">
      <%- include('./status-page') -%>
      <%- include('./incidents') -%>
      <%- include('./monitoring') -%>
      <%- include('./on-call') -%>
      <%- include('./scheduled-maintenance') -%>
    </div>
  </div>

  <!-- Observability -->
  <div>
    <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-4 text-left">Observability</h3>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-5 sm:gap-5 auto-rows-fr">
      <%- include('./logs') -%>
      <%- include('./metrics') -%>
      <%- include('./traces') -%>
      <%- include('./exceptions') -%>
      <%- include('./profiles') -%>
    </div>
  </div>

  <!-- Automation & Intelligence -->
  <div>
    <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-4 text-left">Automation & Intelligence</h3>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 sm:gap-5 auto-rows-fr">
      <%- include('./kubernetes') -%>
      <%- include('./workflows') -%>
      <%- include('./dashboards') -%>
      <%- include('./ai-agent-grid') -%>
    </div>
  </div>

</div>
