## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/phantom-com/df84c488-d9fa-4f45-8b51-bd3e334c55b2-1789146834018-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/phantom-com/df84c488-d9fa-4f45-8b51-bd3e334c55b2-1789146830218.webp
- Design on Kage: https://kage.design/designs/phantom-landing-page

# Build a Phantom-style bento landing page

Create a single-page marketing site for a consumer finance/trading product with the following design language.

## Shell & base
- Very light lavender page background (#EDEBFA-ish), generous outer padding (~24–32px).
- Rounded pill navigation bar floating at top: logo left; grouped pill container holding nav items with chevrons (Features, Learn, Explore, Company, Developers, Support); separate search icon pill and a solid light-purple "Download" pill button.
- Typography: friendly geometric sans throughout; large display headlines set medium weight with tight line-height; no bold shouting.

## Hero
- Full-bleed rounded (~24px radius) hero panel with a gray/video background, centered content: small muted eyebrow line ("Where the world trades"), huge white 3-line headline ("Your home for trading crypto, predictions, perps, and more"), and a single centered light lavender pill CTA with a small phone icon ("Download Phantom"). No product screenshot in the hero itself.

## Sectioned bento carousels
Repeat this pattern three times for feature themes (e.g. Trading, Move Money, Your security):
- Section header row: left pill badge with a small icon and the section name; right chevron prev/next controls.
- Horizontal carousel of tall cards (~16:18 ratio, fully rounded 20–24px corners, edge-to-edge cropped so a fourth card peeks off-screen).
- Each card: short benefit headline top-left in a matching tone, then a rich illustration or UI mock filling the lower two-thirds.

## Card colour system (the key idea)
Each card is its own colour world; colour carries hierarchy instead of borders or rules:
- Soft purple card with a white phone UI mock showing a "$200" balance input and green confirmation toast.
- Near-black card with floating pastel blobs and white outlined pills labelled "Traders", "Apps", "Tokens".
- Mint/off-white card with tilted yes/no "tickets" and big numeric text ("$134 Payout Claimed").
- Blue gradient card with a frosted-glass "My Balance $18,207.41" chip and 3D cloud/coin shapes.
- Purple gradient card with a lime coin and frosted Send/Receive panels.
- Pink-to-orange card with a holographic payment card and app badges.
- Cream, pale-yellow, and soft-pink security cards: 3D pattern blob, chat bubbles ("Need help?" / "Sure!"), and a dark scam-detection phone mock with a red warning banner.
Alternate headline colour (dark on light cards, white on dark cards) and keep copy to one or two lines per card.

## Closing sequence
- Centered muted two-line trust statement ("Trusted by a community of 20+ million users."), then a giant dark-purple serif display statement: "Get started. Download 🌑 Phantom." with an inline glyph, followed by a white pill Download button.
- Centered legal fine print in small italic paragraphs (card issuer / not-a-bank disclosures).
- Rounded footer panel: logo mark left; large "Enter your email" heading with a newsletter row and small "Sign up" pill; four link columns (Product, Resources, Company, Socials); green "Operational" status pill bottom-left; copyright and legal links on the bottom bar.

## Motion & polish
- Cards read as flat but tactile: soft inner gradients, frosted glass chips, 3D-shaped props, no hard shadows.
- Everything rounded: pills, cards, nav container, footer panel — consistent 16–24px radii on a light lavender stage.
- Make the three carousels horizontally scrollable/draggable with the chevron controls scrolling them.