Design a dark-mode website section: deep cosmic obsidian illuminated by a sweeping blue particle accretion ring guiding modular ai data pipeline nodes.
LAYOUT
The hero uses an asymmetric two-column desktop arrangement. The left 40% column holds editorial hierarchy (eyebrow, display headline, body, CTA group, and customer credentials) vertically aligned. The right 60% holds a tight horizontal array of four interconnected pipeline cards floating across the sweeping curve of the particle cloud.
PALETTE (use these exact hex values)
- #05070E — Obsidian Canvas: Deep void background across the full viewport canvas.
- linear-gradient(110deg, #A8FBD3 0%, #82ACFD 100%) — Primary Gradient Mint to Periwinkle: High-contrast fill on the primary conversion button.
- #4D7CFE — Particle Accretion Blue: Atmospheric luminous cosmic trail swirling behind workflow cards.
- #4ADE80 — Stage Emerald: Badge background and connector dot for Step 01 Define.
- #38BDF8 — Stage Azure: Badge background and connector dot for Step 02 Collect.
- #A78BFA — Stage Violet: Badge background and connector dot for Step 03 Verify & Refine.
- #F472B6 — Stage Rose: Badge background and connector dot for Step 04 Deliver.
- #FFFFFF — Signal White: Primary headline, card titles, and active nav links.
- #8492A6 — Muted Slate: Hero description, card subtitles, and passive metadata text.
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 56px display. Tracking -0.03em at display, 0.12em at mono captions. Clean, engineered, and authoritative without feeling academic. A modern neo-grotesque like Inter provides clinical legibility in dark UI, while tight negative tracking on display headlines delivers commercial strength.
GEOMETRY & SPACING
Corner radii — cards 14px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 96px between sections, 1440px container, comfortable density.
DEPTH
Depth is created purely through luminous layering rather than cast shadows. Translucent frosted cards float at level 1 with hairline borders, while a 3D particle accretion ring loops underneath and between cards against the pitch-black base void.
IMAGERY
Visual assets combine volumetric deep-space particle simulations with specialized AI technical graphics: wireframe vector meshes, autonomous driving camera feeds with bounding boxes, telemetry checklists, and dense point-cloud spheres. Generic stock photography or illustrative 2D flat vectors are strictly forbidden.
MUST
- Keep card backgrounds semi-transparent with backdrop blur so the particle accretion disk stays visible behind them.
- Use distinct semantic colors (mint, cyan, violet, pink) only on the step index badges and their corresponding connectors.
- Maintain high letter-spacing (0.12em-0.15em) on all uppercase micro-copy like 'REAL-WORLD TRAINING DATA' and 'BUILT FOR'.
- Preserve the high-contrast pastel gradient exclusively for the primary 'Get started' action button.
AVOID
- Do not add solid, opaque dark backgrounds to the workflow cards; it destroys visual depth.
- Avoid warm accent tones like red, amber, or orange that clash with the cool orbital light trail.
- Do not remove the periods from the display headline; they enforce deliberate pacing.
- Never make the secondary 'Talk to sales' button brightly filled; it must remain ghosted.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
