Blocktown

You are a creative developer building a product site as an isometric toy world. Build a complete one-page site with real, playful copy for a fictional logistics product called Blocktown ("Every package knows its way home."). No lorem ipsum.

ART DIRECTION — isometric construction. Background warm paper #FDF6EC with a faint isometric grid (repeating-linear-gradient at 30°/150°, 3% opacity). The signature move: CSS CUBES — each built from three skewed faces (top: transform rotateX/rotateZ or skew equivalents; left face darkened 12%; right face darkened 24%) in flat candy colors: coral #FF6B4A, blue #2E6BFF, sunshine #FFC53D, mint #3ECF8E. Ink #1E1B16, muted #7A7264. Fonts via Google Fonts: "Bricolage Grotesque" 700/800 headings, "Inter" body. Mood: SimCity meets premium SaaS.

LAYOUT, top to bottom:
1. Flat sticky nav — wordmark with a tiny cube glyph, three links, coral CTA.
2. Hero — headline and subhead left (clamp 42–72px); right, an isometric mini-scene assembled from 8–12 CSS cubes: a warehouse, two trucks (cubes with wheel discs), a road of flat diamonds, one package cube bouncing gently. Cubes assemble on load: each drops in from above with a small bounce, 90ms stagger.
3. "How it flows" — three steps laid on an isometric path: each step is a cube-card (flat face for text, colored top face visible) connected by a dashed SVG route a small dot travels along on scroll.
4. Feature grid — four flat cards, each headed by a single small cube icon in a different color.
5. Big scene band — a wider isometric scene (depot, three routes, animated dots) with three stat callouts pinned to it via thin leader lines.
6. Pricing — three cube-topped cards; the recommended tier's top face is coral and 8px taller.
7. FAQ and a flat footer with the mini cube-city silhouette along its top edge.

MOTION: cube drop-in with bounce on load (translateY -40px → 0, cubic-bezier(0.34,1.56,0.64,1)); the package cube loops a 3s hop; route dots travel via stroke-dashoffset tied to IntersectionObserver reveals; cards tilt 2° toward the cursor on hover (desktop only). Section reveals rise 20px + fade. Respect prefers-reduced-motion: cubes appear in place, no hops, no dots.

RULES: responsive at 375 / 768 / 1280 — the hero scene scales via a single wrapper transform: scale(); scenes hide their densest layer on mobile. Semantic HTML, focus states, body contrast at least 4.5:1 (candy colors are for faces, not paragraphs). Everything is CSS-transformed divs and inline SVG — no images, no canvas, no libraries. Content complete without JavaScript.