1 · Vision

Phase 1: Vision & Scope Definition

0. BRANDING (user decision, 2026-09-07):

Company name: Arnow Solutions (formerly "The Consultant" — never use the old name on any public surface).

Mascot is a mandatory brand element — every public page must include at least one mascot illustration from /assets/img/mascots/ (POSE 1–8, 10, 12, webp+png; per mascots/README.md). Mascot poses must be remapped during build: the old README assigns poses to removed service pages (seo/paid-ads/ai-content-seo/ai-analytics/branding) — those assignments die with the pages; remaining poses (7 hero, 10 inviting, 1 welcoming, 3 explaining, 4 building, 6 on-call, 8 confident, 12 launching) get re-assigned to the real v17 sections.

Wordmark mark: "AS" (was "TC"). Logo-style SVG assets exist at /assets/img/logo-styles/ (structured-badge, minimal-mark, dynamic-symbol, bold-wordmark) — pick one direction during M0.

Infra/hostnames (consultant.srv…, consultant-v16.js) stay as-is internally — they are not user-facing branding.

1. Business Problem/Opportunity:

The consultant aims to solve inefficiencies and lack of integration within businesses by providing tailored AI and marketing solutions. The website's primary goal is to attract new clients by clearly showcasing these bespoke services, demonstrating value, and initiating conversations. The opportunity lies in positioning "Arnow Solutions" as a trusted partner that offers intelligent, customized solutions rather than generic, off-the-shelf products.

2. Target User Persona(s):

Primary: Business operators and their teams across various industries. These are decision-makers or influencers who are seeking to optimize internal workflows, improve customer interactions, or enhance their marketing efforts.

Secondary: Individuals interested in understanding how AI and advanced marketing can be practically applied to business challenges.

3. Key Functional Requirements:

Service Showcase = PROOF, not promises. The showcase leads with real projects actually built and running (live VPS/Hostinger apps). Each project shows: what it does, who it's for, and what it proves about our capability. No invented client work.

Core capability areas (what we build NOW): AI Assistants & Agents, AI Voice Agents, AI Automation, AI Chat & Knowledge systems — each demonstrated as a live working example, not described abstractly.

Design Heritage: A distinct thread for the past web design & graphic design practice (pre-AI era) — evidence that design craft predates and now informs the AI work. Talked about honestly as history + foundation, not a current "service strip."

EXPLICIT EXCLUSIONS (never advertised): SEO services, paid ads, AI content/SEO packages, analytics packages — not offered, not listed, not hinted at. We only sell what we do.

Work & Process Explanation: Clearly articulate "Arnow Solutions's" 4-step engagement process (Listen, Ask, Recommend, Build & Support).

Call-to-Action: Prominently feature "Start a conversation" prompts to initiate client contact.

Portfolio/Work Display: A section to showcase past projects (/work page implied).

Contact Information: Clear paths to get in touch (/contact implied).

Theming: Maintain existing dark/light mode toggle for user preference.

Responsive Design: Adapt gracefully across various devices (mobile, tablet, desktop).

4. Desired Emotional/Brand Impact ("expensive," "cinematic," "playful"):

The website should convey a sense of:

Professionalism & Trust: Through clean design, clear communication, and a focus on tailored solutions.

Innovation & Modernity: Emphasizing AI and cutting-edge marketing.

Efficiency & Results: Showcasing "before and after" scenarios where solutions lead to tangible improvements.

Approachability & Partnership: "We listen first," "actually fits," fostering a collaborative tone.

Subtle Sophistication: Achieved through deliberate pacing in animations (400-600ms, custom ease-outs), a refined color palette, and high-quality imagery (e.g., mascots). The existing "Inter" font and visual treatments already contribute to this. The mascots add a touch of distinctive, professional playfulness.

5. Specific Non-Functional Requirements:

Performance: Fast loading times, smooth scrolling, and fluid animations (targeting 60fps).

Accessibility: Adherence to web accessibility standards where possible.

SEO: Optimized for search engine discoverability, especially for "AI solutions," "marketing consulting," and related services.

Maintainability: Clean, modular code structure to facilitate future updates and scalability.

Security: Standard web security practices.

2 · Architecture

