Design a dark-mode website section: quiet midnight precision anchored by deep cobalt luminescence and mathematical card structures.
LAYOUT
The section employs a clear two-column desktop split. The left column spans approximately 38% width containing the eyebrow tag, two-tone hero title, supporting paragraph, a 3-row checkmark list, and a bottom security trust banner. The right column occupies the remaining width with a uniform 3-column, 2-row grid of six cards separated by 16px gaps.
PALETTE (use these exact hex values)
- #05070e — Canvas Midnight: Root page background behind text and modular card layouts.
- #0b101d — Card Surface: Background fill for the 6 feature cards and security callout banner.
- #172033 — Border Subtle: Hairline 1px borders surrounding feature cards and pill badges.
- #11182c — Icon Tile Fill: 12px rounded container fill for monoline feature icons.
- #4f80f7 — Luminescent Blue: Hero headline emphasis, icon stroke colors, and eyebrow text.
- #1d4ed8 — Radial Backlight: Diffuse radial blur located behind the upper card grid center.
- #34d399 — Telemetry Emerald: Status indicator dot inside bottom card metadata tags.
- #ffffff — Text Primary: Primary headings, card titles, and high-emphasis labels.
- #8f9bb3 — Text Muted: Paragraph descriptions, checklist entries, and bottom footer links.
- #475569 — Numeric Dim: Corner card sequence numbers like 01 through 06.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 44px display. Tracking -0.03em at display, 0.05em at micro badges. The typographic tone is ultra-modern, technical, and serene. By pairing cold slate body type with high-contrast white headlines and a singular electric periwinkle accent, it conveys automated precision and enterprise-grade privacy. Inter or Geist Sans provides the necessary neutral chassis.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely without drop shadows. Hairline 1px border strokes (`#172033`) define card boundaries against the `#05070e` void, while a single broad radial blue backlight shines from behind the card group to simulate volumetric atmospheric depth.
IMAGERY
No photographic imagery is present. Visual language relies entirely on vector-drawn monoline icons (sliders, neural lobes, nodes, locks, terminal prompts, and sparklines) housed inside dark slate rounded tiles.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display headline directly coupled with a 3x2 grid of cards featuring top-right sequence numbers ('01'-'06') and bottom emerald-dot status pills, all illuminated by a soft central blue backlight.
MUST
- Keep the right-hand card grid strictly 3x2 to preserve vertical alignment with left content.
- Use '#4f80f7' strictly for value-prop highlights, interactive links, and monoline icon strokes.
- Include the two-digit sequence index (e.g., '01') in the upper right corner of each feature card.
- Maintain the 1px hairline border '#172033' on all cards to preserve crisp definition on dark canvases.
AVOID
- Do not use high-contrast white text for body paragraphs; keep body strictly in '#8f9bb3'.
- Never fill card icons with solid white or multi-color gradients; use 1.5px monoline '#4f80f7'.
- Avoid sharp 90-degree corners; cards must retain their comfortable 18px radius.
- Do not omit the sequence numbers (01-06) as they establish mechanical rhythm across the grid.
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 中尝试 
