{% extends 'base.html' %}

{% block main %}
<div x-data="{
          q: '',
          articles: [
            { id:1, title:'Setting up your first workspace', cat:'Getting started' },
            { id:2, title:'Inviting and managing team members', cat:'Account' },
            { id:3, title:'Understanding your invoice', cat:'Billing' },
            { id:4, title:'Enabling two-factor authentication', cat:'Security' },
            { id:5, title:'Connecting Slack notifications', cat:'Integrations' },
            { id:6, title:'Exporting your data', cat:'Account' },
            { id:7, title:'Upgrading or downgrading your plan', cat:'Billing' },
            { id:8, title:'Generating API keys', cat:'Integrations' }
          ],
          get results() {
            const t = this.q.trim().toLowerCase();
            if (!t) return [];
            return this.articles.filter(a => a.title.toLowerCase().includes(t) || a.cat.toLowerCase().includes(t));
          }
        }">
        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Help Center</h1>
              <p class="ax-page-head__subtitle">Search the knowledge base, browse popular topics, or reach our team directly.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary" href="/pages/faq/">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 16v.01"/><path d="M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483"/></svg>
                <span class="ax-btn__label">View FAQ</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ HERO SEARCH ════════════════ -->
        <div class="ax-dash-grid">
          <section class="ax-card ax-col--12" role="search" aria-label="Search help articles">
            <div class="ax-card__body" style="text-align:center;padding-block:var(--ax-space-8);display:flex;flex-direction:column;align-items:center;gap:var(--ax-space-5);">
              <div>
                <h2 style="font-family:var(--ax-font-display);font-size:var(--ax-text-2xl);font-weight:600;color:var(--ax-text-strong);margin:0;">How can we help?</h2>
                <p style="color:var(--ax-text-muted);font-size:var(--ax-text-md);margin-top:var(--ax-space-2);">Search 200+ articles across every Vireo feature.</p>
              </div>
              <div style="position:relative;max-width:600px;width:100%;">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="var(--ax-text-subtle)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="position:absolute;inset-inline-start:var(--ax-space-4);top:50%;transform:translateY(-50%);pointer-events:none;"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                <input type="search" class="ax-input ax-input--lg" placeholder="Search for articles, e.g. “reset password”" aria-label="Search help articles" x-model="q" @keydown.escape="q=''" style="padding-inline-start:var(--ax-space-10);text-align:start;">
              </div>
              <!-- live results -->
              <div x-show="q.trim() !== ''" x-cloak style="max-width:600px;width:100%;text-align:start;">
                <p class="ax-num" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);font-family:var(--ax-font-mono);margin-bottom:var(--ax-space-2);" aria-live="polite" x-text="results.length + ' result' + (results.length===1?'':'s') + ' for \'' + q.trim() + '\''"></p>
                <ul class="ax-list ax-list--compact" x-show="results.length > 0" style="border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);overflow:hidden;">
                  <template x-for="a in results" :key="a.id">
                    <li class="ax-list__row" style="cursor:pointer;">
                      <span class="ax-list__leading"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-text-subtle)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/><path d="M9 9l1 0"/><path d="M9 13l6 0"/><path d="M9 17l6 0"/></svg></span>
                      <span class="ax-list__content"><span class="ax-list__title" x-text="a.title"></span></span>
                      <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--sm" x-text="a.cat"></span></span>
                    </li>
                  </template>
                </ul>
                <div x-show="results.length === 0" style="border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);padding:var(--ax-space-5);text-align:center;">
                  <p style="color:var(--ax-text-strong);font-weight:var(--ax-weight-medium);">No articles match <span x-text="'\'' + q.trim() + '\''"></span></p>
                  <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:4px;">Try a broader term, or submit a request below.</p>
                  <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" style="margin-top:var(--ax-space-3);" @click="q=''">Clear search</button>
                </div>
              </div>
            </div>
          </section>
        </div>

        <!-- ════════════════ CATEGORY GRID ════════════════ -->
        <div class="ax-dash-grid" style="margin-block-start:var(--ax-space-6);">
          <section class="ax-card ax-col--4 ax-card--interactive" role="region" aria-label="Getting started">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
              <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"/><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"/><path d="M14 9a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg></span>
              <div>
                <h3 style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);font-size:var(--ax-text-md);">Getting started</h3>
                <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:4px;">Set up your account, create a workspace and invite your team.</p>
              </div>
              <span class="ax-num" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);font-family:var(--ax-font-mono);margin-top:auto;">18 articles</span>
            </div>
          </section>
          <section class="ax-card ax-col--4 ax-card--interactive" role="region" aria-label="Account">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
              <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-violet) 18%,transparent);color:var(--ax-viz-violet);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/><path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"/></svg></span>
              <div>
                <h3 style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);font-size:var(--ax-text-md);">Account</h3>
                <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:4px;">Manage your profile, members, roles and workspace settings.</p>
              </div>
              <span class="ax-num" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);font-family:var(--ax-font-mono);margin-top:auto;">24 articles</span>
            </div>
          </section>
          <section class="ax-card ax-col--4 ax-card--interactive" role="region" aria-label="Billing">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
              <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-emerald) 18%,transparent);color:var(--ax-viz-emerald);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -8"/><path d="M3 10l18 0"/><path d="M7 15l.01 0"/><path d="M11 15l2 0"/></svg></span>
              <div>
                <h3 style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);font-size:var(--ax-text-md);">Billing</h3>
                <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:4px;">Invoices, plans, payment methods and refunds.</p>
              </div>
              <span class="ax-num" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);font-family:var(--ax-font-mono);margin-top:auto;">15 articles</span>
            </div>
          </section>
          <section class="ax-card ax-col--4 ax-card--interactive" role="region" aria-label="Security">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
              <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-amber) 18%,transparent);color:var(--ax-viz-amber);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"/><path d="M11 11a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M12 12l0 2.5"/></svg></span>
              <div>
                <h3 style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);font-size:var(--ax-text-md);">Security</h3>
                <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:4px;">Two-factor auth, sessions, SSO and data protection.</p>
              </div>
              <span class="ax-num" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);font-family:var(--ax-font-mono);margin-top:auto;">12 articles</span>
            </div>
          </section>
          <section class="ax-card ax-col--4 ax-card--interactive" role="region" aria-label="Integrations">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
              <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-pink) 18%,transparent);color:var(--ax-viz-pink);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.785 6l8.215 8.215l-2.054 2.054a5.81 5.81 0 1 1 -8.215 -8.215l2.054 -2.054"/><path d="M4 20l3.5 -3.5"/><path d="M15 4l-3.5 3.5"/><path d="M20 9l-3.5 3.5"/></svg></span>
              <div>
                <h3 style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);font-size:var(--ax-text-md);">Integrations</h3>
                <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:4px;">Connect Slack, GitHub, Stripe and the REST API.</p>
              </div>
              <span class="ax-num" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);font-family:var(--ax-font-mono);margin-top:auto;">31 articles</span>
            </div>
          </section>
          <section class="ax-card ax-col--4 ax-card--interactive" role="region" aria-label="API & developers">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
              <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:var(--ax-accent-wash);color:var(--ax-accent);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 8l-4 4l4 4"/><path d="M17 8l4 4l-4 4"/><path d="M14 4l-4 16"/></svg></span>
              <div>
                <h3 style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);font-size:var(--ax-text-md);">API &amp; developers</h3>
                <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:4px;">Authentication, webhooks, rate limits and SDKs.</p>
              </div>
              <span class="ax-num" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);font-family:var(--ax-font-mono);margin-top:auto;">27 articles</span>
            </div>
          </section>
        </div>

        <!-- ════════════════ POPULAR + TICKET FORM ════════════════ -->
        <div class="ax-dash-grid" style="margin-block-start:var(--ax-space-6);">

          <!-- popular articles -->
          <section class="ax-card ax-col--7" role="region" aria-label="Popular articles" x-data="{ open: null }">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Most read</span>
                <h2 class="ax-card__title">Popular articles</h2>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-accordion">
                <div class="ax-accordion__item">
                  <button type="button" class="ax-accordion__header" :aria-expanded="(open===0).toString()" @click="open = open===0 ? null : 0">
                    <span class="ax-accordion__title">How do I reset my password?</span>
                    <svg class="ax-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>
                  </button>
                  <div class="ax-accordion__panel" x-show="open===0" x-collapse>Select "Forgot password" on the sign-in screen, enter your email, and follow the secure link we send. Reset links expire after 30 minutes for your protection.</div>
                </div>
                <div class="ax-accordion__item">
                  <button type="button" class="ax-accordion__header" :aria-expanded="(open===1).toString()" @click="open = open===1 ? null : 1">
                    <span class="ax-accordion__title">Where can I download my invoices?</span>
                    <svg class="ax-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>
                  </button>
                  <div class="ax-accordion__panel" x-show="open===1" x-collapse>Every invoice is listed under Settings → Billing → Invoice history. Use the download icon on any row to grab a PDF. Invoices are retained for 7 years.</div>
                </div>
                <div class="ax-accordion__item">
                  <button type="button" class="ax-accordion__header" :aria-expanded="(open===2).toString()" @click="open = open===2 ? null : 2">
                    <span class="ax-accordion__title">How do I add a team member?</span>
                    <svg class="ax-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>
                  </button>
                  <div class="ax-accordion__panel" x-show="open===2" x-collapse>Open Settings → Members, click "Invite", enter their email and choose a role. They'll receive an invitation that's valid for 7 days.</div>
                </div>
                <div class="ax-accordion__item">
                  <button type="button" class="ax-accordion__header" :aria-expanded="(open===3).toString()" @click="open = open===3 ? null : 3">
                    <span class="ax-accordion__title">Can I export my workspace data?</span>
                    <svg class="ax-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>
                  </button>
                  <div class="ax-accordion__panel" x-show="open===3" x-collapse>Yes. Go to Settings → Data &amp; privacy → Export. We'll prepare a full archive and email you a secure download link, usually within an hour.</div>
                </div>
              </div>
            </div>
            <div class="ax-card__footer"><a class="ax-link" href="/pages/faq/">Browse all articles →</a></div>
          </section>

          <!-- ticket form -->
          <section class="ax-card ax-col--5" role="region" aria-label="Submit a request"
            x-data="{ state:'idle', ref:'' }">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Still stuck?</span>
                <h2 class="ax-card__title">Submit a request</h2>
                <p class="ax-card__subtitle">We typically reply within a few hours.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <!-- success -->
              <div class="ax-flex" x-show="state==='success'" x-cloak style="flex-direction:column;align-items:center;text-align:center;gap:var(--ax-space-3);padding:var(--ax-space-6) 0;">
                <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:var(--ax-success-50);color:var(--ax-success-500);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg></span>
                <div>
                  <p style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);font-size:var(--ax-text-md);">Request submitted</p>
                  <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:4px;">We've emailed you a confirmation. Your reference:</p>
                  <button type="button" class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-md);color:var(--ax-accent);background:var(--ax-accent-wash);border:0;border-radius:var(--ax-radius-sm);padding:4px var(--ax-space-3);margin-top:var(--ax-space-2);cursor:pointer;" x-text="ref" @click="navigator.clipboard && navigator.clipboard.writeText(ref)" :aria-label="'Copy reference ' + ref"></button>
                </div>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" @click="state='idle'">Submit another</button>
              </div>

              <!-- form -->
              <form class="ax-flex" x-show="state!=='success'" @submit.prevent="state='loading'; setTimeout(() => { ref='TKT-' + Math.floor(100000 + Math.random()*900000); state='success'; }, 600)" style="flex-direction:column;gap:var(--ax-space-4);">
                <div class="ax-field">
                  <label class="ax-label" for="t-subject">Subject</label>
                  <input id="t-subject" type="text" class="ax-input" placeholder="Brief summary of your issue" required :readonly="state==='loading'">
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-3);">
                  <div class="ax-field">
                    <label class="ax-label" for="t-cat">Category</label>
                    <select id="t-cat" class="ax-select" required :disabled="state==='loading'">
                      <option value="">Select…</option>
                      <option>Account</option>
                      <option>Billing</option>
                      <option>Security</option>
                      <option>Integrations</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div class="ax-field">
                    <label class="ax-label" for="t-pri">Priority</label>
                    <select id="t-pri" class="ax-select" :disabled="state==='loading'">
                      <option>Low</option>
                      <option selected>Normal</option>
                      <option>High</option>
                      <option>Urgent</option>
                    </select>
                  </div>
                </div>
                <div class="ax-field">
                  <label class="ax-label" for="t-desc">Description</label>
                  <textarea id="t-desc" class="ax-textarea" rows="4" placeholder="Tell us what's happening and what you've tried…" required :readonly="state==='loading'"></textarea>
                </div>
                <div class="ax-field">
                  <span class="ax-label">Attachment</span>
                  <label for="t-file" class="ax-btn ax-btn--secondary ax-btn--block" style="cursor:pointer;">
                    <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5"/></svg>
                    <span class="ax-btn__label">Add a screenshot</span>
                  </label>
                  <input id="t-file" type="file" class="ax-visually-hidden" aria-label="Add an attachment">
                </div>
                <button type="submit" class="ax-btn ax-btn--primary ax-btn--block" :disabled="state==='loading'" :aria-busy="state==='loading'">
                  <svg x-show="state==='loading'" x-cloak class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="animation:ax-spin 0.7s var(--ax-ease-linear) infinite;"><path d="M12 3a9 9 0 1 0 9 9"/></svg>
                  <span class="ax-btn__label" x-text="state==='loading' ? 'Sending…' : 'Submit request'">Submit request</span>
                </button>
              </form>
            </div>
          </section>
        </div>

        <!-- ════════════════ CONTACT CHANNELS ════════════════ -->
        <div class="ax-dash-grid" style="margin-block-start:var(--ax-space-6);">
          <section class="ax-card ax-col--3 ax-card--interactive" role="region" aria-label="Email support">
            <div class="ax-card__body" style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--ax-space-2);">
              <span class="ax-avatar ax-avatar--md ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"/><path d="M3 7l9 6l9 -6"/></svg></span>
              <p style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Email</p>
              <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">support@vireo.io</p>
            </div>
          </section>
          <section class="ax-card ax-col--3 ax-card--interactive" role="region" aria-label="Live chat">
            <div class="ax-card__body" style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--ax-space-2);">
              <span class="ax-avatar ax-avatar--md ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-emerald) 18%,transparent);color:var(--ax-viz-emerald);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"/><path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"/></svg></span>
              <p style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Live chat</p>
              <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Mon–Fri, 9am–6pm</p>
            </div>
          </section>
          <section class="ax-card ax-col--3 ax-card--interactive" role="region" aria-label="Documentation">
            <div class="ax-card__body" style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--ax-space-2);">
              <span class="ax-avatar ax-avatar--md ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-violet) 18%,transparent);color:var(--ax-viz-violet);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 4v16h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12"/><path d="M19 16h-12a2 2 0 0 0 -2 2"/><path d="M9 8h6"/></svg></span>
              <p style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Docs</p>
              <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">docs.vireo.io</p>
            </div>
          </section>
          <section class="ax-card ax-col--3 ax-card--interactive" role="region" aria-label="Community">
            <div class="ax-card__body" style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--ax-space-2);">
              <span class="ax-avatar ax-avatar--md ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-amber) 18%,transparent);color:var(--ax-viz-amber);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"/></svg></span>
              <p style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Community</p>
              <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">community.vireo.io</p>
            </div>
          </section>
        </div>

      
</div>
{% endblock %}