Design a dark-mode website section: precision dark enterprise canvas illuminated by cyan-to-lime energy portals and volumetric isometric pipeline graphics.
LAYOUT
Asymmetrical two-zone hero composition: left side hosts an 8-column text cluster (kicker, 56px H1, concise 3-line body, dual CTA buttons); right side seamlessly houses an expansive 4-stage sequential horizontal pipeline with numeric step indicators, visual 3D glass modules, and bottom explanatory blurbs.
PALETTE (use these exact hex values)
- #04080D — Obsidian Deep: Deepest canvas background behind all hero content and navigation.
- #0A1118 — Void Surface: Background for floating glass cards and diagram pipeline modules.
- #1E9AFE — Electric Cyan: Primary brand color for glowing portals, badge icons, and left gradient stops.
- #7CE57B — Hyper Lime: Right stop on primary CTA button gradients and pipeline portal glows.
- linear-gradient(90deg, #1E90FF 0%, #7CE57B 100%) — Gradient Primary: High-intent primary CTA fill and headline focal point glow.
- #1D2C3F — Border Glow: Subtle perimeter stroke for floating cards, header outline, and secondary buttons.
- #FFFFFF — Text Crisp: Main headlines, active navigation links, and primary step numerals.
- #8A99AD — Text Dimmed: Body copy, supporting pipeline descriptions, and inactive menu links.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 36px heading, 56px display. Tracking -0.03em on display, +0.08em on uppercase tags. Engineered, technical, and authoritative. A clean geometric grotesque (Plus Jakarta Sans or Inter) balances tight display tracking with generous letterspacing on small uppercase kickers, projecting enterprise-level reliability and computational precision.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1320px container, comfortable density.
DEPTH
Depth is created purely through luminescence and layered transparency rather than standard drop shadows. Visual cards float in a 3D isometric plane over glowing cyan and green ring apertures that project soft radial light halos onto the obsidian backcloth.
IMAGERY
Features bespoke 3D isometric glass representations of enterprise software artifacts (skewed document lists, modular cube matrices, glowing green verification shield containers). Data flows between stages through laser-thin neon particle rings and coordinate nodes; avoid stock photography or flat vector clip-art.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal volumetric pipeline connecting skewed glass UI panels through illuminated cyan and green energy-field rings. Replicate it using dark translucent panels, 1px cyan edge highlights, and an SVG/WebGL glowing particle conduit connecting discrete operational stages.
MUST
- Use high-contrast pure white (#FFFFFF) for display headings to contrast sharply with obsidian backgrounds.
- Apply the cyan-to-lime gradient (#1E90FF to #7CE57B) strictly to primary conversion actions and key narrative focal points.
- Maintain strict 4-step equal-width grid alignment when rendering sequential process pipelines.
- Keep card stroke borders extremely thin (1px) and subtly tinted with cool slate (#1D2C3F).
AVOID
- Never use warm yellow, orange, or red accents; keep all illumination cool (cyan, blue, mint lime).
- Do not use heavy drop shadows; use soft radial cyan/blue back-glows with high blur radius (30-60px).
- Avoid solid bright card backgrounds; maintain dark translucent glassmorphism (#0A1118 with border).
- Do not exceed 12px border radius on workflow cards; keep edges tight and architectural.
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 中尝试 
