AI Network Effect Feature Section

<section class="z-10 md:px-12 lg:pt-20 lg:pb-20 w-full max-w-[1400px] mr-auto ml-auto pt-24 pr-6 pb-24 pl-6 relative">
    <!-- Header -->
    <div class="text-center max-w-4xl mx-auto mb-20">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-300 text-xs font-medium tracking-wide mb-6 shadow-[0_0_10px_rgba(16,185,129,0.15)]">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-network animate-pulse">
                <rect x="16" y="16" width="6" height="6" rx="1" class=""></rect>
                <rect x="2" y="16" width="6" height="6" rx="1" class=""></rect>
                <rect x="9" y="2" width="6" height="6" rx="1" class=""></rect>
                <path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" class=""></path>
                <path d="M12 12V8" class=""></path>
            </svg>
            <span class="uppercase tracking-widest text-[10px]" style="">Exponential Growth Model</span>
        </div>

        <h2 class="md:text-6xl text-3xl font-normal text-white tracking-tight font-serif-custom mb-6 leading-tight" style="">
            With AI Agents we create the
            <span class="bg-clip-text italic text-transparent bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400" style="">Network Effect</span>
        </h2>
        <p class="md:text-xl leading-relaxed text-lg font-light text-blue-400 max-w-2xl mx-auto" style="">
            The network effect is a business principle that illustrates the idea that when more people use a product or
            service, its value increases. With your data, every hire or sale you make is used to continuously improve
            your sales and hiring intelligence.
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
        <!-- Visual Column (Left) -->
        <div class="relative w-full aspect-square max-w-[600px] mx-auto flex items-center justify-center">
            <!-- Background Glows -->
            <div class="absolute inset-0 bg-gradient-to-tr from-emerald-900/20 via-transparent to-blue-900/20 rounded-full blur-3xl">
            </div>

            <!-- Connecting Lines (SVG) -->
            <svg class="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 600 600">
                <defs class="">
                    <linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="100%" class="">
                        <stop offset="0%" stop-color="rgba(255,255,255,0.05)" class=""></stop>
                        <stop offset="50%" stop-color="rgba(255,255,255,0.2)" class=""></stop>
                        <stop offset="100%" stop-color="rgba(255,255,255,0.05)" class=""></stop>
                    </linearGradient>
                </defs>
                <!-- Cross Connections -->
                <path d="M 150 150 Q 300 300 450 450" fill="none" stroke="url(#lineGrad)" stroke-width="1" stroke-dasharray="8 8" class=""></path>
                <path d="M 450 150 Q 300 300 150 450" fill="none" stroke="url(#lineGrad)" stroke-width="1" stroke-dasharray="8 8" class=""></path>

                <!-- Circular Connections -->
                <path d="M 150 150 Q 300 50 450 150" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="4 4" class=""></path>
                <path d="M 450 150 Q 550 300 450 450" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="4 4" class=""></path>
                <path d="M 450 450 Q 300 550 150 450" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="4 4" class=""></path>
                <path d="M 150 450 Q 50 300 150 150" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="4 4" class=""></path>
            </svg>

            <!-- Center Node (Blue) -->
            <div class="absolute w-40 h-40 bg-[#0c0c0e] rounded-full border border-blue-500/30 flex items-center justify-center z-20 shadow-[0_0_50px_rgba(59,130,246,0.15)]">
                <div class="absolute inset-2 rounded-full border border-blue-500/10 animate-[spin_10s_linear_infinite]">
                </div>
                <div class="w-28 h-28 bg-blue-600/10 rounded-full flex items-center justify-center backdrop-blur-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users text-blue-400">
                        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
                        <circle cx="9" cy="7" r="4" class=""></circle>
                        <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path>
                    </svg>
                </div>
            </div>

            <!-- Top Left Node (Yellow) - Evolution/Growth -->
            <div class="absolute top-[10%] left-[10%] w-24 h-24 bg-[#0c0c0e] rounded-full border border-yellow-500/30 flex items-center justify-center z-20 hover:scale-110 transition-transform duration-300 group">
                <div class="absolute -top-8 text-center w-full text-xs font-medium text-green-500 uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity" style="">
                    Evolution</div>
                <div class="w-16 h-16 bg-yellow-500/10 rounded-full flex items-center justify-center shadow-[0_0_20px_rgba(234,179,8,0.2)]">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket text-yellow-400">
                        <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" class="">
                        </path>
                        <path d="m12 15-3-3a22 22 0 0 1 2-5.2 9 9 0 0 1 3.4 2.99" class=""></path>
                        <path d="M15 12h-3.437" class=""></path>
                        <path d="M12 15v-3.437" class=""></path>
                        <path d="M15 12a15.91 15.91 0 0 1 8.71 6.71c.32.74-.29 1.54-1.07 1.28A15.86 15.86 0 0 0 15 12Z" class="">
                        </path>
                    </svg>
                </div>
            </div>

            <!-- Top Right Node (Emerald) - Feedback -->
            <div class="absolute top-[10%] right-[10%] w-24 h-24 bg-[#0c0c0e] rounded-full border border-emerald-500/30 flex items-center justify-center z-20 hover:scale-110 transition-transform duration-300 group">
                <div class="absolute -right-16 text-left w-full text-xs font-medium text-green-500 uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity pl-2" style="">
                    Feedback</div>
                <div class="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center shadow-[0_0_20px_rgba(16,185,129,0.2)]">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw text-emerald-400">
                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path>
                        <path d="M21 3v5h-5" class=""></path>
                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path>
                        <path d="M8 16H3v5" class=""></path>
                    </svg>
                </div>
            </div>

            <!-- Bottom Left Node (Lime) - Growth -->
            <div class="absolute bottom-[10%] left-[10%] w-24 h-24 bg-[#0c0c0e] rounded-full border border-lime-500/30 flex items-center justify-center z-20 hover:scale-110 transition-transform duration-300 group">
                <div class="absolute -left-16 text-right w-full text-xs font-medium text-green-500 uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity pr-2" style="">
                    Growth</div>
                <div class="w-16 h-16 bg-lime-500/10 rounded-full flex items-center justify-center shadow-[0_0_20px_rgba(132,204,22,0.2)]">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up text-lime-400">
                        <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" class=""></polyline>
                        <polyline points="16 7 22 7 22 13" class=""></polyline>
                    </svg>
                </div>
            </div>

            <!-- Bottom Right Node (Cyan) - Innovation -->
            <div class="absolute bottom-[10%] right-[10%] w-24 h-24 bg-[#0c0c0e] rounded-full border border-cyan-500/30 flex items-center justify-center z-20 hover:scale-110 transition-transform duration-300 group">
                <div class="absolute -bottom-8 text-center w-full text-xs font-medium text-green-500 uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity" style="">
                    Innovation</div>
                <div class="w-16 h-16 bg-cyan-500/10 rounded-full flex items-center justify-center shadow-[0_0_20px_rgba(6,182,212,0.2)]">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb text-cyan-400">
                        <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-1 1.5-2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" class="">
                        </path>
                        <path d="M9 18h6" class=""></path>
                        <path d="M10 22h4" class=""></path>
                    </svg>
                </div>
            </div>

            <!-- Continuous Learning Label -->
            <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-4">
                <h3 class="text-lg font-medium text-white/90 tracking-widest uppercase opacity-50" style="">Continuous Learning
                </h3>
            </div>
        </div>

        <!-- Content Column (Right) -->
        <div class="space-y-8">
            <!-- Feature 1 -->
            <div class="group">
                <h3 class="text-xl font-medium text-white mb-2 flex items-center gap-3" style="">
                    <span class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 shrink-0">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle"><path d="M19.439 10c.011.232.022.468.022.705.006.183.006.366 0 .551a9.92 9.92 0 0 0-1.636 2.871A8.2 8.2 0 0 1 12 12a8.2 8.2 0 0 1-5.825 2.127A9.924 9.924 0 0 0 4.539 11.256c-.006-.185-.006-.368 0-.551a9.92 9.92 0 0 0 1.636-2.871A8.2 8.2 0 0 1 12 10a8.2 8.2 0 0 1 5.825-2.127A9.932 9.932 0 0 0 19.44 10Z" class=""></path><path d="M19.44 10a10 10 0 1 1-2.228-5.328" class=""></path></svg>
                    </span>
                    Enhanced Problem-Solving
                </h3>
                <p class="text-blue-400/70 text-sm leading-relaxed pl-11" style="">
                    Complex sales and recruitment challenges, from finding niche skills to managing high-volume hiring,
                    to lead generation to appointment booking are tackled effectively by specialized agents.
                </p>
            </div>

            <!-- Feature 2 -->
            <div class="group">
                <h3 class="text-xl font-medium text-white mb-2 flex items-center gap-3" style="">
                    <span class="w-8 h-8 rounded-lg bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center text-cyan-400 shrink-0">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
                    </span>
                    Increased Efficiency
                </h3>
                <p class="text-blue-400/70 text-sm leading-relaxed pl-11" style="">
                    Collaboration and distributed processing among agents lead to a more efficient allocation of
                    resources, matching tasks to the best-suited agent.
                </p>
            </div>

            <!-- Feature 3 -->
            <div class="group">
                <h3 class="text-xl font-medium text-white mb-2 flex items-center gap-3" style="">
                    <span class="w-8 h-8 rounded-lg bg-yellow-500/10 border border-yellow-500/20 flex items-center justify-center text-yellow-400 shrink-0">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scaling"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" class=""></path><path d="M14 15H9v-5" class=""></path><path d="M16 3h5v5" class=""></path><path d="M21 3 9 15" class=""></path></svg>
                    </span>
                    Scalability
                </h3>
                <p class="text-blue-400/70 text-sm leading-relaxed pl-11" style="">
                    Easily expand the system's capabilities by adding more agents to handle increased demand or new
                    areas of specialization without significant overhauls.
                </p>
            </div>

            <!-- Feature 4 -->
            <div class="group">
                <h3 class="text-xl font-medium text-white mb-2 flex items-center gap-3" style="">
                    <span class="w-8 h-8 rounded-lg bg-pink-500/10 border border-pink-500/20 flex items-center justify-center text-pink-400 shrink-0">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
                    </span>
                    Robustness &amp; Reliability
                </h3>
                <p class="text-blue-400/70 text-sm leading-relaxed pl-11" style="">
                    The system is dependable; the malfunction of a single agent won't halt operations. Other agents can
                    step in or redistribute the workload.
                </p>
            </div>
            <!-- Feature 5 -->
            <div class="group">
                <h3 class="text-xl font-medium text-white mb-2 flex items-center gap-3" style="">
                    <span class="w-8 h-8 rounded-lg bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400 shrink-0">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-branch-plus"><path d="M6 3v12" class=""></path><path d="M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" class=""></path><path d="M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" class=""></path><path d="M15 6a9 9 0 0 0-9 9" class=""></path><path d="M18 15v6" class=""></path><path d="M21 18h-6" class=""></path></svg>
                    </span>
                    Flexibility &amp; Adaptability
                </h3>
                <p class="text-blue-400/70 text-sm leading-relaxed pl-11" style="">
                    Our MAS can dynamically adjust to evolving sales and recruitment needs by reconfiguring agents and
                    their responsibilities.
                </p>
            </div>

        </div>
    </div>

    <!-- Closing CTA -->
    <div class="mt-24 p-8 rounded-3xl bg-gradient-to-r from-[#0c0c0e] to-blue-950/20 border border-white/10 relative overflow-hidden text-center">
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-500/10 via-transparent to-transparent">
        </div>
        <div class="relative z-10 max-w-3xl mx-auto">
            <p class="text-lg md:text-xl text-white font-light leading-relaxed mb-6" style="">
                The future is unfolding before us, and it's being shaped by those who act now. Don't let complexity or
                uncertainty hold you back. We understand that implementing advanced AI strategies can seem daunting,
                especially when you're already juggling countless responsibilities.
            </p>
            <p class="text-lg font-medium text-emerald-300" style="">
                That's why we're here to make it effortless for you.
            </p>
        </div>
    </div>

</section>