Design a light-mode website section: crisp cybersecurity saas pricing grounded on clean cards against a soft parametric particle wave.
LAYOUT
The header block sits top-left with an eyebrow pill, display headline, and brief paragraph, mirrored by a floating horizontal three-metric stats bar at the top-right. Directly below, an equal-width four-column pricing grid spans the viewport. A centralized guarantee note anchors the bottom of the section.
PALETTE (use these exact hex values)
- #FBFBFE — Background Off-White: Global application page background behind cards and waves
- #FFFFFF — Card Surface Light: Standard tier card background with soft border and elevation
- #0D1117 — Card Surface Dark: Hero tier card surface providing high visual contrast
- #0B0F19 — Text Primary Dark: Headlines, prominent plan prices, and bold card titles
- #6B7280 — Text Secondary Muted: Plan descriptions, cadence suffixes (/month), and footnote labels
- #3B66F5 — Brand Blue: Filled secondary buttons, badges, and list checkmarks
- linear-gradient(90deg, #3B66F5 0%, #D946EF 100%) — Gradient Accent Scale: Primary conversion button on dark tier card and wave artwork
- #E5E7EB — Border Subtle: Subtle card outlines, metric dividers, and outline buttons
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 20px subheading, 36px heading, 44px display. Tracking -0.03em on display, -0.01em on body. The type choice is architectural, precise, and tech-forward sans-serif, communicating enterprise-level security and autonomous precision. Inter or Geist Sans provides neutral, highly legible figures for financial tiers and dense list items.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through tonal inversion rather than heavy drop shadows. Standard cards use a flat #FFFFFF fill with a 1px #E5E7EB border against a #FBFBFE background, while the focal card uses pure dark tone (#0D1117) to immediately pull forward in z-index perception.
IMAGERY
Abstract 3D particle waves in neon cyan and magenta frame the bottom corners of the canvas, suggesting computational complexity and flow. Avoid photorealistic people or literal security locks; abstract procedural geometry is the brand visual anchor.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric 4-card matrix where three stark white cards flank a single pitch-black card equipped with a vibrant blue-to-magenta CTA.
MUST
- Reserve the dark background (#0D1117) strictly for the single hero tier card.
- Ensure the gradient button (blue-to-magenta) is only used once within the card grid.
- Pair the 36px display prices directly with an inline 13px muted suffix like '/month'.
- Keep icon checks styled with uniform circular fills matching the brand primary blue.
AVOID
- Do not give all pricing cards alternating dark themes; stick to a 3:1 ratio.
- Do not add drop shadows exceeding 8px blur; surface hierarchy is achieved via fill contrast.
- Do not introduce square corners; cards must use exactly 16px and buttons 8px radius.
- Do not color feature checklist icons differently per tier; keep them consistent.
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 中尝试 
