Evervault

Build the "Evervault" kickstart — An encrypted-vault developer page: a near-black canvas, a white card beside one ultraviolet beam and a cascade of ciphertext, rising into a violet gradient arch.

## Design
Build a rebrandable landing page for a card-data security platform.

Create a complete landing page for Keyward, a fictional developer platform that seals card numbers in the browser so a company's own servers only ever hold ciphertext, then relays payments to any processor. Its core idea: an encrypted vault lit by one ultraviolet beam — a near-black product canvas where a single violet light reveals the card, the ciphertext and the headline. This is a concept presentation, not a real company — no real customers, processors, card networks, investors or people. Use original branding, artwork and copy throughout.

Color: a dark system with a blue-violet undertone and one violet key. Void Canvas #010314 is the page background everywhere — never introduce a lighter page section. Obsidian Surface #171825 is the floating navigation and secondary panels; Slate Layer #2A2B3A is content cards, the code card, eyebrow pills and inputs; Carbon Border #343543 is every hairline, divider and card edge. Text is never pure white: Frost White #ECECFB for headlines and high emphasis, Lunar White #DFE1F4 for body and navigation, Mist #BABCD2 for the lighter half of the sub-headline, Fog #9FA2B9 for secondary copy, Ash #5E6077 for footer metadata. Ultraviolet #B88CFF is links, line icons, code strings and gradient ends — never a fill. Deep Iris #6633EE lives only inside gradients and the logo bar, never as a flat surface. The primary button is a Frost White #ECECFB pill with Void Canvas #010314 text. Code keywords take Code Rose #F92672. Ciphertext glyphs are #847FA1. Shadows are violet-tinted, never grey: content cards take rgba(0,0,0,0.25) 0 8px 16px -4px, rgba(0,0,0,0.25) 0 4px 8px -2px, rgba(0,0,0,0.2) 0 1px 2px and an inset 1.5px ring of rgba(190,167,255,0.24).

Typography: three families. Headlines use the grotesk "Roobert", "Inter Tight", Manrope, "Helvetica Neue", Arial, sans-serif at weight 500 with tightening tracking — the 60px hero headline at -0.025em and line-height 1.13, a 32px sub-headline at -0.02em/1.25, 48px section heads at -0.025em/1.13, 18px card titles at -0.01em. Never set body copy under 18px in the display face. Everything else uses Inter, "Helvetica Neue", Arial, sans-serif with "kern", "liga" and "salt" on: 16px/1.75 hero lead, 16px/1.94 section copy, 14px/1.76 card copy, 13px weight 500 navigation and buttons (14px for the hero buttons). Labels and code use "Roboto Mono", "JetBrains Mono", ui-monospace, monospace: eyebrow pills 11px weight 500, uppercase, letter-spacing 0.4em; code 12px/1.5; ciphertext 12px at 0.4em tracking. Locally installed fonts only, no remote font request.

Shapes and spacing: buttons and tags are 9999px pills; badges 8px; content cards 12px, the toggle panel 16px; the navigation 19.2px; the hero card 24px; the hero band and closing band 38.4px. A 1200px centred column with 24px side padding, 80px between sections, 24px card padding, an 8px element gap.

Announcement bar: a 36px strip sitting directly on the canvas with a Carbon Border #343543 hairline under it; centred 13px Lunar White text — a small Ultraviolet sparkle glyph, Keyward Relay now seals card data in 40 regions · sample, and a Learn more → link with a faint underline.

Navigation: 16px below the bar, 52px from each edge. The logo on the left is three stacked rounded bars — the middle one shorter and Ultraviolet, a dot beside it — next to the lowercase wordmark keyward at 19px weight 500. Centred over the page, the floating pill: Obsidian Surface #171825, 19.2px radius, 5px by 8px padding, a 1px white-at-10% inset highlight on the top edge, holding Home, Platform, Solutions, Customers, Pricing, Docs, Resources and Careers at 13px weight 500 with 11px padding each, Home on a faint 4% white tab. On the right, Log in as a plain 13px link and the Frost White pill Talk to an expert.

