[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-019-Corporate-Radial-Process":3},"Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Do not ask clarifying questions — where this specification is silent, make expert decisions consistent with the rules below.\n\n**PROJECT BRIEF**\n- **Theme:** Corporate Radial Process — professional, structured, organizational; Modern Corporate era; flat, vector-clean, matte finish.\n- **Visual direction:** corporate landing page, radial process visualization, clean near-white background, teal accent, structured layout, flat design.\n- **Product context:** a fictional B2B SaaS for business process orchestration\u002Fautomation. Invent a coherent brand name and write realistic, specific English marketing copy — lorem ipsum is prohibited.\n- **Sections (in order):** Sticky Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials (3 cards), Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n- **Output category:** Corporate & SaaS.\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in `index.html`.\n- Target every design property, layout rule, and state via class or ID selectors only.\n- HTML must remain semantic and style-agnostic: re-theming the site requires editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root`:\n- **Colors:** `--primary: #008B8B`, `--secondary: #20B2AA`, `--bg-primary`, `--bg-secondary` (near-white, subtly teal-tinted surface), `--text-primary: #333333`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- **Process segment tokens:** `--segment-1: #008B8B`, `--segment-2: #20B2AA`, `--segment-3: #48D1CC`.\n- **Radius\u002FShadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md` (keep shadows minimal — matte, flat finish).\n- **Spacing\u002FMotion:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n- **Typography:** `--font-base` bound to `'Open Sans'`.\n- **Contrast pairing:** every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in every theme, not just the default.\n- **Exception clause (background):** the source palette requests `#FFFFFF`; per mandatory token rules, use `#FEFEFE` for `--bg-primary` — pure `#FFFFFF` is prohibited.\n\n**1.3 Mandatory Dark Mode**\n- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class: deep teal-charcoal surfaces (e.g., `#0C1B1A`\u002F`#122524` range), light text (`#EAF5F4` range), and brightened teal accents (e.g., `#4FD1C5` range) so the 1→2→3 segment progression remains recognizable and contrast-compliant.\n- Background and text variables must switch with zero HTML restructuring.\n- Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit; render a visible toggle in the header with correct `aria-pressed` and `aria-label` state.\n- **Exception clause (dark mode):** the source spec flags dark mode as unsupported (\"✓ Full \u002F ✗ No\"); dark mode is mandatory under these architecture rules and must be fully implemented regardless.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- Mobile-first: rows collapse to columns on small viewports; no horizontal scrolling at any width from 320px up.\n- Circular\u002Fradial elements use `border-radius: 50%` with `display: flex; align-items: center; justify-content: center`, per the source CSS technical.\n\n**1.5 Framework & Naming Convention**\n- Use clean custom CSS in `style.css` (optionally organized via Tailwind's `@layer`\u002F`@apply` if introduced). All reusable classes (`.btn`, `.card`, `.input-group`, `.process-arc`) must map back to the CSS variables above.\n- One naming convention only: BEM (`.block__element--modifier`). Never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load `'Open Sans'` (weights 400, 600, 700) via a Google Fonts `\u003Clink>` and bind it to `--font-base`.\n- All icons and glyphs are Google Material Symbols — including the white glyphs inside the process arc segments. Raw inline SVGs and local icon files are forbidden.\n- **Exception clause (vector aesthetic):** the spec's \"flat vector\" look must be achieved with CSS-drawn shapes (conic-gradient arcs, circles, borders) and Material Symbols; inline SVG remains prohibited.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Primary = solid `--primary` with light text; secondary = teal outline.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`. **Focus:** distinct ring via `outline`\u002F`box-shadow` using CSS variables. **Active:** `transform: scale(0.97)`.\n- **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Icon without distorting button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success`\u002F`--text-error`, announced via `aria-live`.\n- `.btn-danger` must be visually distinct in both light and dark themes.\n\n**2.2 Cards (`.card` — Features, Testimonials, Pricing)**\n- **Default:** flexible Flexbox layout, `--bg-secondary` surface, 1px `--border-default`, `--radius-md`, `--shadow-sm` — flat and matte, no gloss or heavy gradients.\n- **Hover:** `translateY(-2px)` and\u002For shadow step-up. **Focus-within:** border highlight when a child control receives focus.\n- **Loading (skeleton):** shimmer animation defined in CSS, sized to prevent layout jumps. **Empty state:** Material Icon plus clear guidance text.\n- **Pricing variant:** `.card--featured` (middle tier) with `--primary` border, a \"Most popular\" badge, and elevated shadow — must stand out in both themes.\n\n**2.3 Forms & Inputs (`.input-group`)**\n- The Final CTA includes an email capture: a flex container wrapping a `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error feedback element.\n- Style all states: empty, focused (outline ring), filled, valid (success border + Material check icon), invalid (error border, error text, error icon), disabled, read-only.\n- Errors are announced in an `aria-live` region; never rely on color alone — pair color with icon and text.\n\n**2.4 Modal \u002F Popup**\n- Include at least one modal (\"Book a demo\"), with states for opening, open, loading, success\u002Ferror, and closing — all animated via CSS transitions.\n- Centered flex container (`align-items: center`), backdrop overlay, Material Icon close button, keyboard focus trapping, and closing via `Esc` or overlay click.\n\n**2.5 Section-by-Section Requirements**\n- **Header (sticky):** logo (Material Symbol + wordmark), anchor navigation to all sections, theme toggle (per 1.3), compact \"Get started\" `.btn--primary`.\n- **Hero:** eyebrow badge, H1 with one teal-accented word, supporting subcopy, dual CTAs (primary + secondary), and a CSS-built radial motif (a partial ring echoing the three segment colors) as the visual anchor — decorative, `aria-hidden`.\n- **Features:** 3 cards, each with a circular teal-tinted Material Symbol token (`border-radius: 50%`), title, and description.\n- **How It Works (signature component):** a semi-circular segmented process arc built in pure CSS (e.g., `conic-gradient` with hard color stops masked into a ring, or three rotated arc segments), with Segment 1 `#008B8B`, Segment 2 `#20B2AA`, Segment 3 `#48D1CC`, each containing a simple white Material Symbol glyph, and step numbers 01\u002F02\u002F03 positioned along the arc. The arc is decorative (`aria-hidden`); the same three steps must also render as an accessible, keyboard-readable ordered list with title and description per step. On mobile, the arc scales fluidly or converts to a vertical timeline using the three segment colors as node accents — no overflow, no horizontal scroll.\n- **Testimonials:** 3 cards with a Material \"format_quote\" icon, quote, name, role\u002Fcompany, and a circular avatar token (Material \"person\" icon inside a `border-radius: 50%` circle tinted with the teal scale — no external images required).\n- **Pricing:** 3 tiers, each with price, feature list (Material \"check\" icons), and a CTA; the middle tier uses `.card--featured`.\n- **FAQ:** accessible accordion — each question is a `\u003Cbutton>` with `aria-expanded` and `aria-controls`, panels animated via CSS, fully keyboard operable.\n- **Final CTA:** full-width band on `--primary` with light text (contrast pairing enforced), headline, and the email capture form from 2.3 with visible success\u002Ferror feedback.\n- **Footer:** secondary link columns (Product, Company, Resources, Legal), social icons as Material Symbols, copyright line; links use `--text-secondary` with visible hover\u002Ffocus states.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type and spacing, standard breakpoints, zero horizontal overflow from 320px up.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion`.\n- **Accessibility (a11y):** AA contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles\u002Flabels on the theme toggle, accordion, modal, and form feedback; logical DOM\u002Ffocus order with a skip-to-content link; full keyboard operability; `aria-live` regions for all dynamic feedback (form errors, loading, success).\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Flat matte finish throughout:** minimal shadows, clean vector-like edges, no glossy surfaces.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, and `script.js` — complete and runnable. No inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>`); no inline styles; no inline event handlers.\n- **script.js scope:** theme toggle with `localStorage` persistence, accordion behavior, modal open\u002Fclose with focus trap, form validation states with `aria-live` feedback, button loading states, and reduced-motion-aware smooth anchor scrolling.\n- **Copy:** all user-facing copy in English, realistic and specific to the fictional process-automation SaaS — no lorem ipsum.\n- **Naming:** consistent BEM across all files; all CSS variable names, class names, and file names in English\u002FASCII.\n- Generate the final code immediately, on the first attempt, with no placeholders for any content specified above.\n",1791954980035]