<section data-component-type="Content" class="px-6 py-16 max-w-[90%] mx-auto" data-component-slug="ss-technology-template-our-vision">
  <!-- Container -->
  <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 items-start">
    <!-- Left Text -->
    <div class="lg:col-span-1 flex flex-col justify-center items-start text-start pt-[30px]">
      <h2 data-node="vision_heading" data-node-type="text" data-node-label="Vision Heading" data-node-default="Our Vision" class="text-2xl font-semibold text-[#003D33] mb-3">
        {{vision_heading}}
      </h2>
      <p data-node="vision_desc" data-node-type="textarea" data-node-label="Vision Description" data-node-default="We believe in simplifying workflows so teams can focus on meaningful work rather than manual tasks." class="text-[#4A6673] max-w-sm">
        {{vision_desc}}
      </p>
    </div>

    <!-- Cards -->
    <div class="lg:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- Card 1 -->
      <div class="bg-[#F8FAFB] rounded-xl p-6 shadow-sm hover:shadow-md transition">
        <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#E2FC80] shadow mb-4">
          <img data-node="card_1_icon" data-node-type="file" data-node-label="Card 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956723/seltrix/templates/ss-technology-template/user-octagon.png" src="{{card_1_icon}}" alt="icon" class="w-5 h-5">
        </div>
        <h3 data-node="card_1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="Human-Centric Design" class="text-lg font-semibold mb-2 text-[#003D33]">
          {{card_1_title}}
        </h3>
        <p data-node="card_1_desc" data-node-type="textarea" data-node-label="Card 1 Description" data-node-default="Interfaces built around your natural workflow, reducing time spent learning new tools." class="text-[#4A6673] text-sm">
          {{card_1_desc}}
        </p>
      </div>

      <!-- Card 2 -->
      <div class="bg-[#F8FAFB] rounded-xl p-6 shadow-sm hover:shadow-md transition">
        <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#E2FC80] shadow mb-4">
          <img data-node="card_2_icon" data-node-type="file" data-node-label="Card 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956707/seltrix/templates/ss-technology-template/send-sqaure-2.png" src="{{card_2_icon}}" alt="icon" class="w-5 h-5">
        </div>
        <h3 data-node="card_2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Scalable Architecture" class="text-lg font-semibold mb-2 text-[#003D33]">
          {{card_2_title}}
        </h3>
        <p data-node="card_2_desc" data-node-type="textarea" data-node-label="Card 2 Description" data-node-default="A flexible system that grows with your operations from startup stage to enterprise scale." class="text-[#4A6673] text-sm">
          {{card_2_desc}}
        </p>
      </div>

      <!-- Card 3 -->
      <div class="bg-[#F8FAFB] rounded-xl p-6 shadow-sm hover:shadow-md transition">
        <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#E2FC80] shadow mb-4">
          <img data-node="card_3_icon" data-node-type="file" data-node-label="Card 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956645/seltrix/templates/ss-technology-template/flash.png" src="{{card_3_icon}}" alt="icon" class="w-5 h-5">
        </div>
        <h3 data-node="card_3_title" data-node-type="text" data-node-label="Card 3 Title" data-node-default="Reliable Performance" class="text-lg font-semibold mb-2 text-[#003D33]">
          {{card_3_title}}
        </h3>
        <p data-node="card_3_desc" data-node-type="textarea" data-node-label="Card 3 Description" data-node-default="Fast, stable, and optimized for teams who depend on uninterrupted productivity." class="text-[#4A6673] text-sm">
          {{card_3_desc}}
        </p>
      </div>
    </div>
  </div>
</section>