PageSourceSearch

https://proxme.ai/landing

html proxme.ai collected 2026-10-05 15:45:53 UTC 96,807 bytes, 1,963 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Proxme — Your AI digital self</title>
7  <meta name="description" content="Proxme replies to emails, messages and calls on your behalf — schedules appointments, quotes prices, sends reminders. Your identical digital self, 24/7.">
8  <link rel="canonical" href="https://proxme.ai/">
9  <meta name="theme-color" content="#e8533a">
10  <meta property="og:type" content="website">
11  <meta property="og:url" content="https://proxme.ai/">
12  <meta property="og:title" content="Proxme — Your AI digital self">
13  <meta property="og:description" content="Replies to emails, messages and calls on your behalf — 24/7, from your real email and number.">
14  <meta property="og:image" content="https://proxme.ai/proxme-icon-512.png">
15  <meta name="twitter:card" content="summary_large_image">
16  <link rel="manifest" href="/manifest.json">
17  <link rel="icon" type="image/png" sizes="192x192" href="/proxme-icon-192.png">
18  <link rel="apple-touch-icon" href="/proxme-icon-180.png">
19  <link href="/fonts/inter.css" rel="stylesheet">
20  
20<script src="/translations.js"></script>
20
21
22<script>
23// ── Proxme Geo Detection ─────────────────────────────────────────────────────
24// Detects visitor region and adapts language, pricing, and content accordingly.
25// GULF: AE, SA, QA, KW, BH, OM → Arabic, MENA pricing, WhatsApp first
26// LATAM: MX, CO, AR, CL, PE, BR, VE, EC, BO, PY, UY, GT, HN, SV, NI, CR, PA, DO, CU, PR → Spanish, US pricing
27// US HISPANIC: US → check browser language for Spanish
28// DEFAULT: English, US pricing
29
30window.PROXME_GEO = {
31  region: 'global', // gulf | latam | global
32  country: '',
33  pricingMultiplier: 1, // 1 = US pricing, 1.5 = MENA pricing
34  defaultLang: 'en',
35};
36
37const GULF = ['AE','SA','QA','KW','BH','OM'];
38const LATAM = ['MX','CO','AR','CL','PE','BR','VE','EC','BO','PY','UY','GT','HN','SV','NI','CR','PA','DO','CU','PR'];
39const MENA_REST = ['EG','JO','LB','IQ','YE','LY','TN','DZ','MA'];
40
41async function detectGeo() {
42  try {
43    const cached = sessionStorage.getItem('proxme_geo');
44    if (cached) {
45      const data = JSON.parse(cached);
46      applyGeo(data.country, data.lang);
47      return;
48    }
49    const res = await fetch('/geo', { signal: AbortSignal.timeout(3000) });
50    const data = await res.json();
51    const cc = data.country_code || '';
52    sessionStorage.setItem('proxme_geo', JSON.stringify({ country: cc, lang: detectLangFromCountry(cc) }));
53    applyGeo(cc, detectLangFromCountry(cc));
54  } catch(e) {
55    // Default to global — no change
56  }
57}
58
59function detectLangFromCountry(cc) {
60  if (GULF.includes(cc) || MENA_REST.includes(cc)) return 'ar';
61  if (LATAM.includes(cc)) return 'es';
62  // US — check browser language
63  if (cc === 'US') {
64    const browserLang = (navigator.language || '').toLowerCase();
65    if (browserLang.startsWith('es')) return 'es';
66  }
67  return 'en';
68}
69
70function applyGeo(cc, lang) {
71  window.PROXME_GEO.country = cc;
72  window.PROXME_GEO.defaultLang = lang;
73
74  if (GULF.includes(cc)) {
75    window.PROXME_GEO.region = 'gulf';
76    window.PROXME_GEO.pricingMultiplier = 1.5; // $29/$49/$79
77  } else if (LATAM.includes(cc)) {
78    window.PROXME_GEO.region = 'latam';
79    window.PROXME_GEO.pricingMultiplier = 1; // US pricing
80  } else {
81    window.PROXME_GEO.region = 'global';
82    window.PROXME_GEO.pricingMultiplier = 1;
83  }
84
85  // Apply locale preference
86  const savedLang = localStorage.getItem('proxme_lang');
87  if (!savedLang && typeof ProxmeI18n !== 'undefined') {
88    ProxmeI18n.setLang(lang);
89  } else if (!savedLang && typeof window.applyLang === 'function') {
90    window.applyLang(lang);
91  }
92
93  // Dispatch event for other scripts to listen
94  window.dispatchEvent(new CustomEvent('proxme:geo', { detail: window.PROXME_GEO }));
95}
96
97// Run on load
98if (document.readyState === 'loading') {
99  document.addEventListener('DOMContentLoaded', detectGeo);
100} else {
101  detectGeo();
102}
103</script>
103
104
105  
105<script src="/i18n.js"></script>
105
106  <style nonce="zyLqhKurT7u1uTx3GBUbxA==">
107    .proxme-lang-btn{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid rgba(255,255,255,0.15);background:transparent;font-family:'Inter',sans-serif;color:rgba(255,255,255,0.5);transition:all 0.2s}
108    .proxme-lang-btn.active{background:var(--accent);color:white;border-color:var(--accent)}
109    .proxme-lang-btn:hover:not(.active){color:white;border-color:rgba(255,255,255,0.3)}
110    .proxme-lang-switcher{display:flex;gap:4px}
111    :root {
112      --bg: #0a0a0a;
113      --surface: #111111;
114      --surface2: #1a1a1a;
115      --border: rgba(255,255,255,0.08);
116      --border2: rgba(255,255,255,0.12);
117      --text: #ffffff;
118      --text-secondary: rgba(255,255,255,0.6);
119      --text-tertiary: rgba(255,255,255,0.35);
120      --accent: #e8533a;
121      --accent-hover: #d44328;
122      --accent-glow: rgba(232,83,58,0.15);
123    }
124    * { margin:0; padding:0; box-sizing:border-box; }
125    html { scroll-behavior:smooth; }
126    body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
127    a { color:inherit; text-decoration:none; }
128
129    /* NAV */
130    nav { position:fixed; top:0; left:0; right:0; z-index:100; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; background:rgba(10,10,10,0.85); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
131    .nav-logo { font-size:20px; font-weight:600; letter-spacing:-0.5px; }
132    .nav-logo span { color:var(--accent); }
133    .nav-links { display:flex; align-items:center; gap:32px; }
134    .nav-link { font-size:13px; color:var(--text-secondary); transition:color 0.2s; }
135    .nav-link:hover { color:var(--text); }
136    .nav-cta { background:var(--accent); color:white; padding:8px 20px; border-radius:8px; font-size:13px; font-weight:500; transition:background 0.2s; }
137    .nav-cta:hover { background:var(--accent-hover); }
138
139    /* HERO */
140    .hero { min-height:50vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 24px 40px; position:relative; overflow:hidden; }
141    .hero::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:800px; height:600px; background:radial-gradient(ellipse at center, rgba(232,83,58,0.12) 0%, transparent 70%); pointer-events:none;  }
142    
143
144    .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(232,83,58,0.1); border:1px solid rgba(232,83,58,0.25); border-radius:100px; padding:6px 16px; font-size:12px; font-weight:500; color:var(--accent); letter-spacing:0.5px; margin-bottom:32px; }
145    .hero-eyebrow-dot { width:6px; height:6px; background:var(--accent); border-radius:50%;  }
146    
147
148    .hero-title { font-size:clamp(32px,5vw,64px); font-weight:700; line-height:1.0; letter-spacing:-2px; margin-bottom:16px; }
149    .hero-title .built-for { color:var(--text-secondary); font-weight:300; }
150    .hero-title .rotating-word { color:var(--accent); display:block; text-align:center; }
151
152    .hero-sub { font-size:clamp(16px,1.8vw,20px); color:var(--text-secondary); max-width:720px; line-height:1.7; margin:0 auto 40px; font-weight:300; }
153    .hero-tagline { font-size:clamp(14px,1.4vw,16px); color:rgba(232,83,58,0.8); font-weight:500; margin-top:12px; letter-spacing:0.2px; }
154    .hero-sub strong { color:var(--text); font-weight:500; }
155
156    .hero-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:64px; }
157    .btn-primary { background:var(--accent); color:white; padding:14px 32px; border-radius:10px; font-size:15px; font-weight:500; transition:all 0.2s; display:inline-block; }
158    .btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); }
159    .btn-secondary { background:transparent; color:var(--text-secondary); border:1px solid var(--border2); padding:14px 32px; border-radius:10px; font-size:15px; font-weight:400; transition:all 0.2s; display:inline-block; }
160    .btn-secondary:hover { border-color:rgba(255,255,255,0.25); color:var(--text); }
161
162    .hero-note { font-size:12px; color:var(--text-tertiary); }
163
164    /* FEATURE SHOWCASE */
165    .showcase { padding:80px 24px; max-width:1100px; margin:0 auto; }
166    .section-label { font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
167    .section-title { font-size:clamp(28px,4vw,48px); font-weight:700; letter-spacing:-1.5px; line-height:1.1; margin-bottom:16px; }
168    .section-sub { font-size:16px; color:var(--text-secondary); max-width:600px; line-height:1.7; margin-bottom:48px; }
169
170    .showcase-tabs { display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px; margin-bottom:32px; flex-wrap:wrap; }
171    .showcase-tab { flex:1; min-width:120px; padding:10px 16px; border-radius:9px; font-size:13px; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:all 0.2s; text-align:center; border:none; background:transparent; font-family:'Inter',sans-serif; }
172    .showcase-tab.active { background:var(--surface2); color:var(--text); border:1px solid var(--border2); }
173    .showcase-tab:hover:not(.active) { color:var(--text); }
174
175    .showcase-panel { display:none; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
176    .showcase-panel.active { display:flex; flex-direction:column; }
177    .panel-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
178    .panel-header-dots { display:flex; gap:6px; }
179    .panel-header-dot { width:10px; height:10px; border-radius:50%; }
180    .panel-header-title { font-size:12px; color:var(--text-tertiary); margin-left:8px; }
181    .panel-messages { padding:20px; display:flex; flex-direction:column; gap:12px; min-height:300px; }
182    .msg { max-width:75%; padding:12px 16px; border-radius:14px; font-size:14px; line-height:1.5; opacity:0;  }
183    .msg.incoming { background:var(--surface2); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:4px; align-self:flex-start; }
184    .msg.outgoing { background:var(--accent); color:white; border-bottom-right-radius:4px; align-self:flex-end; }
185    .msg.system { background:rgba(232,83,58,0.08); border:1px solid rgba(232,83,58,0.2); color:var(--accent); font-size:12px; align-self:center; padding:8px 14px; border-radius:100px; }
186    
187    .typing { display:flex; align-items:center; gap:4px; padding:12px 16px; background:var(--surface2); border:1px solid var(--border); border-radius:14px; border-bottom-left-radius:4px; align-self:flex-start; width:60px; }
188    .typing span { width:6px; height:6px; background:var(--text-tertiary); border-radius:50%;  }
189    .typing span:nth-child(2) { animation-delay:0.2s; }
190    .typing span:nth-child(3) { animation-delay:0.4s; }
191    
192
193    /* HOW IT WORKS */
194    .how { padding:80px 24px; max-width:1100px; margin:0 auto; }
195    .steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
196    .step-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; transition:border-color 0.2s; }
197    .step-card:hover { border-color:var(--border2); }
198    .step-num { font-size:11px; font-weight:600; letter-spacing:2px; color:var(--accent); text-transform:uppercase; margin-bottom:16px; }
199    .step-title { font-size:20px; font-weight:600; letter-spacing:-0.5px; margin-bottom:10px; }
200    .step-desc { font-size:14px; color:var(--text-secondary); line-height:1.65; }
201
202    /* CHANNELS */
203    .channels { padding:80px 24px; max-width:1100px; margin:0 auto; }
204    .channels-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:48px; }
205    .channel-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; transition:all 0.2s; }
206    .channel-card:hover { border-color:var(--border2); transform:translateY(-2px); }
207    .channel-name { font-size:18px; font-weight:600; margin-bottom:8px; }
208    .channel-desc { font-size:14px; color:var(--text-secondary); line-height:1.65; }
209    .channel-tag { display:inline-block; font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:100px; margin-bottom:16px; }
210    .tag-live { background:rgba(74,190,100,0.1); color:#4abe64; border:1px solid rgba(74,190,100,0.2); }
211
212    /* PRICING TEASER */
213    .pricing-teaser { padding:80px 24px; max-width:700px; margin:0 auto; text-align:center; }
214    .price-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:40px 0; text-align:left; }
215    .price-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px; }
216    .price-card.featured { border-color:var(--accent); }
217    .price-name { font-size:13px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
218    .price-amount { font-size:36px; font-weight:700; letter-spacing:-1px; margin-bottom:4px; }
219    .price-period { font-size:12px; color:var(--text-tertiary); margin-bottom:16px; }
220    .price-features { list-style:none; display:flex; flex-direction:column; gap:7px; }
221    .price-features li { font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:8px; }
222    .price-features li::before { content:''; width:4px; height:4px; background:var(--accent); border-radius:50%; flex-shrink:0; }
223
224    /* CTA */
225    .cta-section { padding:100px 24px; text-align:center; position:relative; overflow:hidden; }
226    .cta-section::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:400px; background:radial-gradient(ellipse,rgba(232,83,58,0.1) 0%,transparent 70%); pointer-events:none; }
227    .cta-title { font-size:clamp(36px,5vw,64px); font-weight:700; letter-spacing:-2px; line-height:1.05; margin-bottom:20px; }
228    .cta-sub { font-size:16px; color:var(--text-secondary); margin-bottom:36px; }
229
230    /* FOOTER */
231    footer { border-top:1px solid var(--border); padding:32px 40px; display:flex; justify-content:space-between; align-items:center; max-width:100%; }
232    .footer-logo { font-size:16px; font-weight:600; }
233    .footer-logo span { color:var(--accent); }
234    .footer-links { display:flex; gap:24px; }
235    .footer-links a { font-size:12px; color:var(--text-tertiary); transition:color 0.2s; }
236    .footer-links a:hover { color:var(--text-secondary); }
237
238    /* SCROLL REVEAL */
239    .reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
240    .reveal.visible { opacity:1; transform:translateY(0); }
241
242    /* RESPONSIVE */
243    /* SHOWCASE */
244    .showcase { padding:80px 24px; max-width:1200px; margin:0 auto; }
245    .user-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:32px; }
246    .user-tab { padding:8px 16px; border-radius:100px; font-size:12px; font-weight:500; color:rgba(255,255,255,0.5); cursor:pointer; transition:all 0.2s; border:1px solid rgba(255,255,255,0.1); background:transparent; font-family:'Inter',sans-serif; white-space:nowrap; }
247    .user-tab.active { background:#e8533a; color:white; border-color:#e8533a; }
248    .user-tab:hover:not(.active) { border-color:rgba(255,255,255,0.25); color:white; }
249
250    @media(max-width:768px) {
251      nav { padding:0 20px; }
252      .nav-links { display:none; }
253      .hero-title { letter-spacing:-1.5px; }
254      .hero-title .rotating-word { min-width:0; display:block; }
255      .steps-grid { grid-template-columns:1fr; }
256      .channels-grid { grid-template-columns:1fr; }
257      .price-cards { grid-template-columns:1fr; }
258      .user-tabs { overflow-x:auto; flex-wrap:nowrap; }
259      .phones-row { grid-template-columns:1fr 1fr; gap:8px; }
260      .phone-wrap:last-child { grid-column: 1 / -1; max-width:50%; margin:0 auto; }
261      footer { flex-direction:column; gap:16px; text-align:center; padding:24px; }
262    }
263    .phones-row { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
264    .phone-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; }
265    .phone-label { font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.35); }
266    .phone-frame { width:100%; aspect-ratio:9/16; max-height:420px; background:#111111; border:1px solid rgba(255,255,255,0.08); border-radius:24px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(0,0,0,0.4); }
267    .phone-header { padding:10px 12px; display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,0.06); background:#1a1a1a; flex-shrink:0; }
268    .phone-dots { display:flex; gap:4px; }
269    .phone-dots span { width:6px; height:6px; border-radius:50%; display:block; }
270    .phone-app-name { font-size:10px; font-weight:600; color:rgba(255,255,255,0.35); letter-spacing:0.5px; margin-left:4px; }
271    .phone-messages { flex:1; padding:10px 8px; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
272    .pmsg { max-width:85%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.5; opacity:1; word-break:break-word; transition:opacity 0.3s ease; }
273    .pmsg.in { background:rgba(255,255,255,0.08); color:#ffffff; border-bottom-left-radius:3px; align-self:flex-start; }
274    .pmsg.out { background:#e8533a; color:white; border-bottom-right-radius:3px; align-self:flex-end; }
275    .pmsg.sy { background:rgba(232,83,58,0.1); border:1px solid rgba(232,83,58,0.2); color:#e8533a; font-size:9px; align-self:center; padding:4px 10px; border-radius:100px; text-align:center; max-width:90%; }
276    .pmsg.cal { background:rgba(74,124,111,0.12); border:1px solid rgba(74,124,111,0.3); color:#2d6a4f; font-size:11px; align-self:center; padding:8px 14px; border-radius:12px; text-align:center; max-width:92%; font-weight:500; }
277    .pmsg.wa-in { background:#202c33; color:#e9edef; border-bottom-left-radius:3px; align-self:flex-start; }
278    .pmsg.wa-out { background:#005c4b; color:#e9edef; border-bottom-right-radius:3px; align-self:flex-end; }
279    .pmsg.ig-in { background:#262626; color:#fafafa; border-bottom-left-radius:3px; align-self:flex-start; }
280    .pmsg.ig-out { background:#3797f0; color:white; border-bottom-right-radius:3px; align-self:flex-end; }
281    .pmsg.vo-in { background:#16213e; color:#a8b2d8; border-bottom-left-radius:3px; align-self:flex-start; font-style:italic; }
282    .pmsg.vo-out { background:#0f3460; color:#e0e0e0; border-bottom-right-radius:3px; align-self:flex-end; }
283    .ptyping { display:flex; align-items:center; gap:4px; padding:10px 14px; background:rgba(255,255,255,0.08); border-radius:12px; border-bottom-left-radius:3px; align-self:flex-start; width:36px; flex-shrink:0; opacity:1; }
284    .ptyping span { width:4px; height:4px; background:rgba(255,255,255,0.35); border-radius:50%;  display:block; }
285    .ptyping span:nth-child(2){animation-delay:0.2s}
286    .ptyping span:nth-child(3){animation-delay:0.4s}
287    
288    
289
290    /* SINGLE PHONE */
291    .single-phone-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:380px; margin:0 auto; }
292    .single-phone-label { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.4); }
293    .single-phone-frame { width:100%; background:#111111; border:1px solid rgba(255,255,255,0.1); border-radius:32px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.6); min-height:480px; }
294    .single-phone-header { padding:14px 16px; display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; transition:background 0.4s; }
295    .single-phone-app { font-size:12px; font-weight:600; letter-spacing:0.5px; margin-left:6px; transition:color 0.4s; }
296    .single-phone-messages { flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:8px; overflow:hidden; transition:opacity 0.4s, background 0.4s; }
297
298    /* ── CASA CSP remediation — manifesto + product card classes ── */
299    .manifesto-section{background:#0a0908;padding:60px 24px 0;position:relative}
300    .manifesto-inner{max-width:800px;margin:0 auto}
301    .manifesto-header{text-align:cente
301r;margin-bottom:60px}
302    .manifesto-title{font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-1.5px;color:#f5f1ed;line-height:1.1;margin-bottom:20px}
303    .manifesto-sub{font-size:clamp(15px,1.8vw,18px);color:#9a9590;line-height:1.8;max-width:560px;margin:0 auto}
304    .manifesto-cta-highlight{color:#e8533a;font-weight:600}
305    .manifesto-divider{height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,0.08),transparent);margin-bottom:60px}
306    .manifesto-divider-mid{height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,0.08),transparent);margin:60px 0}
307    .manifesto-product-block{margin-bottom:24px}
308    .manifesto-video-wrap{margin-bottom:48px}
309    .manifesto-demo-iframe{width:100%;height:720px;max-height:88vh;border:none;border-radius:20px;overflow:hidden;display:block;background:#000}
310    @media (max-width:600px){ .manifesto-demo-iframe{height:560px} }
311    .manifesto-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:#e8533a;margin-bottom:20px}
312    .manifesto-body{font-size:clamp(14px,1.6vw,16px);color:#9a9590;line-height:1.9}
313    .manifesto-highlight{color:#f5f1ed}
314    .manifesto-highlight-medium{color:#f5f1ed;font-weight:500}
315    .manifesto-highlight-bold{color:#f5f1ed;font-weight:600}
316    .manifesto-detect-list{color:#6b6560;font-size:13px;line-height:2}
317    .manifesto-closing{color:#9a9590}
318    .product-cards-row{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
319    .product-card-col{flex:1;min-width:280px}
320    .product-card-cta{display:block;border:1.5px solid rgba(232,83,58,0.4);border-radius:14px;padding:20px 24px;font-size:16px;font-weight:600;color:#f5f1ed;text-decoration:none;text-align:center;background:rgba(232,83,58,0.06);transition:all 0.2s;margin-bottom:20px}
321    .product-feature-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
322    .product-feature-item{font-size:13px;color:#9a9590;display:flex;align-items:flex-start;gap:8px}
323    .product-feature-bullet{color:#e8533a;flex-shrink:0}
324    .landing-footer-copyright{text-align:center;font-size:11px;color:var(--ink-lighter);padding:8px 0}
325    .typing-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.3);display:block}
326
327  /* ── Global font enforcement ── */
328  *, *::before, *::after {
329    font-family: 'Inter', sans-serif !important;
330  }
331</style>
332  <link rel="stylesheet" href="/animations.css">
333      <link href="/fonts/inter.css" rel="stylesheet">
334<style nonce="zyLqhKurT7u1uTx3GBUbxA==">
335.pricing-teaser, .final-cta, .faq { padding:0 24px 80px; max-width:900px; margin:0 auto; text-align:center; }
336.pricing-teaser .price-cards { text-align:left; max-width:700px; margin:32px auto; }
337.final-cta { max-width:700px; }
338.faq-list { text-align:left; display:flex; flex-direction:column; gap:12px; margin-top:32px; }
339.faq-item { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color 0.2s; }
340.faq-item:hover { border-color:var(--border2); }
341.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:none; color:var(--text); font-size:15px; font-weight:500; text-align:left; padding:18px 20px; cursor:pointer; font-family:inherit; }
342.faq-icon { color:var(--accent); font-size:18px; font-weight:300; flex-shrink:0; transition:transform 0.2s; }
343.faq-item.open .faq-icon { transform:rotate(45deg); }
344.faq-a { max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease; padding:0 20px; font-size:14px; color:var(--text-secondary); line-height:1.7; text-align:left; }
345.faq-item.open .faq-a { max-height:240px; padding:0 20px 20px; }
346@media (max-width:640px) {
347  .pricing-teaser .price-cards { grid-template-columns:1fr; }
348}
349</style>
350
351</head>
352<body>
353
354<nav>
355  <a href="/" class="nav-logo">Prox<span>me</span></a>
356  <div class="nav-links">
357    <a href="#how" class="nav-link" data-i18n="nav_how">How it works</a>
358    <a href="#channels" class="nav-link" data-i18n="nav_channels">Channels</a>
359    <a href="/pricing" class="nav-link" data-i18n="nav_pricing">Pricing</a>
360    <a href="/login" class="nav-link" data-i18n="nav_signin">Sign in</a>
361  </div>
362  <div class="proxme-lang-switcher"></div>
363  <a href="#get-started-section" onclick="document.getElementById('get-started-section').scrollIntoView({behavior:'smooth'});return false;" class="nav-cta" data-i18n="nav_getstarted">Get started</a>
364</nav>
365
366<!-- HERO -->
367<section class="hero">
368  <div class="hero-eyebrow"><div class="hero-eyebrow-dot"></div><span data-i18n="land_eyebrow">Your AI is ready</span></div>
369  <h1 class="hero-title">
370    <span class="built-for" data-i18n="land_built_for">Built for </span><br>
371    <span class="rotating-word" id="rotating-word">Professionals</span>
372  </h1>
373</section>
374
375
376<!-- ── PROXME HERO ANIMATION ─────────────────────────────────────────────── -->
377<style nonce="zyLqhKurT7u1uTx3GBUbxA==">
378.prx-showcase {
379  padding: 0 24px 80px;
380  max-width: 1000px;
381  margin: 0 auto;
382}
383.prx-showcase-label {
384  text-align: center;
385  font-size: 11px;
386  font-weight: 600;
387  letter-spacing: 2px;
388  text-transform: uppercase;
389  color: var(--accent);
390  margin-bottom: 40px;
391}
392.prx-stage {
393  display: grid;
394  grid-template-columns: 1fr 80px 1fr;
395  gap: 16px;
396  align-items: center;
397  min-height: 120px;
398}
399/* RTL support for Arabic */
400[dir="rtl"] .prx-stage {
401  direction: rtl;
402}
403.prx-incoming, .prx-outgoing {
404  display: flex;
405  flex-direction: column;
406  gap: 8px;
407}
408.prx-outgoing {
409  align-items: flex-end;
410}
411[dir="rtl"] .prx-outgoing {
412  align-items: flex-start;
413}
414.prx-channel-badge {
415  display: inline-flex;
416  align-items: center;
417  gap: 6px;
418  font-size: 11px;
419  font-weight: 600;
420  color: rgba(245,241,237,0.4);
421  letter-spacing: 0.5px;
422  text-transform: uppercase;
423  margin-bottom: 4px;
424}
425.prx-channel-icon {
426  width: 18px;
427  height: 18px;
428  border-radius: 4px;
429  display: flex;
430  align-items: center;
431  justify-content: center;
432  font-size: 11px;
433}
434.prx-bubble-in {
435  background: rgba(255,255,255,0.07);
436  border: 1px solid rgba(255,255,255,0.1);
437  border-radius: 16px 16px 16px 4px;
438  padding: 12px 16px;
439  font-size: 14px;
440  color: rgba(245,241,237,0.85);
441  line-height: 1.5;
442  max-width: 280px;
443  opacity: 0;
444  transform: translateX(-12px);
445  transition: opacity 0.4s ease, transform 0.4s ease;
446}
447[dir="rtl"] .prx-bubble-in {
448  border-radius: 16px 16px 4px 16px;
449  transform: translateX(12px);
450}
451.prx-bubble-in.visible {
452  opacity: 1;
453  transform: translateX(0);
454}
455.prx-bubble-out {
456  background: linear-gradient(135deg, #e8533a, #c23d26);
457  border-radius: 16px 16px 4px 16px;
458  padding: 12px 16px;
459  font-size: 14px;
460  color: white;
461  line-height: 1.7;
462  max-width: 280px;
463  opacity: 0;
464  transform: translateX(12px);
465  transition: opacity 0.4s ease, transform 0.4s ease;
466  text-align: right;
467  white-space: pre-line;
468}
469[dir="rtl"] .prx-bubble-out {
470  border-radius: 16px 16px 16px 4px;
471  transform: translateX(-12px);
472  text-align: left;
473}
474.prx-bubble-out.visible {
475  opacity: 1;
476  transform: translateX(0);
477}
478.prx-bubble-out.action {
479  background: rgba(232,83,58,0.12);
480  border: 1px solid rgba(232,83,58,0.3);
481  color: #e8533a;
482  font-size: 13px;
483  white-space: pre-line;
484  text-align: left;
485}
486.prx-center {
487  display: flex;
488  flex-direction: column;
489  align-items: center;
490  gap: 8px;
491}
492.prx-logo-pulse {
493  width: 80px;
494  height: 80px;
495  background: rgba(232,83,58,0.08);
496  border: 1px solid rgba(232,83,58,0.25);
497  border-radius: 16px;
498  display: flex;
499  flex-direction: column;
500  align-items: center;
501  justify-content: center;
502  gap: 6px;
503  position: relative;
504  transition: border-color 0.5s ease, box-shadow 0.5s ease;
505}
506.prx-logo-pulse.active {
507  border-color: rgba(232,83,58,0.6);
508  box-shadow: 0 0 20px rgba(232,83,58,0.2);
509}
510.prx-logo-pulse::before {
511  content: '';
512  position: absolute;
513  inset: -6px;
514  border: 1px solid rgba(232,83,58,0.15);
515  border-radius: 20px;
516  opacity: 0;
517  transition: opacity 0.5s ease;
518}
519.prx-logo-pulse.active::before {
520  opacity: 1;
521}
522.prx-pulse-logo {
523  font-size: 14px;
524  font-weight: 700;
525  letter-spacing: -0.5px;
526  color: #f5f1ed;
527}
528.prx-pulse-logo span {
529  color: #e8533a;
530}
531.prx-thinking {
532  display: flex;
533  gap: 4px;
534  align-items: center;
535  height: 12px;
536  opacity: 0;
537  transition: opacity 0.3s ease;
538}
539.prx-logo-pulse.active .prx-thinking {
540  opacity: 1;
541}
542.prx-thinking span {
543  width: 5px;
544  height: 5px;
545  background: #e8533a;
546  border-radius: 50%;
547  display: block;
548  animation: prxThinkDot 1.2s ease-in-out infinite;
549}
550.prx-thinking span:nth-child(2) { animation-delay: 0.2s; }
551.prx-thinking span:nth-child(3) { animation-delay: 0.4s; }
552@keyframes prxThinkDot {
553  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
554  30% { transform: translateY(-4px); opacity: 1; }
555}
556.prx-arrow {
557  font-size: 16px;
558  color: rgba(232,83,58,0.4);
559  opacity: 0;
560  transition: opacity 0.3s ease;
561}
562.prx-arrow.visible { opacity: 1; }
563.prx-progress {
564  display: flex;
565  justify-content: center;
566  gap: 6px;
567  margin-top: 32px;
568}
569.prx-dot {
570  width: 6px;
571  height: 6px;
572  border-radius: 50%;
573  background: rgba(245,241,237,0.15);
574  cursor: pointer;
575  transition: background 0.3s ease, transform 0.3s ease;
576}
577.prx-dot.active {
578  background: var(--accent);
579  transform: scale(1.3);
580}
581@media (max-width: 640px) {
582  .prx-stage { grid-template-columns: 1fr 48px 1fr; gap: 8px; }
583  .prx-bubble-in, .prx-bubble-out { font-size: 12px; padding: 10px 12px; max-width: 200px; }
584  .prx-logo-pulse { width: 60px; height: 60px; } .prx-pulse-logo { font-size: 11px; }
585}
586</style>
587
588<section class="prx-showcase">
589  <div class="prx-showcase-label" data-i18n="land_showcase_label">Live — right now</div>
590  <div class="prx-stage" id="prx-stage">
591    <div class="prx-incoming" id="prx-incoming">
592      <div class="prx-channel-badge" id="prx-channel-badge"></div>
593      <div class="prx-bubble-in" id="prx-bubble-in"></div>
594    </div>
595    <div class="prx-center">
596      <div class="prx-logo-pulse" id="prx-pulse">
597  <div class="prx-pulse-logo">Prox<span>me</span></div>
598  <div class="prx-thinking" id="prx-thinking">
599    <span></span><span></span><span></span>
600  </div>
601</div>
602      <div class="prx-arrow" id="prx-arrow">→</div>
603    </div>
604    <div class="prx-outgoing" id="prx-outgoing">
605      <div class="prx-bubble-out" id="prx-bubble-out"></div>
606    </div>
607  </div>
608  <div class="prx-progress" id="prx-progress"></div>
609</section>
610
611<script>
612(function() {
613  // Channel icons — the SAME SVG glyphs the app uses elsewhere (dashboard ICONS),
614  // keyed by the scenario's leading emoji. Only the icon is swapped; the label text
615  // after it is left exactly as-is. An emoji with no app icon (calendar, subscription,
616  // brief, etc.) simply keeps its emoji.
617  const PRX_ICONS = {
618    '📱': '<svg viewBox="0 0 24 24" width="18" height="18" fill="#25D366"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/></svg>',
619    '📞': '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#4a7c6f" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6.09 6.09l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>',
620    '📧': '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#888" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>',
621    '📸': '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="#C13584" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>',
622    '💬': '<svg viewBox="0 0 24 24" width="18" height="18"><rect width="24" height="24" rx="6" fill="#34C759"/><path fill="#ffffff" d="M12 5.5c-4 0-7.25 2.55-7.25 5.7 0 1.8 1.06 3.4 2.72 4.45-.13.92-.53 1.74-1.13 2.38-.16.17-.05.45.18.47 1.34.1 2.66-.35 3.66-1.16.55.12 1.13.19 1.82.19 4 0 7.25-2.55 7.25-5.7S16 5.5 12 5.5z"/></svg>',
623    messenger: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="#0084FF" d="M12 0C5.373 0 0 4.975 0 11.111c0 3.497 1.745 6.616 4.472 8.652V24l4.086-2.242c1.09.301 2.246.464 3.442.464 6.627 0 12-4.975 12-11.111S18.627 0 12 0zm1.193 14.963l-3.056-3.259-5.963 3.259 6.559-6.963 3.13 3.259 5.889-3.259-6.559 6.963z"/></svg>'
624  };
625
626  // ── Showcase scenarios — all 4 languages ────────────────────────────────────
627  const SCENARIOS = {
628    en: [
629      {
630        channel: '📱 WhatsApp', channelColor: '#25D366',
631        inMsg: 'Hi, are you available this week?',
632        outMsg: 'Hi! Yes, Wednesday and Thursday work great. Which do you prefer?',
633        type: 'reply'
634      },
635      {
636        channel: '📞 Missed Call', channelColor: '#e8533a',
637        inMsg: 'Unknown number called 3 times',
638        outMsg: '📋 Sarah Johnson — potential client, searched your business last week',
639        type: 'action'
640      },
641      {
642        channel: '📧 Email', channelColor: '#4285F4',
643        inMsg: 'Please review and sign the attached contract',
644        outMsg: '⚠️ Clause 8.2 — auto-renewal in 30 days. Review before signing.',
645        type: 'action'
646      },
647      {
648        channel: '📸 Instagram', channelColor: '#E1306C',
649        inMsg: 'How much do you charge?',
650        outMsg: 'Hi! Starting from $150. Want me to send you the full details? 😊',
651        type: 'reply'
652      },
653      {
654        channel: '💬 SMS', channelColor: '#34C759',
655        inMsg: 'Is this still available?',
656        outMsg: 'Yes it is! When would you like more information?',
657        type: 'reply'
658      },
659      {
660        channel: '☀️ Daily Brief', channelColor: '#e8533a',
661        inMsg: 'Good morning — 6:00 AM',
662        outMsg: '☐ Reply to Sarah — WhatsApp\n☐ Review contract — auto-renewal clause\n☐ Call back: John Martinez',
663        type: 'action'
664      },
665      {
666        channel: '📅 Calendar', channelColor: '#4285F4',
667        inMsg: 'Client requested appointment for Tuesday',
668        outMsg: '✅ Booked — Tuesday 2:00 PM. Confirmation sent to client.',
669        type: 'action'
670      },
671      {
672        channel: '💳 Subscription', channelColor: '#FF9500',
673        inMsg: 'Your trial ends in 3 days',
674        outMsg: '⚠️ $89/year renewal on Friday. Cancel before Thursday to avoid charge.',
675        type: 'action'
676      },
677      {
678        channel: '📊 Weekly Report', channelColor: '#e8533a',
679        inMsg: 'Sunday — end of week',
680        outMsg: '47 messages handled · 8 appointments booked · 3 contracts reviewed',
681        type: 'action'
682      },
683      {
684        channel: '🎂 Reminder', channelColor: '#FF9500',
685        inMsg: "Tomorrow is David's birthday",
686        outMsg: '🎉 Message sent to David — "Happy Birthday! Hope you have a great day!"',
687        type: 'action'
688      },
689      {
690        channel: '💬 Messenger', channelColor: '#0084FF',
691        inMsg: 'Do you offer payment plans?',
692        outMsg: 'Yes! We offer 3 and 6 month plans. Want me to send you the details?',
693        type: 'reply'
694      },
695      {
696        channel: '🧾 Invoice', channelColor: '#FF9500',
697        inMsg: 'Invoice #1042 — unpaid for 7 days',
698        outMsg: '📨 Follow-up sent to client — friendly payment reminder.',
699        type: 'action'
700      }
701    ],
702    es: [
703      {
704        channel: '📱 WhatsApp', channelColor: '#25D366',
705        inMsg: 'Hola, ¿estás disponible esta semana?',
706        outMsg: '¡Hola! Sí, el miércoles y jueves me quedan bien. ¿Cuál prefieres?',
707        type: 'reply'
708      },
709      {
710        channel: '📞 Llamada perdida', channelColor: '#e8533a',
711        inMsg: 'Número desconocido llamó 3 veces',
712        outMsg: '📋 Sarah Johnson — cliente potencial, buscó tu negocio la semana pasada',
713        type: 'action'
714      },
715      {
716        channel: '📧 Email', channelColor: '#4285F4',
717        inMsg: 'Por favor revisa y firma el contrato adjunto',
718        outMsg: '⚠️ Cláusula 8.2 — renovación automática en 30 días. Revisa antes de firmar.',
719        type: 'action'
720      },
721      {
722        channel: '📸 Instagram', channelColor: '#E1306C',
723        inMsg: '¿Cuánto cobras?',
724        outMsg: '¡Hola! Desde $150. ¿Quieres que te envíe todos los detalles? 😊',
725        type: 'reply'
726      },
727      {
728        channel: '💬 SMS', channelColor: '#34C759',
729        inMsg: '¿Sigue disponible?',
730        outMsg: '¡Sí! ¿Cuándo quieres más información?',
731        type: 'reply'
732      },
733      {
734        channel: '☀️ Resumen diario', channelColor: '#e8533a',
735        inMsg: 'Buenos días — 6:00 AM',
736        outMsg: '☐ Responder a Sarah — WhatsApp\n☐ Revisar contrato — cláusula de renovación\n☐ Devolver llamada: Juan Martínez',
737        type: 'action'
738      },
739      {
740        channel: '📅 Calendario', channelColor: '#4285F4',
741        inMsg: 'Cliente solicitó cita para el martes',
742        outMsg: '✅ Reservado — martes 2:00 PM. Confirmación enviada al cliente.',
743        type: 'action'
744      },
745      {
746        channel: '💳 Suscripción', channelColor: '#FF9500',
747        inMsg: 'Tu prueba termina en 3 días',
748        outMsg: '⚠️ Renovación de $89/año el viernes. Cancela antes del jueves.',
749        type: 'action'
750      },
751      {
752        channel: '📊 Informe semanal', channelColor: '#e8533a',
753        inMsg: 'Domingo — fin de semana',
754        outMsg: '47 mensajes gestionados · 8 citas reservadas · 3 contratos revisados',
755        type: 'action'
756      },
757      {
758        channel: '🎂 Recordatorio', channelColor: '#FF9500',
759        inMsg: 'Mañana es el cumpleaños de David',
760        outMsg: '🎉 Mensaje enviado a David — "¡Feliz cumpleaños! Que tengas un gran día!"',
761        type: 'action'
762      },
763      {
764        channel: '💬 Messenger', channelColor: '#0084FF',
765        inMsg: '¿Ofrecen planes de pago?',
766        outMsg: '¡Sí! Tenemos planes de 3 y 6 meses. ¿Te envío los detalles?',
767        type: 'reply'
768      },
769      {
770        channel: '🧾 Factura', channelColor: '#FF9500',
771        inMsg: 'Factura #1042 — impagada por 7 días',
772        outMsg: '📨 Seguimiento enviado al cliente — recordatorio de pago amistoso.',
773        type: 'action'
774      }
775    ],
776    ar: [
777      {
778        channel: '📱 واتساب', channelColor: '#25D366',
779        inMsg: 'مرحباً، هل أنت متاح هذا الأسبوع؟',
780        outMsg: 'أهلاً! نعم، الأربعاء والخميس مناسبان. أيهما تفضل؟',
781        type: 'reply'
782      },
783      {
784        channel: '📞 مكالمة فائتة', channelColor: '#e8533a',
785        inMsg: 'رقم مجهول اتصل 3 مرات',
786        outMsg: '📋 سارة جونسون — عميل محتمل، بحثت عن نشاطك التجاري الأسبوع الماضي',
787        type: 'action'
788      },
789      {
790        channel: '📧 البريد الإلكتروني', channelColor: '#4285F4',
791        inMsg: 'يرجى مراجعة العقد المرفق والتوقيع عليه',
792        outMsg: '⚠️ البند 8.2 — تجديد تلقائي خلال 30 يوماً. راجع قبل التوقيع.',
793        type: 'action'
794      },
795      {
796        channel: '📸 إنستغرام', channelColor: '#E1306C',
797        inMsg: 'كم تتقاضى؟',
798        outMsg: 'أهلاً! يبدأ السعر من $150. هل تريد أن أرسل لك التفاصيل الكاملة؟ 😊',
799        type: 'reply'
800      },
801      {
802        channel: '💬 رسالة نصية', channelColor: '#34C759',
803        inMsg: 'هل لا يزال متاحاً؟',
804        outMsg: 'نعم! متى تريد المزيد من المعلومات؟',
805        type: 'reply'
806      },
807      {
808        channel: '☀️ الملخص اليومي', channelColor: '#e8533a',
809        inMsg: 'صباح الخير — 6:00 صباحاً',
810        outMsg: '☐ الرد على سارة — واتساب\n☐ مراجعة العقد — بند التجديد التلقائي\n☐ إعادة الاتصال: جون مارتينيز',
811        type: 'action'
812      },
813      {
814        channel: '📅 التقويم', channelColor: '#4285F4',
815        inMsg: 'طلب العميل موعداً يوم الثلاثاء',
816        outMsg: '✅ تم الحجز — الثلاثاء 2:00 م. تم إرسال التأكيد للعميل.',
817        type: 'action'
818      },
819      {
820        channel: '💳 الاشتراك', channelColor: '#FF9500',
821        inMsg: 'تنتهي تجربتك المجانية بعد 3 أيام',
822        outMsg: '⚠️ تجديد بـ $89/سنة يوم الجمعة. ألغِ قبل الخميس لتجنب الرسوم.',
823        type: 'action'
824      },
825      {
826        channel: '📊 التقرير الأسبوعي', channelColor: '#e8533a',
827        inMsg: 'الأحد — نهاية الأسبوع',
828        outMsg: '47 رسالة تمت معالجتها · 8 مواعيد محجوزة · 3 عقود تمت مراجعتها',
829        type: 'action'
830      },
831      {
832        channel: '🎂 تذكير', channelColor: '#FF9500',
833        inMsg: 'غداً عيد ميلاد ديفيد',
834        outMsg: '🎉 تم إرسال رسالة لديفيد — "عيد ميلاد سعيد! أتمنى لك يوماً رائعاً!"',
835        type: 'action'
836      },
837      {
838        channel: '💬 ماسنجر', channelColor: '#0084FF',
839        inMsg: 'هل تقدمون خطط دفع؟',
840        outMsg: 'نعم! لدينا خطط لـ 3 و6 أشهر. هل تريد أن أرسل لك التفاصيل؟',
841        type: 'reply'
842      },
843      {
844        channel: '🧾 فاتورة', channelColor: '#FF9500',
845        inMsg: 'الفاتورة #1042 — غير مدفوعة منذ 7 أيام',
846        outMsg: '📨 تم إرسال متابعة للعميل — تذكير ودي بالدفع.',
847        type: 'action'
848      }
849    ],
850    zh: [
851      {
852        channel: '📱 WhatsApp', channelColor: '#25D366',
853        inMsg: '你好,这周你有空吗?',
854        outMsg: '你好!周三和周四都可以。你更喜欢哪天?',
855        type: 'reply'
856      },
857      {
858        channel: '📞 未接来电', channelColor: '#e8533a',
859        inMsg: '陌生号码拨打了3次',
860        outMsg: '📋 Sarah Johnson — 潜在客户,上周搜索了您的业务',
861        type: 'action'
862      },
863      {
864        channel: '📧 邮件', channelColor: '#4285F4',
865        inMsg: '请查看并签署附件合同',
866        outMsg: '⚠️ 第8.2条 — 30天内自动续约。签署前请仔细查看。',
867        type: 'action'
868      },
869      {
870        channel: '📸 Instagram', channelColor: '#E1306C',
871        inMsg: '你收费多少?',
872        outMsg: '你好!起价$150。需要我发送完整详情吗?😊',
873        type: 'reply'
874      },
875      {
876        channel: '💬 短信', channelColor: '#34C759',
877        inMsg: '还有吗?',
878        outMsg: '有的!您想了解更多信息吗?',
879        type: 'reply'
880      },
881      {
882        channel: '☀️ 每日简报', channelColor: '#e8533a',
883        inMsg: '早上好 — 上午6:00',
884        outMsg: '☐ 回复Sarah — WhatsApp\n☐ 审查合同 — 自动续约条款\n☐ 回电:John Martinez',
885        type: 'action'
886      },
887      {
888        channel: '📅 日历', channelColor: '#4285F4',
889        inMsg: '客户请求周二预约',
890        outMsg: '✅ 已预订 — 周二下午2:00。确认已发送给客户。',
891        type: 'action'
892      },
893      {
894        channel: '💳 订阅', channelColor: '#FF9500',
895        inMsg: '您的试用期还剩3天',
896        outMsg: '⚠️ 周五将收取$89/年续费。周四前取消可免费。',
897        type: 'action'
898      },
899      {
900        channel: '📊 周报', channelColor: '#e8533a',
901        inMsg: '周日 — 本周结束',
902        outMsg: '处理了47条消息 · 预订了8个约会 · 审查了3份合同',
903        type: 'action'
904      },
905      {
906        channel: '🎂 提醒', channelColor: '#FF9500',
907        inMsg: '明天是David的生日',
908        outMsg: '🎉 已向David发送消息 — "生日快乐!祝您有美好的一天!"',
909        type: 'action'
910      },
911      {
912        channel: '💬 Messenger', channelColor: '#0084FF',
913        inMsg: '你们提供分期付款吗?',
914        outMsg: '提供!我们有3个月和6个月的方案。需要我发送详情吗?',
915        type: 'reply'
916      },
917      {
918        channel: '🧾 发票', channelColor: '#FF9500',
919        inMsg: '发票#1042 — 已逾期7天未付款',
920        outMsg: '📨 已向客户发送跟进 — 友好的付款提醒。',
921        type: 'action'
922      }
923    ]
924  };
925
926  let currentIndex = 0;
927  let currentLang = 'en';
928  let timer = null;
929
930  function getCurrentLang() {
931    const saved = localStorage.getItem('proxme_lang');
932    if (saved && SCENARIOS[saved]) return saved;
933    const cached = sessionStorage.getItem('proxme_geo_cc');
934    if (cached) {
935      const mena = ['AE','SA','QA','KW','BH','OM','EG','JO','LB'];
936      const latam = ['MX','CO','AR','CL','PE','BR','VE','EC','BO'];
937      if (mena.includes(cached)) return 'ar';
938      if (latam.includes(cached)) return 'es';
939    }
940    const bl = (navigator.language || 'en').toLowerCase();
941    if (bl.startsWith('ar')) return 'ar';
942    if (bl.startsWith('es')) return 'es';
943    if (bl.startsWith('zh')) return 'zh';
944    return 'en';
945  }
946
947  function buildDots(count) {
948    const prog = document.getElementById('prx-progress');
949    if (!prog) return;
950    prog.innerHTML = '';
951    for (let i = 0; i < count; i++) {
952      const dot = document.createElement('div');
953      dot.className = 'prx-dot' + (i === 0 ? ' active' : '');
954      dot.onclick = () => { currentIndex = i; showScenario(i); resetTimer(); };
955      prog.appendChild(dot);
956    }
957  }
958
959  function updateDots(index) {
960    const dots = document.querySelectorAll('.prx-dot');
961    dots.forEach((d, i) => d.classList.toggle('active', i === index));
962  }
963
964  function showScenario(index) {
965    const lang = getCurrentLang();
966    const scenarios = SCENARIOS[lang] || SCENARIOS['en'];
967    const s = scenarios[index % scenarios.length];
968
969    const stage = document.getElementById('prx-stage');
970    const badgeEl = document.getElementById('prx-channel-badge');
971    const inEl = document.getElementById('prx-bubble-in');
972    const outEl = document.getElementById('prx-bubble-out');
973    const pulse = document.getElementById('prx-pulse');
974    const arrow = document.getElementById('prx-arrow');
975
976    if (!stage || !inEl || !outEl) return;
977
978    // RTL for Arabic
979    if (lang === 'ar') {
980      stage.setAttribute('dir', 'rtl');
981      if (arrow) arrow.textContent = '←';
982    } else {
983      stage.setAttribute('dir', 'ltr');
984      if (arrow) arrow.textContent = '→';
985    }
986
987    // Reset
988    inEl.classList.remove('visible');
989    outEl.classList.remove('visible');
990    if (arrow) arrow.classList.remove('visible');
991    if (pulse) pulse.classList.remove('active');
992
993    // Set content
994    if (badgeEl) {
995      const emoji = s.channel.split(' ')[0];
996      const label = s.channel.split(' ').slice(1).join(' ');
997      // Swap ONLY the icon: use the app's SVG for this channel, keep the label as-is.
998      // 💬 is used by both SMS and Messenger — disambiguate by the label.
999      let icon = PRX_ICONS[emoji] || emoji;
1000      if (emoji === '💬' && /messenger/i.test(label)) icon = PRX_ICONS.messenger;
1001      badgeEl.innerHTML = `<span class="prx-channel-icon">${icon}</span>${label}`;
1002    }
1003    inEl.textContent = s.inMsg;
1004    outEl.textContent = s.outMsg;
1005    outEl.className = 'prx-bubble-out' + (s.type === 'action' ? ' action' : '');
1006
1007    // Animate sequence — slow enough to read comfortably
1008    setTimeout(() => { inEl.classList.add('visible'); }, 300);
1009    setTimeout(() => { if (pulse) pulse.classList.add('active'); }, 1200);
1010    setTimeout(() => { if (arrow) arrow.classList.add('visible'); }, 1800);
1011    setTimeout(() => { outEl.classList.add('visible'); }, 2200);
1012
1013    updateDots(index);
1014  }
1015
1016  function resetTimer() {
1017    if (timer) clearInterval(timer);
1018    timer = setInterval(nextScenario, 7000);
1019  }
1020
1021  function nextScenario() {
1022    const lang = getCurrentLang();
1023    const scenarios = SCENARIOS[lang] || SCENARIOS['en'];
1024    currentIndex = (currentIndex + 1) % scenarios.length;
1025    showScenario(currentIndex);
1026  }
1027
1028  function initShowcase() {
1029    currentLang = getCurrentLang();
1030    const scenarios = SCENARIOS[currentLang] || SCENARIOS['en'];
1031    buildDots(scenarios.length);
1032    showScenario(0);
1033    resetTimer();
1034  }
1035
1036  // Listen for language changes
1037  window.addEventListener('proxme:lang', function(e) {
1038    const newLang = e.detail?.lang || 'en';
1039    if (SCENARIOS[newLang]) {
1040      currentIndex = 0;
1041      currentLang = newLang;
1042      buildDots(SCENARIOS[newLang].length);
1043      showScenario(0);
1044      resetTimer();
1045    }
1046  });
1047
1048  // Also listen for geo detection
1049  window.addEventListener('proxme:geo', function(e) {
1050    if (!localStorage.getItem('proxme_lang')) {
1051      initShowcase();
1052    }
1053  });
1054
1055  if (document.readyState === 'loading') {
1056    document.addEventListener('DOMContentLoaded', initShowcase);
1057  } else {
1058    initShowcase();
1059  }
1060})();
1061</script>
1061
1062<!-- ── END PROXME HERO ANIMATION ─────────────────────────────────────────── -->
1063
1064<!-- MANIFESTO SECTION -->
1065<section class="manifesto-section">
1066  <div class="manifesto-inner">
1067
1068    <!-- Header -->
1069    <div class="manifesto-header">
1070      <div class="manifesto-title">
1071        <span data-i18n="land_mani_title">Proxme — The Digital You</span>
1072      </div>
1073    </div>
1074
1075    <!-- Divider -->
1076    <div class="manifesto-divider"></div>
1077
1078    <!-- PROXME BUSINESS -->
1079    <div class="manifesto-product-block">
1080
1081    <!-- PROXME BUSINESS VIDEO -->
1082    <div class="manifesto-video-wrap">
1083      <iframe
1084        id="business-demo-iframe"
1085        src="/proxme-business-demo.html"
1086        class="manifesto-demo-iframe"
1087        scrolling="no"
1088        title="Proxme Business Demo"
1089      ></iframe>
1090    </div>
1091
1092      <div class="manifesto-label" data-i18n="land_b_label">Proxme Business</div>
1093      <div id="manifesto-business-body" class="manifesto-body">
1094        Many apps and platforms in the market today claim to be an AI agentic autonomous assistant. But are they?<br><br>
1095        Or are they just some weak AI glued to manual UX — working as answering machines? Just different pieces that can hardly connect to only one communication channel and yet still cannot perform without you babysitting them?<br><br>
1096        Can they truly integrate with your business and act exactly as you would on every channel available to your customers? Can they really handle back and forth conversation without crashing or freezing after the second sentence — when answering an incoming call or a chain of emails going in a different direction than planned?<br><br>
1097        Do these apps truly solve the call? Checking availability, qualifying leads, booking on the spot? Or are you just paying for a tool that works as an answering machine and writes nonsense into your calendar?<br><br>
1098        <span class="manifesto-highlight-medium">What makes Proxme Business different?</span><br><br>
1099        Proxme Business handles all channels your customers use to reach you — not only one channel — voice calls, emails, SMS, Instagram, Facebook Messenger.<br><br>
1100        It can be integrated with your business in less than 5 minutes. One click and it connects to your website, Facebook page, and Instagram. One click and it learns everything about your business — products, services, pricing, terms — and answers any question your customers ask.<br><br>
1101        It answers the incoming call, email, or message. Answers any question. Calculates prices as per your pricing policy. Provides quotes. Checks availability. Qualifies leads. Books on the spot.<br><br>
1102        Proxme Business is not a receptionist. It is a copy of you.<br>
1103        <span class="manifesto-highlight-bold">It is the Digital You.</span><br><br>
1104        <em class="manifesto-closing">Count on it while you are busy doing the actual work — or simply when you want time for yourself, to be with your beloved.</em>
1105      </div>
1106    </div>
1107
1108    <!-- Divider -->
1109    <div class="manifesto-divider-mid"></div>
1110
1111    <!-- PROXME PERSONAL -->
1112    <div class="manifesto-product-block">
1113
1114    <!-- PROXME PERSONAL VIDEO -->
1115    <div class="manifesto-video-wrap">
1116      <iframe
1117        id="personal-demo-iframe"
1118        src="/proxme-personal-demo.html"
1119        class="manifesto-demo-iframe"
1120        scrolling="no"
1121        title="Proxme Personal Demo"
1122      ></iframe>
1123    </div>
1124
1125      <div class="manifesto-label" data-i18n="land_p_label">Proxme Personal</div>
1126      <div id="manifesto-personal-body" class="manifesto-body">
1127        Which of these apps you have on your phone were truly built for you?<br>
1128        Are you the customer — or are you the <span class="manifesto-highlight-medium">PRODUCT?</span><br><br>
1129        Every app on your phone — the ones you check first thing in the morning, the ones that track your location, your habits, your relationships — were not built for you. They were built to sell <em>you</em> to the highest bidder.<br><br>
1130        But something is changing.<br><br>
1131        For the first time — the same technology used against you, now works for you. Not to track y
1131ou. Not to sell you. Not to distract you. But to <span class="manifesto-highlight-medium">serve you. Completely. Quietly. Every single day.</span><br><br>
1132        <span class="manifesto-highlight-medium">Proxme Personal is your personal assistant. Always on. Always on your side.</span><br><br>
1133        While you're in meetings, with your family, or simply living your life — Proxme is handling everything else.<br><br>
1134        It answers your missed calls, finds out who called and why, and briefs you in one sentence before you call back. It watches your inbox across every account — surfaces what matters, silently ignores what doesn't. It spots appointments, deliveries, travel confirmations, and deadlines buried in your emails — and adds them to your calendar before you even read the message. Every morning, it tells you exactly what needs your attention today and nothing else.<br><br>
1135        When someone needs a reply — it drafts one on your behalf, waits for your approval, and sends it from your real email. When a birthday is coming — it reminds you and drafts the message. When you have dinner plans — it suggests restaurants nearby, checks availability, and books the one you choose.<br><br>
1136        And it watches your back.<br><br>
1137        It warns you before you sign something you'll regret. Before a deadline passes. Before something costs you more than it should. It flags every email, document, or contract that is not in your favor.<br><br>
1138        <span class="manifesto-highlight">This is Proxme Personal.</span> We took their data — the same signals, the same intelligence — and pointed it in a different direction. Toward you. For you. On your side.<br><br>
1139        <span class="manifesto-highlight-medium">What Proxme Personal can detect and alert you for:</span><br>
1140        <span class="manifesto-detect-list">Security deposit overreach, rent control violations, eviction rights, HOA overreach, bills, deadlines, subscriptions, insurance, travel, contracts, scam calls, credit rate changes, bank fees, medical overcharges, debt collection rights, student loans, non-competes, wage theft, severance red flags, arbitration clauses, NDAs, auto-renewal traps, hidden fees, warranty violations, data sharing consents, illegal lease clauses, insurance denials, medical billing errors, HIPAA violations, IRS notices, court summons, government benefit changes, terms of service changes, data breaches, and privacy policy changes.</span><br><br>
1141        For the first time, technology that works like you own it. Because you do.<br><br>
1142        <em class="manifesto-closing">Your life. Organized. Protected. Under your control. Nothing slips.</em>
1143      </div>
1144    </div>
1145
1146    <!-- Divider -->
1147    <div class="manifesto-divider-mid"></div>
1148
1149<!-- TWO PRODUCT CARDS — HORIZONTAL -->
1150    <div id="get-started-section" class="product-cards-row">
1151
1152      <!-- Personal Card -->
1153      <div class="product-card-col">
1154        <a href="/login?type=personal" class="product-card-cta" onmouseover="this.style.borderColor='#e8533a';this.style.background='rgba(232,83,58,0.14)';" onmouseout="this.style.borderColor='rgba(232,83,58,0.4)';this.style.background='rgba(232,83,58,0.06)';">
1155          <span data-i18n="land_p_btn">Proxme Personal →</span>
1156        </a>
1157        <ul class="product-feature-list">
1158          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_p_f1">Nothing important ever slips through</span></li>
1159          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_p_f2">Know who called and why — before you call back</span></li>
1160          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_p_f3">Every appointment and event lands in your calendar automatically</span></li>
1161          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_p_f4">Deadlines and renewals caught before they cost you</span></li>
1162          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_p_f5">Know your rights — before you sign or agree to anything</span></li>
1163          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_p_f6">Your day — organized without you lifting a finger</span></li>
1164        </ul>
1165      </div>
1166
1167      <!-- Business Card -->
1168      <div class="product-card-col">
1169        <a href="/login?type=business" class="product-card-cta" onmouseover="this.style.borderColor='#e8533a';this.style.background='rgba(232,83,58,0.14)';" onmouseout="this.style.borderColor='rgba(232,83,58,0.4)';this.style.background='rgba(232,83,58,0.06)';">
1170          <span data-i18n="land_b_btn">Proxme Business →</span>
1171        </a>
1172        <ul class="product-feature-list">
1173          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_b_f1">Every inquiry answered instantly — calls, email, SMS, WhatsApp, Instagram, Messenger</span></li>
1174          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_b_f2">Quotes prepared and sent automatically</span></li>
1175          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_b_f3">Appointments booked based on your real availability</span></li>
1176          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_b_ebay">eBay seller account connected — buyer messages answered automatically</span></li>
1177          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_b_f4">Every lead followed up until they book or say no</span></li>
1178          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_b_f5">Invoices sent and payment reminders handled</span></li>
1179          <li class="product-feature-item"><span class="product-feature-bullet">✦</span> <span data-i18n="land_b_f6">Re-engages quiet clients before they forget you exist</span></li>
1180        </ul>
1181      </div>
1182
1183    </div>
1184
1185  </div>
1186</section>
1187
1188
1189
1190
1191<!-- HOW IT WORKS -->
1192<section class="how" id="how">
1193  <div class="section-label" data-i18n="land_how_label">How it works</div>
1194  <h2 class="section-title" data-i18n="land_how_title">Set up once.<br>Works forever.</h2>
1195  <p class="section-sub" data-i18n="land_how_sub">Three steps and your AI is live — handling every message while you focus on your work.</p>
1196
1197  <div class="steps-grid">
1198    <div class="step-card">
1199      <div class="step-num" data-i18n="land_step1_num">Step 01</div>
1200      <div class="step-title" data-i18n="land_step1_title">Train your Proxme</div>
1201      <div class="step-desc" data-i18n="land_step1_desc">Add your services, pricing, availability, and policies. Import directly from your website, a PDF file, or just a photo — Proxme reads it all automatically.</div>
1202    </div>
1203    <div class="step-card">
1204      <div class="step-num" data-i18n="land_step2_num">Step 02</div>
1205      <div class="step-title" data-i18n="land_step2_title">Connect your channels</div>
1206      <div class="step-desc" data-i18n="land_step2_desc">Link Gmail, Outlook, Instagram, Messenger, and WhatsApp in one click each. Your real accounts — no new numbers or emails.</div>
1207    </div>
1208    <div class="step-card">
1209      <div class="step-num" data-i18n="land_step3_num">Step 03</div>
1210      <div class="step-title" data-i18n="land_step3_title">Your AI goes live</div>
1211      <div class="step-desc" data-i18n="land_step3_desc">From that moment, every message is handled, every call answered, every booking confirmed — automatically, on your behalf.</div>
1212    </div>
1213  </div>
1214</section>
1215
1216<!-- CHANNELS -->
1217<section class="channels" id="channels">
1218  <div class="section-label" data-i18n="land_channels_label">Channels</div>
1219  <h2 class="section-title" data-i18n="land_channels_title">Every channel.<br>One AI.</h2>
1220  <p class="section-sub" data-i18n="land_channels_sub">Proxme connects to every place your customers reach you and handles it all from one dashboard.</p>
1221
1222  <div class="channels-grid">
1223    <div class="channel-card">
1224      <div class="channel-tag tag-live" data-i18n="land_live">Live</div>
1225      <div class="channel-name" data-i18n="land_ch_email_name">Email</div>
1226      <div class="channel-desc" data-i18n="land_ch_email_desc">Gmail, Outlook, Yahoo, iCloud, and custom domains. Proxme reads every email and replies from your real address on your behalf.</div>
1227    </div>
1228    <div class="channel-card">
1229      <div class="channel-tag tag-live" data-i18n="land_live">Live</div>
1230      <div class="channel-name" data-i18n="land_ch_wa_name">WhatsApp</div>
1231      <div class="channel-desc" data-i18n="land_ch_wa_desc">Your dedicated Proxme WhatsApp business number is active from day one. Share it everywhere — your AI handles every message.</div>
1232    </div>
1233    <div class="channel-card">
1234      <div class="channel-tag tag-live" data-i18n="land_live">Live</div>
1235      <div class="channel-name" data-i18n="land_ch_ig_name">Instagram DMs</div>
1236      <div class="channel-desc" data-i18n="land_ch_ig_desc">Connect your real Instagram account. Every DM, every inquiry, every booking request — handled automatically.</div>
1237    </div>
1238    <div class="channel-card">
1239      <div class="channel-tag tag-live" data-i18n="land_live">Live</div>
1240      <div class="channel-name" data-i18n="land_ch_msg_name">Messenger</div>
1241      <div class="channel-desc" data-i18n="land_ch_msg_desc">Connect your Facebook page. Proxme replies to every Messenger conversation on your behalf, instantly.</div>
1242    </div>
1243    <div class="channel-card">
1244      <div class="channel-tag tag-live" data-i18n="land_live">Live</div>
1245      <div class="channel-name" data-i18n="land_ch_voice_name">Voice calls</div>
1246      <div class="channel-desc" data-i18n="land_ch_voice_desc">Forward your calls to Proxme. Your AI answers on your behalf, collects details, and books appointments directly to your calendar.</div>
1247    </div>
1248    <div class="channel-card">
1249      <div class="channel-tag tag-live" data-i18n="land_live">Live</div>
1250      <div class="channel-name" data-i18n="land_ch_cal_name">Google / Apple Calendar</div>
1251      <div class="channel-desc" data-i18n="land_ch_cal_desc">Every booking confirmed by your AI lands directly in your calendar — with full client details, address, and service notes.</div>
1252    </div>
1253    <div class="channel-card">
1254      <div class="channel-tag tag-live" data-i18n="land_live">Live</div>
1255      <div class="channel-name" data-i18n="land_ch_lang_name">Multi-language</div>
1256      <div class="channel-desc" data-i18n="land_ch_lang_desc">Proxme understands and replies in your customer's language — and the entire app works in English, Spanish, Arabic, and Chinese.</div>
1257    </div>
1258  </div>
1259</section>
1260
1261<!-- PRICING TEASER -->
1262<section class="pricing-teaser" id="pricing-teaser">
1263  <div class="section-label" data-i18n="land_pricing_label">Pricing</div>
1264  <h2 class="section-title" data-i18n="land_pricing_title">Simple plans.<br>No surprises.</h2>
1265  <p class="section-sub" data-i18n="land_pricing_sub">Start free. Upgrade when you're ready for more.</p>
1266
1267  <a href="/pricing" class="btn-secondary" data-i18n="land_pricing_viewall">View full pricing →</a>
1268</section>
1269
1270<!-- CTA -->
1271<section class="final-cta">
1272  <h2 class="section-title" data-i18n="land_cta_title">Your AI is one click away.</h2>
1273  <p class="section-sub" style="margin:0 auto 32px" data-i18n="land_cta_sub">Set up in under five minutes. No new number. No new inbox. Just you — everywhere, all the time.</p>
1274  <a href="#get-started-section" onclick="document.getElementById('get-started-section').scrollIntoView({behavior:'smooth'});return false;" class="btn-primary" data-i18n="land_cta_btn">Start free →</a>
1275</section>
1276
1277<!-- FAQ -->
1278<section class="faq" id="faq">
1279  <div class="section-label" data-i18n="land_faq_label">FAQ</div>
1280  <h2 class="section-title" data-i18n="land_faq_title">Questions, answered.</h2>
1281
1282  <div class="faq-list">
1283    <div class="faq-item">
1284      <button class="faq-q" onclick="this.parentElement.classList.toggle('open')">
1285        <span data-i18n="land_faq_q1">Will it actually sound like me?</span>
1286        <span class="faq-icon">+</span>
1287      </button>
1288      <div class="faq-a" data-i18n="land_faq_a1">Proxme learns your tone, your services, and how you typically respond — every draft reflects your voice, not a generic AI script. You can review and adjust replies any time.</div>
1289    </div>
1290    <div class="faq-item">
1291      <button class="faq-q" onclick="this.parentElement.classList.toggle('open')">
1292        <span data-i18n="land_faq_q2">What if it gets something wrong?</span>
1293        <span class="faq-icon">+</span>
1294      </button>
1295      <div class="faq-a" data-i18n="land_faq_a2">You choose the confidence threshold. Anything Proxme isn't fully sure about goes to your Approvals queue for a quick check before it's sent — nothing goes out you haven't allowed.</div>
1296    </div>
1297    <div class="faq-item">
1298      <button class="faq-q" onclick="this.parentElement.classList.toggle('open')">
1299        <span data-i18n="land_faq_q3">Do I need a new phone number or email?</span>
1300        <span class="faq-icon">+</span>
1301      </button>
1302      <div class="faq-a" data-i18n="land_faq_a3">No. Proxme connects to your real Gmail, Outlook, Instagram, WhatsApp, and phone number — through your real accounts, not a new identity customers have to learn.</div>
1303    </div>
1304    <div class="faq-item">
1305      <button class="faq-q" onclick="this.parentElement.classList.toggle('open')">
1306        <span data-i18n="land_faq_q4">Is my data safe?</span>
1307        <span class="faq-icon">+</span>
1308      </button>
1309      <div class="faq-a" data-i18n="land_faq_a4">Your messages and account data are encrypted and never sold or shared. Proxme exists to work for you — not to monetize your information.</div>
1310    </div>
1311    <div class="faq-item">
1312      <button class="faq-q" onclick="this.parentElement.classList.toggle('open')">
1313        <span data-i18n="land_faq_q5">Can I see everything before it goes out?</span>
1314        <span class="faq-icon">+</span>
1315      </button>
1316      <div class="faq-a" data-i18n="land_faq_a5">Yes. Every reply Proxme sends is visible in your dashboard, and you control how much runs automatically versus how much you approve first.</div>
1317    </div>
1318    <div class="faq-item">
1319      <button class="faq-q" onclick="this.parentElement.classList.toggle('open')">
1320        <span data-i18n="land_faq_q6">How long does setup actually take?</span>
1321        <span class="faq-icon">+</span>
1322      </button>
1323      <div class="faq-a" data-i18n="land_faq_a6">Most users are live in under five minutes — connect your accounts, add your services or preferences, and Proxme starts working immediately.</div>
1324    </div>
1325    <div class="faq-item">
1326      <button class="faq-q" onclick="this.parentElement.classList.toggle('open')">
1327        <span data-i18n="land_faq_q7">What happens if I miss a call?</span>
1328        <span class="faq-icon">+</span>
1329      </button>
1330      <div class="faq-a" data-i18n="land_faq_a7">Proxme answers, finds out who's calling and why, and gives you a one-line summary — so you know exactly what it was about before you call back.</div>
1331    </div>
1332    <div class="faq-item">
1333      <button class="faq-q" onclick="this.parentElement.classList.toggle('open')">
1334        <span data-i18n="land_faq_q8">Can I turn it off or take over anytime?</span>
1335        <span class="faq-icon">+</span>
1336      </button>
1337      <div class="faq-a" data-i18n="land_faq_a8">Always. You're in control — pause any channel, take over a conversation mid-thread, or turn Proxme off entirely whenever you want.</div>
1338    </div>
1339  </div>
1340</section>
1341
1342
1343<footer>
1344  <a href="/" class="footer-logo">Prox<span>me</span></a>
1345  <div class="footer-links">
1346    <a href="/privacy" data-i18n="land_footer_privacy">Privacy</a>
1347    <a href="/terms" data-i18n="land_footer_terms">Terms</a>
1348    <a href="/pricing" data-i18n="land_footer_pricing">Pricing</a>
1349    <a href="mailto:[email protected]" data-i18n="land_footer_contact">Contact</a>
1350    <a href="/login" data-i18n="land_footer_signin">Sign in</a>
1351  </div>
1352
1353  <div class="landing-footer-copyright" data-i18n="land_copy">© 2026 Proxme. All rights reserved.</div>
1354</footer>
1355
1356<script>
1357
1358  function showPersonalDemo(index) {}
1359
1360  // PERSONAL DEMO ANIMATION
1361  function buildPersonalScenes() {
1362    const T = getT();
1363    return [
1364      {
1365        label: T.ps_tenant_label || 'Tenant Rights',
1366        app: 'Mail',
1367        msgs: [
1368          {t:'email-in', m:T.ps_tenant_1, d:400},
1369          {t:'email-body', m:T.ps_tenant_2, d:1200},
1370          {t:'ty', d:2400},
1371          {t:'flag', m:T.ps_tenant_3, d:3600},
1372          {t:'cal', m:T.ps_tenant_4, d:5200},
1373          {t:'status', m:T.ps_tenant_status, d:6400}
1374        ]
1375      },
1376      {
1377        label: T.ps_call_label || 'Missed Call',
1378        app: 'Phone',
1379        msgs: [
1380          {t:'email-in', m:T.ps_call_1, d:400},
1381          {t:'ty', d:1200},
1382          {t:'email-body', m:T.ps_call_2, d:2400},
1383          {t:'flag', m:T.ps_call_3, d:4000},
1384          {t:'status', m:T.ps_call_status, d:5600}
1385        ]
1386      },
1387      {
1388        label: T.ps_bill_label || 'Urgent Bill',
1389        app: 'Mail',
1390        msgs: [
1391          {t:'email-in', m:T.ps_bill_1, d:400},
1392          {t:'email-body', m:T.ps_bill_2, d:1200},
1393          {t:'ty', d:2200},
1394          {t:'flag', m:T.ps_bill_3, d:3200},
1395          {t:'status', m:T.ps_bill_status, d:4800}
1396        ]
1397      },
1398      {
1399        label: T.ps_school_label || 'School Event',
1400        app: 'Mail',
1401        msgs: [
1402          {t:'email-in', m:T.ps_school_1, d:400},
1403          {t:'email-body', m:T.ps_school_2, d:1200},
1404          {t:'ty', d:2400},
1405          {t:'cal', m:T.ps_school_3, d:3600},
1406          {t:'flag', m:T.ps_school_4, d:5200},
1407          {t:'status', m:T.ps_school_status, d:6600}
1408        ]
1409      },
1410      {
1411        label: T.ps_deadline_label || 'Deadline',
1412        app: 'Mail',
1413        msgs: [
1414          {t:'email-in', m:T.ps_deadline_1, d:400},
1415          {t:'email-body', m:T.ps_deadline_2, d:1200},
1416          {t:'ty', d:2200},
1417          {t:'cal', m:T.ps_deadline_3, d:3200},
1418          {t:'flag', m:T.ps_deadline_4, d:4800},
1419          {t:'status', m:T.ps_deadline_status, d:6200}
1420        ]
1421      }
1422    ];
1423  }
1424
1425  let personalSceneIndex = 0;
1426  let personalTimers = [];
1427  let personalRunning = false;
1428
1429  function clearPersonalTimers() {
1430    personalTimers.forEach(function(t){ clearTimeout(t); });
1431    personalTimers = [];
1432  }
1433
1434  function runPersonalScene(idx) {
1435    clearPersonalTimers();
1436    const PERSONAL_SCENES = buildPersonalScenes();
1437    const scene = PERSONAL_SCENES[idx % PERSONAL_SCENES.length];
1438    const container = document.getElementById('personal-phone-messages');
1439    const labelEl = document.getElementById('personal-phone-label');
1440    const appEl = document.getElementById('personal-phone-app');
1441    if(!container) return;
1442
1443    container.style.opacity = '0';
1444    const t0 = setTimeout(function() {
1445      container.innerHTML = '';
1446      container.style.opacity = '1';
1447      if(labelEl) labelEl.textContent = scene.label;
1448      if(appEl) appEl.textContent = scene.app;
1449
1450      scene.msgs.forEach(function(msg) {
1451        const t = setTimeout(function() {
1452          const typing = container.querySelector('.p-typing');
1453          if(typing && msg.t !== 'ty') typing.remove();
1454
1455          if(msg.t === 'ty') {
1456            const el = document.createElement('div');
1457            el.className = 'p-typing';
1458            el.style.cssText = 'display:flex;gap:4px;padding:8px 12px;';
1459            el.innerHTML = '<span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>';
1460            container.appendChild(el);
1461          } else if(msg.t === 'email-in') {
1462            const el = document.createElement('div');
1463            el.style.cssText = 'font-size:10px;font-weight:600;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:1px;padding:4px 0;';
1464            el.textContent = msg.m;
1465            container.appendChild(el);
1466          } else if(msg.t === 'email-body') {
1467            const el = document.createElement('div');
1468            el.style.cssText = 'background:rgba(255,255,255,0.05);border-radius:10px;padding:10px 14px;font-size:13px;color:rgba(255,255,255,0.5);line-height:1.6;';
1469            el.textContent = msg.m;
1470            container.appendChild(el);
1471          } else if(msg.t === 'flag') {
1472            const el = document.createElement('div');
1473            el.style.cssText = 'background:rgba(232,83,58,0.1);border:1px solid rgba(232,83,58,0.25);border-radius:10px;padding:10px 14px;font-size:13px;color:#f5f1ed;line-height:1.6;font-weight:500;';
1474            el.textContent = msg.m;
1475            container.appendChild(el);
1476          } else if(msg.t === 'cal') {
1477            const el = document.createElement('div');
1478            el.style.cssText = 'background:rgba(255,255,255,0.05);border-radius:10px;padding:10px 14px;font-size:13px;color:rgba(255,255,255,0.5);line-height:1.6;';
1479            el.textContent = msg.m;
1480            container.appendChild(el);
1481          } else if(msg.t === 'status') {
1482            const el = document.createElement('div');
1483            el.style.cssText = 'font-size:11px;color:rgba(255,255,255,0.2);text-align:center;padding:8px 0 4px;font-style:italic;';
1484            el.textContent = msg.m;
1485            container.appendChild(el);
1486          }
1487          container.scrollTop = container.scrollHeight;
1488        }, msg.d);
1489        personalTimers.push(t);
1490      });
1491
1492      const lastDelay = scene.msgs[scene.msgs.length-1].d + 4000;
1493      const tNext = setTimeout(function() {
1494        runPersonalScene(idx + 1);
1495      }, lastDelay);
1496      personalTimers.push(tNext);
1497    }, 300);
1498    personalTimers.push(t0);
1499  }
1500
1501
1502
1503
1504  function switchDemo(type) {
1505    const personal = document.getElementById('demo-personal');
1506    const business = document.getElementById('demo-business');
1507    const tabP = document.getElementById('demo-tab-personal');
1508    const tabB = document.getElementById('demo-tab-business');
1509    if (type === 'personal') {
1510      if (personal) personal.style.display = 'block';
1511      if (business) business.style.display = 'none';
1512      if (tabP) { tabP.style.background = 'rgba(232,83,58,0.1)'; tabP.style.color = '#e8533a'; tabP.style.borderColor = 'rgba(232,83,58,0.4)'; }
1513      if (tabB) { tabB.style.background = 'transparent'; tabB.style.color = '#9a9590'; tabB.style.borderColor = 'rgba(255,255,255,0.1)'; }
1514      if (!personalRunning) { personalRunning = true; runPersonalScene(0); }
1515    } else {
1516      if (personal) personal.style.display = 'none';
1517      if (business) business.style.display = 'block';
1518      if (tabB) { tabB.style.background = 'rgba(232,83,58,0.1)'; tabB.style.color = '#e8533a'; tabB.style.borderColor = 'rgba(232,83,58,0.4)'; }
1519      if (tabP) { tabP.style.background = 'transparent'; tabP.style.color = '#9a9590'; tabP.style.borderColor = 'rgba(255,255,255,0.1)'; }
1520      personalRunning = false;
1521      clearPersonalTimers();
1522    }
1523  }
1524
1525  // TEXT ROTATION
1526  const lang = (typeof ProxmeI18n !== 'undefined') ? ProxmeI18n.getSavedLang() : 'en';
1527  const T = window.PROXME_TRANSLATIONS[lang] || window.PROXME_TRANSLATIONS['en'];
1528  const words = (T.rotating_words || 'Professionals,Freelancers,Landlords,Photographers,Contractors,Personal Trainers,Property Managers,Small Businesses,Busy People').split(',');
1529  let wordIndex = 0;
1530  const rotatingEl = document.getElementById('rotating-word');
1531  if(rotatingEl) {
1532    rotatingEl.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
1533    function rotateWord() {
1534      rotatingEl.style.opacity = '0';
1535      rotatingEl.style.transform = 'translateY(-12px)';
1536      setTimeout(function() {
1537        wordIndex = (wordIndex + 1) % words.length;
1538        rotatingEl.textContent = words[wordIndex];
1539        rotatingEl.style.transition = 'none';
1540        rotatingEl.style.transform = 'translateY(12px)';
1541        rotatingEl.style.opacity = '0';
1542        setTimeout(function() {
1543          rotatingEl.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
1544          rotatingEl.style.opacity = '1';
1545          rotatingEl.style.transform = 'translateY(0)';
1546        }, 50);
1547      }, 300);
1548    }
1549    setInterval(rotateWord, 2500);
1550  }
1551
1552  // SINGLE PHONE ROTATING DEMO
1553  function getT() {
1554    const lang = (typeof ProxmeI18n !== 'undefined') ? ProxmeI18n.getSavedLang() : 'en';
1555    return window.PROXME_TRANSLATIONS[lang] || window.PROXME_TRANSLATIONS['en'];
1556  }
1557
1558  function buildScenes() {
1559    const T = getT();
1560    return [
1561      { label:T.scene_email_realestate, app:'Mail', headerBg:'#1a1a1a', headerColor:'rgba(255,255,255,0.35)', msgBg:'#111111', msgs:[
1562        {t:'in', m:T.d_er_1, d:600},{t:'ty', d:1600},{t:'out', m:T.d_er_2, d:2800},
1563        {t:'in', m:T.d_er_3, d:4200},{t:'out', m:T.d_er_4, d:5600},{t:'sy', m:T.d_er_sy, d:7000}]},
1564      { label:T.scene_whatsapp_plumber, app:'WhatsApp', headerBg:'#075e54', headerColor:'white', msgBg:'#0b141a', msgs:[
1565        {t:'wai', m:T.d_wp_1, d:600},{t:'ty', d:1600},{t:'wao', m:T.d_wp_2, d:2800},
1566        {t:'wai', m:T.d_wp_3, d:4200},{t:'wao', m:T.d_wp_4, d:5600},{t:'sy', m:T.d_wp_sy, d:7000}]},
1567      { label:T.scene_voice_trainer, app:'Phone', headerBg:'#1a1a2e', headerColor:'rgba(255,255,255,0.4)', msgBg:'#1a1a2e', msgs:[
1568        {t:'voi', m:T.d_vt_1, d:600},{t:'ty', d:1600},{t:'voo', m:T.d_vt_2, d:2800},
1569        {t:'voi', m:T.d_vt_3, d:4200},{t:'voo', m:T.d_vt_4, d:5600},{t:'sy', m:T.d_vt_sy, d:7000}]},
1570      { label:T.scene_instagram_photographer, app:'Instagram', headerBg:'#000000', headerColor:'rgba(255,255,255,0.4)', msgBg:'#000000', msgs:[
1571        {t:'igi', m:T.d_ip_1, d:600},{t:'ty', d:1600},{t:'igo', m:T.d_ip_2, d:2800},
1572        {t:'igi', m:T.d_ip_3, d:4200},{t:'igo', m:T.d_ip_4, d:5600},{t:'sy', m:T.d_ip_sy, d:7000}]},
1573      { label:T.scene_booking_therapist, app:'Calendar', headerBg:'#1a1a1a', headerColor:'rgba(255,255,255,0.35)', msgBg:'#111111', msgs:[
1574        {t:'in', m:T.d_bt_1, d:600},{t:'ty', d:1600},{t:'out', m:T.d_bt_2, d:2800},
1575        {t:'in', m:T.d_bt_3, d:4200},{t:'out', m:T.d_bt_4, d:5600},{t:'cal', m:'📅 ' + T.d_bt_sy, d:7000}]},
1576      { label:T.scene_whatsapp_rental, app:'WhatsApp', headerBg:'#075e54', headerColor:'white', msgBg:'#0b141a', msgs:[
1577        {t:'wai', m:T.d_wr_1, d:600},{t:'ty', d:1600},{t:'wao', m:T.d_wr_2, d:2800},
1578        {t:'wai', m:T.d_wr_3, d:4200},{t:'wao', m:T.d_wr_4, d:5600},{t:'sy', m:T.d_wr_sy, d:7000}]},
1579      { label:T.scene_email_landlord, app:'Mail', headerBg:'#1a1a1a', headerColor:'rgba(255,255,255,0.35)', msgBg:'#111111', msgs:[
1580        {t:'in', m:T.d_el_1, d:600},{t:'ty', d:1600},{t:'out', m:T.d_el_2, d:2800},
1581        {t:'in', m:T.d_el_3, d:4200},{t:'out', m:T.d_el_4, d:5600},{t:'sy', m:T.d_el_sy, d:7000}]},
1582      { label:T.scene_voice_realestate, app:'Phone', headerBg:'#1a1a2e', headerColor:'rgba(255,255,255,0.4)', msgBg:'#1a1a2e', msgs:[
1583        {t:'voi', m:T.d_vre_1, d:600},{t:'ty', d:1600},{t:'voo', m:T.d_vre_2, d:2800},
1584        {t:'voi', m:T.d_vre_3, d:4200},{t:'voo', m:T.d_vre_4, d:5600},{t:'sy', m:T.d_vre_sy, d:7000}]},
1585      { label:T.scene_instagram_consultant, app:'Instagram', headerBg:'#000000', headerColor:'rgba(255,255,255,0.4)', msgBg:'#000000', msgs:[
1586        {t:'igi', m:T.d_ic_1, d:600},{t:'ty', d:1600},{t:'igo', m:T.d_ic_2, d:2800},
1587        {t:'igi', m:T.d_ic_3, d:4200},{t:'igo', m:T.d_ic_4, d:5600},{t:'sy', m:T.d_ic_sy, d:7000}]},
1588      { label:T.scene_booking_cleaner, app:'Calendar', headerBg:'#1a1a1a', headerColor:'rgba(255,255,255,0.35)', msgBg:'#111111', msgs:[
1589        {t:'in', m:T.d_bc_1, d:600},{t:'ty', d:1600},{t:'out', m:T.d_bc_2, d:2800},
1590        {t:'in', m:T.d_bc_3, d:4200},{t:'out', m:T.d_bc_4, d:5600},{t:'cal', m:'📅 ' + T.d_bc_sy, d:7000}]}
1591    ];
1592  }
1593  let SCENES = buildScenes();
1594
1595  let sceneIndex = 0;
1596  let sceneTimers = [];
1597
1598  function clearSceneTimers() { sceneTimers.forEach(function(t){ clearTimeout(t); }); sceneTimers = []; }
1599
1600  function getMsgClass(t, app) {
1601    if(t==='wai') return 'pmsg wa-in';
1602    if(t==='wao') return 'pmsg wa-out';
1603    if(t==='igi') return 'pmsg ig-in';
1604    if(t==='igo') return 'pmsg ig-out';
1605    if(t==='voi') return 'pmsg vo-in';
1606    if(t==='voo') return 'pmsg vo-out';
1607    if(t==='sy') return 'pmsg sy';
1608    if(t==='cal') return 'pmsg cal';
1609    if(t==='in') return 'pmsg in';
1610    if(t==='out') return 'pmsg out';
1611    return 'pmsg in';
1612  }
1613
1614  function runScene(idx) {
1615    SCENES = buildScenes();
1616    clearSceneTimers();
1617    const scene = SCENES[idx % SCENES.length];
1618    const container = document.getElementById('single-phone-messages');
1619    const labelEl = document.getElementById('single-phone-label');
1620    const headerEl = document.getElementById('single-phone-header');
1621    const appEl = document.getElementById('single-phone-app');
1622    if(!container) return;
1623
1624    // Fade out
1625    container.style.opacity = '0';
1626    setTimeout(function() {
1627      container.innerHTML = '';
1628      container.style.background = scene.msgBg;
1629      container.style.opacity = '1';
1630      if(labelEl) labelEl.textContent = scene.label;
1631      if(headerEl) headerEl.style.background = scene.headerBg;
1632      if(appEl) { appEl.textContent = scene.app; appEl.style.color = scene.headerColor; }
1633
1634      // Show profession label
1635      const profLabel = document.createElement('div');
1636      profLabel.style.cssText = 'font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.25);text-align:center;padding:8px 0 4px;';
1637      profLabel.textContent = scene.label;
1638      container.appendChild(profLabel);
1639
1640      scene.msgs.forEach(function(msg) {
1641        const t = setTimeout(function() {
1642          const existing = container.querySelector('.ptyping');
1643          if(existing && msg.t !== 'ty') existing.remove();
1644          if(msg.t === 'ty') {
1645            const el = document.createElement('div');
1646            el.className = 'ptyping';
1647            el.innerHTML = '<span></span><span></span><span></span>';
1648            container.appendChild(el);
1649          } else {
1650            const el = document.createElement('div');
1651            el.className = getMsgClass(msg.t);
1652            el.textContent = msg.m;
1653            container.appendChild(el);
1654          }
1655          container.scrollTop = container.scrollHeight;
1656        }, msg.d);
1657        sceneTimers.push(t);
1658      });
1659
1660      // Next scene
1661      const nextDelay = scene.msgs[scene.msgs.length-1].d + 4000;
1662      const next = setTimeout(function() { runScene(idx + 1); }, nextDelay);
1663      sceneTimers.push(next);
1664    }, 400);
1665  }
1666
1667  setTimeout(function() { runScene(0); }, 300);
1668
1669  // SCROLL REVEAL
1670  const observer = new IntersectionObserver(function(entries) {
1671    entries.forEach(function(e) { if(e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
1672  }, { threshold: 0.01 });
1673  document.querySelectorAll('.reveal').forEach(function(el) { observer.observe(el); });
1674  setTimeout(function() {
1675    document.querySelectorAll('.reveal:not(.visible)').forEach(function(el) {
1676      if(el.getBoundingClientRect().top < window.innerHeight) el.classList.add('visible');
1677    });
1678  }, 100);
1679
1680  // Re-run demo when language changes
1681  const _origSetLang = window.ProxmeI18n ? window.ProxmeI18n.setLang : null;
1682  function updateManifesto(lang) {
1683    const T = window.PROXME_TRANSLATIONS[lang] || window.PROXME_TRANSLATIONS['en'];
1684    const pEl = document.getElementById('manifesto-personal-body');
1685    const bEl = document.getElementById('manifesto-business-body');
1686    if (pEl) {
1687      pEl.innerHTML =
1688        '<span class="manifesto-highlight">' + (T.land_p_q1||'') + '</span><br>' +
1689        (T.land_p_q2||'') + '<br><br>' +
1690        (T.land_p_body1||'') + '<br><br>' +
1691        (T.land_p_body2||'') + '<br><br>' +
1692        '<span class="manifesto-highlight-medium">' + (T.land_p_tagline||'') + '</span><br><br>' +
1693        (T.land_p_body3||'') + '<br><br>' +
1694        (T.land_p_body4||'') + '<br><br>' +
1695        (T.land_p_body5||'') + '<br><br>' +
1696        (T.land_p_body6||'') + '<br><br>' +
1697        '<span class="manifesto-highlight">' + (T.land_p_closing||'') + '</span><br><br>' +
1698        '<em class="manifesto-closing">' + (T.land_p_tagline2||'') + '</em>';
1699    }
1700    if (bEl) {
1701      bEl.innerHTML =
1702        (T.land_b_q1||'') + '<br><br>' +
1703        (T.land_b_q2||'') + '<br><br>' +
1704        (T.land_b_body1||'') + '<br><br>' +
1705        (T.land_b_body2||'') + '<br><br>' +
1706        '<span class="manifesto-highlight-medium">' + (T.land_b_diff||'') + '</span><br><br>' +
1707        (T.land_b_body3||'') + '<br><br>' +
1708        (T.land_b_body4||'') + '<br><br>' +
1709        (T.land_b_body5||'') + '<br><br>' +
1710        '<span class="manifesto-highlight-bold">' + (T.land_b_closing||'') + '</span><br><br>' +
1711        '<em class="manifesto-closing">' + (T.land_b_tagline||'') + '</em>';
1712    }
1713  }
1714
1715  // Run on page load with current language
1716  const initLang = (typeof ProxmeI18n !== 'undefined') ? ProxmeI18n.getSavedLang(
1716) : 'en';
1717  updateManifesto(initLang);
1718
1719  function updateDemoIframes(lang) {
1720    const perIframe = document.getElementById('personal-demo-iframe');
1721    const bizIframe = document.getElementById('business-demo-iframe');
1722    if (perIframe) perIframe.src = '/proxme-personal-demo.html?lang=' + lang;
1723    if (bizIframe) bizIframe.src = '/proxme-business-demo.html?lang=' + lang;
1724  }
1725
1726  // Set iframes on page load with saved language
1727  const savedLangForIframes = (typeof ProxmeI18n !== 'undefined') ? ProxmeI18n.getSavedLang() : 'en';
1728  setTimeout(function() { updateDemoIframes(savedLangForIframes); }, 500);
1729
1730  if (typeof ProxmeI18n !== 'undefined') {
1731    const origSet = ProxmeI18n.setLang;
1732    ProxmeI18n.setLang = function(lang) {
1733      origSet(lang);
1734      SCENES = buildScenes();
1735      updateManifesto(lang);
1736      updateDemoIframes(lang);
1737      const words2 = (PROXME_TRANSLATIONS[lang]||PROXME_TRANSLATIONS['en']).rotating_words.split(',');
1738      wordIndex = 0;
1739      if(rotatingEl) rotatingEl.textContent = words2[0];
1740    };
1741  }
1742
1743  async function joinWaitlist(inputId, msgId) {
1744    const email = document.getElementById(inputId).value.trim();
1745    if (!email || !email.includes('@')) { alert('Please enter a valid email address.'); return; }
1746    try {
1747      const res = await fetch('/waitlist', {
1748        method: 'POST',
1749        headers: { 'Content-Type': 'application/json' },
1750        body: JSON.stringify({ email })
1751      });
1752      const data = await res.json();
1753      if (data.success) {
1754        document.getElementById(msgId).style.display = 'block';
1755        document.getElementById(inputId).value = '';
1756      }
1757    } catch(e) { alert('Something went wrong. Please try again.'); }
1758  }
1759</script>
1759
1760
1761
1762<!-- ── PWA INSTALL PROMPT ──────────────────────────────────────────────────── -->
1763<style nonce="zyLqhKurT7u1uTx3GBUbxA==">
1764/* iOS install banner */
1765.prx-install-banner {
1766  display: none;
1767  position: fixed;
1768  bottom: 0;
1769  left: 0;
1770  right: 0;
1771  z-index: 9999;
1772  background: #1a1714;
1773  border-top: 1px solid rgba(232,83,58,0.3);
1774  padding: 16px 20px;
1775  box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
1776  animation: prxSlideUp 0.4s ease;
1777}
1778@keyframes prxSlideUp {
1779  from { transform: translateY(100%); opacity: 0; }
1780  to { transform: translateY(0); opacity: 1; }
1781}
1782.prx-install-banner.visible { display: block; }
1783.prx-install-inner {
1784  max-width: 480px;
1785  margin: 0 auto;
1786  display: flex;
1787  align-items: center;
1788  gap: 12px;
1789}
1790.prx-install-icon {
1791  width: 48px;
1792  height: 48px;
1793  border-radius: 12px;
1794  background: #e8533a;
1795  display: flex;
1796  align-items: center;
1797  justify-content: center;
1798  font-size: 22px;
1799  flex-shrink: 0;
1800}
1801.prx-install-text { flex: 1; }
1802.prx-install-title {
1803  font-size: 14px;
1804  font-weight: 600;
1805  color: #f5f1ed;
1806  margin-bottom: 2px;
1807}
1808.prx-install-sub {
1809  font-size: 12px;
1810  color: rgba(245,241,237,0.5);
1811}
1812.prx-install-btn {
1813  background: #e8533a;
1814  color: white;
1815  border: none;
1816  border-radius: 8px;
1817  padding: 10px 18px;
1818  font-size: 13px;
1819  font-weight: 600;
1820  cursor: pointer;
1821  white-space: nowrap;
1822  flex-shrink: 0;
1823}
1824.prx-install-btn:hover { background: #c23d26; }
1825.prx-install-close {
1826  background: none;
1827  border: none;
1828  color: rgba(245,241,237,0.4);
1829  font-size: 18px;
1830  cursor: pointer;
1831  padding: 4px;
1832  flex-shrink: 0;
1833}
1834
1835/* iOS specific — arrow pointing at share button */
1836.prx-ios-arrow {
1837  display: none;
1838  position: fixed;
1839  bottom: 80px;
1840  left: 50%;
1841  transform: translateX(-50%);
1842  z-index: 9999;
1843  text-align: center;
1844  animation: prxBounceUp 1s ease-in-out infinite;
1845}
1846@keyframes prxBounceUp {
1847  0%, 100% { transform: translateX(-50%) translateY(0); }
1848  50% { transform: translateX(-50%) translateY(8px); }
1849}
1850.prx-ios-arrow.visible { display: block; }
1851.prx-ios-arrow-icon {
1852  font-size: 32px;
1853  display: block;
1854  margin-bottom: 4px;
1855}
1856.prx-ios-arrow-text {
1857  background: #1a1714;
1858  border: 1px solid rgba(232,83,58,0.3);
1859  border-radius: 20px;
1860  padding: 8px 16px;
1861  font-size: 13px;
1862  color: rgba(245,241,237,0.8);
1863  white-space: nowrap;
1864}
1865</style>
1866
1867<!-- Android / Desktop install banner -->
1868<div class="prx-install-banner" id="prx-install-banner">
1869  <div class="prx-install-inner">
1870    <div class="prx-install-icon">⚡</div>
1871    <div class="prx-install-text">
1872      <div class="prx-install-title" data-i18n="pwa_install_title">Add Proxme to your home screen</div>
1873      <div class="prx-install-sub" data-i18n="pwa_install_sub">One tap — works like a native app</div>
1874    </div>
1875    <button class="prx-install-btn" id="prx-install-btn" data-i18n="pwa_install_btn">Install</button>
1876    <button class="prx-install-close" id="prx-install-close">✕</button>
1877  </div>
1878</div>
1879
1880<!-- iOS arrow indicator -->
1881<div class="prx-ios-arrow" id="prx-ios-arrow">
1882  <span class="prx-ios-arrow-icon">⬇️</span>
1883  <span class="prx-ios-arrow-text" data-i18n="pwa_ios_hint">Tap Share → Add to Home Screen</span>
1884</div>
1885
1886<script>
1887(function() {
1888  // Check if already installed
1889  const isInstalled = window.matchMedia('(display-mode: standalone)').matches
1890    || window.navigator.standalone === true;
1891
1892  if (isInstalled) return; // Already installed — don't show
1893
1894  // Check if dismissed recently
1895  const dismissed = localStorage.getItem('prx_install_dismissed');
1896  if (dismissed && Date.now() - parseInt(dismissed) < 7 * 24 * 60 * 60 * 1000) return;
1897
1898  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
1899  const isAndroid = /Android/.test(navigator.userAgent);
1900  const isMobile = isIOS || isAndroid;
1901
1902  if (!isMobile) return; // Desktop — don't show
1903
1904  let deferredPrompt = null;
1905
1906  // Android — catch install prompt
1907  window.addEventListener('beforeinstallprompt', (e) => {
1908    e.preventDefault();
1909    deferredPrompt = e;
1910    // Show banner after 3 seconds
1911    setTimeout(() => showAndroidBanner(), 3000);
1912  });
1913
1914  // iOS — show arrow after 3 seconds
1915  if (isIOS) {
1916    setTimeout(() => showIOSArrow(), 3000);
1917  }
1918
1919  function showAndroidBanner() {
1920    const banner = document.getElementById('prx-install-banner');
1921    if (banner) banner.classList.add('visible');
1922  }
1923
1924  function showIOSArrow() {
1925    const arrow = document.getElementById('prx-ios-arrow');
1926    if (arrow) arrow.classList.add('visible');
1927    // Auto hide after 8 seconds
1928    setTimeout(() => {
1929      if (arrow) arrow.classList.remove('visible');
1930    }, 8000);
1931  }
1932
1933  // Install button click — Android
1934  const installBtn = document.getElementById('prx-install-btn');
1935  if (installBtn) {
1936    installBtn.addEventListener('click', async () => {
1937      if (!deferredPrompt) return;
1938      deferredPrompt.prompt();
1939      const { outcome } = await deferredPrompt.userChoice;
1940      deferredPrompt = null;
1941      const banner = document.getElementById('prx-install-banner');
1942      if (banner) banner.classList.remove('visible');
1943      if (outcome === 'accepted') {
1944        localStorage.setItem('prx_install_dismissed', Date.now().toString());
1945      }
1946    });
1947  }
1948
1949  // Close button
1950  const closeBtn = document.getElementById('prx-install-close');
1951  if (closeBtn) {
1952    closeBtn.addEventListener('click', () => {
1953      const banner = document.getElementById('prx-install-banner');
1954      if (banner) banner.classList.remove('visible');
1955      localStorage.setItem('prx_install_dismissed', Date.now().toString());
1956    });
1957  }
1958})();
1959</script>
1959
1960<!-- ── END PWA INSTALL PROMPT ─────────────────────────────────────────────── -->
1961
1962</body>
1963</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.