added more preview pages and more templates

RULE.md

@@ -32,7 +32,12 @@ Do **not** invent new product features or prices. Read `features.md` and use tho
    Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a>
    ```
    Link the company name only. Do not omit on new pages.
-10. **SEO on first shot** — public marketing pages must pass Lighthouse SEO (target **100**). Follow the [SEO checklist](#seo-public-marketing) below; do not ship homepage without meta description and descriptive link text.
+10. **Lighthouse on first shot** — public homepage must hit these targets before calling the mockup done:
+    - **SEO ≥ 100**
+    - **Accessibility ≥ 90** (prefer 95+)
+    - **Performance ≥ 50** on throttled mobile (prefer 65+; template-heavy sites rarely hit 90 without image rebuild)
+    
+    Follow [SEO](#seo-public-marketing), [Accessibility](#accessibility), and [Performance](#performance) below. Re-run Lighthouse after major homepage changes.
 
 ---
 
@@ -73,14 +78,14 @@ proposals/<client-name>/
 1. Create folders above.
 2. Copy closest `templates/<name>/` into `mockup/` (omit template docs/junk).
 3. Brand the **public** site (copy, colors, logo, services, contact). Prefer real approved data; mark placeholders clearly.
-4. Apply **SEO** on every public marketing page (see [SEO checklist](#seo-public-marketing)) — meta description, unique titles, descriptive links, OG/Twitter, LocalBusiness JSON-LD on the homepage.
+4. Apply **SEO + Accessibility + Performance** on public marketing pages (see checklists). Homepage Lighthouse: SEO 100, a11y ≥ 90, perf ≥ 50.
 5. Add **ux-gallery.html** — monica-style hub: eyebrow per feature (`Public · base`, `Portal · base`, `Portal · Email/SMS`, …). Ready screens link to real HTML; unfinished → `ux-planned.html?p=<key>`.
 6. Add **pricing.html** — base rows locked on; add-ons toggleable; enforce deps; show one-time + monthly totals; disclaimer that usage (Stripe/SMS/postage) is extra.
 7. Write **SCOPE.md** — recommend add-ons for *this* business; compute totals from `features.md` prices.
 8. Write **NOTES.md** — client identity, sources, sitemap, preview reminder, next passes.
 9. Banner on marketing pages → gallery + pricing links.
 10. Add the client row to the **Active previews** table in `README.md` (business, phone, email, preview URL). Use `_TBD_` for unknown phone/email.
-11. Smoke-test locally as static files; run Lighthouse SEO on the homepage (target 100).
+11. Smoke-test locally; run Lighthouse SEO + accessibility + performance on the homepage.
 
 ### Reuse
 
@@ -143,13 +148,17 @@ Service-card links must point to the **correct** service page (not one shared wr
 ### Quick Lighthouse check
 
 ```bash
-npx lighthouse@12 "https://<preview-host>/" --only-categories=seo --chrome-flags="--headless --no-sandbox"
+npx lighthouse@12 "https://<preview-host>/" \
+  --only-categories=seo,accessibility,performance \
+  --chrome-flags="--headless --no-sandbox"
 # or local:
 python3 -m http.server 8765
