From 1ed58b4b3305734f8bfac8040e1a0c631ecb6f65 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Fri, 24 Apr 2026 16:12:27 -0300
Subject: [PATCH] content: rewrite AGENTS.md to reflect current project state
 (latte theme, MotionFlow, chat panel, 3 pricing cards)

---
 AGENTS.md | 407 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 261 insertions(+), 146 deletions(-)
diff --git a/AGENTS.md b/AGENTS.md
index 96d8137..b1fa470 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -11,10 +11,10 @@ Single-page static landing page for **my-biz.app** — a hassle-free all-in-one
 | Item | Detail |
 |---|---|
 | Live page | `index.html` — the only production HTML file |
-| Design | Classy dark theme · grey/gold/black · no frameworks |
+| Design | Warm coffee/latte light theme · cream/burnt-orange/dark-roast |
 | Styling | 100% inline `<style>` in `index.html` — no external CSS |
-| JavaScript | Inline `<script>` at bottom of `index.html` — no external JS |
-| Dependencies | Zero — pure HTML + CSS + vanilla JS |
+| JavaScript | Inline `<script>` at bottom of `index.html` — no external JS except MotionFlow |
+| External dep | MotionFlow CDN (CSS + JS) — the only allowed external dependency |
 | Archive | `old/` — previous style explorations (do not touch) |
 
 ---
@@ -23,46 +23,52 @@ Single-page static landing page for **my-biz.app** — a hassle-free all-in-one
 
 ```
 my-biz/
-├── index.html          ← production page (the only file that matters)
-├── AGENTS.md           ← this file
-├── start               ← dev server launcher
-└── old/                ← archived style variants (read-only)
-    ├── index-bling.html
-    ├── index-cafe.html
-    ├── index-classy.html
-    ├── index-holiday.html
-    ├── index-saas.html
-    ├── index-startup.html
-    └── index_.html
+├── index.html        ← production page (only file to edit)
+├── style.html        ← brand style guide for designers (read-only)
+├── logo.png          ← nav logo image (36px tall in nav)
+├── AGENTS.md         ← this file
+├── start             ← dev server launcher
+└── old/              ← archived variants (read-only, never touch)
 ```
 
 ---
 
+## External Dependencies (Allowed)
+
+- **MotionFlow CSS** — `https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css` (in `<head>`)
+- **MotionFlow JS** — `https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js` (before `</body>`)
+- MotionFlow auto-initializes. No manual JS setup needed.
+
+No other external CSS, JS, or fonts are permitted.
+
+---
+
 ## Design System
 
 ### CSS Custom Properties (defined in `:root`)
 
 | Token | Value | Usage |
 |---|---|---|
-| `--bg` | `#191920` | Main page background — dark steel grey |
-| `--surf1` | `#202028` | Alternate section background |
-| `--card` | `#252530` | Card / modal box background |
-| `--lift` | `#2E2E3C` | Card hover state, featured card bg |
-| `--border` | `rgba(212,170,80,.22)` | All borders and grid gaps |
-| `--grey` | `#68687A` | Muted body text, nav links |
-| `--silver` | `#ABABBE` | Secondary text, feature list items |
-| `--light` | `#D2D2E0` | `<strong>` inside body copy |
-| `--gold` | `#D6AF52` | Primary gold — labels, borders, accents |
-| `--gold-hi` | `#F2CE62` | Bright shiny gold — gradient highlight |
-| `--gold-lo` | `#8E6C30` | Dark gold — gradient shadow |
-| `--gold-glow` | `rgba(212,170,80,.18)` | Box-shadow glow on gold elements |
-| `--white` | `#EEEEF4` | Headings, primary text |
+| `--bg` | `#efebe9` | Latte — main page background (LIGHT) |
+| `--surf1` | `#e8e0da` | Warm Latte — alternate section background |
+| `--card` | `#fff3e0` | Cream — cards, modal, chat panel |
+| `--lift` | `#f5ece4` | Lifted Cream — card hover, featured card bg |
+| `--bg-deep` | `#3e2723` | Dark Roast — footer, overlays |
+| `--border` | `rgba(93,64,55,0.25)` | All borders and grid gaps |
+| `--grey` | `#a1887f` | Warm Taupe — muted text, captions |
+| `--silver` | `#6d4c41` | Deep Brown — secondary text |
+| `--light` | `#5d4037` | Medium Roast — body text |
+| `--gold` | `#e65100` | Burnt Orange — primary CTA, accents |
+| `--gold-hi` | `#fb8c00` | Warm Orange — hover highlight |
+| `--gold-lo` | `#bf360c` | Deep Burnt — gradient start/end stop |
+| `--gold-glow` | `rgba(230,81,0,0.18)` | Box-shadow glow on gold elements |
+| `--white` | `#3e2723` | Dark Roast — headings on light background |
 
 **NEVER use raw hex values in HTML or CSS.** Always reference the token.
 
