Cards Stacked Showcase

<div class="ws-cards flex items-center justify-center bg-[var(--ws-cards-bg)] py-20 px-6">
  <!-- Stacked card showcase — 3 overlapping, slightly rotated cards -->
  <div class="relative h-72 w-64 sm:h-80 sm:w-72">

    <!-- Card 3 (back) -->
    <div class="absolute inset-0 -translate-y-4 translate-x-6 rotate-6 rounded-2xl border border-[var(--ws-cards-border)] bg-gradient-to-br from-purple-500 to-indigo-600 shadow-xl transition-transform duration-300 hover:-rotate-6">
      <div class="p-5">
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white/20">
          <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
        </span>
        <p class="mt-4 text-xs font-mono uppercase tracking-wider text-white/60">Document AI</p>
        <p class="mt-1 text-sm font-semibold text-white">OCR · Extraction · Comprehension</p>
        <!-- Concentric rings -->
        <div class="absolute bottom-4 right-4 h-16 w-16 rounded-full border border-white/10 before:absolute before:inset-2 before:rounded-full before:border before:border-white/10 after:absolute after:inset-4 after:rounded-full after:border after:border-white/10"></div>
      </div>
    </div>

    <!-- Card 2 (middle) -->
    <div class="absolute inset-0 -translate-y-2 -rotate-3 rounded-2xl border border-[var(--ws-cards-border)] bg-gradient-to-br from-amber-400 to-orange-500 shadow-xl transition-transform duration-300 hover:rotate-3">
      <div class="p-5">
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white/20">
          <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.091Z"/></svg>
        </span>
        <p class="mt-4 text-xs font-mono uppercase tracking-wider text-white/60">Agents</p>
        <p class="mt-1 text-sm font-semibold text-white">Tool Calling · Multi-Step · RAG</p>
        <div class="absolute bottom-4 right-4 h-16 w-16 rounded-full border border-white/10 before:absolute before:inset-2 before:rounded-full before:border before:border-white/10 after:absolute after:inset-4 after:rounded-full after:border after:border-white/10"></div>
      </div>
    </div>

    <!-- Card 1 (front) -->
    <div class="absolute inset-0 rotate-1 rounded-2xl border border-[var(--ws-cards-border)] bg-gradient-to-br from-slate-800 to-slate-900 shadow-2xl transition-transform duration-300 hover:-rotate-1">
      <div class="p-5">
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white/20">
          <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
        </span>
        <p class="mt-4 text-xs font-mono uppercase tracking-wider text-white/60">Magistral Medium</p>
        <p class="mt-1 text-sm font-semibold text-white">Frontier reasoning model</p>
        <p class="mt-2 text-xs text-white/50">State-of-the-art performance on math, science, and code with full enterprise control.</p>
        <div class="absolute bottom-4 right-4 h-16 w-16 rounded-full border border-white/10 before:absolute before:inset-2 before:rounded-full before:border before:border-white/10 after:absolute after:inset-4 after:rounded-full after:border after:border-white/10"></div>
      </div>
    </div>

  </div>
</div>