<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Agentidicommercio - Your Comprehensive Insurance Partner for Every Stage of Life</title>

    <script src="https://cdn.tailwindcss.com"></script>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <style>
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .gradient-text {
            background: linear-gradient(135deg, var(--tw-gradient-from), var(--tw-gradient-to));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .glass-effect {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .hover-lift:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .animate-float {
            animation: float 6s ease-in-out infinite;
        }

        .pattern-dots {
            background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        .section-divider {
            position: relative;
            overflow: hidden;
        }

        .section-divider::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -10%;
            width: 120%;
            height: 200%;
            background: linear-gradient(135deg, transparent 45%, rgba(255,255,255,0.03) 50%, transparent 55%);
            transform: rotate(-5deg);
        }
    </style>
    <link rel="stylesheet" href="assets/css/dynamic.css">
</head>
<body class="antialiased">

<nav class="bg-white/80 backdrop-blur-lg border-b-2 border-purple-200 fixed w-full z-50 top-0 shadow-lg">
    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
        <a href="./" class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center">
                <span class="text-white font-bold text-xl">A</span>
            </div>
            <span class="self-center text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 gradient-text">
                Agentidicommercio            </span>
        </a>
        <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 17 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
            </svg>
        </button>
        <div class="hidden w-full md:block md:w-auto" id="navbar-default">
            <ul class="font-semibold flex flex-col md:flex-row md:space-x-8">
                <li><a href="#services" class="block py-2 px-3 text-gray-700 hover:text-purple-600 transition-colors">Services</a></li>
                <li><a href="#features" class="block py-2 px-3 text-gray-700 hover:text-purple-600 transition-colors">Features</a></li>
                <li><a href="#about" class="block py-2 px-3 text-gray-700 hover:text-purple-600 transition-colors">About</a></li>
                <li><a href="#testimonials" class="block py-2 px-3 text-gray-700 hover:text-purple-600 transition-colors">Testimonials</a></li>
                <li>
                    <a href="#contact" class="block py-2.5 px-6 text-white bg-purple-600 rounded-full hover:bg-purple-700 transition-all shadow-md font-semibold">
                        Contact
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<section class="mt-16 bg-white overflow-hidden">
    <div class="max-w-screen-xl mx-auto px-4 py-20 lg:py-28">
        <div class="grid lg:grid-cols-5 gap-12 items-center">
            <div class="lg:col-span-3 order-2 lg:order-1">
                <div class="relative">
                    <div class="grid grid-cols-2 gap-4">
                        <img src="https://images.pexels.com/photos/7469426/pexels-photo-7469426.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Main" class="rounded-2xl shadow-xl col-span-2">
                        <img src="https://images.pexels.com/photos/1595392/pexels-photo-1595392.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Detail" class="rounded-2xl shadow-lg">
                        <img src="https://images.pexels.com/photos/5668511/pexels-photo-5668511.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Detail" class="rounded-2xl shadow-lg">
                    </div>
                    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gradient-to-br from-purple-600 to-pink-600 rounded-2xl -z-10"></div>
                </div>
            </div>
            
            <div class="lg:col-span-2 order-1 lg:order-2">
                <span class="text-purple-600 font-bold text-sm uppercase tracking-wider">Made-to-Order Insurance</span>
                <h1 class="mt-4 text-5xl font-extrabold text-gray-900 mb-6">
                    Your Comprehensive Insurance Partner for Every Stage of Life                </h1>
                <p class="text-lg text-gray-600 mb-8">
                    Protecting Your World, One Policy at a Time: Comprehensive Insurance Solutions for Your Life                </p>
                <a href="#contact" class="inline-flex items-center px-8 py-4 bg-purple-600 text-white font-semibold rounded-lg hover:bg-purple-700 transition-all">
                    Reveal Your Best Self                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>
</section>


<section class="bg-gradient-to-r from-purple-600 to-pink-600 py-20">
    <div class="max-w-screen-xl mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-8">
                        <div class="text-center text-white">
                <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-users text-2xl"></i>
                </div>
                <div class="text-5xl font-black mb-2">10K+</div>
                <div class="text-white/80 text-sm uppercase tracking-wider">Active Users</div>
            </div>
                        <div class="text-center text-white">
                <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-server text-2xl"></i>
                </div>
                <div class="text-5xl font-black mb-2">99.9%</div>
                <div class="text-white/80 text-sm uppercase tracking-wider">Uptime</div>
            </div>
                        <div class="text-center text-white">
                <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-chart-line text-2xl"></i>
                </div>
                <div class="text-5xl font-black mb-2">$5M+</div>
                <div class="text-white/80 text-sm uppercase tracking-wider">Revenue</div>
            </div>
                        <div class="text-center text-white">
                <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-globe text-2xl"></i>
                </div>
                <div class="text-5xl font-black mb-2">50+</div>
                <div class="text-white/80 text-sm uppercase tracking-wider">Countries</div>
            </div>
                    </div>
    </div>
</section>

<section class="relative bg-gray-900 py-20 overflow-hidden" id="services">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-pink-900/20"></div>
    
    <div class="max-w-screen-xl mx-auto px-4 relative z-10">
        <div class="text-center mb-16">
            <span class="inline-block px-4 py-2 bg-white/10 text-white rounded-full text-sm font-semibold mb-4">Services</span>
            <h2 class="text-5xl font-extrabold text-white mb-4">Experience Beauty Like Never Before with Our Services</h2>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">Professional solutions for every need</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-6">
                        <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-all">
                <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-shield-alt text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">Travel Insurance</h3>
                <p class="text-gray-300 leading-relaxed">Travel with confidence knowing you are protected against unexpected events. Our travel insurance plans provide comprehensive coverage for medical emergencies, trip cancellations, and more.</p>
            </div>
                        <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-all">
                <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-umbrella text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">Flood Insurance</h3>
                <p class="text-gray-300 leading-relaxed">Protect your home and belongings from flood damage with our comprehensive flood insurance coverage. We offer customized solutions to fit your needs and budget.</p>
            </div>
                        <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-all">
                <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-home text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">Boat Insurance</h3>
                <p class="text-gray-300 leading-relaxed">Set sail with peace of mind knowing you are covered by our boat insurance plans. We offer customizable coverage for everything from liability to physical damage.</p>
            </div>
                        <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-all">
                <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-car text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">Pet Insurance</h3>
                <p class="text-gray-300 leading-relaxed">Your furry friend is part of your family. Keep them healthy and protected with our pet insurance plans, covering everything from routine check-ups to unexpected accidents and illnesses.</p>
            </div>
                        <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-all">
                <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-user-shield text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">Business Insurance</h3>
                <p class="text-gray-300 leading-relaxed">Protect your business from unforeseen events with our customizable insurance solutions. We offer a range of commercial insurance products to safeguard your business, employees, and assets.</p>
            </div>
                        <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-all">
                <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-file-contract text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">Home Insurance</h3>
                <p class="text-gray-300 leading-relaxed">Your home is more than just a structure – it's where memories are made. Ensure it remains safe and protected with our customizable home insurance policies, designed to fit your unique needs.</p>
            </div>
                    </div>
    </div>
</section>

<section class="bg-gradient-to-b from-white to-gray-100 py-20" id="testimonials">
    <div class="max-w-screen-xl mx-auto px-4">
        <h2 class="text-5xl font-black text-center text-gray-900 mb-20">Client Feedback</h2>
        
        <div class="relative">
            <div class="absolute top-1/2 left-0 right-0 h-1 bg-purple-200 transform -translate-y-1/2 hidden lg:block"></div>
            
            <div class="grid md:grid-cols-3 gap-12 relative z-10">
                                <div class="relative">
                    <div class="w-16 h-16 bg-purple-600 rounded-full mx-auto mb-6 flex items-center justify-center text-white font-bold text-2xl">
                        MP                    </div>
                    
                    <div class="bg-white rounded-2xl p-8 shadow-xl">
                        <div class="flex justify-center mb-4">
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                    </div>
                        
                        <p class="text-gray-700 mb-6 text-center leading-relaxed">
                            "Quote generation is now instant. I can serve more clients with better accuracy and zero delays."
                        </p>
                        
                        <div class="text-center border-t pt-4">
                            <div class="font-bold text-gray-900">Margaret Phillips</div>
                            <div class="text-sm text-gray-600">Senior Agent</div>
                            <div class="text-xs text-purple-600 mt-1">Trustworthy Insurance</div>
                        </div>
                    </div>
                </div>
                                <div class="relative">
                    <div class="w-16 h-16 bg-purple-600 rounded-full mx-auto mb-6 flex items-center justify-center text-white font-bold text-2xl">
                        RT                    </div>
                    
                    <div class="bg-white rounded-2xl p-8 shadow-xl">
                        <div class="flex justify-center mb-4">
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                    </div>
                        
                        <p class="text-gray-700 mb-6 text-center leading-relaxed">
                            "Regulatory compliance became straightforward. Their expertise in insurance regulations is outstanding."
                        </p>
                        
                        <div class="text-center border-t pt-4">
                            <div class="font-bold text-gray-900">Robert Turner</div>
                            <div class="text-sm text-gray-600">VP of Operations</div>
                            <div class="text-xs text-purple-600 mt-1">Shield Insurance Group</div>
                        </div>
                    </div>
                </div>
                                <div class="relative">
                    <div class="w-16 h-16 bg-purple-600 rounded-full mx-auto mb-6 flex items-center justify-center text-white font-bold text-2xl">
                        WH                    </div>
                    
                    <div class="bg-white rounded-2xl p-8 shadow-xl">
                        <div class="flex justify-center mb-4">
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                                                    </div>
                        
                        <p class="text-gray-700 mb-6 text-center leading-relaxed">
                            "Claims processing time reduced by 70%. Clients are happier and our workload is more manageable."
                        </p>
                        
                        <div class="text-center border-t pt-4">
                            <div class="font-bold text-gray-900">William Harrison</div>
                            <div class="text-sm text-gray-600">Insurance Broker</div>
                            <div class="text-xs text-purple-600 mt-1">Premier Protection Group</div>
                        </div>
                    </div>
                </div>
                            </div>
        </div>
    </div>
</section>


<section class="relative py-24 bg-white overflow-hidden" id="features">
    <div class="max-w-screen-xl mx-auto px-4 relative z-10">
        <div class="text-center mb-16">
            <div class="inline-block px-4 py-2 bg-purple-50 border-2 border-purple-200 text-purple-700 rounded-lg text-sm font-bold mb-6">
                Features
            </div>
            <h2 class="text-5xl md:text-6xl font-black text-gray-900 mb-4">Why Choose Us</h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything you need to succeed, all in one place</p>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-50 to-white p-6 hover:shadow-2xl transition-all border border-gray-200">
                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-600 via-pink-600 to-purple-600"></div>
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
                        <i class="fas fa-rocket text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-black text-gray-900 mb-2">Fast Performance</h3>
                        <p class="text-gray-600 text-sm">Lightning-fast results</p>
                    </div>
                </div>
            </div>
                        <div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-50 to-white p-6 hover:shadow-2xl transition-all border border-gray-200">
                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-600 via-pink-600 to-purple-600"></div>
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
                        <i class="fas fa-shield-alt text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-black text-gray-900 mb-2">Secure & Safe</h3>
                        <p class="text-gray-600 text-sm">Your data protected</p>
                    </div>
                </div>
            </div>
                        <div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-50 to-white p-6 hover:shadow-2xl transition-all border border-gray-200">
                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-600 via-pink-600 to-purple-600"></div>
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
                        <i class="fas fa-headset text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-black text-gray-900 mb-2">24/7 Support</h3>
                        <p class="text-gray-600 text-sm">Always here to help</p>
                    </div>
                </div>
            </div>
                        <div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-50 to-white p-6 hover:shadow-2xl transition-all border border-gray-200">
                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-600 via-pink-600 to-purple-600"></div>
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
                        <i class="fas fa-chart-line text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-black text-gray-900 mb-2">Proven Results</h3>
                        <p class="text-gray-600 text-sm">Track your success</p>
                    </div>
                </div>
            </div>
                    </div>
    </div>
</section>


<section class="relative py-24 bg-gradient-to-br from-white via-gray-50 to-white overflow-hidden" id="about">
    <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-purple-50/30 to-transparent"></div>
    <div class="max-w-screen-xl mx-auto px-4 relative z-10">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            <div class="relative">
                <div class="relative z-10">
                    <img src="https://images.pexels.com/photos/1181715/pexels-photo-1181715.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="About" class="rounded-3xl shadow-2xl">
                </div>
                <div class="absolute -z-10 -bottom-8 -left-8 w-full h-full bg-gradient-to-br from-purple-200 to-pink-200 rounded-3xl transform rotate-3"></div>
                <div class="absolute top-8 right-8 p-6 bg-white rounded-2xl shadow-xl border-4 border-purple-200">
                    <div class="text-4xl font-black text-purple-600 mb-1">15+</div>
                    <div class="text-sm text-gray-600 font-semibold">Years Experience</div>
                </div>
            </div>
            <div class="space-y-8">
                <div class="inline-flex items-center gap-2 px-5 py-2.5 bg-purple-100 text-purple-700 rounded-xl text-sm font-bold">
                    <i class="fas fa-info-circle"></i>
                    Made-to-Order Insurance                </div>
                <h2 class="text-4xl md:text-5xl font-black text-gray-900 leading-tight">
                    Tailored Insurance Plans for Your Individual Requirements                </h2>
                <p class="text-lg text-gray-600 leading-relaxed">
                    One of the biggest benefits of working with our agency is our ability to provide customized insurance solutions. We understand that no two situations are the same, which is why we take the time to assess your risks and create a policy that is tailored to your needs. Our team of experts will work with you to identify your priorities and develop a policy that provides the protection you need, without breaking the bank.                </p>
                <div class="grid grid-cols-2 gap-6">
                    <div class="p-6 bg-white rounded-xl shadow-lg border-l-4 border-purple-500">
                        <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4">
                            <i class="fas fa-check text-purple-600 text-xl"></i>
                        </div>
                        <h4 class="font-black text-gray-900 mb-2">Quality First</h4>
                        <p class="text-sm text-gray-600">Premium standards</p>
                    </div>
                    <div class="p-6 bg-white rounded-xl shadow-lg border-l-4 border-pink-500">
                        <div class="w-12 h-12 bg-pink-100 rounded-xl flex items-center justify-center mb-4">
                            <i class="fas fa-rocket text-pink-600 text-xl"></i>
                        </div>
                        <h4 class="font-black text-gray-900 mb-2">Fast Delivery</h4>
                        <p class="text-sm text-gray-600">Quick turnaround</p>
                    </div>
                </div>
                <a href="#contact" class="group inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-xl hover:shadow-2xl transition-all">
                    Discover Coverage                    <i class="fas fa-arrow-right group-hover:translate-x-2 transition-transform"></i>
                </a>
            </div>
        </div>
    </div>
</section>


<section class="relative py-20 bg-gray-900 text-white overflow-hidden" id="blog">
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 left-0 w-96 h-96 bg-purple-500 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-pink-500 rounded-full blur-3xl"></div>
    </div>
    <div class="max-w-screen-xl mx-auto px-4 relative z-10">
        <div class="text-center mb-16">
            <div class="inline-flex items-center gap-2 px-6 py-3 bg-white/10 backdrop-blur-md text-white rounded-full border border-white/20 text-sm font-bold mb-6">
                <i class="fas fa-newspaper"></i>
                Blog
            </div>
            <h2 class="text-6xl md:text-7xl font-black text-white mb-4">Latest Articles</h2>
        </div>
        <div class="grid md:grid-cols-2 gap-8">
                        <article class="group relative">
                <div class="absolute -inset-1 bg-gradient-to-r from-purple-500 to-pink-600 rounded-3xl blur opacity-0 group-hover:opacity-30 transition-opacity"></div>
                <div class="relative bg-white/10 backdrop-blur-md rounded-2xl overflow-hidden border border-white/20 group-hover:bg-white/20 transition-all">
                    <div class="relative h-64 overflow-hidden">
                        <img src="https://images.pexels.com/photos/3184296/pexels-photo-3184296.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="Claims Co-Creation Communities" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    </div>
                    <div class="p-8">
                        <div class="mb-3">
                            <span class="px-4 py-1.5 bg-white/20 text-white text-xs font-black rounded-full">Claims</span>
                        </div>
                        <h3 class="text-2xl font-black text-white mb-3 group-hover:text-purple-400 transition-colors line-clamp-2">
                            <a href="/blog/claims-co-creation-communities/">Claims Co-Creation Communities</a>
                        </h3>
                        <p class="text-gray-300 mb-4 leading-relaxed line-clamp-3">Claims co-creation communities pair adjusters, contractors, and policyholders to redesign settlement journeys in 2025.</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-gray-400">February 4, 2026</span>
                            <a href="/blog/claims-co-creation-communities/" class="text-white font-black hover:text-purple-400 transition-colors">
                                Read →
                            </a>
                        </div>
                    </div>
                </div>
            </article>
                        <article class="group relative">
                <div class="absolute -inset-1 bg-gradient-to-r from-purple-500 to-pink-600 rounded-3xl blur opacity-0 group-hover:opacity-30 transition-opacity"></div>
                <div class="relative bg-white/10 backdrop-blur-md rounded-2xl overflow-hidden border border-white/20 group-hover:bg-white/20 transition-all">
                    <div class="relative h-64 overflow-hidden">
                        <img src="https://images.pexels.com/photos/3184311/pexels-photo-3184311.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="AI Ethics Councils for Underwriting" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    </div>
                    <div class="p-8">
                        <div class="mb-3">
                            <span class="px-4 py-1.5 bg-white/20 text-white text-xs font-black rounded-full">Governance</span>
                        </div>
                        <h3 class="text-2xl font-black text-white mb-3 group-hover:text-purple-400 transition-colors line-clamp-2">
                            <a href="/blog/ai-ethics-councils-for-underwriting/">AI Ethics Councils for Underwriting</a>
                        </h3>
                        <p class="text-gray-300 mb-4 leading-relaxed line-clamp-3">AI ethics councils ensure underwriting algorithms stay fair, transparent, and regulator-ready in 2025.</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-gray-400">February 3, 2026</span>
                            <a href="/blog/ai-ethics-councils-for-underwriting/" class="text-white font-black hover:text-purple-400 transition-colors">
                                Read →
                            </a>
                        </div>
                    </div>
                </div>
            </article>
                        <article class="group relative">
                <div class="absolute -inset-1 bg-gradient-to-r from-purple-500 to-pink-600 rounded-3xl blur opacity-0 group-hover:opacity-30 transition-opacity"></div>
                <div class="relative bg-white/10 backdrop-blur-md rounded-2xl overflow-hidden border border-white/20 group-hover:bg-white/20 transition-all">
                    <div class="relative h-64 overflow-hidden">
                        <img src="https://images.pexels.com/photos/3184336/pexels-photo-3184336.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="Embedded Wellness Riders for Life Policies" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    </div>
                    <div class="p-8">
                        <div class="mb-3">
                            <span class="px-4 py-1.5 bg-white/20 text-white text-xs font-black rounded-full">Life Insurance</span>
                        </div>
                        <h3 class="text-2xl font-black text-white mb-3 group-hover:text-purple-400 transition-colors line-clamp-2">
                            <a href="/blog/embedded-wellness-riders-for-life-policies/">Embedded Wellness Riders for Life Policies</a>
                        </h3>
                        <p class="text-gray-300 mb-4 leading-relaxed line-clamp-3">Life insurers bundle wellness riders that reward members for preventive care, longevity planning, and caregiving support...</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-gray-400">February 2, 2026</span>
                            <a href="/blog/embedded-wellness-riders-for-life-policies/" class="text-white font-black hover:text-purple-400 transition-colors">
                                Read →
                            </a>
                        </div>
                    </div>
                </div>
            </article>
                    </div>
        <div class="text-center mt-12">
            <a href="blog/" class="inline-flex items-center gap-3 px-10 py-5 bg-white text-gray-900 font-black rounded-full hover:bg-gray-100 transition-all shadow-xl">
                View All Articles
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<section class="relative py-24 bg-white overflow-hidden">
    <div class="absolute top-0 right-0 w-96 h-96 bg-purple-100 rounded-full blur-3xl opacity-30"></div>
    <div class="absolute bottom-0 left-0 w-96 h-96 bg-pink-100 rounded-full blur-3xl opacity-30"></div>
    <div class="max-w-4xl mx-auto px-4 text-center relative z-10">
        <div class="inline-block px-4 py-2 bg-purple-600 text-white rounded-lg text-sm font-bold mb-6">
            Get Started Today
        </div>
        <h2 class="text-5xl md:text-6xl font-black text-gray-900 mb-6">Ready to Get Started?</h2>
        <p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">Join thousands of satisfied clients and transform your business today</p>
        <div class="flex flex-col sm:flex-row gap-6 justify-center">
            <a href="#contact" class="group relative px-12 py-6 bg-gray-900 text-white font-black text-lg rounded-xl overflow-hidden">
                <span class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
                <span class="relative z-10 flex items-center gap-3">
                    Get Started Now
                    <i class="fas fa-arrow-right group-hover:translate-x-2 transition-transform"></i>
                </span>
            </a>
            <a href="#services" class="px-12 py-6 bg-white border-2 border-gray-300 text-gray-900 font-black text-lg rounded-xl hover:border-purple-400 hover:bg-purple-50 transition-all">
                Learn More
            </a>
        </div>
    </div>
</section>

<section class="bg-white py-20" id="contact">
    <div class="max-w-screen-xl mx-auto px-4">
        <div class="text-center mb-12">
            <div class="inline-block px-4 py-2 mb-4 bg-purple-100 text-purple-800 rounded-full text-sm font-semibold">
                Contact
            </div>
            <h2 class="text-4xl font-extrabold text-gray-900 mb-4">Say Hello</h2>
            <p class="text-xl text-gray-600">Choose how you'd like to connect with us</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-6 mb-12">
            <div class="group bg-gradient-to-br from-gray-50 to-white p-8 rounded-2xl shadow-lg border-2 border-gray-100 hover:border-purple-500 transition-all cursor-pointer hover-lift">
                <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <i class="fas fa-phone-alt text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Phone Support</h3>
                <p class="text-gray-600 mb-4">Speak directly with our team</p>
                <p class="text-purple-600 font-bold text-lg">+1-480-912-5053</p>
                <p class="text-sm text-gray-500 mt-2">Mon-Fri, 9AM-6PM EST</p>
            </div>
            
            <div class="group bg-gradient-to-br from-gray-50 to-white p-8 rounded-2xl shadow-lg border-2 border-gray-100 hover:border-purple-500 transition-all cursor-pointer hover-lift">
                <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <i class="fas fa-envelope text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Email Us</h3>
                <p class="text-gray-600 mb-4">Get a response within 24 hours</p>
                <p class="text-purple-600 font-bold text-lg break-all">hello@agentidicommercio.org</p>
                <p class="text-sm text-gray-500 mt-2">We reply to all emails</p>
            </div>
            
            <div class="group bg-gradient-to-br from-gray-50 to-white p-8 rounded-2xl shadow-lg border-2 border-gray-100 hover:border-purple-500 transition-all cursor-pointer hover-lift">
                <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <i class="fas fa-map-marked-alt text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Visit Our Office</h3>
                <p class="text-gray-600 mb-4">Come see us in person</p>
                <p class="text-purple-600 font-bold">478 Spring Street, Salt Lake City, UT 84101</p>
                <p class="text-sm text-gray-500 mt-2">Mon-Fri, 9AM-5PM</p>
            </div>
        </div>
        
        <div class="max-w-3xl mx-auto">
            <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-8 md:p-12 rounded-3xl border border-purple-200">
                <h3 class="text-2xl font-bold text-gray-900 mb-6 text-center">Or send us a message</h3>
                <form action="#" class="space-y-5">
                    <div class="grid md:grid-cols-2 gap-5">
                        <input type="text" placeholder="Your Name" class="bg-white border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-purple-500 focus:border-transparent" required>
                        <input type="email" placeholder="Your Email" class="bg-white border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-purple-500 focus:border-transparent" required>
                    </div>
                    <input type="text" placeholder="Subject" class="bg-white border border-gray-300 rounded-xl p-4 w-full focus:ring-2 focus:ring-purple-500 focus:border-transparent" required>
                    <textarea rows="4" placeholder="Your Message" class="bg-white border border-gray-300 rounded-xl p-4 w-full focus:ring-2 focus:ring-purple-500 focus:border-transparent" required></textarea>
                    <button type="submit" class="w-full py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-xl hover:shadow-xl transition-all">
                        Send Message <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>


<footer class="bg-gray-900 text-white py-16">
    <div class="max-w-screen-xl mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-12 mb-12">
            <div class="md:col-span-2">
                <a href="./" class="flex items-center space-x-3 mb-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center">
                        <span class="text-white font-bold text-xl">A</span>
                    </div>
                    <span class="text-3xl font-bold">Agentidicommercio</span>
                </a>
                <p class="text-gray-400 mb-6 max-w-md">Your success is our mission. We're here to help you achieve your goals.</p>
                <div class="flex space-x-4">
                    <a href="#" class="w-12 h-12 bg-gray-800 hover:bg-purple-600 rounded-full flex items-center justify-center transition-all">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="w-12 h-12 bg-gray-800 hover:bg-purple-600 rounded-full flex items-center justify-center transition-all">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="w-12 h-12 bg-gray-800 hover:bg-purple-600 rounded-full flex items-center justify-center transition-all">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="#" class="w-12 h-12 bg-gray-800 hover:bg-purple-600 rounded-full flex items-center justify-center transition-all">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>
            
            <div>
                <h3 class="text-lg font-bold mb-6">Links</h3>
                <ul class="space-y-3 text-gray-400">
                    <li><a href="./about-us.php" class="hover:text-purple-400 transition-colors">About</a></li>

                    <li><a href="blog/" class="hover:text-purpleBlog</a></li>
                    <li><a href="#services" class="hover:text-purple-400 transition-colors">Services</a></li>
                    <li><a href="#testimonials" class="hover:text-purple-400 transition-colors">Testimonials</a></li>
                    <li><a href="./contact.php" class="hover:text-purple-400 transition-colors">Contact</a></li>
                </ul>
            </div>
            
            <div>
                <h3 class="text-lg font-bold mb-6">Legal</h3>
                <ul class="space-y-3 text-gray-400">
                    <li><a href="./privacy.php" class="hover:text-purple-400 transition-colors">Privacy</a></li>
                    <li><a href="./terms.php" class="hover:text-purple-400 transition-colors">Terms</a></li>
                    <li><a href="./disclaimer.php" class="hover:text-purple-400 transition-colors">Disclaimer</a></li>
                </ul>
            </div>
        </div>
        
        <div class="border-t border-gray-800 pt-8">
            <p class="text-gray-400 text-sm text-center">© 2026 Agentidicommercio. All rights reserved.</p>
        </div>
    </div>
</footer>


<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const anchorLinks = document.querySelectorAll('a[href^="#"]');

    anchorLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            if (href === '#' || href === '') return;

            const targetId = href.substring(1);
            const targetElement = document.getElementById(targetId);

            if (targetElement) {
                e.preventDefault();
                const headerOffset = 80;
                const elementPosition = targetElement.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

                window.scrollTo({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });
});
</script>

</body>
</html>