-### Gold Metallic Gradient (static — no animation)
+### Brand Gradient (5-stop, 135deg)
 
-Applied to: nav logo, footer logo, modal title, featured pricing price, pricing badge, `.btn-primary`, featured `.pricing-cta`, `.custom-rate`.
+Applied to: nav logo (text clip), footer logo, modal title, featured pricing price, pricing badge, `.btn-primary`, featured `.pricing-cta`, `.custom-rate`.
 
 ```css
 background: linear-gradient(
@@ -73,6 +79,10 @@ background: linear-gradient(
   var(--gold)    75%,
   var(--gold-lo) 100%
 );
+```
+
+Text clip usage (for gradient text):
+```css
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
@@ -82,13 +92,13 @@ background-clip: text;
 
 | Use | Font | Size |
 |---|---|---|
-| Headings (`h1`, `h2`, `.nav-logo`, `.footer-logo`, `.modal-title`, `.custom-rate`) | `Georgia, "Times New Roman", serif` | varies |
-| Body / UI | `"Segoe UI", system-ui, -apple-system, sans-serif` | 0.85–1.1rem |
-| Labels (`.section-label`, `.news-area`, `.pricing-plan`) | system-ui, uppercase, wide tracking | 0.65–0.78rem |
+| Headings (`h1`, `h2`, card titles, pricing, modal title) | `Georgia, "Times New Roman", serif` | varies |
+| Body / UI / buttons / forms / chat | `"Segoe UI", system-ui, -apple-system, sans-serif` | 0.65–1.0rem |
+| Labels / section labels / tags | system-ui, UPPERCASE, wide tracking | 0.62–0.78rem |
 
-### No Animations Rule
+### No @keyframes Rule
 
-**There are zero `@keyframes` in `index.html`.** Motion is limited to CSS `transition` on hover/focus states only. Do not add any `@keyframes`, `animation`, or scroll-triggered effects.
+**There are zero `@keyframes` in `index.html`.** Motion is limited to CSS `transition` on hover/focus states only. MotionFlow handles all scroll animations via its own internal logic — that is allowed and expected. Do not add any `@keyframes` or `animation` properties.
 
 ---
 
@@ -97,109 +107,185 @@ background-clip: text;
 All sections are in normal document flow. The user scrolls the page. Sections appear in this order:
 
 ```
