Design a light-mode website section: crisp white canvas anchor with a floating midnight pillar highlighting high-assurance autonomous infrastructure.
LAYOUT
The component is housed in an oversized rounded card (radius 28px) split into an asymmetric two-column grid (approx 38% left marketing column, 62% right comparison table). Below the primary comparison is a separated horizontal bottom bar with an inline tagline and three spaced micro-features.
PALETTE (use these exact hex values)
- #0a0e17 — Ambient Backdrop: Deep outer canvas surrounding the main platform modal
- #ffffff — Surface Base: Primary card surface hosting content, typography, and matrix
- #111c38 — Hero Navy Column: Elevated midnight card highlighting the proprietary product in the matrix
- #0f172a — Text Primary: Display headings, table headers, and high-emphasis body
- #64748b — Text Muted: Body copy, secondary labels, subtext, and competitor descriptions
- #10b981 — Vibrant Teal Accent: Positive checkmark badges and successful comparative indicators
- linear-gradient(135deg, #6366f1 0%, #a855f7 100%) — Gradient Violet Accent: Gradient text on display headline and badge icon flourishes
- #f1f5f9 — Border Hairline: Light horizontal rules dividing table rows and bottom footer section
- #cbd5e1 — Pill Gray Neutral: Cross icons and neutral check indicators for legacy alternatives
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/700. Sizes 11px caption, 12px body-sm, 14px body, 15px subheading, 20px heading, 36px display. Tracking -0.01em at headlines, 0 at body. The voice is authoritative, technical, and frictionless, relying on an clean Inter-like geometric sans. High weight contrast between display titles (semibold/bold) and technical row data (medium/regular) communicates enterprise security without corporate bloat.
GEOMETRY & SPACING
Corner radii — cards 28px, links 4px, inputs 12px, buttons 10px. Spacing on a 4px unit, 20px gaps, 48px between sections, 1200px container, comfortable density.
DEPTH
Depth is created using a dramatic contrast between the outer deep-navy background and the bright white card. Within the matrix, the hero brand column is elevated via a dark navy fill (#111c38) and a diffused drop shadow (0 20px 40px rgba(17,28,56,0.35)) that lifts it directly off the flat grid planes.
IMAGERY
Iconography is strictly outline-based, modern, and technical with 1.5px stroke weight, set within squircle badge containers. No photographic imagery is used; visual interest is generated through subtle gradients, crisp vector shapes, and micro-sparkle emblems.
MUST
- Wrap the primary brand column in a dark midnight card that floats visibly above the neutral table rows.
- Use pastel-tinted 40px icon squares with 1px borders to anchor bulleted benefits on the left panel.
- Render comparison checkmarks inside the dark hero column with saturated teal (#10b981) background circles.
- Use a subtle gradient from indigo to purple exclusively on the second half of the main display title.
AVOID
- Do not give competitor columns elevated background cards or high-contrast drop shadows.
- Do not use red or aggressive alerting colors for missing competitor features; stick to muted neutral gray.
- Do not omit the floating column's vertical overshoot; it must extend beyond the table headers and footers.
- Do not use heavy or dark grid lines; matrix dividers must remain whisper-light #f1f5f9 rules.
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. Try in DraPub 