-npx lighthouse@12 "http://127.0.0.1:8765/proposals/<client>/mockup/" --only-categories=seo --chrome-flags="--headless --no-sandbox"
+npx lighthouse@12 "http://127.0.0.1:8765/proposals/<client>/mockup/" \
+  --only-categories=seo,accessibility,performance \
+  --chrome-flags="--headless --no-sandbox"
 ```
 
-Fix any SEO audit with score < 1 before calling the mockup done.
+Fix SEO audits with score < 1. Fix accessibility fails with weight > 0 until ≥ 90. Apply performance checklist until ≥ 50 (prefer 65+).
 
 ### Reference implementations
 
@@ -161,6 +170,68 @@ Homepages that already follow this pattern:
 
 ---
 
+## Accessibility
+
+Target Lighthouse **Accessibility ≥ 90** (prefer 95+) on the public homepage.
+
+### Required
+
+| Item | Rule |
+|------|------|
+| Icon-only controls | Every icon-only `<a>` / `<button>` needs `aria-label` (social, search, menu, carousel dots, overlay “+” links). Hide decorative icons with `aria-hidden="true"`. |
+| Form controls | Every `<select>` / meaningful `<input>` has a visible `<label>` or `aria-label` / `aria-labelledby`. |
+| Color contrast | Body text, footer links, CTAs, and muted labels must meet WCAG AA vs their background. Lighten footer links on dark footers; darken low-contrast primary buttons. |
+| Links in text | Concept-banner and in-paragraph links need more than color alone — use **underline** (`.preview-concept-banner a { text-decoration: underline }`). |
+| Touch targets | Interactive controls ≥ ~24×24px (carousel dots often fail — enlarge hit area). |
+| Images | Content images have meaningful `alt`; decorative may use `alt=""`. Logo links whose `<img>` is CSS-hidden need `aria-label` on the `<a>`. |
+| Heading order | Prefer sequential `h1 → h2 → h3` without skipping. Template leftovers that skip a level are lower priority than contrast/names, but fix when easy (e.g. section eyebrow as `<p>` not `h4`). |
+
+### Carousel / third-party widgets
+
+Owl/Swiper dots are often nameless. After init, set `aria-label="Carousel slide N"` on each dot button (small deferred script is fine).
+
+---
+
+## Performance
+
+Target Lighthouse **Performance ≥ 50** on simulated mobile (prefer **65+**). Template kits with Bootstrap + many plugins rarely reach 90 — still apply every item below.
+
+### Images (highest ROI)
+
+- Compress large JPEGs (quality ~75–80, longest edge ≤ ~1400–1600 for heroes, ≤ ~900 for cards).
+- Shrink oversized logos (often tiny on-screen but hundreds of KB on disk).
+- `loading="lazy"` + `decoding="async"` on **below-fold** images; keep LCP/hero eager.
+- Explicit `width` and `height` on logos and major images to limit CLS.
+- Prefer WebP/AVIF when adding new assets; when stuck with a template JPG/PNG, at least resize + recompress.
+
+### CSS / fonts / JS
+
+- Keep only critical CSS render-blocking (main `style.css` + layout framework). Load secondary CSS (AOS, Fancybox, Swiper, Font Awesome CDN, etc.) with:
+  ```html
+  <link rel="stylesheet" href="…" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="…"></noscript>
+  ```
+- `rel="preconnect"` to CDNs (`cdnjs`, `fonts.googleapis.com`, `fonts.gstatic.com` with `crossorigin`).
+- Google Fonts: `display=swap`. Local `@font-face`: `font-display: swap`.
+- `defer` site scripts at end of body; drop duplicate Bootstrap/Popper bundles (`bootstrap.bundle` **or** `bootstrap`+`popper`, not both).
+- Avoid loading unused heavy plugins on pages that don’t need them when practical.
+
+### CLS / LCP
+
+- Don’t lock zoom (`user-scalable=0` / `maximum-scale=1`).
+- Reserve space for images and sticky banners (`padding-top` for concept banner).
+- Preload the true LCP image when it’s an `<img>` (not required for CSS background heroes).
+
+### Realistic expectations
+
+| Site type | Perf target |
+|-----------|-------------|
+| Lean custom homepage | 70–90 |
+| Third-party HTML template (Bootstrap + carousels + many CSS imports) | 50–70 after image + defer work |
+| Untouched stock template + huge photos | often < 40 — not acceptable |
+
+---
+
 ## UX gallery conventions
 
 | Do | Don't |
@@ -208,6 +279,8 @@ Portal mocks can be denser/app-like; still match proposal hub styling (`ux-hub.c
 - [ ] `pricing.html` totals correct; deps work
 - [ ] Public marketing is client-branded and concept-bannered
 - [ ] SEO: homepage Lighthouse SEO 100; unique titles + meta descriptions on public pages; no vague “Learn more” links; OG/Twitter + JSON-LD on homepage
+- [ ] Accessibility: homepage Lighthouse a11y ≥ 90 — named controls, contrast, underlined banner links, labeled forms, lazy-safe alts
+- [ ] Performance: homepage Lighthouse perf ≥ 50 (prefer 65+) — compressed images, lazy below-fold, deferred secondary CSS/JS, `font-display: swap`, preconnect CDNs
 - [ ] `README.md` Active previews table has business, phone, email, preview URL
 - [ ] Footer credit: Made by [AI ML Operations, LLC](https://aimloperations.com)
 - [ ] No secrets committed; relative paths; opens without a server framework