@page
@model FeaturesModel
@{
    ViewData["Title"] = "Features - Rich Text Editor for ASP.NET Core";
}

<!-- Hero -->
<section class="relative overflow-hidden">
    <div class="hero-orb hero-orb-left"></div>
    <div class="hero-orb hero-orb-right"></div>
    <div class="mx-auto max-w-9xl px-6 pb-12 pt-14 text-center lg:px-10 lg:pb-16 lg:pt-20">
        <div class="inline-flex items-center gap-2 rounded-full border border-white/80 bg-white/90 px-4 py-2 text-xs font-semibold uppercase tracking-[0.24em] text-slate-600 shadow-card">
            <span class="h-2 w-2 rounded-full bg-cyan-500"></span>
            Comprehensive Feature Set
        </div>
        <h1 class="mx-auto mt-8 max-w-4xl text-5xl font-extrabold tracking-tight text-ink sm:text-6xl">
            Everything you need to build<br />
            <span class="text-cyan-600">rich editing experiences</span>
        </h1>
        <p class="mx-auto mt-7 max-w-3xl text-lg leading-8 text-slate-600 sm:text-xl">
            A professional WYSIWYG editor for ASP.NET Core with 21+ years of refinement. Clean HTML output, image management, AI-assisted review, structured JSON workflows, and more.
        </p>
        <div class="mt-10 flex flex-wrap justify-center gap-4">
            <a href="/Download" class="rounded-full bg-cyan-500 px-7 py-4 text-sm font-semibold text-white shadow-lg shadow-cyan-500/20 transition hover:-translate-y-0.5 hover:bg-cyan-600">Download Free Trial</a>
            <a href="/Demos/AiToolkit" class="rounded-full border border-slate-300 bg-white px-7 py-4 text-sm font-semibold text-slate-700 transition hover:border-slate-400 hover:text-ink">AI Toolkit Demo</a>
            <a href="/Demos/Overview" class="rounded-full border border-slate-300 bg-white px-7 py-4 text-sm font-semibold text-slate-700 transition hover:border-slate-400 hover:text-ink">Explore Demos</a>
        </div>
    </div>
</section>

<!-- Editing & Formatting -->
<section class="mx-auto max-w-9xl px-6 py-10 lg:px-10 lg:py-14">
    <div class="mb-10 text-center">
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-600">Editing & Formatting</p>
        <h2 class="mt-3 text-3xl font-extrabold tracking-tight text-ink sm:text-4xl">Powerful content authoring</h2>
        <p class="mx-auto mt-4 max-w-2xl text-base text-slate-500">Full rich-text editing with clean HTML output, advanced table management, and intuitive formatting controls.</p>
    </div>
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-50">
                <svg class="h-5 w-5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
            </div>
            <h3>WYSIWYG editing</h3>
            <p>Full rich-text editing with headings, inline formatting, lists, tables, links, and embedded media. What you see is what you get.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-50">
                <svg class="h-5 w-5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
            </div>
            <h3>Cleanest HTML output</h3>
            <p>Outputs well-formed XHTML 1.0 or HTML 5. Built from the ground up to produce clean, semantic markup.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-50">
                <svg class="h-5 w-5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
            </div>
            <h3>Advanced table manager</h3>
            <p>Create and modify tables with cell merge, split, row/column operations. Set borders, alignment, and spacing with context menus.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-50">
                <svg class="h-5 w-5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
            <h3>Paste from Word</h3>
            <p>Automatically cleans unnecessary markup when pasting from Microsoft Word, resulting in faster-loading, cleaner pages.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-50">
                <svg class="h-5 w-5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            </div>
            <h3>Find and Replace</h3>
            <p>Built-in dialog to locate and modify text with search criteria, replacement text, and case sensitivity options.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-50">
                <svg class="h-5 w-5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
            </div>
            <h3>Unlimited undo/redo</h3>
            <p>Custom implementation safely handles complex operations including table cell merge and column deletion.</p>
        </article>
    </div>
</section>

