스티키 CTA

<div class="frame">
  <div class="content" id="content">
    <div class="ln w1"></div><div class="ln w2"></div><div class="ln w3"></div>
    <div class="ln w2"></div><div class="ln w1"></div><div class="ln w3"></div>
    <div class="ln w2"></div><div class="ln w1"></div>
  </div>
  <div class="cta" id="cta"><span>Pro plan · $29/mo</span><button>Start now</button></div>
</div>

.frame{width:min(92%,700px);height:min(88%,260px);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;position:relative;background:var(--surface)}
.content{padding:6%;display:flex;flex-direction:column;gap:clamp(8px,2vmin,16px)}
.ln{height:clamp(5px,1.3vmin,9px);border-radius:3px;background:var(--line)}
.ln.w1{width:80%}.ln.w2{width:55%}.ln.w3{width:68%}
.cta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(6px,1.6vmin,12px) clamp(10px,2.4vmin,18px);background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -6px 16px rgba(0,0,0,.06);
  transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cta.show{transform:translateY(0)}
.cta span{font-size:clamp(7px,1.4vmin,11px);color:var(--muted);font-weight:600}
.cta button{font-size:clamp(7px,1.4vmin,11px);font-weight:700;padding:.55em 1.3em;border-radius:7px;
  border:none;background:var(--accent);color:#fff}

const cta = document.getElementById('cta');
let shown = false;
function toggle() {
  shown = !shown;
  cta.classList.toggle('show', shown);
}
setTimeout(toggle, 900);
setInterval(toggle, 3200);