Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Geist',sans-serif;background:#0a0512;color:#fff;line-height:1.5;min-height:100vh;position:relative;overflow:hidden}
.bg{position:absolute;inset:0;background:radial-gradient(circle at 15% 25%,#7e3aff 0%,transparent 35%),radial-gradient(circle at 85% 35%,#ff3a8c 0%,transparent 40%);filter:blur(80px);opacity:.4}
.section{padding:56px 36px;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;max-width:1200px;margin:0 auto;align-items:center}
.head{display:flex;flex-direction:column;gap:18px}
.kicker{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5eead4;display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid rgba(94,234,212,.3);border-radius:999px;width:fit-content;background:rgba(94,234,212,.06)}
.kicker::before{content:"";width:6px;height:6px;background:#5eead4;border-radius:50%}
.h1{font-size:clamp(36px,5.4vw,60px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.h1 .gradient{background:linear-gradient(135deg,#fff 0%,#ffaa3a 50%,#ff3a8c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sub{font-size:16px;color:rgba(255,255,255,.7);max-width:48ch;line-height:1.55}
.proof{margin-top:8px;display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.6)}
.proof div b{display:block;color:#fff;font-size:24px;font-weight:600;font-family:'Geist',sans-serif;letter-spacing:-.02em}
.calc{background:rgba(255,255,255,.04);backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:24px}
.calc-head{display:flex;justify-content:space-between;align-items:center}
.calc-head h3{font-size:18px;font-weight:600}
.calc-head .badge{font-family:'Geist Mono',monospace;font-size:10px;color:#5eead4;background:rgba(94,234,212,.12);padding:4px 10px;border-radius:999px;letter-spacing:.05em;text-transform:uppercase}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.7)}
.fld label b{color:#fff;font-family:'Geist Mono',monospace;font-size:13px}
.slider{-webkit-appearance:none;width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:3px;outline:none;background:linear-gradient(90deg,#7e3aff 0%,#ff3a8c 60%,rgba(255,255,255,.1) 60%);cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 12px rgba(255,255,255,.5),0 0 0 4px rgba(126,58,255,.3)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.select-grid button{padding:10px 8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:8px;font-family:'Geist',sans-serif;font-size:13px;cursor:pointer;font-weight:500;transition:all .15s}
.select-grid button.active{background:linear-gradient(135deg,#7e3aff,#ff3a8c);border-color:transparent;font-weight:600}
.select-grid button:hover:not(.active){background:rgba(255,255,255,.08)}
.result{padding:18px 22px;background:linear-gradient(135deg,rgba(126,58,255,.18),rgba(255,58,140,.12));border:1px solid rgba(255,255,255,.12);border-radius:14px;display:flex;justify-content:space-between;align-items:flex-end}
.result .lbl{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:4px}
.result .val{font-size:42px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.result .val small{font-size:14px;color:rgba(255,255,255,.6);font-weight:400;letter-spacing:0}
.result .breakdown{font-family:'Geist Mono',monospace;font-size:11px;color:rgba(255,255,255,.55);text-align:right;line-height:1.5}
.cta{padding:14px;background:#fff;color:#0a0512;border:none;font-family:inherit;font-weight:600;font-size:14px;border-radius:12px;cursor:pointer}
.cta:hover{background:#e5e5e5}
.note{font-family:'Geist Mono',monospace;font-size:11px;color:rgba(255,255,255,.4);text-align:center;letter-spacing:.04em}
@media (max-width:880px){.section{grid-template-columns:1fr;padding:32px 20px;gap:32px}}
</style></head><body><div class="bg"></div><section class="section">
<div class="head"><div class="kicker">Calculator · live update</div><h1 class="h1">Estimate your bill <span class="gradient">before</span> you build.</h1><p class="sub">No surprise invoices. Pay per token, scale to zero, and pause anytime. We're often 1/4 of what you're paying now.</p>
<div class="proof"><div>From <b>$0.02</b><span>/M tokens</span></div><div><b>2,400+</b><span>active customers</span></div><div><b>36</b><span>regions</span></div></div></div>
<div class="calc">
<div class="calc-head"><h3>Build your estimate</h3><div class="badge">Live · monthly</div></div>
<div class="fld"><label><span>Model class</span></label><div class="select-grid"><button>Small</button><button class="active">Mid</button><button>Large</button></div></div>
<div class="fld"><label><span>Input tokens</span><b>120 M / mo</b></label><input type="range" class="slider" value="60"></div>
<div class="fld"><label><span>Output tokens</span><b>40 M / mo</b></label><input type="range" class="slider" value="30"></div>
<div class="row"><div class="fld"><label><span>Region</span></label><div class="select-grid"><button class="active">US</button><button>EU</button><button>Global</button></div></div><div class="fld"><label><span>Compliance</span></label><div class="select-grid"><button class="active">Standard</button><button>SOC 2</button><button>HIPAA</button></div></div></div>
<div class="result"><div><div class="lbl">Estimated monthly</div><div class="val">$3,860<small>/mo</small></div></div><div class="breakdown">Input · $2,400<br>Output · $1,200<br>Storage · $260</div></div>
<button class="cta">Open this configuration in console →</button>
<div class="note">No credit card required to start. Pricing locked for 90 days from sign-up.</div>
</div>
</section></body></html>