index.html.md

# index.html

The finished result as one file. Save it as index.html and open it.

```html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fintech landing page</title>
<style>
*{box-sizing:border-box;margin:0}
:root{--ink:#0e1a2b;--mut:#5d6b80;--bg:#f5f8fc;--acc:#1d6bff;--ok:#12b886}
body{background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
nav{display:flex;justify-content:space-between;align-items:center;max-width:1160px;margin:0 auto;padding:24px}
.logo{font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--acc)}
nav a{color:var(--mut);font-size:14px;text-decoration:none;margin-left:26px}
.wrap{max-width:1160px;margin:0 auto;padding:40px 24px 80px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.tag{display:inline-block;background:#e4edff;color:var(--acc);font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;animation:up .8s both}
h1{font-size:clamp(40px,5.4vw,68px);line-height:1.04;letter-spacing:-.04em;margin:20px 0;animation:up .8s .1s both}
p{font-size:18px;line-height:1.6;color:var(--mut);max-width:480px;animation:up .8s .2s both}
.row{display:flex;gap:12px;margin-top:30px;animation:up .8s .3s both}
.b{padding:14px 24px;border-radius:14px;font-weight:700;font-size:15px;text-decoration:none;background:var(--acc);color:#fff;box-shadow:0 10px 24px -8px rgba(29,107,255,.6)}
.b.o{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #d8e1ee}
.trust{display:flex;gap:22px;margin-top:34px;color:var(--mut);font-size:13px;animation:up .8s .4s both}
.trust b{color:var(--ink)}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.stage{position:relative;height:480px}
.main{position:absolute;inset:20px 0 auto 20px;background:#fff;border-radius:28px;padding:28px;box-shadow:0 40px 80px -30px rgba(14,26,43,.35);animation:up .9s .25s both}
.main small{color:var(--mut);font-size:13px}.bal{font-size:44px;font-weight:800;letter-spacing:-.04em;margin:4px 0 2px}
.up{color:var(--ok);font-weight:700;font-size:14px}
svg{width:100%;height:150px;margin-top:14px;overflow:visible}
.ln{fill:none;stroke:var(--acc);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 3s .8s ease forwards}
.ar{fill:url(#g);opacity:0;animation:fade 1.2s 2.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{to{opacity:1}}
.dot{fill:#fff;stroke:var(--acc);stroke-width:3;opacity:0;animation:fade .4s 3.7s forwards}
.tx{margin-top:16px;display:grid;gap:10px}
.t{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;background:#f3f6fb;font-size:14px;opacity:0;animation:up .6s forwards}
.t:nth-child(1){animation-delay:1.6s}.t:nth-child(2){animation-delay:2.1s}.t:nth-child(3){animation-delay:2.6s}
.t span{display:flex;gap:10px;align-items:center}.t i{width:30px;height:30px;border-radius:9px;display:block}
.chip{position:absolute;background:#0e1a2b;color:#fff;border-radius:18px;padding:14px 18px;font-size:13px;box-shadow:0 20px 40px -14px rgba(14,26,43,.5);animation:up .8s both,bob 5s ease-in-out infinite}
.chip b{display:block;font-size:20px;margin-top:2px}
.c1{right:-6px;top:0;animation-delay:3s,0s}.c2{left:-48px;bottom:-52px;background:var(--ok);animation-delay:3.4s,-2s}
@keyframes bob{50%{transform:translateY(-8px)}}
@media(max-width:860px){.wrap{grid-template-columns:1fr}.stage{height:520px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.ln{stroke-dashoffset:0}.t,.dot,.ar,.chip{opacity:1}}
</style></head><body>
<nav><div class="logo">Northpay</div><div><a href="#">Personal</a><a href="#">Business</a><a href="#">Security</a><a href="#">Log in</a></div></nav>
<div class="wrap"><div>
<span class="tag">FDIC-style protection · 4.1% APY</span>
<h1>Money that works while you sleep</h1>
<p>Save, spend and invest from one account with no hidden fees, instant transfers and insights that make sense.</p>
<div class="row"><a class="b" href="#">Open an account</a><a class="b o" href="#">See how it works</a></div>
<div class="trust"><span><b>2.4M</b> customers</span><span><b>$0</b> monthly fees</span><span><b>4.9</b> app rating</span></div></div>
<div class="stage"><div class="main"><small>Total balance</small><div class="bal" id="n">$0.00</div><div class="up">▲ 12.4% this quarter</div>
<svg viewBox="0 0 400 150" preserveAspectRatio="none"><defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#1d6bff" stop-opacity=".25"/><stop offset="1" stop-color="#1d6bff" stop-opacity="0"/></linearGradient></defs>
<path class="ar" d="M0 120 C40 110 60 90 100 96 S160 120 200 80 S280 60 320 40 S370 30 400 14 L400 150 L0 150Z"/>
<path class="ln" d="M0 120 C40 110 60 90 100 96 S160 120 200 80 S280 60 320 40 S370 30 400 14"/><circle class="dot" cx="400" cy="14" r="6"/></svg>
<div class="tx"><div class="t"><span><i style="background:#ffd8a8"></i>Coffee House</span><b>−$4.80</b></div><div class="t"><span><i style="background:#b2f2bb"></i>Salary deposit</span><b style="color:#12b886">+$3,200.00</b></div><div class="t"><span><i style="background:#a5d8ff"></i>Savings round-up</span><b>+$1.20</b></div></div></div>
<div class="chip c1">Goal reached<b>Trip fund 🎉</b></div><div class="chip c2">Instant transfer<b>$250 sent</b></div></div></div>
<script>
var el=document.getElementById('n'),t0=null,to=48215.37;
function f(t){if(!t0)t0=t;var p=Math.min((t-t0)/2600,1),e=1-Math.pow(1-p,3);el.textContent='$'+(to*e).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2});if(p<1)requestAnimationFrame(f)}
requestAnimationFrame(f);
</script></body></html>

```