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

    <!-- Header -->
    <div class="text-center max-w-5xl mx-auto mb-20 px-4">
        <h2 class="text-4xl md:text-5xl lg:text-[54px] font-bold text-[#0A2519] leading-tight">
            <span data-node="slow_headline_1" data-node-type="text" data-node-default="Finance Shouldn’t">{{slow_headline_1}}</span>
            <!-- Inline Icon 1 (Location/Map pin style) -->
            <span class="inline-flex items-center justify-center w-12 h-12 md:w-14 md:h-14 bg-[#E2FC80] rounded-full align-middle mx-1">
                <img src="{{slow_icon_1}}" data-node="slow_icon_1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956665/seltrix/templates/ss-technology-template/icon_map.png" class="w-6 h-6" alt>
            </span>
            <span data-node="slow_headline_2" data-node-type="text" data-node-default="Slow You Down.">{{slow_headline_2}}</span>
            <br class="hidden md:block">
            <span data-node="slow_headline_3" data-node-type="text" data-node-default="It Should">{{slow_headline_3}}</span>
            <!-- Inline Icon 2 (Orange diamond) -->
            <span class="inline-flex items-center justify-center w-12 h-12 md:w-14 md:h-14 bg-[#F58634] rounded-full align-middle mx-1 rotate-45 transform">
                <img src="{{slow_icon_2}}" data-node="slow_icon_2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956662/seltrix/templates/ss-technology-template/icon_diamond.png" class="w-6 h-6 -rotate-45" alt>
            </span>
            <span data-node="slow_headline_4" data-node-type="text" data-node-default="Adapt, Grow, & Stay Invisible">{{slow_headline_4}}</span>
            <br class="hidden md:block">
            <span data-node="slow_headline_5" data-node-type="text" data-node-default="Until You Need">{{slow_headline_5}}</span>
            <!-- Inline Icon 3 (Calendar/Book) -->
            <span class="inline-flex items-center justify-center w-12 h-12 md:w-14 md:h-14 bg-[#0A2519] rounded-lg align-middle mx-1">
                <img src="{{slow_icon_3}}" data-node="slow_icon_3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956657/seltrix/templates/ss-technology-template/icon_calendar.png" class="w-6 h-6" alt>
            </span>
            <span data-node="slow_headline_6" data-node-type="text" data-node-default="It.">{{slow_headline_6}}</span>
        </h2>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <!-- Left Column: Visual -->
        <div class="relative bg-[#E2FC80] rounded-[18px] sm:rounded-[40px]
         px-4 pt-10 sm:px-10 lg:px-14 
         overflow-hidden
         min-h-[420px] sm:min-h-[480px] lg:min-h-[520px]
         flex items-end justify-center">
            <!-- Abstract Squiggles (Background) -->
            <div class="absolute top-6 sm:top-10 inset-x-0 flex justify-center pointer-events-none">
                <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767956719/seltrix/templates/ss-technology-template/squiggles.png" class="w-[280px] sm:w-[380px] lg:w-[500px]
             opacity-60 object-contain" alt="Background decoration">
            </div>

            <!-- Phone -->
            <div class="relative z-10
              w-[240px] sm:w-[280px] md:w-[300px] lg:w-[320px]  h-[360px] sm:h-[360px] md:h-[400px] lg:h-[420px] overflow-hidden
              translate-y-6 sm:translate-y-10">
                <img data-index="0" src="{{slow_image2}}" data-node="slow_image2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956691/seltrix/templates/ss-technology-template/phone_mockup_dark.png" class="w-full h-auto object-contain about_main-image" alt="Phone mockup">

                <img data-index="1" src="{{slow_image3}}" data-node="slow_image3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956652/seltrix/templates/ss-technology-template/heroimg1.png" class="w-full h-auto object-contain hidden about_main-image" alt="Phone mockup">

                <img data-index="2" src="{{slow_image4}}" data-node="slow_image4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956691/seltrix/templates/ss-technology-template/phone_mockup_dark.png" class="w-full h-auto object-contain hidden about_main-image" alt="Phone mockup">

                <img data-index="3" src="{{slow_image5}}" data-node="slow_image5" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956712/seltrix/templates/ss-technology-template/smater1.png" class="w-full h-auto object-contain hidden about_main-image" alt="Phone mockup">
            </div>
        </div>


        <!-- Right Column: Features List -->
        <div class="flex flex-col">
            <!-- Feature 1 -->
            <div class="bg-[#F8F9FA] p-8 rounded-2xl about_main-card" data-index="0">
                <h3 class="text-xl font-bold text-[#0A2519] mb-3" data-node="slow_feat_1_title" data-node-type="text" data-node-default="Unified Dashboard">{{slow_feat_1_title}}</h3>
                <p class="text-[#4A736D] text-base leading-relaxed" data-node="slow_feat_1_desc" data-node-type="textarea" data-node-default="All accounts, transactions, and insights in one place, no switching tools.">
                    {{slow_feat_1_desc}}</p>
            </div>
            <!-- Feature 2 -->
            <div class=" p-8 rounded-2xl about_main-card" data-index="1">
                <h3 class="text-xl font-bold text-[#0A2519] mb-3" data-node="slow_feat_2_title" data-node-type="text" data-node-default="Smart Automation">{{slow_feat_2_title}}</h3>
                <p class="text-[#4A736D] text-base leading-relaxed" data-node="slow_feat_2_desc" data-node-type="textarea" data-node-default="Automate recurring payments, reports, and approvals to reduce manual work.">
                    {{slow_feat_2_desc}}</p>
            </div>
            <!-- Feature 3 -->
            <div class=" p-8 rounded-2xl about_main-card" data-index="2">
                <h3 class="text-xl font-bold text-[#0A2519] mb-3" data-node="slow_feat_3_title" data-node-type="text" data-node-default="Seamless Integrations">{{slow_feat_3_title}}</h3>
                <p class="text-[#4A736D] text-base leading-relaxed" data-node="slow_feat_3_desc" data-node-type="textarea" data-node-default="Connect effortlessly with accounting, payroll, and SaaS platfroms you already use.">
                    {{slow_feat_3_desc}}</p>
            </div>
            <!-- Feature 4 -->
            <div class=" p-8 rounded-2xl about_main-card" data-index="3">
                <h3 class="text-xl font-bold text-[#0A2519] mb-3" data-node="slow_feat_4_title" data-node-type="text" data-node-default="Insight-Driven Reporting">{{slow_feat_4_title}}</h3>
                <p class="text-[#4A736D] text-base leading-relaxed" data-node="slow_feat_4_desc" data-node-type="textarea" data-node-default="Clear, actionable financial insights to know your money without complex spreadsheets.">
                    {{slow_feat_4_desc}}</p>
            </div>
        </div>
    </div>

</section>