<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="SwiftBooth is a click-only brand, public presence, and digital marketing checkup."
    />
    <title>SwiftBooth</title>
    <style>
      :root {
        --color-ink: #1b1916;
        --color-ink-soft: #5f584e;
        --color-paper: #fbf4e8;
        --color-panel: #fffaf1;
        --color-line: rgba(27, 25, 22, 0.14);
        --color-gold: #c98b2b;
        --color-red: #ab3f2a;
      }

      html,
      body {
        background: var(--color-paper);
        color: var(--color-ink);
        margin: 0;
        min-width: 320px;
      }

      body {
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
      }

      .site-header {
        align-items: center;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem clamp(1rem, 4vw, 3rem);
      }

      .hero-shell {
        display: grid;
        gap: clamp(1.5rem, 4vw, 4rem);
        grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
        min-height: calc(100vh - 5rem);
        padding: clamp(1rem, 4vw, 4rem);
        place-items: center;
      }

      .intro-copy h1 {
        font-size: clamp(2.35rem, 6vw, 5.8rem);
        font-weight: 900;
        line-height: 0.95;
        margin: 0;
        max-width: 11ch;
      }

      .check-card {
        background: var(--color-panel);
        border: 1px solid var(--color-line);
        border-radius: 8px;
        box-shadow: 0 28px 80px rgba(27, 25, 22, 0.12);
        max-width: 45rem;
        min-height: 34rem;
        padding: clamp(1.25rem, 4vw, 2rem);
        width: 100%;
      }

      .option-button,
      .ghost-button,
      .light-button,
      .dark-button {
        border-radius: 999px;
        cursor: pointer;
        font: inherit;
        min-height: 2.65rem;
      }

      .option-button {
        background: #fffdf8;
        border: 1px solid var(--color-line);
        border-radius: 8px;
        color: var(--color-ink);
        display: flex;
        font-weight: 800;
        min-height: 3.65rem;
        padding: 0.85rem 1rem;
        text-align: left;
      }

      @media (max-width: 900px) {
        .hero-shell {
          grid-template-columns: 1fr;
          place-items: stretch;
        }
      }
    </style>
    <script type="module" crossorigin src="/assets/index-XMbnJiQ6.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DF3D-Szu.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
