CTA Recruitment Banner

<section class="ws-cta relative overflow-hidden">
  <!-- Dark background with subtle gradient overlay (replace with bg-[url(...)] for a real photo) -->
  <div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
  <!-- Optional texture overlay -->
  <div class="pointer-events-none absolute inset-0 opacity-10"
       style="background-image: radial-gradient(circle at 30% 50%, var(--ws-color-primary) 0%, transparent 50%), radial-gradient(circle at 70% 50%, var(--ws-color-accent) 0%, transparent 50%);">
  </div>

  <div class="relative mx-auto max-w-5xl px-6 py-24 text-center">
    <p class="text-sm font-semibold uppercase tracking-[0.18em] text-slate-400">We're hiring</p>
    <h2 class="mt-4 text-balance text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">Build the future of enterprise AI</h2>
    <p class="mx-auto mt-5 max-w-xl text-base leading-relaxed text-slate-300">We're a team of researchers, engineers, and builders obsessed with frontier models and real-world impact. Come shape what's next.</p>

    <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
      <a href="#" class="inline-flex items-center gap-2 rounded-xl bg-white px-7 py-3.5 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
        View open roles
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
      </a>
      <a href="#" class="inline-flex items-center gap-2 rounded-xl border border-white/20 px-7 py-3.5 text-sm font-semibold text-white transition hover:bg-white/10">
        Our culture
      </a>
    </div>

    <!-- Perks strip -->
    <div class="mt-14 flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
      <span class="flex items-center gap-2 text-sm text-slate-400">
        <svg class="h-4 w-4 text-emerald-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
        Remote-first
      </span>
      <span class="flex items-center gap-2 text-sm text-slate-400">
        <svg class="h-4 w-4 text-emerald-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
        Competitive equity
      </span>
      <span class="flex items-center gap-2 text-sm text-slate-400">
        <svg class="h-4 w-4 text-emerald-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
        Frontier model access
      </span>
      <span class="flex items-center gap-2 text-sm text-slate-400">
        <svg class="h-4 w-4 text-emerald-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
        Paris &amp; London offices
      </span>
    </div>
  </div>
</section>