<section data-component-type="CTA" class="max-w-[90%] mx-auto py-20 rounded-3xl relative overflow-hidden bg-[#5F4BE2] flex justify-center text-center px-5 my-10" data-component-slug="saas-template-Sync">
  <!-- LEFT GRADIENT RING -->
  <div class="absolute top-0 left-0 hidden xl:block z-[1]">
    <img data-node="sync_left_img" data-node-type="file" data-node-label="Left Gradient Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868909/seltrix/templates/saas-template/Sync/left.png" src="{{sync_left_img}}" alt="Left Gradient Curve">
  </div>

  <!-- RIGHT GRADIENT RING -->
  <div class="absolute top-0 right-0 hidden xl:block z-[1]">
    <img data-node="sync_right_img" data-node-type="file" data-node-label="Right Gradient Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868910/seltrix/templates/saas-template/Sync/right.png" src="{{sync_right_img}}" alt="Right Gradient Curve">
  </div>

  <div class="z-10 max-w-3xl">
    
    <div class="bg-white w-[180px] mx-auto py-2 rounded-[10px]">


    <span data-node="sync_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Sync Seamlessly" class=" text-[#5F4BE2] font-medium px-1 py-2 rounded-[10px] text-sm">
      {{sync_badge}}
    </span>
        </div>

    <!-- TITLE -->
    <h2 data-node="sync_heading" data-node-type="text" data-node-label="Heading Text" data-node-default="Keep teams aligned with real-time syncing across every device" class="text-white font-bold mt-6 text-3xl md:text-4xl leading-snug">
      {{sync_heading}}
    </h2>

    <!-- SUB TEXT -->
    <p data-node="sync_subtext" data-node-type="textarea" data-node-label="Subtext" data-node-default="No delays, no miscommunication—just instant updates everywhere. Your entire team stays on the same page effortlessly." class="text-white/90 mt-4 text-sm md:text-base leading-relaxed">
      {{sync_subtext}}
    </p>
  </div>
</section>