Design a dark-mode website section: deep void glassmorphism illuminated by focused neon auroras and precise geometric typography.
LAYOUT
Vertically stacked centered presentation. A top-centered pill tag introduces the section, followed by a two-line display headline and descriptive paragraph, then the billing cycle toggle. The main content is an equitable 4-column desktop grid of pricing cards, anchored at the bottom by a horizontal row of three trust proof points.
PALETTE (use these exact hex values)
- #040711 — Canvas Deep Void: Global page background base, fading to near-black at extremities
- #0d131f — Card Surface Base: Default card background surface with subtle alpha blending
- #131b2c — Card Surface Hover: Subtle lightened surface for hover states and secondary buttons
- linear-gradient(90deg, #3b82f6 0%, #d946ef 100%) — Active Highlight Gradient: Featured plan CTA background, active border highlights, and headline accent text
- #38bdf8 — Accent Cyan: Icon glyphs, pill badges, and bottom edge glow on standard tier cards
- #c084fc — Accent Magenta: Growth plan icon, featured badge text, and active card border perimeter
- #ffffff — Text Primary: Headings, pricing numbers, and high-emphasis labels
- #94a3b8 — Text Secondary: Subtitles, tier descriptions, and feature item copy
- #64748b — Text Muted: Billing cycle suffixes (/month), trust badges, and inactive toggle labels
- #1e293b — Border Hairline: Inactive card borders, toggle track outlines, and dividers
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px heading, 48px display. Tracking -0.03em at display, 0.05em at caps microcopy. Sleek, modern, and technical. Tight negative letter-spacing on headline numbers conveys authority and mathematical precision, while neutral body copy provides effortless scanability for enterprise buyers. Inter or Geist perfectly matches this technical aesthetic.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using optical radiance and luminance rather than drop shadows. Cards recede into the canvas with dark semi-transparency, while key interactive tiers push forward via sharp 1px multi-stop gradient borders and ambient glow pools beneath their bottom edges.
IMAGERY
Completely free of photographic raster images. The visual language relies purely on geometric monoline iconography (cube, lightning bolt, layers, target aperture, padlock, globe) paired with smooth CSS linear and radial gradients.
MUST
- Use a pure black to deep navy base canvas with restrained radial aura gradients.
- Highlight the designated 'Growth' tier with a neon outline and filled gradient button.
- Keep all non-featured card backgrounds dark and translucent with low-contrast borders.
- Render feature checks in brand blue (#60a5fa) or purple (#c084fc) rather than bright green.
AVOID
- Do not use opaque light grey card backgrounds or harsh white borders.
- Do not use high-saturation green for tick marks; it breaks the cybernetic palette.
- Do not vary card widths across the desktop grid; enforce equal 1fr distribution.
- Do not let the background glow overpower text legibility.
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 中尝试 
