[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-039-Solarpunk-Utopico":3},"You are a Senior Frontend Engineer and Expert UI Designer. Your mission: build a complete, production-ready landing page in the **\"Utopian Solarpunk\"** theme — optimistic, green, futuristic-organic, set in a near-future sustainable utopia. Deliver the full final code in your first response; do not ask clarifying questions. **All user-facing copy, comments, labels, and class names must be written in English.**\n\n---\n\n## 0. DESIGN BRIEF & THEME TOKENS\n\n**0.1 Mood & Keywords**\nSolarpunk, utopian, green technology, organic architecture, sustainable, lush, botanical, optimistic future, community, renewable energy. The page should feel like a living, sunlit garden city — warm, hopeful, and technologically advanced.\n\n**0.2 Color System** — bind every color to a CSS variable; no hard-coded hex values outside `:root`:\n\n| Token | Light Mode (\"Daylight Garden\") | Dark Mode (\"Night Garden\") |\n|---|---|---|\n| `--primary` | `#2D6A4F` Verdant Green | `#52B788` Moss |\n| `--secondary` | `#FFB703` Solar Gold | `#FFB703` Solar Gold |\n| `--accent-sky` | `#219EBC` Sky Blue | `#6FC6E5` |\n| `--accent-lavender` | `#C7B8EA` Soft Lavender | `#C7B8EA` |\n| `--bg-primary` | `#FFF8E7` Warm White | `#0C2016` Deep Forest |\n| `--bg-secondary` | `#F2F8E8` Pale Botanical | `#143524` Bioluminescent Panel |\n| `--text-primary` | `#1B4332` Deep Forest Green | `#FFF8E7` Warm White |\n| `--text-secondary` | `#6B4226` Earth Brown | `#A9C6AE` Pale Moss |\n| `--text-success` | `#2D6A4F` | `#52B788` |\n| `--text-error` | `#C1440E` Terracotta | `#FF9E6B` Brightened Terracotta |\n| `--border-default` | `#52B788` Moss | `#3E7A5A` |\n| `--border-success` \u002F `--border-error` | `#52B788` \u002F `#C1440E` | `#52B788` \u002F `#FF9E6B` |\n| `--gradient-sky` | `linear-gradient(180deg, #87CEEB, #FFF8E7)` | `linear-gradient(180deg, #0F2B3D, #0C2016)` |\n| `--glass-bg` | `rgba(255,248,231,0.6)` | `rgba(20,53,36,0.55)` |\n\n* **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in **both** themes. Solar Gold, Sky Blue, and Moss backgrounds must **always** carry dark text (`--text-primary`); never place white text on gold.\n* **Never use `#ffffff`.** The theme's white is Warm White `#FFF8E7`; if a stark surface is truly needed, use `#fefefe`.\n* Verify all text\u002Fbackground pairs reach ≥ 4.5:1 in both modes.\n\n**0.3 Typography & Icons**\n* Font: **Nunito** (Google Fonts, weights 400\u002F600\u002F700\u002F800\u002F900), bound to `--font-base: 'Nunito', sans-serif`. Used for all headings and body text.\n* Icons: **Google Material Symbols** (Rounded variant). Suggested: `eco`, `solar_power`, `recycling`, `volunteer_activism`, `energy_savings_leaf`, `water_drop`, `check_circle`, `expand_more`, `close`, `format_quote`, `light_mode`, `dark_mode`.\n\n**0.4 Signature Visual Effects** — all implemented in pure CSS:\n* **Gradient skies:** hero and Final CTA use `var(--gradient-sky)` with `background-blend-mode: overlay` over a subtle botanical pattern layer.\n* **Organic vine borders:** `border: 2px solid var(--border-default); border-radius: var(--radius-lg)` with vine\u002Fleaf flourishes built from `::before`\u002F`::after` pseudo-elements (curved gradients, leaf shapes via `border-radius`).\n* **Solar flare animation:** `@keyframes solar-pulse` (4s ease-in-out infinite) — a soft ambient glow breathing on the hero sun disc and gold accents via animated `box-shadow`\u002F`opacity`.\n* **Leaf particle effects:** 8–10 static `span.leaf` elements (`aria-hidden=\"true\"`, CSS leaf shapes or Material Symbol `eco`\u002F`spa`) drifting across the hero via `@keyframes leaf-drift` with varied durations\u002Fdelays. No JS required.\n* **Curved glass panels:** `backdrop-filter: blur(8px)`, `background: var(--glass-bg)`, `border-radius: 20px+`.\n* **Soft ambient glow:** `--shadow-md: 0 8px 24px rgba(45,106,79,0.15)`; `--shadow-sm: 0 4px 12px rgba(45,106,79,0.10)`.\n* **Living architecture patterns:** subtle `repeating-radial-gradient` textures on alternating section backgrounds.\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:** all design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML stays clean, semantic (HTML5 landmarks), and styling-agnostic — changing the look must only require editing `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\n* All tokens from Section 0.2 live in `:root`; dark mode overrides live in both `@media (prefers-color-scheme: dark)` and a `.dark` class selector.\n* Also define: `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 20px`, `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`, `--font-base`.\n\n**1.3 Mandatory Dark Mode Support**\n* **Implementation:** full \"Night Garden\" token set (Section 0.2) under `@media (prefers-color-scheme: dark)` and `.dark`; switching variables must restyle the page with zero HTML restructuring.\n* **Persistence:** store the user's choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Provide a visible toggle (header) with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), swapping Material Symbols `light_mode`\u002F`dark_mode`.\n* **Exception (source-spec override):** the source style spec marks Dark Mode as \"No\" — this is explicitly overridden: Dark Mode is mandatory and must ship as the \"Night Garden\" theme.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox (`display: flex`).\n* **Default Alignment Rule:** every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n* **Mobile-Friendly First:** all flex rows convert to columns on small viewports (breakpoints ~640px\u002F768px\u002F1024px); no horizontal scrolling at any width.\n\n**1.5 CSS Architecture**\n* **No CSS framework.** Use clean, hand-written custom CSS (the permitted alternative to Tailwind) — the organic effects demand bespoke keyframes and pseudo-elements. Organize `style.css` with native `@layer reset, base, components, utilities` and commented section dividers.\n* All themed components are generic reusable classes bound to CSS variables: `.btn`, `.card`, `.input-group`, etc.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Include the Google Fonts `\u003Clink>` for Nunito and the Material Symbols stylesheet; bind Nunito to `--font-base`.\n* **Inline SVGs and local icon files are forbidden.**\n* **Exception (decorative illustration):** although the visual direction calls for \"botanical illustrations,\" the no-SVG rule stands — all botanical decoration (leaves, vines, sun, patterns) must be crafted in CSS (pseudo-elements, gradients, `border-radius`, `box-shadow`) or rendered with Material Symbols.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component** — `.btn` base + BEM modifiers; all states styled via CSS classes:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px.\n* **Variants:** `.btn--primary` (Verdant Green bg, Warm White text), `.btn--secondary` (Solar Gold bg, dark text), `.btn--ghost` (transparent, 2px Moss border), `.btn--danger` (Terracotta bg, white text).\n* **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n* **Focus:** distinct focus ring via `outline`\u002F`box-shadow` using CSS variables — visible in both themes.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** disables interactions, prevents double-clicks, renders a CSS spinner or animated Material Symbol 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`.\n\n**2.2 Card Component** — applies to feature, testimonial, and pricing cards:\n* **Default:** flexible flex layout, `--bg-secondary` surface, 2px `--border-default`, `--radius-lg`, `--shadow-sm`.\n* **Hover:** elevation shift to `--shadow-md` and\u002For `transform: translateY(-2px)`.\n* **Focus-within:** card border highlights to Solar Gold when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** shimmer `@keyframes` defined in CSS, preserving layout dimensions.\n* **Empty State:** structured fallback with a Material Symbol and clear guidance text.\n\n**2.3 Form & Input Requirements** — used in the Join modal (name + email):\n* **States:** Empty, Focused (outline ring), Filled, Valid (success border + `check_circle` icon), Invalid (error border, error text, error icon), Disabled, Read-only.\n* **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the input, and a dedicated error feedback container.\n\n**2.4 Modal \u002F Popup Requirements** — the \"Join the Community\" modal:\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n* **UX Features:** centered flex overlay (`align-items: center; justify-content: center`), blurred backdrop, Material Symbol `close` button, keyboard focus trapping, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"` + `aria-labelledby`, focus returned to the trigger on close, stacked at `--z-modal`.\n\n**2.5 Accordion (FAQ)**\n* Use native `\u003Cdetails>`\u002F`\u003Csummary>` styled with BEM classes, or a button pattern with `aria-expanded`\u002F`aria-controls`.\n* Chevron (`expand_more`) rotates via CSS; open\u002Fclose animated in CSS; fully keyboard operable.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** fluid sizing (`clamp()` for headings), responsive breakpoints, zero horizontal overflow.\n* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; under `prefers-reduced-motion: reduce`, disable `solar-pulse`, leaf drift, shimmer, smooth scrolling, and accordion height animations.\n* **Accessibility (a11y):** ≥ 4.5:1 contrast in both Light and Dark modes; never rely on color alone (errors = border + icon + text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `article`, `footer`); correct ARIA roles\u002Flabels on the theme toggle, mobile nav, accordion, and modal; logical DOM\u002Ffocus order; full keyboard operability; `aria-live=\"polite\"` region announcing form errors, loading, and success feedback.\n* **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** `.btn--danger` (Terracotta) must be visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single `\u003Cscript src=\"script.js\" defer>` reference; no inline styles.\n* **Naming Convention:** BEM exclusively (`block__element--modifier`) for every custom class — never mix conventions.\n* **No Unrequested Placeholders:** write original, on-theme English copy for all content — brand name (invent one, e.g., \"Evergrow\"), hero headline\u002Fsubhead, 3 features, 3 steps, 3 testimonials (fictional names + roles), 3 pricing tiers (realistic prices and feature lists), 5–6 FAQ Q&As, CTA text, and footer labels. **Lorem ipsum is forbidden.**\n\n---\n\n## 5. PAGE STRUCTURE — SECTION-BY-SECTION SPECIFICATIONS\n\n**5.1 Sticky Header:** brand (Material Symbol `eco` in a Moss circle + wordmark), anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle (per Rule 1.3), compact `.btn--primary` CTA. On scroll, the header becomes a curved glass panel. Mobile: nav collapses behind a hamburger (`aria-expanded`, `aria-controls`) at `--z-dropdown`. Anchor links use smooth scrolling (disabled under reduced motion).\n\n**5.2 Hero:** near-full-viewport flex-centered section over `var(--gradient-sky)` with `background-blend-mode: overlay`; a CSS sun disc (radial Solar Gold gradient) pulsing with `solar-pulse`; leaf particles per Rule 0.4; content inside a curved glass panel: eyebrow label, `\u003Ch1>`, subhead, and a CTA row — `.btn--primary` \"Join the Community\" (opens the modal) + `.btn--ghost` \"Explore How It Works\" (anchor link).\n\n**5.3 Features (3 cards):** section heading (eyebrow + `\u003Ch2>` + lede), then a 3-column grid (stacked on mobile) of `.card--feature`: icon badge (Moss circle with `solar_power` \u002F `recycling` \u002F `volunteer_activism`), `\u003Ch3>`, paragraph. Full card states per Rule 2.2.\n\n**5.4 How It Works (3 steps):** three `.step` items connected on desktop by a CSS \"vine\" connector (gradient line with leaf nodes); stacked with a vertical vine on mobile. Each step: gold number badge (01\u002F02\u002F03), Material Symbol icon, `\u003Ch3>`, description.\n\n**5.5 Testimonials:** three `.card--testimonial` blocks: `format_quote` icon, quote text, and a footer row with a CSS avatar circle (initials on Moss\u002FGold\u002FLavender backgrounds), fictional name, and role.\n\n**5.6 Pricing (3 tiers):** tiers named \"Seedling\" (free), \"Grove\", \"Canopy\" (invent realistic prices). Featured middle tier: Solar Gold \"Most Popular\" pill badge, `--shadow-md`, slight desktop elevation. Each card: tier name, price, feature list with `check_circle` icons, and a CTA — featured tier uses `.btn--primary`, others `.btn--ghost`; every pricing CTA shows its loading state, then opens the Join modal.\n\n**5.7 FAQ:** 5–6 `\u003Cdetails>` items per Rule 2.5, wrapped in a curved glass or vine-bordered panel.\n\n**5.8 Final CTA:** full-width panel over `var(--gradient-sky)` with a curved glass card: `\u003Ch2>`, supporting copy, and `.btn--primary` \"Join the Community\" opening the modal.\n\n**5.9 Footer:** deep-green band (`--primary` background, Warm White text in light mode; `--bg-secondary` in dark). Flex-wrap layout: brand block (logo + tagline), three secondary link groups (Community: About, Events, Volunteer \u002F Resources: Guides, Blog, FAQ \u002F Company: Contact, Privacy, Terms), social icon row (Material Symbols with `aria-label`), and a bottom bar with copyright (dynamic year via JS) — links may use section anchors or `href=\"#\"` stubs.\n\n**5.10 \"Join the Community\" Modal:** per Rules 2.3–2.4 — name + email fields with full state coverage, inline validation (email format), simulated submit (loading spinner ~1.2s → success state with `check_circle` and a welcome message, or error state with field-level messages), all feedback announced via `aria-live`.\n",1791954980602]