<section data-component-type="Content" data-component-slug="ss-technology-template-faster_setup">
    <div class="py-16 md:py-24 max-w-[90%] mx-auto">

   

  <div class="flex flex-col lg:flex-row gap-12 lg:gap-20">
    
    <!-- Left Column: Content -->
    <div class="lg:w-1/2 flex flex-col items-start pt-8">
      <!-- Badge -->
       <div class="inline-flex items-center gap-2 bg-[#E2FC80] px-4 py-1.5 rounded-full mb-8">
        <img src="{{setup_badge_icon}}" data-node="setup_badge_icon" data-node-type="file" data-node-label="Badge Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956630/seltrix/templates/ss-technology-template/bagfe.png" class="w-4 h-4 object-contain" alt="icon">
        <span class="text-[#0A2519] font-medium text-sm tracking-wide" data-node="setup_badge_text" data-node-type="text" data-node-default="Built for How Modern Finance Actually Works">
            {{setup_badge_text}}
        </span>
      </div>

      <h2 class="text-4xl md:text-5xl lg:text-[56px] font-bold text-[#01483D] leading-[1.1] mb-8" data-node="setup_heading" data-node-type="textarea" data-node-default="Designed to remove friction in the financial operations">
          {{setup_heading}}
      </h2>
      
      <p class="text-[#4A736D] text-lg leading-relaxed mb-12 max-w-lg" data-node="setup_desc" data-node-type="textarea" data-node-default="Most fintech tools solve one problem and create three more. This platform is built to handle end-to-end">
         {{setup_desc}}
      </p>

      <!-- Horizontal Feature List -->
       <div class="flex flex-wrap gap-x-8 gap-y-4 text-[#0A2519] font-bold text-lg">
          <div class="flex items-center gap-2">
              <img src="{{setup_poly_icon}}" data-node="setup_poly_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956693/seltrix/templates/ss-technology-template/Polygon.png" class="w-3 h-3">
              <span data-node="setup_tag_1" data-node-type="text" data-node-default="Speed">{{setup_tag_1}}</span>
          </div>
          <div class="flex items-center gap-2">
            <img src="{{setup_poly_icon}}" class="w-3 h-3">
             <span data-node="setup_tag_2" data-node-type="text" data-node-default="Control">{{setup_tag_2}}</span>
          </div>
          <div class="flex items-center gap-2">
             <img src="{{setup_poly_icon}}" class="w-3 h-3">
             <span data-node="setup_tag_3" data-node-type="text" data-node-default="Security">{{setup_tag_3}}</span>
          </div>
          <div class="flex items-center gap-2">
             <img src="{{setup_poly_icon}}" class="w-3 h-3">
             <span data-node="setup_tag_4" data-node-type="text" data-node-default="Scale">{{setup_tag_4}}</span>
          </div>
       </div>

    </div>

    <!-- Right Column: 2x2 Grid -->
    <div class="lg:w-1/2 grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <!-- Card 1 -->
        <div class="bg-[#F8F9FA] p-8 rounded-2xl flex flex-col items-start border border-gray-100 hover:shadow-sm transition-shadow">
             <div class="bg-[#E2FC80] p-3 rounded-lg mb-6">
                 <img src="{{feature_1_icon}}" data-node="feature_1_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956656/seltrix/templates/ss-technology-template/icon_bolt.png" class="w-6 h-6 object-contain">
             </div>
             <h3 class="text-xl font-bold text-[#0A2519] mb-3" data-node="feature_1_title" data-node-type="text" data-node-default="Faster Setup">{{feature_1_title}}</h3>
             <p class="text-[#4A736D] leading-relaxed text-sm" data-node="feature_1_desc" data-node-type="textarea" data-node-default="Get onboarded in minutes, not weeks. No paperwork loops and technical delays in signing up.">{{feature_1_desc}}</p>
        </div>

        <!-- Card 2 -->
        <div class="bg-[#F8F9FA] p-8 rounded-2xl flex flex-col items-start border border-gray-100 hover:shadow-sm transition-shadow">
            <div class="bg-[#E2FC80] p-3 rounded-lg mb-6">
                <img src="{{feature_2_icon}}" data-node="feature_2_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956661/seltrix/templates/ss-technology-template/icon_clock.png" class="w-6 h-6 object-contain">
            </div>
            <h3 class="text-xl font-bold text-[#0A2519] mb-3" data-node="feature_2_title" data-node-type="text" data-node-default="Real-Time Control">{{feature_2_title}}</h3>
            <p class="text-[#4A736D] leading-relaxed text-sm" data-node="feature_2_desc" data-node-type="textarea" data-node-default="Track transactions, balances, and performance as they happen, not after the fact.">{{feature_2_desc}}</p>
       </div>

       <!-- Card 3 -->
       <div class="bg-[#F8F9FA] p-8 rounded-2xl flex flex-col items-start border border-gray-100 hover:shadow-sm transition-shadow">
            <div class="bg-[#E2FC80] p-3 rounded-lg mb-6">
                <img src="{{feature_3_icon}}" data-node="feature_3_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956664/seltrix/templates/ss-technology-template/icon_lock.png" class="w-6 h-6 object-contain">
            </div>
            <h3 class="text-xl font-bold text-[#0A2519] mb-3" data-node="feature_3_title" data-node-type="text" data-node-default="Bank-Grade Security">{{feature_3_title}}</h3>
            <p class="text-[#4A736D] leading-relaxed text-sm" data-node="feature_3_desc" data-node-type="textarea" data-node-default="Every transaction is protected with enterprise-level encryption and compliance standards.">{{feature_3_desc}}</p>
       </div>

        <!-- Card 4 -->
        <div class="bg-[#F8F9FA] p-8 rounded-2xl flex flex-col items-start border border-gray-100 hover:shadow-sm transition-shadow">
            <div class="bg-[#E2FC80] p-3 rounded-lg mb-6">
                <img src="{{feature_4_icon}}" data-node="feature_4_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956660/seltrix/templates/ss-technology-template/icon_chart.png" class="w-6 h-6 object-contain">
            </div>
            <h3 class="text-xl font-bold text-[#0A2519] mb-3" data-node="feature_4_title" data-node-type="text" data-node-default="Scales With You">{{feature_4_title}}</h3>
            <p class="text-[#4A736D] leading-relaxed text-sm" data-node="feature_4_desc" data-node-type="textarea" data-node-default="Our platform works just as well for individuals today as it does for teams tomorrow.">{{feature_4_desc}}</p>
       </div>
    </div>

  </div>


   </div>
</section>