System Role: You are an expert Frontend Developer and UI/UX Designer specializing in high-end, luxury tech product landing pages.

Task: Build a single-page React landing page for a hardware startup called "Strapta". Use Vite, React, Tailwind CSS, motion/react for animations, and lucide-react for icons.

Product Overview:

Strapta is a slim, magnetically-secured biometric sensor pod that attaches to the underside of traditional watch straps (Rolex, Omega, Casio). It turns mechanical watches into fitness trackers by monitoring HR, HRV, SpO2, skin temperature, and sleep. It features a 7-day battery, no subscription fees, and full data ownership (export to Apple Health/CSV).

Design System ("Sophisticated Dark"):

• Background: Deep dark black/charcoal (#080808 to #1A1A1A).
• Accents: Elegant Gold (#D4AF37) for buttons, active icons, and micro-labels. Hover state (#C09A30).
• Text: White and off-white (#E5E5E5, white/60, white/40) for varying hierarchy.
• Typography:
  • Primary Headings: Playfair Display (Serif).
  • Body text & UI elements: Inter (Sans-serif).
  • Micro-copy: Small, uppercase, with wide letter-spacing (tracking-[0.2em]).
• Styling elements: Very fine, faint borders (border-white/10 or border-white/5), subtle glows, and dark elevated surfaces (bg-[#1A1A1A]).

Section-by-Section Requirements:

1. Navigation (Sticky Header):
   • Frosted glass backdrop (backdrop-blur-md, dark overlay).
   • Logo: Gold Activity icon next to "STRAPTA" in uppercase Serif.
   • Links: "The Pod", "Privacy & Data", "App Interface", "Pre-Order" in tiny uppercase sans-serif with wide tracking.
2. Hero Section:
   • Side-by-Side Layout. (Stack on mobile).
   • Left Column (Text):
     • Gold italic serif label: "The Invisible Upgrade".
     • Huge Serif Heading: "Your timepiece,<br />evolved."
     • Description: Short blurb about turning an heirloom into a health lab.
     • CTA: Gold button, black uppercase text "Reserve for $149". Next to it, a small shield icon with "No Subscriptions. Ever."
   • Right Column (Visual):
     • Behind the image, use two faint, concentric circular borders (border-white/5) to add depth.
     • Foreground: A large, prominent, rounded square image (rounded-3xl or similar) using this URL: https://i.ibb.co/fV68JQKh/Chat-GPT-Image-May-11-2026-10-18-59-PM.png. Add a subtle hover-scale effect and an inset ring (ring-white/10).
     • Animate the image floating in on load.
3. Marquee Section:
   • Infinite scrolling horizontal banner.
   • List luxury watch brands: "ROLEX", "OMEGA", "SEIKO", "PATEK PHILIPPE", "CASIO", "TIMEX", "CARTIER".
   • Text style: Large, muted Serif, separated by large gaps. Apply dark gradient fades on the left and right edges so the text fades smoothly in and out.
4. Features Grid:
   • Heading: "Engineering" (small, uppercase, gold) followed by a large Serif heading: "Everything a tracker should be. / Nothing it shouldn't."
   • A 4-column grid displaying:
     • Magnetic & Invisible (Magnet icon)
     • Medical Precision (Heart icon)
     • 7-Day Power (BatteryCharging icon)
     • Actionable Insights (Moon icon)
   • Cards should have a dark, elevated surface, faint borders, gold icons housed in small metallic-looking boxes, and fade-in scroll animations.
5. App Interface Preview Section:
   • Left Column (Mock UI): Create a CSS-built "phone screen" (rounded rectangle, dark background, thick border acting as phone bezels). Inside the screen:
     • Top bar: "Today" in serif, with a Watch icon.
     • Main Widget: A large circular SVGs representing a "RECOVERY" ring at 88%. Include a giant Serif "88%".
     • Sub Metrics: Three dark, polished cards for HRV (62ms), Strain (12.4), and Sleep (7h 12m), featuring gold lucide-react icons.
   • Right Column (Text):
     • Heading: "Insights that drive performance. Without the noise."
     • Description explaining the app's simplicity.
     • An unordered checklist of features (Recovery Score, Strain tracking, Sleep architecture, Skin temp) marked by gold checkmark icons (CheckCircle2).
6. Data Ownership Section:
   • Centered layout housed in a massive, subtly glowing dark card.
   • Heading: "Your hardware. / Your data." (where "Your data." is Gold).
   • Text declaring the zero-subscription model.
   • Three columns underneath: "1-Tap Export" (Download icon), "Native Sync" (Activity icon), "No Paywalls" (Watch icon).
7. Final CTA & Footer:
   • Large Serif heading "Evolution awaits."
   • Gold "Reserve for $149" CTA button.
   • Minor text: "Ships Winter 2026. Free global shipping."
   • Footer: Simple top border, copyright text, "Designed in Switzerland", and "Limited Batch 01" in Gold.

Animation & Interaction Details:

• Use motion/react to fade in elements as they scroll into view (whileInView).