Glassmorphic FAQ Answer Card

<article
  class="relative overflow-hidden hover:border-white/20 transition-all duration-300 bg-gradient-to-br from-white/10 to-white/5 border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-lg">
  <div class="flex-1 space-y-4">
    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        class="w-[12px] h-[12px] text-blue-400" style="width: 12px; height: 12px;">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" class=""></path>
      </svg>
      <span class="text-xs font-medium text-blue-400 tracking-wider uppercase font-sans" style="">Equipment &amp; Facilities</span>
    </div>
    <h3 class="text-xl font-medium text-white/90 tracking-tight font-sans" style="">
      What equipment do I need to get started?
    </h3>
    <p class="text-white/70 text-sm leading-relaxed font-sans" style="">
      Just bring soccer cleats, shin guards, and water. We provide all training equipment, balls, cones, and access to
      premium facilities.
    </p>
  </div>
  <button class="mt-6 group inline-flex items-center gap-2 text-sm font-medium text-white/70 hover:text-white transition-all duration-300 font-sans" style="">
                Read Full Answer
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-300">
                    <path d="M7 7h10v10"></path><path d="M7 17 17 7"></path>
                </svg>
            </button>
</article>