The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Cybersecurity SaaS Landing Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build an original single-page landing site for [BRAND], a [PRODUCT_CATEGORY] for [AUDIENCE]. The hero combines a clear sales pitch with a rich animated SVG world map labeled [EVENT_LABEL], a simulated event feed, and explicit sample-data notices. Continue through product modules, an incident workflow, illustrative customer outcomes, generic trust controls, a demo request form, FAQs, and a focused closing call to action.

- Audience: The site speaks to [AUDIENCE] who need to understand the product quickly and evaluate whether a guided walkthrough is worth their time. The template owner is a technical SaaS team that needs a polished, credible marketing page with a substantial product visualization rather than abstract decoration.
- Goal: Get visitors to understand the product's detection-to-response story, explore all four modules, recognize the sample nature of every metric and event, and complete a valid demo request preview. Every visible control must work locally, and no form data may leave or persist beyond the current page state.
- Tone: Calm, exact, operational, and assured. Use concrete product language and useful detail instead of fear, cinematic hacker clichés, vague superlatives, or unsupported security claims. Treat animated activity as illustrative interface content, never as evidence of real protection or live telemetry.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: React 18 (MIT), Vite 5 (MIT), TypeScript (Apache-2.0), Tailwind CSS 3.4 (MIT), motion (MIT), lucide-react (ISC), @fontsource-variable/space-grotesk (OFL-1.1), @fontsource-variable/inter (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Use Vite 5 with React 18 and TypeScript. Set base: './' in vite.config.ts, set build.sourcemap to false, and emit only static production files to dist/.
  - Configure Tailwind CSS 3.4 with the exact colors, font families, spacing, radii, and shadows below. Put map keyframes, focus styles, selection color, and reduced-motion overrides in src/index.css.
  - Keep all editable brand copy, headlines, module copy and data, map events, metrics, trust labels, FAQs, and form options in src/content.ts with TypeScript interfaces. Components must not embed copy that only fits the default topic.
  - When variable values change, rewrite every topic-specific headline, product module, event label, sample event, metric, workflow step, trust explanation, FAQ answer, and form option to fit [PRODUCT_CATEGORY], [AUDIENCE], and [EVENT_LABEL], while preserving the layout and interactions.
  - Use Motion for React for section entrances, product-tab transitions, accordion answers, and the request-preview state. Use original inline SVG and CSS keyframes for the map; do not add a mapping, charting, or animation dependency.
  - Create a deterministic ThreatMap component with fixed nodes, routes, and six predefined events. Use one cleaned-up interval to rotate the highlighted event every 2800ms; Pause feed must stop both the interval and decorative animation. Do not use random data or external telemetry.
  - Keep product tab state, mobile menu state, open FAQ state, feed pause state, and form state in React memory only. Do not use localStorage, sessionStorage, cookies, analytics, URL tracking parameters, or any network request.
  - Import Space Grotesk Variable, Inter Variable, and IBM Plex Mono locally from Fontsource. Create ASSETS.md listing the three font packages, lucide-react, their sources and licenses, and stating that all map and product artwork is original code-drawn SVG/CSS with no raster images.
  - Use semantic landmarks, labeled controls, visible focus, 44px minimum touch targets, keyboard-operable tabs and accordions, and reduced-motion behavior. Verify the complete page at 1440×900 and 390×844 with zero console errors and no horizontal overflow.

## Variables
- [BRAND] — Product brand (default: "Sablegrid"). An invented product name used in the original bracket mark, header, copy, form preview, and footer.
- [PRODUCT_CATEGORY] — Product category (default: "threat detection and response platform"). A concise lowercase category phrase; all product and workflow copy must follow it.
- [AUDIENCE] — Primary audience (default: "lean security teams"). A concise lowercase audience description used in the hero and sales copy.
- [EVENT_LABEL] — Map event label (default: "Threat activity"). A short title-case label for the map and its simulated events, such as Data risk activity.
- [PRIMARY_CTA] — Primary call to action (default: "Request a demo"). A short button label that scrolls visitors to the local demo request form.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/cybersecurity-saas-landing-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Deep Field `#071114` — Page background, header, and footer
- Panel Ink `#0D1C20` — Map, product viewer, form, and raised section surfaces
- Raised Line `#173036` — Selected rows, input backgrounds, and quiet tonal blocks
- Grid Line `#28434A` — Borders, coordinate rules, dividers, and inactive tracks
- Mist `#E8F1EE` — Primary headings, body text on dark surfaces, and important values
- Slate Text `#93AAA9` — Secondary copy, metadata, labels, and inactive controls
- Signal Mint `#78E0CF` — Primary buttons, active tabs, resolved events, focus rings, and key data
- Alert Coral `#FF927A` — Only investigating events, one alert node, validation errors, and sparse emphasis
- Button Ink `#09201F` — Text and icons on Signal Mint buttons

### Typography
- Display headlines, section titles, and large sample metrics: Space Grotesk Variable, self-hosted with @fontsource-variable/space-grotesk (OFL), weights 500/600/700
- Body copy, navigation, buttons, tabs, and form controls: Inter Variable, self-hosted with @fontsource-variable/inter (OFL), weights 400/500/600/700
- Eyebrows, map coordinates, event metadata, badges, and small system labels: IBM Plex Mono, self-hosted with @fontsource/ibm-plex-mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use an 8px base grid. Content max-width is 1280px with 40px desktop and 20px mobile gutters. Major sections use 112px desktop and 76px mobile vertical padding. The header is 72px high. Hero copy and visual columns have a 56px gap; panel padding is 24–32px desktop and 18–22px mobile. Keep body measures between 48 and 66 characters.
- Radius: Use 4px for tags and small badges, 8px for inputs and buttons, and 12px for major panels. Avoid pill-shaped containers except tiny status dots. Use 1px Grid Line borders and a restrained 0 20px 60px rgb(0 0 0 / 0.24) shadow only on the hero map and demo form.
- Motion: Reveal major sections once with Motion whileInView: opacity 0 to 1 and translateY(22px) to 0 over 480ms with a 60ms stagger between direct children; content must remain visible without JavaScript intersection support.
- Motion: On the hero map, animate route dash offset over 4.5 seconds and node rings from scale 0.75 to 1.35 with fading opacity over 2.4 seconds. Only one route and one node receive Alert Coral emphasis at a time.
- Motion: Advance the simulated highlighted event every 2800ms without adding or removing rows. Pause feed freezes dash, pulse, and interval motion and changes its label to Resume feed; restarting continues from the current event.
- Motion: Product views swap with AnimatePresence using 180ms opacity and translateX(10px) transitions inside a stable min-height viewer. Active tab indicator color changes over 160ms; content height must not jump dramatically.
- Motion: Buttons translate upward 1px on hover and return on press over 140ms. Accordion answers use 180ms opacity and height transitions, and the mobile menu uses a 160ms fade and 8px downward entrance.
- Motion: The request preview replaces the form with a 220ms opacity and 12px rise transition, then moves focus to its heading. Copy request changes its button label to Request copied for 1600ms.
- Motion: Under prefers-reduced-motion, remove section reveals, route movement, node pulses, automatic event rotation, smooth scrolling, and transform transitions. Show the complete static feed and final component states immediately.
- Imagery: Use no photographs, generated bitmaps, external maps, stock illustrations, or image placeholders. The hero anchor is a large original SVG operational map: simplified hand-authored continent silhouettes, a subtle dot matrix, longitude and latitude guides, six fixed location nodes, curved routes, crosshair details, and a compact event rail. Draw four distinct product-module interfaces in HTML/CSS/SVG. Use only abstract bracket, node, route, waveform, and ledger motifs; no shields, hooded figures, skulls, padlock clichés, brand logos, or certification seals.

## Pages & Sections
### Cybersecurity SaaS landing and demo request (`index.html`)
1. **Header and mobile navigation** — Create an original [BRAND] wordmark from four small square corner brackets around one mint dot. Desktop navigation links are Platform, Workflow, Trust, and FAQ, targeting their matching section IDs. The right button is [PRIMARY_CTA] and scrolls to Demo request. Add a small text status beneath the wordmark reading [PRODUCT_CATEGORY]. On mobile, show the wordmark, a compact [PRIMARY_CTA] button, and a Menu icon button. The opened menu contains all four anchors and closes after selection, on Escape, or on outside click. Do not add Sign in, account, social, or other dead controls.
   Layout: Sticky top header at z-40, 72px high, Deep Field at 94% opacity with backdrop blur and a 1px Grid Line bottom border. Use the 1280px container. Desktop links sit centered with 28px gaps; the wordmark and CTA anchor the ends. Mobile menu is an absolute Panel Ink panel directly below the header with full-width 48px rows. Include a skip link that appears on focus.
   Motion: Header remains stable. Anchors use smooth scrolling only when reduced motion is not requested. Mobile navigation follows the shared 160ms entrance and returns focus to its trigger on close.
2. **Hero pitch and animated threat map** — For the defaults, use eyebrow SECURITY OPERATIONS, WITHOUT THE NOISE, H1 See the signal. Stop the spiral., and body [BRAND] gives [AUDIENCE] one calm workspace to detect, investigate, and contain risk before it becomes downtime. Primary button is [PRIMARY_CTA] with ArrowRight; secondary button is Explore the platform and scrolls to Platform. Add three concise reassurance items: Guided product walkthrough, Your workflows and priorities, and No generic sales deck. Rewrite all three and the hero copy for alternate values. On the right, title the visual [EVENT_LABEL] with badges SIMULATED FEED and 6 SAMPLE NODES. Include a functional Pause feed button. Use six fixed locations—Seattle, São Paulo, London, Lagos, Singapore, and Sydney—with six predefined events: Credential anomaly · London · Investigating; Unusual export · Singapore · Reviewing; Privilege change · São Paulo · Verified; New device cluster · Seattle · Observing; Policy drift · Sydney · Resolved; Repeated sign-in · Lagos · Contained. Show four compact feed rows at once and highlight the active row; events are predefined sample content, not a live queue. Footer legend is Observed, Investigating, Resolved, plus Illustrative events · no live intelligence. For alternate values, replace locations only if useful and rewrite all six event names and statuses for the new topic.
   Layout: Hero min-height is calc(100svh - 72px), using a 42%/58% two-column grid with items centered and 48px vertical padding. Left H1 is Space Grotesk 68px/0.98, 600 weight, max-width 540px; body is 18px/1.65, max-width 510px. Actions have 12px gaps and reassurance items wrap below in mono 11px. Right visual is a Panel Ink 12px-radius panel with a 64px header, a 760×440 SVG viewBox, and a 176px event rail integrated along its bottom; total height is about 610px. The map remains the dominant first-screen element. At mobile, stack copy above the map, use H1 clamp(43px,12vw,54px), keep the primary CTA before the visual, and reduce the visual to about 440px high with a scrollable but non-page-blocking feed region. No text may clip at 390px.
   Motion: Hero copy enters once with a 20px rise; map follows after 100ms. Apply the specified route, node, interval, pause, and reduced-motion behavior. The SVG itself is aria-hidden; all event meaning remains available as text.
3. **Illustrative customer outcomes** — Add a narrow heading row with eyebrow ILLUSTRATIVE CUSTOMER OUTCOMES, heading A calmer queue, measured in practical terms., and a visible SAMPLE DATA badge. Use exactly four default metrics: 38% — fewer duplicate alerts in a simulated four-team comparison; 18 min — to a first triage summary in the sample workflow; 3.1× — more incidents reviewed per analyst in the illustrative scenario; 12 weeks — of searchable context shown in the product example. Add a footnote: Fictional figures for layout demonstration, not customer results or performance guarantees. Rewrite every metric and explanation for alternate values while retaining four mixed units and the sample-data label.
   Layout: Place this band immediately below the hero with top and bottom Grid Line borders. Four equal columns share one row at desktop, separated by vertical rules; each value is Space Grotesk 42px and each explanation is 13px/1.55 Slate Text. Use two columns on tablet and one column with horizontal rules on mobile. The heading row sits above the grid with 24px bottom spacing.
   Motion: Reveal the band once as a group; do not count numbers up or animate them repeatedly.
4. **Four product module tabs** — Section id Platform. Eyebrow: ONE CONNECTED WORKSPACE. Heading: From raw signal to accountable action. Intro: Explore four modules that share the same incident context. Build four functional tabs in this order. 01 Signal Ingest — Normalize events without losing their source context — sample viewer shows three source rows Cloud workload, Identity provider, Endpoint fleet with event counts, parsed status, and a small throughput sparkline. 02 Detection Studio — Tune transparent rules around your own thresholds — sample viewer shows rule Impossible travel with condition cards, threshold 2 signals / 10 min, severity Medium, and an enabled switch that really toggles locally. 03 Investigation Graph — Connect identities, assets, and activity in one view — sample viewer draws a five-node relationship graph with selected node Service account and a side panel containing three contextual facts. 04 Response Ledger — Assign, contain, and document the next move — sample viewer shows owner Mara Venn, action Disable stale token, status Ready for review, and a four-entry audit timeline. Every displayed status is sample data. For alternate values, rename all four modules and replace viewer data with equally specific topic-appropriate content while preserving ingest, configure, investigate, and response roles.
   Layout: Begin with a two-column heading row, then a 34%/66% workspace panel. Left tabs are full-width 104px rows with number, title, one-line description, and ArrowUpRight; the active tab has Raised Line background, a 2px Signal Mint left rule, and Mist text. Right viewer has a 52px toolbar, min-height 470px, and four entirely different code-drawn layouts rather than the same card repeated. On mobile, tabs become a 2×2 compact grid above a min-height 430px viewer; keep labels legible and simplify only decorative graph detail.
   Motion: Use keyboard arrow navigation across tabs and AnimatePresence for the viewer transition. The detection switch and graph node selection update local state with immediate visible feedback. No automatic tab rotation.
5. **Detection to response workflow** — Section id Workflow. Eyebrow: A SHARED OPERATING RHYTHM. Heading: One incident. Three clear moves. Intro: Keep the handoffs visible and the next action owned. Create three steps: 01 Collect — Bring cloud, identity, and endpoint events into one normalized stream. The mini UI shows three sources converging into one parsed event. 02 Correlate — Group related signals around the same identity and asset instead of opening three separate tickets. The mini UI shows three alert chips merging into one incident card. 03 Contain — Assign an owner, choose a response, and preserve a readable audit trail. The mini UI shows an owner, review checkbox, and completed ledger entry. Closing note: The interface examples use fictional events and never connect to real infrastructure. Rewrite source types, correlation logic, and response action for alternate variables.
   Layout: Use three equal cards connected by a horizontal 1px route line at desktop. Each card has a mono step number, 22px title, 15px body, and a 160px original diagram at the bottom. The middle card is offset downward 32px on wide screens to create rhythm without harming reading order. Stack in numerical order on mobile with a vertical connector and no offset.
   Motion: Cards reveal in order with a 70ms stagger. On hover, the diagram route brightens and its small node moves at most 4px; no infinite animation.
6. **Generic trust and compliance controls** — Section id Trust. Left eyebrow: CONTROL, MADE VISIBLE. Heading: Trust is a workflow, not a badge wall. Body: Give buyers a clear view of the controls your product story supports, without borrowing certification marks or implying an audit. Include text link Review common questions that scrolls to FAQ. On the right, create four generic control badges: ACCESS CONTROLS — Role-based access patterns with a original keyhole-free Users icon; ENCRYPTION CONTEXT — Clear at-rest and in-transit language with a Binary icon; AUDIT-READY EXPORTS — Portable incident histories with a FileClock icon; RETENTION OPTIONS — Configurable sample retention windows with a Database icon. Under the grid add the note Illustrative control categories only. No certification, compliance, or audit status is claimed. Below it, add three unbranded integration placeholders labeled Cloud sources, Identity sources, and Case management using simple Lucide icons. Rewrite control language for alternate values and never insert real customer or certification logos.
   Layout: Two-column 40%/60% section with left copy sticky only on tall desktop screens. Right controls form a 2×2 grid of Panel Ink cards, each 176px high with a small line icon, mono title, and 14px explanation. The disclaimer spans the grid in a bordered strip; integration placeholders form three quiet equal rows beneath. Mobile stacks copy and uses one control per row.
   Motion: Control cards reveal as two pairs. Hover changes only border color and icon color over 160ms; badges never shimmer, spin, or resemble official seals.
7. **Demo request form and local preview** — Section id Demo request. Left eyebrow: A WALKTHROUGH WITH CONTEXT. Heading: Bring one real workflow to the demo. Body: Tell us what you want to unpack and use the preview to check your request. For the defaults, list three agenda items: Your current alert sources, One investigation you want to simplify, and The response handoff you want to make clearer. Add a small note: Static template demo: no request is transmitted. Right form fields are Full name, Work email, Company, Team size select with 1–10, 11–50, 51–200, and 201+, and a textarea labeled What should the demo cover? with placeholder For example: triaging identity alerts across two cloud accounts. Submit button is Preview request. Validate trimmed name and company at 2+ characters, a conventional email pattern, nonempty team size, and a 12+ character textarea. Show inline errors and focus the first invalid field. On valid submit, make no request and replace the form with heading Your request preview is ready, a definition-list summary of all five values, and note Nothing was sent or stored. This preview exists only in the current page state. Provide Copy request, which copies a plain-text summary using the Clipboard API with a graceful manual-selection fallback, and Edit details, which restores the filled form. Do not invent a booking time, request ID, delivery promise, or success confirmation. Rewrite labels, agenda items, and placeholder for alternate values while keeping the same validation model.
   Layout: Use a 42%/58% two-column grid inside a Raised Line section panel. Left has 32px padding and three numbered agenda rows. Right is a Deep Field form card with 28px padding, two-column name/email and company/team rows, full-width textarea, and full-width mint submit button. Inputs are 48px high with Raised Line backgrounds, Grid Line borders, and Mist text; error text uses Alert Coral. Preview occupies the same card with 20px row gaps. Mobile stacks both columns, uses one-column fields, and retains 44px touch targets.
   Motion: Preview follows the shared 220ms entrance and focus behavior. Copy feedback lasts 1600ms. Errors appear without layout-destroying shifts; reduced motion uses immediate state changes.
8. **Frequently asked questions** — Section id FAQ. Heading: Specific answers before a closer look. Build five accessible accordion items with exactly one open at a time and the first open initially. Q: Is the threat map connected to live intelligence? A: No. Every route, location, status, and event in this template is predefined sample content. The pause control changes only the local animation. Q: Do the customer numbers describe real results? A: No. They are fictional figures included to demonstrate the layout and are labeled as sample data wherever they appear. Replace them with substantiated content before using the page commercially. Q: Are the trust badges certifications? A: No. They are generic control categories, not seals or audit claims. The template deliberately excludes official marks and customer logos. Q: What happens when I submit the demo form? A: The page validates your entries and creates an on-screen request preview. It does not transmit, store, email, or book anything; you can copy the summary yourself. Q: Can the product modules be changed for another platform? A: Yes. All module copy and sample data belong in the central content file. Keep the four-stage interaction model and rewrite the content for the supplied variables. Adapt every answer for alternate values so it never retains default threat terminology.
   Layout: Use a 36%/64% grid with heading and a short supporting note left, accordion right. Rows have top Grid Line borders, 24px vertical padding, 18px question text, and Plus icons that rotate 45 degrees when open. Answers are 15px/1.7 Slate Text with 16px bottom padding. Mobile uses one column.
   Motion: Use buttons with aria-expanded and aria-controls, keyboard support, and 180ms height/opacity transitions. Content remains readable if animation is disabled.
9. **Closing call to action and footer** — Closing eyebrow: START WITH ONE WORKFLOW. Heading: Make the next incident feel less uncertain. Body: See how [BRAND] could fit the way [AUDIENCE] already work. Button is [PRIMARY_CTA] and scrolls back to Demo request. Footer shows the original bracket mark, [BRAND], and a concise descriptor derived from [PRODUCT_CATEGORY]. Footer controls are Platform, Workflow, Trust, FAQ, and Demo request, all performing their named anchor actions. Add a bottom note: All interface events and outcome figures are illustrative samples. Finish with [CREDIT]. Do not add addresses, dates, social icons, legal-link placeholders, or fabricated company details.
   Layout: Closing panel has a Signal Mint background with Button Ink text, 48px desktop padding, and a large original route-line SVG occupying the right third without covering copy. Footer uses Deep Field, a three-column top row, and a Grid Line-separated bottom line with 24px vertical padding. Mobile stacks all content and keeps the CTA full width.
   Motion: Closing panel reveals once. Its static SVG does not animate; links use a 140ms color change.

## Assets
- image: No raster image files or generated images are required. Create the world map, routes, node graph, sparkline, workflow diagrams, closing route motif, and bracket brand mark as original inline SVG/CSS/HTML. Do not use external map geometry, image URLs, placeholder services, or third-party illustrations.
- icon: Use locally bundled lucide-react icons with consistent 1.7px strokes for ArrowRight, ArrowUpRight, Menu, X, Pause, Play, Users, Binary, FileClock, Database, Plus, Copy, Check, and small product controls. Record lucide-react, https://github.com/lucide-icons/lucide, ISC license, in ASSETS.md.
- font: Self-host Space Grotesk Variable through @fontsource-variable/space-grotesk, Inter Variable through @fontsource-variable/inter, and IBM Plex Mono through @fontsource/ibm-plex-mono, all OFL-1.1. Import package CSS locally and list every package and license in ASSETS.md; never request a font CDN.

## Don'ts
- Do not add a backend, serverless function, API route, database, authentication, live telemetry, external map service, third-party API, form endpoint, or network-dependent behavior. The demo form only validates and previews local state and must never claim a request was sent or booked.
- Do not transmit or persist names, email addresses, company details, or any other input. No localStorage, sessionStorage, cookies, analytics, tracking pixels, hidden telemetry, or URL tracking parameters.
- Do not load any CDN script, stylesheet, font, icon, map tile, image, or remote asset. Bundle all dependencies and use relative asset paths with Vite base './'.
- Do not use real cybersecurity companies, product names, logos, customer marks, slogans, proprietary interfaces, exact copy, or recognizable brand color systems. Keep [BRAND] and all organizations and people fictional.
- Do not use official certification seals, auditor marks, compliance logos, security guarantees, real attack attribution, real threat intelligence, customer results, or unverified claims. Retain visible SAMPLE DATA and simulated-feed labels.
- Do not use shields, hooded hackers, skulls, glowing padlocks, fingerprint clichés, purple-blue neon gradients, matrix rain, stock hacker photography, anime or game characters, or real-person likenesses.
- Do not copy map artwork or interface code from another product. Use the original hand-authored SVG geometry and predefined sample events specified here; no external geoJSON, tile service, or chart library.
- Do not use commercial fonts, fonts.googleapis.com, fonts.gstatic.com, Adobe Fonts, restricted UI source, non-permissive packages, or dependencies outside the fixed stack.
- Do not use Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, generated bitmaps, third-party logos, or hotlinked files. No raster images are needed.
- Do not leave navigation, feed pause, module tabs, detection switch, graph nodes, FAQ items, demo form, copy action, edit action, or closing CTA nonfunctional. Do not add dead social, login, legal, or integration links.
- Do not emit source maps, copy src/ into dist/, exceed 20 MB in dist/, or require more than npm run build for the production output. Keep everything in index.html with file-name or hash-only local navigation.
- Do not hard-code default threat content inside components or leave Sablegrid security copy in an alternate-variable build. Keep all editable copy and sample data in src/content.ts and use US English throughout.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemaps, keyword-stuffed headings, dates, or analytics; a plain [BRAND] document title and original favicon are enough.
- Do not mention VibeFather, its license, pricing, metrics, or membership anywhere in the site except the optional rendered [CREDIT] footer link.
- Do not sacrifice accessibility or responsive behavior: maintain visible focus, semantic controls, labeled fields, keyboard-operable tabs and accordions, accessible error focus, reduced-motion support, 44px touch targets, zero console errors, and no horizontal overflow at 390×844 or 1440×900.

---
— Prompt by VibeFather · https://vibefather.ai/t/cybersecurity-saas-landing-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.