You are a senior frontend engineer and pixel-perfect UI implementation specialist. Build a production-ready landing page that matches the two attached reference screenshots exactly: - `desktop-reference`: the required desktop design - `mobile-reference`: the required mobile design Treat these screenshots as the single source of truth. Reproduce every visible section from the hero through the footer, including all text, layout, image placement, spacing, typography, colors, borders, shadows, icons, buttons, navigation, and decorative details. Do not redesign, simplify, omit, invent, or substitute any part of the interface. Requirements: 1. Visual fidelity - Match each screenshot as closely as possible at its respective viewport size. - Carefully infer the full responsive behavior from the desktop and mobile references. - Use the exact content shown in the screenshots. If text is not legible, preserve its approximate length, hierarchy, and visual density rather than inventing marketing copy. - Match font sizing, weights, tracking, line heights, alignment, and section spacing with particular care. - Recreate all repeated components and visual patterns consistently. 2. Responsive behavior - Desktop must match `desktop-reference`. - Mobile must match `mobile-reference`. - Build fluid intermediate breakpoints without compromising either reference design. - Do not merely scale down the desktop layout; reproduce the mobile composition, ordering, visibility, and spacing shown in the mobile screenshot. 3. Three.js - Use Three.js for any visual effect, background scene, animated object, shader, distortion, particle system, or dimensional element visible or strongly implied in the references. - The Three.js effect must be integrated seamlessly into the page rather than appearing as a disconnected demo. - Keep it performant: pause or reduce rendering when off-screen, support reduced motion, optimize for mobile, and provide a static or lightweight fallback if WebGL is unavailable. - Do not add gratuitous 3D effects that are absent from the screenshots. 4. Motion and interaction - Reproduce visible hover, scroll, reveal, cursor, or animated states implied by the design. - Keep animation refined, subtle, and faithful to the references. - Respect `prefers-reduced-motion`. - Ensure all navigation, buttons, links, menus, forms, and interactive controls work. 5. Implementation quality - Use clean, maintainable component structure and semantic HTML. - Use CSS/SCSS/Tailwind as appropriate, but prioritize exact visual matching over framework preference. - Avoid placeholder blocks, generic gradients, stock UI patterns, or unrequested sections. - Use supplied assets when available. Do not replace reference assets with unrelated stock imagery. - Ensure accessibility: meaningful labels, keyboard support, contrast, and alt text where applicable. - Optimize image loading, layout stability, and mobile performance. 6. Verification - Render and compare the finished page against both reference screenshots at their matching viewport dimensions. - Iterate until differences in layout, spacing, typography, and visual treatment are minimized. - Before finishing, verify the complete page from hero to footer on both desktop and mobile. Do not ask broad design-direction questions. The attached desktop and mobile screenshots define the design. Ask a question only if a missing asset or an unreadable detail prevents faithful implementation; otherwise make the most visually conservative inference possible.