Design a light-mode website section: crisp tactical intelligence framed by soft atmospheric glow and modular floating accordion tiers.
LAYOUT
A two-column grid split roughly 45/55 on desktop. The left column anchors the value proposition: top eyebrow badge, headline with inline color emphasis, dual CTA group, software viewport card, and trust credential footer. The right column is a uniform vertical stack of six self-contained interactive accordion cards spaced evenly.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Mist: Global background providing a cool, light neutral canvas across the entire section.
- #FFFFFF — Card Surface: Background fill for floating accordion panels and raised modular content blocks.
- #0B0F19 — Tactical Dark: Dark base fill for the floating software simulation preview container.
- #2563EB — Cobalt Primary: Primary action button fill, headline highlight text, and interactive focal points.
- #EFF6FF — Soft Tint: Background for FAQ category pill and accordion icon circular containers.
- #0F172A — Midnight Ink: Main heading text, accordion question titles, and primary visual anchors.
- #64748B — Muted Slate: Explanatory body copy, answers within accordions, and social proof labeling.
- #3B82F6 — Glow Blue: Diffused atmospheric ambient drop shadow radiating from beneath the dark UI card.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 17px subheading, 24px heading, 36px display. Tracking -0.02em at display, 0.05em on badges. The typography is surgical, calm, and authoritative, perfectly suited for an enterprise decision-intelligence platform. Inter or a comparable geometric sans provides neutral precision, allowing the bold weights in the 36px heading and 17px questions to deliver immediate clarity without feeling playful.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through modular card separation and ethereal glow rather than harsh multi-tier drop shadows. FAQ cards sit on a nearly invisible blur (0 1px 3px rgba(0,0,0,0.04)), while the dark tactical mockup casts an expansive blue-violet diffused aura (0 24px 60px rgba(37,99,235,0.16)) that gives it physical presence.
IMAGERY
The visual language uses an authentic, data-dense in-app preview card featuring geospatial maps, tactical telemetry pills, and status nodes. It eschews generic stock photography or illustrative cartoons in favor of sharp, functional software telemetry.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of floating, pill-cornered light FAQ tiles opposite a luminous, dark tactical map interface surrounded by an ethereal blue halo. Removing this inverted tactical card would strip the page of its high-tech defense-and-intelligence gravitas, turning it into a generic SaaS FAQ.
MUST
- Separate accordion questions into distinct floating white cards with at least 12px to 16px vertical gaps.
- Pair each FAQ question with a contextual 36px circular icon badge in light cobalt tint.
- Retain the dark software screenshot to create high-contrast depth against the light mist canvas.
- Use cobalt blue (#2563EB) sparingly to highlight key identity nouns in large headings.
AVOID
- Never collapse the FAQ items into a single bordered list; each question must be an isolated tile.
- Avoid harsh black borders (#000000); use subtle surface contrast or tinted hairline borders (#F1F5F9).
- Do not convert the tactical preview mockup into a light-themed interface; the inversion is deliberate.
- Never use sharp 0px or 2px corners; every element must adhere to the 10px-20px rounded language.
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 中尝试 
