[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-114-Thermal-Insight-Tech":3},"## ROLE & OBJECTIVE\n\nAct as a **Senior Frontend Engineer and Expert UI Designer**. Your task is to code a complete, production-ready landing page for **\"Thermal Insight Tech\"** — an industrial thermal-imaging and infrared analytics platform — **on the first attempt**: fully styled, fully interactive, no placeholders, no TODOs, no follow-up questions. Aesthetic: **Future Industrial** — analytical, authoritative, dark thermal-console HUD with infrared spectrum gradients. Output category: Dark Tech & Cyber. All user-facing copy must be written in **English**.\n\n---\n\n## 0. PROJECT SPECIFICATION — \"THERMAL INSIGHT TECH\"\n\n### 0.1 Theme Identity\n- Mental model: an infrared camera HUD \u002F thermal analysis console. Every section should read like a calibrated instrument: monospaced telemetry labels, crosshair reticles, spectrum temperature bars, emissive glows, wireframe overlays.\n\n### 0.2 Color Palette & Token Mapping (bind these exact values in `:root`)\n\n**Core tokens:**\n- `--primary: #FFC800` — thermal amber. CTAs, highlights, focus rings, HUD labels.\n- `--secondary: #0000FF` — cool blue. **Decorative only** (gradient stops, spectrum bars, glows). Never use as text color on the dark background — it fails contrast.\n- `--bg-primary: #050B26` — deep space navy. The only page background.\n- `--bg-secondary: #0A1238` — elevated card\u002Fpanel surface (derived lighter navy; must keep light-text pairing).\n- `--text-primary: #FFFFFF` · `--text-secondary: #A9B4D8` (muted copy, ≥4.5:1 on both bg tokens).\n- `--text-success: #00FF00` (mid green — ~14:1 on dark, safe for text\u002Ficons) · `--text-error: #FF5C5C` (accessible hot-red variant for text\u002Ficons; raw `#FF0000` stays decorative).\n- `--border-default: rgba(255,255,255,0.14)` · `--border-error: #FF5C5C` · `--border-success: #00FF00`.\n\n**Spectrum tokens (decorative):**\n- `--spectrum-cool: #0000FF`, `--spectrum-mid: #00FF00`, `--spectrum-hot: #FF0000`.\n- `--spectrum-gradient: linear-gradient(90deg, #0000FF, #00FF00, #FF0000)` — for divider bars, card top-borders, temperature scales, gradient borders.\n- `--spectrum-gradient-text: linear-gradient(90deg, #4D7CFF, #00FF66, #FF4D4D)` — **Accessibility exception:** the spec's raw `#0000FF → #00FF00 → #FF0000` gradient is kept verbatim for decorative bars\u002Fborders, but when clipped to text the cool\u002Fhot stops are brightened to preserve the mandatory ≥3:1 large-text contrast rule.\n\n**Glow, depth, motion, stacking, type (all mandatory in `:root`):**\n- `--glow-primary: 0 0 24px rgba(255,200,0,0.25)` · `--glow-spectrum: 0 0 24px rgba(0,255,127,0.20)`\n- `--radius-sm: 4px` · `--radius-md: 8px` · `--radius-lg: 16px`\n- `--shadow-sm: 0 2px 8px rgba(0,0,0,0.40)` · `--shadow-md: 0 8px 32px rgba(0,0,0,0.50)`\n- `--spacing-gap: 1.5rem` · `--transition-fast: 150ms` · `--transition-normal: 300ms` · `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`\n- `--z-dropdown: 100` · `--z-modal: 200` · `--z-toast: 300`\n- `--font-base: 'Share Tech Mono', 'Courier New', monospace`\n\n### 0.3 Signature Visual Effects (pure CSS — no images, no inline SVG)\n- **Thermal spectrum gradient text:** required for the hero H1 — implement once as a reusable `.text-spectrum` class: `background-image: var(--spectrum-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;`.\n- **HUD overlays:** corner brackets on cards\u002Fpanels via `::before`\u002F`::after` (no extra HTML); a faint fixed grid backdrop on the body via `repeating-linear-gradient` at ~3% white opacity; small uppercase telemetry labels (e.g., `MODULE 01 \u002F\u002F CAPABILITIES`, `ΔT +42.6°C`, `SCAN 00:12:47`) — always `aria-hidden=\"true\"` when decorative.\n- **Wireframe crosshairs:** reticle crosshairs and `+` markers on the hero visual via pseudo-elements.\n- **Emissive glow:** `box-shadow`\u002F`text-shadow` using `--glow-primary` \u002F `--glow-spectrum` on hover, focus, badges, and the featured pricing tier.\n- **Thermal readout panel (hero visual):** a simulated thermal scan built from layered `radial-gradient`s (hot red core → green mid → cool blue field) inside a `.hud-panel` with scan grid, crosshair, readout rows, and a horizontal temperature scale bar using `--spectrum-gradient` with tick labels (20°C → 120°C).\n- **Polish:** `::selection { background: var(--primary); color: #050B26; }`.\n\n### 0.4 Required Sections (build in this order; author realistic English marketing copy for each — lorem ipsum is forbidden)\n\n0. **Header (sticky nav):** translucent `--bg-primary` + `backdrop-filter: blur`, bottom border. Text logo (`THERMAL\u002F\u002FINSIGHT`, `.text-spectrum` on part of the wordmark). Anchor links: Features, Process, Pricing, FAQ. Primary CTA button. Mobile: Material Symbol `menu` button toggling a dropdown panel (`--z-dropdown`) with `aria-expanded`\u002F`aria-controls`, closing on `Esc` and link click. Include a \"Skip to main content\" skip link.\n1. **Hero:** full-viewport flex column. Eyebrow telemetry tag (`INFRARED INTELLIGENCE PLATFORM \u002F\u002F v4.2`). H1 in `.text-spectrum` (e.g., \"SEE THE HEAT. KNOW THE TRUTH.\"). Subheadline in `--text-secondary`. CTA row: `.btn--primary` \"Start Free Analysis\" + `.btn--ghost` \"View Live Demo\" (opens the demo modal, §2.4). The thermal readout `.hud-panel` (§0.3). Stats strip: 3–4 mono stats (`2.4M SCANS`, `99.7% ACCURACY`, `38 COUNTRIES`).\n2. **Features (3 cards):** section header pattern — eyebrow (`MODULE 01 \u002F\u002F CAPABILITIES`), H2, one-line subcopy. Three `.card`s — Real-Time Thermal Capture (`sensors`), AI Anomaly Detection (`psychology`), Predictive Maintenance Alerts (`notification_important`) — each with a 3px `--spectrum-gradient` top border, HUD corner brackets, icon, title, copy. Flex row on desktop, single column on mobile.\n3. **How It Works (3 steps):** eyebrow `MODULE 02 \u002F\u002F PROCESS`. Steps `01 CAPTURE`, `02 ANALYZE`, `03 ACT` — large mono numerals, icon, title, copy, connected by a horizontal `--spectrum-gradient` line on desktop (hidden or vertical on mobile).\n4. **Testimonials:** eyebrow `MODULE 03 \u002F\u002F FIELD REPORTS`. Three quote cards styled as analysis logs: header row with a CSS monogram avatar (initials in a circle — no external images), name, role\u002Fcompany; `format_quote` icon; quote; a `VERIFIED` badge (`check_circle` icon + text — never color alone).\n5. **Pricing (3 tiers):** eyebrow `MODULE 04 \u002F\u002F ACCESS LEVELS`. Tiers: `SCOUT` (free), `ANALYST` (featured), `ENTERPRISE` (custom). Included features use `check_circle` in `--text-success`; excluded use `cancel` in muted `--text-secondary` plus strikethrough. Featured tier: `--primary` border, `--glow-primary`, subtle elevation, text badge `RECOMMENDED`. Per-tier CTAs (`.btn--primary` featured, `.btn--ghost` elsewhere). Optional monthly\u002Fannual toggle — if included, fully functional with `aria-pressed` and an `aria-live` price update.\n6. **FAQ:** eyebrow `MODULE 05 \u002F\u002F KNOWLEDGE BASE`. 5–6 questions as an accessible accordion (§2.5).\n7. **Final CTA:** full-width panel with a `--spectrum-gradient` border (padding-box\u002Fborder-box double-background technique), H2, subcopy, and an email capture `.input-group` (§2.3) with the full state machine: idle → loading (button spinner, ~1.2s simulated) → success (`--text-success` message + icon) or error (invalid email: `--border-error`, icon, message). Microcopy: \"No credit card required. 14-day full-spectrum trial.\"\n8. **Footer:** brand block (logo, tagline), grouped secondary links (Product, Company, Resources, Legal), contact\u002Fsocial links using Material Symbols (`mail`, `rss_feed`, `public`) or text labels — inline SVG brand logos are forbidden. Bottom bar: `© 2025 Thermal Insight Tech. All rights reserved.` plus a decorative `SYS STATUS: OPERATIONAL` readout. All footer links get hover + `:focus-visible` styles.\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. Inline event-handler attributes (`onclick`, etc.) are equally forbidden.\n- **Class\u002FID selectors only:** every design property, layout rule, and state lives in `style.css`, targeted via class or ID selectors.\n- **Minimal HTML modifications:** markup stays semantic and style-agnostic (landmarks: `header`, `nav`, `main`, `section`, `footer`; one `h1`; `h2` per section; `h3` for cards). Re-theming the site must require editing `style.css` only.\n\n### 1.2 CSS Variables & Theme Tokens\n- All tokens in §0.2 must be defined in `:root` and consumed via `var(--...)`. No raw hex values in component rules — only inside `:root` and gradients composed from tokens.\n- **Contrast pairing:** every dark background token pairs with light text tokens; every light-filled element (amber buttons, badges, monogram avatars) carries dark text (`#050B26`). Verify ≥4.5:1 for body text, ≥3:1 for large text and UI components.\n- **Light-mode background rule (`#fefefe`):** void for this theme — see the dark-only exception in §1.3.\n\n### 1.3 Mandatory Dark Mode Support — Dark-Only Exception\n- Dark mode is mandatory and fully satisfied here: the dark thermal palette is the single, unconditional global theme defined in `:root`, with `color-scheme: dark` declared so native controls and scrollbars match.\n- **Exception (per style spec: Light ✗ \u002F Dark ✓ Full):** this theme is dark-only. Do not define light-mode tokens, a theme toggle, or `localStorage` persistence. The page must render identically regardless of the OS `prefers-color-scheme`.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n- **Mobile-first:** single-column stacks by default; row layouts added at `min-width` breakpoints (~768px, ~1024px). No horizontal scrolling at any viewport from 320px up. Fluid type via `clamp()`. Content container: max-width ~1200px, centered.\n- Anchor targets get `scroll-margin-top` so the sticky header never covers section headings.\n\n### 1.5 Framework & Styling Approach\n- Use Tailwind CSS **or** clean custom CSS organized with Tailwind-style `@layer`\u002F`@apply` conventions. Given this theme's bespoke HUD effects, hand-authored component CSS in `style.css` is the expected approach.\n- Utilities must map back to CSS variables; generic reusable classes `.btn`, `.card`, `.input-group` must exist and be reused across all instances.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** load `Share Tech Mono` from Google Fonts via `\u003Clink>` (with `preconnect`) and bind it to `--font-base`. Headings, body copy, and HUD labels all use it (fallback: `'Courier New', monospace`). Any additional typeface must also come from Google Fonts.\n- **Icons:** Google Material Symbols (Outlined) via the official Google Fonts stylesheet. Usage: `\u003Cspan class=\"material-symbols-outlined\" aria-hidden=\"true\">thermostat\u003C\u002Fspan>`. **Inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn` + BEM modifiers)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `--radius-md`; uppercase mono label with letter-spacing.\n- **Variants:** `.btn--primary` (amber `--primary` bg + `#050B26` text), `.btn--ghost` (transparent, `--border-default` border, light text), `.btn--danger` (visually distinct in the dark theme: `--border-error` with red-tinted glow — define it even if unused).\n- **Hover:** brightness\u002Fglow shift (`--glow-primary` on primary) + `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring built from CSS variables (`outline: 2px solid var(--primary); outline-offset: 2px;`) — never removed.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** disables pointer events to prevent double-clicks, renders a CSS spinner or animated Material Symbol, and must not change button dimensions.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (used by the Final CTA form).\n\n### 2.2 Card Component (`.card`)\n- **Default:** flexible flexbox layout, `--bg-secondary` surface, `--border-default` border, `--radius-lg`, `--shadow-sm`, HUD corner brackets via pseudo-elements; `.card--featured` variant for the middle pricing tier.\n- **Hover:** elevation\u002Fglow shift and\u002For `transform: translateY(-2px)`.\n- **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** define a shimmer animation class (`.card--skeleton`) that preserves layout dimensions.\n- **Empty state:** structured fallback pattern — Material Symbol + short guidance text — defined in CSS for any dynamically emptied region.\n\n### 2.3 Form & Input (`.input-group`)\n- **Structure:** flex container (column on mobile, row on desktop) wrapping a `\u003Clabel>` (tied via `for`\u002F`id`), the `\u003Cinput type=\"email\">`, and a dedicated error\u002Fsuccess feedback container with `aria-live=\"polite\"`.\n- **States (all class-driven):** empty; focused (outline ring from `--primary`); filled; valid (`--border-success` + `check_circle` icon); invalid (`--border-error`, `--text-error` message + `error` icon — never color alone); disabled; read-only.\n- **Behavior:** client-side email validation; submit runs the button's loading state, then resolves to success or error with visible feedback in the `aria-live` region. Optionally fire a `.toast` (fixed, `--z-toast`, `aria-live=\"polite\"`) on success.\n\n### 2.4 Modal \u002F Popup (`.modal` — used by the Hero's \"View Live Demo\" button)\n- **States:** opening (fade + scale via `--transition-normal`), open, loading (brief \"CALIBRATING…\" shimmer inside the modal), success (rendered thermal readout), closing (animated).\n- **UX:** centered flex overlay (`align-items: center`) with dimmed backdrop; close button using Material Symbol `close`; keyboard **focus trap** while open; focus returns to the trigger on close; closes via `Esc` and backdrop click. `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`.\n\n### 2.5 FAQ Accordion (`.faq__item`)\n- Each question is a `\u003Cbutton>` trigger with `aria-expanded` + `aria-controls`; answer region with `role=\"region\"` + `aria-labelledby`.\n- Chevron Material Symbol rotates via CSS on open; height animates smoothly (grid-rows or max-height technique) with `--transition-normal`.\n- Fully keyboard operable (Enter\u002FSpace), visible focus ring, one-item-open-at-a-time behavior.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow, all layouts stack gracefully from 320px up.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)` and `var(--ease-standard)`; smooth anchor scrolling via `scroll-behavior: smooth`. All motion (scanlines, shimmer, reveals, spinners, transforms, smooth scroll) is disabled under `@media (prefers-reduced-motion: reduce)`.\n- **Accessibility (a11y):** AA contrast throughout the dark theme; never rely on color alone (pair color with icons\u002Ftext); semantic HTML5; correct ARIA roles\u002Flabels on all custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form feedback and loading states; decorative HUD elements `aria-hidden=\"true\"`; sections labeled via `aria-labelledby`.\n- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n- **Destructive actions:** `.btn--danger` must be visually distinct in the dark theme (define it even if the page contains no destructive action).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, and `script.js`. The HTML contains exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference; no inline `\u003Cscript>` or `\u003Cstyle>` blocks, no inline handlers.\n- **Naming convention:** one convention everywhere — **BEM** (`block__element--modifier`) for components, with `.is-*` classes for JS-toggled states (`.is-open`, `.is-loading`, `.is-error`). Never mix conventions.\n- **JS scope (`script.js`):** mobile menu toggle, FAQ accordion, modal lifecycle (open\u002Fclose\u002Ffocus trap\u002F`Esc`), form validation + simulated submit states, and optional IntersectionObserver scroll reveals — all via `addEventListener`, with proper ARIA updates and reduced-motion respect.\n- **No unrequested placeholders:** author realistic on-theme English copy for every section (headings, features, steps, testimonials, pricing, FAQ, footer). Placeholders are permitted only where content is genuinely unknowable.\n- **Meta:** `lang=\"en\"`, viewport meta, descriptive `\u003Ctitle>` and `\u003Cmeta name=\"description\">` for \"Thermal Insight Tech\".\n\n**Execute now:** produce the complete final code for all three files in a single response — fully styled, fully interactive, first-attempt quality.\n",1791954981717]