Ctrl K
ComunidadGuías…

site/index.html

Rama main · réplica de lectura del repositorio original.

Archivo original ↗Preguntar a KiBot
<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="utf-8" />
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-49RD5H9MR3"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-49RD5H9MR3');
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Fonoster · AI that answers the phone</title>
    <meta name="description" content="Build, test, and run voice agents on real phone lines. On Fonoster Cloud or your own servers." />
    <meta name="theme-color" content="#181818" />
    <link rel="canonical" href="https://fonoster.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Fonoster" />
    <meta property="og:title" content="Fonoster · AI that answers the phone" />
    <meta property="og:description" content="Build, test, and run voice agents on real phone lines. On Fonoster Cloud or your own servers." />
    <meta property="og:url" content="https://fonoster.com/" />
    <meta property="og:image" content="https://fonoster.com/assets/img/og.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="AI that answers the phone — Fonoster" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@fonoster" />
    <link rel="icon" href="assets/img/favicon.ico" />
    <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@400;500;600&family=Roboto+Mono:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="assets/css/v1.css" />
    <script>
      try {
        document.documentElement.dataset.theme = localStorage.getItem("fonoster.theme") === "light" ? "light" : "dark";
      } catch (e) {}
    </script>
  </head>
  <body data-page="home" data-icons="assets/img/icons.svg">
    <script src="assets/js/notice.js"></script>
    <header class="nav" data-nav>
      <div class="container nav__in">
        <a class="logo" href="./" aria-label="Fonoster">
          <img class="logo--dark" src="assets/img/logo-dark.svg" alt="Fonoster" width="124" height="32" />
          <img class="logo--light" src="assets/img/logo.svg" alt="Fonoster" width="124" height="32" />
        </a>
        <nav class="nav__links" aria-label="Main">
          <div class="menu" data-products>
            <button class="menu__btn" type="button" aria-expanded="false" aria-controls="products-menu" data-products-btn>
              <span data-i18n="nav.products">Products</span><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-chevron-down"></use></svg>
            </button>
            <div class="menu__panel" id="products-menu" hidden>
              <a class="menu__item" href="streams/"><span class="menu__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-audio-lines"></use></svg></span><span class="menu__text"><b data-i18n="nav.streams">Bidirectional Streams</b><span data-i18n="nav.streamsLine">Bring your own bot over WebSocket</span></span></a>
              <a class="menu__item" href="autopilot/"><span class="menu__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-bot"></use></svg></span><span class="menu__text"><b data-i18n="nav.autopilot">Autopilot</b><span data-i18n="nav.autopilotLine">AI agents from one config file</span></span></a>
              <a class="menu__item" href="private-regions/"><span class="menu__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-shield-check"></use></svg></span><span class="menu__text"><b data-i18n="nav.regions">Private Regions</b><span data-i18n="nav.regionsLine">Calls run in your own cloud</span></span></a>
            </div>
          </div>
          <a href="https://docs.fonoster.com/" data-i18n="nav.docs">Docs</a>
          <a href="pricing/" data-i18n="nav.pricing">Pricing</a>
        </nav>
        <div class="nav__actions">
          <a class="gh-chip" href="https://github.com/fonoster/fonoster" aria-label="Fonoster on GitHub, 8.1K stars">
            <svg class="icon i-github" aria-hidden="true"><use href="assets/img/icons.svg#i-github"></use></svg>
            <svg class="icon i-star" aria-hidden="true"><use href="assets/img/icons.svg#i-star"></use></svg>
            <span>8.1K</span>
          </a>
          <a class="btn btn--primary btn--sm" href="https://app.fonoster.ai/sign-in" data-i18n="cta.start">Start building</a>
          <button class="nav__menu" type="button" aria-expanded="false" aria-controls="sheet" aria-label="Menu" data-menu data-i18n-attr="aria-label:nav.menu">
            <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-menu"></use></svg>
          </button>
        </div>
      </div>
      <div class="sheet" id="sheet" hidden>
        <span class="sheet__label" data-i18n="nav.products">Products</span>
        <a class="sheet__product" href="streams/"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-audio-lines"></use></svg><span data-i18n="nav.streams">Bidirectional Streams</span></a>
        <a class="sheet__product" href="autopilot/"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-bot"></use></svg><span data-i18n="nav.autopilot">Autopilot</span></a>
        <a class="sheet__product" href="private-regions/"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-shield-check"></use></svg><span data-i18n="nav.regions">Private Regions</span></a>
        <a href="https://docs.fonoster.com/" data-i18n="nav.docs">Docs</a>
        <a href="pricing/" data-i18n="nav.pricing">Pricing</a>
        <a class="btn btn--primary" href="https://app.fonoster.ai/sign-in" data-i18n="cta.start">Start building</a>
      </div>
    </header>

    <main>
      <!-- Hero -->
      <section class="hero" data-loop>
        <div class="atmos" aria-hidden="true">
          <div class="dots"><i class="dots__wave"></i></div>
        </div>
        <div class="container hero__in">
          <div class="hero__copy">
            <a class="badge" href="autopilot/#features" data-reveal>
              <span class="badge__dot"></span>
              <span data-i18n="hero.badge">New · Multilingual code-switching</span>
              <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg>
            </a>
            <h1 class="t-display" data-i18n="hero.title" data-reveal style="--i: 1">AI that answers<br />the phone.</h1>
            <p class="t-lead" data-i18n="hero.sub" data-reveal style="--i: 2">Build, test, and run voice agents on real phone lines.</p>
            <div class="ctas" data-reveal style="--i: 3">
              <a class="btn btn--primary" href="https://app.fonoster.ai/sign-in" data-i18n="cta.start">Start building</a>
              <a class="btn btn--secondary" href="mailto:sales@fonoster.com" data-contact data-i18n="cta.sales">Contact sales</a>
            </div>
          </div>

          <div class="call-demo" data-reveal style="--i: 2">
            <div class="call-demo__glow" aria-hidden="true"></div>
            <div class="phone" data-phone data-speaking="idle" aria-hidden="true">
              <div class="phone__screen">
                <div class="phone__island"></div>
                <div class="phone__status">
                  9:41
                  <span>
                    <svg class="icon"><use href="assets/img/icons.svg#i-signal"></use></svg>
                    <svg class="icon"><use href="assets/img/icons.svg#i-wifi"></use></svg>
                    <svg class="icon"><use href="assets/img/icons.svg#i-battery-full"></use></svg>
                  </span>
                </div>
                <div class="phone__avatar">
                  <div class="phone__core"><svg class="icon"><use href="assets/img/icons.svg#i-audio-lines"></use></svg></div>
                </div>
                <div class="phone__name" data-i18n="phone.name">Fonoster Agent</div>
                <div class="phone__timer" data-phone-timer>00:42</div>
                <div class="phone__caption">
                  <div class="phone__who" data-phone-who>Agent</div>
                  <div class="phone__text" data-phone-text>I can move you to Friday at 10. Does that work?</div>
                  <div class="wave">
                    <i style="--h: 4px; --n: 0"></i><i style="--h: 8px; --n: 1"></i><i style="--h: 12px; --n: 2"></i><i style="--h: 6px; --n: 3"></i><i style="--h: 14px; --n: 4"></i><i style="--h: 10px; --n: 5"></i><i style="--h: 16px; --n: 6"></i><i style="--h: 8px; --n: 7"></i><i style="--h: 12px; --n: 8"></i><i style="--h: 18px; --n: 9"></i><i style="--h: 10px; --n: 10"></i><i style="--h: 6px; --n: 11"></i><i style="--h: 12px; --n: 12"></i><i style="--h: 8px; --n: 13"></i><i style="--h: 4px; --n: 14"></i><i style="--h: 10px; --n: 15"></i><i style="--h: 6px; --n: 16"></i><i style="--h: 3px; --n: 17"></i>
                  </div>
                </div>
                <div class="phone__controls">
                  <span class="ctrl"><svg class="icon"><use href="assets/img/icons.svg#i-mic-off"></use></svg></span>
                  <span class="ctrl ctrl--end"><svg class="icon"><use href="assets/img/icons.svg#i-phone-off"></use></svg></span>
                  <span class="ctrl"><svg class="icon"><use href="assets/img/icons.svg#i-volume-2"></use></svg></span>
                </div>
              </div>
            </div>
            <form class="dock" data-callme aria-label="Get a call from our AI agent" data-i18n-attr="aria-label:demo.label">
              <label class="dock__cc">
                <span class="sr-only" data-i18n="demo.country">Country code</span>
                <select name="country">
                  <option>+1</option>
                  <option>+52</option>
                  <option>+57</option>
                  <option>+34</option>
                  <option>+44</option>
                </select>
                <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-chevron-down"></use></svg>
              </label>
              <span class="dock__div" aria-hidden="true"></span>
              <input
                type="tel"
                name="phone"
                inputmode="tel"
                autocomplete="tel-national"
                placeholder="Phone number"
                aria-label="Phone number"
                data-i18n-attr="placeholder:demo.placeholder;aria-label:demo.placeholder"
              />
              <button class="dock__btn" type="submit">
                <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-phone"></use></svg>
                <span data-i18n="demo.call">Call me</span>
              </button>
              <p class="dock__note" role="status" data-i18n="demo.soon">Live demo calls are coming soon. Talk to sales for a demo.</p>
            </form>
          </div>
        </div>
      </section>

      <!-- Numbers -->
      <section class="numbers" aria-label="Fonoster in numbers">
        <div class="container numbers__grid">
          <div class="num" data-reveal>
            <span class="num__value" data-odo>10K+</span>
            <p class="num__label" data-i18n="numbers.stars">GitHub stars across projects</p>
          </div>
          <div class="num" data-reveal style="--i: 1">
            <span class="num__value" data-odo>1M+</span>
            <p class="num__label" data-i18n="numbers.pulls">Docker pulls</p>
          </div>
          <div class="num" data-reveal style="--i: 2">
            <span class="num__value" data-odo>275</span>
            <p class="num__label" data-i18n="numbers.releases">releases shipped</p>
          </div>
          <div class="num" data-reveal style="--i: 3">
            <span class="num__value" data-odo>2018</span>
            <p class="num__label" data-i18n="numbers.since">building since</p>
          </div>
        </div>
      </section>

      <!-- Use cases -->
      <section class="section" id="use-cases" data-cases>
        <div class="container">
          <div class="uc__head">
            <h2 class="t-h2" data-i18n="uc.title" data-reveal>Built for real calls.</h2>
            <div class="tabs" role="tablist" aria-label="Use cases" data-reveal style="--i: 1">
              <button class="tab" role="tab" id="tab-support" aria-selected="false" aria-controls="case-panel" tabindex="-1" data-case="support">Support</button>
              <button class="tab" role="tab" id="tab-scheduling" aria-selected="true" aria-controls="case-panel" data-case="scheduling">Scheduling</button>
              <button class="tab" role="tab" id="tab-collections" aria-selected="false" aria-controls="case-panel" tabindex="-1" data-case="collections">Collections</button>
              <button class="tab" role="tab" id="tab-sales" aria-selected="false" aria-controls="case-panel" tabindex="-1" data-case="sales">Sales</button>
            </div>
          </div>
          <div class="uc__body" id="case-panel" role="tabpanel" aria-labelledby="tab-scheduling">
            <div class="callcard" data-reveal>
              <div class="callcard__head">
                <div class="who">
                  <span class="who__avatar" data-case-icon><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-phone-outgoing"></use></svg></span>
                  <div>
                    <div class="who__name" data-case-name>Ana R.</div>
                    <div class="who__meta" data-case-meta>Outbound · Spanish / English</div>
                  </div>
                </div>
                <span class="live">01:12</span>
              </div>
              <div class="transcript seq" data-case-transcript>
                <div class="msg msg--a"><div class="bubble bubble--a"><span class="bubble__who">Agent</span><span>Hi Ana — calling to confirm Thursday at 3 PM.</span></div></div>
                <div class="msg msg--c"><div class="bubble bubble--c"><span class="bubble__who">Ana</span><span>¿Podemos pasarlo al viernes en la mañana?</span></div></div>
                <div class="msg msg--e"><span class="chip"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-wrench"></use></svg><span class="chip__label">Tool</span><span>calendar.reschedule("fri 10:00")</span></span></div>
                <div class="msg msg--a"><div class="bubble bubble--a"><span class="bubble__who">Agent</span><span>¡Listo! Viernes a las 10 AM. Nos vemos.</span></div></div>
              </div>
            </div>
            <div class="uc__side" data-reveal style="--i: 1">
              <p class="uc__lead" data-case-lead>Confirms, reschedules, and books — in the caller's language.</p>
              <ul class="uses" data-case-uses>
                <li><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-phone-outgoing"></use></svg>Outbound calls</li>
                <li><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-wrench"></use></svg>Custom tools</li>
                <li><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-languages"></use></svg>Code-switching</li>
              </ul>
              <a class="arrow-link" href="autopilot/">
                <span data-i18n="uc.see">See the example</span>
                <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg>
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- Capabilities -->
      <section class="section" style="padding-top: 0">
        <div class="container">
          <h2 class="t-h3" data-i18n="caps.title" data-reveal>Everything a phone call needs.</h2>
          <div class="caps-grid" data-reveal>
            <div class="cap"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-hash"></use></svg><span data-i18n="caps.numbers">Phone numbers</span></div>
            <div class="cap" style="--i: 1"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-network"></use></svg><span data-i18n="caps.sip">SIP trunking</span></div>
            <div class="cap" style="--i: 2"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-phone-forwarded"></use></svg><span data-i18n="caps.transfer">Call transfer</span></div>
            <div class="cap" style="--i: 3"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-voicemail"></use></svg><span data-i18n="caps.voicemail">Voicemail detection</span></div>
            <div class="cap" style="--i: 4"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-mic"></use></svg><span data-i18n="caps.barge">Barge-in</span></div>
            <div class="cap" style="--i: 5"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-languages"></use></svg><span data-i18n="caps.multi">Multilingual</span></div>
            <div class="cap" style="--i: 6"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-book-open"></use></svg><span data-i18n="caps.kb">Knowledge base</span></div>
            <div class="cap" style="--i: 7"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-wrench"></use></svg><span data-i18n="caps.tools">Custom tools</span></div>
            <div class="cap" style="--i: 8"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-plug"></use></svg><span data-i18n="caps.mcp">MCP server</span></div>
            <div class="cap" style="--i: 9"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-circle-dot"></use></svg><span data-i18n="caps.recording">Call recording</span></div>
            <div class="cap" style="--i: 10"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-audio-waveform"></use></svg><span data-i18n="caps.noise">Noise filtering</span></div>
            <div class="cap" style="--i: 11"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-webhook"></use></svg><span data-i18n="caps.events">Events &amp; webhooks</span></div>
          </div>
        </div>
      </section>

      <!-- Any model, any carrier -->
      <section class="section pipe" data-loop>
        <div class="container">
          <h2 class="t-h2" data-i18n="pipe.title" data-reveal>Any model.<br class="br-m" /> Any carrier.</h2>
          <p class="t-sub" style="margin-top: 12px; --i: 1" data-i18n="pipe.sub" data-reveal>Swap providers with one line. No lock&#8209;in.</p>
          <div class="pipe__flow" data-reveal style="--i: 2">
            <div class="step" style="--i: 0">
              <div class="step__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-phone-call"></use></svg></div>
              <div>
                <div class="step__name" data-i18n="pipe.call">Call</div>
                <div class="step__vendors">PSTN · SIP · WebRTC</div>
              </div>
            </div>
            <div class="plink" style="--i: 1" aria-hidden="true"><i></i></div>
            <div class="step" style="--i: 1">
              <div class="step__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-ear"></use></svg></div>
              <div>
                <div class="step__name" data-i18n="pipe.hear">Hear</div>
                <div class="step__vendors">Deepgram · Google</div>
              </div>
            </div>
            <div class="plink" style="--i: 2" aria-hidden="true"><i></i></div>
            <div class="step" style="--i: 2">
              <div class="step__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-sparkles"></use></svg></div>
              <div>
                <div class="step__name" data-i18n="pipe.think">Think</div>
                <div class="step__vendors">OpenAI · Anthropic<br />Gemini · Groq · Ollama</div>
              </div>
            </div>
            <div class="plink" style="--i: 3" aria-hidden="true"><i></i></div>
            <div class="step" style="--i: 3">
              <div class="step__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-audio-lines"></use></svg></div>
              <div>
                <div class="step__name" data-i18n="pipe.speak">Speak</div>
                <div class="step__vendors">ElevenLabs · Azure<br />Deepgram · Google</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Autopilot block -->
      <section class="band">
        <div class="container section split">
          <div class="split__copy" data-reveal>
            <span class="eyebrow"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-bot"></use></svg><span data-i18n="ap.eyebrow">Autopilot</span></span>
            <h2 class="t-h2" data-i18n="ap.blockTitle">Your agent is a YAML file.</h2>
            <p class="t-sub" data-i18n="ap.blockSub">Pick the voice, the model, and the prompt. Deploy with one command.</p>
            <a class="arrow-link" href="autopilot/">
              <span data-i18n="ap.learn">Learn more about Autopilot</span>
              <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg>
            </a>
          </div>
          <div class="window" data-reveal style="--i: 1">
            <div class="window__bar"><i></i><i></i><i></i>agent.yaml</div>
            <pre class="code show-d"><code><span class="l"><span class="k">name</span>: <span class="v">front-desk</span></span><span
