Design a dark-mode website section: an airy luminous cta abruptly grounding into a monolithic midnight obsidian enterprise footer deck.
LAYOUT
The composition is structured in two distinct tiers. The upper tier is a centered, symmetrical CTA container with strict vertical cadence: pill badge, two-line headline, two-line subcopy, and paired action buttons. The lower tier is an expansive 1240px maximum width footer containing a brand summary column, four categorical link columns, and an email capture card, capped by the watermark horizon and anchored by an edge-to-edge legal bar.
PALETTE (use these exact hex values)
- #070C18 — Midnight Navy Base: deep structural canvas background for the entire footer zone
- #F8FAFC — Luminous Pearl: light base background for the pre-footer conversion section
- #2563EB — Cobalt Brand: primary cta buttons, active link accents, and email submit control
- linear-gradient(90deg, #2563EB 0%, #4F46E5 100%) — Electric Indigo Gradient: accent text fill on hero headline emphasis phrasing
- #0F172A — Obsidian Slate: dominant high-contrast text color for CTA headline on light surface
- #111B2E — Ghost Watermark: ultra-subtle structural brand lettering behind footer columns
- #94A3B8 — Slate Muted: secondary navigation links, description copy, and legal notices
- #10B981 — Compliance Green: live status indicator dot next to soc 2 compliance badge
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter Display, General Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 48px heading, 140px display. Tracking -0.025em at display, +0.06em at micro caps. Plus Jakarta Sans delivers a modernist, technical, and precise corporate tone. Its geometric clarity prevents dense multi-column links from feeling congested, while its tight tracking at 48px lends authoritative weight to the core CTA proposition.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is minimal and strictly operational. The CTA area employs a diffuse, low-opacity glow (#2563EB at 30% alpha) solely beneath the primary action button to lift it off the light canvas, while the footer remains intentionally flat and opaque to emphasize institutional permanence.
IMAGERY
No photographic imagery is present. Visual interest is driven exclusively by geometric iconography (shield, calendar, lock, social logos) rendered at 16-18px bounding boxes in hairline 1.5px stroke weight, alongside pure architectural typographic scale.
SIGNATURE DETAIL — the thing that makes this design itself
The defining gesture is the colossal low-contrast brand watermark ('QOMPLEMENT') etched across the upper horizon of an obsidian footer directly beneath a pristine white conversion zone. It converts what would otherwise be a conventional enterprise sitemap into a monumental branded pedestal. It fails if the watermark contrast is dialed too high, causing severe legibility collisions with the interactive links.
MUST
- Retain the abrupt, sharp boundary between light CTA section and dark footer canvas without gradient masking.
- Render the upper-footer watermark brand text at precisely reduced contrast (#111B2E over #070C18) to avoid competing with link columns.
- Use generous vertical breathing room (minimum 80px top and bottom) inside the CTA block to sustain high-end feel.
- Keep footer column headers strictly uppercase at 11px with +0.08em tracking for architectural legibility.
AVOID
- Never blend the light and dark sections with an overlay or curved separator; the hard horizontal edge is essential.
- Do not increase the opacity of the giant watermark text past 8% or it will impair footer link legibility.
- Avoid pill radiuses on buttons or input boxes; preserve the crisp 8px radius geometry.
- Do not use dark backgrounds for the upper CTA; the stark value shift relies on pristine white canvas.
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 中尝试 
