Hero Enterprise Gradient

<section class="ws-hero relative isolate overflow-hidden bg-[var(--ws-hero-bg)]">
  <!-- Gradient background layers -->
  <div class="absolute inset-0 -z-10 bg-gradient-to-b from-slate-950 via-blue-950/80 to-slate-900"></div>
  <!-- Subtle grid overlay -->
  <div class="absolute inset-0 -z-10 opacity-30" style="background-image: linear-gradient(oklch(100% 0 0 / 0.04) 1px, transparent 1px), linear-gradient(90deg, oklch(100% 0 0 / 0.04) 1px, transparent 1px); background-size: 60px 60px;"></div>
  <!-- Top accent glow -->
  <div class="absolute -top-1/3 left-1/2 -z-10 h-[40rem] w-[60rem] -translate-x-1/2 rounded-full bg-blue-500/10 blur-[100px]"></div>

  <div class="mx-auto max-w-5xl px-6 pt-24 pb-16 text-center sm:pt-32 sm:pb-20">
    <!-- Eyebrow -->
    <p class="mb-6 inline-flex items-center gap-2 rounded-full border border-blue-400/20 bg-blue-400/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-blue-300">
      Enterprise Platform
    </p>

    <!-- Headline -->
    <h1 class="text-balance text-4xl font-extrabold tracking-tight text-white sm:text-6xl lg:text-7xl">
      Operate at the Speed<br class="hidden sm:inline">
      <span class="bg-gradient-to-r from-blue-300 to-cyan-300 bg-clip-text text-transparent">of Intelligence</span>
    </h1>

    <!-- Body -->
    <p class="mx-auto mt-6 max-w-2xl text-pretty text-lg leading-relaxed text-[var(--ws-hero-text-soft)] sm:text-xl">
      Connect your data, teams, and decisions in one unified platform. Trusted by the world's largest organizations to move faster and decide smarter.
    </p>

    <!-- CTAs -->
    <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
      <a href="#" class="rounded-xl bg-white px-7 py-3.5 text-sm font-bold text-slate-900 shadow-lg shadow-blue-500/20 transition hover:bg-slate-100"> <!-- ws-ok -->
        Request a Demo
      </a>
      <a href="#" class="inline-flex items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-7 py-3.5 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/10">
        Explore Platform
        <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
      </a>
    </div>

    <!-- Metric strip -->
    <div class="mt-16 grid grid-cols-1 gap-px border border-white/8 bg-white/8 sm:grid-cols-3 rounded-2xl overflow-hidden">
      <div class="flex flex-col items-center gap-1 bg-white/[0.03] px-8 py-7">
        <span class="text-4xl font-black tracking-tight text-white">500K+</span>
        <span class="text-sm font-medium text-slate-400">Active Users</span>
      </div>
      <div class="flex flex-col items-center gap-1 bg-white/[0.03] px-8 py-7">
        <span class="text-4xl font-black tracking-tight text-white">99.9<span class="text-2xl text-slate-300">%</span></span>
        <span class="text-sm font-medium text-slate-400">Uptime SLA</span>
      </div>
      <div class="flex flex-col items-center gap-1 bg-white/[0.03] px-8 py-7">
        <span class="text-4xl font-black tracking-tight text-white">$2B+</span>
        <span class="text-sm font-medium text-slate-400">Decisions Powered</span>
      </div>
    </div>
  </div>

  <!-- Dashboard mockup strip -->
  <div class="mx-auto max-w-5xl px-6">
    <div class="overflow-hidden rounded-t-2xl bg-slate-800/50 ring-1 ring-white/10 shadow-2xl shadow-blue-900/30">
      <!-- Fake browser chrome -->
      <div class="flex items-center gap-2 border-b border-white/8 bg-slate-800/80 px-4 py-2.5">
        <span class="size-2.5 rounded-full bg-red-500/60"></span>
        <span class="size-2.5 rounded-full bg-yellow-500/60"></span>
        <span class="size-2.5 rounded-full bg-green-500/60"></span>
        <span class="mx-3 flex-1 rounded-md bg-slate-700/60 h-4 max-w-xs"></span>
      </div>
      <!-- Fake dashboard layout -->
      <div class="flex h-48 gap-0 sm:h-64">
        <!-- Sidebar -->
        <div class="hidden w-36 flex-col gap-2.5 border-r border-white/8 bg-slate-900/50 p-4 sm:flex">
          <div class="h-2.5 w-20 rounded-full bg-blue-400/40"></div>
          <div class="h-2 w-24 rounded-full bg-white/15"></div>
          <div class="h-2 w-16 rounded-full bg-white/15"></div>
          <div class="h-2 w-20 rounded-full bg-white/10"></div>
          <div class="mt-2 h-2 w-18 rounded-full bg-white/10"></div>
          <div class="h-2 w-14 rounded-full bg-white/10"></div>
        </div>
        <!-- Main content -->
        <div class="flex-1 p-5 flex flex-col gap-4">
          <div class="grid grid-cols-4 gap-3">
            <div class="h-12 rounded-xl bg-blue-500/10 ring-1 ring-blue-400/20 flex items-center justify-center">
              <div class="h-2 w-14 rounded-full bg-blue-400/40"></div>
            </div>
            <div class="h-12 rounded-xl bg-white/5 ring-1 ring-white/10"></div>
            <div class="h-12 rounded-xl bg-white/5 ring-1 ring-white/10"></div>
            <div class="h-12 rounded-xl bg-white/5 ring-1 ring-white/10"></div>
          </div>
          <div class="flex flex-1 gap-3">
            <div class="flex-1 rounded-xl bg-white/5 ring-1 ring-white/8"></div>
            <div class="w-1/3 rounded-xl bg-white/5 ring-1 ring-white/8"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>