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

 
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
    
    <!-- Left Column: Content -->
    <div class="flex flex-col items-start pr-0 lg:pr-12">
      <h2 class="text-4xl md:text-5xl font-bold text-[#003D33] leading-tight mb-8" data-node="team_heading" data-node-type="textarea" data-node-default="Designed for Individuals & Teams">
          {{team_heading}}
      </h2>
      
      <p class="text-[#4A736D] text-lg leading-relaxed mb-12" data-node="team_desc" data-node-type="textarea" data-node-default="A single financial ecosystem that adapts to personal users and organizational teams without compromise. Master the art of financial management—whether it is personal or professional.">
         {{team_desc}}
      </p>

      <!-- Sub Item 1: Individuals -->
      <div class="mb-10 last:mb-0 border-t border-gray-100 pt-8 w-full">
          <h3 class="text-xl font-bold text-[#003D33] mb-3" data-node="team_sub_1_title" data-node-type="text" data-node-default="Individuals">
              {{team_sub_1_title}}
          </h3>
          <p class="text-[#4A736D] leading-relaxed" data-node="team_sub_1_desc" data-node-type="textarea" data-node-default="Stay informed, organized, and in control with tools that simplify personal finance and promote smarter money habits.">
             {{team_sub_1_desc}}
          </p>
      </div>

       <!-- Sub Item 2: Professional Teams -->
      <div class="mb-0 border-t border-gray-100 pt-8 w-full">
          <h3 class="text-xl font-bold text-[#003D33] mb-3" data-node="team_sub_2_title" data-node-type="text" data-node-default="Professional Teams">
              {{team_sub_2_title}}
          </h3>
          <p class="text-[#4A736D] leading-relaxed" data-node="team_sub_2_desc" data-node-type="textarea" data-node-default="Enable collaboration, enforce controls, and gain financial visibility across departments with role-based access and real-time reporting.">
             {{team_sub_2_desc}}
          </p>
      </div>

    </div>


     <div class="relative">
            <!-- Sticker/Tape Effect (Decorative - top left) -->
            <div class="absolute -top-6 -left-6 z-20 w-24 h-24 opacity-80 pointer-events-none overflow-hidden ">
                <div class="w-full h-full bg-white/40 rotate-[-15deg] backdrop-blur-sm shadow-sm">

                </div>
            </div>
            <!-- Sticker/Tape Effect (Decorative - top right) -->
            <div class="absolute -top-6 -right-6 z-20 w-24 h-24 opacity-80 pointer-events-none overflow-hidden ">
                <div class="w-full h-full bg-white/40 rotate-[15deg] backdrop-blur-sm shadow-sm"></div>
            </div>

            <div class="bg-[#E2FC80]  relative overflow-hidden transform lg:rotate-1  flex justify-center  items-end min-h-[500px] md:min-h-[600px] rounded-[20px]">
                <!-- Background Arcs/Circles -->
                <div class="absolute inset-0 pointer-events-none">
                    <div class="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 w-[650px] h-[500px] hidden md:block ">
                        <img src="{{ellipse_9_img}}" data-node="ellipse_9_img" data-node-type="file" data-node-label="Ellipse 9 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956636/seltrix/templates/ss-technology-template/Ellipse%209.png" alt="App Interface" class="w-full h-auto ">
                    </div>
                    <div class="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 w-[500px] h-[300px]">
                        <img src="{{ellipse_9_img}}" data-node="ellipse_9_img" data-node-type="file" data-node-label="Ellipse 9 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956636/seltrix/templates/ss-technology-template/Ellipse%209.png" alt="App Interface" class="w-full h-auto ">

                    </div>
                </div>

                <!-- Phone Mockup -->
                <div class="relative z-10 md:w-[50%] w-[90%] transform transition-transform hover:scale-105 duration-500">
                    <img src="{{team_image}}" data-node="team_image" data-node-type="file" data-node-label="Phone Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956689/seltrix/templates/ss-technology-template/phone_mockup.png" alt="App Interface" class="w-full h-auto drop-shadow-2xl ">
                </div>
            </div>
        </div>


  </div>
     </div>
</section>