<style>
  .feature-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .feature-card:hover {
    transform: translateY(-4px);
  }
  .feature-icon-wrapper {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .feature-card:hover .feature-icon-wrapper {
    transform: scale(1.05);
  }
  .replaces-tag {
    transition: all 0.2s ease;
  }
  .replaces-tag:hover {
    opacity: 0.8;
  }
</style>

<!-- One Platform Section -->
<div class="relative bg-gradient-to-b from-gray-50 to-white overflow-hidden">
  <!-- Background decoration -->
  <div class="absolute inset-0 -z-10">
    <div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-100/30 rounded-full blur-3xl"></div>
    <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-100/30 rounded-full blur-3xl"></div>
  </div>

  <div class="mx-auto max-w-7xl px-6 py-24 lg:px-8 lg:py-32">
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <div class="inline-flex items-center gap-2 rounded-full bg-gray-900 px-4 py-1.5 text-sm text-white mb-6">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
        <span>10+ products. One Platform.</span>
      </div>
      <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
        Complete Observability
      </h2>
      <p class="mt-6 text-lg leading-8 text-gray-600">
        Replace your entire monitoring stack with a single open-source platform. No vendor lock-in, no complexity.
      </p>
    </div>

    <!-- Reliability & Response Section -->
    <div class="mb-20">
      <div class="flex items-center gap-3 mb-8">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Reliability &amp; Response</h3>
        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
        <!-- Status Page -->
        <a href="/product/status-page" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-emerald-300 hover:shadow-lg hover:shadow-emerald-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200 mb-4">
            <svg class="h-6 w-6 text-emerald-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Status Page</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Beautiful, branded pages to keep customers informed in real-time.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Statuspage</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Instatus</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- Incidents -->
        <a href="/product/incident-management" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-rose-300 hover:shadow-lg hover:shadow-rose-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-rose-50 ring-1 ring-rose-200 mb-4">
            <svg class="h-6 w-6 text-rose-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Incidents</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Detect, respond, and resolve incidents faster with automation.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Incident.io</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">FireHydrant</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- Monitoring -->
        <a href="/product/monitoring" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-blue-300 hover:shadow-lg hover:shadow-blue-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200 mb-4">
            <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Monitoring</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Monitor websites, APIs, servers, and Kubernetes clusters globally.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Pingdom</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Better Stack</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- On-Call -->
        <a href="/product/on-call" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-stone-300 hover:shadow-lg hover:shadow-stone-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-stone-100 ring-1 ring-stone-200 mb-4">
            <svg class="h-6 w-6 text-stone-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">On-Call</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Smart alert routing, escalations, and rotation schedules.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">PagerDuty</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Opsgenie</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- Scheduled Maintenance -->
        <a href="/product/scheduled-maintenance" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-teal-300 hover:shadow-lg hover:shadow-teal-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-teal-50 ring-1 ring-teal-200 mb-4">
            <svg class="h-6 w-6 text-teal-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Maintenance</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Plan downtime and keep users informed with automated notifications.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Built-in</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">No extra tools</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>
      </div>
    </div>

    <!-- Observability Section -->
    <div class="mb-20">
      <div class="flex items-center gap-3 mb-8">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Full-Stack Observability</h3>
        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        <!-- Logs -->
        <a href="/product/logs-management" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-amber-300 hover:shadow-lg hover:shadow-amber-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200 mb-4">
            <svg class="h-6 w-6 text-amber-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Logs</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Fastest log ingestion and search. OpenTelemetry native.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Splunk</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Elastic</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- Metrics -->
        <a href="/product/metrics" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-purple-300 hover:shadow-lg hover:shadow-purple-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-4">
            <svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M2 12h3l2-4 3 8 3-6 2 4h7" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M2 20h20" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Metrics</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Track custom metrics with Prometheus and OpenTelemetry support.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Prometheus</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Datadog</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- Traces -->
        <a href="/product/traces" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-yellow-300 hover:shadow-lg hover:shadow-yellow-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-4">
            <svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <rect x="2" y="3" width="20" height="4" rx="0.5" />
              <rect x="2" y="10" width="10" height="4" rx="0.5" />
              <rect x="2" y="17" width="5" height="4" rx="0.5" />
              <rect x="17" y="17" width="5" height="4" rx="0.5" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Traces</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">End-to-end distributed tracing across all your services.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Jaeger</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Zipkin</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- Exceptions -->
        <a href="/product/exceptions" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-orange-300 hover:shadow-lg hover:shadow-orange-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200 mb-4">
            <svg class="h-6 w-6 text-orange-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <ellipse cx="12" cy="14" rx="5" ry="6" />
              <path stroke-linecap="round" d="M9 8.5C9 6.5 10.5 5 12 5s3 1.5 3 3.5M4 11l3 1m10-1 3 1M4 17l3-1m10 1 3-1M12 8v12M9 14h6" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Exceptions</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Catch and fix bugs with full stack traces and context.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Sentry</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Bugsnag</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- Kubernetes -->
        <a href="/product/kubernetes" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-cyan-300 hover:shadow-lg hover:shadow-cyan-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-50 ring-1 ring-cyan-200 mb-4">
            <svg class="h-6 w-6 text-cyan-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <polygon stroke-linecap="round" stroke-linejoin="round" points="12,2.5 19.43,6.08 21.26,14.11 15.95,20.64 8.05,20.56 2.74,14.27 4.57,6.22"></polygon>
              <circle cx="12" cy="12" r="2.2" stroke-linecap="round" stroke-linejoin="round"></circle>
              <line x1="12" y1="9.8" x2="12" y2="4" stroke-linecap="round"></line>
              <line x1="14.12" y1="10.24" x2="17.54" y2="6.64" stroke-linecap="round"></line>
              <line x1="14.14" y1="12.49" x2="19.31" y2="13.67" stroke-linecap="round"></line>
              <line x1="13.12" y1="14.0" x2="15.12" y2="18.82" stroke-linecap="round"></line>
              <line x1="10.88" y1="14.0" x2="8.88" y2="18.76" stroke-linecap="round"></line>
              <line x1="9.86" y1="12.49" x2="4.69" y2="13.79" stroke-linecap="round"></line>
              <line x1="9.88" y1="10.24" x2="6.46" y2="6.53" stroke-linecap="round"></line>
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Kubernetes</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Monitor Kubernetes clusters, pods, and workloads in real-time.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Lens</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">K9s</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- Profiles -->
        <a href="/product/profiles" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-rose-300 hover:shadow-lg hover:shadow-rose-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-rose-50 ring-1 ring-rose-200 mb-4">
            <svg class="h-6 w-6 text-rose-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1.001A3.75 3.75 0 0012 18z"></path>
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Profiles</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">CPU and memory profiling with flamegraphs for performance optimization.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Pyroscope</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">pprof</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>
      </div>
    </div>

    <!-- Automation & Insights Section -->
    <div>
      <div class="flex items-center gap-3 mb-8">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Automation &amp; Insights</h3>
        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
        <!-- Workflows -->
        <a href="/product/workflows" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-sky-300 hover:shadow-lg hover:shadow-sky-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-sky-50 ring-1 ring-sky-200 mb-4">
            <svg class="h-6 w-6 text-sky-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="transform: rotate(180deg)">
              <rect x="3" y="3" width="6" height="4" rx="1" stroke-width="1.5" />
              <rect x="15" y="3" width="6" height="4" rx="1" stroke-width="1.5" />
              <rect x="9" y="17" width="6" height="4" rx="1" stroke-width="1.5" />
              <path stroke-linecap="round" d="M6 7v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7M12 12v5" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Workflows</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Automate incident response with visual no-code workflows.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Zapier</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Custom scripts</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- Dashboards -->
        <a href="/product/dashboards" class="feature-card group relative bg-white rounded-2xl p-6 ring-1 ring-gray-200 hover:ring-indigo-300 hover:shadow-lg hover:shadow-indigo-100/50">
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-4">
            <svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">Dashboards</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Beautiful real-time dashboards to visualize all your data.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Grafana</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600">Kibana</span>
          </div>
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>
        </a>

        <!-- AI Agent -->
        <a href="/product/ai-agent" class="feature-card group relative bg-gradient-to-br from-violet-50 to-purple-50 rounded-2xl p-6 ring-1 ring-violet-200 hover:ring-violet-400 hover:shadow-lg hover:shadow-violet-100/50">
          <div class="absolute top-4 right-4">
            <span class="inline-flex items-center rounded-full bg-violet-100 px-2.5 py-0.5 text-xs font-medium text-violet-700">AI-Powered</span>
          </div>
          <div class="feature-icon-wrapper flex h-12 w-12 items-center justify-center rounded-xl bg-violet-100 ring-1 ring-violet-300 mb-4">
            <svg class="h-6 w-6 text-violet-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
            </svg>
          </div>
          <h4 class="text-base font-semibold text-gray-900 mb-2">AI Agent</h4>
          <p class="text-sm text-gray-500 mb-4 leading-relaxed">Automatically detect, diagnose, and fix issues with AI-powered root cause analysis.</p>
          <div class="flex flex-wrap gap-1.5">
            <span class="replaces-tag inline-flex items-center rounded-md bg-violet-100 px-2 py-1 text-xs text-violet-700">Auto-fixes code</span>
            <span class="replaces-tag inline-flex items-center rounded-md bg-violet-100 px-2 py-1 text-xs text-violet-700">Creates PRs</span>
          </div>
        </a>
      </div>
    </div>

    <!-- Bottom CTA -->
    <div class="mt-20 text-center">
      <div class="inline-flex flex-col sm:flex-row items-center gap-4">
        <a href="/accounts/register" class="inline-flex items-center justify-center rounded-lg bg-gray-900 px-6 py-3 text-sm font-medium text-white shadow-sm transition-all hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900">
          Start for free
          <svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </a>
        <a href="/enterprise/demo" class="inline-flex items-center justify-center rounded-lg bg-white px-6 py-3 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 transition-all hover:bg-gray-50">
          Request a demo
        </a>
      </div>
      <p class="mt-4 text-sm text-gray-500">No credit card required. Deploy on-premise or use our cloud.</p>
    </div>
  </div>
</div>
