[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-313-Aura-Premium-WebGL-Iconify":3},"# BUILD SPECIFICATION — \"AURA PREMIUM\" LANDING PAGE (WebGL & Iconify)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality \"Aura Premium\" landing page in a single attempt, generating the final code immediately. Follow every rule in this specification exactly. All user-facing copy must be written in **English**.\n\n## 0. PROJECT BRIEF\n\n* **Product & Tone:** \"Aura\" is a premium SaaS product presented with a luxury, editorial-grade voice (category: Luxury & Editorial). Write real, confident, premium English marketing copy — no lorem ipsum.\n* **Theme:** \"Aura Premium WebGL & Iconify\" — Premium, Animated, Interactive, Cinematic. Era: 2025–2026 Premium Interactive. Deep-black luxury UI.\n* **Color Mode:** Dark-only (Light: No \u002F Dark: Full).\n* **Sections (in order):** Sticky Header\u002FNav → Hero → Logo Marquee (social proof) → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. Explicitly forbidden: `style=\"...\"` attributes, inline `\u003Cstyle>` blocks, and raw inline SVG code.\n* Target all design properties, layout rules, and states via class\u002FID selectors only.\n* HTML must remain semantic and styling-agnostic: changing the site's look must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (single dark theme):\n* **Colors:** `--primary: #3B82F6` (Electric Blue); `--secondary: #8B5CF6` (Neon Violet); `--bg-primary: #0A0A0A` (Deep Black); `--bg-secondary: #1A1A2E` (Dark Slate); `--text-primary: #FFFFFF` (Pure White); `--text-secondary: rgba(255,255,255,0.64)`; accents `--accent-amber: #F59E0B` (Warm Amber), `--text-success: #10B981` (Emerald), `--accent-rose: #EC4899` (Vibrant Rose); functional `--text-error \u002F --border-error: #EF4444` (functional tokens may extend the decorative palette); `--border-default: rgba(255,255,255,0.08)`; `--border-success: #10B981`.\n* **Contrast pairing:** every dark background token pairs with light text tokens; verify ≥ 4.5:1 for body text in the dark theme.\n* **Shape, elevation, motion, stacking:** `--radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm \u002F --shadow-md` (dark-theme glows); `--spacing-gap: 1.5rem; --transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --z-dropdown: 100; --z-modal: 200; --z-toast: 300; --z-canvas: -1`.\n* **Mandatory CSS foundations** (implement robustly, with `-webkit-mask-image` fallbacks and `@property --angle` for the conic beam):\n  * `body { background: #0A0A0A; color: #FFFFFF; font-family: 'Inter', system-ui, sans-serif; }` and `iconify-icon { font-size: 24px; }` as the base.\n  * `.border-beam` — 1px transparent border, `background-clip: padding-box`, `::after` with `conic-gradient(from var(--angle), transparent 70%, #3B82F6, #8B5CF6, transparent 100%)`, `inset: -1px`, `border-radius: inherit`, `z-index: -1`, rotating 3s linear infinite.\n  * `.sonar` — `@keyframes sonar-pulse { 0% { transform: scale(1); opacity: 0.8 } 100% { transform: scale(2.5); opacity: 0 } }`, 2s ease-out infinite.\n  * `.flashlight-card` — `background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(59,130,246,0.15), transparent 50%)`.\n  * `.marquee` — `marquee-scroll` 30s linear infinite; `mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent)`.\n  * `.vertical-text` — `writing-mode: vertical-rl` with a clip slide-down reveal, letter by letter, staggered.\n  * `.section-number` — `font-size: 5rem; font-weight: 800; opacity: 0.08; position: absolute; top: 0; left: 2rem`.\n  * `canvas { position: fixed; top: 0; left: 0; z-index: -1; }`.\n\n**1.3 Mandatory Dark Mode Support**\n* Dark mode is the defined, default theme — all tokens above constitute the dark palette, defined once in `:root`.\n* **Exception:** This theme is explicitly dark-only; therefore the light-mode palette, the visible theme toggle, and `localStorage` persistence are waived for this build — token-driven theming and all dark-mode contrast\u002Faccessibility quality bars remain fully in force.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox; every flex container **must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n* Mobile-first and responsive out of the box: rows convert to columns on small viewports; zero horizontal scrolling anywhere (marquee, vertical text, and canvas must be overflow-safe).\n\n**1.5 Framework Default**\n* Use Tailwind CSS as the default engine, consumed exclusively through `@layer` \u002F `@apply` compiled into `style.css`, so the HTML carries only semantic class names that map back to CSS variables and reusable component classes (`.btn`, `.card`, `.input-group`). If the pipeline makes this impractical, fall back to clean, hand-written, token-driven CSS — never mix utility-class and BEM conventions in the markup.\n\n**1.6 Typography & Icons**\n* **Text:** Google Fonts — Inter (weights 400–800), loaded via `\u003Clink>`, bound to `--font-base`. Headings use tracking-tighter (`letter-spacing: -0.05em`) at weight 700–800.\n* **Icons — Exception to the Google Material Symbols default:** per the explicit theme spec, all icons are delivered via the Iconify web component `\u003Ciconify-icon>` (CDN script): **Solar Duotone Bold** for UI icons, **Solar Linear** for the logo mark, **Simple Icons** for company logos. Raw inline SVG code and local icon files remain strictly forbidden.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons (pill-shaped, `.btn` family)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-pill);` minimum touch target 44×44px. Variants: `.btn--primary` (gradient `#3B82F6 → #8B5CF6`, white text) and `.btn--ghost` (transparent, 1px `--border-default`).\n* **Hover:** the 1px border-beam conic animation (blue→violet, 3s rotation) activates around the pill, plus a brightness\u002Fshadow shift and `cursor: pointer`.\n* **Focus-visible:** distinct ring via `outline`\u002F`box-shadow` using `--primary`; fully keyboard navigable.\n* **Active:** `transform: scale(0.97)` click feedback.\n* **Loading:** disables interactions, prevents double-clicks\u002Fsubmissions, and renders a CSS-only spinner (border animation) or rotating `iconify-icon` without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (e.g., form submission).\n* **Danger:** define `.btn--danger` (rose\u002Fred) visually distinct in the dark theme, even if unused.\n\n**2.2 Cards (`.card` family — Features, Pricing, Testimonials)**\n* **Default:** flexible Flexbox layout, `--bg-secondary` surface, 1px `--border-default`, `--radius-lg`, `--shadow-sm`.\n* **Hover:** `translateY(-2px)` + shadow lift + the subtle **flashlight effect on both background and border**: JS updates `--mouse-x` \u002F `--mouse-y` per card (rAF-throttled `mousemove`); background uses `.flashlight-card`; the border follows the cursor via a gradient-border technique.\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n* **Loading:** skeleton shimmer keyframes defined in CSS with no layout shift.\n* **Empty state:** structured fallback pattern with a Solar Duotone Bold icon + guidance text (define the classes even if unused).\n\n**2.3 Form & Input (Final CTA email capture)**\n* **Structure:** flex `.input-group` wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a dedicated error feedback container.\n* **States:** empty, focused (outline ring via `--primary`), filled, valid (`--border-success` + check icon), invalid (`--border-error`, red text, error icon, message), disabled, read-only.\n* Validate on submit; announce errors via `aria-live=\"polite\"`; show a success state on the button using `--text-success`.\n\n**2.4 Modal \u002F Popup (guardrail)**\n* No modal is required by this spec — the FAQ uses an accordion. If you introduce any overlay, it must have: centered flex container, backdrop, `iconify-icon` close button, keyboard focus trap, Esc\u002Foverlay-click close, and CSS-animated open\u002Fclose states.\n\n**2.5 Theme-Specific Components**\n* **Logo\u002Flettermark:** Solar Linear icon + \"Aura\" wordmark, tracking-tighter, weight 800.\n* **Logo marquee:** 11 company logos via Simple Icons (`simple-icons:nasa, spacex, uber, visa, grab, bose, discover, dji, nikon, craftsman, sony`) at **64×64**, white at reduced opacity (full opacity on hover), infinite 30s loop with the alpha mask per `.marquee`; duplicated track marked `aria-hidden=\"true\"`; container labeled for assistive technology.\n* **Sonar decorations:** pulsing rings on the hero badge, pricing badge, and decorative orbs; `aria-hidden`.\n* **Vertical text:** decorative `vertical-rl` labels on section edges, revealed letter by letter via clip slide-down with staggered delays; `aria-hidden`.\n* **Section numbers:** `01 \u002F 02 \u002F 03` per `.section-number` on Features, How It Works, and Testimonials; `aria-hidden`.\n* **Vertical container lines:** 1px gradient (white→transparent) lines spanning container height as decorative dividers; `aria-hidden`.\n* **WebGL image columns:** the hero visual and all primary imagery (including testimonial headshots) reveal via **4 vertical column slices sliding down** with staggered scroll speeds and **motion blur trails**; the columns **snap to perfect alignment when scroll stops**. Implement with WebGL — a fixed background canvas (`z-index: -1`) for the ambient scene plus column-sliced reveals for in-flow images — with a CSS clip-path\u002Ftransform fallback when WebGL is unavailable. Canvas is `aria-hidden`.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid type via `clamp()`, no horizontal overflow at any breakpoint.\n* **Smooth animations:** CSS transitions on all state changes (`var(--transition-normal)`, `var(--ease-standard)`).\n* **Staggered scroll with motion blur:** IntersectionObserver triggers staggered entrance reveals; blur trails tied to scroll velocity, clearing at rest — subtle, never disorienting.\n* **`prefers-reduced-motion`:** disable the marquee, sonar, beam rotation, blur, stagger, and WebGL motion; all content must remain fully accessible in static form.\n* **Accessibility:** semantic HTML5 (`header\u002Fnav\u002Fmain\u002Fsection\u002Farticle\u002Ffooter`), skip link, logical DOM\u002Ffocus order, full keyboard operability (accordion via Enter\u002FSpace with `aria-expanded`; mobile menu closes on Esc), visible focus rings, `aria-live` for form feedback, descriptive `alt` text on headshots, decorative elements `aria-hidden`, never rely on color alone to communicate state, and contrast ≥ 4.5:1 body \u002F ≥ 3:1 large text in the dark theme.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Performance:** rAF-throttle mousemove, passive scroll listeners, no layout thrash.\n\n## 4. SECTION-BY-SECTION BUILD REQUIREMENTS\n\n**4.1 Header (sticky):** lettermark logo; nav links (Features, How It Works, Testimonials, Pricing, FAQ); pill CTA \"Get Started\" with border-beam hover; backdrop-blur and border-bottom appearing after scroll; mobile hamburger opening an animated slide-down panel (`aria-expanded`, Esc close, focus managed).\n\n**4.2 Hero:** full viewport over the fixed WebGL canvas. Sonar-dot eyebrow badge; H1 tracking-tighter with a gradient text span (blue→violet); supporting subcopy; two CTAs (primary gradient pill + ghost pill); hero visual revealed via the 4-column WebGL clip slide-down; vertical-text decorative label; scroll indicator with sonar pulse; staggered entrance animations.\n\n**4.3 Logo Marquee:** \"Trusted by\" heading plus the infinite marquee of the 11 Simple Icons logos per 2.5.\n\n**4.4 Features (01):** `.section-number` \"01\", vertical line, heading + subcopy; 3 interactive cards, each with a Solar Duotone Bold icon, title, and description; flashlight hover; staggered scroll reveal with motion blur.\n\n**4.5 How It Works (02):** `.section-number` \"02\"; 3 steps connected by a vertical gradient line; each step shows its step number (01\u002F02\u002F03), a Solar Duotone Bold icon, title, and description; staggered reveal.\n\n**4.6 Testimonials (03):** `.section-number` \"03\"; 3 cards featuring **real headshot photos** (stable public portrait URLs, e.g., Unsplash or pravatar — real photos, never letter avatars) with descriptive alt text, 5-star amber rating icons, quote, name, and role; flashlight hover; headshots revealed via the 4-column clip slide-down.\n\n**4.7 Pricing:** 3 tiers (e.g., Starter \u002F Pro \u002F Scale); the middle tier is highlighted with a \"Most Popular\" badge (sonar dot) and a gradient border (blue→violet); each tier has a price, a feature list with emerald check icons, and a pill CTA; cards use `.card` + flashlight hover.\n\n**4.8 FAQ:** accessible accordion (5–6 items): `\u003Cbutton>` triggers with `aria-expanded` + `aria-controls`, CSS-animated expand\u002Fcollapse (grid-rows or height technique), rotating chevron icon, fully keyboard operable.\n\n**4.9 Final CTA:** large gradient headline, subcopy, the email capture form per 2.3 with button loading→success states, sonar decorations, and a container treated with border-beam or flashlight.\n\n**4.10 Footer:** lettermark logo + tagline; secondary link columns (Product, Company, Resources, Legal); social icons via Simple Icons (X, GitHub, LinkedIn); bottom bar with copyright; links use coherent destinations (in-page anchors where applicable).\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate, complete, runnable `index.html`, `style.css`, and `script.js`. External CDN references are allowed (Google Fonts, Iconify web component, Tailwind, optionally three.js). A single `\u003Cscript src=\"script.js\" defer>` entry point; no inline scripts, no inline styles, no inline SVGs.\n* **Naming:** BEM exclusively (`block__element--modifier`) across HTML and CSS — one convention, never mixed.\n* **Copy:** all user-facing copy in English with a luxury editorial tone, real and coherent for the Aura product; no lorem ipsum; placeholders only where content is genuinely unspecified.\n* **script.js scope:** WebGL scene + column reveals, scroll-velocity tracking with snap-to-rest, IntersectionObserver staggers, card flashlight mouse tracking, marquee track duplication, accordion, mobile menu, form validation — no dead code.\n* Generate the full code for all three files in your response, on the first attempt.\n",1791954984672]