<!-- Media & Content -->
<section class="mx-auto max-w-9xl px-6 py-10 lg:px-10 lg:py-14">
    <div class="mb-10 text-center">
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-600">Media & Content</p>
        <h2 class="mt-3 text-3xl font-extrabold tracking-tight text-ink sm:text-4xl">Rich media management</h2>
        <p class="mx-auto mt-4 max-w-2xl text-base text-slate-500">Upload images, browse galleries, insert videos, and manage templates from built-in dialogs.</p>
    </div>
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50">
                <svg class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <h3>Image gallery</h3>
            <p>Browse server folders, drag-and-drop upload, resize inline, and insert images from the built-in gallery with search and folder creation.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50">
                <svg class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
            </div>
            <h3>Advanced file upload</h3>
            <p>Integrated high-performance upload. Select multiple files at once with client-side validation of file size and type.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50">
                <svg class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
            </div>
            <h3>Insert video</h3>
            <p>Easily embed YouTube, MP4, and audio content into your HTML documents with the built-in video dialog.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50">
                <svg class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
            </div>
            <h3>Content templates</h3>
            <p>Insert professionally designed starter blocks &mdash; invoices, newsletters, layouts &mdash; with one click from the template gallery.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50">
                <svg class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
            </div>
            <h3>Downloadable files</h3>
            <p>Upload document files and create links to downloadable files like ZIP, PPT, PDF, and more from your HTML content.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50">
                <svg class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <h3>Emoji &amp; special characters</h3>
            <p>Insert emoji and special characters from built-in dialogs with categorized browsing and search.</p>
        </article>
    </div>
</section>

<!-- Customization & Integration -->
<section class="mx-auto max-w-9xl px-6 py-10 lg:px-10 lg:py-14">
    <div class="mb-10 text-center">
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-600">Customization & Integration</p>
        <h2 class="mt-3 text-3xl font-extrabold tracking-tight text-ink sm:text-4xl">Built for developers</h2>
        <p class="mx-auto mt-4 max-w-2xl text-base text-slate-500">Flexible APIs, configurable toolbars, AI review flows, structured-content helpers, and seamless ASP.NET Core integration.</p>
    </div>
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-violet-50">
                <svg class="h-5 w-5 text-violet-600" 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>
            </div>
            <h3>Easy implementation</h3>
            <p>Add rich editing to your app with a single Tag Helper. Works with Razor Pages and MVC out of the box, then opt into AI Toolkit or structured content with extra attributes.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-violet-50">
                <svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg>
            </div>
            <h3>Configurable toolbar</h3>
            <p>Flexible toolbar with presets (default, full, basic) or hand-pick buttons. Supports multi-row layouts and right-aligned groups.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-violet-50">
                <svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2m0 14v2m7-9h2M3 12H1m15.364 6.364l1.414 1.414M6.222 6.222L4.808 4.808m12.728 0l-1.414 1.414M6.222 17.778l-1.414 1.414"/><circle cx="12" cy="12" r="4"/></svg>
            </div>
            <h3>AI Toolkit</h3>
            <p>Enable Ask AI, AI Chat, and a server-backed AI Review drawer directly from the tag helper for modern editor-native AI workflows.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-violet-50">
                <svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 5h16M4 12h16M4 19h10"/><path stroke-linecap="round" stroke-linejoin="round" d="M16 17l2 2 4-4"/></svg>
            </div>
            <h3>Structured content bridge</h3>
            <p>Move the editor into semantic JSON, Markdown conversion, static HTML rendering, and validation without leaving the ASP.NET Core package.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-violet-50">
                <svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
            </div>
            <h3>CSS-based skins</h3>
            <p>Ship with default, gray, blue, or Office 2007 Blue skin. Customize the look by modifying CSS classes to match your brand.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-violet-50">
                <svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <h3>Powerful JavaScript API</h3>
            <p>Comprehensive client-side API with execCommand, getHTML, setHTML, and a rich set of events for full control.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-violet-50">
                <svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"/></svg>
            </div>
            <h3>Extensible plugins</h3>
            <p>Rich plug-in development environment. Create custom dialogs, toolbar buttons, and extend editor functionality.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-violet-50">
                <svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
            </div>
            <h3>23 languages</h3>
            <p>Multi-language support via external JavaScript files. Switch language with a single property or create a new one in minutes.</p>
        </article>
    </div>
</section>

