Responsive Feature Cards Grid Section

<section class="w-full max-w-7xl sm:px-6 lg:px-8 mx-auto px-4">
        <div class="mx-auto mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          <div class="group relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-900/60 p-6">
            <div class="absolute -right-8 -top-8 h-24 w-24 rounded-full bg-lime-400/10 blur-2xl"></div>
            <div class="flex items-center gap-3">
              <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-lime-400 to-emerald-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="kanban" class="lucide lucide-kanban h-4 w-4 text-neutral-900"><path d="M6 5v11" class=""></path><path d="M12 5v6" class=""></path><path d="M18 5v14" class=""></path></svg>
              </span>
              <h3 class="text-lg font-semibold tracking-tight">Evaluation Pipeline</h3>
            </div>
            <p class="mt-3 text-sm text-neutral-300">
              Automate offline and online evals with guardrails, bias checks, and regression tracking.
            </p>
            <div class="mt-5 inline-flex items-center text-sm font-medium text-lime-300">
              Learn more <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right ml-2 h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </div>
          </div>

          <div class="group relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-900/60 p-6">
            <div class="absolute -left-8 -top-10 h-24 w-24 rounded-full bg-emerald-400/10 blur-2xl"></div>
            <div class="flex items-center gap-3">
              <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-lime-400 to-emerald-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="boxes" class="lucide lucide-boxes h-4 w-4 text-neutral-900"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" class=""></path><path d="m7 16.5-4.74-2.85" class=""></path><path d="m7 16.5 5-3" class=""></path><path d="M7 16.5v5.17" class=""></path><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" class=""></path><path d="m17 16.5-5-3" class=""></path><path d="m17 16.5 4.74-2.85" class=""></path><path d="M17 16.5v5.17" class=""></path><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" class=""></path><path d="M12 8 7.26 5.15" class=""></path><path d="m12 8 4.74-2.85" class=""></path><path d="M12 13.5V8" class=""></path></svg>
              </span>
              <h3 class="text-lg font-semibold tracking-tight">Model Orchestration</h3>
            </div>
            <p class="mt-3 text-sm text-neutral-300">
              Route across providers, versions, or custom endpoints with traffic splitting and A/B testing.
            </p>
            <div class="mt-5 inline-flex items-center text-sm font-medium text-lime-300">
              Learn more <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right ml-2 h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </div>
          </div>

          <div class="group relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-900/60 p-6">
            <div class="absolute -right-8 -bottom-10 h-24 w-24 rounded-full bg-lime-400/10 blur-2xl"></div>
            <div class="flex items-center gap-3">
              <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-lime-400 to-emerald-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="lock" class="lucide lucide-lock h-4 w-4 text-neutral-900"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect><path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path></svg>
              </span>
              <h3 class="text-lg font-semibold tracking-tight">Compliance &amp; Safety</h3>
            </div>
            <p class="mt-3 text-sm text-neutral-300">
              Built-in PII scrubbing, content filters, audit trails, and RBAC to meet enterprise standards.
            </p>
            <div class="mt-5 inline-flex items-center text-sm font-medium text-lime-300">
              Learn more <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right ml-2 h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </div>
          </div>
        </div>
      </section>