<!doctype html>
<html lang="en">
  <head>
    <!-- Google Tag Manager (deferred until first interaction) -->
    <script>
      window.dataLayer=window.dataLayer||[];
      function loadGTM(){
        if(window._gtmLoaded)return;window._gtmLoaded=true;
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-M4ZVW4Q7');
      }
      ['mousedown','mousemove','keydown','scroll','touchstart','click'].forEach(function(e){
        document.addEventListener(e,loadGTM,{once:true,passive:true});
      });
      setTimeout(loadGTM,9000);
    </script>
    <!-- End Google Tag Manager -->
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/logo.png" />
    <link rel="icon" type="image/webp" href="/logo.webp" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link
  rel="preload"
  as="style"
  href="https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700;800&display=swap"
  onload="this.rel='stylesheet'"
/>
<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700;800&display=swap" />
</noscript>
<link rel="preload" as="image" href="/new32-480.webp" type="image/webp" fetchpriority="high" media="(max-width: 767px)">

    <style>
      /* Critical above-fold CSS */
      *,::before,::after{box-sizing:border-box}
      body{margin:0;background:#000;font-family:'Host Grotesk',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
      #root{min-height:100vh}
      .wallpaper{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(95% 92% at 74% 51%,rgba(197,0,0,.44) 0%,rgba(64,0,0,.28) 28%,rgba(11,0,0,.12) 54%,rgba(0,0,0,0) 73%),linear-gradient(90deg,#000 0%,#000 28%,#050000 45%,#100000 66%,#070000 84%,#000 100%)}
      .layout-stage{position:absolute;right:auto;bottom:0;left:50%;z-index:30;width:min(1536px,76vw,150vh);max-width:100vw;max-height:100vh;aspect-ratio:3/2;transform:translateX(-50%);pointer-events:none}
      .support-girl{position:absolute;bottom:calc(min(1536px,76vw,150vh)*.00068531*-60);left:180%;z-index:3;width:auto;height:150%;max-width:none;-o-object-fit:contain;object-fit:contain;transform:translateX(-50%);pointer-events:none}
      @media (max-width: 768px) {
        .font-extrabold{font-weight:800}
        .text-transparent{-webkit-text-fill-color:transparent}
        .bg-clip-text{background-clip:text;-webkit-background-clip:text}
        .animate-pulse{animation:none!important}
        .blur-3xl{filter:blur(1rem)!important}
        .shadow-2xl{box-shadow:0 8px 24px rgba(0,0,0,.2)!important}
        .shadow-xl{box-shadow:0 4px 16px rgba(0,0,0,.2)!important}
        [class*="bg-gradient-to-"]{background-attachment:initial!important}
      }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
    <title>AI Receptionist for Businesses | Human-Like Voice AI | Callacy</title>
    <meta name="description" content="Callacy AI receptionist handles business calls with human-like voice AI, helping teams automate conversations, capture opportunities, and stay available 24/7." />
    <meta property="og:title" content="AI Receptionist for Businesses | Human-Like Voice AI | Callacy" />
    <meta property="og:description" content="Callacy AI receptionist handles business calls with human-like voice AI, helping teams automate conversations, capture opportunities, and stay available 24/7." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://callacy.com" />
    <meta property="og:image" content="https://callacy.com/logo.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content="https://callacy.com/logo.png" />
    <link rel="canonical" href="https://callacy.com" />
    <link rel="dns-prefetch" href="https://app.callacy.com">
    <!-- Cloudflare Turnstile: loaded lazily on first user interaction -->
    <script>
      (function(){
        var loaded=false;
        function loadTurnstile(){
          if(loaded)return;loaded=true;
          var s=document.createElement('script');
          s.src='https://challenges.cloudflare.com/turnstile/v0/api.js';
          s.async=true;document.head.appendChild(s);
        }
        ['mousedown','touchstart','keydown','scroll'].forEach(function(e){
          document.addEventListener(e,loadTurnstile,{once:true,passive:true});
        });
        setTimeout(loadTurnstile,9000);
      })();
    </script>
    <meta name="google-site-verification" content="GiCpCu43bUKQMVJXHTPAxC5rx0NqWW7VxtzbKEklJRU" />
    <script type="module" crossorigin src="/assets/index-BhyVf3kf.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-router-7L-FAxJv.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-motion-CBzyRlcP.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-BFe4B4ob.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-icons-DBS083wy.js">
    <link rel="stylesheet" crossorigin href="/assets/index-eD4L5WuK.css">
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M4ZVW4Q7"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <div id="root"></div>
  </body>
</html>
