<section data-section data-component-type="Content" class="py-16 lg:py-24 bg-white" data-component-slug="marathon-stats-counter">
  <div class="mx-auto px-6 lg:px-16 xl:px-[95px]">
    <!-- Stats Grid -->
    <div class="flex flex-wrap justify-center lg:flex-nowrap gap-5">
      <!-- Stat 1 - Light -->
      <div class="w-1/2 lg:w-1/4 relative">
        <div class="stat-card bg-[#F1F2F3] py-10 px-6 text-center h-full" style="clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%)">
          <div class="flex items-center justify-center gap-0">
            <span data-counter="1" data-node="counter_1_value" data-node-type="number" data-node-label="Counter 1 Value" data-node-default="2543" class="text-3xl md:text-4xl xl:text-5xl font-bold text-[#131416] font-['Racing_Sans_One']">0</span>
            <span data-node="counter_1_suffix" data-node-type="text" data-node-label="Counter 1 Suffix" data-node-default class="text-3xl md:text-4xl xl:text-5xl font-bold text-[#131416] font-['Racing_Sans_One']">{{counter_1_suffix}}</span>
          </div>
          <p data-node="counter_1_label" data-node-type="text" data-node-label="Counter 1 Label" data-node-default="Active Members" class="text-[#131416] text-sm md:text-base mt-2 font-medium">
            {{counter_1_label}}
          </p>
        </div>
      </div>

      <!-- Stat 2 - Dark -->
      <div class="w-1/2 lg:w-1/4 relative -ml-4 lg:-ml-8">
        <div class="stat-card bg-[#656A74] py-10 px-6 text-center h-full" style="clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%)">
          <div class="flex items-center justify-center gap-0">
            <span data-counter="2" data-node="counter_2_value" data-node-type="number" data-node-label="Counter 2 Value" data-node-default="175" class="text-3xl md:text-4xl xl:text-5xl font-bold text-white font-['Racing_Sans_One']">0</span>
            <span data-node="counter_2_suffix" data-node-type="text" data-node-label="Counter 2 Suffix" data-node-default="+" class="text-3xl md:text-4xl xl:text-5xl font-bold text-white font-['Racing_Sans_One']">{{counter_2_suffix}}</span>
          </div>
          <p data-node="counter_2_label" data-node-type="text" data-node-label="Counter 2 Label" data-node-default="Event & Challenges" class="text-white text-sm md:text-base mt-2 font-medium">
            {{counter_2_label}}
          </p>
        </div>
      </div>

      <!-- Stat 3 - Light -->
      <div class="w-1/2 lg:w-1/4 relative -ml-4 lg:-ml-8 mt-4 lg:mt-0">
        <div class="stat-card bg-[#F1F2F3] py-10 px-6 text-center h-full" style="clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%)">
          <div class="flex items-center justify-center gap-0">
            <span data-counter="3" data-node="counter_3_value" data-node-type="number" data-node-label="Counter 3 Value" data-node-default="15" class="text-3xl md:text-4xl xl:text-5xl font-bold text-[#131416] font-['Racing_Sans_One']">0</span>
            <span data-node="counter_3_suffix" data-node-type="text" data-node-label="Counter 3 Suffix" data-node-default="+" class="text-3xl md:text-4xl xl:text-5xl font-bold text-[#131416] font-['Racing_Sans_One']">{{counter_3_suffix}}</span>
          </div>
          <p data-node="counter_3_label" data-node-type="text" data-node-label="Counter 3 Label" data-node-default="Partner Communities" class="text-[#131416] text-sm md:text-base mt-2 font-medium">
            {{counter_3_label}}
          </p>
        </div>
      </div>

      <!-- Stat 4 - Dark -->
      <div class="w-1/2 lg:w-1/4 relative -ml-4 lg:-ml-8 mt-4 lg:mt-0">
        <div class="stat-card bg-[#656A74] py-10 px-6 text-center h-full" style="clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%)">
          <div class="flex items-center justify-center gap-0">
            <span data-counter="4" data-node="counter_4_value" data-node-type="number" data-node-label="Counter 4 Value" data-node-default="25" class="text-3xl md:text-4xl xl:text-5xl font-bold text-white font-['Racing_Sans_One']">0</span>
            <span data-node="counter_4_suffix" data-node-type="text" data-node-label="Counter 4 Suffix" data-node-default class="text-3xl md:text-4xl xl:text-5xl font-bold text-white font-['Racing_Sans_One']">{{counter_4_suffix}}</span>
          </div>
          <p data-node="counter_4_label" data-node-type="text" data-node-label="Counter 4 Label" data-node-default="Core Coaches" class="text-white text-sm md:text-base mt-2 font-medium">
            {{counter_4_label}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>