Design a dark-mode website section: dark-canvas scientific clarity balancing high-density proof points with calm, spacious accordion disclosures.
LAYOUT
The layout is structured as an asymmetrical 12-column grid inside a ~1200px container. The left column (~4.5 cols) stacks the 'FAQ' pill, the dual-tone H1 headline, explanatory paragraph, and the comprehensive 2x2 proof card. The right column (~7.5 cols) contains a vertical stack of independently contained accordion cards separated by 12px vertical gaps. The section concludes with a centered horizontal utility bar containing a sparkle mark and routing link.
PALETTE (use these exact hex values)
- #0b0d14 — Void Canvas: Deepest background layer across the full section canvas
- #131622 — Surface Container: Background fill for social proof card and individual accordion items
- #1f2435 — Surface Border: Hairline perimeter stroke defining card bounds and pill tags
- #f1f5f9 — Text Primary: High-contrast headings, active question titles, and primary stats
- #6e768e — Text Muted Heading: Second line of the hero title creating an editorial cadence
- #94a3b8 — Text Secondary: Answers, descriptions, badge labels, and card metadata
- #93c5fd — Accent Ice Blue: Left-column metric highlight for simulation speedup and volume
- #f472b6 — Accent Coral Violet: Customer retention metric and active accordion minus icon pill
- #3b1e28 — Active Collapse Fill: Dark magenta background for the active minus accordion indicator
- #c084fc — Accent Lavender: Four-point star sparkle icon and CTA link accent color
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 44px display. Tracking -0.025em for display, -0.01em for body. The typographic tone is authoritative, quiet, and scientific. By utilizing a pristine neo-grotesque like Inter or Geist with slightly negative letter spacing on titles, it conveys enterprise precision without stiffness. The soft contrast reduction in the second line of the heading introduces a thoughtful conversational cadence suitable for high-stakes deep-tech evaluations.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled entirely flat through luminous contrast rather than drop shadows. Surface level 1 cards (#131622) sit directly over level 0 (#0b0d14) separated by 1px subtle strokes (#1f2435) and a very soft ambient violet radial bleed. This gives an emissive screen feel appropriate for modern scientific software.
IMAGERY
This design contains no raster photography or illustrative figurative art. All visual interest is synthesized through iconography (shield badge, sparkle star), clean typography, and softly tinted numeral data points. Introducing realistic photo banners or playful 3D cartoon assets would directly violate its computational clinical tone.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the self-contained 'Proof & Trust Card' placed directly below the FAQ title, transforming a standard question section into an active conversion engine. The four distinct, lightly tinted key metrics paired with enterprise compliance badges keep skeptical decision-makers grounded while they browse technical answers. Misusing it by overcrowding with more than four numbers or using saturated high-visibility buttons ruins its understated authority.
MUST
- Keep each accordion question inside its own distinct rounded container instead of a merged divider list.
- Split long headings into a bright active segment (#f1f5f9) and a muted completion segment (#6e768e).
- Tint metric values in distinct desaturated jewel tones (e.g., #93c5fd, #f472b6, #c084fc) to aid scannability.
- Enclose validation and security proof (SOC 2, GDPR) in the same card as performance statistics.
AVOID
- Do not use sharp 0px corners; maintain consistent 16px radius on cards and accordion boxes.
- Never apply saturated primary neon fills across card backgrounds; keep them deep and understated (#131622).
- Avoid heavy multi-colored drop shadows or garish glow effects around accordion elements.
- Do not allow the secondary line of the hero title to match 100% white opacity.
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 中尝试 
