<section data-component-type="Content" class="px-4 py-16  md:py-24 max-w-[90%] mx-auto overflow-hidden" data-component-slug="ss-technology-template-smarter">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

        <!-- Left Column: Visual Card -->
        <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] transform lg:-rotate-1 relative overflow-hidden 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 w-[240px]  md:w-[300px] transform transition-transform hover:scale-105 duration-500">
                    <img src="{{smarter_phone_img}}" data-node="smarter_phone_img" data-node-type="file" data-node-label="Phone Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956712/seltrix/templates/ss-technology-template/smater1.png" alt="App Interface" class="w-full h-auto drop-shadow-2xl">
                </div>
            </div>
        </div>

        <!-- Right Column: Content -->
        <div class="flex flex-col items-start text-left">
            <!-- Badge -->
            <div class="inline-flex items-center bg-[#E2FC80] rounded-md px-4 py-1.5 mb-6">
                <img src="{{smarter_badge_icon}}" data-node="smarter_badge_icon" data-node-type="file" data-node-label="Badge Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956630/seltrix/templates/ss-technology-template/bagfe.png" alt="icon" class="w-4 h-4 mr-2 text-[#003D33]">
                <span class="text-[#003D33] font-medium text-sm" data-node="smarter_badge_text" data-node-type="text" data-node-default="Smarter Finance for Everyday Users">
                    {{smarter_badge_text}}
                </span>
            </div>

            <!-- Heading -->
            <h2 class="text-[#003D33] font-bold text-4xl md:text-5xl lg:text-6xl leading-tight mb-6" data-node="smarter_heading" data-node-type="textarea" data-node-default="A Platform for financial clarity">
                {{smarter_heading}}
            </h2>

            <!-- Description -->
            <p class="text-[#4A736D] text-lg mb-10 leading-relaxed font-normal" data-node="smarter_desc" data-node-type="textarea" data-node-default="Manage spending, save smarter, and stay in control of your money with tools designed to reduce stress and increase confidence.">
                {{smarter_desc}}
            </p>

            <!-- Feature Pills List -->
            <div class="flex flex-col gap-4 w-full mb-12">
                <div class="border border-gray-200 rounded-2xl px-6 py-4 text-[#4A736D] text-lg font-medium bg-white hover:border-[#D3F976] transition-colors" data-node="smarter_feat_1" data-node-type="text" data-node-default="Track income, expenses, and savings in real-time view">
                    {{smarter_feat_1}}
                </div>
                <div class="border border-gray-200 rounded-2xl px-6 py-4 text-[#4A736D] text-lg font-medium bg-white hover:border-[#D3F976] transition-colors" data-node="smarter_feat_2" data-node-type="text" data-node-default="Get intelligent based on your spending behavior & goals">
                    {{smarter_feat_2}}
                </div>
                <div class="border border-gray-200 rounded-2xl px-6 py-4 text-[#4A736D] text-lg font-medium bg-white hover:border-[#D3F976] transition-colors" data-node="smarter_feat_3" data-node-type="text" data-node-default="Send, receive, and manage payments instantly & securely">
                    {{smarter_feat_3}}
                </div>
            </div>

            <!-- Trust Tags -->
            <div class="flex flex-wrap gap-x-8 gap-y-4 text-[#000000] font-bold text-base">
                <div class="flex items-center">


                    <img src="{{Polygonimg}}" data-node="Polygonimg" data-node-type="file" data-node-label="badge Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956693/seltrix/templates/ss-technology-template/Polygon.png" class="w-3 h-3  object-cover mr-3" alt="App Interface">
                    <span data-node="smarter_tag_1" data-node-type="text" data-node-default="Intuitive">{{smarter_tag_1}}</span>
                </div>
                <div class="flex items-center">
                    <img src="{{Polygonimg2}}" data-node="Polygonimg2" data-node-type="file" data-node-label="badge Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956693/seltrix/templates/ss-technology-template/Polygon.png" class="w-3 h-3  object-cover mr-3" alt="App Interface">
                    <span data-node="smarter_tag_2" data-node-type="text" data-node-default="Secure">{{smarter_tag_2}}</span>
                </div>
                <div class="flex items-center">
                    <img src="{{Polygonimg3}}" data-node="Polygonimg3" data-node-type="file" data-node-label="badge Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956693/seltrix/templates/ss-technology-template/Polygon.png" class="w-3 h-3  object-cover mr-3" alt="App Interface">
                    <span data-node="smarter_tag_3" data-node-type="text" data-node-default="Fast">{{smarter_tag_3}}</span>
                </div>
                <div class="flex items-center">
                    <img src="{{Polygonimg4}}" data-node="Polygonimg4" data-node-type="file" data-node-label="badge Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956693/seltrix/templates/ss-technology-template/Polygon.png" class="w-3 h-3  object-cover mr-3" alt="App Interface">
                    <span data-node="smarter_tag_4" data-node-type="text" data-node-default="Reliable">{{smarter_tag_4}}</span>
                </div>
            </div>

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