Update pricing plans to match new plan structure (Platform % Only / Starter / Enterprise / Professional)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- CSS: Replace all `vi` units with `vw` for browser compat (tokens.css)
- CSS: Add hex fallbacks before every oklch() usage (~30 instances in pages.css)
- CSS: Remove invalid `lang: ar;`, add 100vh fallback, add [data-reveal] CLS fix (base.css)
- CSS: Add missing --color-primary-dark, --brand-primary, --brand-teal tokens
- JS: Remove broken View Transitions API usage (navigated before transition rendered)
- JS: Fix token name mismatches in injected styles (--color-surface → --bg-surface, etc.)
- JS: Fix exit-intent modal accessibility (aria-label, focus trap, escape key leak)
- HTML: Add OG tags, canonical URL, theme-color to index.html
- HTML: Fix features.html dead anchor links, footer structure, Arabic typo
- HTML: Fix pricing page annual price contradictions, "first 30" consistency
- HTML: Update copyright year to 2025 across all pages
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Annual = 10 months only (2 months free) with savings shown
- Mobile app offer: 75K EGP / 5,700 SAR one-time for branded app
- Both sections support geo-switching via data attributes
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- football.html: green theme, pitch management, age groups, squad system
- martial-arts.html: red theme, belt progression, grading exams, multi-discipline
- Both include "this is just an example, fits any academy" notice
- Same notice added to swimming.html
- Nav updated on index, features, swimming, pricing, contact to include new pages
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Shows the real system value (250K) crossed out with the setup fee
as the early-adopter price — anchoring effect.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Replace 4 old plans with 3 tiers (Small/Medium/Large)
- Egypt: 699+7%, 1499+5%, 3499+3%
- Saudi: 299SAR+5%, 699SAR+3.5%, 1499SAR+2%
- Add IP-based geo-detection (ipapi.co) to auto-show SAR prices
- Add "250K system / support fees only" value framing
- Add academy website + custom domain messaging
- Update calculator with dual-market plans
- Rewrite comparison table and FAQ for new model
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Old: المبتدئ/النمو/الاحترافي/المؤسسات with wrong prices.
New: نسبة فقط (0/12%), المبتدئ (1000/7.5%), المؤسسي (3500/5%), الاحترافي (10000/3.5%).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Stop experimenting. Just a normal well-built website:
- Hero: text left, screenshot right, normal size
- Features: 3-col grid with icon/title/description
- Screenshots: 2x2 grid, small with captions
- CTA: navy background, white button
- Footer: 3-col with links
Normal proportions, nothing oversized, nothing weird.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Addressing all 4 AI tells: bad proportions, sterile polish, repeating
patterns, generic copy. New approach:
- Text-only opener with Egyptian dialect copy (no hero image)
- Bento mosaic grid (asymmetric cells, not uniform)
- Numbered flow showing actual user journey
- Navy ticker marquee breaking the pattern
- Blockquote statement with attitude
- Varied section sizes (no uniform padding)
- Minimal footer (one row)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Previous versions were bloated — huge images, massive padding, wasted
space. New approach: 3-col module grid, 6-col screenshot thumbnails,
side-by-side hero, everything above the fold. Nav back to white/light.
No more oversized cinematic nonsense.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The page was a mess — white nav on dark hero, off-white sections sandwiched
between dark header and footer. Now: fully dark page, nav is transparent
(scrolls to dark), all sections use dark surface variations. The page
finally commits to its identity.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Kill the AI-template feel entirely. Navy hero that owns the viewport,
900-weight type at dramatic scale, staggered screenshot grid, page-load
choreography, and a differentiator statement with actual conviction.
No more off-white-with-rounded-cards generic SaaS energy.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Modules section: asymmetric 2-column layout with a simple nav list
  instead of 6 identical icon+title+desc cards (explicitly banned pattern)
- Differentiator: left-aligned, removed teal pill badges
- Screenshots heading: left-aligned to break all-centered monotony
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Removed: fake social proof numbers, testimonials (no clients),
pain/solution grid, trust badges, "why choose us", 11 sections
of repetitive centered-tag-title-grid layout.

Now: hero + product screenshots + module grid + differentiator + CTA.
Let the real product screenshots do the selling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

New pages (11): about, blog, changelog, compare, faq, football,
gymnastics, martial-arts, partners, privacy, terms

Technical/SEO: sitemap.xml, robots.txt, manifest.json, Open Graph
meta tags, canonical URLs on all existing pages

UX enhancements (main.js rewrite): sticky CTA bar, exit-intent popup,
back-to-top button, pricing calculator, enhanced mobile drawer,
micro-interactions, View Transitions API, social proof counters

Homepage additions: social proof stats section, testimonials section,
data-sticky-cta and data-exit-intent attributes

Pricing page: interactive cost calculator with slider

Contact page: simplified to 3 fields, pre-filled WhatsApp message

CSS: new styles for FAQ accordion, comparison table, changelog
timeline, blog cards, about values, partner tiers, newsletter CTA,
testimonials, sticky CTA, exit modal, back-to-top, micro-interactions
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Sweep index.html, pricing.html, and pages.css — replace every emoji
(pain cards, trust badges, tool icons, swimming teaser, value strip,
comparison table checks, CSS pseudo-element content) with proper SVG.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace generic placeholder cards with actual plan data:
- Platform % Only: 0 EGP/12%, Starter: 1,000 EGP/7.5%
- Enterprise: 3,500 EGP/5%, Professional: 10,000 EGP/3.5%
Add detailed comparison table, FAQ section, value strip.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- New dedicated swimming.html targeting lane rental & carnet management pain
- Grid system (space assignment) as hero feature for swimming academies
- Real app screenshots integrated into index.html product showcase carousel
- Swimming teaser banner on homepage linking to dedicated page
- Nav updated across all pages with "السباحة" link
- 21 app screenshots added (dashboard, facilities, pricing, grid, etc.)
- Swimming-specific CSS: pool hero, lane visualization, carnet cards
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Complete visual overhaul targeting Egyptian academy owners. Light theme with
Navy/Teal/Gold palette, Cairo font, RTL-first. New pages structure:
index (12 sections), features, pricing, contact. Removed old per-module pages.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>