-<nav>                   sticky, always visible
-<section.hero#home>     100vh, centred, dark radial bg
-<section#verticals>     background: var(--surf1)
-<section#news>          background: var(--bg)
-<section#pricing>       background: var(--surf1)
-<section#customization> background: var(--bg)
-<footer>                background: #0E0E14, 3px gold top border
+<nav>                   sticky, 62px, cream bg with burnt-orange bottom border
+<div#chat-panel>        fixed dropdown below nav-right, hidden by default
+<section.hero#home>     55vh, latte bg, parallax image behind content
+<section#verticals>     MotionFlow ticker with image cards linking to subdomains
+<section#news>          latte bg, 4-card news grid
+<section#pricing>       surf1 bg, 3 pricing cards (Side Hustle / On the Rise / Empire)
+<section#customization> latte bg, 2 custom cards
+<footer>                bg-deep (dark roast), 3px burnt-orange top border
 <div#modal-overlay>     fixed, shown/hidden by JS
 ```
 
-### Nav
-
-```
-position: sticky; top: 0; z-index: 500; height: 62px;
-background: rgba(25,25,32,0.97); backdrop-filter: blur(20px);
-border-bottom: 1px solid var(--border);
-```
-
-- **Logo** `.nav-logo` — Georgia, shiny gold gradient text.
-- **Links** — `#verticals`, `#news`, `#pricing`, `#customization` — scroll to section.
-- **CTA** `.nav-cta` `id="open-modal"` — gold border, gold text, fills on hover → **opens modal**.
-
 All sections use `scroll-margin-top: 62px` to offset the sticky nav.
 
-### Hero (`section.hero#home`)
+---
 
-- `min-height: 100vh`, flex column, centred, `text-align: center`
-- `background: radial-gradient(ellipse 80% 50% at 50% 0%, #1E1E10 0%, transparent 70%), var(--bg)`
-- `.hero-eyebrow` — pill border, gold, uppercase
-- `h1` — Georgia, 4.8rem (responsive), white; `<em>` in `var(--gold)`
-- `.hero-sub` — silver, 1.1rem, max-width 580px
-- `.hero-tagline` — italic, grey
+## Nav
+
+```
+display: flex; align-items: center; gap: 16px;
+background: rgba(255,243,224,0.97);   ← CREAM (logo readable)
+border-bottom: 2px solid var(--gold);
+box-shadow: 0 2px 14px rgba(62,39,35,0.1);
+height: 62px; padding: 0 8vw;
+```
+
+Layout:
+
+```
+[logo.png img]  [gap 12px]  [Book Meeting]  [Free Trial]  [→ auto margin →]  [💬 chat input 440px wide ❯]
+```
+
+- **Logo** `.nav-logo` — `<img src="logo.png">` — 36px tall
+- **`.nav-center`** — flex, gap 12px — holds Book Meeting + Free Trial CTAs
+- **`.nav-right`** — `margin-left: auto` — holds `.nav-chat` widget + mobile-only Free Trial button
+- **`.nav-cta`** (Free Trial) — burnt-orange border + text, fills on hover
+- **`.nav-cta-book`** (Book Meeting) — taupe border, grey text, warm-orange on hover
+- **`.nav-chat`** — 440px wide, subtle tint, toggle 💬 button + text input + send ❯ button
+
+**Responsive:**
+- `≤ 768px` — `.nav-center` hidden, `.nav-chat` hidden, mobile Free Trial button appears
+
+---
+
+## Chat Panel (`div#chat-panel`)
+
+```
+position: fixed; top: 62px; right: 8vw; width: 440px;
+background: var(--card);
+border-top: 2px solid var(--gold);
+```
+
+- Toggles open/close via 💬 button in `.nav-chat`, or `Escape` key, or click outside, or on scroll
+- Shows chat history (240px tall, scrollable) and a message input at the bottom
+- Hidden on `≤ 768px`
+
+**Public API (exposed on `window._mbs`):**
+- `window._mbs.appendMsg(role, text)` — appends a message to the chat history
+- `window._mbs.openSilent()` — opens the panel without triggering the default greeting
+
+**Chat Webhook:**
+```
+POST https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/702862fd-dd17-4a34-8efb-e9056d2c50df/chat
+Content-Type: application/json
+Body: { "action": "sendMessage", "chatid": "<uuid-v4>", "chatInput": "<text>" }
+```
+
+**30-second new-user probe:** fires once after 30 seconds, collects browser/OS/device/geo fingerprint, POSTs to the chat webhook, displays the response, and auto-opens the chat panel.
+
+---
+
+## Hero (`section.hero#home`)
+
+- `min-height: 55vh`, flex column, centred, latte bg, `position: relative; overflow: hidden`
+- **Parallax bg**: `<div class="hero-bg-wrap"><img data-mf-parallax data-mf-parallax-speed="0.4" /></div>` — Unsplash office image, 28% opacity with latte overlay
+- Parallax disabled on tablet/mobile: `data-mf-parallax-speed-tablet="0" data-mf-parallax-speed-mobile="0"`
+
+Elements:
+- `.hero-eyebrow` — pill, burnt-orange border + text
+- `h1` — Georgia, 2.6rem, dark-roast; `<em>` in burnt-orange
+- `.hero-sub` — silver, 0.92rem
+- `.hero-tagline` — cycling typing text via MotionFlow (`data-mf-text-type="typing"`), 3 phrases
 - `.hero-actions` — two buttons:
   - `.btn-primary` `id="open-modal-hero"` → **opens modal**
