<section class="w-full max-w-[90%] mx-auto py-20 md:py-32 lg:py-40" data-component-type="Content" data-component-slug="portfolio-template-achievements_section">
  <!-- TAG -->
  <div class="flex justify-center w-full">
    <div class="inline-block px-4 py-2 md:px-6 md:py-2 rounded-xl text-white text-[20px] md:text-[22px] lg:text-[32px] font-normal bg-white/[0.07] border border-white/[0.12] backdrop-blur-[18px] mb-5" data-node="achievements_tag" data-node-type="text" data-node-default="Our Achievements">
      {{achievements_tag}}
    </div>
  </div>

  <!-- TITLE -->
  <h2 class="text-center mx-auto mb-5 md:mb-12 lg:mb-20 text-white font-medium leading-[0.95] text-[30px] md:text-[40px] lg:text-[64px] max-w-[1000px]" data-node="achievements_title" data-node-type="text" data-node-default="Real outcomes across industries and markets.">
    {{achievements_title}}
  </h2>

  <!-- MOBILE/TABLET CARDS - Hidden on lg+ -->
  <div class="block lg:hidden w-full space-y-6">
    <!-- Card 1 -->
    <div class="border-b border-white/15 pb-6">
      <div class="flex items-center gap-4 mb-3">
        <span data-node="achievement_data_row_1_1" data-node-label="Achievement Data Row 1 Column 1" data-node-type="text" data-node-default="2021" class="text-[18px] md:text-[20px] text-[#d3ff5b] font-medium">{{achievement_data_row_1_1}}</span>
        <span class="text-white/30">•</span>
        <span data-node="achievement_data_row_1_2" data-node-label="Achievement Data Row 1 Column 2" data-node-type="text" data-node-default="Emerging Digital Partner" class="text-[16px] md:text-[18px] text-white font-normal">{{achievement_data_row_1_2}}</span>
      </div>
      <p data-node="achievement_data_row_1_3" data-node-label="Achievement Data Row 1 Column 3" data-node-type="text" data-node-default="SaaS Growth Campaign" class="text-[16px] md:text-[18px] text-white font-normal mb-2">{{achievement_data_row_1_3}}</p>
      <p data-node="achievement_data_row_1_4" data-node-label="Achievement Data Row 1 Column 4" data-node-type="textarea" data-node-default="Helped a B2B SaaS brand achieve a 3× lead increase through funnel optimization." class="text-[14px] md:text-[16px] text-[#7E7E7E] font-normal leading-[1.5]">{{achievement_data_row_1_4}}</p>
    </div>
    <!-- Card 2 -->
    <div class="border-b border-white/15 pb-6">
      <div class="flex items-center gap-4 mb-3">
        <span data-node="achievement_data_row_2_1" data-node-label="Achievement Data Row 2 Column 1" data-node-type="text" data-node-default="2022" class="text-[18px] md:text-[20px] text-[#d3ff5b] font-medium">{{achievement_data_row_2_1}}</span>
        <span class="text-white/30">•</span>
        <span data-node="achievement_data_row_2_2" data-node-label="Achievement Data Row 2 Column 2" data-node-type="text" data-node-default="Best Performance Campaign" class="text-[16px] md:text-[18px] text-white font-normal">{{achievement_data_row_2_2}}</span>
      </div>
      <p data-node="achievement_data_row_2_3" data-node-label="Achievement Data Row 2 Column 3" data-node-type="text" data-node-default="E-commerce Brand Expansion" class="text-[16px] md:text-[18px] text-white font-normal mb-2">{{achievement_data_row_2_3}}</p>
      <p data-node="achievement_data_row_2_4" data-node-label="Achievement Data Row 2 Column 4" data-node-type="textarea" data-node-default="Built SEO and paid content systems that reduced CPA by 42% while scaling traffic." class="text-[14px] md:text-[16px] text-[#7E7E7E] font-normal leading-[1.5]">{{achievement_data_row_2_4}}</p>
    </div>
    <!-- Card 3 -->
    <div class="border-b border-white/15 pb-6">
      <div class="flex items-center gap-4 mb-3">
        <span data-node="achievement_data_row_3_1" data-node-label="Achievement Data Row 3 Column 1" data-node-type="text" data-node-default="2023" class="text-[18px] md:text-[20px] text-[#d3ff5b] font-medium">{{achievement_data_row_3_1}}</span>
        <span class="text-white/30">•</span>
        <span data-node="achievement_data_row_3_2" data-node-label="Achievement Data Row 3 Column 2" data-node-type="text" data-node-default="Brand Transformation Excellence" class="text-[16px] md:text-[18px] text-white font-normal">{{achievement_data_row_3_2}}</span>
      </div>
      <p data-node="achievement_data_row_3_3" data-node-label="Achievement Data Row 3 Column 3" data-node-type="text" data-node-default="Service-Based Business Rebrand" class="text-[16px] md:text-[18px] text-white font-normal mb-2">{{achievement_data_row_3_3}}</p>
      <p data-node="achievement_data_row_3_4" data-node-label="Achievement Data Row 3 Column 4" data-node-type="textarea" data-node-default="Delivered a full brand and website overhaul that improved conversion rates across all channels." class="text-[14px] md:text-[16px] text-[#7E7E7E] font-normal leading-[1.5]">{{achievement_data_row_3_4}}</p>
    </div>
    <!-- Card 4 -->
    <div class="border-b border-white/15 pb-6">
      <div class="flex items-center gap-4 mb-3">
        <span data-node="achievement_data_row_4_1" data-node-label="Achievement Data Row 4 Column 1" data-node-type="text" data-node-default="2024" class="text-[18px] md:text-[20px] text-[#d3ff5b] font-medium">{{achievement_data_row_4_1}}</span>
        <span class="text-white/30">•</span>
        <span data-node="achievement_data_row_4_2" data-node-label="Achievement Data Row 4 Column 2" data-node-type="text" data-node-default="Conversion-Focused Web Experience" class="text-[16px] md:text-[18px] text-white font-normal">{{achievement_data_row_4_2}}</span>
      </div>
      <p data-node="achievement_data_row_4_3" data-node-label="Achievement Data Row 4 Column 3" data-node-type="text" data-node-default="Multi-Industry Marketing Portfolio" class="text-[16px] md:text-[18px] text-white font-normal mb-2">{{achievement_data_row_4_3}}</p>
      <p data-node="achievement_data_row_4_4" data-node-label="Achievement Data Row 4 Column 4" data-node-type="textarea" data-node-default="Designed and launched high-converting landing pages and websites across SaaS, startups, and enterprises." class="text-[14px] md:text-[16px] text-[#7E7E7E] font-normal leading-[1.5]">{{achievement_data_row_4_4}}</p>
    </div>
  </div>

  <!-- TABLE - Desktop (Hidden on mobile/tablet) -->
  <div class="hidden lg:block w-full">
    <table class="w-full border-collapse table-fixed">
      <thead>
        <tr>
          <th class="text-left text-[24px] font-normal text-white pb-10 w-[12%]" data-node="achievements_table_header_1" data-node-label="Achievements Table Header 1" data-node-type="text" data-node-default="Year">{{achievements_table_header_1}}</th>
          <th class="text-left text-[24px] font-normal text-white pb-10 w-[28%]" data-node="achievements_table_header_2" data-node-label="Achievements Table Header 2" data-node-type="text" data-node-default="Awards & Recognition">{{achievements_table_header_2}}</th>
          <th class="text-left text-[24px] font-normal text-white pb-10 w-[25%]" data-node="achievements_table_header_3" data-node-label="Achievements Table Header 3" data-node-type="text" data-node-default="Project">{{achievements_table_header_3}}</th>
          <th class="text-left text-[24px] font-normal text-white pb-10 w-[35%]" data-node="achievements_table_header_4" data-node-label="Achievements Table Header 4" data-node-type="text" data-node-default="Description">{{achievements_table_header_4}}</th>
        </tr>
      </thead>
      <tbody>
        <!-- ROW 1 -->
        <tr class="border-b border-white/15">
          <td data-node="achievement_data_row_1_1" data-node-label="Achievement Data Row 1 Column 1" data-node-type="text" data-node-default="2021" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_1_1}}</td>
          <td data-node="achievement_data_row_1_2" data-node-label="Achievement Data Row 1 Column 2" data-node-type="text" data-node-default="Emerging Digital Partner" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_1_2}}</td>
          <td data-node="achievement_data_row_1_3" data-node-label="Achievement Data Row 1 Column 3" data-node-type="text" data-node-default="SaaS Growth Campaign" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_1_3}}</td>
          <td data-node="achievement_data_row_1_4" data-node-label="Achievement Data Row 1 Column 4" data-node-type="textarea" data-node-default="Helped a B2B SaaS brand achieve a 3× lead increase through funnel optimization." class="text-[24px] text-[#7E7E7E] font-normal py-7 leading-[1.3]">{{achievement_data_row_1_4}}</td>
        </tr>
        <!-- ROW 2 -->
        <tr class="border-b border-white/15">
          <td data-node="achievement_data_row_2_1" data-node-label="Achievement Data Row 2 Column 1" data-node-type="text" data-node-default="2022" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_2_1}}</td>
          <td data-node="achievement_data_row_2_2" data-node-label="Achievement Data Row 2 Column 2" data-node-type="text" data-node-default="Best Performance Campaign" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_2_2}}</td>
          <td data-node="achievement_data_row_2_3" data-node-label="Achievement Data Row 2 Column 3" data-node-type="text" data-node-default="E-commerce Brand Expansion" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_2_3}}</td>
          <td data-node="achievement_data_row_2_4" data-node-label="Achievement Data Row 2 Column 4" data-node-type="textarea" data-node-default="Built SEO and paid content systems that reduced CPA by 42% while scaling traffic." class="text-[24px] text-[#7E7E7E] font-normal py-7 leading-[1.3]">{{achievement_data_row_2_4}}</td>
        </tr>
        <!-- ROW 3 -->
        <tr class="border-b border-white/15">
          <td data-node="achievement_data_row_3_1" data-node-label="Achievement Data Row 3 Column 1" data-node-type="text" data-node-default="2023" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_3_1}}</td>
          <td data-node="achievement_data_row_3_2" data-node-label="Achievement Data Row 3 Column 2" data-node-type="text" data-node-default="Brand Transformation Excellence" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_3_2}}</td>
          <td data-node="achievement_data_row_3_3" data-node-label="Achievement Data Row 3 Column 3" data-node-type="text" data-node-default="Service-Based Business Rebrand" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_3_3}}</td>
          <td data-node="achievement_data_row_3_4" data-node-label="Achievement Data Row 3 Column 4" data-node-type="textarea" data-node-default="Delivered a full brand and website overhaul that improved conversion rates across all channels." class="text-[24px] text-[#7E7E7E] font-normal py-7 leading-[1.3]">{{achievement_data_row_3_4}}</td>
        </tr>
        <!-- ROW 4 -->
        <tr class="border-b border-white/15">
          <td data-node="achievement_data_row_4_1" data-node-label="Achievement Data Row 4 Column 1" data-node-type="text" data-node-default="2024" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_4_1}}</td>
          <td data-node="achievement_data_row_4_2" data-node-label="Achievement Data Row 4 Column 2" data-node-type="text" data-node-default="Conversion-Focused Web Experience" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_4_2}}</td>
          <td data-node="achievement_data_row_4_3" data-node-label="Achievement Data Row 4 Column 3" data-node-type="text" data-node-default="Multi-Industry Marketing Portfolio" class="text-[24px] text-white font-normal py-7 leading-[1.3]">{{achievement_data_row_4_3}}</td>
          <td data-node="achievement_data_row_4_4" data-node-label="Achievement Data Row 4 Column 4" data-node-type="textarea" data-node-default="Designed and launched high-converting landing pages and websites across SaaS, startups, and enterprises." class="text-[24px] text-[#7E7E7E] font-normal py-7 leading-[1.3]">{{achievement_data_row_4_4}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>