Create a dark hero section for a fictional workspace app called "Orbit" where six small app cards orbit around a centered headline in 3D, using only HTML and CSS (no JavaScript, no canvas, no 3D library). Deliver a standalone HTML file and a React + Tailwind version.

Palette and type
- Background #080918 with two soft glows: a violet radial (rgba(139,92,246,0.28)) behind the headline and a cyan radial (rgba(6,182,212,0.16)) rising from the bottom edge. Add a subtle star field made from four tiny radial-gradient dots repeated on a 240px tile at 55% opacity.
- Text #f5f5fb, muted #9ca3c4. Card accents: violet #8b5cf6, cyan #06b6d4, orange #f97316, green #22c55e, pink #ec4899, yellow #eab308.
- Google Fonts: "Sora" 600 for the logo, headline and card titles; "Inter" 400/500 for the rest.

Content
- Nav (max-width 1200px): logo = a 24px violet ring with a small glowing cyan "moon" dot on its top-right, then "Orbit"; links Workspace / Integrations / Pricing / Changelog; an outlined pill "Open app".
- Center copy (above the orbit in z-order): violet-tinted eyebrow pill "✦ One workspace, every orbit"; H1 "Everything orbits / around your ideas." at clamp(38px, 5vw, 70px), line-height 1.06, letter-spacing -0.045em, with the second line in a #c4b5fd → #67e8f9 gradient; lede "Notes, tasks, analytics and moodboards in one connected space that moves at the speed you think."; a violet gradient button "Start for free →" with a violet glow and a dark outlined button "Explore the workspace"; a tiny hint "Hover the orbit to pause it". Give the text a dark text-shadow so it stays readable over cards behind it.
- Six cards, 220×124px, 18px radius, dark navy gradient fill (rgba(36,38,72,0.92) → rgba(18,19,42,0.92)), 1px rgba(255,255,255,0.1) border, deep shadow. Each card: a 32px rounded icon tile filled with its accent color (simple stroked SVG icon), a title and a one-line meta, plus two progress bars in the accent color. Cards: Notes "128 pages · synced", Analytics "+24% this week", Calendar "3 launches in Oct", Tasks "18 of 24 done", Moodboard "42 references", Inbox "5 new mentions".

The orbit
- Register @property --t as an <angle>, initial 0deg, inherited. Animate it on the ring from 0deg to -360deg over 36s linear infinite.
- The ring is a zero-size element with transform-style: preserve-3d and transform: rotateX(-32deg), inside a container with perspective: 2000px and perspective-origin 50% 30%.
- Each card has --a = 0, 60, 120, 180, 240, 300deg and --angle = --a + --t. Position: translate3d(R·sin(angle), 0, D·cos(angle)) rotateX(32deg), with R = min(560px, 40vw) and D = min(340px, 24vw), so the path is an ellipse and every card keeps facing the viewer.
- Depth cues from the same angle: opacity = 0.3 + 0.7·(0.5 + 0.5·cos(angle)) and filter: blur((0.5 − 0.5·cos(angle))·1.6px).
- Draw the orbit path: an ellipse (2R × 2D) with a faint lavender 1px border and an inner violet glow, rotated rotateX(90deg) inside the ring.
- Offset the copy upward (about -110px) so the front of the orbit passes below the buttons and the back passes behind the headline; the copy never gets covered.
- Hovering the stage (or focusing inside it) pauses the animation with animation-play-state: paused. Hovering a card tints its border and glow with its accent color via color-mix().
- prefers-reduced-motion: no animation; the cards stay in their resting positions around the headline.
- Under 760px: hide the nav links and move the orbit below the copy as its own 340px-tall block (flex column), with R = 30vw, D = 20vw, tilt 26deg and the cards scaled to 0.6.