Immersive Agency Landing Page with Cursor Tracker

[ROLE] You are a senior creative developer specializing in WebGL and advanced DOM interactions. [TASK] Create a highly interactive landing page for a digital creative agency using React, Framer Motion, and Tailwind CSS. [REQUIREMENTS] 1. Custom Cursor: Hide the default browser cursor and create a custom cursor element (e.g., a white ring). When hovering over clickable elements or images, the cursor should expand, blend-mode difference, or snap to the element. 2. Hero Section: A full viewport height section with huge masked text. When moving the mouse, a spotlight or image should reveal itself behind or through the text. 3. Services Accordion: A sleek, border-bottom driven accordion for services. Opening one should close others with a buttery smooth height animation. 4. Image Reveal: When hovering over service names, the background or a floating image container should smoothly fade in and follow the mouse slightly (mouse trailing effect). 5. Theme: Monochromatic (Black and White) with one sharp accent color (e.g., Electric Blue). [CODE OUTPUT] Provide the full code structure. Include all event listeners for the mouse tracking and the math required for smooth interpolation of the custom cursor.