Music Studio Hero with Stats and Service Cards

<section class="sm:px-6 lg:px-8 lg:py-12 max-w-6xl mt-24 mr-auto mb-24 ml-auto pt-10 pr-4 pb-12 pl-4">
  <style id="border-gradient-shared-style">
    [style*="--border-gradient"]::before {
      content: "";
      position: absolute;
      inset: 0;
      padding: 1px;
      border-radius: var(--border-radius-before, inherit);
      -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      background: var(--border-gradient);
      pointer-events: none;
    }
  </style>
  <div class="flex flex-col gap-10 lg:gap-12 gap-x-10-y-10">
    <div class="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
      <div class="flex-1 flex flex-col gap-6">
        <div class="flex flex-wrap items-center gap-3 text-[11px] text-slate-400">
          <div
            class="inline-flex bg-gradient-to-br from-white/10 to-white/0 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 gap-x-2 gap-y-2 items-center"
            style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
            <span class="inline-block h-1.5 w-1.5 rounded-full bg-fuchsia-500"></span>
            <span class="font-medium uppercase tracking-[0.18em] text-slate-300">
              Trusted by independent labels
            </span>
          </div>
          <div class="flex flex-wrap items-center gap-4 text-[11px] text-slate-500">
            <span class="uppercase tracking-[0.2em]">Sonic Wave</span>
            <span class="uppercase tracking-[0.2em]">Vibe Theory</span>
            <span class="uppercase tracking-[0.2em]">Echo District</span>
            <span class="uppercase tracking-[0.2em]">Neon Groove</span>
          </div>
        </div>

        <div class="flex flex-col gap-4">
          <h1 class="text-4xl sm:text-5xl lg:text-[44px] font-semibold tracking-tight text-slate-50">
            Visual systems for sounds that echo across the industry.
          </h1>
          <p class="text-base sm:text-lg text-slate-400 max-w-xl">
            Lumen Audio Studio transforms musical identity into a high-fidelity visual system—engineered to scale
            from single drops to global world tours.
          </p>

          <div class="mt-2 grid grid-cols-2 sm:flex sm:flex-row gap-4 text-xs sm:text-sm">
            <div
              class="flex gap-3 bg-gradient-to-br from-white/10 to-white/0 rounded-2xl pt-2 pr-3 pb-2 pl-3 gap-x-3 gap-y-3 items-center"
              style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 16px">
              <div class="flex h-7 w-7 items-center justify-center rounded-full bg-slate-950/90 text-fuchsia-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="w-[15px] h-[15px]">
                  <path d="M9 18V5l12-2v13"></path>
                  <circle cx="6" cy="18" r="3"></circle>
                  <circle cx="18" cy="16" r="3"></circle>
                </svg>
              </div>
              <div class="flex flex-col">
                <span class="text-sm font-medium tracking-tight text-slate-100">
                  142 Album Drops
                </span>
                <span class="text-[11px] text-slate-400">
                  Chart-topping visual assets since 2017
                </span>
              </div>
            </div>

            <div
              class="flex bg-gradient-to-br from-white/10 to-white/0 rounded-2xl px-3 py-2 gap-x-3 gap-y-3 items-center"
              style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 16px">
              <div class="flex h-7 w-7 items-center justify-center rounded-full bg-slate-950/90 text-fuchsia-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="w-[15px] h-[15px]">
                  <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z"></path>
                  <path d="M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"></path>
                </svg>
              </div>
              <div class="flex flex-col">
                <span class="text-sm font-medium tracking-tight text-slate-100">
                  45 Label Partners
                </span>
                <span class="text-[11px] text-slate-400">
                  From indie boutiques to global majors
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="w-full max-w-xs sm:max-w-sm lg:max-w-xs">
        <div
          class="flex flex-col gap-4 rounded-3xl bg-gradient-to-br from-fuchsia-500/10 via-slate-900/90 to-slate-900 border border-fuchsia-500/30 px-5 py-5"
          style="position: relative; --border-gradient: linear-gradient(135deg, rgba(217, 70, 239, 0.6), rgba(148, 163, 184, 0.1)); --border-radius-before: 24px">
          <div class="flex items-center justify-between gap-3">
            <div class="flex flex-col">
              <span class="text-[11px] font-medium uppercase tracking-[0.18em] text-fuchsia-400">
                Release Strategy
              </span>
              <span class="mt-1 text-xl font-semibold tracking-tight text-slate-50">
                Schedule your sonic audit
              </span>
            </div>
            <div class="flex h-9 w-9 items-center justify-center rounded-2xl bg-fuchsia-500 text-slate-950">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 16a5 5 0 1 1 5-5 5 5 0 0 1-5 5Zm0-8a3 3 0 1 0 3 3 3 3 0 0 0-3-3Z">
                </path>
              </svg>
            </div>
          </div>

          <p class="text-sm text-slate-200">
            Review your upcoming rollout in 5 minutes. Within 48 hours, you’ll get a tailored visual storyboard and
            distribution roadmap.
          </p>

          <button class="inline-flex items-center justify-between gap-2 rounded-2xl bg-fuchsia-500 px-4 py-2 text-sm font-medium text-slate-950 hover:bg-fuchsia-400 transition">
            <span class="">Book a release session</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="w-[16px] h-[16px]">
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
          </button>

          <div class="flex items-center justify-between text-[11px] text-slate-400 pt-1">
            <span class="">Next available slot: <span class="text-slate-200">May 2025</span></span>
            <span class="inline-flex items-center gap-1">
              <span class="h-1.5 w-1.5 rounded-full bg-fuchsia-500 animate-pulse"></span>
            <span class="">2 slots left</span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-4">
      <article
        class="group flex flex-col gap-4 overflow-hidden bg-gradient-to-br from-white/10 to-white/0 rounded-3xl pt-5 pr-4 pb-5 pl-4 relative gap-x-4 gap-y-4"
        style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
        <div class="flex flex-col gap-4">
          <div class="relative h-32 w-full rounded-2xl overflow-hidden border border-slate-800/80">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/419fb450-fb0d-4f9e-9852-133d18177ec0_800w.webp" alt="Audio-visual storyboarding" class="w-full h-full object-cover">
          </div>
          <div class="flex items-center justify-between gap-2 border-t border-slate-800/80 pt-3">
            <div
              class="flex h-9 w-9 items-center justify-center rounded-2xl bg-slate-900/90 border border-slate-800/90 text-fuchsia-400">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M2 10v3M6 6v11M10 3v18M14 8v7M18 5v13M22 10v3"></path>
              </svg>
            </div>
            <span class="text-[11px] uppercase tracking-[0.18em] text-slate-500">
              Visual EQ
            </span>
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold tracking-tight text-slate-50">
              Release Storylining
            </h3>
            <p class="text-sm text-slate-400">
              Define the visual pulse of your track with narrative arcs that synchronize with your sound.
            </p>
          </div>
        </div>
      </article>

      <article
        class="group relative rounded-3xl bg-slate-50 text-slate-900 px-4 py-5 flex flex-col gap-4 shadow-[0_0_60px_rgba(217,70,239,0.15)]">
        <div class="flex flex-col gap-4">
          <div class="relative h-32 w-full rounded-2xl overflow-hidden border border-slate-200">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4a0df060-4f2f-415a-8efc-510669e96e2a_800w.webp" alt="Modular music video production" class="w-full h-full object-cover">
          </div>
          <div class="flex items-center justify-between gap-2 border-t border-slate-200 pt-3">
            <div class="flex h-9 w-9 items-center justify-center rounded-2xl bg-fuchsia-600 text-slate-50">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect width="18" height="18" x="3" y="3" rx="2" />
                <path d="M8 12h8m-4-4v8" />
              </svg>
            </div>
            <span class="text-[11px] uppercase tracking-[0.18em] text-slate-500">
              Core Studio
            </span>
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold tracking-tight">
              Modular Content Systems
            </h3>
            <p class="text-sm text-slate-600">
              Build a library of visual loops, canvas art, and social clips that power a 6-month promotional cycle.
            </p>
            <p class="mt-1 text-[11px] font-medium uppercase tracking-[0.18em] text-fuchsia-600">
              Artist-First Engagements · Tour or Studio
            </p>
          </div>
        </div>
      </article>

      <article
        class="group flex flex-col gap-4 overflow-hidden bg-gradient-to-br from-white/10 to-white/0 rounded-3xl pt-5 pr-4 pb-5 pl-4 relative gap-x-4 gap-y-4"
        style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
        <div class="flex flex-col gap-4">
          <div class="relative h-32 w-full rounded-2xl overflow-hidden border border-slate-800/80">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/41c6783e-584f-4e25-a83d-11fae0327186_800w.webp" alt="Music streaming analytics" class="w-full h-full object-cover">
          </div>
          <div class="flex items-center justify-between gap-2 border-t border-slate-800/80 pt-3">
            <div
              class="flex h-9 w-9 items-center justify-center rounded-2xl bg-slate-900/90 border border-slate-800/90 text-fuchsia-400">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 3v18h18" />
                <path d="M18 17V9" />
                <path d="M13 17V5" />
                <path d="M8 17v-3" />
              </svg>
            </div>
            <span class="text-[11px] uppercase tracking-[0.18em] text-slate-500">
              Stream Metrics
            </span>
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold tracking-tight text-slate-50">
              Drop Performance Layer
            </h3>
            <p class="text-sm text-slate-400">
              Track how your visuals impact streaming numbers and listener retention with precision dashboards.
            </p>
          </div>
        </div>
      </article>

      <article
        class="group flex flex-col gap-4 overflow-hidden bg-gradient-to-br from-white/10 to-white/0 rounded-3xl pt-5 pr-4 pb-5 pl-4 relative gap-x-4 gap-y-4"
        style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
        <div class="flex flex-col gap-4">
          <div class="relative h-32 w-full rounded-2xl overflow-hidden border border-slate-800/80">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3e54e567-5c30-441a-baee-ee5f1bd4e184_800w.webp" alt="Label creative team training" class="w-full h-full object-cover">
          </div>
          <div class="flex items-center justify-between gap-2 border-t border-slate-800/80 pt-3">
            <div
              class="flex h-9 w-9 items-center justify-center rounded-2xl bg-slate-900/90 border border-slate-800/90 text-fuchsia-400">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z" />
                <path d="M8 7h6" />
                <path d="M8 11h8" />
              </svg>
            </div>
            <span class="text-[11px] uppercase tracking-[0.18em] text-slate-500">
              Label Playbooks
            </span>
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold tracking-tight text-slate-50">
              Brand Toolkits
            </h3>
            <p class="text-sm text-slate-400">
              Equip your label's digital team with genre-specific playbooks and asset recipes for consistent drops.
            </p>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>