-  - `.btn-secondary` → scrolls to `#verticals`
-- `.hero-trust` — tiny grey trust line; `<strong>` in silver
+  - `.btn-secondary` → scrolls to `#verticals` (Book Meeting)
+- `.hero-trust` — small muted trust line
 
-### Verticals (`section#verticals`)
+All hero elements carry `data-mf-animation="fade-up"` with `data-mf-animation-once="true"` and staggered delays.
+
+---
+
+## Verticals (`section#verticals`)
 
 - Background: `var(--surf1)`
-- `.verticals-grid` — CSS Grid `auto-fit minmax(220px,1fr)`, `gap: 1px`, grid itself coloured `var(--border)` for hairline gold gaps
-- **4 cards** (NGO · Startups · Manufacturing · Restaurants)
-- `.vertical-card` — `background: var(--card)`, hover → `var(--lift)`
-- `.vertical-card::before` — absolute 2px left bar, shiny gold gradient, `height: 0` → `height: 100%` on hover (transition 0.4s)
+- **MotionFlow ticker**: `<div class="vtick-wrap" data-mf-ticker data-mf-ticker-speed="55">`
+- Direct children are `<span>` elements, each containing a `.vtick-card` link
 
-Card anatomy:
-```
-.vertical-icon   emoji, 2rem
-.vertical-name   Georgia, white
-.vertical-desc   silver, 0.88rem
-.vertical-tag    gold, uppercase, border-top separator
-```
+**5 cards:**
 
-### News (`section#news`)
+| Vertical | Link | Tag |
+|---|---|---|
+| NGO & Non-Profit | `https://ngo.my-biz.app` | Donor CRM · Impact Reports |
+| Startups | `https://startups.my-biz.app` | Invoicing · CRM · Reporting |
+| Manufacturing | `https://manufacturing.my-biz.app` | MRP · Inventory · Quality |
+| Restaurants | `https://restaurants.my-biz.app` | POS · Payroll · Food Cost |
+| Agentic Businesses | `https://agentic.my-biz.app` | AI · Automation · Agents |
+
+Card CSS: `.vtick-card` — 220px wide, image (140px tall), `.vtick-name` (Georgia, dark-roast), `.vtick-tag` (burnt-orange uppercase label)
+
+---
+
+## News (`section#news`)
 
 - Background: `var(--bg)`
 - `.news-grid` — `auto-fit minmax(220px,1fr)`, `gap: 24px`
-- **4 cards** (NGO · Startups · Manufacturing · Restaurants)
-- `.news-card` — no card bg, `border-top: 1px solid var(--border)`, hover → gold
-- Card anatomy: `.news-area` (gold label) · `.news-title` (Georgia) · `.news-teaser` (silver) · `.news-date` (grey)
+- **4 cards**: NGO · Startups · Manufacturing · Restaurants
+- `.news-card` — `border-top: 1px solid var(--border)`, hover → burnt-orange
+- Card anatomy: `.news-area` (burnt-orange label) · `.news-title` (Georgia) · `.news-teaser` (silver) · `.news-date` (grey)
+- MotionFlow stagger: `data-mf-stagger-animation="fade-up"` on the grid element
 
