# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

Cedalio landing page — a static HTML marketing site for an AI-powered Accounts Payable automation platform. No frameworks, no build system, no package manager. Pure HTML5/CSS3/Vanilla JS deployed to Vercel.

**Live URL:** https://www.cedalio.com

## Development & Deployment

- **No build step.** Edit files directly and push to `main` — Vercel automatically deploys every push to `main` to production (https://www.cedalio.com).
- **Vercel config:** `vercel.json` sets `cleanUrls: true` plus permanent redirects for legacy URLs. Because of clean URLs, internal links omit the `.html` extension (e.g., `/demo`, `/pricing`) even though the files on disk are `demo.html`, `pricing.html`, etc.
- **No dependencies to install.** No package.json, no node_modules.
- **Git LFS** is enabled for image files — run `git lfs install` if cloning fresh.
- To preview locally, run `python3 tools/serve.py 8765`: it mimics Vercel's clean URLs (`/pricing` → `pricing.html`), which a plain `http.server` does not, so internal links 404 there.
- **Brand v2 (Manual de marca, ed. 02, sept. 2026):** the three home pages (`index.html` EN, `index-es.html`, `index-pt.html`) and the three pricing pages (`pricing.html`, `pricing-en.html`, `pricing-pt.html`) are generated by `python3 tools/rediseno_build.py` (home copy lives in its `I18N` dict; video index, FAQ, blog cards and SEO tags are frozen in `tools/home_content.json`; pricing content — tiers, core platform, agent catalog, ROI labels — in `tools/pricing_content.json`). They use `brand.css` + `brand.js`. Every other page keeps `styles.css`, which was migrated by `python3 tools/brand_migrate.py` (color map, flattened gradients, Urbanist, unified nav/footer markup per language, plus a "MARCA V2" block at the end of `styles.css` generated from `brand.css`). Re-run the migration after editing `brand.css` or the nav/footer; it is idempotent. Blog thumbnails in `images/blog/` come from `tools/blog-illustrations.py`. `tools/check_links.py *.html` verifies every link, anchor and asset.

## Architecture

### File Organization

- `index.html` — Main landing page (English, default language). Generated: edit `tools/rediseno_build.py`, not the HTML.
- `index-es.html` / `index-pt.html` — Spanish and Portuguese-BR variants
- `styles.css` — Single stylesheet (~125KB) with full design system
- `script.js` — Single JS file (~23KB) with all interactive behavior
- `product-demo.css` / `product-demo.js` — Interactive product demo, rendered as the hero visual (`.hero-visual--demo`, anchor `#product`) on all index variants, replacing the old static `app-mockup`: simulated Cedalio app (inbox → AI extraction → 3-way matching → ERP sync + anomaly → supplier portal). The supplier-portal stage branches on the anomaly resolution: "request credit note" shows a pending NC the supplier issues in one click; "approve anyway" shows the scheduled payment. The final "14 seconds" banner lives at the end of this stage. Self-contained widget, all classes prefixed `pd-`, i18n dictionary inside the JS keyed off `<html lang>` (en/es/pt). The demo-page CTA target is set per page via `data-demo-cta` on the `#cedalio-product-demo` mount div.
- **Videos section** (`#videos`, all three index variants): a player that shows one video at a time — stage (thumbnail → inline `youtube-nocookie` embed on play) + explanatory panel + prev/next — with a chapter index underneath (overview, 3 chapters with their capsules, full walkthrough; 17 videos on the @cedalio channel, playlist `PLV99m0lA6L7Q`; the EN home uses the English-audio set, playlist `PLM3egIAM3Qic`, thumbnails in `images/videos/en/`). Each `.vid-index-item` button carries the data (`data-vid`, `data-ratio`, `data-thumb`, `data-kicker`, `data-title`, `data-desc`); the player script at the end of `script.js` reads it. The hero "Watch demo video" CTA still opens `#video-modal` (`data-video-id`). Thumbnails are the videos' title cards in `images/videos/`. Keep the copy in the three files in sync by hand when editing.
- `caso-*.html` — 4 case study pages
- `art-*.html` — 12 blog/resource articles (includes 6 country-specific compliance pages)
- `pricing.html` / `pricing-en.html` / `pricing-pt.html` — generated (see Brand v2 below); edit `tools/pricing_content.json`, not the HTML
- `demo.html` — Calendly booking embed
- `booked-demo-confirmation.html` — Post-booking page with conversion tracking
- `privacy.html` / `terms.html` — Legal pages in English; Spanish versions are `privacidad.html` / `terminos.html`, Portuguese versions are `privacidade.html` / `termos.html`
- `images/blog/` — Article/case study images (PNG, 1-1.6MB each)

### Internationalization

Three separate HTML files per language — not a dynamic i18n system. English (`index.html`) is the default language. Spanish is `index-es.html` and Portuguese-BR is `index-pt.html`. All three share the same `styles.css` and `script.js`. When updating content on one language version, the same change must be manually applied to the other two. Spanish sub-pages (art-*.html, caso-*.html, blog.html, pricing.html, contacto.html, demo.html, privacidad.html, terminos.html) link back to `index-es.html`. Translation notes are in `README-PT.txt`.

### CSS Design System

`styles.css` uses CSS custom properties extensively. Key tokens:

- **Brand primary:** `#F25C54` (orange-red), gradient from `#E84038` to `#FF8C42`
- **Font:** Urbanist (Google Fonts), weights 400–800
- **Naming:** BEM-like class conventions mixed with utility classes
- Responsive breakpoints around 768px (mobile hamburger menu)
- Sticky navbar with backdrop blur on scroll

### JavaScript Features (`script.js`)

- **ROI Calculator:** Dynamic cost/time savings calculation ($12/invoice saved, 15 min/invoice)
- **Scroll animations:** Intersection Observer API (threshold 0.1, margin -50px) for fade/slide-in effects
- **Counter animations:** requestAnimationFrame-based count-up for stats
- **Navbar:** Scroll detection (50px threshold), mobile hamburger toggle
- **Parallax:** Hero section at 10% scroll speed
- **Smooth scrolling:** 100px header offset for anchor links

### External Integrations

- **Google Analytics 4:** Property `G-322557108`
- **Google Ads:** Conversion ID `AW-17641257236`, tracks `demo_booked` event
- **Calendly:** Embedded widget on `demo.html`, uses external Calendly CSS/JS assets

### SEO

- `sitemap.xml` with 27 URLs (update when adding/removing pages)
- `robots.txt` with 1s crawl delay
- Full Open Graph and Twitter Card meta tags on all pages
- Language-specific OG images (`og-image.png`, `og-image-en.png`, `og-image-pt.png`)

## Key Patterns

- All pages include GA4 and Google Ads tracking scripts in `<head>`, plus the favicon links (`favicon.ico`, `favicon-32x32.png`, `favicon-192x192.png`, `apple-touch-icon.png` at the site root — the isotype cropped from `logo-cedalio.png`). Add the same four `<link>` tags to any new page.
- SVG icons are defined inline as `<symbol>` elements, not external files
- No component reuse system — shared sections (navbar, footer) are duplicated across HTML files. Changes to shared elements must be replicated across all pages.
- The FAQ section uses accordion-style expand/collapse, driven by CSS/JS