<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, viewport-fit=cover"
    />
    <title>Unison — Intent-Driven AI App Builder</title>
    <meta name="description" content="Unison turns a few answers about your business into a complete, working website — with real bookings, orders and enquiries built in." />
    <meta name="author" content="Unison" />
    <meta name="theme-color" content="#060a19" />
    <link rel="icon" type="image/png" sizes="512x512" href="/unison-icon.png" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

    <meta property="og:title" content="Unison" />
    <meta property="og:description" content="Turn a few answers about your business into a complete, working website — with real bookings, orders and enquiries built in." />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/unison-logo-lockup.png" />
    <meta property="og:image:alt" content="Unison — Intent-Driven AI App Builder" />

    <meta name="twitter:card" content="summary_large_image" />

    <!-- Preview optimization -->
    <meta name="robots" content="index, follow" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />

    <style>
      /* Prevent flash of unstyled content during preview loading */
      #root {
        min-height: 100vh;
        background: #0f172a;
        color: #e2e8f0;
      }
      .loading-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      }
    </style>
    <script type="module" crossorigin src="/assets/index-BgeoHUv7.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-D8DJbIkg.css">
  </head>

  <body>
    <div id="root">
      <div class="loading-placeholder">
        <div style="text-align: center; font-family: system-ui;">
          <img
            src="/unison-icon.png"
            alt=""
            aria-hidden="true"
            class="loading-logo"
            style="width: 64px; height: 64px; object-fit: contain; mix-blend-mode: screen; animation: spin 1.6s linear infinite; margin: 0 auto 16px;"
          />
          <p style="color: #9ca3af; margin: 0;">Loading application...</p>
        </div>
      </div>
    </div>

    <style>
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      @media (prefers-reduced-motion: reduce) {
        .loading-logo { animation: none !important; }
      }
    </style>

    <script>
      // If startup is slow, keep a visible fallback state instead of removing
      // the loader and leaving a blank screen.
      setTimeout(() => {
        const placeholder = document.querySelector('.loading-placeholder');
        if (!placeholder) return;

        console.warn('Loading timeout - showing fallback state');
        placeholder.innerHTML = `
          <div style="text-align:center;font-family:system-ui;max-width:520px;padding:24px;">
            <h2 style="margin:0 0 10px;color:#e5e7eb;font-size:20px;">Still loading...</h2>
            <p style="margin:0 0 16px;color:#9ca3af;line-height:1.5;">
              Startup is taking longer than expected. You can keep waiting or reload.
            </p>
            <button
              style="background:#2563eb;color:white;border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer;"
              onclick="window.location.reload()"
            >
              Reload
            </button>
          </div>
        `;
      }, 60000);
    </script>
  </body>
</html>
