<section class="w-full bg-black max-w-[90%] mx-auto pt-0 md:pt-28 pb-20 md:pb-28 lg:pb-36" data-component-type="Content" data-component-slug="portfolio-template-hero-impact">
  <!-- GRID MAIN -->
  <div class="grid grid-cols-1 lg:grid-cols-[1.2fr_1fr] gap-16 lg:gap-16 items-center">
    <!-- LEFT — METRIC BOXES -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-7">
      <div class="relative w-full h-[214px] rounded-[20px] bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] flex flex-col items-center justify-center shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]">
        <div class="font-['Cabin'] text-[32px] sm:text-[40px] md:text-[48px] lg:text-[56px] font-medium text-white leading-[100%] mb-3" data-node="metric1_number" data-node-type="text" data-node-label="Metric 1 Number" data-node-default="150+">
          {{metric1_number}}
        </div>

        <div class="font-['Cabin'] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[32px] font-normal text-white leading-[100%] text-center" data-node="metric1_text" data-node-type="text" data-node-label="Metric 1 Text" data-node-default="Happy Customers">
          {{metric1_text}}
        </div>
      </div>

      <div class="relative w-full h-[214px] rounded-[20px] bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] flex flex-col items-center justify-center shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]">
        <div class="font-['Cabin'] text-[32px] sm:text-[40px] md:text-[48px] lg:text-[56px] font-medium text-white leading-[100%] mb-3" data-node="metric2_number" data-node-type="text" data-node-label="Metric 2 Number" data-node-default="25+">
          {{metric2_number}}
        </div>

        <div class="font-['Cabin'] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[32px] font-normal text-white leading-[100%] text-center" data-node="metric2_text" data-node-type="text" data-node-label="Metric 2 Text" data-node-default="Successful Projects">
          {{metric2_text}}
        </div>
      </div>

      <div class="relative w-full h-[214px] rounded-[20px] bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] flex flex-col items-center justify-center shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]">
        <div class="font-['Cabin'] text-[32px] sm:text-[40px] md:text-[48px] lg:text-[56px] font-medium text-white leading-[100%] mb-3" data-node="metric3_number" data-node-type="text" data-node-label="Metric 3 Number" data-node-default="12">
          {{metric3_number}}
        </div>

        <div class="font-['Cabin'] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[32px] font-normal text-white leading-[100%] text-center" data-node="metric3_text" data-node-type="text" data-node-label="Metric 3 Text" data-node-default="Years of Experience">
          {{metric3_text}}
        </div>
      </div>

      <div class="relative w-full h-[214px] rounded-[20px] bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] flex flex-col items-center justify-center shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]">
        <div class="font-['Cabin'] text-[32px] sm:text-[40px] md:text-[48px] lg:text-[56px] font-medium text-white leading-[100%] mb-3" data-node="metric4_number" data-node-type="text" data-node-label="Metric 4 Number" data-node-default="4.5/5">
          {{metric4_number}}
        </div>

        <div class="font-['Cabin'] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[32px] font-normal text-white leading-[100%] text-center" data-node="metric4_text" data-node-type="text" data-node-label="Metric 4 Text" data-node-default="Rated In Niche">
          {{metric4_text}}
        </div>
      </div>
    </div>

    <!-- RIGHT SIDE -->
    <div>
      <!-- LABEL -->
      <div class="inline-block py-3 px-7 font-['Cabin'] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-normal text-white rounded-xl bg-white/[0.07] backdrop-blur-[14px] border border-white/[0.15] shadow-[0_0_18px_rgba(0,0,0,0.55),inset_0_0_14px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.09)]" data-node="impact_label" data-node-type="text" data-node-label="Impact Label" data-node-default="Our impact">
        {{impact_label}}
      </div>

      <!-- HEADING -->
      <h2 class="font-['Cabin'] font-medium text-[28px] sm:text-[36px] md:text-[44px] lg:text-[56px] leading-[105%] text-white mt-6 mb-6" data-node="impact_heading" data-node-type="text" data-node-label="Impact Heading" data-node-default="The results backed by our strategy.">
        {{impact_heading}}
      </h2>

      <!-- DESCRIPTION -->
      <p class="font-['Cabin'] text-[16px] sm:text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[140%] max-w-[530px] mb-10" data-node="impact_description" data-node-type="textarea" data-node-label="Impact Description" data-node-default="We focus on results that influence revenue, customer acquisition, and long-term brand equity.">
        {{impact_description}}
      </p>

      <!-- CTA BUTTON -->
      <a class="inline-block bg-[#D3FF5B] py-4 px-6 rounded-xl font-['Cabin'] text-[16px] sm:text-[18px] md:text-[20px] lg:text-[24px] font-normal text-black" data-node="impact_cta" data-node-type="text" data-node-label="Impact CTA Button" data-node-default="Book a Call">
        {{impact_cta}}
      </a>
    </div>
  </div>
</section>