<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- HALO — coming-soon / waitlist landing. Edit --brand vars + {{text}} + the form action. No deps. -->
<title>{{Product}} — coming soon</title>
<meta name="description" content="{{One line: what's launching + the hook to join the waitlist.}}" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@400;500&display=swap" rel="stylesheet" />
<style>
  :root{ --brand-1:#ff6b6b; --brand-2:#ffb86c; --bg:#08080d; --ink:#f7f8fb; --dim:#9aa0b4; --line:rgba(255,255,255,.1);
    --fd:'Syne',sans-serif; --fb:'Inter',system-ui,sans-serif; --ease:cubic-bezier(.16,1,.3,1); }
  *{margin:0;padding:0;box-sizing:border-box}
  body{min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem;color:var(--ink);font-family:var(--fb);
    background:radial-gradient(130% 90% at 50% 0%,color-mix(in srgb,var(--brand-1) 26%,var(--bg)),var(--bg))}
  .halo{max-width:560px}
  .badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;font-size:.78rem;color:var(--dim);margin-bottom:1.6rem}
  .badge span{color:var(--brand-1)}
  h1{font-family:var(--fd);font-weight:800;font-size:clamp(2.4rem,7vw,4rem);line-height:1.05;letter-spacing:-.02em}
  h1 em{font-style:normal;background:linear-gradient(120deg,var(--brand-1),var(--brand-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  p.sub{color:var(--dim);font-size:1.1rem;margin:1.3rem auto 2.2rem;max-width:42ch}
  form{display:flex;gap:.6rem;max-width:420px;margin:0 auto;flex-wrap:wrap}
  input{flex:1;min-width:200px;background:#13131c;border:1px solid var(--line);border-radius:12px;padding:.95rem 1.1rem;color:var(--ink);font-size:1rem;font-family:var(--fb)}
  input:focus{outline:none;border-color:var(--brand-1)}
  button{background:linear-gradient(120deg,var(--brand-1),var(--brand-2));color:#06070c;border:none;border-radius:12px;padding:.95rem 1.6rem;font-weight:600;cursor:pointer;transition:.2s var(--ease)}
  button:hover{transform:translateY(-2px)}
  .note{color:#5d6378;font-size:.82rem;margin-top:1rem}
  .socials{display:flex;gap:1.4rem;justify-content:center;margin-top:2.4rem;color:var(--dim);font-size:.85rem}
  .socials a{color:var(--dim);text-decoration:none}.socials a:hover{color:var(--ink)}
</style>
</head>
<body>
  <main class="halo">
    <span class="badge"><span>●</span> {{Launching soon}}</span>
    <h1>{{Something big}} is <em>almost here</em>.</h1>
    <p class="sub">{{One or two sentences on what you're building and why someone should care. Join the list for early access.}}</p>
    <form action="{{your-form-endpoint}}" method="POST">
      <input type="email" name="email" placeholder="you@email.com" required aria-label="Email" />
      <button type="submit">Notify me</button>
    </form>
    <p class="note">No spam — just one email when we launch.</p>
    <div class="socials">
      <a href="#">X</a><a href="#">Instagram</a><a href="#">LinkedIn</a>
    </div>
  </main>
</body>
</html>