class="l"><span class="k">type</span>: <span class="v">AUTOPILOT</span></span><span
class="l"><span class="k">speechToText</span>:</span><span
class="l">  <span class="k">productRef</span>: <span class="v">stt.deepgram</span></span><span
class="l">  <span class="k">config</span>: { <span class="k">model</span>: <span class="v">nova-3</span>, <span class="k">languageCode</span>: <span class="v">multi</span> }</span><span
class="l"><span class="k">textToSpeech</span>:</span><span
class="l">  <span class="k">productRef</span>: <span class="v">tts.deepgram</span></span><span
class="l">  <span class="k">config</span>: { <span class="k">voice</span>: <span class="v">aura-asteria-en</span> }</span><span
class="l"><span class="k">intelligence</span>:</span><span
class="l">  <span class="k">productRef</span>: <span class="v">llm.openai</span></span><span
class="l">  <span class="k">config</span>:</span><span
class="l">    <span class="k">languageModel</span>: { <span class="k">provider</span>: <span class="v">openai</span>, <span class="k">model</span>: <span class="v">gpt-4o</span> }</span><span
class="l">    <span class="k">conversationSettings</span>:</span><span
class="l">      <span class="k">firstMessage</span>: <span class="v">"Hi! How can I help?"</span></span><span
class="l">      <span class="k">systemPrompt</span>: <span class="v">"You book appointments."</span></span><span
class="l"><span class="c">    # + tools, knowledge base, transfer…</span></span></code></pre>
            <pre class="code show-m"><code><span class="l"><span class="k">name</span>: <span class="v">front-desk</span></span><span
