Interactive Service Card with Hover Depth

<div
  class="group relative hover:bg-white/10 transition-all duration-500 overflow-hidden bg-white/5 border-white/10 border rounded-2xl max-w-2xl">
  <!-- Preview canvas -->
  <div class="relative overflow-hidden bg-neutral-900/90 h-80 border-white/10 border rounded-xl">
    <!-- Layered background cards for depth -->

    <div
      class="pointer-events-none absolute right-2 top-12 bg-gradient-to-br from-white/5 to-transparent invisible w-[68%] h-[68%] border-white/5 border rounded-xl rotate-[8deg]"
      style="box-shadow: 0 20px 80px rgba(0,0,0,0.4);"></div>

    <!-- Main interface card -->
    <div
      class="relative z-10 mx-auto mt-6 w-[88%] h-[76%] rounded-xl bg-neutral-950 border border-white/15 shadow-[0_32px_80px_rgba(0,0,0,0.7)]">
      <!-- Top bar -->
      <div class="flex items-center justify-between p-4 border-b border-white/5">
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
          <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
          <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
        </div>
        <p class="text-xs text-white/60 font-geist-mono" style="">Strategy Board</p>
      </div>

      <!-- Content area -->
      <div class="px-5 pt-4">
        <div class="space-y-3">
          <div class="h-2 w-8 rounded-full bg-emerald-400/60"></div>
          <div class="h-2 w-32 rounded-full bg-white/20"></div>
          <div class="h-10 w-full rounded-lg border border-white/10 bg-white/5 flex items-center px-3">
            <div class="w-6 h-2 rounded-full" style="background: linear-gradient(90deg, #FF6A1A 0%, #FF8A3A 100%);">
            </div>
          </div>
          <div class="grid grid-cols-3 gap-2 mt-4">
            <div class="h-12 rounded-lg bg-white/5 border border-white/10"></div>
            <div class="h-12 rounded-lg bg-emerald-400/10 border border-emerald-400/20"></div>
            <div class="h-12 rounded-lg bg-white/5 border border-white/10"></div>
          </div>
        </div>
      </div>

      <!-- Floating cursor -->
      <div class="absolute right-4 bottom-6 text-emerald-400 opacity-90">

      </div>
    </div>
  </div>

  <!-- Content -->
  <div class="pt-6 pr-6 pb-6 pl-6">
    <div class="flex mb-4 items-center justify-between">
      <span class="text-lg font-semibold text-emerald-400 tracking-tight font-geist-mono" style="">01</span>

    </div>
    <h3 class="text-2xl font-semibold tracking-tight text-white mb-3" style="">Strategy &amp; Research</h3>
    <p class="text-white/60 leading-relaxed font-geist-mono text-sm" style="">I start by understanding your goals,
      researching your market, and crafting a strategic foundation for success.</p>
  </div>
</div>