@page "/landing2"
@{
    ViewData["Title"] = "Landing 2";
}
@{
    ViewData["SidebarVariant"] = "2";
    ViewData["HideChrome"] = true;
    ViewData["Css:landing2.css"] = "css/landing2.css";
    ViewData["Js:landing.js"] = "js/landing.js";

}

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

<nav class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-blue-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-blue-600 font-bold text-lg no-underline" href="#">
                    <svg class="w-7 h-7 text-blue-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>EnterpriseKit</span>
                </a>
                <div class="hidden md:flex items-center gap-1">
                    <a class="nav-link active px-3 py-1.5 rounded-md bg-blue-50" href="#home">Home</a>
                    <a class="nav-link px-3 py-1.5 rounded-md" href="#tech">Technologies</a>
                    <a class="nav-link px-3 py-1.5 rounded-md" href="#arch">Architecture</a>
                    <a class="nav-link px-3 py-1.5 rounded-md" href="#frontend">Frontend</a>
                    <a class="nav-link px-3 py-1.5 rounded-md" href="#cta">Get Started</a>
                </div>
            </div>
            <div class="hidden md:flex items-center gap-3">
                <a class="nav-link" href="#">Sign In</a>
                <button class="btn-primary">Get Started</button>
            </div>
            <button class="md:hidden p-2 text-blue-500 hover:text-blue-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 text-blue-600 bg-blue-50 rounded-md font-medium" href="#home">Home</a>
            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 rounded-md hover:bg-blue-50" href="#tech">Technologies</a>
            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 rounded-md hover:bg-blue-50" href="#arch">Architecture</a>
            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 rounded-md hover:bg-blue-50" href="#frontend">Frontend</a>
            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 rounded-md hover:bg-blue-50" href="#cta">Get Started</a>
            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 rounded-md hover:bg-blue-50" href="#">Sign In</a>
            <button class="btn-primary w-full justify-center mt-2">Get Started</button>
        </div>
    </div>
</nav>

<section id="home" class="relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-blue-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>
                Built with .NET 10 & ASP.NET Core
            </div>
            <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900 leading-tight tracking-tight">
                Build Enterprise Apps<br/>
                <span class="gradient-text">Faster Than Ever</span>
            </h1>
            <p class="mt-6 text-lg md:text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
                A modern, modular application platform powered by ASP.NET Core, Blazor, and Vertical Slice Architecture.
                Multitenant, multibranch, and ready for the cloud.
            </p>
            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
                <button class="btn-primary text-base px-8 py-3.5">
                    Start Building
                    <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>
                </button>
                <button class="btn-outline text-base px-8 py-3.5">
                    <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>
                    Watch Demo
                </button>
            </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">Trusted by</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-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> Enterprise Ready</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg> Cloud Native</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg> SSO Ready</span>
            </div>
        </div>
    </div>
</section>

<section id="tech" class="py-20 md:py-28 border-t border-blue-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-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">TECHNOLOGY STACK</span>
            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Built on Modern .NET</h2>
            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">From backend to frontend, every layer is crafted with the latest Microsoft technologies.</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</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</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="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.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.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-9z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Razor Pages</div><div class="text-xs text-gray-400 mt-0.5">Pages</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">MVC</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="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="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# 14</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="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">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="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</div><div class="text-xs text-gray-400 mt-0.5">CQRS</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">AutoMapper</div><div class="text-xs text-gray-400 mt-0.5">Mapping</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">Minimal API</div><div class="text-xs text-gray-400 mt-0.5">APIs</div></div>
        </div>
    </div>
</section>

<section id="arch" class="py-20 md:py-28 bg-blue-50/30 border-t border-blue-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-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">ARCHITECTURE</span>
            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Clean Architecture. Modern Patterns.</h2>
            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">Designed for scalability, maintainability, and separation of concerns.</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-blue-50 hover:shadow-sm hover:border-blue-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">Vertical Slice Architecture</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Feature-first organization. Each use case is an independent slice with its own commands, queries, handlers, and validation.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-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="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>
                <h3 class="text-lg font-semibold text-gray-900">CQRS with MediatR</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Commands and queries separated at the protocol level. MediatR handles pipeline behaviors for logging, validation, and caching.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-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">Multitenant & Multibranch</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Built-in tenant isolation and branch management. Deploy multiple versions side by side with zero data leakage.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-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 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Firebase SSO</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Secure single sign-on with Firebase Authentication. Supports Google, Microsoft, email/password, and custom tokens out of the box.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-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.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">EF Core & MS SQL</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Entity Framework Core with SQL Server. Migrations, eager loading, value conversions, and raw SQL when you need it.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-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.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Minimal APIs</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Lightweight HTTP APIs with minimal ceremony. Perfect for microservices, BFF patterns, and integration endpoints.</p>
            </div>
        </div>
    </div>
