{{# Solution Page Template #}}

{{# Hero with parallax #}}
<section class="relative hero-section overflow-hidden" style="background: url('/assets/articles/uploads/2021/09/pic_paralax_2.jpg') center/cover no-repeat fixed;">
    <div class="absolute inset-0 bg-[#3b3663]/35"></div>
    <div class="hero-dots relative z-10 px-6 lg:px-[90px] pt-32 md:pt-36 pb-16 md:pb-20">
        <div class="max-w-4xl mx-auto text-center text-white">
            <h1 class="font-nunito text-3xl md:text-4xl lg:text-5xl font-bold mb-4" data-aos="fade-down">{{ hero_title ?? title }}</h1>
            {{ if hero_subtitle }}
            <p class="text-lg text-white/80 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="150">{{ hero_subtitle }}</p>
            {{ /if }}
            {{ if hero_cta_text }}
            <a href="{{ if hero_cta_url }}{{ hero_cta_url }}{{ else }}{{ locale_path }}/registration{{ /if }}"
               class="btn-glow inline-block mt-8 px-8 py-3 font-bold rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow-lg"
               data-aos="fade-up" data-aos-delay="300">
                {{ hero_cta_text }}
            </a>
            {{ /if }}
        </div>
    </div>
</section>

{{# Features Grid — service cards with purple hover #}}
{{ if features }}
<section class="py-14">
    <div class="max-w-6xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {{ features }}
            <div class="card-service bg-[#fefeff] rounded-xl shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] p-7"
                 data-aos="fade-up" data-aos-delay="{{ index | multiply:100 }}">
                {{ if icon }}
                <div class="icon-hover w-14 h-14 rounded-xl bg-[#3b3663]/10 flex items-center justify-center mb-4">
                    <i class="{{ icon }} text-xl text-[#3b3663]"></i>
                </div>
                {{ /if }}
                <h3 class="font-nunito text-lg font-bold text-[#252a3f] mb-2">{{ feature_title }}</h3>
                <p class="text-sm text-[#696687] leading-relaxed">{{ feature_description }}</p>
            </div>
            {{ /features }}
        </div>
    </div>
</section>
{{ /if }}

{{# Main Content #}}
{{ if content }}
<section class="py-8">
    <div class="max-w-4xl mx-auto prose prose-lg" data-aos="fade-up">
        {{ content }}
    </div>
</section>
{{ /if }}

{{# CTA #}}
<section class="py-14 full-bleed bg-[#f9f8ff]" data-aos="fade-up">
    <div class="max-w-3xl mx-auto text-center">
        <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.solution_cta_title }}</h2>
        <p class="text-[#696687] mb-6">{{ trans:messages.solution_cta_subtitle }}</p>
        <a href="{{ locale_path }}/registration"
           class="btn-glow inline-block px-8 py-3 font-bold rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow">
            {{ trans:messages.nav_free_trial }}
        </a>
    </div>
</section>