<section class="w-full py-0 px-4 md:px-12 lg:px-24 relative" data-component-type="Content">
  <!-- CTA BOX -->
  <div class="bg-[#d3ff5b] rounded-2xl p-8 md:p-10 lg:p-20 relative overflow-visible grid grid-cols-1">
    <!-- LEFT CONTENT -->
    <div>
      <h2
        class="font-['Cabin'] text-[28px] sm:text-[32px] md:text-[48px] lg:text-[64px] font-medium leading-[95%] sm:leading-[110%] md:leading-[105%] text-[#151515] mb-4 md:mb-6 max-w-full lg:max-w-[766px]"
        data-node="about_cta_title"
        data-node-type="text"
        data-node-label="CTA Title"
        data-node-default="Let's Build Something That Actually Converts"
      >
        {{about_cta_title}}
      </h2>

      <p
        class="font-['Cabin'] text-[16px] sm:text-[18px] md:text-[22px] lg:text-[24px] font-normal leading-[130%] sm:leading-[140%] text-[#373737] max-w-full lg:max-w-[775px] mb-6 md:mb-8"
        data-node="about_cta_description"
        data-node-type="textarea"
        data-node-label="CTA Description"
        data-node-default="Whether you need clarity in brand positioning, better-performing content, or scalable marketing systems—we're ready to help you build it properly."
      >
        {{about_cta_description}}
      </p>

      <a
        class="w-full sm:w-auto sm:max-w-[354px] h-12 sm:h-14 py-2.5 px-4 rounded-xl bg-black text-white flex items-center justify-center gap-2.5 font-['Cabin'] text-[16px] sm:text-[18px] md:text-xl cursor-pointer transition-opacity duration-300 hover:opacity-85"
        data-node="about_cta_button_link"
        data-node-type="page_links"
        data-node-label="CTA Button Link"
        data-node-default="{{about_cta_button_link}}"
      >
        <span
          data-node="about_cta_button_text"
          data-node-type="text"
          data-node-label="CTA Button Text"
          data-node-default="Get your free consultation"
        >
          {{about_cta_button_text}}
        </span>

        <img
          src="{{about_cta_button_icon}}"
          class="w-5 h-5 sm:w-[22px] sm:h-[22px] md:w-[26px] md:h-[26px]"
          data-node="about_cta_button_icon"
          data-node-type="file"
          data-node-label="CTA Button Arrow Icon"
          data-node-default="./assets/about-arrow.svg"
        />
      </a>
    </div>

    <!-- RIGHT IMAGE — FLOATING OVERLAP -->
    <img
      src="{{about_cta_image}}"
      class="absolute right-20 top-1/4 -translate-y-1/2 w-[736px] h-auto object-contain hidden xl:block 2xl:w-[736px] xl:w-[420px] xl:right-[-40px]"
      alt="CTA Image"
      data-node="about_cta_image"
      data-node-type="file"
      data-node-label="CTA Image"
      data-node-default="./assets/vacuum.webp"
    />
    <!-- Mobile/Tablet Image -->
    <img
      src="{{about_cta_image_mobile}}"
      class="w-full max-w-[420px] sm:max-w-[360px] mt-8 mx-auto block xl:hidden"
      alt="CTA Image"
      data-node="about_cta_image_mobile"
      data-node-type="file"
      data-node-label="CTA Image Mobile"
      data-node-default="./assets/vacuum.webp"
    />
  </div>
</section>
