<section data-component-type="Content" class="py-16 md:py-24 bg-white" data-component-slug="ss-technology-template-your_entire">
    <div class="max-w-[90%] mx-auto">
        
        <!-- Heading -->
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-4xl md:text-5xl font-bold text-[#0A2519] leading-tight mb-6" data-node="platform_heading" data-node-type="textarea" data-node-default="Your entire platform connected through one powerful">
                {{platform_heading}}
            </h2>
            <p class="text-[#4A6673] text-lg" data-node="platform_sub" data-node-type="textarea" data-node-default="Navigate tools, teams, and data from a single intuitive dashboard. Every action becomes simpler.">
               {{platform_sub}}
            </p>
        </div>

        <!-- Grid Layout -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            
            <!-- Card 1: Task Manager (White) -->
            <div class="bg-[#F9FAFB] p-8 rounded-[32px] flex flex-col justify-between min-h-[300px] hover:shadow-md transition">
                <h3 class="text-2xl font-bold text-[#0A2519] mb-8" data-node="card_1_title" data-node-type="text" data-node-default="Task Manager">
                    {{card_1_title}}
                </h3>
                <div class="flex flex-wrap gap-3">
                     <span class="px-4 py-2 bg-[#0A2519] text-[#E2FC80] rounded-lg text-sm font-medium">
                        <span data-node="card_1_tag_1" data-node-type="text" data-node-default="Team">
                            {{card_1_tag_1}}
                        </span>
                     </span>
                     <span class="px-4 py-2 bg-white border border-gray-200 text-[#0A2519] rounded-lg text-sm font-medium">
                        <span data-node="card_1_tag_2" data-node-type="text" data-node-default="Hub">
                            {{card_1_tag_2}}
                        </span>
                     </span>
                     <span class="px-4 py-2 bg-white border border-gray-200 text-[#0A2519] rounded-lg text-sm font-medium">
                        <span data-node="card_1_tag_3" data-node-type="text" data-node-default="Huge Sales">
                            {{card_1_tag_3}}
                        </span>
                     </span>
                     <span class="px-4 py-2 bg-white border border-gray-200 text-[#0A2519] rounded-lg text-sm font-medium">
                        <span data-node="card_1_tag_4" data-node-type="text" data-node-default="User Friendly">
                            {{card_1_tag_4}}
                        </span>
                     </span>
                     <span class="px-4 py-2 bg-[#E2FC80] text-[#0A2519] rounded-lg text-sm font-medium">
                        <span data-node="card_1_tag_5" data-node-type="text" data-node-default="Control Panel">
                            {{card_1_tag_5}}
                        </span>
                     </span>
                     <span class="px-4 py-2 bg-[#151515] text-white rounded-lg text-sm font-medium">
                        <span data-node="card_1_tag_6" data-node-type="text" data-node-default="Data Analyst">
                            {{card_1_tag_6}}
                        </span>
                     </span>
                     <span class="px-4 py-2 bg-white border border-gray-200 text-[#0A2519] rounded-lg text-sm font-medium">
                        <span data-node="card_1_tag_7" data-node-type="text" data-node-default="Collaboration">
                            {{card_1_tag_7}}
                        </span>
                     </span>
                </div>
            </div>

            <!-- Middle Column -->
            <div class="flex flex-col gap-6">
                <!-- Card 2: 12m (Dark) -->
                <div class="bg-[#151515] p-8 rounded-[32px] text-white flex flex-col justify-center min-h-[200px] hover:shadow-md transition">
                    <div class="text-5xl font-bold mb-4">
                        <span data-counter="1" data-node="counter_1_value" data-node-type="number" data-node-label="Counter 1 Value" data-node-default="12" class="font-bold">0</span>
                        <span data-node="counter_1_suffix" data-node-type="text" data-node-label="Counter 1 Suffix" data-node-default="M" data-suffix="1" class="font-bold">{{counter_1_suffix}}</span>

                    </div>
                    <p class="text-gray-400 text-sm leading-relaxed" data-node="card_2_desc" data-node-type="textarea" data-node-default="Actions processed monthly with zero performance dips.">
                       {{card_2_desc}}
                    </p>
                </div>

                <!-- Card 3: 642+ (Lime) -->
                <div class="bg-[#E2FC80] p-8 rounded-[32px] text-[#0A2519] flex flex-col justify-center min-h-[200px] hover:shadow-md transition">
                     <div class="text-4xl font-bold mb-4">
                        <span data-counter="2" data-node="counter_2_value" data-node-type="number" data-node-label="Counter 2 Value" data-node-default="642" class="font-bold">0</span>
                        <span data-node="counter_2_suffix" data-node-type="text" data-node-label="Counter 2 Suffix" data-node-default="+" data-suffix="2" class="font-bold">{{counter_2_suffix}}</span>

                     </div>
                    <p class="text-[#0A2519]/80 text-sm leading-relaxed" data-node="card_3_desc" data-node-type="textarea" data-node-default="Integrations available to extend your workflow instantly.">
                       {{card_3_desc}}
                    </p>
                </div>
            </div>

            <!-- Card 4: Quote (White) -->
            <div class="bg-[#F8FAFB] p-8 rounded-[32px] flex flex-col justify-between min-h-[300px] hover:shadow-md transition">
                <div class="text-6xl font-serif text-[#151515] mb-4">“</div>
                <p class="text-[#4A6673] text-lg leading-relaxed mb-6" data-node="quote_text" data-node-type="textarea" data-node-default="Your tools shouldn’t slow you down. They should accelerate every decision, every task, every goal. This platform gives you the freedom to work at your highest potential without adding complexity to your day">
                    {{quote_text}}
                </p>
                <div class="text-right text-6xl font-serif text-[#151515]">”</div>
            </div>

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