@page "/"
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRM - Blazor Enterprise CRM Source Code</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js"></script>
    <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=Poppins:wght@300;400;450;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: "Poppins", sans-serif; background: #ffffff; color: #1e293b; }
        .nav-link { position: relative; color: #64748b; font-size: 0.875rem; font-weight: 500; transition: color 0.2s; cursor: pointer; text-decoration: none; }
        .nav-link:hover { color: #6366F1; }
        .nav-link.active { color: #6366F1; font-weight: 600; }
        .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #6366F1; border-radius: 1px; }
        .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #6366F1; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; }
        .btn-primary:hover { background: #4F46E5; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.25); }
        .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: transparent; color: #6366F1; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; border: 1.5px solid #C7D2FE; transition: all 0.2s; cursor: pointer; }
        .btn-outline:hover { border-color: #6366F1; background: #EEF2FF; }
        .tech-card { padding: 1.5rem; background: #ffffff; border: 1px solid #f1f5f9; border-radius: 0.75rem; transition: all 0.25s; cursor: default; }
        .tech-card:hover { border-color: #C7D2FE; box-shadow: 0 4px 16px rgba(99,102,241,0.06); transform: translateY(-2px); }
        .tech-card .ico { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: #EEF2FF; color: #6366F1; margin-bottom: 0.75rem; }
        .tech-card .ico svg { width: 1.25rem; height: 1.25rem; }
        .feature-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: #EEF2FF; color: #6366F1; flex-shrink: 0; }
        .feature-icon svg { width: 1.5rem; height: 1.5rem; }
        .footer-link { color: #94a3b8; font-size: 0.8125rem; transition: color 0.2s; cursor: pointer; text-decoration: none; }
        .footer-link:hover { color: #ffffff; }
        .gradient-text { background: linear-gradient(135deg, #6366F1 0%, #A5B4FC 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 1rem; background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 9999px; font-size: 0.8125rem; color: #6366F1; font-weight: 500; }
        #fab-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #6366F1; color: #fff; border: none; border-radius: 9999px; cursor: pointer; box-shadow: 0 4px 12px rgba(99,102,241,0.3); transition: all 0.25s; opacity: 0; visibility: hidden; transform: translateY(10px); }
        #fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
        #fab-top:hover { background: #4F46E5; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99,102,241,0.35); }
        #fab-top svg { width: 1.25rem; height: 1.25rem; }
        [x-cloak] { display: none !important; }
    </style>

</head>
<body x-data="{ atTop: true, activeSection: 'home' }" x-init="initScrollSpy(); window.addEventListener('scroll', () => { atTop = window.scrollY < 300; })">

<!-- ===== NAV ===== -->

<!-- NAV -->
<nav class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-indigo-50" x-data="{ mobileOpen: false }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center gap-10">
                <a class="flex items-center gap-2 text-indigo-600 font-bold text-lg no-underline" href="#">
                    <svg class="w-7 h-7 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                    <span>CRM</span>
                </a>
                <div class="hidden md:flex items-center gap-1">
                    <a class="nav-link active px-3 py-1.5 rounded-md bg-indigo-50" href="#home">Home</a>
                    <a class="nav-link px-3 py-1.5 rounded-md" href="#features">Features</a>
                    <a class="nav-link px-3 py-1.5 rounded-md" href="#modules">Modules</a>
                    <a class="nav-link px-3 py-1.5 rounded-md" href="#tech">Technology</a>
                    <a class="nav-link px-3 py-1.5 rounded-md" href="#demo">Live Demo</a>
                </div>
            </div>
            <div class="hidden md:flex items-center gap-3">
                <a class="nav-link" href="/home">Sign In</a>
                <a href="https://indotalent.com" target="_blank" class="btn-primary no-underline">Get Source Code</a>
            </div>
            <button class="md:hidden p-2 text-indigo-500 hover:text-indigo-700" @@click="mobileOpen = !mobileOpen">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>
        </div>
        <div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-2">
            <a class="block px-3 py-2 text-sm bg-indigo-50 rounded-md font-medium" style="color: #6366F1;" href="#home">Home</a>
            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-indigo-600 rounded-md hover:bg-indigo-50" href="#features">Features</a>
            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-indigo-600 rounded-md hover:bg-indigo-50" href="#modules">Modules</a>
            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-indigo-600 rounded-md hover:bg-indigo-50" href="#tech">Technology</a>
            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-indigo-600 rounded-md hover:bg-indigo-50" href="#demo">Live Demo</a>
            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-indigo-600 rounded-md hover:bg-indigo-50" href="/home">Sign In</a>
            <a href="https://indotalent.com" target="_blank" class="btn-primary w-full justify-center mt-2 no-underline inline-flex items-center gap-2">Get Source Code</a>
        </div>
    </div>
</nav>

<!-- HERO -->
<section id="home" class="relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-indigo-50/30 to-transparent pointer-events-none"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 md:pt-28 md:pb-32">
        <div class="text-center max-w-4xl mx-auto">
            <div class="hero-badge mx-auto mb-6">
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                Production-Ready Blazor CRM Source Code
            </div>
            <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900 leading-tight tracking-tight">
                Your CRM,<br/>
                <span class="gradient-text">Deployed in Minutes</span>
            </h1>
            <p class="mt-6 text-lg md:text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
                A complete, end-to-end CRM source code built with ASP.NET Core Blazor .NET 10 and MudBlazor.
                Stop burning AI tokens building from scratch — get a guaranteed working application with beautiful, modern design.
            </p>
            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="https://indotalent.com" target="_blank" class="btn-primary text-base px-8 py-3.5 no-underline">
                    Get Source Code
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                </a>
                <a href="/home" class="btn-outline text-base px-8 py-3.5 no-underline">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Sign In to App
                </a>
            </div>
            <div class="mt-16 flex flex-wrap items-center justify-center gap-8 text-sm text-gray-400">
                <span class="font-medium text-gray-500">Why choose us</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" 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"/></svg> End-to-End Working</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> Beautiful MudBlazor UI</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Save Weeks of Development</span>
            </div>
        </div>
    </div>
</section>

<!-- WHY THIS PRODUCT — The Pain Points & Solution -->
<section id="features" class="py-20 md:py-28 border-t border-indigo-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-indigo-50 text-indigo-600 text-xs font-semibold rounded-full border border-indigo-100">THE PROBLEM</span>
            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Building a Full App Is Hard — Even with AI</h2>
            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">AI can generate code, but stitching together an end-to-end application that actually works is a different story. We solved that for you.</p>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">AI Alone Isn't Enough</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Sure, AI can help write code snippets. But building a fully integrated CRM — with authentication, database, business logic, and a polished UI — takes countless iterations, debugging, and wasted tokens.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Guaranteed to Work</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Every feature in this CRM has been built, tested, and verified to run end-to-end. No half-baked modules, no broken pipelines — just a solid, production-grade application you can trust.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Beautiful by Default</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Powered by MudBlazor 9, the UI is modern, responsive, and professional right out of the box. No need to fight with CSS or design tokens — it looks stunning from day one.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Single Project Monolith</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">No microservice complexity, no juggling between 20 projects. One solution, one deployment unit — clean Vertical Slice Architecture that scales when you need it to.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Full Source Code Included</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">You own the code. Customize, extend, and modify every line to fit your business. No black boxes, no vendor lock-in — just clean, well-structured C# code with LINQ and MediatR.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">.NET 10 + Blazor Server</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Built on the latest Microsoft stack — ASP.NET Core 10 with Blazor Server, Entity Framework Core, and MS SQL. A real-world demonstration of enterprise-grade .NET in action.</p>
            </div>
        </div>
    </div>
</section>

<!-- BUSINESS MODULES -->
<section id="modules" class="py-20 md:py-28 bg-indigo-50/30 border-t border-indigo-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-indigo-50 text-indigo-600 text-xs font-semibold rounded-full border border-indigo-100">BUSINESS MODULES</span>
            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Everything You Need to Run Your Business</h2>
            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">From lead to invoice, purchase to payment — every module is built, integrated, and ready to use.</p>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Profile</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Personal info, password management, avatar upload, and session tracking — a complete user profile system built in.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Pipeline</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Campaign management, budgeting, expense tracking, lead management with contacts & activities, sales team & representative assignments.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Third Party</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Customer & vendor management with groups, categories, and contacts. Complete CRM relationship tracking for both sides of your business.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Sales</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Quotation, sales order, delivery order, sales return, invoice, credit note, and payment — with comprehensive reporting for every stage of the sales cycle.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Purchase</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Requisition, purchase order, goods receive, purchase return, bill, debit note, and payment — complete procurement workflow with full reporting suite.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Inventory</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Unit measure, product groups, product catalog, warehouse management, transfers, adjustments, scrapping, stock counts, and in-depth stock & movement reports.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Utilities</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Booking group & resource management, scheduler, program resource & manager, plus a built-in to-do list to keep your team organized.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-indigo-50 hover:shadow-sm hover:border-indigo-100 transition-all">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">System Logs & Settings</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Database and file logging, user management, currency configuration, auto numbering, and full inspection mode for appsettings.json — complete control over your application.</p>
            </div>
        </div>
    </div>
</section>

<!-- TECH STACK -->
<section id="tech" class="py-20 md:py-28 border-t border-indigo-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-indigo-50 text-indigo-600 text-xs font-semibold rounded-full border border-indigo-100">TECHNOLOGY STACK</span>
            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Powered by Modern .NET 10</h2>
            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">Real-world demonstration of ASP.NET Core Blazor's robustness, built with the latest tools from Microsoft.</p>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">ASP.NET Core 10</div><div class="text-xs text-gray-400 mt-0.5">Framework</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/></svg></div><div class="font-semibold text-gray-900 text-sm">Blazor Server</div><div class="text-xs text-gray-400 mt-0.5">Web UI</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">C# / LINQ</div><div class="text-xs text-gray-400 mt-0.5">Language</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg></div><div class="font-semibold text-gray-900 text-sm">.NET 10</div><div class="text-xs text-gray-400 mt-0.5">Runtime</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">EF Core</div><div class="text-xs text-gray-400 mt-0.5">ORM</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">MS SQL</div><div class="text-xs text-gray-400 mt-0.5">Database</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 4.5v3.75m0 0l3.75-3.75M9 8.25L5.25 4.5M15 19.5v-3.75m0 0l-3.75 3.75M15 15.75l3.75 3.75M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25"/></svg></div><div class="font-semibold text-gray-900 text-sm">MudBlazor 9</div><div class="text-xs text-gray-400 mt-0.5">UI Components</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">MediatR / CQRS</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">VSA</div><div class="text-xs text-gray-400 mt-0.5">Architecture</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></div><div class="font-semibold text-gray-900 text-sm">Visual Studio 2026</div><div class="text-xs text-gray-400 mt-0.5">IDE</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Monolithic</div><div class="text-xs text-gray-400 mt-0.5">Single Project</div></div>
        </div>
    </div>
</section>

<!-- DEMO SECTION -->
<section id="demo" class="py-20 md:py-28 bg-indigo-50/30 border-t border-indigo-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-indigo-50 text-indigo-600 text-xs font-semibold rounded-full border border-indigo-100">SEE IT IN ACTION</span>
            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Try the Live Demo</h2>
            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">Don't take our word for it. Explore every feature in the live demo — no installation required.</p>
        </div>
        <div class="max-w-2xl mx-auto">
            <div class="p-8 bg-white rounded-2xl border border-indigo-100 shadow-sm">
                <div class="text-center mb-6">
                    <div class="feature-icon mx-auto mb-4">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"/></svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900">Demo Credentials</h3>
                    <p class="mt-2 text-sm text-gray-500">Use these credentials to sign in and explore the full application:</p>
                </div>
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <span class="text-sm text-gray-500">URL</span>
                        <a href="https://blazor-crm.csharpasp.net/" target="_blank" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">blazor-crm.csharpasp.net</a>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <span class="text-sm text-gray-500">Email</span>
                        <span class="text-sm font-medium text-gray-900">admin@root.com</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <span class="text-sm text-gray-500">Password</span>
                        <span class="text-sm font-medium text-gray-900">123456</span>
                    </div>
                </div>
                <div class="mt-6 text-center">
                    <a href="https://blazor-crm.csharpasp.net/" target="_blank" class="btn-primary text-base px-8 py-3.5 no-underline">
                        Open Live Demo
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section id="cta" class="py-20 md:py-28 text-white" style="background: #6366F1;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-bold">Stop Building from Scratch</h2>
        <p class="mt-4 text-indigo-100 max-w-xl mx-auto">Get a complete, tested, and beautiful CRM source code. Focus on growing your business — we've handled the heavy lifting.</p>
        <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="https://indotalent.com" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-indigo-600 font-semibold rounded-lg hover:bg-indigo-50 transition text-sm no-underline">Get Source Code</a>
        </div>
    </div>
</section>

<!-- FOOTER -->
<footer class="bg-slate-900 border-t border-slate-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center gap-2 text-white font-bold text-lg mb-4">
                    <svg class="w-6 h-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                    CRM
                </div>
                <p class="text-sm text-gray-500 leading-relaxed">Production-ready Blazor CRM source code. The ultimate bridge between your business and your customers.</p>
            </div>
            <div>
                <h4 class="text-xs font-semibold text-indigo-400 uppercase tracking-wider mb-4">Technology</h4>
                <div class="space-y-2"><a class="footer-link block">ASP.NET Core 10</a><a class="footer-link block">Blazor Server</a><a class="footer-link block">MudBlazor 9</a><a class="footer-link block">MS SQL + EF Core</a></div>
            </div>
            <div>
                <h4 class="text-xs font-semibold text-indigo-400 uppercase tracking-wider mb-4">Key Modules</h4>
                <div class="space-y-2"><a class="footer-link block">Sales & Pipeline</a><a class="footer-link block">Purchase & Inventory</a><a class="footer-link block">Customer & Vendor</a><a class="footer-link block">Reports & Logs</a></div>
            </div>
            <div>
                <h4 class="text-xs font-semibold text-indigo-400 uppercase tracking-wider mb-4">Resources</h4>
                    <div class="space-y-2"><a class="footer-link block" href="https://blazor-crm.csharpasp.net/" target="_blank">Live Demo</a></div>
            </div>
        </div>
        <div class="mt-10 pt-8 border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
            <p class="text-xs text-gray-600">&copy; 2026 CRM. All rights reserved.</p>
            <div class="flex gap-4">
                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Privacy</a>
                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Terms</a>
                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Cookies</a>
            </div>
        </div>
    </div>
</footer>

<!-- FAB Back to Top -->
<button id="fab-top" :class="atTop ? '' : 'show'" @@click="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">
    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
</button>

<script>
function initScrollSpy() {
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(e) {
      if (e.isIntersecting) {
        document.querySelectorAll('.nav-link').forEach(function(l) { l.classList.remove('active'); });
        var el = document.querySelector('.nav-link[href="#'+e.target.id+'"]');
        if (el) el.classList.add('active');
      }
    });
  }, { rootMargin: '-80px 0px -50% 0px' });
  document.querySelectorAll('section[id]').forEach(function(s) { observer.observe(s); });
}
</script>
</body>

</html>