-### Pricing (`section#pricing`)
+---
+
+## Pricing (`section#pricing`)
 
 - Background: `var(--surf1)`
-- `.pricing-grid` — `auto-fit minmax(300px,1fr)`, `max-width: 820px`, gold hairline gaps
-- **2 cards**: Side Hustle ($214/yr) · On the Rise ($395/yr)
+- `.pricing-grid` — `auto-fit minmax(300px,1fr)`, no max-width, gold hairline gaps
+- **3 cards**: Side Hustle · On the Rise (featured) · Empire
 
-**Plain card** (`.pricing-card`):
+| Plan | Price | Key detail |
+|---|---|---|
+| Side Hustle | $214/yr | Up to 3 users, community support |
+| On the Rise | $395/yr | Featured card — "Most Popular" badge |
+| Empire | $750/yr + $500 setup | Self-hosted, "My house! My horse! My server!" |
+
+**Plain cards** (Side Hustle, Empire):
 - `background: var(--card)`
-- CTA: gold border + gold text → fills gold on hover
+- CTA: burnt-orange border + text, fills on hover
 
-**Featured card** (`.pricing-card.featured`):
+**Featured card** (On the Rise):
 - `background: var(--lift)`
 - `box-shadow: 0 0 0 1px var(--gold), 0 0 28px var(--gold-glow)`
-- `.pricing-price` — shiny gold gradient text
-- `.pricing-badge` — shiny gold gradient bg, dark text
-- CTA: shiny gold gradient bg → **opens modal** (`.open-modal`)
-- CTA plain card also → **opens modal** (`.open-modal`)
+- `.pricing-price` — 5-stop gradient text
+- `.pricing-badge` — 5-stop gradient background, dark text
+- MotionFlow: `data-mf-animation="zoom-in"` `data-mf-animation-once="true"`
 
-Feature list uses `—` em-dash in gold as bullet (`::before`).
+**Empire card extras:**
+- `.pricing-setup` — shows setup fee in burnt-orange
+- Feature list includes self-hosted server/VPS installation and maintenance
 
-### Customization (`section#customization`)
+Feature list uses `—` em-dash in burnt-orange as bullet (`::before`).
+
+All pricing CTAs use `class="open-modal"` → **opens modal**.
+
+---
+
+## Customization (`section#customization`)
 
 - Background: `var(--bg)`
 - `.custom-grid` — `auto-fit minmax(300px,1fr)`, gold hairline gaps
 - **2 cards**: Hire Any Odoo Developer · Our In-House Team
-- `.custom-card::after` — 2px gold gradient bar, `scaleX(0)` → `scaleX(1)` on hover
-- `.custom-rate` — shiny gold gradient text, Georgia, 1.4rem (`$65 USD / hour`)
-- `.custom-link` — gold, uppercase, underline reveals on hover
+- `.custom-card::after` — 2px gradient bar, `scaleX(0)` → `scaleX(1)` on hover (transition)
+- `.custom-rate` — 5-stop gradient text, Georgia, 1.4rem (`$65 USD / hour`)
+- `.custom-link` — burnt-orange, uppercase, underline reveals on hover
 
-### Footer
+---
+
+## Footer
 
 ```
-background: #0E0E14;
+background: var(--bg-deep);   ← dark roast
 border-top: 3px solid var(--gold);
 padding: 72px 8vw 40px;
 ```
 
-- **Brand column** — logo (shiny gold), tagline (grey), flex: 2
+- **Brand column** — logo (5-stop gradient text), tagline (grey), `flex: 2`
 - **3 link columns** — Product · Company · Legal — each `flex: 1`
