Design a light-mode website section: crisp modern enterprise fintech wrapped in luminous particle fields and high-precision purple accents.
LAYOUT
The header spans full-width with a clean left-aligned wordmark, centered link group, and right-aligned auth split. The hero divides cleanly into a 55/45 two-column split: left column stacks category badge, three-line display headline, explanatory paragraph, dual CTA buttons, and a horizontal trust bar; right column suspends the interactive prompt simulator against the centered point-cloud graphic.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Dominant background base providing maximum contrast and breathing room
- #5842eb — Vibrant Iris: Primary CTA fill, active send button, and anchor gradient color
- #f36c53 — Coral Ember: Gradient destination on key headline phrase and brand punctuation mark
- #11141d — Obsidian Text: Headlines, card titles, navigation items, and high-emphasis labels
- #5c6170 — Slate Neutral: Body copy, input placeholder text, and secondary interactive labels
- #f4f0fe — Muted Lavender: Background fill for top pill badge and AI avatar icon container
- #e5e7ee — Border Subtle: Card outlines, secondary button borders, and chip containers
- #10b981 — Compliance Green: Indicator status dot beside SOC 2 Type II trust badge
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 20px heading, 60px display. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. Plus Jakarta Sans conveys a sharp, forward-looking enterprise tone that balances geometric tech precision with human legibility. Its wide apertures and crisp ink-traps keep dense UI metrics legible while lending the 60px display header an authoritative weight. Inter or General Sans can be substituted without compromising geometry or hierarchy.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, airy density.
DEPTH
Depth is created purely through atmospheric layering rather than harsh shadows. The product simulator card floats over the generative particle cloud with a diffuse, expansive shadow (0 16px 40px -12px rgba(22, 27, 45, 0.08)). A subtle 1px translucent border anchors card edges against the multi-hued backdrop.
IMAGERY
The visual hallmark is a 3D generative particle torus rendered as thousands of fine, multi-colored vector points shifting from violet to peach. Freely scattered micro-dots float outward to convey ambient intelligence. Photography and flat cartoon illustrations are strictly avoided in favor of mathematical, algorithmic precision.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline gradient ('With AI that runs O2C.') seamlessly bridging #5842eb to #f36c53, locked beside a floating AI interface card that overlaps a generative particle cloud. Misusing it involves tinting entire containers or applying multi-stop rainbow gradients to non-focal text.
MUST
- Reserve the iris-to-coral text gradient exclusively for the primary headline punchline.
- Use generous whitespace around the floating product card to let the particle artwork breathe.
- Keep card outlines subtle at 1px with #e5e7ee to retain clean SaaS precision.
- Align all metadata and trust indicators in a horizontal, low-opacity row.
AVOID
- Do not apply the coral-purple gradient to background containers or button fills.
- Avoid heavy drop shadows or dark skeuomorphic borders on card components.
- Do not use sharp 0px corners; maintain the soft 8px to 16px system curve.
- Avoid high-contrast borders on the eyebrow badge; it must remain softly tinted.
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. Try in DraPub 
