Split-image CTA — emerald (Mossly), legibility-fixed

Summary

A full-bleed split-image CTA section: bold left-aligned copy stack with dual buttons and trust chips on the left, a drawn product-UI mock (no fake browser chrome) floating on a soft emerald-washed dotted-grid right half. Sticky frosted nav above, dark full-bleed footer below. Light mode, emerald accent on near-black slate text, Inter throughout.

Style

Clean, modern SaaS marketing aesthetic. Light background (#ffffff) with near-black slate text (#0f172a) and a single emerald accent (primary #047857 / #059669, light wash #ecfdf5). Tight negative letter-spacing on headings (down to -0.045em), generous line-height, hairline borders (rgba(15,23,42,0.06-0.09)). Soft, layered shadows for depth, rounded-full pills and rounded-[20px] cards. A subtle emerald dotted grid feathered into the right half adds texture without noise. Frosted/blurred sticky nav scrim.

Layout & Structure

Full-height page: a sticky top nav, then a single two-column CTA section (max-width 1200px, ~py-28) that reflows to one column under lg, then a dark multi-column footer. Left column holds the copy+actions stack; right column holds a product-UI mock with two overlapping floating proof chips. The emerald wash + dotgrid + a white fade live as absolute layers behind the right half so there is no hard seam.

Sticky nav

CTA section shell + background layers

Left copy + actions

Right product mock

Floating proof chips

Dark footer

Special Notes

Legibility-fixed variant: the right-half emerald wash is feathered (mask + white fade at the seam) so it never bleeds under the headline, and the floating chips are kept clear of the h1. Keep to ONE accent (emerald) on near-black slate text. Heading tracking is aggressively tight (down to -0.045em) - preserve it. Icons via Iconify Phosphor (ph:*). On <lg the grid collapses to one column and the right-half background layers are hidden; on mobile the floating chips and dividers hide. Fonts: Inter only.