Bento Feature Grid

Build a bento-style features section: 3-column CSS grid, 2 rows, 12px gaps, dark cards (#17171f, 1px #26262f border, 18px radius). The large left card spans both rows and contains an animated bar chart (5 violet bars breathing in height with staggered delays). Two small cards on the top right, one wide card bottom right with a pulsing lime 'live' dot. Responsive: collapse to one column under 720px.

<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:#0d0d12;color:#eee;padding:22px;height:100vh}.g{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:100%}
.c{background:#17171f;border:1px solid #26262f;border-radius:18px;padding:18px;position:relative;overflow:hidden}.c h3{font-size:18px}.c p{color:#888;font-size:13px;margin-top:6px}
.c1{grid-row:span 2;background:linear-gradient(160deg,#1c1640,#17171f)}.bar{position:absolute;bottom:18px;left:18px;right:18px;display:flex;gap:6px;align-items:end;height:45%}
.bar i{flex:1;background:#7c5cff;border-radius:6px 6px 0 0;animation:g 2.4s ease-in-out infinite alternate}@keyframes g{from{height:20%}}
.c4{grid-column:span 2}.dot{width:10px;height:10px;border-radius:50%;background:#c6ff3d;display:inline-block;margin-right:6px;animation:p 1.2s infinite}@keyframes p{50%{opacity:.2}}</style>
<div class="g"><div class="c c1"><h3>Analytics that move</h3><p>Every chart animates on scroll.</p><div class="bar"><i style="height:40%"></i><i style="height:70%;animation-delay:-.4s"></i><i style="height:55%;animation-delay:-.8s"></i><i style="height:90%;animation-delay:-1.2s"></i><i style="height:65%;animation-delay:-1.6s"></i></div></div>
<div class="c"><h3>Fast</h3><p>Under 50 ms.</p></div><div class="c"><h3>Private</h3><p>Runs locally.</p></div><div class="c c4"><h3><span class="dot"></span>Live sync</h3><p>Changes land on every device instantly.</p></div></div>