-- `.footer-col h4` — gold, 0.65rem, uppercase, tracked
-- `.footer-col a` — grey → gold on hover
+- `.footer-col h4` — burnt-orange, 0.65rem, uppercase, tracked
+- `.footer-col a` — grey → burnt-orange on hover
 - `.footer-bottom` — flex row, grey text, gold rule separator on top
+- MotionFlow: `data-mf-stagger-animation="fade-up"` on `.footer-top`
 
 ---
 
@@ -211,40 +297,40 @@ padding: 72px 8vw 40px;
 |---|---|
 | Nav "Get Started" | `id="open-modal"` |
 | Hero "See Plans & Pricing" | `id="open-modal-hero"` |
-| Both pricing CTAs | `class="open-modal"` |
+| All pricing CTAs | `class="open-modal"` |
 
 All triggers call `openModal()`. The JS attaches listeners on `DOMContentLoaded`.
 
 ### Structure
 
 ```
-#modal-overlay          fixed, inset 0, backdrop-filter blur(14px)
-  #modal-box            max-width 480px, var(--card) bg, gold top border
+#modal-overlay          fixed, inset 0, backdrop-filter blur(14px), rgba(62,39,35,0.7)
+  #modal-box            max-width 480px, var(--card) bg, burnt-orange top border (3px)
     #modal-close        × button, top-right
-    .modal-title        Georgia, shiny gold gradient text
+    .modal-title        Georgia, 5-stop gradient text
     .modal-subtitle     grey, 0.82rem
     #trial-form
       .modal-field-group  (email)
-        .field-label      gold, uppercase, 0.62rem
+        .field-label      burnt-orange, uppercase, 0.62rem
         input[type=email] .modal-field
       .modal-field-group  (location)
         .field-label
-        select.modal-field  custom gold SVG arrow
+        select.modal-field  custom burnt-orange SVG arrow
           option: Boston · Manchester · Mumbai · saopaulo · Meppel · Sydney
-      input[hidden] name="product"    value="odoo_19"   ← ALWAYS odoo_19, never change
-      input[hidden] name="utm_source" value="homepage"
-      input[hidden] name="utm_medium" value="direct"
+      input[hidden] name="product"      value="odoo_19"   ← ALWAYS odoo_19, never change
+      input[hidden] name="utm_source"   value="homepage"
+      input[hidden] name="utm_medium"   value="direct"
       input[hidden] name="utm_campaign" value="none"
-      input[hidden] name="utm_term"   value=""
-      input[hidden] name="utm_content" value=""
+      input[hidden] name="utm_term"     value=""
+      input[hidden] name="utm_content"  value=""
       button.modal-submit   "Start Free Trial"
     #modal-confirm        shown after successful POST
-      .confirm-title      gold-hi
+      .confirm-title      burnt-orange
       .confirm-sub        silver
       button.modal-submit  "Close"  → closeModal()
 ```
 
