System Specs Feature Grid Section

<section id="specs-component" class="relative overflow-hidden bg-[#050505] py-24 md:py-32 border-y border-white/10"
  style="font-family: 'Space Grotesk', sans-serif;">
  <!-- External Dependencies -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <link
    href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Rajdhani:wght@700&display=swap"
    rel="stylesheet">

  <!-- Technical Background Layers -->
  <div class="absolute inset-0 z-0 pointer-events-none">
    <div class="absolute inset-0 opacity-40"
      style="background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 3rem 3rem;">
    </div>
    <div class="absolute inset-0 opacity-30"
      style="background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 12rem 12rem;">
    </div>
    <div class="absolute inset-0" style="background: radial-gradient(circle at center, transparent 10%, #050505 100%);">
    </div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto px-6">
    <!-- Header Section -->
    <div class="mb-16 md:mb-20 flex flex-col md:flex-row md:items-end justify-between gap-8">
      <div class="overflow-hidden">
        <h2 class="text-5xl md:text-7xl uppercase tracking-tighter text-white leading-none"
          style="font-family: 'Rajdhani', sans-serif;">
          System Specs
        </h2>
      </div>
      <p class="text-white/50 text-sm max-w-xs leading-relaxed" style="font-family: 'JetBrains Mono', monospace;">
        // Engineered for high-performance DOM manipulation and seamless visual integration.
      </p>
    </div>

    <!-- Interactive Grid Container -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/10 border border-white/10 rounded-none relative">

      <!-- Tile 01 -->
      <div
        class="bg-[#050505] p-8 md:p-12 flex flex-col gap-10 hover:bg-white/[0.03] transition-all duration-500 group">
        <div class="flex items-center justify-between">
          <div class="text-[#06b6d4] text-xs font-bold tracking-[0.2em]"
            style="font-family: 'JetBrains Mono', monospace;">
            [01]
          </div>
          <iconify-icon icon="solar:code-square-linear"
            class="text-3xl text-white/20 group-hover:text-[#06b6d4] group-hover:rotate-12 transition-all duration-500">
          </iconify-icon>
        </div>
        <div>
          <h3 class="text-3xl tracking-tight uppercase mb-4 text-white" style="font-family: 'Rajdhani', sans-serif;">
            Zero Dependencies
          </h3>
          <p class="text-sm text-white/40 leading-relaxed font-medium group-hover:text-white/70 transition-colors">
            Built purely on native web APIs and core engines. No heavy overhead layers or complex external libraries
            required for standard deployment.
          </p>
        </div>
      </div>

      <!-- Tile 02 -->
      <div
        class="bg-[#050505] p-8 md:p-12 flex flex-col gap-10 hover:bg-white/[0.03] transition-all duration-500 group">
        <div class="flex items-center justify-between">
          <div class="text-[#06b6d4] text-xs font-bold tracking-[0.2em]"
            style="font-family: 'JetBrains Mono', monospace;">
            [02]
          </div>
          <iconify-icon icon="solar:mouse-circle-linear"
            class="text-3xl text-white/20 group-hover:text-[#06b6d4] group-hover:scale-110 transition-all duration-500">
          </iconify-icon>
        </div>
        <div>
          <h3 class="text-3xl tracking-tight uppercase mb-4 text-white" style="font-family: 'Rajdhani', sans-serif;">
            Reverse-Scroll Clean
          </h3>
          <p class="text-sm text-white/40 leading-relaxed font-medium group-hover:text-white/70 transition-colors">
            Fully scrubbable timelines mean flawless forward and backward playback without layout shifts, maintaining
            60fps performance benchmarks.
          </p>
        </div>
      </div>

      <!-- Tile 03 -->
      <div
        class="bg-[#050505] p-8 md:p-12 flex flex-col gap-10 hover:bg-white/[0.03] transition-all duration-500 group">
        <div class="flex items-center justify-between">
          <div class="text-[#06b6d4] text-xs font-bold tracking-[0.2em]"
            style="font-family: 'JetBrains Mono', monospace;">
            [03]
          </div>
          <iconify-icon icon="solar:slider-minimalistic-horizontal-linear"
            class="text-3xl text-white/20 group-hover:text-[#06b6d4] -rotate-90 group-hover:rotate-0 transition-all duration-500">
          </iconify-icon>
        </div>
        <div>
          <h3 class="text-3xl tracking-tight uppercase mb-4 text-white" style="font-family: 'Rajdhani', sans-serif;">
            Premium Easing
          </h3>
          <p class="text-sm text-white/40 leading-relaxed font-medium group-hover:text-white/70 transition-colors">
            Custom cubic-bezier curves and precise staggered logic deliver that signature editorial punch required for
            high-end digital experiences.
          </p>
        </div>
      </div>

      <!-- Corner Registration Marks -->
      <div
        class="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-white/20 -translate-x-[1px] -translate-y-[1px] pointer-events-none">
      </div>
      <div
        class="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-white/20 translate-x-[1px] -translate-y-[1px] pointer-events-none">
      </div>
      <div
        class="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-white/20 -translate-x-[1px] translate-y-[1px] pointer-events-none">
      </div>
      <div
        class="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-white/20 translate-x-[1px] translate-y-[1px] pointer-events-none">
      </div>
    </div>

    <!-- Footer Status Line -->
    <div class="mt-12 flex items-center gap-4 opacity-20">
      <div class="h-px flex-1 bg-white"></div>
      <span class="text-[10px] tracking-[0.4em] uppercase whitespace-nowrap text-white" style="font-family: 'JetBrains Mono', monospace;">System Nominal // Build 2.0.4</span>
      <div class="h-px w-12 bg-white"></div>
    </div>
  </div>
</section>