Hero (id top): the first viewport, the navigation floating over it. A starfield of about 150 tiny Lunar White dots (0.6–1.5px, 25–90% opacity), densest around the centre, fills the dark upper half. Three elements share one row 222px from the top: on the left, at x 152, a 380×240 card with a 24px radius and a white-to-violet gradient (linear-gradient 137.71deg, #EDE7FF 3.39%, #FFFFFF 42.89%, #DFEFFF 85.67%), a faint Deep Iris hexagon mesh at 10%, a champagne chip (gradient 135.94deg through #D2C9A9, #EFE6C5, #DDD3B0, #FAEBB7), a generic two-circle issuer mark in Mist at top right, the sample holder Ada Okonkwo at 16px weight 500 in Slate, the number 4000 1234 0000 0000 in 19px mono and a contactless glyph; in the centre at x 720, a 360px-tall vertical beam — a white core fading through Ultraviolet into a wide blurred Deep Iris glow; on the right, from x 838, fourteen rows of thirty random ciphertext glyphs in 12px mono at 0.4em tracking in #847FA1, a few in Frost White, fading out at both ends with a mask. Then the Gradient Hero Band: from 400px down, inset 24px from each side, top corners 38.4px, filled with radial-gradient(130% 120% at 50% 0px, rgba(1,3,20,0) 37.41%, #6633EE 69.27%, #FFFFFF 100%) so it rises from the dark into ultraviolet and a white glow at the bottom edge, with a 1px violet-tinted rim on top. Centred inside it: the 60px Frost White headline Sealed Card Data, Anywhere; the 32px sub-headline Full protection, almost no compliance scope with Full and almost no in Frost White and the rest in Mist #BABCD2; a 16px/1.75 Lunar White lead, max 560px, Keyward seals card numbers the moment they are typed, so your servers only ever hold ciphertext — route payments to any processor, trim your PCI footprint and issue cards without a vault of your own.; then a Frost White pill Talk to an expert with a small chevron and a ghost text link Get started, 20px apart.

Trust (id trust): a six-column row of original fictional wordmarks set in the display face at 22px weight 600 in Lunar White at 85% — Northwind, Halcyon, Parcelly, Brightmoor, Tallow&Co, Quayside — over a centred 13px Fog caption labelled sample.

Platform (id platform): a 5 + 7 split. Left: the eyebrow pill Built for developers, a 48px heading One vault, every processor, a 16px Fog paragraph and a ghost link View the docs →. Right: a 16px-radius Obsidian toggle panel with the content-card shadow, four rows split by Carbon hairlines — Field sealing and Relay tagged ✓ ALWAYS ON, Card lookup and 3-D Secure tagged ENABLED — each tag 10px mono Ultraviolet on Plum #1F1D3A.

Features (id features): the eyebrow Platform, the heading Everything around the card, and a four-column grid of Slate #2A2B3A cards (12px radius, 24px padding, the violet shadow stack): a 24px thin-stroke Ultraviolet line icon, an 18px title — Seal, Relay, Issue, Route — and one 14px Fog line each.

Code (id code): a split with the eyebrow Three lines and the heading Drop in the sealed field beside a code card — Slate #2A2B3A, 1px Carbon border, 12px radius, 16px padding, tabs checkout.tsx (active, Frost White) and keyward.ts (Fog), and four lines importing a SealedCard component from a fictional @keyward/react package, keywords in Code Rose, strings in Ultraviolet, names in Frost White.

Closing band (id pricing): a second 38.4px-radius gradient band inset 24px, radial-gradient(140% 107.13% at 50% 10%, rgba(1,3,20,0) 37.41%, #6633EE 69.27%, #FFFFFF 100%), 96px tall padding, with the centred 48px heading Stop storing card data and the same two calls to action.

Footer (id footer): a Carbon Border top hairline and a 13px Ash row — keyward · a fictional sample on the left, anchor links Platform · Docs · Pricing · Careers on the right.

## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties

Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius and shadow token. Render the page as a server component — it needs no client state. Draw the starfield as one inline SVG and the ciphertext as text, both generated from a fixed seed at build time so the markup is deterministic between renders; the card's hexagon mesh is an inline SVG pattern and every icon is inline SVG. Use local font stacks only — no remote font, image, logo or analytics host. Provide page metadata. Build and run the production page before capturing its preview.
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Keep Keyward clearly fictional and rebrandable: no Evervault wordmark, logo, copy, customer logos, product names or card-network marks, no real people, investors or certifications. Every claim and wordmark is labelled sample; the card number is an obvious test number and the issuer mark is two plain circles. The canvas stays Void Canvas #010314 from top to bottom — the only light comes from the two gradient bands and the beam; Obsidian Surface #171825, Slate Layer #2A2B3A and Carbon Border #343543 do the layering; text is Frost White #ECECFB, Lunar White #DFE1F4, Mist #BABCD2, Fog #9FA2B9 or Ash #5E6077, never pure white; Ultraviolet #B88CFF stays on links, icons and code strings; Deep Iris #6633EE never fills a flat surface; the only filled button is the Frost White #ECECFB pill with Void Canvas #010314 text. Headlines are the weight-500 grotesk, body Inter, labels the 0.4em-tracked uppercase mono. Long paragraphs are left-aligned outside the hero; centre only headlines and short call-to-action clusters. Every link leads to a real section on the page; nothing submits or stores data. Content is initially visible — no scroll reveals, typewriter ciphertext, animated stars or pulsing beam; hover and focus are a 150ms opacity change, disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair (hero text sits on the dark upper half of the band), a visible 2px Ultraviolet focus ring, and a 360px layout without horizontal overflow, where the navigation pill collapses to the logo and the Talk to an expert pill, the card stacks above the headline, the ciphertext hides and the grids become one column.

### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.