<section data-component-type="Content" class="max-w-[90%] mx-auto py-20" data-component-slug="saas-template-Scale-Effortlessly">
  <!-- Badge -->
  <span data-node="scale_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Scale Effortlessly" class="text-sm font-medium bg-[#5F4BE233] text-[#5F4BE2] px-4 py-2 rounded-[10px]">
    {{scale_badge}}
  </span>

  <!-- Heading + Subtext -->
  <div class="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-6 mt-6">
    <div class="max-w-xl">
      <h2 data-node="scale_heading" data-node-type="text" data-node-label="Main Heading" data-node-default="Grow your operations with features built for expansion" class="text-3xl md:text-4xl font-semibold text-[#0A0A0A] leading-snug">
        {{scale_heading}}
      </h2>
    </div>

    <p data-node="scale_subtext" data-node-type="textarea" data-node-label="Subtext" data-node-default="Add users, upgrade processes, and expand your workload instantly. The system adapts to growth without slowing you down." class="max-w-lg text-[#4A6673] text-base leading-relaxed">
      {{scale_subtext}}
    </p>
  </div>

  <!-- Feature Cards Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mt-12">
    <!-- Card 1 -->
    <div class="p-6 border rounded-xl hover:shadow-lg transition bg-[#F8FAFB]">
      <img data-node="scale_card_1_icon" data-node-type="file" data-node-label="Card 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868908/seltrix/templates/saas-template/Scale-Effortless/verify.png" src="{{scale_card_1_icon}}" alt="Feature Icon" class="w-10 h-10 p-2 bg-[#E8EFF3] rounded-lg mb-4">
      <h3 data-node="scale_card_1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="Advanced Permissions" class="font-semibold text-lg mb-2">
        {{scale_card_1_title}}
      </h3>
      <p data-node="scale_card_1_desc" data-node-type="textarea" data-node-label="Card 1 Description" data-node-default="Control access with custom roles that keep your data secure." class="text-[#4A5A63] text-sm leading-relaxed">
        {{scale_card_1_desc}}
      </p>
    </div>

    <!-- Card 2 -->
    <div class="p-6 border rounded-xl hover:shadow-lg transition bg-[#F8FAFB]">
      <img data-node="scale_card_2_icon" data-node-type="file" data-node-label="Card 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868906/seltrix/templates/saas-template/Scale-Effortless/hierarchy.png" src="{{scale_card_2_icon}}" alt="Feature Icon" class="w-10 h-10 p-2 bg-[#EAEFF5] rounded-lg mb-4">
      <h3 data-node="scale_card_2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Multi-Workspace Setup" class="font-semibold text-lg mb-2">
        {{scale_card_2_title}}
      </h3>
      <p data-node="scale_card_2_desc" data-node-type="textarea" data-node-label="Card 2 Description" data-node-default="Switch between teams or projects without losing flow or structure." class="text-[#4A5A63] text-sm leading-relaxed">
        {{scale_card_2_desc}}
      </p>
    </div>

    <!-- Card 3 -->
    <div class="p-6 border rounded-xl hover:shadow-lg transition bg-[#F8FAFB]">
      <img data-node="scale_card_3_icon" data-node-type="file" data-node-label="Card 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868905/seltrix/templates/saas-template/Scale-Effortless/flash.png" src="{{scale_card_3_icon}}" alt="Feature Icon" class="w-10 h-10 p-2 bg-[#EAEFF5] rounded-lg mb-4">
      <h3 data-node="scale_card_3_title" data-node-type="text" data-node-label="Card 3 Title" data-node-default="Performance Insights" class="font-semibold text-lg mb-2">
        {{scale_card_3_title}}
      </h3>
      <p data-node="scale_card_3_desc" data-node-type="textarea" data-node-label="Card 3 Description" data-node-default="Track usage, speed, and engagement with real-time analytics." class="text-[#4A5A63] text-sm leading-relaxed">
        {{scale_card_3_desc}}
      </p>
    </div>

    <!-- Card 4 -->
    <div class="p-6 border rounded-xl hover:shadow-lg transition bg-[#F8FAFB]">
      <img data-node="scale_card_4_icon" data-node-type="file" data-node-label="Card 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868907/seltrix/templates/saas-template/Scale-Effortless/simcard.png" src="{{scale_card_4_icon}}" alt="Feature Icon" class="w-10 h-10 p-2 bg-[#EAEFF5] rounded-lg mb-4">
      <h3 data-node="scale_card_4_title" data-node-type="text" data-node-label="Card 4 Title" data-node-default="API Extensions" class="font-semibold text-lg mb-2">
        {{scale_card_4_title}}
      </h3>
      <p data-node="scale_card_4_desc" data-node-type="textarea" data-node-label="Card 4 Description" data-node-default="Integrate tools, build automations, and shape your custom ecosystem." class="text-[#4A5A63] text-sm leading-relaxed">
        {{scale_card_4_desc}}
      </p>
    </div>
  </div>
</section>