Story-Driven Services Hero with CTA and 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">
    <!-- Top row: brands & headline -->
    <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">
        <!-- Trusted by -->
        <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-lime-400"></span>
            <span class="font-medium uppercase tracking-[0.18em] text-slate-300">
              Trusted by creative teams
            </span>
          </div>
          <div class="flex flex-wrap items-center gap-4 text-[11px] text-slate-500">
            <span class="uppercase tracking-[0.2em]">Arcadia Lab</span>
            <span class="uppercase tracking-[0.2em]">Northline</span>
            <span class="uppercase tracking-[0.2em]">Vista Field</span>
            <span class="uppercase tracking-[0.2em]">Delta Craft</span>
          </div>
        </div>

        <!-- Heading -->
        <div class="flex flex-col gap-4">
          <h1 class="text-4xl sm:text-5xl lg:text-[44px] font-semibold tracking-tight text-slate-50">
            Systems for stories that grow with your studio.
          </h1>
          <p class="text-base sm:text-lg text-slate-400 max-w-xl">
            Lumen Narrative Studio turns scattered content ideas into a durable visual system—designed to compound
            across launches, channels, and seasons.
          </p>

          <!-- Stats row -->
          <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">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"
                  class="w-[15px] h-[15px]" data-solar="chart-square-bold-duotone" data-icon-set="solar">
                  <g fill="currentColor" class="">
                    <path
                      d="M3 9.615C3 5.96 3 4.132 4.17 3.066C5.34 2 7.227 2 11 2h2c3.773 0 5.66 0 6.83 1.066C21 4.132 21 5.96 21 9.615V11H3z"
                      opacity=".5" class=""></path>
                    <path
                      d="M3 11h18v3.385c0 3.655 0 5.483-1.17 6.549C18.66 22 16.773 22 13 22h-2c-3.773 0-5.66 0-6.83-1.066C3 19.868 3 18.04 3 14.385z"
                      class=""></path>
                    <path
                      d="M8 12.75a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 12.75m4-1.5a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75m4 3a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 1 .75-.75"
                      class=""></path>
                  </g>
                </svg>
              </div>
              <div class="flex flex-col">
                <span class="text-sm font-medium tracking-tight text-slate-100">
                  68 launches
                </span>
                <span class="text-[11px] text-slate-400">
                  Documented end-to-end 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">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"
                  class="w-[15px] h-[15px]" data-solar="user-heart-rounded-bold-duotone" data-icon-set="solar">
                  <g fill="currentColor" class="">
                    <path
                      d="M5 11.25A5.25 5.25 0 0 1 10.25 6h3.5A5.25 5.25 0 0 1 19 11.25V13c0 4.243-3.582 7.5-8 7.5s-8-3.257-8-7.5z"
                      opacity=".5" class=""></path>
                    <path
                      d="M12.86 4.75a3.25 3.25 0 1 1 5.3 3.63l-2.6 2.78a1.17 1.17 0 0 1-1.7 0l-2.6-2.78a3.25 3.25 0 0 1 1.6-5.63"
                      opacity="1" class=""></path>
                  </g>
                </svg>
              </div>
              <div class="flex flex-col">
                <span class="text-sm font-medium tracking-tight text-slate-100">
                  31 partner teams
                </span>
                <span class="text-[11px] text-slate-400">
                  From early-stage studios to global labels
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Right column: CTA -->
      <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-lime-400/10 via-slate-900/90 to-slate-900 border border-lime-400/30 px-5 py-5"
          style="position: relative; --border-gradient: linear-gradient(135deg, rgba(190, 242, 100, 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-lime-300">
                Strategy slot
              </span>
              <span class="mt-1 text-xl font-semibold tracking-tight text-slate-50">
                Reserve your narrative audit
              </span>
            </div>
            <div class="flex h-9 w-9 items-center justify-center rounded-2xl bg-lime-400 text-slate-950">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                class="w-[18px] h-[18px]" data-solar="calendar-add-bold-duotone" data-icon-set="solar">
                <g fill="currentColor" class="">
                  <path
                    d="M6.96 2c.418 0 .756.31.756.692V4.09c.67-.012 1.422-.012 2.268-.012h4.032c.846 0 1.597 0 2.268.012V2.692c0-.382.338-.692.756-.692s.756.31.756.692V4.15c1.45.106 2.403.368 3.103 1.008c.7.641.985 1.513 1.101 2.842v1H2V8c.116-1.329.401-2.2 1.101-2.842c.7-.64 1.652-.902 3.103-1.008V2.692c0-.382.339-.692.756-.692"
                    opacity=".5" class=""></path>
                  <path
                    d="M22 14v-2c0-.839-.013-2.335-.026-3H2.006c-.013.665 0 2.161 0 3v2c0 3.771 0 5.657 1.17 6.828C4.349 22 6.234 22 10.004 22h4c3.77 0 5.654 0 6.826-1.172S22 17.771 22 14"
                    opacity=".5" class=""></path>
                  <path
                    d="M16 13.25a.75.75 0 0 1 .75.75v1.25H18a.75.75 0 0 1 0 1.5h-1.25V18a.75.75 0 0 1-1.5 0v-1.25H14a.75.75 0 0 1 0-1.5h1.25V14a.75.75 0 0 1 .75-.75"
                    opacity="1" class=""></path>
                </g>
              </svg>
            </div>
          </div>

          <p class="text-sm text-slate-200">
            Share your next launch in 5 questions. Within 48 hours, you’ll get a tailored storyboard outline and channel
            map.
          </p>

          <button class="inline-flex items-center justify-between gap-2 rounded-2xl bg-lime-400 px-4 py-2 text-sm font-medium text-slate-950 hover:bg-lime-300 transition">
            <span class="">Book a 25‑minute intro call</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="w-[16px] h-[16px]" data-solar="arrow-right-up-bold-duotone" data-icon-set="solar" stroke-width="2" data-icon-replaced="true" style="color: rgb(2, 6, 23); width: 16px; height: 16px;">
              <g fill="currentColor" class="">
                <path d="M5.636 18.364A9 9 0 0 1 5 15V9a4 4 0 0 1 4-4h6a9 9 0 0 1 3.364.636z" opacity=".5" class=""></path>
                <path d="M10.75 8A.75.75 0 0 0 10 8.75v5.5a.75.75 0 0 0 1.5 0V10.56l4.22 4.22a.75.75 0 1 0 1.06-1.06l-4.22-4.22h3.69a.75.75 0 0 0 0-1.5h-5.5z" opacity="1" class=""></path>
              </g>
            </svg>
          </button>

          <div class="flex items-center justify-between text-[11px] text-slate-400 pt-1">
            <span class="">Next available window: <span class="text-slate-200">April 2025</span></span>
            <span class="inline-flex items-center gap-1">
              <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
            <span class="">3 spots left</span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom row: service cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-4">
      <!-- Card 1 -->
      <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="Storyboarding and creative planning" 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">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                class="w-[16px] h-[16px]" data-solar="sparkles-bold-duotone" data-icon-set="solar">
                <g fill="currentColor" class="">
                  <path
                    d="M12 2.25a.75.75 0 0 1 .707.498l1.118 3.266a2.25 2.25 0 0 0 1.409 1.409l3.266 1.118a.75.75 0 0 1 0 1.418l-3.266 1.118a2.25 2.25 0 0 0-1.409 1.409l-1.118 3.266a.75.75 0 0 1-1.414 0l-1.118-3.266a2.25 2.25 0 0 0-1.41-1.409L4.7 9.84a.75.75 0 0 1 0-1.418l3.266-1.118a2.25 2.25 0 0 0 1.409-1.409l1.118-3.266A.75.75 0 0 1 12 2.25"
                    opacity=".5" class=""></path>
                  <path
                    d="M6 16.25a.75.75 0 0 1 .707.498l.433 1.266c.162.475.54.853 1.015 1.015l1.266.433a.75.75 0 0 1 0 1.418l-1.266.433a1.75 1.75 0 0 0-1.015 1.015l-.433 1.266a.75.75 0 0 1-1.414 0l-.433-1.266a1.75 1.75 0 0 0-1.015-1.015l-1.266-.433a.75.75 0 0 1 0-1.418l1.266-.433c.475-.162.853-.54 1.015-1.015l.433-1.266A.75.75 0 0 1 6 16.25"
                    opacity="1" class=""></path>
                </g>
              </svg>
            </div>
            <span class="text-[11px] uppercase tracking-[0.18em] text-slate-500">
              Story arcs
            </span>
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold tracking-tight text-slate-50">
              Campaign Storylining
            </h3>
            <p class="text-sm text-slate-400">
              Clarify the spine of your launch with narrative pillars, episodic arcs, and anchor scenes built to scale.
            </p>
          </div>
        </div>
      </article>

      <!-- Card 2 (highlight) -->
      <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(148,163,184,0.25)]">
        <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 production setup in studio" 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-slate-900 text-slate-50">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                style="color: rgb(248, 250, 252); width: 16px; height: 16px" class="w-[16px] h-[16px]"
                data-solar="display-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
                <path fill="#f8fafc" fill-rule="evenodd"
                  d="M2.879 3.844C2 4.687 2 6.044 2 8.76v.96c0 2.715 0 4.073.879 4.916c.878.844 2.293.844 5.121.844h8c2.828 0 4.243 0 5.121-.844c.879-.843.879-2.2.879-4.916v-.96c0-2.715 0-4.073-.879-4.916C20.243 3 18.828 3 16 3H8c-2.828 0-4.243 0-5.121.844"
                  clip-rule="evenodd" class=""></path>
                <path fill="#f8fafc"
                  d="M18.237 19.596L12.75 17.84v-2.36h-1.5v2.36l-5.487 1.756a.714.714 0 0 0-.474.911a.757.757 0 0 0 .948.455L12 19.118l5.763 1.845a.757.757 0 0 0 .949-.456a.714.714 0 0 0-.475-.91"
                  opacity=".5" class=""></path>
              </svg>
            </div>
            <span class="text-[11px] uppercase tracking-[0.18em] text-slate-500">
              Core service
            </span>
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold tracking-tight">
              Modular Production Systems
            </h3>
            <p class="text-sm text-slate-600">
              Build a reusable library of scenes, frames, and motion loops that powers 3–9 months of content with each
              shoot.
            </p>
            <p class="mt-1 text-[11px] font-medium uppercase tracking-[0.18em] text-slate-500">
              4–6 week engagements · Remote or on‑site
            </p>
          </div>
        </div>
      </article>

      <!-- Card 3 -->
      <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="Analytics dashboard for content performance" 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">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                style="color: rgb(248, 250, 252); width: 16px; height: 16px;" class="w-[16px] h-[16px]"
                data-solar="rocket-2-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
                <path fill="#f8fafc" fill-rule="evenodd"
                  d="m15.502 14.367l5.03-5.014c.724-.722 1.087-1.083 1.277-1.543C22 7.351 22 6.84 22 5.82v-.49c0-1.57 0-2.355-.49-2.843C21.022 2 20.235 2 18.659 2h-.489c-1.024 0-1.537 0-1.997.19s-.823.551-1.547 1.274l-5.03 5.014c-.846.844-1.371 1.367-1.574 1.873c-.064.16-.097.317-.097.483c0 .69.557 1.245 1.671 2.356l.15.149l1.754-1.78a.645.645 0 0 1 .919.906l-1.76 1.785l.119.117c1.114 1.11 1.67 1.666 2.362 1.666q.228 0 .447-.081c.519-.191 1.048-.72 1.916-1.585m2.363-5.888c-.652.65-1.71.65-2.363 0a1.66 1.66 0 0 1 0-2.356c.653-.65 1.71-.65 2.363 0s.653 1.705 0 2.356M2.774 12.481a.76.76 0 0 1 0 1.074l-.156.155a.34.34 0 0 0 0 .48a.34.34 0 0 0 .483 0l1.713-1.71a.76.76 0 0 1 1.072 1.075l-1.712 1.71a1.86 1.86 0 0 1-2.629 0a1.857 1.857 0 0 1 0-2.629l.156-.155a.76.76 0 0 1 1.073 0m4.523 4.215c.293.3.288.78-.012 1.073l-1.73 1.692a.759.759 0 0 1-1.061-1.085l1.73-1.692a.76.76 0 0 1 1.073.012m4.184 1.422a.76.76 0 0 1 0 1.074l-1.713 1.71a.34.34 0 0 0 0 .48c.134.133.35.133.484 0l.156-.155A.759.759 0 0 1 11.48 22.3l-.155.155a1.86 1.86 0 0 1-2.63 0a1.857 1.857 0 0 1 0-2.629l1.713-1.71a.76.76 0 0 1 1.073.001"
                  clip-rule="evenodd" class=""></path>
                <path fill="#f8fafc"
                  d="M10.846 5.41L8.658 7.59c-.402.401-.77.769-1.062 1.101a5 5 0 0 0-.532.706l-.022-.021l-.08-.08a4.2 4.2 0 0 0-1.319-.865l-.106-.042l-.325-.13a.658.658 0 0 1-.223-1.077c.963-.96 2.12-2.114 2.679-2.346a2.9 2.9 0 0 1 1.537-.197c.47.07.915.311 1.641.77m3.736 11.484c.176.18.293.306.399.44q.21.268.373.567c.123.223.218.462.408.939c.155.388.67.491.968.193l.073-.072c.963-.96 2.12-2.114 2.353-2.67a2.9 2.9 0 0 0 .197-1.534c-.07-.468-.312-.912-.772-1.636l-2.195 2.189c-.411.41-.789.786-1.13 1.08a5 5 0 0 1-.674.504m-6.896-2.33a.759.759 0 1 0-1.073-1.073L4.47 15.632a.759.759 0 1 0 1.074 1.074zm2.809 2.806a.759.759 0 1 0-1.073-1.073l-2.128 2.127a.76.76 0 0 0 1.074 1.074z"
                  opacity=".5" class=""></path>
              </svg>
            </div>
            <span class="text-[11px] uppercase tracking-[0.18em] text-slate-500">
              Metrics &amp; lift
            </span>
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold tracking-tight text-slate-50">
              Launch Analytics Layer
            </h3>
            <p class="text-sm text-slate-400">
              Connect every scene to a measurable outcome with dashboards that translate reach, saves, and replies into
              next-step decisions.
            </p>
          </div>
        </div>
      </article>

      <!-- Card 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/3e54e567-5c30-441a-baee-ee5f1bd4e184_800w.webp" alt="Creative team reviewing content system" 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">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                class="w-[16px] h-[16px]" data-solar="user-id-bold-duotone" data-icon-set="solar">
                <g fill="currentColor" class="">
                  <path
                    d="M6.25 3A3.25 3.25 0 0 0 3 6.25v11.5A3.25 3.25 0 0 0 6.25 21h11.5A3.25 3.25 0 0 0 21 17.75V8.5a.75.75 0 0 0-.22-.53l-4.75-4.75A.75.75 0 0 0 15.5 3z"
                    opacity=".5" class=""></path>
                  <path d="M15.75 3.49v4.01c0 .414.336.75.75.75h4.01z" opacity="1" class=""></path>
                  <path
                    d="M12 10.25A2.25 2.25 0 1 0 12 15a2.25 2.25 0 0 0 0-4.5m-3.5 6.75a3.5 3.5 0 0 1 7 0a.75.75 0 0 1-1.5 0a2 2 0 0 0-4 0a.75.75 0 0 1-1.5 0"
                    opacity="1" class=""></path>
                </g>
              </svg>
            </div>
            <span class="text-[11px] uppercase tracking-[0.18em] text-slate-500">
              Team enablement
            </span>
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold tracking-tight text-slate-50">
              Playbooks &amp; Training
            </h3>
            <p class="text-sm text-slate-400">
              Equip your in‑house team with format playbooks, shot recipes, and posting guidelines so the system keeps
              working after the engagement.
            </p>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>