@extends('layouts.app')

@section('title', 'KONTIXX Agency - Le digital au service de vos ambitions')
@section('footer-tagline', 'Construisons ensemble votre présence digitale. Des solutions modernes, performantes et adaptées à vos objectifs.')

@section('content')
    {{-- HERO SECTION - EXACT MATCH WITH IMAGE --}}
    <section class="min-h-[90vh] flex items-center bg-white relative overflow-hidden pt-24 pb-20">
        {{-- DECORATIVE WAVY ELEMENTS - MATCHING IMAGE POSITIONS --}}
        {{-- TOP LEFT BLUE-GRAY WAVY ELEMENT --}}
        <div class="absolute top-0 left-0 w-[400px] h-[400px] opacity-25 pointer-events-none">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-300/30 via-gray-300/20 to-transparent rounded-full blur-[80px] transform -translate-x-1/3 -translate-y-1/3"></div>
        </div>
        
        {{-- BOTTOM RIGHT ORANGE-YELLOW WAVY ELEMENT WITH SPARKLES --}}
        <div class="absolute bottom-0 right-0 w-[450px] h-[450px] opacity-35 pointer-events-none">
            <div class="absolute inset-0 bg-gradient-to-tl from-orange-400/40 via-yellow-400/30 to-transparent rounded-full blur-[100px] transform translate-x-1/4 translate-y-1/4">
                {{-- SPARKLE EFFECTS --}}
                <div class="absolute top-[30%] left-[25%] w-2 h-2 bg-white rounded-full sparkle" style="animation-delay: 0s;"></div>
                <div class="absolute top-[40%] right-[30%] w-1.5 h-1.5 bg-white rounded-full sparkle" style="animation-delay: 0.5s;"></div>
                <div class="absolute bottom-[25%] left-[35%] w-1 h-1 bg-white rounded-full sparkle" style="animation-delay: 1s;"></div>
                <div class="absolute top-[50%] right-[20%] w-1.5 h-1.5 bg-white rounded-full sparkle" style="animation-delay: 1.5s;"></div>
                <div class="absolute bottom-[40%] left-[45%] w-1 h-1 bg-white rounded-full sparkle" style="animation-delay: 2s;"></div>
            </div>
        </div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">
            <div class="max-w-4xl">
                {{-- MAIN HEADLINE - EXACT TEXT FROM IMAGE --}}
                <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-10 leading-[1.1] tracking-tight">
                    Le digital au service<br>
                    de vos ambitions
                </h1>
                
                {{-- DESCRIPTION TEXT - EXACT TEXT FROM IMAGE --}}
                <p class="text-lg md:text-xl text-gray-600 mb-14 leading-relaxed max-w-3xl">
                    Chez KONTIXX Agency, nous créons des sites internet modernes, rapides et performants, conçus pour valoriser votre image, améliorer votre visibilité en ligne et transformer vos visiteurs en clients grâce à des stratégies digitales sur mesure.
                </p>
                
                {{-- CTA BUTTONS - EXACT STYLE FROM IMAGE --}}
                <div class="flex flex-col sm:flex-row gap-5 items-center">
                    {{-- PRIMARY BUTTON - ORANGE-YELLOW GRADIENT WITH GLOW --}}
                    <a href="{{ route('contact') }}" class="btn-cta-orange shine inline-flex items-center gap-3 group relative">
                        <span class="relative z-10 font-semibold text-base">Démarrer un projet</span>
                        <svg class="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                        </svg>
                    </a>
                    
                    {{-- SECONDARY BUTTON - DARK BLUE/NAVY --}}
                    <a href="{{ route('portfolio') }}" class="btn-secondary inline-flex items-center">
                        <span class="font-semibold text-base">Voir nos réalisations</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- SERVICES SECTION --}}
    <section id="services" class="section-padding bg-white relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal">
                <h2 class="heading-2 text-gray-900 mb-6">
                    Toutes les solutions essentielles pour créer, développer et faire prospérer votre présence digitale.
                </h2>
                <div class="decorative-line"></div>
                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mt-6">
                    Chez KONTIXX, nous proposons une offre complète de services digitaux, pensée pour accompagner votre entreprise à chaque étape de sa croissance en ligne.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {{-- CRÉATION DE SITE WEB --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-100">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-xl flex items-center justify-center mb-6 animate-float">
                        <svg class="w-9 h-9 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Création de site Web</h3>
                    <p class="text-gray-600 mb-6 text-base font-semibold text-kontixx-blue-dark">Votre site, votre meilleur commercial 24/7</p>
                    <ul class="space-y-3 text-sm text-gray-600">
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Design stratégique & expérience utilisateur</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Développement sur mesure & évolutif</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Performance web & visibilité SEO</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Sécurité digitale & accompagnement</span>
                        </li>
                    </ul>
                </div>

                {{-- BRANDING & IDENTITÉ VISUELLE --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-200">
                    <div class="w-16 h-16 bg-gradient-warm rounded-xl flex items-center justify-center mb-6 animate-float" style="animation-delay: 0.2s;">
                        <svg class="w-9 h-9 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Branding & Identité Visuelle</h3>
                    <p class="text-gray-600 mb-6 text-base font-semibold text-kontixx-brown">Une marque forte, cohérente et mémorable</p>
                    <ul class="space-y-3 text-sm text-gray-600">
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-brown mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Image de marque & impact visuel</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-brown mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Identité cohérente & mémorable</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-brown mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Création graphique & positionnement</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-brown mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Supports visuels & cohérence digitale</span>
                        </li>
                    </ul>
                </div>

                {{-- MARKETING DIGITAL --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-300">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-xl flex items-center justify-center mb-6 animate-float" style="animation-delay: 0.4s;">
                        <svg class="w-9 h-9 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Marketing Digital</h3>
                    <p class="text-gray-600 mb-6 text-base font-semibold text-kontixx-blue-dark">Attirez plus de clients et augmentez vos résultats</p>
                    <ul class="space-y-3 text-sm text-gray-600">
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Stratégie digitale & croissance</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Visibilité en ligne & acquisition</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Conversion & performance marketing</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Analyse des données & optimisation</span>
                        </li>
                    </ul>
                </div>

                {{-- COMMUNITY MANAGEMENT --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-400">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-xl flex items-center justify-center mb-6 animate-float" style="animation-delay: 0.6s;">
                        <svg class="w-9 h-9 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Community Management</h3>
                    <p class="text-gray-600 mb-6 text-base font-semibold text-kontixx-blue-dark">Construisez une communauté engagée autour de votre marque</p>
                    <ul class="space-y-3 text-sm text-gray-600">
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Présence sociale & engagement</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Contenus créatifs & cohérents</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Animation & interaction communautaire</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Notoriété & fidélisation</span>
                        </li>
                    </ul>
                </div>

                {{-- ACCOMPAGNEMENT DIGITAL --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-400">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-xl flex items-center justify-center mb-6 animate-float" style="animation-delay: 0.8s;">
                        <svg class="w-9 h-9 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Accompagnement Digital</h3>
                    <p class="text-gray-600 mb-6 text-base font-semibold text-kontixx-blue-dark">Un partenaire stratégique pour votre croissance digitale</p>
                    <ul class="space-y-3 text-sm text-gray-600">
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Vision stratégique & conseil</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Audit digital & recommandations</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Pilotage de projets & suivi</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Formation & montée en compétences</span>
                        </li>
                    </ul>
                </div>

                {{-- MAINTENANCE & SUPPORT --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-500">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-xl flex items-center justify-center mb-6 animate-float" style="animation-delay: 1s;">
                        <svg class="w-9 h-9 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Maintenance & Support</h3>
                    <p class="text-gray-600 mb-6 text-base font-semibold text-kontixx-blue-dark">Sécurité, stabilité et sérénité digitale</p>
                    <ul class="space-y-3 text-sm text-gray-600">
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Stabilité & sécurité digitale</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Maintenance continue & mises à jour</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Support technique & assistance</span>
                        </li>
                        <li class="flex items-start group/item">
                            <svg class="w-5 h-5 text-kontixx-blue mr-3 flex-shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Performance durable & évolution</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {{-- POURQUOI NOUS CHOISIR SECTION --}}
    <section class="section-padding bg-white relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal">
                <h2 class="heading-2 text-gray-900 mb-6">Pourquoi nous choisir ?</h2>
                <div class="decorative-line"></div>
                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mt-6">
                    Chez KONTIXX, nous combinons expertise, créativité et performance pour transformer vos idées en résultats concrets.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="card-hover bg-gradient-to-br from-blue-50 to-white p-8 rounded-2xl reveal animate-delay-100">
                    <div class="flex items-start space-x-4">
                        <div class="w-14 h-14 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 animate-pulse-glow">
                            <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-900 mb-3 text-xl">Expertise & Qualité</h3>
                            <p class="text-gray-600 leading-relaxed">Nous créons des sites web performants et esthétiques, conçus pour offrir une expérience utilisateur fluide et maximiser vos conversions.</p>
                        </div>
                    </div>
                </div>

                <div class="card-hover bg-gradient-to-br from-amber-50/50 to-white p-8 rounded-2xl reveal animate-delay-200 border border-amber-200/50">
                    <div class="flex items-start space-x-4">
                        <div class="w-14 h-14 bg-gradient-brown rounded-xl flex items-center justify-center flex-shrink-0 animate-pulse-glow" style="animation-delay: 0.2s; box-shadow: 0 4px 15px rgba(139, 111, 71, 0.3);">
                            <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-900 mb-3 text-xl">Solutions 100% Sur-Mesure</h3>
                            <p class="text-gray-600 leading-relaxed">Chaque site est personnalisé selon vos besoins, votre identité et vos objectifs, pour un rendu unique et véritablement adapté à votre entreprise.</p>
                        </div>
                    </div>
                </div>

                <div class="card-hover bg-gradient-to-br from-blue-50 to-white p-8 rounded-2xl reveal animate-delay-300">
                    <div class="flex items-start space-x-4">
                        <div class="w-14 h-14 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 animate-pulse-glow" style="animation-delay: 0.4s;">
                            <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-900 mb-3 text-xl">Rapidité & Performance</h3>
                            <p class="text-gray-600 leading-relaxed">Grâce à notre processus optimisé, vous obtenez un site moderne, rapide, sécurisé et prêt à attirer vos premiers clients.</p>
                        </div>
                    </div>
                </div>

                <div class="card-hover bg-gradient-to-br from-blue-50/50 to-white p-8 rounded-2xl reveal animate-delay-400 border border-blue-200/50">
                    <div class="flex items-start space-x-4">
                        <div class="w-14 h-14 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 animate-pulse-glow" style="animation-delay: 0.6s;">
                            <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-900 mb-3 text-xl">Accompagnement & Transparence</h3>
                            <p class="text-gray-600 leading-relaxed">Un accompagnement de bout en bout, un suivi précis et une stratégie claire pour transformer votre présence digitale en succès durable.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- PROCESSUS DE TRAVAIL SECTION --}}
    <section id="processus" class="section-padding bg-white relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal">
                <h2 class="heading-2 text-gray-900 mb-6">Processus de travail</h2>
                <div class="decorative-line"></div>
                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mt-6">
                    Une méthode claire, efficace et orientée résultats.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 lg:gap-4">
                {{-- ÉTAPE 1 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-100 text-center">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-xl flex items-center justify-center mx-auto mb-4 animate-float">
                        <span class="text-2xl font-bold text-white">1</span>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Analyse du besoin</h3>
                    <p class="text-gray-600 text-sm leading-relaxed">Nous prenons le temps de comprendre votre activité, vos objectifs et vos enjeux afin de bâtir une solution parfaitement adaptée à votre projet.</p>
                </div>

                {{-- ÉTAPE 2 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-200 text-center">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-xl flex items-center justify-center mx-auto mb-4 animate-float" style="animation-delay: 0.2s;">
                        <span class="text-2xl font-bold text-white">2</span>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Conception & Maquettes</h3>
                    <p class="text-gray-600 text-sm leading-relaxed">Nous imaginons une expérience utilisateur fluide et un design stratégique qui valorisent votre marque et séduisent vos clients.</p>
                </div>

                {{-- ÉTAPE 3 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-300 text-center">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-xl flex items-center justify-center mx-auto mb-4 animate-float" style="animation-delay: 0.4s;">
                        <span class="text-2xl font-bold text-white">3</span>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Développement</h3>
                    <p class="text-gray-600 text-sm leading-relaxed">Nous transformons les maquettes en une solution digitale performante, rapide, sécurisée et évolutive.</p>
                </div>

                {{-- ÉTAPE 4 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-400 text-center">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-xl flex items-center justify-center mx-auto mb-4 animate-float" style="animation-delay: 0.6s;">
                        <span class="text-2xl font-bold text-white">4</span>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Tests & Validation</h3>
                    <p class="text-gray-600 text-sm leading-relaxed">Chaque détail est vérifié avec rigueur pour garantir qualité, fiabilité et performance avant la mise en ligne.</p>
                </div>

                {{-- ÉTAPE 5 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-500 text-center">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-xl flex items-center justify-center mx-auto mb-4 animate-float" style="animation-delay: 0.8s;">
                        <span class="text-2xl font-bold text-white">5</span>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Livraison + Support</h3>
                    <p class="text-gray-600 text-sm leading-relaxed">Nous assurons la mise en ligne, la prise en main et un accompagnement continu pour garantir le succès durable de votre projet.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- FORFAITS / TARIFS SECTION --}}
    <section id="tarifs" class="section-padding bg-gray-50 relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal">
                <h2 class="heading-2 text-gray-900 mb-6">Forfaits / Tarifs</h2>
                <div class="decorative-line"></div>
                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mt-6">
                    Nos Forfaits – Création de Site Internet
                </p>
            </div>

            {{-- FORFAITS PRINCIPAUX --}}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
                {{-- FORFAIT ESSENTIEL --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-100 border-2 border-gray-200 hover:border-kontixx-blue transition-all">
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">ESSENTIEL</h3>
                        <p class="text-sm text-gray-600 mb-4">Site Vitrine</p>
                        <p class="text-xs text-gray-500 italic">Idéal pour démarrer votre présence en ligne</p>
                    </div>
                    <div class="mb-6">
                        <div class="text-4xl font-bold text-kontixx-blue mb-2">150 €</div>
                        <p class="text-sm text-gray-500">À partir de</p>
                    </div>
                    <ul class="space-y-3 text-sm text-gray-600 mb-6">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Site vitrine jusqu'à 5 pages</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Design moderne et 100% responsive</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Contenu de base optimisé SEO</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Formulaire de contact</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Intégration des réseaux sociaux</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Sécurité de base (HTTPS)</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Mise en ligne du site</span>
                        </li>
                    </ul>
                </div>

                {{-- FORFAIT PROFESSIONNEL --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-200 border-2 border-kontixx-blue hover:border-kontixx-orange transition-all relative">
                    <div class="absolute top-4 right-4 bg-gradient-kontixx text-white text-xs font-bold px-3 py-1 rounded-full">Populaire</div>
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">PROFESSIONNEL</h3>
                        <p class="text-sm text-gray-600 mb-4">Site Internet Avancé</p>
                        <p class="text-xs text-gray-500 italic">Pour développer votre visibilité et générer des contacts</p>
                    </div>
                    <div class="mb-6">
                        <div class="text-4xl font-bold text-kontixx-blue mb-2">320 €</div>
                        <p class="text-sm text-gray-500">À partir de</p>
                    </div>
                    <ul class="space-y-3 text-sm text-gray-600 mb-6">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Site internet jusqu'à 10 pages</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Design 100% personnalisé</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Optimisation SEO avancée</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Structure optimisée pour Google</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Formulaire de contact + demande de devis</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Galerie / Portfolio</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Site rapide, sécurisé et performant</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Formation à la gestion du site</span>
                        </li>
                    </ul>
                </div>

                {{-- FORFAIT BUSINESS --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-300 border-2 border-gray-200 hover:border-kontixx-blue transition-all">
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">BUSINESS</h3>
                        <p class="text-sm text-gray-600 mb-4">Site E-commerce</p>
                        <p class="text-xs text-gray-500 italic">Pour vendre vos produits en ligne 24h/24</p>
                    </div>
                    <div class="mb-6">
                        <div class="text-4xl font-bold text-kontixx-blue mb-2">600 €</div>
                        <p class="text-sm text-gray-500">À partir de</p>
                    </div>
                    <ul class="space-y-3 text-sm text-gray-600 mb-6">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Boutique en ligne complète</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Jusqu'à 50 produits</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Design professionnel sur mesure</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Pages produits optimisées SEO</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Panier & paiement sécurisé</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Gestion des commandes & stocks</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Emails automatiques (commande, confirmation)</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Formation à l'utilisation e-commerce</span>
                        </li>
                    </ul>
                </div>

                {{-- FORFAIT PREMIUM --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-400 border-2 border-kontixx-orange hover:border-kontixx-blue transition-all relative">
                    <div class="absolute top-4 right-4 bg-gradient-to-r from-kontixx-orange to-kontixx-blue text-white text-xs font-bold px-3 py-1 rounded-full">Premium</div>
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">PREMIUM</h3>
                        <p class="text-sm text-gray-600 mb-4">Solution Digitale Complète</p>
                        <p class="text-xs text-gray-500 italic">Pour les entreprises ambitieuses</p>
                    </div>
                    <div class="mb-6">
                        <div class="text-4xl font-bold text-kontixx-blue mb-2">1 000 €</div>
                        <p class="text-sm text-gray-500">À partir de</p>
                    </div>
                    <ul class="space-y-3 text-sm text-gray-600 mb-6">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Site sur mesure (vitrine ou e-commerce)</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Pages illimitées</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>SEO avancé + stratégie de contenu</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Optimisation vitesse & sécurité (Core Web Vitals)</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Intégration d'outils marketing & tracking</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Support & maintenance 3 mois inclus</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Accompagnement personnalisé & conseils stratégiques</span>
                        </li>
                    </ul>
                </div>
            </div>

            {{-- OPTIONS SUPPLÉMENTAIRES --}}
            <div class="bg-white p-8 rounded-2xl reveal animate-delay-500 mb-8">
                <h3 class="text-2xl font-bold text-gray-900 mb-6 text-center">Options supplémentaires</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Nom de domaine & hébergement</span>
                        <span class="font-bold text-kontixx-blue">60 € / an</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Maintenance mensuelle</span>
                        <span class="font-bold text-kontixx-blue">40 € / mois</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Référencement SEO mensuel</span>
                        <span class="font-bold text-kontixx-blue">120 € / mois</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Rédaction de contenu SEO</span>
                        <span class="font-bold text-kontixx-blue">30 € / page</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Refonte de site existant</span>
                        <span class="font-bold text-kontixx-blue">250 €</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Site multilingue</span>
                        <span class="font-bold text-kontixx-blue">150 €</span>
                    </div>
                </div>
            </div>

            {{-- OFFRES RÉCURRENTES --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                {{-- MAINTENANCE & SUPPORT --}}
                <div class="bg-white p-6 rounded-2xl">
                    <h4 class="font-bold text-gray-900 mb-4 text-lg flex items-center">
                        <span class="mr-2">🛠</span>
                        Maintenance & Support
                    </h4>
                    <ul class="space-y-2 text-sm">
                        <li class="flex justify-between">
                            <span class="text-gray-600">Basique</span>
                            <span class="font-bold text-kontixx-blue">35 € / mois</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">Avancée</span>
                            <span class="font-bold text-kontixx-blue">60 € / mois</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">Premium</span>
                            <span class="font-bold text-kontixx-blue">100 € / mois</span>
                        </li>
                    </ul>
                </div>

                {{-- SEO & VISIBILITÉ --}}
                <div class="bg-white p-6 rounded-2xl">
                    <h4 class="font-bold text-gray-900 mb-4 text-lg flex items-center">
                        <span class="mr-2">📈</span>
                        SEO & Visibilité Mensuelle
                    </h4>
                    <ul class="space-y-2 text-sm">
                        <li class="flex justify-between">
                            <span class="text-gray-600">SEO Local</span>
                            <span class="font-bold text-kontixx-blue">100 € / mois</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">SEO Avancé</span>
                            <span class="font-bold text-kontixx-blue">180 € / mois</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">SEO + Contenu</span>
                            <span class="font-bold text-kontixx-blue">250 € / mois</span>
                        </li>
                    </ul>
                </div>

                {{-- COMMUNITY MANAGEMENT --}}
                <div class="bg-white p-6 rounded-2xl">
                    <h4 class="font-bold text-gray-900 mb-4 text-lg flex items-center">
                        <span class="mr-2">💬</span>
                        Community Management
                    </h4>
                    <ul class="space-y-2 text-sm">
                        <li class="flex justify-between">
                            <span class="text-gray-600">Starter</span>
                            <span class="font-bold text-kontixx-blue">120 € / mois</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">Business</span>
                            <span class="font-bold text-kontixx-blue">200 € / mois</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">Premium</span>
                            <span class="font-bold text-kontixx-blue">300 € / mois</span>
                        </li>
                    </ul>
                </div>
            </div>

            {{-- MESSAGE FINAL --}}
            <div class="text-center reveal animate-delay-600">
                <p class="text-gray-600 mb-6 max-w-3xl mx-auto">
                    Chez KONTIXX, chaque forfait est pensé pour évoluer avec votre activité et générer des résultats concrets sur le long terme.
                </p>
                <div class="bg-gradient-to-r from-kontixx-blue/10 to-kontixx-orange/10 p-6 rounded-2xl mb-6">
                    <p class="text-lg font-semibold text-gray-900 mb-4">📞 Besoin d'un forfait sur mesure ?</p>
                    <p class="text-gray-700 mb-4">Contactez-nous pour un devis gratuit et une solution adaptée à votre budget et à vos objectifs.</p>
                    <a href="{{ route('contact') }}" class="btn-cta-blue-gradient inline-flex items-center gap-2">
                        <span>👉 Demander un devis</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- FAQ SECTION --}}
    <section id="faq" class="section-padding bg-white relative overflow-hidden">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal">
                <h2 class="heading-2 text-gray-900 mb-6">FAQ</h2>
                <div class="decorative-line"></div>
                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mt-6">
                    Questions fréquemment posées
                </p>
            </div>

            <div class="space-y-4">
                {{-- QUESTION 1 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-100 border border-gray-200">
                    <div class="flex items-start">
                        <span class="text-2xl mr-4 flex-shrink-0">⏱️</span>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-900 mb-2 text-lg">Quel est le délai pour créer un site web ?</h3>
                            <p class="text-gray-600 leading-relaxed">Le délai varie selon la complexité du projet. Nous respectons des délais clairs tout en garantissant qualité, performance et fiabilité.</p>
                        </div>
                    </div>
                </div>

                {{-- QUESTION 2 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-200 border border-gray-200">
                    <div class="flex items-start">
                        <span class="text-2xl mr-4 flex-shrink-0">💳</span>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-900 mb-2 text-lg">Puis-je payer en plusieurs fois ?</h3>
                            <p class="text-gray-600 leading-relaxed">Oui. Nous proposons des modalités de paiement flexibles, adaptées à votre budget, afin de vous permettre de lancer votre projet sereinement, sans pression financière.</p>
                        </div>
                    </div>
                </div>

                {{-- QUESTION 3 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-300 border border-gray-200">
                    <div class="flex items-start">
                        <span class="text-2xl mr-4 flex-shrink-0">🛠️</span>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-900 mb-2 text-lg">Proposez-vous la maintenance après la mise en ligne ?</h3>
                            <p class="text-gray-600 leading-relaxed">Absolument. Nous assurons la maintenance, la sécurité et le suivi technique de votre site selon le forfait choisi, pour garantir sa stabilité et ses performances dans le temps.</p>
                        </div>
                    </div>
                </div>

                {{-- QUESTION 4 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-400 border border-gray-200">
                    <div class="flex items-start">
                        <span class="text-2xl mr-4 flex-shrink-0">🔍</span>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-900 mb-2 text-lg">Mon site sera-t-il optimisé pour Google (SEO) ?</h3>
                            <p class="text-gray-600 leading-relaxed">Oui. Tous nos sites sont conçus avec une optimisation SEO intégrée dès la conception, afin d'améliorer votre visibilité et votre positionnement sur les moteurs de recherche.</p>
                        </div>
                    </div>
                </div>

                {{-- QUESTION 5 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-500 border border-gray-200">
                    <div class="flex items-start">
                        <span class="text-2xl mr-4 flex-shrink-0">🤝</span>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-900 mb-2 text-lg">Suis-je accompagné après la livraison du site ?</h3>
                            <p class="text-gray-600 leading-relaxed">Oui. Chez KONTIXX, nous assurons un accompagnement continu, avec conseils, support et assistance, pour vous aider à faire évoluer votre site et atteindre vos objectifs.</p>
                        </div>
                    </div>
                </div>

                {{-- QUESTION 6 --}}
                <div class="card-hover bg-white p-6 rounded-2xl reveal animate-delay-600 border border-gray-200">
                    <div class="flex items-start">
                        <span class="text-2xl mr-4 flex-shrink-0">📞</span>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-900 mb-2 text-lg">Puis-je demander un devis gratuit ?</h3>
                            <p class="text-gray-600 leading-relaxed">Bien sûr. Le devis est 100 % gratuit et sans engagement. Il vous permet de comprendre clairement les étapes, les délais et les coûts de votre projet.</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- CTA FAQ --}}
            <div class="text-center mt-12 reveal animate-delay-700">
                <div class="bg-gradient-to-r from-kontixx-blue/10 to-kontixx-orange/10 p-8 rounded-2xl">
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Contactez-nous</h3>
                    <p class="text-gray-700 mb-6 max-w-2xl mx-auto">
                        Vous avez un projet de site internet ? Contactez-nous dès maintenant pour bénéficier d'un accompagnement personnalisé, de conseils stratégiques et d'un devis gratuit, sans engagement.
                    </p>
                    <a href="{{ route('contact') }}" class="btn-cta-blue-gradient inline-flex items-center gap-2">
                        <span>Demander un devis</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- TÉMOIGNAGES SECTION --}}
    <section class="section-padding bg-gray-50 relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal">
                <h2 class="heading-2 text-gray-900 mb-6">Témoignages</h2>
                <div class="decorative-line"></div>
                <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto mt-6">
                    Des collaborations réussies, des retours clients authentiques.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-100">
                    <div class="mb-6">
                        <svg class="w-10 h-10 text-kontixx-blue" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
                        </svg>
                    </div>
                    <p class="text-gray-600 mb-6 italic text-base leading-relaxed">« KONTIXX a parfaitement compris nos besoins. Le site livré est moderne, rapide et vraiment professionnel. L'accompagnement a été clair du début à la fin. »</p>
                    <p class="font-bold text-gray-900 text-lg">— Jean R., Fondateur</p>
                    <p class="text-sm text-gray-500 mt-1">JR Consulting</p>
                </div>

                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-200">
                    <div class="mb-6">
                        <svg class="w-10 h-10 text-kontixx-blue" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
                        </svg>
                    </div>
                    <p class="text-gray-600 mb-6 italic text-base leading-relaxed">« Grâce à KONTIXX, notre visibilité en ligne a nettement progressé. Leur approche stratégique et leur suivi continu font toute la différence. »</p>
                    <p class="font-bold text-gray-900 text-lg">— Marc A., Entrepreneur</p>
                    <p class="text-sm text-gray-500 mt-1">Alpha Solutions</p>
                </div>

                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-300">
                    <div class="mb-6">
                        <svg class="w-10 h-10 text-kontixx-blue" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
                        </svg>
                    </div>
                    <p class="text-gray-600 mb-6 italic text-base leading-relaxed">« Une équipe réactive et à l'écoute. Le branding et l'identité visuelle réalisés par KONTIXX ont clairement renforcé l'image de notre marque. »</p>
                    <p class="font-bold text-gray-900 text-lg">— Sophie M., Responsable Marketing</p>
                    <p class="text-sm text-gray-500 mt-1">Nova Group</p>
                </div>
            </div>
        </div>
    </section>

    {{-- CTA FINAL PREMIUM - STYLE ÉLÉGANT ET SIMPLE --}}
    <section class="section-padding relative overflow-hidden bg-gradient-to-br from-gray-50 via-white to-blue-50/30 cta-final-section">
        {{-- LIGNE DÉCORATIVE EN HAUT --}}
        <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-200/50 to-transparent"></div>
        
        {{-- ÉLÉMENTS DÉCORATIFS SUBTILS --}}
        <div class="absolute top-0 right-0 w-96 h-96 bg-blue-100/20 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 left-0 w-96 h-96 bg-orange-100/20 rounded-full blur-3xl"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10 py-20">
            <div class="animate-fade-in-up-premium">
                {{-- TITRE AVEC GRADIENT ÉLÉGANT --}}
                <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                    <span class="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
                        Prêt à donner vie à votre projet ?
                    </span>
                </h2>
                {{-- SOUS-TEXTE ÉLÉGANT --}}
                <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto leading-relaxed font-medium text-gray-600 cta-subtitle">
                    Transformons ensemble vos idées en solutions digitales performantes
                </p>
                {{-- BOUTON CTA PREMIUM --}}
                <a href="{{ route('contact') }}" class="btn-premium group relative inline-flex items-center gap-3 transform hover:scale-105 hover:-translate-y-1" style="border-radius: 999px; padding: 16px 32px;">
                    <span class="relative z-10">Parlons de votre projet</span>
                    <svg class="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    {{-- JAVASCRIPT POUR LES ANIMATIONS AU SCROLL --}}
    <script>
        // Animation au scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.reveal').forEach(el => {
            observer.observe(el);
        });
    </script>
@endsection