---
import BenchmarkChart from '../ui/BenchmarkChart.astro';
---
<section class="py-20" id="speed">
<div class="section-divider mb-20"></div>
<div class="max-w-4xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="font-heading text-2xl sm:text-3xl text-noir-50 mb-3">Linter speed, scanner depth</h2>
<p class="text-noir-500 max-w-xl mx-auto text-sm leading-relaxed">
The point is not winning a benchmark chart. The point is keeping security checks inside the edit loop, where developers will actually run them.
</p>
</div>
<BenchmarkChart />
<!-- Workflow -->
<div class="mt-16 max-w-2xl mx-auto">
<p class="text-center text-[11px] text-noir-600 font-mono uppercase tracking-[0.12em] mb-4">
Leave it on. Fix while context is still warm.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-0 font-mono text-xs">
<div class="bg-noir-900 border border-noir-800 rounded-md px-3.5 py-2.5 text-noir-500">edit</div>
<svg class="w-5 h-5 text-noir-700 shrink-0 rotate-90 sm:rotate-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>
<div class="bg-fox text-noir-950 rounded-md px-3.5 py-2.5 font-medium">foxguard</div>
<svg class="w-5 h-5 text-noir-700 shrink-0 rotate-90 sm:rotate-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>
<div class="bg-noir-900 border border-noir-800 rounded-md px-3.5 py-2.5 text-noir-500">fix</div>
<svg class="w-5 h-5 text-noir-700 shrink-0 rotate-90 sm:rotate-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>
<div class="bg-noir-900 border border-noir-800 rounded-md px-3.5 py-2.5 text-noir-500">commit</div>
</div>
</div>
</div>
</section>