Design a dark-mode website section: deep tech dark mode with cyan neon glows, rigorous metrics, and micro-dot particle fields.
LAYOUT
The section is stacked vertically inside a max 1180px container with clear architectural cadence. At top: centered eyebrow badge, 44px display title with cyan accent second line, and a narrow 600px paragraph. Middle: an evenly balanced 4-column card grid (approx 270px width each) with 16px gutters. Bottom: an expansive horizontal summary card that unifies a primary copilot highlight on the left with a 4-column micro-feature checklist on the right.
PALETTE (use these exact hex values)
- #050914 — Void Canvas: deepest background surface across the section
- #0b1220 — Card Surface: container background for metric cards and horizontal feature panel
- #132138 — Card Border: 1px hairline outline defining card perimeters
- #131d2e — Divider Stroke: hairline separator dividing card qualitative content from quantitative metrics
- #38bdf8 — Glow Cyan: vibrant headline emphasis, metric data numbers, and icon backglows
- #2563eb — Electric Cobalt: gradient partner in headline text and badge backgrounds
- #34d399 — Emerald Mint: metric callout text for risk reduction metric and badge icon
- #f1f5f9 — Primary Text: main titles, primary metric titles, and card headers
- #64748b — Muted Text: descriptive card copy, subheadings, and context captions
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 18px heading, 32px heading-lg, 44px display. Tracking -0.02em at display, 0.05em at badge caps. The typographic tone is calculating, institutional, and highly technical, leaning on a neutral neo-grotesque sans-serif (Inter). It projects scientific certainty through concise, measured headings and large data readouts. Clean tracking and strict vertical hierarchy ensure dense technical language reads effortlessly.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 16px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through optical layering and luminosity rather than diffuse drop shadows. The deep black-blue void (#050914) hosts faint organic particle waves, over which matte charcoal-navy surfaces (#0b1220) sit defined by precise 1px borders (#132138). Soft ambient back-glows (box-shadow or radial-gradient) emanate only from active technical icons and key metrics.
IMAGERY
No photographic imagery is present; visual texture is supplied purely by a fine, wavy constellation of cyan-tinted micro-dots that sweep laterally across the dark canvas. Icons are strictly schematic line vectors (lightning, shield, focus reticle, currency node, and microchip). Any high-saturation photos or 3D glassmorphic renders would severely dilute the precision-engineering atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tier card structure: top qualitative statement (icon + title + explanation) cleanly separated by a hairline rule from an oversized quantitative proof stat (32px colored number + label). It makes marketing claims feel like rigorous lab results.
MUST
- Use exact 1px crisp borders (#132138) to separate dark cards from the dark canvas.
- Restrict vibrant cyan (#38bdf8) and teal (#34d399) to metric figures, glowing icons, and key words.
- Maintain strict horizontal division between qualitative benefit text and quantitative metric stats.
- Keep card corners consistently at 16px radius across both vertical cards and bottom banner.
AVOID
- Never use heavy drop shadows; depth is achieved via 1px borders and soft radial glows.
- Do not style all four metrics in different rainbow colors—stick solely to cyan and mint.
- Avoid bright white borders or thick lines; borders must stay below 20% visual luminance.
- Never fill card backgrounds with bright gradients; keep them dark and matte (#0b1220).
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 中尝试 
