[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-643-Kraken-Purple-Exchange":3},"# SYSTEM PROMPT — CODING AGENT TASK: \"KRAKEN PURPLE EXCHANGE\" LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality, single-page crypto-exchange landing page **on the first attempt**. Do not ask clarifying questions. Generate the full, finished deliverable (HTML + CSS + JS) in your response.\n\n**Brand language:** \"Kraken Purple Exchange\" — a 2024–2026 crypto trading aesthetic: clean white canvas with a commanding Kraken Purple (#7132f5) brand accent, a cool blue-gray neutral scale, a dual-font system (brand display font at weight 700 with −1px tracking + product UI font at 400–600), a signature 12px border-radius on all buttons (rounded, never pill), whisper shadows (rgba(0,0,0,0.03) 0px 4px 24px), purple-subtle buttons (rgba(133,91,251,0.16) background), and green success badges (#149e61 at 16% opacity). **All user-facing copy must be written in English.**\n\n**Page sections (in this order):** Sticky header with nav + theme toggle, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* **Class\u002FID Selectors Only:** Every design property, layout rule, and state must live in `style.css`, targeted via class or ID selectors.\n* **Semantic, Style-Agnostic Markup:** Use semantic HTML5 elements (`header`, `nav`, `main`, `section`, `article`, `footer`) with a logical heading hierarchy. Changing the site's look must never require touching the markup.\n\n### 1.2 CSS Variables (`var(--...)`) & Theme Tokens\nStore every visual token in `:root` exactly as defined below, and consume them everywhere — no hard-coded hex values inside component rules:\n\n```css\n:root {\n  \u002F* Brand *\u002F\n  --primary: #7132f5;                          \u002F* Kraken Purple — commanding accent *\u002F\n  --primary-hover: #5741d8;                    \u002F* Purple Dark *\u002F\n  --primary-deep: #5b1ecf;                     \u002F* pressed \u002F gradient stop *\u002F\n  --primary-lift: #855bfb;                     \u002F* lifted purple (dark-mode accent, focus rings) *\u002F\n  --secondary: #5741d8;\n  --primary-subtle: rgba(133, 91, 251, 0.16);  \u002F* subtle buttons, icon chips, tinted fills *\u002F\n  --primary-subtle-strong: rgba(133, 91, 251, 0.24);\n\n  \u002F* Surfaces *\u002F\n  --bg-primary: #ffffff;                       \u002F* sanctioned pure-white canvas (see exception) *\u002F\n  --bg-secondary: #f7f7fa;                     \u002F* cool blue-gray tinted surface *\u002F\n  --bg-subtle: #fefefe;                        \u002F* near-white cards on tinted sections *\u002F\n\n  \u002F* Text *\u002F\n  --text-primary: #101114;                     \u002F* Near Black *\u002F\n  --text-secondary: #686b82;                   \u002F* Cool Gray *\u002F\n  --text-muted: #9497a9;                       \u002F* Silver Blue — large text \u002F non-essential meta only *\u002F\n  --text-inverse: #ffffff;\n  --text-success: #149e61;                     \u002F* Verde *\u002F\n  --text-error: #d92d20;\n\n  \u002F* Borders *\u002F\n  --border-default: #dedee5;\n  --border-strong: #c9cbd6;\n  --border-success: #149e61;\n  --border-error: #d92d20;\n\n  \u002F* Feedback fills *\u002F\n  --success-subtle: rgba(20, 158, 97, 0.16);   \u002F* green success badges *\u002F\n  --error-subtle: rgba(217, 45, 32, 0.12);\n\n  \u002F* Radius — 12px is the signature *\u002F\n  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 16px;\n\n  \u002F* Whisper shadows *\u002F\n  --shadow-sm: 0 4px 24px rgba(0, 0, 0, 0.03);\n  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.06);\n\n  \u002F* Spacing & motion *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms;  --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n\n  \u002F* Elevation *\u002F\n  --z-dropdown: 100;  --z-modal: 1000;  --z-toast: 2000;\n\n  \u002F* Type *\u002F\n  --font-brand: \"Space Grotesk\", system-ui, sans-serif;   \u002F* display\u002Fbrand *\u002F\n  --font-product: \"Inter\", system-ui, sans-serif;          \u002F* body\u002FUI *\u002F\n}\n```\n\n* **Contrast Pairing (mandatory in every theme):** Light backgrounds pair with dark text; dark backgrounds pair with light text. Solid purple buttons pair with white text in both themes. `--primary-subtle` fills pair with `--primary` text in light mode and `--primary-lift` text in dark mode. Never allow dark-on-dark or light-on-light pairings.\n* **Light background rule:** Do not default to pure white anywhere; near-white surfaces use `#fefefe` and tinted surfaces use the cool blue-gray scale. **Exception (explicit theme requirement):** the Kraken canvas is a genuine `#ffffff` brand surface — `--bg-primary` is the *only* sanctioned pure-white value in the entire build.\n* **Silver Blue (#9497a9)** may only be used for text ≥18px \u002F 600 weight, decorative meta, or dark-mode secondary text — never for small essential copy on light backgrounds.\n* Set `color-scheme: light` on `:root` and `color-scheme: dark` on the dark selector so native form controls match the theme.\n\n### 1.3 Mandatory Dark Mode Support\n* Define the full dark token set in a `.dark` class on `\u003Chtml>`, duplicated inside `@media (prefers-color-scheme: dark)` as the no-JS fallback:\n  `--bg-primary: #101114; --bg-secondary: #171921; --bg-subtle: #1c1e28; --text-primary: #f4f4f7; --text-secondary: #9497a9; --text-inverse: #101114; --primary-hover: #855bfb; --primary-subtle: rgba(133,91,251,0.22); --primary-subtle-strong: rgba(133,91,251,0.30); --success-subtle: rgba(20,158,97,0.20); --text-success: #3ecf8e; --text-error: #ff7a70; --border-default: #272a36; --border-strong: #3a3d4c; --shadow-sm: 0 4px 24px rgba(0,0,0,0.45); --shadow-md: 0 8px 32px rgba(0,0,0,0.55);`\n* Theme switching must work purely by variable swap — zero HTML restructuring.\n* **Exception (theme flag):** the source style marks Dark Mode \"Not Recommended.\" That flag is **overridden**: dark mode is mandatory and must ship fully functional, tested for contrast on every surface.\n* **Persistence:** first visit follows `prefers-color-scheme`; the user's explicit choice persists via `localStorage`. Render a visible toggle button in the header using Material Symbols (`dark_mode` \u002F `light_mode`) with correct `aria-pressed` and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., stacked label\u002Finput groups use `align-items: stretch`).\n* Mobile-first: author base styles for small screens, then enhance at `48em` (768px) and `64em` (1024px). Multi-column rows collapse to columns on small viewports. Horizontal scrolling is forbidden — solve it with fluid sizing, `min-width: 0` on flex children, and `max-width: 100%`, never with `overflow-x: hidden` hacks.\n* Center all content in a `.container` (max-width ~72rem, padding-inline `var(--spacing-gap)`).\n\n### 1.5 Framework & Naming Convention\n* Use clean custom CSS organized in `@layer` order (tokens → base → components → utilities); Tailwind utilities are optional, and if used, every color\u002Fradius\u002Fshadow utility must reference the CSS variables above — no raw Tailwind palette values.\n* Enforce **BEM only** (`.block__element--modifier`) with generic reusable component classes (`.btn`, `.card`, `.input-group`). Never mix naming conventions.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Dual font system via Google Fonts:** load **Space Grotesk** (weights 500\u002F700) as the brand display font and **Inter** (weights 400\u002F500\u002F600) as the product UI font, via `\u003Clink>` tags with `preconnect`. Bind them to `--font-brand` and `--font-product`.\n  * **Exception:** `system-ui` appears in the source spec and is permitted **only** as the final fallback in each `font-family` stack — never as the primary typeface.\n* **Display rules:** brand font, weight 700, size 48px, `letter-spacing: -1px` for the hero H1 (`clamp(2rem, 4vw + 1rem, 3rem)`; tracking tightens to −0.5px below 48px). Section H2s use the brand font at 32–40px, weight 700, tracking −0.5px. Negative tracking is forbidden on body text.\n* **Body\u002FUI rules:** product font, 16px base, weights 400–600, `line-height: 1.6` (1.2 for display). Body copy uses `--text-secondary`; never below 14px for essential text.\n* **Icons:** Google Material Symbols (Outlined), loaded via the official Google Fonts stylesheet. Raw inline SVGs, local icon files, and emoji-as-icons are all forbidden. Typical icons for this page: `currency_exchange`, `trending_up`, `lock`, `account_balance_wallet`, `bolt`, `verified`, `support_agent`, `check_circle`, `expand_more`, `menu`, `close`, `dark_mode`, `light_mode`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--subtle`, `.btn--ghost`, `.btn--danger`, `.is-loading`, `.is-success`, `.is-error`, `[disabled]`)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` product font 600, min touch target 44×44px, padding `0.75rem 1.5rem`, `border-radius: var(--radius-md)` (12px — rounded but never pill; `999px` is forbidden on buttons), transition `var(--transition-fast)`.\n* **Variants:** Primary = `--primary` background + white text. Subtle = `--primary-subtle` background + `--primary` text (dark mode: `--primary-lift` text). Ghost = transparent + `1px solid var(--border-default)` + `--text-primary`. Danger = `--text-error` background + white text, visually distinct in both themes.\n* **Hover:** brightness\u002Fdepth shift (primary darkens to `--primary-hover` and gains `--shadow-md`; subtle deepens to `--primary-subtle-strong`), `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring — `outline: 2px solid var(--primary)` with `outline-offset: 2px` (dark mode uses `--primary-lift`) — visible on both canvases.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** disables interaction (blocks double-clicks), preserves button dimensions, and renders a rotating Material Symbol (`progress_activity`) or pure-CSS spinner.\n* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no press transform.\n* **Success\u002FError:** temporary feedback classes driving background\u002Ftext from `--text-success` \u002F `--text-error` (e.g., submit button flips to green with a `check_circle` icon on success).\n\n### 2.2 Card Component (`.card`, `.feature-card`, `.step-card`, `.testimonial-card`, `.pricing-card`, `.card--highlight`)\n* **Default:** Flexbox column layout, `--bg-primary` surface (or `--bg-subtle` on tinted sections), `1px solid var(--border-default)`, `border-radius: var(--radius-md)`, `box-shadow: var(--shadow-sm)` (whisper), internal gap `var(--spacing-gap)`.\n* **Hover (interactive cards only):** elevation shift — `transform: translateY(-2px)` + `--shadow-md` with `var(--transition-normal)`.\n* **Focus-within:** border color shifts to `--primary` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** define `.skeleton` with a shimmer keyframe animation in CSS so swaps never cause layout jumps.\n* **Empty State:** define a reusable `.empty-state` layout — Google Material Symbol icon + clear guidance text.\n\n### 2.3 Form & Input Requirements (`.input-group`, `.label`, `.input`, `.field-error`)\n* **Structure:** flex column (`align-items: stretch` — justified exception), wrapping a `\u003Clabel>`, the input, and a dedicated error feedback container `\u003Cp class=\"field-error\" aria-live=\"polite\">` linked via `aria-describedby`.\n* **States (all styled in CSS):** empty; focused (`--primary` border + `0 0 0 3px var(--primary-subtle)` ring); filled; valid (`--border-success` + `check_circle` icon); invalid (`--border-error` + error icon + error text in `--text-error` — icon and text, never color alone); disabled (`--bg-secondary` fill, reduced opacity, `cursor: not-allowed`); read-only.\n* Inputs use 12px radius, 44px min height, product font 16px.\n\n### 2.4 Navigation & Header (`.site-header`, `.nav`, `.nav__drawer`, `.theme-toggle`)\n* Sticky top header at `var(--z-dropdown)`, translucent surface (`rgba(255,255,255,0.9)` \u002F dark: `rgba(16,17,20,0.9)`) with `backdrop-filter: blur`, bottom border `1px solid var(--border-default)`.\n* Flex row: brand wordmark \"Kraken\" in the brand font 700 with a Material Symbol icon in a purple-subtle chip, centered nav links (Features, How It Works, Pricing, FAQ — anchor links with smooth scroll and `scroll-padding-top` for the sticky header), then the theme toggle and a primary CTA button.\n* **Mobile (\u003C48em):** links hide; a `.nav-toggle` hamburger (Material Symbol `menu`\u002F`close`) with `aria-expanded` + `aria-controls` opens a flex-column drawer panel below the header; drawer closes on link click and `Esc`; focus moves to the first link on open; `Esc` returns focus to the toggle.\n* Include a visually hidden \"Skip to main content\" link that becomes visible on keyboard focus.\n\n### 2.5 FAQ Accordion (`.faq-item`, `.faq__question`, `.faq__answer`)\n* Use native `\u003Cdetails>`\u002F`\u003Csummary>` or a button + region pattern with correct `aria-expanded`\u002F`aria-controls`. The question row: flex, `align-items: center`, `justify-content: space-between`, 12px radius, `1px solid var(--border-default)`, white\u002Fdark surface, hover tint, visible focus ring.\n* The chevron (`expand_more`) rotates 180° on open. Animate open\u002Fclose purely with CSS (e.g., `grid-template-rows: 0fr → 1fr` interpolation with `overflow: hidden`) using `var(--transition-normal)`, disabled under `prefers-reduced-motion`.\n\n### 2.6 Badges & Dynamic Feedback\n* **Success badges (`.badge--success`):** inline-flex, `align-items: center`, gap `0.375rem`, padding `0.25rem 0.625rem`, `border-radius: var(--radius-sm)`, 12px\u002F600 text, background `var(--success-subtle)`, color `var(--text-success)`, leading `check_circle` Material Symbol. Use for the hero trust marker and the pricing \"Most Popular\" tier.\n* **Pricing billing toggle (`.billing-toggle`):** segmented control (Monthly \u002F Annual) built as two buttons with `aria-pressed`, 12px outer radius; the active state uses `--bg-primary` + `--shadow-sm` on a `--bg-secondary` track. Price values switch from `data-monthly`\u002F`data-annual` attributes; announce changes through an `aria-live=\"polite\"` region; the Annual option carries a green \"Save 20%\" success badge.\n* **Modal note:** no modal is required for this page; if any dialog is introduced, it must implement animated opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states, a backdrop overlay, focus trapping, and close via `Esc` and overlay click, layered at `var(--z-modal)`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` type and spacing, flexbox collapse at `48em`\u002F`64em`, zero horizontal overflow.\n* **Smooth animations:** every state change transitions with `var(--transition-fast)` or `var(--transition-normal)` and `var(--ease-standard)`; all non-essential motion (reveal-on-scroll via IntersectionObserver adding `.is-visible`, chevron spins, hover lifts) is wrapped in `@media (prefers-reduced-motion: no-preference)`.\n* **Accessibility (a11y):** WCAG AA contrast in **both** light and dark modes; never rely on color alone (pair every error\u002Fsuccess with an icon and text); semantic HTML5 and correct ARIA roles\u002Flabels on the drawer, accordion, and toggle; logical DOM\u002Ffocus order; full keyboard operability — nothing is mouse-only.\n* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n* **Destructive actions:** `.btn--danger` must remain clearly distinct in both themes (not used on this page's primary flows, but the class must exist and be styled).\n* **Dynamic feedback:** `aria-live=\"polite\"` regions for form errors, form success, and pricing toggle updates.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** three separate files — `index.html`, `style.css`, `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>` reference; no inline `\u003Cscript>` logic, no inline CSS, no CSS-in-JS.\n* **Naming convention:** BEM only, across all three files.\n* **No unrequested placeholders:** the user supplied no copy, so write realistic, specific English crypto-exchange copy (plausible fee percentages, asset counts, uptime claims, support hours). Lorem ipsum is forbidden.\n* **Head requirements:** `lang=\"en\"`, viewport meta, descriptive `\u003Ctitle>` and meta description, `\u003Cmeta name=\"theme-color\">` for both light and dark, Google Fonts and Material Symbols links with `preconnect`.\n* **No external\u002Flocal images or inline SVGs:** avatars are CSS-composed initial circles (purple-subtle background, purple initials); any hero decorative panel (e.g., a BTC\u002FUSD stat card with a green delta) is built from styled divs with real text values.\n* **`script.js` scope (vanilla only):** theme detection\u002Fpersistence\u002Ftoggle, mobile drawer, accordion behavior (if beyond native), billing toggle, email form validation with inline `aria-live` errors and a success state, optional reduced-motion-aware reveal animations.\n\n---\n\n## 5. PAGE CONTENT & SECTION REQUIREMENTS (all copy in English)\n\n* **5.1 Header:** Wordmark \"Kraken\", nav anchors, theme toggle, primary CTA \"Get Started\".\n* **5.2 Hero:** green success badge trust marker (e.g., \"Licensed · ISO 27001 certified\"); H1 in brand font 48px\u002F700\u002F−1px (e.g., \"Trade crypto with institutional-grade confidence\"); 16–18px subcopy in `--text-secondary`; primary CTA \"Create Free Account\" + purple-subtle CTA \"Explore Markets\"; optional CSS-composed market stat card.\n* **5.3 Features (3 cards):** Deep liquidity (200+ pairs, tight spreads), institutional-grade security (95% cold storage, 24\u002F7 monitoring), pro-grade trading tools (advanced order types, real-time charts). Each card: Material Symbol in a purple-subtle rounded chip, title, supporting copy; full card state spec per 2.2.\n* **5.4 How It Works (3 steps):** 01 Create & verify your account → 02 Deposit funds (fiat or crypto) → 03 Trade and track your portfolio. Numbered markers in brand font with purple accents; row on desktop, column on mobile.\n* **5.5 Testimonials (3 cards):** realistic quotes with CSS initial avatars, name, role\u002Ftrader type, and a green `verified` success badge; 3 columns → 1 on mobile.\n* **5.6 Pricing (3 tiers):** Starter (free, higher spot fees), Trader (mid, \"Most Popular\" — green success badge, highlighted card with `--primary` border or purple-subtle fill), Pro (institutional, custom). Each with feature list, price per 2.6's billing toggle, and appropriately variant CTA buttons (subtle \u002F primary \u002F primary).\n* **5.7 FAQ (5–6 items):** security, fees, withdrawal times, KYC verification, supported regions, 24\u002F7 support — accordion per 2.5.\n* **5.8 Final CTA:** full-width band with `--primary-subtle` tinted background or a whisper-shadow card; H2 in brand font; working email-capture form (label + input + primary button) with full form-state spec per 2.3, `aria-live` error handling, button loading state, then a green success badge confirmation.\n* **5.9 Footer:** brand line, four columns of secondary links (Product, Company, Legal, Support — e.g., Markets, Fees, API Docs \u002F About, Careers, Press \u002F Terms, Privacy \u002F Help Center, Status), Material Symbol social links with `aria-label`s, copyright, and a small-print risk disclosure (\"Trading crypto involves risk…\").\n\n**Final directive:** Generate the complete `index.html`, `style.css`, and `script.js` now — fully functional, both themes verified, on the first attempt.\n",1791954990429]