Solution Grid Base

<section class="ws-solution-grid bg-[var(--ws-solution-grid-bg)] py-20">
  <div class="mx-auto max-w-6xl px-6">
    <!-- Header -->
    <div class="mb-12 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <p class="mb-2 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--ws-color-primary)]">Our Products</p>
        <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-solution-grid-text)] sm:text-4xl">
          One platform. Every use case.
        </h2>
      </div>
      <a href="#" class="shrink-0 text-sm font-semibold text-[var(--ws-solution-grid-link)] underline-offset-2 hover:underline">
        View all solutions →
      </a>
    </div>

    <!-- 3×3 Solution grid -->
    <div class="grid grid-cols-1 gap-px bg-[var(--ws-solution-grid-border)] sm:grid-cols-2 lg:grid-cols-3 rounded-2xl overflow-hidden">
      <!-- Card 1 -->
      <a href="#" class="group flex gap-4 bg-[var(--ws-solution-grid-card-bg)] p-6 transition hover:bg-[var(--ws-solution-grid-card-bg-hover)]">
        <span class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--ws-solution-grid-icon-bg)]">
          <svg class="size-5 text-[var(--ws-solution-grid-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg>
        </span>
        <div>
          <h3 class="font-semibold text-[var(--ws-solution-grid-text)] group-hover:text-[var(--ws-solution-grid-link)]">Financial Management</h3>
          <p class="mt-1 text-sm leading-relaxed text-[var(--ws-solution-grid-text-soft)]">Consolidate ledgers, automate close, and report in real time.</p>
          <span class="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--ws-solution-grid-link)]">Learn more <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></span>
        </div>
      </a>

      <!-- Card 2 -->
      <a href="#" class="group flex gap-4 bg-[var(--ws-solution-grid-card-bg)] p-6 transition hover:bg-[var(--ws-solution-grid-card-bg-hover)]">
        <span class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--ws-solution-grid-icon-bg)]">
          <svg class="size-5 text-[var(--ws-solution-grid-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
        </span>
        <div>
          <h3 class="font-semibold text-[var(--ws-solution-grid-text)] group-hover:text-[var(--ws-solution-grid-link)]">Human Resources</h3>
          <p class="mt-1 text-sm leading-relaxed text-[var(--ws-solution-grid-text-soft)]">Hire, onboard, and develop talent with unified HR workflows.</p>
          <span class="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--ws-solution-grid-link)]">Learn more <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></span>
        </div>
      </a>

      <!-- Card 3 -->
      <a href="#" class="group flex gap-4 bg-[var(--ws-solution-grid-card-bg)] p-6 transition hover:bg-[var(--ws-solution-grid-card-bg-hover)]">
        <span class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--ws-solution-grid-icon-bg)]">
          <svg class="size-5 text-[var(--ws-solution-grid-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
        </span>
        <div>
          <h3 class="font-semibold text-[var(--ws-solution-grid-text)] group-hover:text-[var(--ws-solution-grid-link)]">Supply Chain</h3>
          <p class="mt-1 text-sm leading-relaxed text-[var(--ws-solution-grid-text-soft)]">End-to-end visibility from sourcing to last-mile delivery.</p>
          <span class="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--ws-solution-grid-link)]">Learn more <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></span>
        </div>
      </a>

      <!-- Card 4 -->
      <a href="#" class="group flex gap-4 bg-[var(--ws-solution-grid-card-bg)] p-6 transition hover:bg-[var(--ws-solution-grid-card-bg-hover)]">
        <span class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--ws-solution-grid-icon-bg)]">
          <svg class="size-5 text-[var(--ws-solution-grid-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
        </span>
        <div>
          <h3 class="font-semibold text-[var(--ws-solution-grid-text)] group-hover:text-[var(--ws-solution-grid-link)]">Analytics & BI</h3>
          <p class="mt-1 text-sm leading-relaxed text-[var(--ws-solution-grid-text-soft)]">Turn operational data into decisions with embedded analytics.</p>
          <span class="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--ws-solution-grid-link)]">Learn more <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></span>
        </div>
      </a>

      <!-- Card 5 -->
      <a href="#" class="group flex gap-4 bg-[var(--ws-solution-grid-card-bg)] p-6 transition hover:bg-[var(--ws-solution-grid-card-bg-hover)]">
        <span class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--ws-solution-grid-icon-bg)]">
          <svg class="size-5 text-[var(--ws-solution-grid-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
        </span>
        <div>
          <h3 class="font-semibold text-[var(--ws-solution-grid-text)] group-hover:text-[var(--ws-solution-grid-link)]">Customer Service</h3>
          <p class="mt-1 text-sm leading-relaxed text-[var(--ws-solution-grid-text-soft)]">Resolve faster with AI-assisted case management and routing.</p>
          <span class="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--ws-solution-grid-link)]">Learn more <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></span>
        </div>
      </a>

      <!-- Card 6 -->
      <a href="#" class="group flex gap-4 bg-[var(--ws-solution-grid-card-bg)] p-6 transition hover:bg-[var(--ws-solution-grid-card-bg-hover)]">
        <span class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--ws-solution-grid-icon-bg)]">
          <svg class="size-5 text-[var(--ws-solution-grid-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
        </span>
        <div>
          <h3 class="font-semibold text-[var(--ws-solution-grid-text)] group-hover:text-[var(--ws-solution-grid-link)]">Risk &amp; Compliance</h3>
          <p class="mt-1 text-sm leading-relaxed text-[var(--ws-solution-grid-text-soft)]">Identify, assess, and mitigate enterprise risk in one view.</p>
          <span class="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--ws-solution-grid-link)]">Learn more <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></span>
        </div>
      </a>

      <!-- Card 7 -->
      <a href="#" class="group flex gap-4 bg-[var(--ws-solution-grid-card-bg)] p-6 transition hover:bg-[var(--ws-solution-grid-card-bg-hover)]">
        <span class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--ws-solution-grid-icon-bg)]">
          <svg class="size-5 text-[var(--ws-solution-grid-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </span>
        <div>
          <h3 class="font-semibold text-[var(--ws-solution-grid-text)] group-hover:text-[var(--ws-solution-grid-link)]">Intelligent Automation</h3>
          <p class="mt-1 text-sm leading-relaxed text-[var(--ws-solution-grid-text-soft)]">Automate cross-functional workflows with built-in AI agents.</p>
          <span class="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--ws-solution-grid-link)]">Learn more <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></span>
        </div>
      </a>

      <!-- Card 8 -->
      <a href="#" class="group flex gap-4 bg-[var(--ws-solution-grid-card-bg)] p-6 transition hover:bg-[var(--ws-solution-grid-card-bg-hover)]">
        <span class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--ws-solution-grid-icon-bg)]">
          <svg class="size-5 text-[var(--ws-solution-grid-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/></svg>
        </span>
        <div>
          <h3 class="font-semibold text-[var(--ws-solution-grid-text)] group-hover:text-[var(--ws-solution-grid-link)]">IT &amp; Infrastructure</h3>
          <p class="mt-1 text-sm leading-relaxed text-[var(--ws-solution-grid-text-soft)]">Manage assets, incidents, and IT services on a single platform.</p>
          <span class="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--ws-solution-grid-link)]">Learn more <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></span>
        </div>
      </a>

      <!-- Card 9 -->
      <a href="#" class="group flex gap-4 bg-[var(--ws-solution-grid-card-bg)] p-6 transition hover:bg-[var(--ws-solution-grid-card-bg-hover)]">
        <span class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--ws-solution-grid-icon-bg)]">
          <svg class="size-5 text-[var(--ws-solution-grid-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064"/></svg>
        </span>
        <div>
          <h3 class="font-semibold text-[var(--ws-solution-grid-text)] group-hover:text-[var(--ws-solution-grid-link)]">Procurement</h3>
          <p class="mt-1 text-sm leading-relaxed text-[var(--ws-solution-grid-text-soft)]">Streamline sourcing, contracts, and vendor management at scale.</p>
          <span class="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--ws-solution-grid-link)]">Learn more <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></span>
        </div>
      </a>
    </div>
  </div>
</section>