Four-Step Process Overview Section with Visual Schema

<section class="sm:px-6 lg:px-8 lg:py-10 max-w-6xl mt-24 mr-auto mb-24 ml-auto pt-6 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="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
    <!-- Left: layered schematic -->
    <div
      class="overflow-hidden flex bg-gradient-to-br from-white/10 to-white/0 h-full rounded-3xl pt-8 pr-6 pb-8 pl-6 relative items-center"
      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="absolute inset-0 pointer-events-none"
        style="background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,0.25) 1px, transparent 0); background-size: 18px 18px; opacity: 0.45;">
      </div>

      <!-- Layer 1 -->
      <div class="z-10 relative w-full">
        <div class="relative mx-auto w-full max-w-md h-64">
          <!-- Base grids -->
          <div class="absolute inset-8 border border-dashed border-slate-700/70 rotate-[-18deg]"></div>
          <div class="absolute inset-4 border border-dashed border-slate-700/70 rotate-[-12deg] bg-slate-900/40"></div>
          <div
            class="border-dashed bg-slate-900 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e0be2642-7091-4c16-8ad7-8bc98b5a8fdf_1600w.webp)] bg-cover bg-center border-slate-600/70 border absolute top-0 right-0 bottom-0 left-0 rotate-[-6deg]">
          </div>

          <!-- Step chips -->
          <div class="absolute -left-2 top-6 flex items-center gap-2">
            <span class="flex h-7 w-9 items-center justify-center rounded-md bg-slate-950 text-[11px] font-medium tracking-[0.18em] text-slate-100">
              01
            </span>
            <div
              class="inline-flex items-center gap-1.5 rounded-full bg-slate-100/90 px-3 py-1 text-[11px] font-medium text-slate-900">
              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                class="w-[13px] h-[13px]" data-solar="search-bold-duotone" data-icon-set="solar">
                <g fill="currentColor" class="">
                  <path d="M11.5 3A6.5 6.5 0 1 0 18 9.5A6.508 6.508 0 0 0 11.5 3" opacity=".5" class=""></path>
                  <path
                    d="M20.53 19.47L17.2 16.14a8 8 0 1 0-1.06 1.06L19.47 20.53a.75.75 0 0 0 1.06-1.06M5 9.5A4.5 4.5 0 1 1 9.5 14A4.505 4.505 0 0 1 5 9.5"
                    opacity="1" class=""></path>
                </g>
              </svg>
              Discover
            </div>
          </div>

          <div class="absolute right-0 top-24 flex items-center gap-2">
            <div
              class="inline-flex items-center gap-1.5 rounded-full bg-slate-100/90 px-3 py-1 text-[11px] font-medium text-slate-900">
              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                class="w-[13px] h-[13px]" data-solar="target-bold-duotone" data-icon-set="solar">
                <g fill="currentColor" class="">
                  <path d="M12 3a9 9 0 1 0 9 9a9.01 9.01 0 0 0-9-9" opacity=".5" class=""></path>
                  <path d="M12 7a5 5 0 1 0 5 5a5.006 5.006 0 0 0-5-5m0 3a2 2 0 1 1-2 2a2 2 0 0 1 2-2" opacity="1"
                    class=""></path>
                </g>
              </svg>
              Map
            </div>
            <span class="flex h-7 w-9 items-center justify-center rounded-md bg-slate-950 text-[11px] font-medium tracking-[0.18em] text-slate-100">
              02
            </span>
          </div>

          <div class="absolute -left-1 bottom-12 flex items-center gap-2">
            <span class="flex h-7 w-9 items-center justify-center rounded-md bg-slate-950 text-[11px] font-medium tracking-[0.18em] text-slate-100">
              03
            </span>
            <div
              class="inline-flex items-center gap-1.5 rounded-full bg-slate-100/90 px-3 py-1 text-[11px] font-medium text-slate-900">
              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                class="w-[13px] h-[13px]" data-solar="clapperboard-play-bold-duotone" data-icon-set="solar">
                <g fill="currentColor" class="">
                  <path
                    d="M3 11.25C3 8.35 3 6.9 3.88 5.92S6.2 4.5 9 4.5h6c2.8 0 4.2 0 5.08.92C21 6.9 21 8.35 21 11.25V15c0 2.8 0 4.2-.92 5.1S17.8 21 15 21H9c-2.8 0-4.2 0-5.12-.9S3 17.8 3 15z"
                    opacity=".5" class=""></path>
                  <path
                    d="M3.3 6.21c.21-.5.51-.93.93-1.33c.82-.79 2.03-1.08 3.77-1.17l.59 1.7l-1.84 1.63zm6.24-.07l-1-2.82C9.29 3.3 9.93 3.25 10.7 3.25h.3l.78 2.2zm3.45-.24L12.25 3.25H15c.74 0 1.35.03 1.87.12l.73 2.07zM18.83 5l.55 1.58l-1.72 1.51l-1.05-2.96z"
                    opacity="1" class=""></path>
                  <path d="M11.44 11.47a.75.75 0 0 0-1.19.61v3.84a.75.75 0 0 0 1.19.61l2.77-1.92a.75.75 0 0 0 0-1.22z"
                    class="">
                  </path>
                </g>
              </svg>
              Compose
            </div>
          </div>

          <div class="absolute right-2 -bottom-1 flex items-center gap-2">
            <div
              class="inline-flex items-center gap-1.5 rounded-full bg-slate-100/90 px-3 py-1 text-[11px] font-medium text-slate-900">
              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                class="w-[13px] h-[13px]" data-solar="rocket-bold-duotone" data-icon-set="solar">
                <g fill="currentColor" class="">
                  <path
                    d="M14.447 16.377L20.294 10.547c.842-.839 1.263-1.259 1.484-1.792S22 7.627 22 6.44v-.567c0-1.826 0-2.739-.569-3.306S19.947 2 18.116 2h-.57c-1.19 0-1.785 0-2.32.221c-.536.221-.957.641-1.8 1.48L7.58 9.531c-.984.98-1.594 1.589-1.83 2.176a1.5 1.5 0 0 0-.112.562c0 .802.647 1.448 1.942 2.739l.174.173l2.038-2.069a.75.75 0 1 1 1.069 1.053L8.816 16.24l.137.137c1.295 1.29 1.943 1.936 2.747 1.936c.178 0 .348-.031.519-.094c.603-.222 1.219-.836 2.228-1.842"
                    opacity=".5" class=""></path>
                  <path
                    d="M18.894 8.531a1.946 1.946 0 0 1-2.747 0a1.93 1.93 0 0 1 0-2.738a1.946 1.946 0 0 1 2.747 0a1.93 1.93 0 0 1 0 2.738"
                    opacity="1" class=""></path>
                  <path
                    d="M9.034 5.963L6.491 8.5c-.467.466-.896.893-1.235 1.28a6 6 0 0 0-.619.82l-.024-.025l-.095-.094a4.9 4.9 0 0 0-1.532-1.004l-.123-.05l-.379-.15a.764.764 0 0 1-.259-1.252C3.345 6.907 4.69 5.566 5.34 5.297a3.4 3.4 0 0 1 1.788-.229c.546.081 1.063.362 1.907.895m4.342 13.35c.205.208.34.355.464.512q.243.311.434.658c.142.26.253.537.474 1.092a.69.69 0 0 0 1.126.224l.084-.083c1.12-1.117 2.465-2.458 2.735-3.105a3.35 3.35 0 0 0 .229-1.782c-.081-.545-.362-1.06-.897-1.902l-2.552 2.544c-.478.477-.916.914-1.313 1.256c-.237.206-.497.41-.784.586"
                    opacity=".5" class=""></path>
                </g>
              </svg>
              Launch &amp; refine
            </div>
            <span class="flex h-7 w-9 items-center justify-center rounded-md bg-slate-950 text-[11px] font-medium tracking-[0.18em] text-slate-100">
              04
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Right: copy & steps -->
    <div class="flex flex-col gap-6">
      <div class="flex flex-col gap-3">
        <p class="text-xs font-medium uppercase tracking-[0.18em] text-slate-500">
          Process overview
        </p>
        <h2 class="text-4xl sm:text-5xl lg:text-[40px] font-semibold tracking-tight text-slate-50">
          From first sketch to final frame.
        </h2>
        <p class="text-base sm:text-lg text-slate-400 max-w-xl">
          A four-part studio workflow that keeps your stories coherent, measurable, and unmistakably yours—from
          discovery call to launch recap.
        </p>
      </div>

      <div class="space-y-4">
        <!-- Step 1 -->
        <div class="flex gap-3">
          <div
            class="flex text-[24px] text-6xl font-medium text-slate-100 w-6 h-6 rounded-full mt-1 items-center justify-center">
            01
          </div>
          <div class="flex-1">
            <div class="flex items-center gap-2">
              <span class="text-base font-medium text-slate-100 tracking-tight">
                Listen &amp; uncover
              </span>

            </div>
            <p class="mt-1 text-base text-slate-400">
              We map your brand, context and constraints in a focused intake sprint, surfacing the stories that actually
              move your clients.
            </p>
          </div>
        </div>

        <!-- Step 2 -->
        <div class="flex gap-3">
          <div
            class="flex text-[24px] text-6xl font-medium text-slate-100 w-6 h-6 rounded-full mt-1 items-center justify-center">
            02
          </div>
          <div class="flex-1">
            <div class="flex items-center gap-2">
              <span class="text-base font-medium text-slate-100 tracking-tight">
                Plot the narrative system
              </span>

            </div>
            <p class="mt-1 text-base text-slate-400">
              We outline a channel-specific storyboard, shot lists and cadence plan that fits your team’s reality—not an
              idealized calendar.
            </p>
          </div>
        </div>

        <!-- Step 3 -->
        <div class="flex gap-3">
          <div
            class="flex text-[24px] font-medium text-slate-100 w-6 h-6 rounded-full mt-1 items-center justify-center">
            03
          </div>
          <div class="flex-1">
            <div class="flex items-center gap-2">
              <span class="text-base font-medium text-slate-100 tracking-tight">
                Build the visual library
              </span>

            </div>
            <p class="mt-1 text-base text-slate-400">
              Production days turn into modular scenes, stills and motion loops that can be reused across 3–6 months of
              campaigns.
            </p>
          </div>
        </div>

        <!-- Step 4 -->
        <div class="flex gap-3">
          <div
            class="flex text-[24px] text-6xl font-medium text-slate-100 w-6 h-6 rounded-full mt-1 items-center justify-center">
            04
          </div>
          <div class="flex-1">
            <div class="flex items-center gap-2">
              <span class="text-base font-medium text-slate-100 tracking-tight">
                Release, review, repeat
              </span>

            </div>
            <p class="mt-1 text-base text-slate-400">
              We coordinate posting windows, track in-platform metrics, and ship a post-launch debrief within 21 days to
              inform the next cycle.
            </p>
          </div>
        </div>
      </div>

      <!-- CTA row -->
      <div class="mt-6 flex flex-wrap items-center gap-3">
        <button class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-br from-white/80 to-white/40 px-4 py-2 text-sm font-medium text-slate-950 hover:bg-slate-200 transition">
          <span class="">Walk me through a sample sprint</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" style="color: rgb(2, 6, 23); width: 15px; height: 15px;" class="w-[15px] h-[15px]" data-solar="arrow-right-up-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#020617" fill-rule="evenodd" d="M17.47 15.53a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28z" clip-rule="evenodd" class=""></path><path fill="#020617" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l-1.06-1.06z" opacity=".5" class=""></path></svg></button>
      </div>
    </div>
  </div>
</section>