{{define "home.html"}}
<div class="page-shell page-shell--wide stack-xl">
    <section class="hero-split hero-split--single">
        <div class="stack-lg">
            <p class="eyebrow">Import-first workflow</p>
            <h1 class="display">Bring your own skill source.</h1>
            <p class="lede">
                Import a source. Convert it. Merge only when needed.
            </p>
            <div class="actions">
                <a href="/convert" class="btn btn--primary">Import a skill</a>
                <a href="/merge" class="btn btn--secondary">Merge existing skills</a>
                <a href="/ssh" class="btn btn--secondary">Open terminal access</a>
            </div>
        </div>
    </section>

    <section>
        <div class="section-heading">
            <p class="eyebrow">Workflow</p>
            <h2 class="section-title">Import. Convert. Merge.</h2>
        </div>
        <div class="feature-grid">
            <article class="feature-card">
                <p class="eyebrow">01</p>
                <h3>Import</h3>
            </article>
            <article class="feature-card feature-card--soft">
                <p class="eyebrow">02</p>
                <h3>Convert</h3>
            </article>
            <article class="feature-card">
                <p class="eyebrow">03</p>
                <h3>Merge</h3>
            </article>
        </div>
    </section>
</div>
{{end}}