-### Webhook
+### Trial Webhook
 
 ```
 POST https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a
@@ -257,14 +343,14 @@ The form POSTs via `fetch()`. Both `.then()` and `.catch()` show the confirmatio
 
 | Rule | Value |
 |---|---|
-| Overlay bg | `rgba(14,14,20,.88)` |
+| Overlay bg | `rgba(62,39,35,0.7)` |
 | Overlay backdrop | `blur(14px)` |
 | Box border-top | `3px solid var(--gold)` |
-| Field bg | `rgba(10,10,16,.7)` |
-| Field border | `1px solid rgba(212,170,80,.25)` |
+| Field bg | `rgba(255,243,224,0.6)` |
+| Field border | `1px solid rgba(93,64,55,0.25)` |
 | Field focus | `border-color: var(--gold)` |
-| Submit bg | shiny gold gradient |
-| Submit text | `var(--bg)` (dark) |
+| Submit bg | 5-stop brand gradient |
+| Submit text | `var(--card)` (cream) |
 
 ### Modal JS Behaviour
 
@@ -275,12 +361,40 @@ The form POSTs via `fetch()`. Both `.then()` and `.catch()` show the confirmatio
 
 ---
 
+## MotionFlow Usage Reference
+
+| Feature | Attribute | Where used |
+|---|---|---|
+| Scroll animation | `data-mf-animation="fade-up"` | Hero elements, section headers |
+| Scroll animation | `data-mf-animation="fade-left"` | Section labels |
+| Scroll animation | `data-mf-animation="zoom-in"` | Featured pricing card |
+| Stagger | `data-mf-stagger-animation="fade-up"` | News grid, custom grid, footer-top |
+| Parallax | `data-mf-parallax data-mf-parallax-speed="0.4"` | Hero background image |
+| Typing text | `data-mf-text-type="typing"` | Hero tagline |
+| Ticker | `data-mf-ticker data-mf-ticker-speed="55"` | Verticals section |
+
+- All scroll animations use `data-mf-animation-once="true"`.
+- Parallax disabled on tablet/mobile: `data-mf-parallax-speed-tablet="0" data-mf-parallax-speed-mobile="0"`.
+
+---
+
+## Inline Scripts (end of `<body>`, in order)
+
+1. **MotionFlow** — `<script src="...motionflow.min.js">` (last `<script>` before `</body>`)
+2. **Sales Agent Chat IIFE** — chat panel open/close logic, message send/receive, exposes `window._mbs`
+3. **30s Probe IIFE** — collects browser/device/geo fingerprint, POSTs to chat webhook, shows reply and opens panel
+4. **Modal IIFE** — trial form submission to trial webhook, confirmation display
+
+No other external scripts may be added.
+
+---
+
 ## Responsive Breakpoints
 
 | Breakpoint | Changes |
 |---|---|
-| `≤ 768px` | `h1` → 2.8rem · nav gap → 14px · modal padding → 40px 28px |
-| `≤ 480px` | `h1` → 2.1rem · section padding → 60px 5vw · nav hides all links except CTA · modal padding → 36px 20px · `.modal-title` → 1.5rem |
+| `≤ 768px` | `h1` → 1.9rem · `.nav-center` hidden · `.nav-chat` hidden · mobile Free Trial shown · `#chat-panel` hidden |
+| `≤ 480px` | `h1` → 1.5rem · nav/section/footer padding → 5vw · modal padding reduced · `.modal-title` font-size reduced |
 
 ---
 
@@ -288,25 +402,23 @@ The form POSTs via `fetch()`. Both `.then()` and `.catch()` show the confirmatio
 
 | Concern | Rule |
 |---|---|
-| Design tokens | NEVER use raw hex values — always use CSS custom properties |
-| Animations | NEVER add `@keyframes` — transitions only |
-| Dependencies | NEVER add external CSS, JS, or fonts |
-| Gold gradient | Always use the 5-stop `135deg` gradient pattern defined above |
+| Design tokens | NEVER use raw hex values — always CSS custom properties |
+| `@keyframes` | NEVER — CSS transitions only (MotionFlow handles scroll animations) |
+| External deps | ONLY MotionFlow CDN is allowed — no other external CSS, JS, or fonts |
+| Brand gradient | Always 5-stop 135deg pattern using `--gold-lo` / `--gold` / `--gold-hi` |
 | Modal product | `name="product" value="odoo_19"` — never change, never show to user |
-| Webhook URL | Never change without explicit instruction |
-| Sections | Preserve order: hero → verticals → news → pricing → customization → footer |
+| Chat webhook | Never change URL without explicit instruction |
+| Trial webhook | Never change URL without explicit instruction |
+| Section order | hero → verticals → news → pricing → customization → footer |
 | Responsive | Every element must work at 375px, 768px, and 1280px+ |
