<section class="bg-white py-20 overflow-hidden" data-component-type="Content" data-component-slug="ss-technology-template-finance_work">
  <div class="max-w-[90%] mx-auto px-6 sm:px-12">
    
    <!-- Header Section -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <div class="inline-block bg-[#E2FC80] px-4 py-1 rounded-full text-sm font-medium text-[#0A2519] mb-6" data-node="finance_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Finance That Works the Way You Do">
           <img src="{{badgeimg}}" data-node="badgeimg" data-node-type="file" data-node-label="badge Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956630/seltrix/templates/ss-technology-template/bagfe.png" class="w-[18px] h-[18px] p-1 object-cover inline-block" alt="App Interface">
        {{finance_badge}}
      </div>
      
      <h2 class="text-4xl sm:text-5xl font-bold text-[#0A2519] mb-6 leading-tight" data-node="finance_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Designed for clarity & control">
        {{finance_heading}}
      </h2>
      
      <p class="text-lg text-[#4A736D] leading-relaxed" data-node="finance_description" data-node-type="textarea" data-node-label="Description" data-node-default="Every feature is built to remove friction, from routine payments to complex financial decisions; so you stay focused on progress, not processes.">
        {{finance_description}}
      </p>
    </div>

    <!-- FEATURES -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-20 text-center lg:text-left">
      
      <div>
        <h3 class="tab-heading inline-before-underline" data-index="0" data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Expense Insights">
          {{feature_1_title}}
        </h3>
        <p class="text-[#4A736D]" data-node="feature_1_desc" data-node-type="text" data-node-label="Feature 1 Detials" data-node-default="know where money goes">
          {{feature_1_desc}}
        </p>
      </div>

      <div>
        <h3 class="tab-heading" data-index="1" data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Expense Insights">
          {{feature_2_title}}
        </h3>
        <p class="text-[#4A736D]" data-node="feature_2_desc" data-node-type="text" data-node-label="Feature 2 Detials" data-node-default="know where money goes">
          {{feature_2_desc}}
        </p>
      </div>

      <div>
        <h3 class="tab-heading" data-index="2" data-node="feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Expense Insights">
          {{feature_3_title}}
        </h3>
        <p class="text-[#4A736D]" data-node="feature_3_desc" data-node-type="text" data-node-label="Feature 3 Detials" data-node-default="know where money goes">
          {{feature_3_desc}}
        </p>
      </div>

      <div>
        <h3 class="tab-heading" data-index="3" data-node="feature_4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="Expense Insights">
          {{feature_4_title}}
        </h3>
        <p class="text-[#4A736D]" data-node="feature_4_desc" data-node-type="text" data-node-label="Feature 4 Detials" data-node-default="know where money goes">
          {{feature_4_desc}}
        </p>
      </div>

    </div>

    <!-- IMAGE SHOWCASE -->
    <div class="relative bg-[#E2FC80] rounded-[20px] p-6 sm:p-12 lg:p-16 !pb-0">
      <div class="relative rounded-2xl overflow-hidden shadow-2xl border-8 border-white/50 bg-white">

        <img src="{{dashboard_image_1}}" class="tab-content" data-index="0" data-node="dashboard_image_1" data-node-type="file" data-node-label="Dashboard Screenshot 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956637/seltrix/templates/ss-technology-template/fin1.png">
        <img src="{{dashboard_image_2}}" class="tab-content hidden" data-index="1" data-node="dashboard_image_2" data-node-type="file" data-node-label="Dashboard Screenshot 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956642/seltrix/templates/ss-technology-template/fin4.png">
        <img src="{{dashboard_image_3}}" class="tab-content hidden" data-index="2" data-node="dashboard_image_3" data-node-type="file" data-node-label="Dashboard Screenshot 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956637/seltrix/templates/ss-technology-template/fin1.png">
        <img src="{{dashboard_image_4}}" class="tab-content hidden" data-index="3" data-node="dashboard_image_4" data-node-type="file" data-node-label="Dashboard Screenshot 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956642/seltrix/templates/ss-technology-template/fin4.png">

      </div>
    </div>








  </div>
</section>