<!-- Safety & Quality -->
<section class="mx-auto max-w-9xl px-6 py-10 lg:px-10 lg:py-14">
    <div class="mb-10 text-center">
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-600">Safety & Quality</p>
        <h2 class="mt-3 text-3xl font-extrabold tracking-tight text-ink sm:text-4xl">Production-ready reliability</h2>
        <p class="mx-auto mt-4 max-w-2xl text-base text-slate-500">Autosave drafts, content validation, accessibility compliance, and security controls built in.</p>
    </div>
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50">
                <svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
            </div>
            <h3>Draft autosave</h3>
            <p>Automatically persist drafts to local storage so users never lose work, even after a page refresh or accidental navigation.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50">
                <svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><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>
            </div>
            <h3>Security &amp; access control</h3>
            <p>Content filtering with white and black lists. Control HTML elements, attributes, and limit formatting options.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50">
                <svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
            </div>
            <h3>MaxHTMLLength / MaxTextLength</h3>
            <p>Limit user input length to protect your database from exceeding allowed field sizes. Real-time character counting.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50">
                <svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
            </div>
            <h3>Design, HTML &amp; Preview</h3>
            <p>Create content in WYSIWYG view, work directly in HTML source mode, or preview how content will display on a web page.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50">
                <svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
            </div>
            <h3>Extremely fast loading</h3>
            <p>Only loads necessary scripts. Clean, compact, and optimized for performance while remaining powerful and feature-rich.</p>
        </article>

        <article class="feature-card">
            <div class="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50">
                <svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
            <h3>W3C WAI &amp; Section 508</h3>
            <p>Accessibility settings ensure compliance with Section 508 so people with disabilities can have full access to your content.</p>
        </article>
    </div>
</section>

<!-- Additional Features -->
<section class="mx-auto max-w-9xl px-6 py-10 lg:px-10 lg:py-14">
    <div class="mb-10 text-center">
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-600">And Much More</p>
        <h2 class="mt-3 text-3xl font-extrabold tracking-tight text-ink sm:text-4xl">Every detail covered</h2>
    </div>
    <div class="mx-auto max-w-5xl">
        <div class="grid gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Context menu controls</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Format Painter</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Full-screen editing</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Enter key configuration</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Absolute vs. relative paths</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">CSS text indenting</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Custom placeholder tags</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">External CSS files</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">HTML code indentation</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Tag path inspector</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Code snippets</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Print content</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">License file validation</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Cross-browser support</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg py-3">
                <svg class="h-5 w-5 flex-shrink-0 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                <span class="text-sm font-medium text-slate-700">Paste formatting modes</span>
            </div>
        </div>
    </div>
</section>

<!-- Stats -->
<section class="mx-auto max-w-9xl px-6 py-10 lg:px-10">
    <div class="rounded-2xl border border-slate-200/80 bg-slate-50/80 p-10">
        <div class="flex flex-wrap items-center justify-center gap-16 text-center">
            <div>
                <p class="text-4xl font-extrabold tracking-tight text-ink">25,000+</p>
                <p class="mt-2 text-sm font-medium text-slate-500">Customers worldwide</p>
            </div>
            <div>
                <p class="text-4xl font-extrabold tracking-tight text-ink">21+</p>
                <p class="mt-2 text-sm font-medium text-slate-500">Years of development</p>
            </div>
            <div>
                <p class="text-4xl font-extrabold tracking-tight text-ink">60+</p>
                <p class="mt-2 text-sm font-medium text-slate-500">Countries served</p>
            </div>
            <div>
                <p class="text-4xl font-extrabold tracking-tight text-ink">98</p>
                <p class="mt-2 text-sm font-medium text-slate-500">Live demos</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="mx-auto max-w-9xl px-6 pb-20 pt-8 lg:px-10 lg:pb-24">
    <div class="rounded-[2.5rem] border border-slate-200 bg-slate-950 px-8 py-10 text-center text-white shadow-soft lg:px-12 lg:py-12">
        <h2 class="text-3xl font-bold tracking-tight">Ready to get started?</h2>
        <p class="mx-auto mt-4 max-w-2xl text-base leading-8 text-slate-300">
            Download the fully functional 30-day trial or purchase a perpetual license today.
        </p>
        <div class="mt-8 flex flex-wrap justify-center gap-4">
            <a href="/Download" class="rounded-full bg-white px-7 py-4 text-sm font-semibold text-slate-950 transition hover:bg-slate-200">Download Free Trial</a>
            <a href="/Pricing" class="rounded-full border border-white/20 px-7 py-4 text-sm font-semibold text-white transition hover:bg-white/10">View Pricing</a>
        </div>
    </div>
</section>
