## ROLE Recreate a single-file HTML product landing mosaic **pixel-faithful** to the reference below. Output one self-contained `index.html` with inline CSS + JS. **No external images.** All icons are inline SVG. The only external resource is Google Fonts. --- ## PAGE META - `lang="en"` - Title: `Automate your work — Focus on what matters` - Viewport: `width=device-width, initial-scale=1, viewport-fit=cover` - Body page background: `#f0f0f0` - Text color: `#141414` - Font smoothing: antialiased; `text-rendering: optimizeLegibility` - `body`: flex center, `min-height: 100vh` / `100dvh`, `overflow: hidden` --- ## FONT (exact URL) ``` https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap ``` Preconnect: `https://fonts.googleapis.com` and `https://fonts.gstatic.com` (crossorigin). Family stack: `'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` Weights used: **400, 500, 600, 700, 800**. No other display/serif fonts. --- ## MEASUREMENT SYSTEM (critical) Author the entire composition in **design units** where: - Reference stage = **1374 × 666** units - `1rem` = 1 reference unit - Root scale knob: ```css html { font-size: min(calc(95vw / 1374), calc(94vh / 666)); } ``` Nothing hard-coded in device pixels for the desktop composition. All sizes below are in these rem-units. --- ## DESKTOP STAGE GRID `.stage` = `1374rem × 666rem`, CSS grid: - Columns: `339rem | 627rem | 388rem` - R
……（完整源码请在站内查看）