Contact & Philosophy Card

<article class="relative overflow-hidden rounded-2xl lg:rounded-3xl shadow-xl bg-zinc-900 text-white flex flex-col min-h-[320px] lg:min-h-[400px] w-[400px]">
  <div class="p-6 lg:p-8 grow">
    <h3 class="flex items-center gap-2 uppercase text-xs font-normal text-zinc-400 tracking-widest mb-6">
      Our Philosophy
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
        <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path>
        <path d="M9 18h6"></path>
        <path d="M10 22h4"></path>
      </svg>
    </h3>
    <div class="space-y-4">
      <p class="text-3xl font-normal text-white tracking-tighter">Motion isn't just movement.</p>
      <p class="text-sm leading-relaxed text-zinc-300">
        It's the pulse between frames, the breath between cuts. We choreograph digital symphonies where every transition serves purpose, every effect tells truth.
      </p>
      <div class="grid grid-cols-3 gap-4 pt-4">
        <div class="text-center">
          <div class="text-2xl font-bold text-emerald-400">127+</div>
          <div class="text-xs text-zinc-400 uppercase tracking-wide">Projects</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-violet-400">24</div>
          <div class="text-xs text-zinc-400 uppercase tracking-wide">Awards</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-pink-400">5yr</div>
          <div class="text-xs text-zinc-400 uppercase tracking-wide">Legacy</div>
        </div>
      </div>
    </div>
  </div>
  <div class="p-6 lg:p-8 border-t border-zinc-800 space-y-3">
    <div class="flex items-center gap-2 text-sm">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-emerald-400">
        <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
        <rect x="2" y="4" width="20" height="16" rx="2"></rect>
      </svg>
      <a href="mailto:hello@prismstudio.co" class="hover:text-emerald-400 transition-colors">hello@prismstudio.co</a>
    </div>
    <div class="flex items-center gap-2 text-sm">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-violet-400">
        <path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path>
      </svg>
      <span>+1 (555) 123-4567</span>
    </div>
    <div class="flex items-center gap-2 text-sm">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-pink-400">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
        <path d="M2 12h20"></path>
      </svg>
      <a href="#" class="hover:text-pink-400 transition-colors">www.prismstudio.co</a>
    </div>
  </div>
</article>