Demo-video SaaS Brutalist

                <!--
@type: Demo Video
@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);
  }
  .brutalist-shadow-sm {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  }
</style>

<section id="demo" class="bg-neutral-900 py-24 px-6 font-mono border-t-8 border-black relative">
  <div class="absolute left-0 top-0 h-full w-2 bg-cyan-400 hidden lg:block"></div>

  <div class="max-w-4xl mx-auto">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-6">
      <div class="max-w-3xl">
        <h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter text-white leading-none mb-6">
          Interface <br />
          <span class="bg-cyan-400 text-black px-4 py-1 italic">In Action.</span>
        </h2>
        <p class="text-xl font-bold uppercase text-neutral-400 border-l-4 border-cyan-400 pl-4">
          Witness the speed. No cuts, no renders, just pure technical execution in real-time.
        </p>
      </div>
      <div class="bg-white border-4 border-black p-4 brutalist-shadow-sm rotate-3 hidden lg:block">
        <span class="font-black uppercase text-sm">Now Playing: V2.4_Demo.mp4</span>
      </div>
    </div>

    <div class="relative group">
      <div class="bg-neutral-200 border-8 border-black brutalist-shadow relative overflow-hidden">
        <div class="bg-neutral-300 border-b-4 border-black p-3 flex justify-between items-center">
          <div class="flex gap-2">
            <div class="w-4 h-4 rounded-full bg-neutral-900 border-2 border-black"></div>
            <div class="w-4 h-4 rounded-full bg-neutral-900 border-2 border-black"></div>
            <div class="w-4 h-4 rounded-full bg-neutral-900 border-2 border-black"></div>
          </div>
          <div class="text-xs font-black uppercase tracking-widest bg-white border-2 border-black px-2 py-1">
            neobrutal_cli_terminal
          </div>
        </div>

        <div class="aspect-video bg-neutral-800 flex items-center justify-center relative cursor-pointer group">
          <div
            class="absolute inset-0 p-8 opacity-40 font-black text-cyan-400 text-xs md:text-sm overflow-hidden pointer-events-none">
            <p>> initializing deployment mesh...</p>
            <p>> verifying bare metal nodes [40/40]</p>
            <p>> latency check: 11.2ms</p>
            <p>> optimizing kernel parameters</p>
            <p>> global propagation active...</p>
          </div>

          <button
            class="relative z-10 bg-white border-4 border-black p-8 group-hover:scale-110 transition-transform brutalist-shadow">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 fill-black" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z" />
            </svg>
          </button>
        </div>

        <div
          class="bg-black text-white p-4 flex flex-col md:flex-row justify-between items-center gap-4 text-sm font-bold uppercase">
          <div class="flex items-center gap-4">
            <span class="text-cyan-400 tracking-tighter">● RE:RECORDING</span>
            <span>00:42 / 02:15</span>
          </div>
          <div class="flex gap-6">
            <span class="hover:text-cyan-400 cursor-pointer">1080P_RAW</span>
            <span class="hover:text-cyan-400 cursor-pointer">FULL_SCREEN</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>