Design a dark-mode website section: tactical obsidian surfaces illuminated by ambient emerald halos and disciplined five-column data structures.
LAYOUT
The layout features a dual-column top region: the left houses the eyebrow tag, large dual-tone headline, and introductory paragraph; the right houses explanatory copy stacked above a 3-item horizontal trust row. Directly underneath sits an expansive five-column card sequence illustrating chronological agent actions ('Plan', 'Execute', 'Adapt', 'Report', 'Secure'). The section resolves with paired action triggers aligned to the bottom-left boundary.
PALETTE (use these exact hex values)
- #070B0C — Obsidian Ground: Deepest canvas background providing high contrast for glowing mint accents and dark translucent panels.
- #0D1314 — Panel Surface: Fill color for feature cards and interactive containers, creating discrete floating boundaries.
- #182624 — Matrix Border: Hairline structural border on cards, badges, and button outlines to demarcate edges without noise.
- #34D399 — Mint Pulse: Primary active brand color for status dots, iconography, checkmarks, and primary link typography.
- radial-gradient(ellipse at 50% 40%, #0F2E28 0%, #070B0C 75%) — Atmospheric Glow: Background mood glow centered behind the typography and card horizon to lend cinematic depth.
- #FFFFFF — Text Primary: Highest contrast text for display headers and card titles.
- #6EE7B7 — Text Muted Mint: Second line of hero display heading giving an illuminated, differentiated keyword hierarchy.
- #839290 — Text Secondary: Subtitles, card descriptions, and capability checklist items.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 20px heading, 48px display. Tracking -0.025em for display, 0.08em for uppercase tags. The typographic tone is surgical, calm, and unmistakably engineered for enterprise infrastructure. By pairing stark white display headlines with softened mint keywords, it highlights autonomy and agency. Inter or Geist delivers the necessary technical neutral voice, avoiding decorative quirks while maintaining strict clarity at small 11-13px data scales.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical translucency and luminescent contrast rather than drop shadows. Surface layers stack from a deep base (#070B0C) through an ambient green radiance into hairline-bordered panels (#182624 border over #0D1314). Glowing accent borders and icon frames signal interactivity and hierarchy without lifting physically off the plane.
IMAGERY
Visual language rejects photography and decorative illustration in favor of technical minimalism and programmatic precision. Icons are consistent 1.5px stroke weight outlines set in soft seafoam/mint. Any added graphic must look like structured enterprise telemetry, workflow wiring diagrams, or vector interface schematics.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal 5-stage sequential card array numbered '01' to '05' capped by luminous outline icons and embedded checklists, directly anchored below a dual-tone mint-terminating hero headline.
MUST
- Keep the background strictly dark (#070B0C) with only subtle cyan/emerald radial glows.
- Use uppercase tracking (0.08em) for the eyebrow tag and card index counters.
- Maintain identical heights across all five workflow cards in desktop viewport.
- Style card icons as hairline mint-colored line vectors within dedicated dark rounded boxes.
AVOID
- Never introduce saturated bright fills for card backgrounds; keep them near-black (#0D1314).
- Do not use solid background pill fills for primary actions; rely on dark framed containers.
- Avoid high-contrast drop shadows; define elevations entirely through 1px border lines.
- Do not exceed five workflow cards in the horizontal sequence.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
