대기 명단 히어로

<div class="wl">
  <span class="badge">COMING SOON</span>
  <h1>Be first to try it</h1>
  <p>Join the waitlist — we're onboarding in small batches.</p>
  <div class="row">
    <div class="input">you@example.com</div>
    <button>Join waitlist</button>
  </div>
  <div class="proof"><div class="avatars"><i></i><i></i><i></i><i></i></div><span id="count">1,247 people waiting</span></div>
</div>

.wl{width:min(90%,560px);display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(6px,1.4vmin,10px)}
.badge{font-size:clamp(7px,1.3vmin,10px);font-weight:700;letter-spacing:.08em;padding:.3em .9em;border-radius:999px;
  background:color-mix(in oklab,var(--accent-2) 16%,var(--surface));color:var(--accent-2);
  border:1px solid color-mix(in oklab,var(--accent-2) 35%,var(--line))}
.wl h1{margin:0;font-size:clamp(14px,3.6vmin,26px);font-weight:800;letter-spacing:-.01em}
.wl p{margin:0;font-size:clamp(7px,1.4vmin,11px);color:var(--muted)}
.row{display:flex;gap:clamp(4px,1vmin,8px);width:100%;max-width:360px;margin-top:clamp(4px,1vmin,6px)}
.input{flex:1;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:clamp(6px,1.5vmin,10px) clamp(8px,1.8vmin,12px);font-size:clamp(7px,1.4vmin,11px);color:var(--muted)}
.row button{font-size:clamp(7px,1.4vmin,11px);font-weight:700;padding:0 1.2em;border-radius:8px;border:none;
  background:var(--accent);color:#fff}
.proof{display:flex;align-items:center;gap:8px;margin-top:clamp(2px,.8vmin,4px)}
.avatars{display:flex}
.avatars i{width:clamp(12px,2.4vmin,18px);height:clamp(12px,2.4vmin,18px);border-radius:50%;
  border:2px solid var(--bg);margin-left:-6px;background:var(--accent-3)}
.avatars i:first-child{margin-left:0;background:var(--accent)}
.avatars i:nth-child(3){background:var(--accent-2)}
#count{font-size:clamp(6.5px,1.2vmin,9px);color:var(--muted);font-variant-numeric:tabular-nums}

const el = document.getElementById('count');
let n = 1247;
setInterval(function () {
  n += Math.floor(Math.random() * 3) + 1;
  el.textContent = n.toLocaleString() + ' people waiting';
}, 1500);