{{-- Bespoke hero for /solutions/real-time-bi — split layout with the
     real Insight 360X dashboard screenshot (that product is the actual
     delivery mechanism for this solution category).
     Expects: $eyebrow, $headline, $description. --}}
      <!-- ============================ HERO ============================ -->
      <section
        class="relative isolate overflow-hidden bg-(--accent-2) pb-20 pt-[132px] lg:pb-24 lg:pt-[168px]"
      >
        <div
          aria-hidden="true"
          class="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(rgba(204,191,147,0.07)_1px,transparent_1px),linear-gradient(90deg,rgba(204,191,147,0.07)_1px,transparent_1px)] bg-[size:88px_88px] [mask-image:radial-gradient(120%_90%_at_75%_15%,#000_0%,rgba(0,0,0,0.35)_55%,transparent_100%)]"
        ></div>

        <div class="site_shell px-5 md:px-12 lg:px-16">
          <div class="grid items-center gap-14 lg:grid-cols-[minmax(0,1fr)_minmax(0,480px)] lg:gap-16">
            <div data-reveal>
              <p class="flex items-center gap-3 text-[11px] font-semibold uppercase tracking-[0.18em] text-(--accent-1)">
                <span class="h-px w-8 bg-(--accent-1)"></span>
                Solution &middot; {{ $eyebrow }}
              </p>

              <h1 class="mt-5 max-w-[16ch] text-[clamp(2.1rem,4.2vw,3.3rem)] font-semibold leading-[1.08] tracking-[-0.02em] text-white">
                {{ $headline }}
              </h1>

              <p class="mt-6 max-w-[50ch] text-base leading-relaxed text-white/70 sm:text-[17px]">
                {{ $description }}
              </p>

              <div class="mt-9 flex flex-wrap items-center gap-5">
                <a
                  href="#book-demo"
                  class="hero-cta group inline-flex min-h-[54px] items-center gap-2 rounded-[0.75rem] px-7 text-[15px] font-semibold text-(--accent-2) transition-transform duration-300 hover:-translate-y-0.5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white active:translate-y-0"
                >
                  Request a Demo

                  <svg class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M5 12h14" />
                    <path d="m12 5 7 7-7 7" />
                  </svg>
                </a>

                <a
                  href="#how-it-works"
                  class="text-[15px] font-semibold text-white/80 underline decoration-[rgba(204,191,147,0.5)] underline-offset-[5px] transition-colors duration-200 hover:text-(--accent-1) focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white"
                >
                  See how it works
                </a>
              </div>
            </div>

            <!-- The real Insight 360X dashboard — Real-time BI is the
                 solution category that product actually delivers, so
                 this is the authentic screenshot, not a stand-in. -->
            <div class="rtbi-hero-media" data-reveal>
              <img
                src="/images/insight-360.webp"
                width="1680"
                height="945"
                alt="Insight 360X dashboard showing total sales, orders, conversion rate and sales by channel"
                class="rtbi-hero-shot-image"
              />

              <span class="rtbi-hero-badge">
                <span aria-hidden="true" class="rtbi-hero-badge__dot"></span>
                Refreshed continuously
                <strong>&mdash; live</strong>
              </span>
            </div>
          </div>
        </div>
      </section>