Hero Gradient Animated

<style>
  @keyframes ws-gradient-scroll {
    0%   { background-position: 0 0%; }
    100% { background-position: 0 -300%; }
  }

  .ws-gradient-bg {
    animation: ws-gradient-scroll 18s linear infinite;
    background-image: linear-gradient(
      180deg,
      oklch(0.35 0.18 260),
      oklch(0.5 0.2 220),
      oklch(0.45 0.22 240),
      oklch(0.5 0.2 220),
      oklch(0.35 0.18 260)
    );
    background-size: 100% 400%;
  }

  @media (prefers-reduced-motion: reduce) {
    .ws-gradient-bg {
      animation: none;
      background-position: 0 50%;
    }
  }
</style>

<section
  class="ws-hero relative overflow-hidden"
  style="min-height: 60vh"
  aria-label="Hero"
>
  <!-- Animated gradient background layer -->
  <div class="ws-gradient-bg absolute inset-0" aria-hidden="true"></div>

  <!-- Subtle dot overlay for texture -->
  <div
    class="absolute inset-0 opacity-20"
    style="background-image: radial-gradient(circle, oklch(1 0 0 / 0.3) 1px, transparent 1px); background-size: 24px 24px"
    aria-hidden="true"
  ></div>

  <!-- Content -->
  <div class="relative z-10 mx-auto flex max-w-4xl flex-col items-center px-6 py-28 text-center">

    <!-- Badge -->
    <p
      class="mb-6 inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-widest text-white backdrop-blur-sm"
      aria-label="Status: Jetzt verfügbar"
    >
      <span class="h-1.5 w-1.5 rounded-full bg-emerald-400" aria-hidden="true"></span>
      Jetzt verfügbar
    </p>

    <!-- Headline -->
    <h1 class="text-balance text-5xl font-bold tracking-tight text-white sm:text-6xl lg:text-7xl">
      Wir digitalisieren<br>den Mittelstand.
    </h1>

    <!-- Subheadline -->
    <p class="mx-auto mt-6 max-w-xl text-pretty text-lg text-[var(--ws-hero-text-soft)]">
      Beratung, Implementierung und Support aus einer Hand — für IT-Projekte, die wirklich funktionieren.
    </p>

    <!-- CTA group -->
    <div class="mt-10 flex flex-wrap justify-center gap-4" role="group" aria-label="Handlungsoptionen">
      <a
        href="#"
        class="rounded-xl bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-white/90 active:scale-95" <!-- ws-ok -->
      >
        Mehr erfahren
      </a>
      <a
        href="#"
        class="rounded-xl border border-white/30 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur-sm transition hover:bg-white/20 active:scale-95"
      >
        Kontakt aufnehmen
      </a>
    </div>

  </div>
</section>