Feature SaaS Brutalist

                <!--
@type: Feature
@industry: SaaS
@style: Brutalist
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<style>
  .brutalist-shadow {
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
  }
</style>

<section id="features" class="bg-neutral-100 py-24 px-6 font-mono border-t-8 border-black">
  <div class="max-w-7xl mx-auto">

    <div class="mb-20">
      <div class="inline-block bg-black text-white px-4 py-2 font-black uppercase tracking-widest mb-6">
        Capabilities
      </div>
      <h2 class="text-6xl md:text-8xl font-black uppercase tracking-tighter leading-none">
        Built for 
        <span class="text-cyan-500">Pure Utility.</span>
      </h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-10">

      <div
        class="bg-white border-4 border-black p-10 brutalist-shadow group hover:bg-cyan-400 transition-colors duration-300">
        <div
          class="w-20 h-20 bg-cyan-400 border-4 border-black mb-8 flex items-center justify-center group-hover:bg-white transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
          </svg>
        </div>
        <h3 class="text-3xl font-black uppercase mb-4 tracking-tight">Real-time Telemetry</h3>
        <p class="text-xl font-bold leading-tight uppercase">
          No delayed graphs. We stream raw performance data directly from the kernel to your dashboard with
          sub-millisecond precision.
        </p>
      </div>

      <div
        class="bg-white border-4 border-black p-10 brutalist-shadow group hover:bg-neutral-900 hover:text-white transition-colors duration-300">
        <div
          class="w-20 h-20 bg-neutral-900 border-4 border-black mb-8 flex items-center justify-center group-hover:bg-cyan-400 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-white group-hover:text-black"
            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="square"
            stroke-linejoin="miter">
            <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
            <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
            <line x1="6" y1="6" x2="6" y2="6"></line>
            <line x1="6" y1="18" x2="6" y2="18"></line>
          </svg>
        </div>
        <h3 class="text-3xl font-black uppercase mb-4 tracking-tight">Bare Metal Nodes</h3>
        <p class="text-xl font-bold leading-tight uppercase">
          Zero virtualization tax. Your code runs on dedicated hardware optimized for heavy compute loads and massive
          concurrency.
        </p>
      </div>

      <div
        class="bg-white border-4 border-black p-10 brutalist-shadow group hover:bg-neutral-900 hover:text-white transition-colors duration-300">
        <div
          class="w-20 h-20 bg-neutral-900 border-4 border-black mb-8 flex items-center justify-center group-hover:bg-cyan-400 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-white group-hover:text-black"
            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="square"
            stroke-linejoin="miter">
            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
            <path d="M2 17l10 5 10-5"></path>
            <path d="M2 12l10 5 10-5"></path>
          </svg>
        </div>
        <h3 class="text-3xl font-black uppercase mb-4 tracking-tight">Global Edge Mesh</h3>
        <p class="text-xl font-bold leading-tight uppercase">
          Deploy to 40+ regions instantly. Our routing logic bypasses the public internet to ensure your users hit the
          nearest node.
        </p>
      </div>

      <div
        class="bg-white border-4 border-black p-10 brutalist-shadow group hover:bg-cyan-400 transition-colors duration-300">
        <div
          class="w-20 h-20 bg-cyan-400 border-4 border-black mb-8 flex items-center justify-center group-hover:bg-white transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter">
            <path
              d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3y-3.5">
            </path>
          </svg>
        </div>
        <h3 class="text-3xl font-black uppercase mb-4 tracking-tight">Hardened Security</h3>
        <p class="text-xl font-bold leading-tight uppercase">
          No fluff security. Automatic DDoS mitigation, encrypted-at-rest volumes, and identity-aware proxying by
          default.
        </p>
      </div>

    </div>

    <div
      class="mt-20 p-10 border-4 border-black bg-cyan-400 brutalist-shadow flex flex-col md:flex-row items-center justify-between gap-8">
      <div class="text-3xl font-black uppercase tracking-tighter italic">
        Want the full technical specs?
      </div>
      <button
        class="bg-black text-white px-10 py-4 font-black uppercase text-xl border-4 border-black shadow-[6px_6px_0px_0px_rgba(255,255,255,1)] hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all">
        Open Manifest &rarr;
      </button>
    </div>
  </div>
</section>