Wave — Startup Waitlist Landing

<div class="wv-orb" style="width:480px;height:480px;background:#0c8fc4;top:-160px;left:-120px"></div>
<div class="wv-orb" style="width:420px;height:420px;background:#7c3aed;bottom:-140px;right:-100px;animation-delay:2s"></div>
<div class="wv-grid"></div>
<div class="wv-wrap">
<nav class="container py-3 d-flex align-items-center">
  <span class="fw-bold fs-5"><i class="bi bi-tsunami me-1" style="color:#5dd6ff"></i>Atlas Next</span>
  <span class="ms-auto wv-mono small" style="color:#5b6b92">launching Q3 2026</span>
</nav>
<header class="container text-center py-5" style="max-width:760px">
  <span class="wv-pill wv-mono"><span class="me-1" style="color:#34d399">●</span>2,418 developers already on the list</span>
  <h1 class="wv-h1 my-4">The next chapter of<br><span class="wv-grad">convertatlas.org</span></h1>
  <p class="mx-auto mb-4" style="max-width:520px;color:#8da2c8">Atlas Next brings accounts, saved favorites, custom snippet collections and an API to the ConvertAtlas toolkit you already use. Be first in when we open the gates.</p>
  <form class="wv-cap d-flex mx-auto mb-3" style="max-width:460px" onsubmit="return false">
    <input type="email" placeholder="you@dev.com" aria-label="Email">
    <button class="btn-wv">Join waitlist <i class="bi bi-arrow-right"></i></button>
  </form>
  <div class="d-flex align-items-center justify-content-center gap-2 small" style="color:#5b6b92">
    <span class="d-flex ps-2"><span class="wv-av" style="background:#0c8fc4">AK</span><span class="wv-av" style="background:#7c3aed">MT</span><span class="wv-av" style="background:#16a34a">RS</span><span class="wv-av" style="background:#f59e0b">+2k</span></span>
    No spam — one email at launch.
  </div>
</header>
<section class="container py-4" style="max-width:880px">
  <div class="row g-3">
    <div class="col-md-4"><div class="wv-card p-4 h-100"><i class="bi bi-journal-text fs-3 mb-2 d-block" style="color:#5dd6ff"></i><h6 class="fw-bold">Collections</h6><p class="small mb-0" style="color:#8da2c8">Save favorite tools and snippets into shareable collections.</p></div></div>
    <div class="col-md-4"><div class="wv-card p-4 h-100"><i class="bi bi-diagram-3 fs-3 mb-2 d-block" style="color:#7ea2ff"></i><h6 class="fw-bold">Atlas API</h6><p class="small mb-0" style="color:#8da2c8">Hit any converter programmatically — perfect for CI and scripts.</p></div></div>
    <div class="col-md-4"><div class="wv-card p-4 h-100"><i class="bi bi-shield-lock fs-3 mb-2 d-block" style="color:#c084fc"></i><h6 class="fw-bold">Still private</h6><p class="small mb-0" style="color:#8da2c8">Accounts are optional — the toolkit stays free and client-side.</p></div></div>
  </div>
</section>
<section class="container text-center py-4 wv-back">
  <p class="wv-mono small mb-3" style="color:#5b6b92">LOVED BY DEVELOPERS AT</p>
  <div class="d-flex flex-wrap justify-content-center gap-5"><span>◆ Nova</span><span>● Orbit</span><span>▲ Apex</span><span>✦ Atlas</span></div>
</section>
<footer class="wv-foot container py-5 d-flex flex-wrap justify-content-between align-items-center gap-2 small">
  <span style="color:#5b6b92">© 2026 ConvertAtlas</span>
  <div class="d-flex gap-4"><a href="#"><i class="bi bi-twitter-x"></i></a><a href="#"><i class="bi bi-github"></i></a><a href="#"><i class="bi bi-envelope"></i></a></div>
  <span class="wv-mono" style="color:#5b6b92">Built with <a href="https://convertatlas.org" style="color:#5dd6ff">ConvertAtlas</a></span>
</footer>
</div>

body{min-height:100vh;margin:0;background:#070c18;color:#e8eefb;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;position:relative;overflow-x:hidden}
.wv-mono{font-family:ui-monospace,'JetBrains Mono',monospace}
.wv-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:wv-float 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes wv-float{from{transform:translateY(0)}to{transform:translateY(-40px)}}
.wv-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(93,214,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(93,214,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 60%,transparent);pointer-events:none}
.wv-wrap{position:relative;z-index:1}
.wv-pill{border:1px solid rgba(93,214,255,.35);background:rgba(93,214,255,.08);border-radius:999px;padding:6px 16px;font-size:.8rem;color:#5dd6ff}
.wv-h1{font-weight:800;letter-spacing:-.035em;font-size:clamp(2.4rem,6.5vw,4.2rem);line-height:1.05}
.wv-grad{background:linear-gradient(90deg,#5dd6ff,#7ea2ff,#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.wv-cap{background:rgba(16,26,48,.85);border:1px solid #1c2742;border-radius:16px;padding:8px;backdrop-filter:blur(8px)}
.wv-cap input{background:transparent;border:0;color:#fff;outline:none;flex:1;padding:.55rem .8rem}
.wv-cap input::placeholder{color:#5b6b92}
.btn-wv{background:linear-gradient(90deg,#5dd6ff,#7ea2ff);color:#06121f;font-weight:700;border:0;border-radius:11px;padding:.6rem 1.4rem;white-space:nowrap}
.btn-wv:hover{filter:brightness(1.1);color:#06121f}
.wv-av{width:36px;height:36px;border-radius:50%;border:2px solid #070c18;display:grid;place-items:center;font-size:.65rem;font-weight:700;color:#fff;margin-left:-10px}
.wv-card{background:rgba(16,26,48,.7);border:1px solid #1c2742;border-radius:16px;backdrop-filter:blur(6px)}
.wv-back span{opacity:.4;font-weight:700}
.wv-foot a{color:#5b6b92;text-decoration:none}.wv-foot a:hover{color:#5dd6ff}