-| Hover states | All interactive elements must have visible hover/focus states in gold |
+| Hover states | All interactive elements must have visible hover/focus states in burnt-orange/gold |
 
 ---
 
 ## Git Rules
 
 - ALWAYS work on **`main`** branch.
-- Pull before every session:
-  ```bash
-  git pull origin main
-  ```
+- Pull before every session: `git pull origin main`
 - Commit message patterns:
   - `content: <short description>` — copy or section changes
   - `fix: <short description>` — bug or visual fixes
@@ -318,13 +430,13 @@ The form POSTs via `fetch()`. Both `.then()` and `.catch()` show the confirmatio
 
 ## File Safety Rules
 
-- **ONLY** edit `index.html` unless explicitly told otherwise.
-- NEVER touch files inside `old/`.
-- NEVER edit `AGENTS.md` unless the task is explicitly to update it.
-- NEVER split CSS into external files.
-- NEVER split JS into external files.
-- NEVER add a `<link>` to an external stylesheet.
-- NEVER add a `<script src="...">` tag.
+- **ONLY** edit `index.html` (and `AGENTS.md` when explicitly told)
+- NEVER touch files inside `old/`
+- NEVER split CSS into external files
+- NEVER split JS into external files
+- NEVER add a `<link>` to an external stylesheet
+- NEVER add a `<script src="...">` tag except the already-present MotionFlow CDN script
+- `style.html` is a designer reference — treat as read-only unless explicitly told otherwise
 
 ---
 
@@ -333,9 +445,9 @@ The form POSTs via `fetch()`. Both `.then()` and `.catch()` show the confirmatio
 Follow this order for every task:
 
 1. `git pull origin main`
-2. Read the relevant section of `index.html` before editing.
+2. Read the relevant section(s) of `index.html` before editing.
 3. Apply minimal, targeted edits — do not reformat unrelated code.
-4. Validate visually: sticky nav · all 6 sections visible on scroll · modal opens and closes · form submits.
+4. Validate: sticky nav · chat panel toggles · all sections visible on scroll · modal opens from all three triggers · form submits · MotionFlow animations fire.
 5. Commit with a descriptive message following the pattern above.
 6. `git push origin main`
 
@@ -343,10 +455,12 @@ Follow this order for every task:
 
 ## Success Criteria
 
-- `index.html` is valid HTML5 with no external dependencies.
-- All CSS tokens are used correctly — no raw hex values.
-- No `@keyframes` present anywhere.
-- Modal opens from all three trigger points and posts to the correct webhook.
+- `index.html` is valid HTML5 with no external dependencies other than MotionFlow CDN.
+- All CSS tokens used correctly — no raw hex values anywhere.
+- No `@keyframes` present anywhere in `index.html`.
+- Modal opens from all three trigger points and POSTs to the correct trial webhook.
+- Chat panel opens, sends messages to the correct chat webhook, and exposes `window._mbs`.
+- 30s probe fires once and posts fingerprint to the chat webhook.
 - Product field is always hidden and always `odoo_19`.
 - Page scrolls naturally through all sections with sticky nav intact.
 - All commits pushed to `main`.
@@ -355,11 +469,12 @@ Follow this order for every task:
 
 ## Failure Conditions
 
-- Adding external CSS or JS dependencies.
+- Adding external CSS, JS, or fonts beyond MotionFlow CDN.
 - Introducing `@keyframes` or scroll-hijacking behaviour.
-- Changing the webhook URL without explicit instruction.
-- Exposing the product select or changing its value from `odoo_19`.
-- Editing files inside `old/`.
+- Changing either webhook URL without explicit instruction.
+- Exposing the product field or changing its value from `odoo_19`.
 - Using raw hex values instead of CSS custom properties.
+- Editing files inside `old/`.
+- Editing `style.html` without explicit instruction.
 - Leaving unpushed commits.
 - Modifying files outside the scope of the task.
\ No newline at end of file
