Design a dark-mode website section: deep darkness split by dual-spectrum telemetry streams revealing infrastructure intelligence through comparative luminescence.
LAYOUT
The hero follows a strict symmetrical three-tier architecture: top navigation anchored by logo and outer action; center-aligned copy stack leading down to split CTA buttons; and a wide lower comparative stage. This lower stage is horizontally tri-partitioned—negative problem points on the left, the focal split-rendered building in the center, and positive AI capabilities on the right—capped by an anchored metric ribbon.
PALETTE (use these exact hex values)
- #030712 — Canvas Void: Deepest background base across the entire hero canvas.
- #0B1220 — Card Surface: Background fill for bottom metrics strip and contextual callout clusters.
- #1E293B — Subtle Border: Outlines for pills, metric card, and secondary ghost buttons.
- #0091FF — Electric Cyan: Primary CTA button background, key hero word emphasis, and proactive circuit nodes.
- #EF4444 — Warning Ember: Left-hand curtain glow, hazard beacon icon, and failure path indicator dots.
- #10B981 — Bio Emerald: Right-hand curtain glow fringe and verified status icon highlights.
- #FFFFFF — Pure White: Primary display typography, main headings, and primary button labels.
- #94A3B8 — Muted Slate: Secondary body text, trust badges, navigation items, and metric descriptors.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 52px display. Tracking -0.03em at display, 0.01em at body, 0.08em at uppercase tags. The type voice is calculated, precise, and authoritative. A modern grotesque sans-serif like Inter communicates digital enterprise engineering without unnecessary ornamentation. Tight letter spacing on large display headings brings an imposing clarity, while wide tracking on uppercase captions ensures instant readability at small scales.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through luminescence rather than physical elevation or drop shadows. Glowing elements, such as the warning badge and neon building edges, emit soft radial blooms (blur-radius 24px-48px) against the #030712 void. Panels utilize fine 1px structural borders (#1E293B) to demarcate space without raising surfaces off the canvas.
IMAGERY
The imagery centers on architectural blueprints and spatial telemetry: an isometric multi-story building rendered half in opaque silhouette and half in glowing blue vector line-art. Streamed particle lines connect discrete floor sensors to analytical status nodes. Photographic textures are entirely absent, replaced by abstract light filaments resembling optic fiber bundles.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the bilateral chromatic comparison: the canvas is cleaved cleanly down the center, using a chaotic red-to-orange optic filament curtain and warning markers on the left to signify catastrophic vulnerability, balanced instantly against an orderly cyan-to-emerald network on the right that illuminates a digital-twin architectural wireframe.
MUST
- Keep the left side exclusively keyed to orange/red warning hues and the right to blue/green resolution tones.
- Use pill-shaped 999px badges with 1px borders for all categorization chips.
- Render the hero headline with tight tracking (-0.03em) and isolate key verbs in electric blue (#0091FF).
- Maintain high opacity contrast between pure white headings (#FFFFFF) and muted metadata (#94A3B8).
AVOID
- Do not allow warm red accents to spill over into the right-hand proactive feature list.
- Do not use drop shadows; use subtle inner radial glows or pure 1px slate borders (#1E293B) instead.
- Do not apply bright background cards; keep the central building graphic floating directly over the void.
- Never use serif or decorative display typography in this technical telemetry environment.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