</section>

<section id="frontend" class="py-20 md:py-28 border-t border-blue-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 gap-12 items-center">
            <div>
                <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">FRONTEND</span>
                <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Modern Web UI Stack</h2>
                <p class="mt-4 text-gray-500 leading-relaxed">Combining the power of Tailwind CSS for utility-first styling, AlpineJS for reactive components, and ChartJS for beautiful dashboards.</p>
                <div class="mt-8 space-y-4">
                    <div class="flex items-start gap-3">
                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
                        <div><span class="font-semibold text-gray-900 text-sm">Tailwind CSS</span><p class="text-xs text-gray-400 mt-0.5">Utility-first responsive design with custom themes</p></div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
                        <div><span class="font-semibold text-gray-900 text-sm">AlpineJS</span><p class="text-xs text-gray-400 mt-0.5">Lightweight reactive JavaScript framework</p></div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
                        <div><span class="font-semibold text-gray-900 text-sm">ChartJS</span><p class="text-xs text-gray-400 mt-0.5">Interactive charts and data visualization</p></div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
                        <div><span class="font-semibold text-gray-900 text-sm">Blazor / Razor Pages / MVC</span><p class="text-xs text-gray-400 mt-0.5">Full-stack .NET web UI with C#</p></div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="p-5 bg-blue-50/50 rounded-xl border border-blue-100"><div class="text-2xl font-bold text-blue-600">HTML</div><div class="text-xs text-gray-400 mt-1">Semantic Markup</div></div>
                <div class="p-5 bg-blue-50/50 rounded-xl border border-blue-100"><div class="text-2xl font-bold text-blue-600">Tailwind</div><div class="text-xs text-gray-400 mt-1">CSS Framework</div></div>
                <div class="p-5 bg-blue-50/50 rounded-xl border border-blue-100"><div class="text-2xl font-bold text-blue-600">AlpineJS</div><div class="text-xs text-gray-400 mt-1">Reactive UI</div></div>
                <div class="p-5 bg-blue-50/50 rounded-xl border border-blue-100"><div class="text-2xl font-bold text-blue-600">ChartJS</div><div class="text-xs text-gray-400 mt-1">Data Viz</div></div>
            </div>
        </div>
    </div>
</section>

<section id="cta" class="py-20 md:py-28 bg-blue-600 text-white">
    <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">Ready to Build?</h2>
        <p class="mt-4 text-blue-100 max-w-xl mx-auto">Start your next enterprise application with a rock-solid foundation. Well documented, and production ready.</p>
        <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
            <button class="inline-flex items-center gap-2 px-6 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition text-sm">Get Started Free</button>
        </div>
    </div>
</section>

<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-blue-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>
                    EnterpriseKit
                </div>
                <p class="text-sm text-gray-500 leading-relaxed">Enterprise application platform built on .NET 10. Modern, modular, and multitenant.</p>
            </div>
            <div>
                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Platform</h4>
                <div class="space-y-2"><a class="footer-link block">ASP.NET Core</a><a class="footer-link block">Blazor</a><a class="footer-link block">Minimal API</a><a class="footer-link block">EF Core</a></div>
            </div>
            <div>
                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Features</h4>
                <div class="space-y-2"><a class="footer-link block">Multitenant</a><a class="footer-link block">Multibranch</a><a class="footer-link block">Firebase SSO</a><a class="footer-link block">CQRS</a></div>
            </div>
            <div>
                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Resources</h4>
                <div class="space-y-2"><a class="footer-link block">Documentation</a><a class="footer-link block">API Reference</a><a class="footer-link block">GitHub</a><a class="footer-link block">Contact</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 EnterpriseKit. 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>

<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>
</div>


    <script src="js/landing.js"></script>