ARCHITECTURE_BLUEPRINT.md — Arnow Solutions

Derived from PROJECT_VISION.md. Purpose: choose the technical direction and explicitly align each Premium Development Stack skill to the build.

1. Stack Decision

Decision: Multi-page static-first build (HTML/CSS/JS modules) — NOT a React SPA.

Rationale:

The site is a marketing/lead-gen site. SEO and first-load speed are primary non-functional requirements (per PROJECT_VISION).

A React SPA adds JS weight and hurts crawl-ability without SSR/SSG tooling. "Less is more" applies to architecture too.

The current site is already plain HTML/CSS; we rebuild it properly rather than migrating to a framework that buys nothing here.

If client-side state grows later, introduce a tiny component layer or migrate to Astro (static-first, islands for interactivity) — do not default to a heavy SPA.

Resulting baseline (maps to premium-web-scaffolding rules):

Semantic HTML + CSS custom properties (design tokens in one place).

Vanilla TypeScript-free JS modules (or plain ES modules) — only where interactivity exists.

Scroll behavior: native CSS Intersection Observer for all reveal-on-scroll. FORBIDDEN: AOS or similar.

Animations on transform/opacity only. No layout thrashing.

Lazy-load images below the fold (loading="lazy"), width/height set to avoid CLS.

Respect prefers-reduced-motion globally.

2. Premium Motion Design Strategy (`premium-motion-design`)

Apply deliberately, sparingly — "expensive" pacing:

Motion tokens (global CSS variables):

- --ease-out-expensive: cubic-bezier(0.25, 0.1, 0.25, 1.0) (long gentle deceleration)

- --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1) (ease-out-quint feel for reveals)

- --dur-fast: 400ms, --dur-base: 600ms, --dur-slow: 900ms

Where motion is used (nothing else animates):

1. Hero load-in choreography (staggered: label → headline → sub → CTAs → mascot), one 600ms pass, no bounce.

2. Scroll reveals for section titles/cards via Intersection Observer, single fade+rise (8–16px), 600ms.

3. Nav: background tint on scroll (no transition below 400ms).

4. CTA hover micro-motion: translateY(-2px) + shadow, 400ms.

5. Theme toggle: respect 0.35s color transitions already present; animate knob with the expensive curve.

Cut list (current site violations we will NOT carry over): the 2s infinite keyframe loops (pulse dot, float, wave bars, hero glow) are ambient decoration — keep at most ONE subtle ambient accent, otherwise they cheapen the feel. Everything infinite gets animation-play-state pause on hover or reduced-motion off.

JS libraries: none required for this site. If complex scroll choreography is later requested, use GSAP (ScrollTrigger) — it is the only approved animation lib outside React.

3. 3D / Interactive Framework (`3d-interactive-framework`)

Decision: NO full 3D engine (BabylonJS/PixiJS) in v1. Vision calls for professional trust + subtle sophistication, not a game canvas. Per "less is more," a WebGL scene on a consulting homepage usually reads as novelty, not quality.

Allowed lightweight interactive flourishes (v1):

- Mascot images get a slow, *very subtle* parallax drift tied to pointer position (transform-only, CSS/JS ~10 lines, capped displacement, disabled on touch).

- If a product-style interactive demo (e.g., animated pipeline) is needed later, implement it with GSAP + SVG, not a 3D engine.

Escape hatch: If the client later wants a real-time 3D "product tour" or an interactive agent-network visual, that is the moment to load 3d-interactive-framework and choose PixiJS (2D particle/network) or BabylonJS (3D scene) with strict dispose/60fps rules.

4. Page Map & Content Architecture

Pivot (user direction, 2026-09-07): showcase = real built projects; NO SEO/paid-ads/AI-content/AI-analytics offerings anywhere. Design heritage (past web/graphic design) gets its own honest thread.

/ Home — cinematic console experience whose proof sections are real projects (before/after ledgers where they fit), the four capability demos (agents, voice, automation, chat/knowledge), process, CTA.