class="l"><span class="k">type</span>: <span class="v">AUTOPILOT</span></span><span
class="l"><span class="k">speechToText</span>:</span><span
class="l">  <span class="k">productRef</span>: <span class="v">stt.deepgram</span></span><span
class="l">  <span class="k">config</span>:</span><span
class="l">    <span class="k">model</span>: <span class="v">nova-3</span></span><span
class="l">    <span class="k">languageCode</span>: <span class="v">multi</span></span><span
class="l"><span class="k">textToSpeech</span>:</span><span
class="l">  <span class="k">productRef</span>: <span class="v">tts.deepgram</span></span><span
class="l">  <span class="k">config</span>: { <span class="k">voice</span>: <span class="v">aura-asteria-en</span> }</span><span
class="l"><span class="k">intelligence</span>:</span><span
class="l">  <span class="k">productRef</span>: <span class="v">llm.openai</span></span><span
class="l">  <span class="k">config</span>:</span><span
class="l">    <span class="k">languageModel</span>:</span><span
class="l">      <span class="k">provider</span>: <span class="v">openai</span></span><span
class="l">      <span class="k">model</span>: <span class="v">gpt-4o</span></span><span
class="l">    <span class="k">conversationSettings</span>:</span><span
class="l">      <span class="k">firstMessage</span>: <span class="v">"Hi! How can I help?"</span></span><span
class="l">      <span class="k">systemPrompt</span>: <span class="v">"You book appointments."</span></span><span
class="l"><span class="c">    # + tools, knowledge base, transfer…</span></span></code></pre>
            <div class="term">
              <div class="term__line">
                <span class="term__prompt">$</span>
                <span><span data-type="fonoster applications:create -f agent.yaml" data-type-m="fonoster \\n  applications:create -f agent.yaml">fonoster applications:create -f agent.yaml</span><span class="caret" aria-hidden="true"></span></span>
              </div>
              <div class="term__out" data-type-out>Done!</div>
            </div>
          </div>
        </div>
      </section>

      <!-- Deploy -->
      <section class="section">
        <div class="container">
          <h2 class="t-h2" data-i18n="deploy.title" data-reveal>Deploy anywhere.</h2>
          <div class="deploy__grid">
            <a class="dcard dcard--hi" href="https://app.fonoster.ai/sign-in" data-reveal>
              <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-cloud"></use></svg>
              <span class="dcard__name" data-i18n="deploy.cloud">Cloud</span>
              <span class="dcard__line" data-i18n="deploy.cloudLine">Managed. Scales with you.</span>
              <span class="arrow-link"><span data-i18n="cta.start">Start building</span><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg></span>
            </a>
            <a class="dcard" href="https://docs.fonoster.com/self-hosting" data-reveal style="--i: 1">
              <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-server"></use></svg>
              <span class="dcard__name" data-i18n="deploy.self">Self-hosted</span>
              <span class="dcard__line" data-i18n="deploy.selfLine">Open-source core, MIT.</span>
              <span class="arrow-link mono">docker compose up<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg></span>
            </a>
            <a class="dcard" href="mailto:sales@fonoster.com" data-contact data-reveal style="--i: 2">
              <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-building-2"></use></svg>
              <span class="dcard__name" data-i18n="deploy.ent">Enterprise</span>
              <span class="dcard__line" data-i18n="deploy.entLine">SLAs, support, on-prem.</span>
              <span class="arrow-link"><span data-i18n="deploy.talk">Talk to us</span><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg></span>
            </a>
          </div>
        </div>
      </section>

      <!-- Final CTA -->
      <section class="final" data-loop>
        <div class="atmos atmos--bottom" aria-hidden="true">
          <div class="dots"><i class="dots__wave"></i></div>
        </div>
        <div class="container final__in">
          <h2 class="t-h1" data-i18n="final.title" data-reveal>Your first agent<br />on the phone today.</h2>
          <div class="ctas" data-reveal style="--i: 1">
            <a class="btn btn--primary" href="https://app.fonoster.ai/sign-in" data-i18n="cta.start">Start building</a>
            <a class="btn btn--secondary" href="mailto:sales@fonoster.com" data-contact data-i18n="cta.sales">Contact sales</a>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="container footer__in">
        <span class="footer__copy" data-i18n="footer.rights">© 2026 Fonoster Inc.</span>
        <nav class="footer__links" aria-label="Footer">
          <a href="https://docs.fonoster.com/" data-i18n="nav.docs">Docs</a>
          <a href="https://github.com/fonoster/fonoster">GitHub</a>
          <a href="https://discord.gg/4QWgSz4hTC">Discord</a>
          <a href="https://x.com/fonoster">X</a>
          <a href="terms/" data-i18n="footer.terms">Terms</a>
          <a href="privacy/" data-i18n="footer.privacy">Privacy</a>
        </nav>
        <div class="prefs">
          <label class="prefs__item">
            <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-globe"></use></svg>
            <span class="sr-only" data-i18n="prefs.language">Language</span>
            <select data-pref="lang">
              <option value="en">English</option>
              <option value="es">Español</option>
            </select>
            <svg class="icon chev" aria-hidden="true"><use href="assets/img/icons.svg#i-chevron-down"></use></svg>
          </label>
          <span class="prefs__div" aria-hidden="true"></span>
          <label class="prefs__item">
            <svg class="icon" aria-hidden="true" data-theme-icon><use href="assets/img/icons.svg#i-moon"></use></svg>
            <span class="sr-only" data-i18n="prefs.theme">Theme</span>
            <select data-pref="theme">
              <option value="dark" data-i18n="prefs.dark">Dark</option>
              <option value="light" data-i18n="prefs.light">Light</option>
            </select>
            <svg class="icon chev" aria-hidden="true"><use href="assets/img/icons.svg#i-chevron-down"></use></svg>
          </label>
        </div>
      </div>
    </footer>

    <dialog class="contact" id="contact" aria-labelledby="contact-title">
      <div class="contact__card">
        <div class="contact__head">
          <svg class="icon contact__mail" aria-hidden="true"><use href="assets/img/icons.svg#i-mail"></use></svg>
          <button class="contact__close" type="button" aria-label="Close" data-i18n-attr="aria-label:contact.close" data-contact-close>
            <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-x"></use></svg>
          </button>
        </div>
        <h2 class="contact__title" id="contact-title" data-i18n="contact.title">Contact sales</h2>
        <p class="contact__line" data-i18n="contact.line">Enterprise plans, Private Regions or support.</p>
        <div class="contact__field">
          <input class="contact__email" type="text" value="sales@fonoster.com" readonly aria-label="Email address" data-i18n-attr="aria-label:contact.email" />
          <button class="btn btn--secondary btn--sm contact__copy" type="button" data-copy>
            <svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-copy"></use></svg>
            <span aria-live="polite" data-i18n="contact.copy">Copy</span>
          </button>
        </div>
      </div>
    </dialog>

    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/v1.js"></script>
  </body>
</html>