Dark Fintech Investment Hero

Create a cinematic dark fintech hero with restrained emerald accents. Use a near-black background with faint green contour lines that suggest market data and depth. Place a compact investment wordmark and minimal navigation inside a thin translucent top bar. On the left, build a strong three-line sans-serif headline with the final line in emerald, concise transparent-investing copy and two CTAs. On the right, render a large angled smartphone mockup whose screen shows a realistic portfolio dashboard: performance percentage, line chart, total assets, donut allocation and compact labels. Add one floating objective card with a progress bar beside the phone. Across the lower hero, create a dark glass proof rail with four substantial benefits and green line icons, then a secondary trust panel with monochrome financial press marks. Give the phone a slow controlled float and cursor tilt, animate chart lines and progress values on entry, and move the background market curves almost imperceptibly. Maintain excellent contrast and avoid casino-like neon, excessive glow or gamification.

Build this as a complete, production-ready website hero in React and TypeScript using Tailwind CSS and Framer Motion. Reproduce the reference composition faithfully while creating original brand assets and copy. The page must include a semantic header, responsive navigation, strong single H1, supporting paragraph, two purposeful calls to action, proof or feature items, and the main visual composition.

Interaction and quality requirements:
- Animate the entrance as a restrained cinematic sequence: navigation fades down, copy reveals line by line, the main visual scales from 0.97, and supporting cards enter with a short stagger.
- Add subtle pointer parallax only to decorative or photographic layers; never reduce readability or move interactive controls.
- Buttons need polished hover, pressed and keyboard-focus states. Navigation must become an accessible compact menu on mobile.