Our Expertise Services Grid Section

<div class="max-w-7xl mr-auto ml-auto">
  <!-- Header Area -->
  <div class="flex flex-col lg:flex-row justify-between items-start mb-16 gap-12">
    <h2 class="text-5xl md:text-6xl font-semibold tracking-tighter text-white max-w-4xl leading-[0.95]">
      Our Expertise
    </h2>
    <div class="max-w-md flex flex-col gap-6 lg:pt-2">
      <p class="text-lg text-neutral-400 font-light leading-relaxed">
        We don't just build websites; we build ecosystems. Our approach integrates rigorous strategy with immersive
        design.
      </p>
      <a href="#"
        class="group inline-flex items-center text-white font-medium hover:text-neutral-300 transition-colors">
        View all services
        <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="m9 18 6-6-6-6" class=""></path>
        </svg>
      </a>
    </div>
  </div>

  <!-- Cards Grid: Side by Side (4 columns) -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">

    <!-- Card 1: Strategy & Branding -->
    <div
      class="group relative h-96 rounded-[2rem] bg-[#0A0A0A] overflow-hidden border border-white/5 transition-colors duration-500 hover:bg-[#111] hover:border-white/10">
      <!-- Visual: Stacked Layers -->
      <div class="absolute inset-0 flex items-center justify-center opacity-80 perspective-[1000px]">
        <div
          class="relative w-32 h-32 transform transition-transform duration-700 ease-out group-hover:scale-105 group-hover:translate-y-[-10px]">
          <!-- Layer 1 -->
          <div
            class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent border border-white/10 rounded-2xl transform -translate-x-4 -translate-y-2 -rotate-[15deg] backdrop-blur-[2px] transition-transform duration-500 ease-out group-hover:-translate-x-8 group-hover:-rotate-[20deg]">
          </div>
          <!-- Layer 2 -->
          <div
            class="absolute inset-0 bg-gradient-to-br from-white/15 to-transparent border border-white/15 rounded-2xl transform translate-x-0 translate-y-0 -rotate-[5deg] backdrop-blur-[4px] transition-transform duration-500 delay-75 ease-out group-hover:rotate-0">
          </div>
          <!-- Layer 3 -->
          <div
            class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent border border-white/20 rounded-2xl transform translate-x-4 translate-y-2 rotate-[5deg] backdrop-blur-[6px] shadow-2xl transition-transform duration-500 delay-150 ease-out group-hover:translate-x-8 group-hover:rotate-[15deg] flex items-center justify-center">
            <div class="w-12 h-12 rounded-full bg-indigo-500/20 blur-xl"></div>
          </div>
        </div>
      </div>

      <!-- Content -->
      <div class="absolute bottom-0 left-0 right-0 p-8 flex items-end justify-between z-10">
        <div class="flex flex-col gap-2 max-w-[70%]">
          <h3
            class="text-xl font-medium text-white tracking-tight leading-none group-hover:text-indigo-200 transition-colors">
            Strategy &amp; Branding</h3>
          <p class="text-xs text-neutral-500 line-clamp-2 leading-relaxed">Positioning, identity systems, and voice
            definition.</p>
        </div>
        <button class="w-12 h-12 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-neutral-400 transition-all duration-300 group-hover:bg-white group-hover:text-black group-hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>
      </div>
    </div>

    <!-- Card 2: Design -->
    <div
      class="group relative h-96 rounded-[2rem] bg-[#0A0A0A] overflow-hidden border border-white/5 transition-colors duration-500 hover:bg-[#111] hover:border-white/10">
      <!-- Visual: Speed/Motion Lines -->
      <div class="absolute inset-0 overflow-hidden flex items-center justify-center">
        <div class="relative w-full h-full opacity-40 group-hover:opacity-60 transition-opacity duration-500">
          <!-- Animated Dashes -->
          <div
            class="absolute top-1/4 left-[-20%] w-[140%] h-px bg-gradient-to-r from-transparent via-white/40 to-transparent transform -rotate-12 translate-x-[-10%] group-hover:translate-x-[10%] transition-transform duration-[2s] ease-in-out">
          </div>
          <div
            class="absolute top-1/3 left-[-20%] w-[140%] h-px bg-gradient-to-r from-transparent via-white/20 to-transparent transform -rotate-12 translate-x-[-20%] group-hover:translate-x-[5%] transition-transform duration-[2.5s] ease-in-out delay-75">
          </div>
          <div
            class="absolute top-1/2 left-[-20%] w-[140%] h-px bg-gradient-to-r from-transparent via-white/50 to-transparent transform -rotate-12 translate-x-[-15%] group-hover:translate-x-[15%] transition-transform duration-[1.8s] ease-in-out delay-100">
          </div>
          <div
            class="absolute top-2/3 left-[-20%] w-[140%] h-px bg-gradient-to-r from-transparent via-white/30 to-transparent transform -rotate-12 translate-x-[-5%] group-hover:translate-x-[20%] transition-transform duration-[2.2s] ease-in-out delay-150">
          </div>

          <!-- Glow Spot -->
          <div
            class="absolute top-1/2 left-1/2 w-40 h-40 bg-emerald-500/10 rounded-full blur-[60px] transform -translate-x-1/2 -translate-y-1/2 group-hover:bg-emerald-500/20 transition-colors duration-500">
          </div>
          <div
            class="absolute top-[40%] right-[20%] text-[10px] font-mono text-emerald-500/60 opacity-0 group-hover:opacity-00">
            120fps
          </div>
        </div>
      </div>

      <!-- Content -->
      <div class="absolute bottom-0 left-0 right-0 p-8 flex items-end justify-between z-10">
        <div class="flex flex-col gap-2 max-w-[70%]">
          <h3
            class="text-xl font-medium text-white tracking-tight leading-none group-hover:text-emerald-200 transition-colors">
            Design</h3>
          <p class="text-xs text-neutral-500 line-clamp-2 leading-relaxed">UI/UX design, motion graphics, and 3D
            visualization.</p>
        </div>
        <button class="w-12 h-12 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-neutral-400 transition-all duration-300 group-hover:bg-white group-hover:text-black group-hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>
      </div>
    </div>

    <!-- Card 3: Development -->
    <div
      class="group relative h-96 rounded-[2rem] bg-[#0A0A0A] overflow-hidden border border-white/5 transition-colors duration-500 hover:bg-[#111] hover:border-white/10">
      <!-- Visual: Isometric Grid -->
      <div class="absolute inset-0 flex items-center justify-center perspective-[800px] overflow-hidden">
        <div
          class="relative transform rotate-x-[60deg] rotate-z-[45deg] scale-75 group-hover:scale-90 transition-transform duration-700 ease-out">
          <!-- Grid Base -->
          <div class="w-48 h-48 border border-white/10 bg-white/5 grid grid-cols-4 grid-rows-4 rounded-lg shadow-2xl">
            <div class="border-r border-b border-white/5"></div>
            <div class="border-r border-b border-white/5"></div>
            <div class="border-r border-b border-white/5"></div>
            <div class="border-b border-white/5"></div>
            <div class="border-r border-b border-white/5"></div>
            <div
              class="border-r border-b border-white/5 bg-rose-500/10 transition-colors duration-300 group-hover:bg-rose-500/20">
            </div>
            <div class="border-r border-b border-white/5"></div>
            <div class="border-b border-white/5"></div>
            <div class="border-r border-b border-white/5"></div>
            <div class="border-r border-b border-white/5"></div>
            <div class="border-r border-b border-white/5"></div>
            <div class="border-b border-white/5"></div>
            <div class="border-r border-white/5"></div>
            <div class="border-r border-white/5"></div>
            <div class="border-r border-white/5"></div>
            <div></div>
          </div>
          <!-- Floating UI Elements -->
          <div
            class="absolute -top-10 left-10 w-16 h-16 bg-[#1A1A1A] border border-white/20 rounded-xl shadow-2xl transform translate-z-20 group-hover:translate-z-40 transition-transform duration-500 ease-out flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
              class="text-rose-400">
              <polyline points="16 18 22 12 16 6" class=""></polyline>
              <polyline points="8 6 2 12 8 18" class=""></polyline>
            </svg>
          </div>
          <!-- Connector Lines -->
          <div
            class="absolute top-1/2 left-1/2 w-0.5 h-20 bg-gradient-to-b from-rose-500/50 to-transparent transform -translate-x-1/2 -translate-y-1/2 group-hover:h-32 transition-all duration-700 ease-out origin-top">
          </div>
        </div>
      </div>

      <!-- Content -->
      <div class="absolute bottom-0 left-0 right-0 p-8 flex items-end justify-between z-10">
        <div class="flex flex-col gap-2 max-w-[70%]">
          <h3
            class="text-xl font-medium text-white tracking-tight leading-none group-hover:text-rose-200 transition-colors">
            Development</h3>
          <p class="text-xs text-neutral-500 line-clamp-2 leading-relaxed">Scalable architecture, API integration, and
            performance.</p>
        </div>
        <button class="w-12 h-12 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-neutral-400 transition-all duration-300 group-hover:bg-white group-hover:text-black group-hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>
      </div>
    </div>

    <!-- Card 4: Production -->
    <div
      class="group relative h-96 rounded-[2rem] bg-[#0A0A0A] overflow-hidden border border-white/5 transition-colors duration-500 hover:bg-[#111] hover:border-white/10">
      <!-- Visual: Lens/Focus -->
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="relative w-40 h-40 flex items-center justify-center">
          <!-- Concentric Rings -->
          <div
            class="absolute inset-0 rounded-full border border-white/5 scale-100 group-hover:scale-125 transition-transform duration-700 ease-out">
          </div>
          <div
            class="absolute inset-4 rounded-full border border-white/5 scale-100 group-hover:scale-110 transition-transform duration-700 delay-75 ease-out">
          </div>
          <div
            class="absolute inset-8 rounded-full border border-white/10 scale-100 group-hover:scale-105 transition-transform duration-700 delay-150 ease-out border-dashed opacity-50">
          </div>

          <!-- Rotating Brackets -->
          <div
            class="absolute inset-0 animate-[spin_12s_linear_infinite] group-hover:animate-[spin_4s_linear_infinite] opacity-30">
            <div class="absolute top-0 left-1/2 w-0.5 h-2 bg-white -translate-x-1/2"></div>
            <div class="absolute bottom-0 left-1/2 w-0.5 h-2 bg-white -translate-x-1/2"></div>
            <div class="absolute left-0 top-1/2 w-2 h-0.5 bg-white -translate-y-1/2"></div>
            <div class="absolute right-0 top-1/2 w-2 h-0.5 bg-white -translate-y-1/2"></div>
          </div>

          <!-- Central Glow -->
          <div
            class="w-16 h-16 rounded-full bg-blue-500/10 blur-xl group-hover:bg-blue-500/20 transition-colors duration-500">
          </div>
          <div class="w-2 h-2 rounded-full bg-white shadow-[0_0_15px_rgba(255,255,255,0.8)] z-10"></div>
        </div>
      </div>

      <!-- Content -->
      <div class="absolute bottom-0 left-0 right-0 p-8 flex items-end justify-between z-10">
        <div class="flex flex-col gap-2 max-w-[70%]">
          <h3
            class="text-xl font-medium text-white tracking-tight leading-none group-hover:text-blue-200 transition-colors">
            Production</h3>
          <p class="text-xs text-neutral-500 line-clamp-2 leading-relaxed">Copywriting, photography, and video
            production.</p>
        </div>
        <button class="w-12 h-12 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-neutral-400 transition-all duration-300 group-hover:bg-white group-hover:text-black group-hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>
      </div>
    </div>

  </div>
</div>