/services/* — ONLY pages for real current offerings: agentic-ai, ai-voice-agents, ai-chatbots-rag (web-design/SEO/branding/paid-ads/ai-content-seo/ai-analytics pages are removed from IA; web-design lives under Design Heritage, not services).

/work — the Showroom: screenshot-led project stories. No raw URL lists. Each project = real art-directed captures + layered case detail (problem → built → proves) + secondary live link; console-askable; optional sandboxed "try the real thing." Only curated, real, public-safe projects (see DEVELOPMENT_PLAN Module 3.5).

/process — the 4-step engagement page (kept).

/talk — intake page (kept, primary conversion).

/contact, /voice-demo — kept.

Design Heritage — a section/page for the past web + graphic design practice: real samples/skills from that era, framed as "we designed before AI; now we design with it." No fake volume, no invented clients.

Shared: nav, footer, theme system, motion tokens, SEO meta per page.

5. Performance & Quality Gates (mapped to `premium-web-scaffolding` + QA checklist)

Lighthouse ≥ 90 on performance/accessibility/SEO for home + a service page.

No layout shift from images (all dimensions set).

Total JS < 50KB gzipped (should be near-zero if observers are CSS-first).

All animations: 400–600ms, custom bezier, transform/opacity only, reduced-motion respected.

Asset audit: mascots sized/compressed (WebP), font-display swap, no render-blocking third-party CSS.

3 · Development Plan

DEVELOPMENT_PLAN.md — Arnow Solutions: "The Experience" Flagship Home

Scope per user decision (b): home page first, as a flagship that abandons the conventional marketing flow. The visitor lands inside a cinematic, AI-driven console where the *experience itself* demonstrates the company's craft. All other pages roll out later.

Working title: index-preview-v17.html ("The Console / The Experience").

Ground Rules (inherited from project PHASES.md — DO NOT VIOLATE)

Additive only: never overwrite production index.html; ship index-preview-v17.html + assets alongside.

Same-origin, CSP-safe: no CDN libraries; engine in /assets/js/consultant-v17.js. No-JS = full content still visible.

No emoji icons — inline SVG or CSS only.

No fabricated numbers/stats/claims — capability language only; copy from real site voice.

Brand copy verbatim (approved): "We find what's broken — and fix it with systems that run themselves." Diagnosis-first · fixed price · fully managed · business AND personal · "Calm. Capable. Human."

Real funnel must stay reachable: intake chat (#talk), voice path (/voice-demo), services links, work links, contact email.

Reduced-motion respected; mobile-first stacking; zero horizontal overflow.

Premium motion rules: 400–600ms, custom bezier, transform/opacity only, ≤1 ambient infinite loop.

MODULE 0 — Motion & Design Tokens (FOUNDATION — do first)

Skills: premium-motion-design · premium-web-scaffolding · premium-website-designer

Deliverable: _v17build/css/part0-tokens.css (imported by all parts).

CSS custom properties: ink/paper/accent palette (v15 Fix Ledger lineage: #101418/ivory/indigo #4f46e5 — verify against v16 latest), radii, type scale.

Motion tokens: --ease-exp: cubic-bezier(0.25,0.1,0.25,1.0); --ease-soft: cubic-bezier(0.22,1,0.36,1); --dur-fast:400ms; --dur-base:600ms; --dur-slow:900ms.

Typography: Inter tight display, Instrument Serif italic voice words (v15), JetBrains Mono ledger labels.

prefers-reduced-motion: reduce global kill-switch.

Verification: grep part files — zero ease-in-out/linear/ease-in in animation-timing; only token vars used; tokens file ≤ 200 lines.

MODULE 1 — "The Arnow Line" hero (the X-ray brain) — flagship centerpiece

Skills: premium-motion-design · 3d-interactive-framework (render discipline) · premium-website-designer

Deliverable: Hero scene in _v17build/html/part1-hero.html + engine in consultant-v17.js.

Concept (user's Flash-era idea, 2026-09-07): Bronx transit × neural scan. Arnow Ave sits one stop from the Allerton train station (Bronx) — the brand's literal origin story. The hero is a stylized, illustrated brain (the client's business/mind) with a curved subway line running through the scene. A train travels the line through station stops; the path crosses blue scan zones — when the train enters a zone, a blue X-ray pulse sweeps the brain, lighting up its inner structure/circuitry (what's actually going on inside), then resolves: the "fix" glows, the train continues. Story: *scan first, then fix* — "We find what's broken — and fix it with systems that run themselves."

Station stops (honest process labels, no fabricated claims): e.g., .01 INTAKE → .02 SCAN → .03 FIX — echoing the real 4-step process (listen → ask → recommend → build). Heritage beats: "Allerton" and "Arnow" can appear as station names on the line (brand story, not a claim).

Tech approach (NO Flash, NO heavy 3D): layered inline SVG scene (brain in clean line-art layers + track path + train sprite), animated with rAF/WAAPI on motion tokens; the X-ray effect = SVG clip/mask + mix-blend-mode: screen sweep (blue) revealing an inner "circuitry" layer, then a green/gold "fixed" pulse. GSAP only if path-motion complexity demands it. Fallback ladder: no-JS → static scene + copy fully visible; reduced-motion → static illustration, no sweep.

The loop discipline: one continuous cinematic pass (~10s: arrival → journey → scan beats → resolve), then IDLE (no infinite spam). Re-runs once per scroll-into-view; pauses when tab hidden. This is the ONE allowed ambient moment on the page.

Mascot integration: a mascot appears at the moment the scan completes (the "fixed" beat) — mascots celebrate fixes, never filler (Fix Ledger rule).

Copy overlay: minimal, typographic, on brand ("AI online" status, one headline line), mono ledger annotations at scan beats.

Verification: 60fps mid-tier mobile; single pass + idle; reduced-motion static; no-JS full content; CLS 0; blue sweep uses blend-mode + mask only (no layout thrash).

MODULE 1B — THE SIGNATURE HERO: "The Arnow Line" + AI X-ray (user-approved 2026-09-07)

Working prototype (live, additive): index-preview-v17-hero.html → https://consultant.srv1738752.hstgr.cloud/index-preview-v17-hero.html (source /workspace/New-Arnow-Solutions/public/, deploys to /opt/consultant/public/ on the VPS).

The story: Arnow Ave sits beside Allerton Ave — a real Bronx train station. The train IS the brand: always moving, never stops, carries you where you need to go. The AI promise ("we find what's broken") is told as an X-ray inspection of the train itself — at the Allerton scanner, an X-ray looks INSIDE the cars.

CORRECTION (user, 2026-09-07): The X-ray is ON THE TRAIN — showing what's inside the cars (riders, benches, racks). It has NOTHING to do with a brain. The earlier "AI X-ray brain console" concept (v1 of this module) is DEAD — brain removed entirely.

Composition (v2, live):

Copy column (left): eyebrow "THE ARNOW LINE · ALLERTON AVE · THE BRONX"; H1 "Every car gets *inspected*. Nothing rides hidden."; sub uses the 2-train metaphor + scanner; CTAs; 3 micro value props.

Inspection scene (right): elevated vintage red train (rounded roof, silver roof band, window rows, "661" number board) rides a CURVED diagonal line bottom-left → upper-right (NOT a flat horizontal bottom strip — course must feel like an elevated el curving through the city); Bronx tenement silhouettes; stations ARNOW AVE (mascot platform) + ALLERTON AVE sign; blue X-ray GATE arch mid-line ("X-RAY · SEE INSIDE").

The X-ray beat: when the train passes the arch, its body becomes a translucent dashed-cyan outline; the interior becomes the star — standing riders (heads, rib arcs, arms), seated rider, benches with backrests, overhead racks + bags, grab poles — all glowing cyan. Sweep line tracks the gate; readout: "X-RAY LIVE · LOOKING INSIDE CAR 661…" → "INSIDE: SYSTEMS CHECKED · ALL CARRIED SAFELY".

Robot mascot waits on the platform at Arnow Ave — mascot mandate satisfied.

Rules learned (HARD):

Host enforces CSP script-src 'self' → ALL hero JS MUST be an external same-origin file (/assets/js/consultant-v17-hero.js); inline scripts are silently blocked.

.hero must be flex-direction:column — a row default pushes the line band off-frame.

Train loop = JS rAF translate3d along a sampled curve + rotation to tangent + scale; pauses on visibilitychange hidden + prefers-reduced-motion (static train mid-line).

Palette: bg #070a10; x-ray blues #3e7bff/#38bdf8/#67e8f9; vintage train red #a52f2f; silver roof #d8dadd; ivory text; Inter + JetBrains Mono labels.

Iteration queue (user pending): scan cadence/intensity; train length & nose fidelity (reference = vintage red elevated, "661"); whether headlight/number cluster reads too much like a face; copy tone.

MODULE 2 — Console Frame (the stage)

Skills: premium-web-scaffolding · premium-website-designer

Deliverable: _v17build/css/part2-console.css + chrome markup.

Reuse/refine v16 app-chrome: traffic dots, "AS Arnow Solutions", "AI online" pill, "New problem" reset, mic CTA (→ /voice-demo), theme toggle.

Tab rails: Context / How it works / Work / FAQ (v16 tp-* ids) — reorganized around *the visitor's problem*, not the company.

Layout: single focused column, side-dock reserved (v16 part3) for ambient canvas later (M6). Keyboard-focusable, aria-current tabs, ESC/back behavior.

Verification: keyboard-only full flow; 320px no horizontal scroll; tab switch = 400ms token transition only.

MODULE 3 — The Conversation Core (static "demo conductor")

Skills: premium-motion-design · premium-web-scaffolding · (copy discipline from real site voice)

Deliverable: consultant-v17.js engine v1 + markup.

The visitor is asked, in plain words: "What's broken?" — with smart starter chips (real, no invented claims): "Calls go to voicemail", "Email inbox is chaos", "Leads fall through the cracks", "I re-type data between tools", "Something else — let me type".

Typed, cited, "ledger-style" responses (v15 Fix Ledger visual language) that show how a system would fix THAT problem — capability language only.

Follow-ups guide toward the real funnel: book a call, /talk intake, voice demo, work examples.

Staged: v1 runs on curated decision-tree content (no LLM) — deterministic, honest, instant, zero cost. LLM wiring is M4.

Verification: every leaf ends in a real funnel destination; zero fabricated client names/metrics; full flow works offline.

MODULE 4 — Live AI Wiring (make it real)

Skills: (backend) · security-and-hardening · source-driven-development

Deliverable: wire the static console to the existing Fastify backend:

Use existing server/routes/sessions.ts + server/agent/orchestrator.ts + provider.ts (Gemini/Anthropic already configured).

Browser talks to a thin public endpoint (rate-limited, zod-validated); keep JWT/admin paths server-side only.

The "written plan within 48 hours" promise is backed by the existing intake + internal-plan + mailer path.

Open decision (needs user): where does the backend run for the preview? Options: (a) VPS 147.93.113.241 docker (Fastify+Postgres+Redis), (b) existing Hostinger static + separate backend URL, (c) localhost only for demo. CORS + env must match PUBLIC_BASE_URL.

Verification: end-to-end session → agent reply with citation/source styling; rate limit returns 429 gracefully (no crash); no key in client bundle.

MODULE 5 — Ambient Motion Layer (the "wow" that stays classy)

Skills: 3d-interactive-framework · premium-motion-design

Deliverable: optional ambient canvas in side-dock/background — subtle.

Preferred: PixiJS or raw Canvas2D particle/constellation that reacts (slowly, 20–30px max drift) to pointer; OR lightweight WebGL only if it stays ≤ 60fps and pauses when tab hidden / reduced-motion.

Absolutely NOT: 3D scenes, spinning logos, confetti, parallax mountains. One restrained ambient layer max.

Per 3d-interactive-framework: explicit dispose on unload, capped devicePixelRatio (≤1.5), no layout thrash.

Verification: frame-time budget ≥ 10ms headroom on low-end; disposed on route change; invisible under reduced-motion.

MODULE 3.5 — Project Showroom (REAL work, screenshot-led — user-mandated pivot)

Skills: premium-web-scaffolding · premium-motion-design · (content honesty rules)

Deliverable: projects.json + Showroom section on home.

Pattern name: "Prove it, don't link it." Raw URL lists are FORBIDDEN. Every project is presented as:

1. Art-directed real screenshot (cinematic capture, not a raw full-page thumbnail; multiple: desktop + mobile, light/dark where the app has themes).

2. Story in layers: glanceable case card (project name, one-line problem, "what it proves," tags) → click opens console-styled detail view with more captures, before/after ledger, stack.

3. Live URL exists as a secondary "visit site" affordance — never the primary element.

Capture pipeline: screenshots come from REAL headless captures of the live apps (VPS /opt/webcapture playwright tooling exists for this). NEVER mockups dressed as real captures. Where an app sits behind login (e.g., Big Reef player root), capture the public/landing view or a curated demo view.

AI console integration: the visitor can ASK the console for a project ("show me something that handles complex scheduling") and it presents the matching showroom entry with screenshots — the showroom doubles as a live demo of the AI.

Optional premium move (per project, where sane): embedded sandboxed "try the real thing" view of the live app (iframe with sandbox attrs; never for healthcare/internal projects).

Inventory comes from the actual live server routes (verified 2026-09-07): only projects the user approves as public-facing. Candidate pool (all live & routable):

- Consumer/public: The Rec youth nonprofit site (therec), Trade Compass forex platform, Big Reef Chapter audiobook player, Jeopardy-style game, Arnow Solutions's own site.

- Enterprise/internal (healthcare ops — Montefiore Urology): Unified Platform (schedule/OR/reimbursement), Reimbursement platform, OR Schedule/portal, Interview Season platform, Qgenda sync. Real and impressive, but healthcare-adjacent — showcase only with user's explicit call on naming/anonymization.

- Internal tools (probably NOT portfolio): code-server, supabase studio, photos/immich, notebook, skillclaw, omniroute, vapi, launchpad, listening-room, repo vault, agentic-os, hermes-webui.

DECISION (default, 2026-09-07, user not reached): PUBLIC portfolio = consumer/public projects only → The Rec, Trade Compass, Big Reef Chapter Player, Jeopardy game, Arnow Solutions site (meta/dogfood). Healthcare/enterprise (Unified, Reimbursement, OR Schedule, Interview Season) = OFF the public site by default; to flip later: user says "include healthcare projects" → re-run this module with chosen names/anonymization. Never publish healthcare work without that explicit flip.

Design Heritage entry: separate content block for past web design & graphic design practice — honest, no invented volume. Copy approval needed from user.

No fabricated metrics/clients/screenshots. Every showcased URL resolves 200; screenshots are real captures.

Verification: JSON schema-validated; every capture file exists + was produced by the capture pipeline (not hand-made); no SEO/paid-ads/AI-content references anywhere; keyboard-accessible detail view.

MODULE 6 — Funnel Integrity

Skills: premium-web-scaffolding

Deliverable: no dead ends. From any console state the visitor can reach: talk/intake, voice-demo, services (real ones only: agents/voice/chat — no SEO/paid-ads pages), work (real projects), design heritage, contact email. Footer = real links only.

Verification: crawl preview links; every href 200 or intentional mailto; nav present in no-JS.

MODULE 7 — QA & Preview Publish

Skills: (headless QA per PHASES.md rule 7) · web-quality-audit

Deliverable: index-preview-v17.html assembled, deployed additively to Hostinger root of consultant domain (SFTP/FTP per hostinger-deployment skill), QA report.

Verification (see QUALITY_ASSURANCE_CHECKLIST.md): Lighthouse ≥90 perf/a11y/SEO; headless render + vision pass; geometry probe (no overflow); all 8 no-slop animation checks green.

Agent delegation map (parallel-safe batches)

Batch A (parallel): M0 tokens · M6 funnel inventory · M2 console-css (uses M0 tokens only as CSS vars — agree names first).

Batch B (after A): M1 arrival · M3 conversation core (needs tokens + console) · M5 ambient prototype.

Batch C (sequential, owner = me/lead): M4 backend wiring (env/CORS/deploy decision) → then M7 assembly + QA + publish.

Never: two agents editing the same part file concurrently. Each part file has ONE owner.

Rollout note (post-flagship)

After v17 home is approved: port the same chrome/tokens to the REAL service pages (agentic-ai, ai-voice-agents, ai-chatbots-rag only), /work (project grid), design heritage page, /talk, /process, /voice-demo. Removed from the project forever: seo, paid-ads, branding, ai-content-seo, ai-analytics pages. That is a separate DEVELOPMENT_PLAN cycle.

4 · QA Checklist

QUALITY_ASSURANCE_CHECKLIST.md — Arnow Solutions v17 Flagship Home

Run per-module during dev AND once fully before publish. Every item must be green or explicitly waived with a reason.

A. Animation discipline (premium-motion-design)

[ ] Zero ease-in-out, ease-in, linear timing functions in shipped CSS/JS (grep-able).

[ ] All interactive transitions 400–600ms (reveals may use 600–900ms once).

[ ] Custom cubic-bezier tokens only: --ease-exp / --ease-soft referenced everywhere.

[ ] Animations use transform/opacity only — no width/height/top/left animation, no layout thrash.

[ ] ≤ 1 ambient infinite loop on the page; it pauses on :hover/hidden tab and dies under reduced-motion.

[ ] No bounce/spring defaults anywhere.

[ ] Arrival sequence ≤ 3.5s total, single pass, no replay loop.

[ ] prefers-reduced-motion: reduce → all motion off, content fully visible, no empty states.

B. Interaction & console (premium-web-scaffolding)

[ ] No AOS/heavy scroll libs. Any scroll reveal uses native Intersection Observer or none (console is scroll-light by design).

[ ] Keyboard-only: all tabs/buttons/chips reachable, visible focus ring, aria-current, ESC closes overlays.

[ ] 320px width: zero horizontal overflow; tap targets ≥ 44px.

[ ] No-JS page load = full meaningful content (progressive enhancement, not JS-required).

[ ] Theme toggle persists (localStorage), honors OS preference, transitions use tokens.

C. Content honesty (project rule)

[ ] Zero fabricated client names, metrics, testimonials, or quotes.

[ ] Brand copy verbatim where used: "We find what's broken — and fix it with systems that run themselves." / "Calm. Capable. Human." / fixed price language.

[ ] Every conversation leaf / chip resolves to a real funnel destination (talk, voice-demo, services, work, contact email).

[ ] No emoji-as-icons; SVG/CSS only.

[ ] No claims about the visitor's data being processed unless the backend actually does it.

D. Performance & 3D/motion layer (3d-interactive-framework)

[ ] Lighthouse (mobile, throttled): Performance ≥ 90, Accessibility ≥ 90, SEO ≥ 90, CLS = 0.

[ ] Total shipped JS < 50KB gzipped (engine + ambient layer), no CDN runtime deps.

[ ] Ambient canvas: 60fps with ≥ 10ms frame headroom; devicePixelRatio capped ≤ 1.5.

[ ] Canvas disposes cleanly (context/meshes/textures) on tab hidden / module swap — no memory growth over 5 min soak.

[ ] Images: loading="lazy" below fold, dimensions set (no CLS), WebP/compressed mascots.

[ ] Fonts: font-display: swap, preconnect only to same-origin + Google Fonts as today.

E. Security & backend (M4 only)

[ ] No API keys in client bundle; browser calls thin public route only.

[ ] Rate limiting returns graceful 429; zod validation on every input; CORS locked to PUBLIC_BASE_URL.

[ ] Existing JWT/admin/upload routes untouched and still server-side.

F. Funnel integrity

[ ] All internal links resolve (200 or intentional mailto); no orphan sections.

[ ] Nav/footer match real funnel (Services, Work, Process, Talk, Voice demo, Contact).

[ ] index.html production untouched; v17 is additive index-preview-v17.html.

[ ] Branding: "Arnow Solutions" everywhere; zero occurrences of "The Consultant" on any public surface.

[ ] Mascot mandate (mascots/README.md): ≥1 mascot per page; hero uses hero-mascot-main/page-mascot; decorative mascots alt=""+aria-hidden="true"; primary mascot has real alt.

G. Visual QA (headless render + vision, per PHASES.md rule 7)

[ ] Desktop 1440 & mobile 390 renders pass vision review (no overlap, no overflow, contrast ok).

[ ] Dark + light themes both pass.

[ ] Preview URL verified live on Hostinger after deploy (curl + screenshot), assets 200.

Sign-off

Module owner: ______ Date: ______ Result: all green / waivers listed: