Bento Grid

Restyle my page in a Bento Grid style: organised, product-focused and easy to scan, with every piece of content in its own rounded tile. Palette: background #F4F4F5, tiles #FFFFFF, text #18181B, secondary #71717A, accent #4F46E5 (indigo). A few tiles use soft tints for variety: #E0E7FF, #FEF3C7, #DCFCE7. Type: headlines in Bricolage Grotesque, bold, letter-spacing -0.035em, line-height 1. Body in DM Sans 15px. Small labels in a muted grey pill. For Chinese text pair the headlines with Noto Sans SC (700) and the body with Noto Sans SC, and never italicise or tighten Chinese. Layout: a CSS grid of tiles with different spans (some 2×2, some 1×1, some 2×1) and a consistent 16px gap. The hero itself is a large tile; product shots, stats, features and testimonials each get their own tile. On mobile the tiles stack in one column. Components: 24px radius on tiles, 1px #E4E4E7 border or no border, very soft shadows. Buttons are rounded-full; primary indigo with white text, secondary white with a border. Big numbers inside stat tiles. Motion: tiles rise in with a stagger when scrolled into view, a soft spotlight follows the pointer inside tiles, numbers count up. Avoid: full-width text sections with no structure, sharp corners, heavy borders, more than three tile tints.