{{# Homepage Template #}}

{{# Hero Section — full-screen blue header like old WP site #}}
<section class="hero-fullscreen relative -mt-6 min-h-[90vh] overflow-hidden flex items-center" style="background: url('/assets/articles/uploads/2021/10/home_wave-bg1-1.png') center center/cover no-repeat;">
    <div class="absolute inset-0 bg-gradient-to-b from-[#1a2a6c]/30 to-transparent"></div>
    <div class="hero-dots relative z-10 px-6 lg:px-[90px] pt-32 md:pt-36 pb-20 md:pb-28 w-full">
        <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-8 lg:gap-14">
            {{# Text Side #}}
            <div class="md:w-[45%] shrink-0 text-white text-center md:text-left">
                <h1 class="font-nunito text-3xl md:text-4xl lg:text-[35px] font-bold mb-6 leading-[1.5]"
                    data-aos="fade-right" data-aos-delay="100">
                    {{ trans:messages.home_hero_title }}
                </h1>
                <p class="text-lg md:text-xl text-white/80 mb-10 max-w-xl"
                   data-aos="fade-right" data-aos-delay="250">
                    {{ trans:messages.home_hero_subtitle }}
                </p>
                <div class="flex flex-wrap items-center gap-5 justify-center md:justify-start" data-aos="fade-right" data-aos-delay="400">
                    <a href="{{ locale_path }}/registration"
                       class="btn-orange inline-block px-8 py-3.5 text-lg font-bold rounded-md shadow-lg">
                        {{ trans:messages.home_cta_sign_up }}
                    </a>
                    <a href="{{ locale_path }}/otelms-front-desk"
                       class="inline-flex items-center gap-3 text-white group">
                        <span class="play-pulse w-12 h-12 rounded-full bg-white/20 border-2 border-white/50 flex items-center justify-center group-hover:bg-white/30 transition-all">
                            <i class="fa-solid fa-play text-sm ml-0.5"></i>
                        </span>
                        <span class="text-lg font-semibold">{{ trans:messages.home_cta_overview }}</span>
                    </a>
                </div>
            </div>
            {{# Illustration Side #}}
            <div class="md:w-[55%] hidden md:flex justify-end" data-aos="fade-left" data-aos-delay="300">
                <img src="/assets/articles/uploads/2021/10/home4_img-1.png" alt="OtelMS hotel management platform dashboard" class="hero-mover w-full max-w-2xl drop-shadow-2xl">
            </div>
        </div>
    </div>
</section>

{{# Clients / Partners Logo Strip #}}
<section class="py-8 hero-fullscreen bg-white" data-aos="fade-up">
    <div class="max-w-[1400px] mx-auto px-6 lg:px-[90px]">
        <div class="flex flex-wrap items-center justify-center sm:justify-between gap-x-6 gap-y-5 w-full">
            <img src="/assets/articles/uploads/2023/06/Booking_CPP_Badge_PP_Premier_White-e1686568272180.jpg" alt="Booking.com" class="w-24 sm:w-28 md:w-36 lg:w-40 object-contain">
            <img src="/assets/articles/uploads/2020/09/Expedia-logo.png" alt="Expedia" class="w-24 sm:w-28 md:w-36 lg:w-40 object-contain">
            <img src="/assets/articles/uploads/2020/09/airbnb-logo.png" alt="Airbnb" class="w-24 sm:w-28 md:w-36 lg:w-40 object-contain">
            <img src="/assets/articles/uploads/2022/04/google-logo.jpg" alt="Google" class="w-24 sm:w-28 md:w-36 lg:w-40 object-contain">
            <img src="/assets/articles/uploads/2020/09/tripadvisor-logo.png" alt="TripAdvisor" class="w-24 sm:w-28 md:w-36 lg:w-40 object-contain">
        </div>
    </div>
</section>

{{# Service Cards — 8 cards, 4 per row, WP hover effect #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {{# Row 1 #}}
            <a href="{{ locale_path }}/otelms-front-desk"
               class="card-service bg-[#fefeff] rounded-md shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] px-6 py-10"
               data-aos="fade-up" data-aos-delay="0">
                <h3 class="font-nunito text-base font-bold text-[#252a3f] mb-3">{{ trans:messages.home_card_front_desk }}</h3>
                <img src="/assets/articles/uploads/2021/09/icon-1.png" alt="{{ trans:messages.home_card_front_desk }}" class="w-[90px] mb-4">
                <div class="w-[60px] h-px bg-gray-300 mb-4 card-accent-line"></div>
                <p class="text-sm text-[#696687] leading-relaxed">{{ trans:messages.home_card_front_desk_desc }}</p>
            </a>
            <a href="{{ locale_path }}/channel-manager"
               class="card-service bg-[#fefeff] rounded-md shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] px-6 py-10"
               data-aos="fade-up" data-aos-delay="100">
                <h3 class="font-nunito text-base font-bold text-[#252a3f] mb-3">{{ trans:messages.home_card_channel }}</h3>
                <img src="/assets/articles/uploads/2021/09/icon-2.png" alt="{{ trans:messages.home_card_channel }}" class="w-[90px] mb-4">
                <div class="w-[60px] h-px bg-gray-300 mb-4 card-accent-line"></div>
                <p class="text-sm text-[#696687] leading-relaxed">{{ trans:messages.home_card_channel_desc }}</p>
            </a>
            <a href="{{ locale_path }}/booking"
               class="card-service bg-[#fefeff] rounded-md shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] px-6 py-10"
               data-aos="fade-up" data-aos-delay="200">
                <h3 class="font-nunito text-base font-bold text-[#252a3f] mb-3">{{ trans:messages.home_card_booking }}</h3>
                <img src="/assets/articles/uploads/2021/09/icon-3.png" alt="{{ trans:messages.home_card_booking }}" class="w-[90px] mb-4">
                <div class="w-[60px] h-px bg-gray-300 mb-4 card-accent-line"></div>
                <p class="text-sm text-[#696687] leading-relaxed">{{ trans:messages.home_card_booking_desc }}</p>
            </a>
            <a href="{{ locale_path }}/acquiring"
               class="card-service bg-[#fefeff] rounded-md shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] px-6 py-10"
               data-aos="fade-up" data-aos-delay="300">
                <h3 class="font-nunito text-base font-bold text-[#252a3f] mb-3">{{ trans:messages.home_card_acquiring }}</h3>
                <img src="/assets/articles/uploads/2021/09/icon-4.png" alt="{{ trans:messages.home_card_acquiring }}" class="w-[90px] mb-4">
                <div class="w-[60px] h-px bg-gray-300 mb-4 card-accent-line"></div>
                <p class="text-sm text-[#696687] leading-relaxed">{{ trans:messages.home_card_acquiring_desc }}</p>
            </a>
            {{# Row 2 #}}
            <a href="{{ locale_path }}/otelms-front-desk"
               class="card-service bg-[#fefeff] rounded-md shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] px-6 py-10"
               data-aos="fade-up" data-aos-delay="0">
                <h3 class="font-nunito text-base font-bold text-[#252a3f] mb-3">{{ trans:messages.home_card_analytics }}</h3>
                <img src="/assets/articles/uploads/2021/09/icon-5.png" alt="{{ trans:messages.home_card_analytics }}" class="w-[90px] mb-4">
                <div class="w-[60px] h-px bg-gray-300 mb-4 card-accent-line"></div>
                <p class="text-sm text-[#696687] leading-relaxed">{{ trans:messages.home_card_analytics_desc }}</p>
            </a>
            <a href="{{ locale_path }}/housekeeping-module"
               class="card-service bg-[#fefeff] rounded-md shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] px-6 py-10"
               data-aos="fade-up" data-aos-delay="100">
                <h3 class="font-nunito text-base font-bold text-[#252a3f] mb-3">{{ trans:messages.home_card_housekeeping }}</h3>
                <img src="/assets/articles/uploads/2021/09/icon-6.png" alt="{{ trans:messages.home_card_housekeeping }}" class="w-[90px] mb-4">
                <div class="w-[60px] h-px bg-gray-300 mb-4 card-accent-line"></div>
                <p class="text-sm text-[#696687] leading-relaxed">{{ trans:messages.home_card_housekeeping_desc }}</p>
            </a>
            <a href="{{ locale_path }}/wifi-authorization"
               class="card-service bg-[#fefeff] rounded-md shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] px-6 py-10"
               data-aos="fade-up" data-aos-delay="200">
                <h3 class="font-nunito text-base font-bold text-[#252a3f] mb-3">{{ trans:messages.home_card_wifi }}</h3>
                <img src="/assets/articles/uploads/2021/09/icon-7.png" alt="{{ trans:messages.home_card_wifi }}" class="w-[90px] mb-4">
                <div class="w-[60px] h-px bg-gray-300 mb-4 card-accent-line"></div>
                <p class="text-sm text-[#696687] leading-relaxed">{{ trans:messages.home_card_wifi_desc }}</p>
            </a>
            <a href="{{ locale_path }}/reputation-module"
               class="card-service bg-[#fefeff] rounded-md shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] px-6 py-10"
               data-aos="fade-up" data-aos-delay="300">
                <h3 class="font-nunito text-base font-bold text-[#252a3f] mb-3">{{ trans:messages.home_card_reputation }}</h3>
                <img src="/assets/articles/uploads/2021/09/icon-8.png" alt="{{ trans:messages.home_card_reputation }}" class="w-[90px] mb-4">
                <div class="w-[60px] h-px bg-gray-300 mb-4 card-accent-line"></div>
                <p class="text-sm text-[#696687] leading-relaxed">{{ trans:messages.home_card_reputation_desc }}</p>
            </a>
        </div>
    </div>
</section>

{{# ===== Product Explainer Sections (alternating image/text) ===== #}}

{{# 1. OtelMS Front Desk — image LEFT, text RIGHT #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-right">
                <img src="/assets/articles/uploads/2021/09/home2_img_06.png" alt="OtelMS Front Desk" class="w-full max-w-lg mx-auto">
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.explainer_front_desk_title }}</h2>
                <p class="text-[#696687] mb-4 leading-relaxed">{{ trans:messages.explainer_front_desk_desc }}</p>
                <p class="text-[#696687] mb-3 font-semibold">{{ trans:messages.explainer_front_desk_subtitle }}</p>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_front_desk_1 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_front_desk_2 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_front_desk_3 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_front_desk_4 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_front_desk_5 }}</li>
                </ul>
                <a href="{{ locale_path }}/otelms-front-desk" class="btn-primary inline-block px-8 py-3 rounded-md text-sm">{{ trans:messages.learn_more }}</a>
            </div>
        </div>
    </div>
</section>

{{# 2. Channel Manager OtelMS — text LEFT, image RIGHT #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row-reverse items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/09/home2_img_071.png" alt="Channel Manager OtelMS" class="w-full max-w-lg mx-auto">
            </div>
            <div class="md:w-1/2" data-aos="fade-right">
                <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.explainer_channel_title }}</h2>
                <p class="text-[#696687] mb-3 font-semibold">{{ trans:messages.explainer_channel_subtitle }}</p>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_channel_1 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_channel_2 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_channel_3 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_channel_4 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_channel_5 }}</li>
                </ul>
                <a href="{{ locale_path }}/channel-manager" class="btn-primary inline-block px-8 py-3 rounded-md text-sm">{{ trans:messages.learn_more }}</a>
            </div>
        </div>
    </div>
</section>

{{# 3. Online Booking Engine — image LEFT, text RIGHT #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-right">
                <img src="/assets/articles/uploads/2021/09/home2_img_03.jpg" alt="Online Booking Engine" class="w-full max-w-lg mx-auto">
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.explainer_booking_title }}</h2>
                <p class="text-[#696687] mb-3 font-semibold">{{ trans:messages.explainer_booking_subtitle }}</p>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_booking_1 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_booking_2 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_booking_3 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_booking_4 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_booking_5 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_booking_6 }}</li>
                </ul>
                <a href="{{ locale_path }}/booking" class="btn-primary inline-block px-8 py-3 rounded-md text-sm">{{ trans:messages.learn_more }}</a>
            </div>
        </div>
    </div>
</section>

{{# 4. Website Development — text LEFT, image RIGHT #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row-reverse items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/09/home2_img_04.png" alt="Website Development" class="w-full max-w-lg mx-auto">
            </div>
            <div class="md:w-1/2" data-aos="fade-right">
                <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.explainer_website_title }}</h2>
                <p class="text-[#696687] mb-3 font-semibold">{{ trans:messages.explainer_website_subtitle }}</p>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_website_1 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_website_2 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_website_3 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_website_4 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_website_5 }}</li>
                </ul>
                <a href="{{ locale_path }}/sites" class="btn-primary inline-block px-8 py-3 rounded-md text-sm">{{ trans:messages.learn_more }}</a>
            </div>
        </div>
    </div>
</section>

{{# 5. Internet Acquiring — image LEFT, text RIGHT #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-right">
                <img src="/assets/articles/uploads/2021/10/ic-home.png" alt="Internet Acquiring" class="w-full max-w-lg mx-auto">
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.explainer_acquiring_title }}</h2>
                <p class="text-[#696687] mb-4 leading-relaxed">{{ trans:messages.explainer_acquiring_desc }}</p>
                <p class="text-[#696687] mb-3 font-semibold">{{ trans:messages.explainer_acquiring_subtitle }}</p>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_acquiring_1 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_acquiring_2 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_acquiring_3 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_acquiring_4 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_acquiring_5 }}</li>
                </ul>
                <a href="{{ locale_path }}/acquiring" class="btn-primary inline-block px-8 py-3 rounded-md text-sm">{{ trans:messages.learn_more }}</a>
            </div>
        </div>
    </div>
</section>

{{# 6. Housekeeping — text LEFT, image RIGHT #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row-reverse items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/10/img-service-05-640x669-1.png" alt="Housekeeping" class="w-full max-w-lg mx-auto">
            </div>
            <div class="md:w-1/2" data-aos="fade-right">
                <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.explainer_housekeeping_title }}</h2>
                <p class="text-[#696687] mb-4 leading-relaxed">{{ trans:messages.explainer_housekeeping_desc }}</p>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_housekeeping_1 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_housekeeping_2 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_housekeeping_3 }}</li>
                    <li class="flex items-center gap-2 text-[#696687]"><i class="fa-solid fa-check text-[#6254e7]"></i> {{ trans:messages.explainer_housekeeping_4 }}</li>
                </ul>
                <a href="{{ locale_path }}/housekeeping-module" class="btn-primary inline-block px-8 py-3 rounded-md text-sm">{{ trans:messages.learn_more }}</a>
            </div>
        </div>
    </div>
</section>

{{# 7. Wifi Authorization — image LEFT, text RIGHT #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-right">
                <img src="/assets/articles/uploads/2021/10/otelms-wifi.png" alt="Wifi Authorization" class="w-full max-w-lg mx-auto">
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.explainer_wifi_title }}</h2>
                <p class="text-[#696687] mb-6 leading-relaxed">{{ trans:messages.explainer_wifi_desc }}</p>
                <a href="{{ locale_path }}/wifi-authorization" class="btn-primary inline-block px-8 py-3 rounded-md text-sm">{{ trans:messages.learn_more }}</a>
            </div>
        </div>
    </div>
</section>

{{# 8. Reputation Module — text LEFT, image RIGHT #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row-reverse items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/10/otelms-ste2.png" alt="Reputation Module" class="w-full max-w-lg mx-auto">
            </div>
            <div class="md:w-1/2" data-aos="fade-right">
                <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.explainer_reputation_title }}</h2>
                <p class="text-[#696687] mb-6 leading-relaxed">{{ trans:messages.explainer_reputation_desc }}</p>
                <a href="{{ locale_path }}/reputation-module" class="btn-primary inline-block px-8 py-3 rounded-md text-sm">{{ trans:messages.learn_more }}</a>
            </div>
        </div>
    </div>
</section>



{{# Section A: Wave CTA (centered) — wave bg image on white #}}
<section class="hero-fullscreen relative overflow-hidden" style="background-image: url('/assets/articles/uploads/2021/09/content_wave-bg1-2.png'); background-position: center top; background-repeat: no-repeat; background-color: #ffffff; background-size: cover;">
    <div class="relative z-10 px-6 lg:px-[90px] pt-44 pb-24">
        <div class="max-w-3xl mx-auto text-center" data-aos="fade-up">
            <h2 class="font-nunito text-[22px] font-bold mb-4 text-white leading-snug">{{ trans:messages.home_interested_title }}</h2>
            <p class="text-white/70 text-base leading-8 mb-8 max-w-2xl mx-auto">{{ trans:messages.home_interested_subtitle }}</p>
            <a href="{{ locale_path }}/registration"
               class="btn-glow inline-block px-8 py-3 text-sm font-bold uppercase tracking-wider rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow-lg">
                {{ trans:messages.home_try_free_trial }}
            </a>
        </div>
    </div>
</section>

{{# Section B: Stats / Counters (white bg) #}}
<section class="hero-fullscreen pt-16 pb-20" style="background-color: #f7f9fb; background: linear-gradient(to bottom, #f2f2f2 0%, rgba(242,242,242,0.01) 100%); opacity: 1;">
    <div class="max-w-7xl mx-auto px-6 lg:px-[90px]">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-12 text-center" data-aos="fade-up">
            <div>
                <img src="/assets/articles/uploads/2021/09/imgpsh_fullsize_anim-1.png" alt="{{ trans:messages.home_stat_customers }}" class="w-24 h-24 mx-auto mb-4 object-contain">
                <div class="counter-number text-[48px] leading-none mb-3" data-count="4000" data-separator="," data-suffix="">0</div>
                <div class="font-nunito text-[16px] leading-[32px] font-semibold text-[#717191] text-center">{{ trans:messages.home_stat_customers }}</div>
            </div>
            <div>
                <img src="/assets/articles/uploads/2021/09/imgpsh_fullsize_anim-2.png" alt="{{ trans:messages.home_stat_orientation }}" class="w-24 h-24 mx-auto mb-4 object-contain">
                <div class="counter-number text-[48px] leading-none mb-3" data-count="100" data-suffix=" %">0</div>
                <div class="font-nunito text-[16px] leading-[32px] font-semibold text-[#717191] text-center max-w-[210px] mx-auto">{{ trans:messages.home_stat_orientation }}</div>
            </div>
            <div>
                <img src="/assets/articles/uploads/2021/09/imgpsh_fullsize_anim.png" alt="{{ trans:messages.home_stat_transactions }}" class="w-24 h-24 mx-auto mb-4 object-contain">
                <div class="counter-number text-[48px] leading-none mb-3" data-count="200" data-suffix=" m">0</div>
                <div class="font-nunito text-[16px] leading-[32px] font-semibold text-[#717191] text-center">{{ trans:messages.home_stat_transactions }}</div>
            </div>
        </div>
    </div>
</section>

{{# Section C: Bottom Contact Bar — subtle grey, flows into footer wave #}}
<section class="hero-fullscreen relative py-20" style="background-image: url('/assets/articles/uploads/2021/09/testbg.png'); background-position: center bottom; background-repeat: no-repeat; background-color: transparent; background-size: cover;">
    <div class="max-w-6xl mx-auto px-6 lg:px-[90px] flex flex-col md:flex-row items-center justify-center gap-6 text-center">
            <h4 class="font-nunito text-[18px] font-bold text-[#565e81] leading-[34px] tracking-normal mr-6 mb-0">{{ trans:messages.home_interested_title }}</h4>
            <a href="{{ locale_path }}/registration"
               class="shrink-0 btn-primary inline-block px-8 py-3 rounded-md text-sm uppercase tracking-wider shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                {{ trans:messages.home_try_free_trial }}
            </a>
    </div>
</section>

{{# Additional Bard Content (if any) #}}
{{ if content }}
<section class="py-12">
    <div class="max-w-4xl mx-auto prose prose-lg" data-aos="fade-up">
        {{ content }}
    </div>
</section>
{{ /if }}