Design a light-mode website section: structured enterprise transparency anchored by indigo numerals and soothing rounded containment.
LAYOUT
The top half is organized as an asymmetrical two-column desktop grid with roughly 38% left column and 62% right column. The left column stacks the category tag, display headline, subtext, and spotlight card; the right column stacks five individual accordion rows. Spanning beneath both columns is a unified horizontal compliance bar with balanced left-aligned specs and right-aligned CTA.
PALETTE (use these exact hex values)
- #FAFCFD — Canvas Ground: Outer background frame and low-contrast perimeter canvas behind card surfaces.
- #FFFFFF — Module Surface: Elevated card backgrounds for accordion rows, left spotlight card, and enterprise bar.
- #EDF1F5 — Card Border: Delicate 1px boundary stroke defining accordion cells, feature cards, and bottom banner.
- #0F172A — Carbon Primary: High-emphasis titles, accordion question headers, and primary feature titles.
- #64748B — Slate Muted: Body paragraphs, accordion answer text, and compliance detail copy.
- #3851DF — Electric Indigo: Hero emphasis word 'answered.', category badge text, action links, and index numbers.
- #F0F4FE — Indigo Wash: Soft tinted background fill for accordion index digit squares.
- #10B981 — Mint Shield: Security lock icon outline signaling audited compliance readiness.
- #ECFDF5 — Mint Wash: Light green ambient badge fill framing the security lock icon.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 44px display. Tracking -0.03em on display, -0.01em on body. The typographical voice is corporate-grade precision: authoritative, quiet, and effortlessly technical. Rendered in a neo-grotesque sans-serif with tight negative letterspacing on large scales, it feels engineered for enterprise buyers, IT decision makers, and security audits.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly non-photorealistic, flat, and border-defined. Cards achieve spatial independence via crisp 1px borders (#EDF1F5) floating on an ultra-pale gray-blue field, without visible drop shadows. The lone concession to depth is an ethereal soft radial gradient wash tucked inside the left spotlight card.
IMAGERY
Vector icons serve as the primary visual decoration: a minimalist square tag mark, a dual-star sparkle glyph, clean hairline accordion toggles, and a line-drawn security padlock. Photography is entirely absent; all visual richness originates from restrained chromatic accents and geometric badge containers.
MUST
- Tint the index numeral containers with a soft 5% indigo wash rather than leaving them stark white.
- Highlight the terminal word of the main headline in primary cobalt while keeping preceding words carbon black.
- Maintain exactly 16px corner radius across all standalone containers, accordions, and banner bars.
- Pair the security compliance block with a pale emerald seal icon to establish subconscious trust.
AVOID
- Do not merge accordion items into a single bordered list; each row must remain a distinct rounded container.
- Never use dark heavy drop shadows; rely entirely on crisp 1px neutral boundary borders.
- Avoid centering text; all headers, accordion prompts, and compliance copy must remain strictly left-aligned.
- Do not introduce high-contrast vibrant colors to the feature card gradient smudge.
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 中尝试 
