Cards Colored

<div class="ws-cards bg-[var(--ws-cards-bg)] py-12 px-6">
  <div class="mx-auto max-w-5xl">

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">

      <!-- Card: Featured (col-span-2), Indigo -->
      <a href="#" class="group relative col-span-2 flex min-h-48 flex-col overflow-hidden rounded-2xl border border-white/10 p-6 transition hover:shadow-xl"
         style="background: linear-gradient(135deg, oklch(0.42 0.2 264), oklch(0.32 0.18 290));">
        <!-- Pixel grid overlay -->
        <div class="pointer-events-none absolute inset-0 opacity-20 mix-blend-screen"
             style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 12px 12px;"></div>
        <!-- Badge -->
        <span class="relative ml-auto inline-flex shrink-0 items-center rounded-full bg-white/15 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-white backdrop-blur-sm">Agents</span>
        <div class="relative mt-auto">
          <h3 class="text-xl font-bold text-white sm:text-2xl">Building multi-agent systems</h3>
          <p class="mt-2 text-sm text-white/70">Orchestrate specialized agents that collaborate, hand off tasks, and operate within guardrails.</p>
        </div>
      </a>

      <!-- Card: Regular, Orange -->
      <a href="#" class="group relative flex min-h-48 flex-col overflow-hidden rounded-2xl border border-white/10 p-6 transition hover:shadow-xl"
         style="background: linear-gradient(135deg, oklch(0.58 0.18 50), oklch(0.45 0.2 30));">
        <div class="pointer-events-none absolute inset-0 opacity-20 mix-blend-screen"
             style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 12px 12px;"></div>
        <span class="relative ml-auto inline-flex shrink-0 items-center rounded-full bg-white/15 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-white backdrop-blur-sm">OCR</span>
        <div class="relative mt-auto">
          <h3 class="text-lg font-bold text-white">Document AI: invoice extraction</h3>
          <p class="mt-1.5 text-xs text-white/70">Parse and extract structured data from unstructured PDFs.</p>
        </div>
      </a>

      <!-- Card: Regular, Emerald -->
      <a href="#" class="group relative flex min-h-48 flex-col overflow-hidden rounded-2xl border border-white/10 p-6 transition hover:shadow-xl"
         style="background: linear-gradient(135deg, oklch(0.45 0.16 162), oklch(0.35 0.14 185));">
        <div class="pointer-events-none absolute inset-0 opacity-20 mix-blend-screen"
             style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 12px 12px;"></div>
        <span class="relative ml-auto inline-flex shrink-0 items-center rounded-full bg-white/15 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-white backdrop-blur-sm">RAG</span>
        <div class="relative mt-auto">
          <h3 class="text-lg font-bold text-white">Semantic search with embeddings</h3>
          <p class="mt-1.5 text-xs text-white/70">Build production-ready retrieval pipelines over large document corpora.</p>
        </div>
      </a>

      <!-- Card: Regular, Pink -->
      <a href="#" class="group relative flex min-h-48 flex-col overflow-hidden rounded-2xl border border-white/10 p-6 transition hover:shadow-xl"
         style="background: linear-gradient(135deg, oklch(0.52 0.2 340), oklch(0.4 0.18 310));">
        <div class="pointer-events-none absolute inset-0 opacity-20 mix-blend-screen"
             style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 12px 12px;"></div>
        <span class="relative ml-auto inline-flex shrink-0 items-center rounded-full bg-white/15 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-white backdrop-blur-sm">Fine-tuning</span>
        <div class="relative mt-auto">
          <h3 class="text-lg font-bold text-white">Fine-tune on proprietary data</h3>
          <p class="mt-1.5 text-xs text-white/70">Adapt foundation models to your domain with supervised fine-tuning.</p>
        </div>
      </a>

      <!-- Card: Featured (col-span-2), Yellow -->
      <a href="#" class="group relative col-span-2 flex min-h-44 flex-col overflow-hidden rounded-2xl border border-white/10 p-6 transition hover:shadow-xl sm:col-span-1 lg:col-span-2"
         style="background: linear-gradient(135deg, oklch(0.65 0.17 90), oklch(0.52 0.18 60));">
        <div class="pointer-events-none absolute inset-0 opacity-20 mix-blend-screen"
             style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 12px 12px;"></div>
        <span class="relative ml-auto inline-flex shrink-0 items-center rounded-full bg-white/15 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-white backdrop-blur-sm">Evaluation</span>
        <div class="relative mt-auto">
          <h3 class="text-xl font-bold text-white">Evaluating LLM outputs at scale</h3>
          <p class="mt-2 text-sm text-white/70">Systematic evaluation frameworks, benchmarks, and human feedback loops for production AI.</p>
        </div>
      </a>

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