PageSourceSearch

https://pushify.com/launch/

html pushify.com collected 2026-09-26 07:19:00 UTC 125,744 bytes, 2,014 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
7  <!-- ── SEO ── -->
8  <title>Pushify — Unlimited FREE Web Push Notifications</title>
9  <meta name="description" content="Send unlimited web push notifications for free. Campaigns, flows, RSS automations, segmentation, PWA builder & full API — all in one platform. Start in minutes." />
10  <meta name="keywords" content="web push notifications, push notifications, free push notifications, browser notifications, subscriber campaigns, RSS push" />
11  <link rel="canonical" href="https://pushify.com/" />
12
13  <!-- ── Open Graph ── -->
14  <meta property="og:type" content="website" />
15  <meta property="og:url" content="https://pushify.com/" />
16  <meta property="og:title" content="Pushify — Unlimited FREE Web Push Notifications" />
17  <meta property="og:description" content="Send unlimited push notifications to your subscribers. Campaigns, flows, RSS automations, segmentation, PWA builder & full API. Free forever plan." />
18  <meta property="og:image" content="https://pushify.com/uploads/main/4c2b584f6f0013e380a5b53a3a1e0bea.png" />
19  <meta property="og:site_name" content="Pushify" />
20
21  <!-- ── Twitter Card ── -->
22  <meta name="twitter:card" content="summary_large_image" />
23  <meta name="twitter:site" content="@PushifyTeam" />
24  <meta name="twitter:title" content="Pushify — Unlimited FREE Web Push Notifications" />
25  <meta name="twitter:description" content="Send unlimited push notifications for free. Campaigns, flows, RSS automations & full API." />
26  <meta name="twitter:image" content="https://pushify.com/uploads/main/4c2b584f6f0013e380a5b53a3a1e0bea.png" />
27
28
29
30  <!-- ── Favicon ── -->
31  <link rel="icon" type="image/png" href="https://pushify.com/uploads/main/ae275a10d188e7cd52f4b1fee08c29fe.png" />
32  <link rel="apple-touch-icon" href="https://pushify.com/uploads/main/ae275a10d188e7cd52f4b1fee08c29fe.png" />
33
34  <link rel="preconnect" href="https://fonts.googleapis.com" />
35  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
36  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
37  <!-- ── CookieConsent (vanilla-cookieconsent v3) ── -->
38  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-cookieconsent@3/dist/cookieconsent.css" />
39  
39<script src="https://cdn.jsdelivr.net/npm/vanilla-cookieconsent@3/dist/cookieconsent.umd.js"></script>
39
40
41  <style>
42    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
43
44    /* ── LIGHT THEME (default) ── */
45    :root {
46      --brand: #2E90B3;
47      --brand-light: #3AADD4;
48      --brand-dark: #1E6A8A;
49      --brand-gold: #F5C518;
50      --brand-glow: rgba(46,144,179,0.22);
51      --bg: #FFFFFF;
52      --bg-alt: #F2F8FB;
53      --bg-card: #E8F3F8;
54      --bg-card-hover: #DCEDF5;
55      --border: rgba(46,144,179,0.14);
56      --border-hover: rgba(46,144,179,0.5);
57      --text: #0D2B38;
58      --text-muted: #3E6878;
59      --text-faint: #5A8FA0;
60      --radius: 12px;
61      --radius-lg: 20px;
62      --shadow: 0 4px 24px rgba(0,0,0,0.07);
63      --shadow-brand: 0 4px 32px rgba(46,144,179,0.25);
64      --nav-bg: rgba(255,255,255,0.88);
65      --mobile-nav-bg: rgba(255,255,255,0.98);
66      --hero-grid: rgba(46,144,179,0.08);
67      --hero-h1-from: #0D2B38;
68      --hero-h1-to: rgba(13,43,56,0.5);
69      --code-bg: #0D2B38;
70      --code-border: rgba(255,255,255,0.08);
71      --code-muted: #7AABB8;
72    }
73
74    /* ── DARK THEME ── */
75    html.dark {
76      --brand: #3AADD4;
77      --brand-light: #50C3EC;
78      --brand-dark: #2E90B3;
79      --brand-gold: #F5C518;
80      --brand-glow: rgba(58,173,212,0.3);
81      --bg: #071820;
82      --bg-alt: #0D2535;
83      --bg-card: #122E40;
84      --bg-card-hover: #183850;
85      --border: rgba(58,173,212,0.12);
86      --border-hover: rgba(58,173,212,0.45);
87      --text: #E8F4F8;
88      --text-muted: #7AABB8;
89      --text-faint: #3A6070;
90      --shadow: 0 4px 24px rgba(0,0,0,0.4);
91      --shadow-brand: 0 4px 32px rgba(58,173,212,0.3);
92      --nav-bg: rgba(7,24,32,0.88);
93      --mobile-nav-bg: rgba(7,24,32,0.98);
94      --hero-grid: rgba(58,173,212,0.07);
95      --hero-h1-from: #E8F4F8;
96      --hero-h1-to: rgba(232,244,248,0.5);
97      --code-bg: #071820;
98      --code-border: rgba(255,255,255,0.07);
99      --code-muted: #7AABB8;
100    }
101
102    html { scroll-behavior: smooth; }
103    body {
104      font-family: 'Inter', system-ui, sans-serif;
105      background: var(--bg); color: var(--text);
106      line-height: 1.6; overflow-x: hidden;
107      transition: background 0.3s, color 0.3s;
108    }
109
110    /* ── UTILITIES ── */
111    .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
112
113    .badge {
114      display: inline-flex; align-items: center; gap: 6px;
115      background: rgba(46,144,179,0.1); border: 1px solid rgba(46,144,179,0.3);
116      color: var(--brand); font-size: 12px; font-weight: 600;
117      padding: 4px 12px; border-radius: 100px; letter-spacing: 0.05em; text-transform: uppercase;
118    }
119    .badge::before { content: '●'; font-size: 8px; animation: pulse 2s infinite; }
120    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
121
122    .btn {
123      display: inline-flex; align-items: center; gap: 8px;
124      font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
125      border: none; border-radius: var(--radius); padding: 13px 26px;
126      text-decoration: none; transition: all 0.2s ease; white-space: nowrap;
127    }
128    .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
129    .btn-primary:hover { background: var(--brand-light); transform: translateY(-1px); box-shadow: 0 8px 40px rgba(46,144,179,0.4); }
130    .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
131    .btn-ghost:hover { border-color: var(--border-hover); color: var(--text); background: var(--bg-card); }
132    .btn-large { padding: 16px 34px; font-size: 16px; border-radius: 14px; }
133    .btn-sm { padding: 9px 18px; font-size: 14px; }
134
135    /* ── NAV ── */
136    nav {
137      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
138      background: var(--nav-bg); backdrop-filter: blur(20px);
139      border-bottom: 1px solid var(--border);
140      transition: background 0.3s, border-color 0.3s;
141    }
142    .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
143    .logo { text-decoration: none; display: flex; align-items: center; }
144    .logo-icon { height: 34px; display: flex; align-items: center; }
145    .logo-icon img { height: 100%; width: auto; object-fit: contain; display: block; }
146    .nav-links { display: flex; align-items: center; gap: 4px; }
147    .nav-links a {
148      color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500;
149      padding: 8px 14px; border-radius: 8px; transition: all 0.2s;
150    }
151    .nav-links a:hover { color: var(--text); background: var(--bg-card); }
152    .nav-actions { display: flex; align-items: center; gap: 10px; }
153    .nav-signin { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; }
154    .nav-signin:hover { color: var(--text); }
155    .nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text); font-size: 22px; }
156
157
158    /* Theme toggle */
159    .theme-toggle {
160      width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
161      background: var(--bg-card); border: 1px solid var(--border);
162      display: flex; align-items: center; justify-content: center;
163      transition: all 0.2s; flex-shrink: 0; padding: 0; color: var(--text-muted);
164    }
165    .theme-toggle:hover { border-color: var(--border-hover); background: var(--bg-card-hover); color: var(--text); }
166    .theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: all 0.2s; }
167    .icon-moon { display: block; }
168    .icon-sun  { display: none; }
169    html.dark .icon-moon { display: none; }
170    html.dark .icon-sun  { display: block; }
171
172    /* ── MOBILE NAV DRAWER ── */
173    .mobile-nav-backdrop {
174      position: fixed; inset: 0; z-index: 199;
175      background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none;
176      transition: opacity 0.3s ease;
177    }
178    .mobile-nav-backdrop.open { opacity: 1; pointer-events: all; }
179    .mobile-nav {
180      position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
181      width: min(300px, 82vw);
182      background: var(--bg); border-left: 1px solid var(--border);
183      display: flex; flex-direction: column;
184      padding: 0; overflow: hidden;
185      transform: translateX(100%);
186      transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
187      box-shadow: -12px 0 48px rgba(0,0,0,0.12);
188    }
189    .mobile-nav.open { transform: translateX(0); }
190    .mobile-nav-header {
191      display: flex; align-items: center; justify-content: space-between;
192      padding: 18px 20px; border-bottom: 1px solid var(--border);
193    }
194    .mobile-nav-header img { height: 28px; width: auto; }
195    .mobile-nav-links { display: flex; flex-direction: column; padding: 12px 0; flex: 1; }
196    .mobile-nav-links a {
197      font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none;
198      padding: 14px 24px; transition: background 0.15s, color 0.15s;
199      display: flex; align-items: center; gap: 12px;
200      opacity: 0; transform: translateX(16px);
201      transition: background 0.15s, color 0.15s, opacity 0.25s calc(var(--d, 0) * 1ms + 60ms), transform 0.25s calc(var(--d, 0) * 1ms + 60ms);
202    }
203    .mobile-nav.open .mobile-nav-links a { opacity: 1; transform: translateX(0); }
204    .mobile-nav-links a:hover { background: var(--bg-card); color: var(--brand); }
205    .mobile-nav-links a .mnav-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
206    .mobile-nav-divider { height: 1px; background: var(--border); margin: 8px 24px; }
207    .mobile-nav-footer { padding: 16px 24px; border-top: 1px solid var(--border); }
208    .mobile-nav-close {
209      width: 36px; height: 36px; border-radius: 9px;
210      background: var(--bg-card); border: 1px solid var(--border);
211      display: flex; align-items: center; justify-content: center;
212      cursor: pointer; color: var(--text); font-size: 18px;
213      transition: background 0.2s;
214    }
215
216    /* ── HERO ── */
217    .hero {
218      min-height: 100vh; display: flex; align-items: center;
219      padding: 100px 0 60px; position: relative; overflow: hidden;
220    }
221    .hero-bg {
222      position: absolute; inset: 0; z-index: 0;
223      background:
224        radial-gradient(ellipse 55% 80% at 75% 50%, rgba(46,144,179,0.14) 0%, transparent 65%),
225        radial-gradient(ellipse 55% 55% at 15% 40%, rgba(46,144,179,0.07) 0%, transparent 60%),
226        radial-gradient(ellipse 30% 35% at 85% 85%, rgba(245,197,24,0.06) 0%, transparent 50%);
227    }
228    html.dark .hero-bg {
229      background:
230        radial-gradient(ellipse 55% 80% at 75% 50%, rgba(46,144,179,0.22) 0%, transparent 65%),
231        radial-gradient(ellipse 55% 55% at 15% 40%, rgba(46,144,179,0.10) 0%, transparent 60%),
232        radial-gradient(ellipse 30% 35% at 85% 85%, rgba(245,197,24,0.07) 0%, transparent 50%);
233    }
234    .hero-grid {
235      position: absolute; inset: 0; z-index: 0;
236      background-image:
237        linear-gradient(var(--hero-grid) 1px, transparent 1px),
238        linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
239      background-size: 60px 60px;
240      mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, black 0%, transparent 80%);
241    }
242    .hero > .container { position: relative; z-index: 1; }
243    .hero-inner { display: grid; grid-template-columns: 53% 47%; gap: 56px; align-items: center; min-height: calc(100vh - 240px); }
244
245    /* left */
246    .hero-badge { margin-bottom: 14px; }
247    .hero h1 {
248      font-size: clamp(36px, 4.2vw, 60px); font-weight: 900;
249      line-height: 1.06; letter-spacing: -2px; margin-bottom: 12px;
250      background: linear-gradient(135deg, var(--hero-h1-from) 40%, var(--hero-h1-to));
251      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
252    }
253    .hero-word-swap {
254      display: block; -webkit-text-fill-color: var(--brand); color: var(--brand);
255      transition: opacity 0.28s ease, transform 0.28s ease;
256    }
257    .hero-word-swap.fading { opacity: 0; transform: translateY(8px); }
258    .hero-sub { font-size: 17px; color: var(--text-muted); max-width: 500px; margin: 0 0 14px; line-height: 1.7; }
259    .hero-trust { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
260    .hero-avatar-stack { display: flex; }
261    .ha { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--bg); margin-left: -9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; }
262    .ha:first-child { margin-left: 0; }
263    .hero-trust-text { font-size: 13px; color: var(--text-muted); }
264    .hero-trust-text strong { color: var(--text); font-weight: 700; }
265    .hero-stats {
266      display: flex; margin-bottom: 20px;
267      background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
268    }
269    .hstat { flex: 1; padding: 13px 10px; text-align: center; border-right: 1px solid var(--border); }
270    .hstat:last-child { border-right: none; }
271    .hstat-n { display: block; font-size: 21px; font-weight: 800; color: var(--brand); letter-spacing: -1px; line-height: 1; margin-bottom: 2px; }
272    .hstat-l { font-size: 10px; color: var(--text-faint); font-weight: 500; }
273    .hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
274    .hero-proof { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-faint); }
275    .hero-proof-item { display: flex; align-items: center; gap: 6px; }
276    .proof-check { color: var(--brand); font-weight: 700; }
277
278    /* right — notification demo */
279    .hero-right { position: relative; display: flex; flex-direction: column; align-items: center; }
280    .hero-right-glow {
281      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
282      width: 340px; height: 340px; border-radius: 50%;
283      background: radial-gradient(circle, rgba(46,144,179,0.20) 0%, transparent 70%);
284      pointer-events: none; z-index: 0;
285      animation: glowPulse 4s ease-in-out infinite;
286    }
287    @keyframes glowPulse {
288      0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.7; }
289      50%      { transform: translate(-50%,-50%) scale(1.18); opacity: 1; }
290    }
291    .notif-demo { position: relative; z-index: 1; width: 100%; max-width: 360px; }
292    .notif-demo-eyebrow {
293      font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
294      color: var(--text-faint); text-align: center; margin-bottom: 14px;
295      display: flex; align-items: center; justify-content: center; gap: 7px;
296    }
297    .notif-demo-eyebrow::before, .notif-demo-eyebrow::after { content:''; flex:1; height:1px; background: var(--border); }
298
299    /* stacked notification cards */
300    .notif-stack { position: relative; height: 182px; margin-bottom: 12px; }
301    .ns-card {
302      position: absolute; left: 0; right: 0;
303      background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
304      border-top: 3px solid var(--ns-accent, var(--brand));
305      padding: 13px 15px; display: flex; gap: 10px; align-items: flex-start;
306      box-shadow: 0 8px 32px rgba(0,0,0,0.09);
307      transition: transform 0.48s cubic-bezier(0.4,0,0.2,1), opacity 0.48s ease, box-shadow 0.48s ease;
308    }
309    html.dark .ns-card { box-shadow: 0 8px 32px rgba(0,0,0,0.35); }
310    .ns-card.pos-front { transform: translateY(0) scale(1);    z-index: 3; opacity: 1; }
311    .ns-card.pos-mid   { transform: translateY(13px) scale(0.95); z-index: 2; opacity: 0.60; }
312    .ns-card.pos-back  { transform: translateY(24px) scale(0.90); z-index: 1; opacity: 0.28; }
313    .ns-card.exiting   { transform: translateY(-32px) scale(0.96); z-index: 4; opacity: 0; }
314    .ns-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; margin-top: 5px; animation: livePulse 1.8s ease infinite; }
315    @keyframes livePulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.45)} 60%{box-shadow:0 0 0 5px rgba(34,197,94,0)} }
316    .ns-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--bg-alt); border: 1px solid transparent; }
317    .ns-body { flex: 1; min-width: 0; }
318    .ns-meta { font-size: 10px; color: var(--text-faint); margin-bottom: 3px; display: flex; align-items: center; justify-content: space-between; }
319    .ns-site { font-weight: 600; color: var(--text-muted); }
320    .ns-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.35; }
321    .ns-desc { font-size: 11px; color: var(--text-muted); line-height: 1.45; margin-bottom: 9px; }
322    .ns-btns { display: flex; gap: 6px; }
323    .ns-btn { font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-muted); cursor: default; }
324    .ns-btn.ns-primary { background: var(--ns-accent, var(--brand)); border-color: var(--ns-accent, var(--brand)); color: #fff; }
325
326    /* progress + dots */
327    .notif-progress { height: 2px; background: var(--border); border-radius: 2px; margin-bottom: 12px; overflow: hidden; }
328    .notif-progress-bar { height: 100%; background: var(--brand); border-radius: 2px; width: 0%; }
329    .notif-dots { display: flex; gap: 5px; justify-content: center; margin-bottom: 18px; }
330    .nd { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: all 0.3s; }
331    .nd.active { background: var(--brand); width: 18px; border-radius: 3px; }
332
333    /* industry tags */
334    .hero-tags { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
335    .hero-tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-faint); }
336
337    /* ── BROWSER TAGS ── */
338    .browsers-section { padding: 20px 0 64px; text-align: center; }
339    .browsers-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 28px; }
340    .browsers-list { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
341    .browser-logo { display: flex; flex-direction: column; align-items: center; gap: 9px; transition: transform 0.2s; cursor: default; }
342    .browser-logo:hover { transform: translateY(-3px); }
343    .browser-logo svg { width: 44px; height: 44px; border-radius: 10px; }
344    .browser-logo span { font-size: 12px; font-weight: 500; color: var(--text-muted); }
345    .browsers-platforms { font-size: 12px; color: var(--text-faint); margin-top: 24px; letter-spacing: 0.06em; }
346
347    /* ── SECTION COMMON ── */
348    section { padding: 96px 0; }
349    .section-header { text-align: center; margin-bottom: 64px; }
350    .section-header .badge { margin-bottom: 16px; }
351    .section-header h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -1px; margin-bottom: 16px; line-height: 1.15; }
352    .section-header p { font-size: 17px; color: var(--text-muted); max-width: 540px; margin: 0 auto; }
353
354    /* ── FEATURES (Zepio-style sticky stack) ── */
355    .features-section { background: var(--bg-alt); }
356    .features-sticky-wrap { position: relative; }
357    .features-sticky-title {
358      text-align: center; padding: 0 0 56px;
359    }
360    .features-sticky-title h2 {
361      font-size: clamp(26px, 3.5vw, 40px); font-weight: 900; letter-spacing: -1px;
362      background: linear-gradient(135deg, var(--hero-h1-from) 40%, var(--hero-h1-to));
363      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
364    }
365    .features-sticky-title p { font-size: 16px; color: var(--text-muted); margin-top: 8px; }
366
367    .feature-stack { display: flex; flex-direction: column; gap: 0; padding: 24px 0 120px; }
368
369    .feature-panel {
370      position: sticky; top: 80px;
371      border-radius: 28px; overflow: hidden;
372      display: grid; grid-template-columns: 1fr 1fr;
373      min-height: 340px; margin-bottom: 24px;
374      box-shadow: 0 8px 40px rgba(0,0,0,0.09);
375      transition: box-shadow 0.3s;
376    }
377    .feature-panel:hover { box-shadow: 0 16px 60px rgba(46,144,179,0.18); }
378    .feature-panel:nth-child(odd) { transform: rotate(-0.6deg); }
379    .feature-panel:nth-child(even) { transform: rotate(0.6deg); }
380    .feature-stack .feature-panel:nth-child(1) { z-index: 1; }
381    .feature-stack .feature-panel:nth-child(2) { z-index: 2; }
382    .feature-stack .feature-panel:nth-child(3) { z-index: 3; }
383    .feature-stack .feature-panel:nth-child(4) { z-index: 4; }
384    .feature-stack .feature-panel:nth-child(5) { z-index: 5; }
385    .feature-stack .feature-panel:nth-child(6) { z-index: 6; }
386    .feature-stack .feature-panel:nth-child(7) { z-index: 7; }
387    .feature-stack .feature-panel:nth-child(8) { z-index: 8; }
388    .feature-stack .feature-panel:nth-child(9) { z-index: 9; }
389
390    .feature-panel-text {
391      padding: 52px 48px; display: flex; flex-direction: column; justify-content: center;
392    }
393    .feature-panel-visual {
394      display: flex; align-items: center; justify-content: center;
395      position: relative; overflow: hidden; padding: 24px;
396    }
397    .feature-panel-visual::before {
398      content: ''; position: absolute; inset: 0;
399      background: rgba(255,255,255,0.04);
400    }
401    .fp-svg { width: 88%; max-width: 340px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18)); }
402    .fp-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
403    .feature-panel-text h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 14px; line-height: 1.25; }
404    .feature-panel-text p { font-size: 15px; line-height: 1.7; margin-bottom: 20px; opacity: 0.8; }
405    .fp-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
406    .fp-list li { font-size: 14px; display: flex; align-items: flex-start; gap: 9px; opacity: 0.85; }
407    .fp-list li::before { content: '✓'; font-weight: 800; font-size: 12px; flex-shrink: 0; margin-top: 2px; }
408
409    /* Panel color themes */
410    .fp-teal    { background: linear-gradient(135deg, #E0F4FB 0%, #C8EAF5 100%); color: #0D3A50; }
411    .fp-teal    .fp-tag { color: #2E90B3; }
412    .fp-teal    .fp-list li::before { color: #2E90B3; }
413    .fp-teal    .feature-panel-visual { background: linear-gradient(135deg, #2E90B3 0%, #1E6A8A 100%); }
414
415    .fp-gold    { background: linear-gradient(135deg, #FFFBEA 0%, #FFF3C0 100%); color: #3D2E00; }
416    .fp-gold    .fp-tag { color: #B8860B; }
417    .fp-gold    .fp-list li::before { color: #B8860B; }
418    .fp-gold    .feature-panel-visual { background: linear-gradient(135deg, #F5C518 0%, #D4A017 100%); }
419
420    .fp-sky     { background: linear-gradient(135deg, #EEF8FF 0%, #D6EFFF 100%); color: #0A2A40; }
421    .fp-sky     .fp-tag { color: #0070B8; }
422    .fp-sky     .fp-list li::before { color: #0070B8; }
423    .fp-sky     .feature-panel-visual { background: linear-gradient(135deg, #0EA5E9 0%, #0078C8 100%); }
424
425    .fp-mint    { background: linear-gradient(135deg, #EAFAF5 0%, #C8F0E0 100%); color: #0A3020; }
426    .fp-mint    .fp-tag { color: #0E8060; }
427    .fp-mint    .fp-list li::before { color: #0E8060; }
428    .fp-mint    .feature-panel-visual { background: linear-gradient(135deg, #10B981 0%, #0A7050 100%); }
429
430    .fp-lavender{ background: linear-gradient(135deg, #F4F0FF 0%, #E4D8FF 100%); color: #250A50; }
431    .fp-lavender .fp-tag { color: #7C3AED; }
432    .fp-lavender .fp-list li::before { color: #7C3AED; }
433    .fp-lavender .feature-panel-visual { background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%); }
434
435    .fp-rose    { background: linear-gradient(135deg, #FFF0F5 0%, #FFD6E5 100%); color: #40001A; }
436    .fp-rose    .fp-tag { color: #D0185A; }
437    .fp-rose    .fp-list li::before { color: #D0185A; }
438    .fp-rose    .feature-panel-visual { background: linear-gradient(135deg, #F43F8E 0%, #C0185A 100%); }
439
440    .fp-slate   { background: linear-gradient(135deg, #F0F4F8 0%, #DCE8F2 100%); color: #0A1A28; }
441    .fp-slate   .fp-tag { color: #2E90B3; }
442    .fp-slate   .fp-list li::before { color: #2E90B3; }
443    .fp-slate   .feature-panel-visual { background: linear-gradient(135deg, #334155 0%, #1E293B 100%); }
444
445    .fp-amber   { background: linear-gradient(135deg, #FFF8ED 0%, #FFE8C0 100%); color: #2A1800; }
446    .fp-amber   .fp-tag { color: #C07020; }
447    .fp-amber   .fp-list li::before { color: #C07020; }
448    .fp-amber   .feature-panel-visual { background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%); }
449
450    .fp-cyan    { background: linear-gradient(135deg, #E8FFFE 0%, #C0F4F2 100%); color: #001A20; }
451    .fp-cyan    .fp-tag { color: #0891B2; }
452    .fp-cyan    .fp-list li::before { color: #0891B2; }
453    .fp-cyan    .feature-panel-visual { background: linear-gradient(135deg, #06B6D4 0%, #0E7490 100%); }
454
455    html.dark .feature-panel { box-shadow: 0 8px 40px rgba(0,0,0,0.4); }
456    html.dark .fp-teal     { background: linear-gradient(135deg, #0D2535 0%, #122E40 100%); color: #C8EAF5; }
457    html.dark .fp-gold     { background: linear-gradient(135deg, #1A1200 0%, #2A1E00 100%); color: #FFEAA0; }
458    html.dark .fp-sky      { background: linear-gradient(135deg, #071828 0%, #0A2035 100%); color: #C0E8FF; }
459    html.dark .fp-mint     { background: linear-gradient(135deg, #051A10 0%, #082818 100%); color: #B0F0D8; }
460    html.dark .fp-lavender { background: linear-gradient(135deg, #120828 0%, #1A0E38 100%); color: #DDD0FF; }
461    html.dark .fp-rose     { background: linear-gradient(135deg, #1A0010 0%, #280018 100%); color: #FFCCE0; }
462    html.dark .fp-slate    { background: linear-gradient(135deg, #0A1820 0%, #10222E 100%); color: #C0D8E8; }
463    html.dark .fp-amber    { background: linear-gradient(135deg, #180E00 0%, #221600 100%); color: #FFE0A0; }
464    html.dark .fp-cyan     { background: linear-gradient(135deg, #001820 0%, #002028 100%); color: #A0EEF8; }
465
466    /* ── INTEGRATIONS ── */
467    .integrations-section { padding: 96px 0; }
468    .integrations-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 48px; }
469    .integration-item {
470      background: var(--bg-card); border: 1px solid var(--border);
471      border-radius: var(--radius); padding: 20px 16px;
472      text-align: center; font-size: 13px; font-weight: 500;
473      color: var(--text-muted); transition: all 0.2s;
474    }
475    .integration-item:hover { border-color: var(--border-hover); color: var(--text); transform: translateY(-3px); box-shadow: var(--shadow-brand); }
476    .integration-item .icon { font-size: 26px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; height: 34px; }
477    .integration-item .icon svg { width: 28px; height: 28px; }
478
479    /* ── API SECTION ── */
480    .api-section { background: var(--bg-alt); }
481    .api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
482    .api-content .badge { margin-bottom: 20px; }
483    .api-content h2 { font-size: 36px; font-weight: 800; letter-spacing: -1px; margin-bottom: 20px; line-height: 1.2; }
484    .api-content p { font-size: 16px; color: var(--text-muted); margin-bottom: 28px; line-height: 1.7; }
485    .api-endpoints { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
486    .api-endpoint {
487      display: flex; align-items: center; gap: 12px;
488      font-size: 13px; color: var(--text-muted); padding: 10px 14px;
489      background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border);
490    }
491    .method { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.05em; }
492    .method-post { background: rgba(46,144,179,0.15); color: var(--brand); }
493    .method-get  { background: rgba(16,185,129,0.15); color: #10B981; }
494    .code-block {
495      background: var(--code-bg); border: 1px solid var(--code-border);
496      border-radius: var(--radius-lg); padding: 28px; overflow-x: auto;
497      font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; line-height: 1.8;
498    }
499    .code-block pre { color: var(--code-muted); white-space: pre; }
500    .code-key { color: #7EC8E3; }
501    .code-val { color: #C3E88D; }
502    .code-str { color: #F78C6C; }
503    .code-comment { color: #3A6070; }
504
505    /* ── PRICING ── */
506    .pricing-section { padding: 96px 0; }
507    .pricing-toggle {
508      display: flex; align-items: center; justify-content: center;
509      gap: 12px; margin-bottom: 56px;
510    }
511    .toggle-label { font-size: 14px; font-weight: 500; color: var(--text-muted); }
512    .toggle-switch { position: relative; width: 48px;
512 height: 26px; cursor: pointer; }
513    .toggle-switch input { opacity: 0; width: 0; height: 0; }
514    .toggle-track {
515      position: absolute; inset: 0;
516      background: var(--bg-card); border-radius: 100px; border: 1px solid var(--border); transition: all 0.3s;
517    }
518    .toggle-track::after {
519      content: ''; position: absolute; top: 3px; left: 3px;
520      width: 18px; height: 18px; border-radius: 50%;
521      background: var(--text-faint); transition: all 0.3s;
522    }
523    input:checked + .toggle-track { background: var(--brand); border-color: var(--brand); }
524    input:checked + .toggle-track::after { transform: translateX(22px); background: #fff; }
525    .save-badge {
526      background: rgba(245,197,24,0.15); border: 1px solid rgba(245,197,24,0.4);
527      color: #B8860B; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 100px;
528    }
529    html.dark .save-badge { color: var(--brand-gold); }
530
531    .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
532
533    .pricing-card {
534      background: var(--bg-card); border: 1px solid var(--border);
535      border-radius: 24px; padding: 36px 32px; position: relative;
536      transition: transform 0.2s, box-shadow 0.2s;
537    }
538    .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
539    .pricing-card.popular {
540      background: var(--brand); border-color: var(--brand);
541      box-shadow: 0 12px 48px rgba(46,144,179,0.35);
542      transform: scale(1.04);
543    }
544    .pricing-card.popular:hover { transform: scale(1.04) translateY(-4px); box-shadow: 0 20px 60px rgba(46,144,179,0.45); }
545    .pricing-card.popular * { color: #fff !important; }
546    .pricing-card.popular .plan-cta { background: #fff; color: var(--brand) !important; }
547    .pricing-card.popular .plan-cta:hover { background: rgba(255,255,255,0.9); }
548    .pricing-card.popular .plan-divider { background: rgba(255,255,255,0.25); }
549    .pricing-card.popular .cross { color: rgba(255,255,255,0.4) !important; }
550
551    .popular-badge {
552      position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
553      background: var(--brand-gold); color: #1A1000;
554      font-size: 11px; font-weight: 800; padding: 5px 16px;
555      border-radius: 100px; letter-spacing: 0.06em; text-transform: uppercase;
556      box-shadow: 0 4px 12px rgba(245,197,24,0.4);
557    }
558    .plan-name { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
559    .plan-price { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 6px; }
560    .plan-price-amount { font-size: 52px; font-weight: 900; letter-spacing: -2px; line-height: 1; }
561    .plan-price-period { font-size: 14px; color: var(--text-muted); padding-bottom: 8px; }
562    .plan-description { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; }
563    .plan-divider { height: 1px; background: var(--border); margin: 20px 0; }
564    .plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
565    .plan-features li { font-size: 14px; color: var(--text-muted); display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
566    .plan-features li .tick { color: var(--brand); flex-shrink: 0; font-weight: 700; }
567    .plan-features li .cross { color: var(--text-faint); flex-shrink: 0; }
568    .plan-cta { width: 100%; justify-content: center; }
569    .ph { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 10px; border-radius: 50%; background: var(--text-faint); color: #fff; cursor: help; position: relative; flex-shrink: 0; margin-left: 2px; font-style: normal; vertical-align: middle; }
570    .ph::after { content: attr(data-h); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #0f172a; color: #e2e8f0; font-size: 12px; line-height: 1.5; padding: 8px 11px; border-radius: 7px; white-space: normal; width: 230px; pointer-events: none; opacity: 0; transition: opacity 0.18s; z-index: 200; text-align: left; font-weight: 400; }
571    .ph:hover::after { opacity: 1; }
572    .pricing-card.popular .ph { background: rgba(255,255,255,0.5); }
573
574    /* ── FAQ ── */
575    .faq-section { background: var(--bg-alt); padding: 96px 0; }
576    .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
577    .faq-item {
578      background: var(--bg-card); border: 1px solid var(--border);
579      border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s;
580    }
581    .faq-item.open { border-color: var(--border-hover); }
582    .faq-question {
583      width: 100%; display: flex; align-items: center; justify-content: space-between;
584      padding: 20px 24px; background: none; border: none; cursor: pointer;
585      text-align: left; color: var(--text); font-size: 15px; font-weight: 600; gap: 16px;
586    }
587    .faq-question:hover { color: var(--brand); }
588    .faq-chevron { font-size: 18px; color: var(--text-faint); transition: transform 0.3s; flex-shrink: 0; }
589    .faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--brand); }
590    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
591    .faq-item.open .faq-answer { max-height: 300px; }
592    .faq-answer p { padding: 0 24px 22px; font-size: 14px; color: var(--text-muted); line-height: 1.75; }
593
594    /* ── BLOG ── */
595    .blog-section { padding: 96px 0; }
596    .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
597    .blog-card {
598      background: var(--bg-card); border: 1px solid var(--border);
599      border-radius: var(--radius-lg); overflow: hidden; transition: all 0.25s;
600      text-decoration: none; color: inherit; display: flex; flex-direction: column;
601    }
602    .blog-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: var(--shadow-brand); }
603    .blog-card-img {
604      height: 190px; overflow: hidden; background: var(--bg-alt);
605      display: flex; align-items: center; justify-content: center;
606    }
607    .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
608    .blog-card:hover .blog-card-img img { transform: scale(1.05); }
609    .blog-card-img .emoji-fallback { font-size: 56px; }
610    .blog-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
611    .blog-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
612    .blog-card h3 { font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; flex: 1; }
613    .blog-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
614
615    /* ── CTA SECTION ── */
616    .cta-section {
617      padding: 100px 0; text-align: center;
618      background: linear-gradient(135deg, #071820 0%, #0D2535 50%, #071820 100%);
619      position: relative; overflow: hidden;
620    }
621    /* animated aurora orbs */
622    .cta-section::before {
623      content: ''; position: absolute; inset: 0; pointer-events: none;
624      background:
625        radial-gradient(ellipse 55% 60% at 20% 50%, rgba(46,144,179,0.18) 0%, transparent 65%),
626        radial-gradient(ellipse 45% 55% at 80% 50%, rgba(58,173,212,0.12) 0%, transparent 65%),
627        radial-gradient(ellipse 40% 50% at 50% 100%, rgba(46,144,179,0.15) 0%, transparent 60%);
628      animation: ctaAurora 8s ease-in-out infinite alternate;
629    }
630    @keyframes ctaAurora {
631      0%   { opacity: 0.7; transform: scale(1); }
632      100% { opacity: 1;   transform: scale(1.06); }
633    }
634    /* floating rings */
635    .cta-ring {
636      position: absolute; border-radius: 50%; border: 1px solid rgba(58,173,212,0.1);
637      pointer-events: none; animation: ctaRingExpand 6s ease-in-out infinite;
638    }
639    .cta-ring:nth-child(1) { width: 300px; height: 300px; top: -80px; left: -80px; animation-delay: 0s; }
640    .cta-ring:nth-child(2) { width: 220px; height: 220px; bottom: -60px; right: -60px; animation-delay: 2s; }
641    .cta-ring:nth-child(3) { width: 160px; height: 160px; top: 30%; right: 8%; animation-delay: 4s; }
642    @keyframes ctaRingExpand {
643      0%,100% { transform: scale(1); opacity: 0.5; }
644      50%      { transform: scale(1.15); opacity: 1; }
645    }
646    .cta-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 20px; }
647
648    /* badge */
649    .cta-badge {
650      display: inline-flex; align-items: center; gap: 7px; margin-bottom: 28px;
651      background: rgba(46,144,179,0.15); border: 1px solid rgba(58,173,212,0.3);
652      color: #3AADD4; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
653      text-transform: uppercase; padding: 6px 14px; border-radius: 20px;
654    }
655    .cta-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: livePulse 1.8s ease infinite; }
656
657    /* headline */
658    .cta-section h2 {
659      font-size: clamp(30px, 4vw, 50px); font-weight: 900; letter-spacing: -1.5px;
660      margin-bottom: 18px; line-height: 1.1; color: #E8F4F8;
661    }
662    .cta-h2-highlight {
663      background: linear-gradient(90deg, #3AADD4 0%, #50C3EC 50%, #3AADD4 100%);
664      background-size: 200% auto;
665      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
666      animation: ctaShimmerText 3s linear infinite;
667    }
668    @keyframes ctaShimmerText {
669      0%   { background-position: 0% center; }
670      100% { background-position: 200% center; }
671    }
672    .cta-br { display: none; }
673    .cta-section p { font-size: 17px; color: rgba(122,171,184,0.9); margin-bottom: 40px; line-height: 1.7; }
674
675    /* 3-step row */
676    .cta-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 40px; flex-wrap: wrap; }
677    .cta-step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 24px; }
678    .cta-step-icon {
679      width: 48px; height: 48px; border-radius: 14px;
680      background: rgba(46,144,179,0.15); border: 1px solid rgba(58,173,212,0.25);
681      display: flex; align-items: center; justify-content: center; font-size: 22px;
682      transition: transform 0.3s, background 0.3s;
683    }
684    .cta-step:hover .cta-step-icon { transform: translateY(-4px) scale(1.08); background: rgba(46,144,179,0.28); }
685    .cta-step-num { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #3AADD4; }
686    .cta-step-label { font-size: 13px; font-weight: 600; color: #C8E8F5; }
687    .cta-step-arrow { font-size: 18px; color: rgba(58,173,212,0.3); align-self: center; margin: 0 -8px; }
688
689    /* CTA buttons */
690    .cta-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
691    .btn-cta-primary {
692      display: inline-flex; align-items: center; gap: 9px;
693      padding: 16px 32px; border-radius: 12px; font-size: 16px; font-weight: 700;
694      background: linear-gradient(135deg, #2E90B3 0%, #3AADD4 100%);
695      color: #fff; text-decoration: none; position: relative; overflow: hidden;
696      box-shadow: 0 4px 24px rgba(46,144,179,0.45);
697      transition: transform 0.2s, box-shadow 0.2s;
698    }
699    .btn-cta-primary::after {
700      content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
701      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
702      animation: ctaBtnShimmer 2.5s ease-in-out infinite;
703    }
704    @keyframes ctaBtnShimmer { 0%,100%{left:-100%} 50%{left:150%} }
705    .btn-cta-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 36px rgba(46,144,179,0.6); }
706    .btn-cta-ghost {
707      display: inline-flex; align-items: center; gap: 8px;
708      padding: 15px 28px; border-radius: 12px; font-size: 15px; font-weight: 600;
709      border: 1.5px solid rgba(58,173,212,0.35); color: #7AABB8;
710      text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s;
711    }
712    .btn-cta-ghost:hover { border-color: rgba(58,173,212,0.7); color: #3AADD4; background: rgba(46,144,179,0.08); }
713
714    /* social proof */
715    .cta-proof { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
716    .cta-avatars { display: flex; }
717    .cta-avatar {
718      width: 30px; height: 30px; border-radius: 50%; border: 2px solid #0D2535;
719      margin-left: -8px; font-size: 14px; display: flex; align-items: center; justify-content: center;
720      background: linear-gradient(135deg, #1E6A8A, #2E90B3);
721    }
722    .cta-avatars .cta-avatar:first-child { margin-left: 0; }
723    .cta-proof-text { font-size: 13px; color: rgba(122,171,184,0.8); }
724    .cta-proof-text strong { color: #3AADD4; }
725    .no-cc { font-size: 12px; color: rgba(90,143,160,0.7); margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
726    .no-cc-dot { opacity: 0.3; }
727
728    /* ── FOOTER ── */
729    footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 64px 0 32px; }
730    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
731    .footer-brand .logo { margin-bottom: 14px; display: inline-flex; }
732    .footer-brand p { font-size: 14px; color: var(--text-muted); line-height: 1.7; max-width: 260px; margin-bottom: 20px; }
733    .footer-socials { display: flex; gap: 10px; }
734    .social-btn {
735      width: 36px; height: 36px; border-radius: 8px;
736      background: var(--bg-card); border: 1px solid var(--border);
737      display: flex; align-items: center; justify-content: center;
738      text-decoration: none; font-size: 14px; color: var(--text-muted); transition: all 0.2s;
739    }
740    .social-btn:hover { border-color: var(--border-hover); color: var(--brand); }
741    .footer-col h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--text); margin-bottom: 16px; }
742    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
743    .footer-col ul li a { font-size: 14px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
744    .footer-col ul li a:hover { color: var(--brand); }
745    .footer-bottom {
746      border-top: 1px solid var(--border); padding-top: 24px;
747      display: flex; align-items: center; justify-content: space-between;
748      font-size: 13px; color: var(--text-faint); flex-wrap: wrap; gap: 12px;
749    }
750
751    /* ── SCROLL ANIMATIONS ── */
752    .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
753    .fade-up.visible { opacity: 1; transform: translateY(0); }
754    .stagger-1 { transition-delay: 0.1s; }
755    .stagger-2 { transition-delay: 0.2s; }
756
757
758    /* ── MOBILE: hide hover tooltips (touch can't hover) ── */
759    @media (max-width: 768px) {
760      .ph::after { display: none; }
761    }
762
763    /* ── WHATSAPP FLOAT BUTTON ── */
764    #waFloatBtn {
765      position: fixed; bottom: 24px; right: 24px; z-index: 9999;
766      width: 56px; height: 56px; border-radius: 50%;
767      background: #25D366; display: flex; align-items: center; justify-content: center;
768      box-shadow: 0 4px 20px rgba(37,211,102,0.45);
769      text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
770      animation: waPulse 2s ease-in-out infinite;
771    }
772    #waFloatBtn:hover { transform: scale(1.12); box-shadow: 0 6px 28px rgba(37,211,102,0.65); animation: none; }
773    @keyframes waPulse {
774      0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.4); }
775      50%      { box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 0 0 12px rgba(37,211,102,0); }
776    }
777
778    /* ── REDUCED MOTION ── */
779    @media (prefers-reduced-motion: reduce) {
780      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
781      .hero-word-swap { transition: none !important; }
782      .notif-progress-bar { transition: none !important; }
783    }
784
785    /* ── RESPONSIVE ── */
786    @media (max-width: 1024px) {
787      .integrations-grid { grid-template-columns: repeat(4, 1fr); }
788      .api-grid { grid-template-columns: 1fr; gap: 40px; }
789      .footer-grid { grid-template-columns: 1fr 1fr; }
790      .feature-panel { grid-template-columns: 1fr; min-height: unset; }
791      .feature-panel-visual { height: 180px; }
792    }
793    @media (max-width: 768px) {
794      .nav-links, .nav-signin { display: none; }
795      .nav-mobile-toggle { display: block; }
796      .hero-inner { grid-template-columns: 1fr; gap: 36px; min-height: unset; }
797      .hero-right { order: -1; overflow: hidden; }
798      .hero-stats { max-width: 400px; }
799      .pricing-grid { grid-template-columns: 1fr; }
800      .pricing-card.popular { transform: none; }
801      .blog-grid { grid-template-columns: 1fr; }
802      .integrations-grid { grid-template-columns: repeat(3, 1fr); }
803      .footer-grid { grid-template-columns: 1fr; gap: 28px; }
804      .footer-bottom { flex-direction: column; text-align: center; }
805      .feature-panel:nth-child(odd), .feature-panel:nth-child(even) { transform: none; }
806      .hero-tags { display: none; }
807    }
808    @media (max-width: 480px) {
809      .integrations-grid { grid-template-columns: repeat(2, 1fr); }
810      .hero-proof { flex-direction: column; gap: 10px; align-items: center; }
811      .hero-proof-item { justify-content: center; }
812      .hero-sub { font-size: 16px; }
813      .hero-notif-wrap { margin-top: 36px; }
814      .no-cc { flex-direction: column; gap: 4px; }
815      .no-cc-dot { display: none; }
816      .cta-section p { font-size: 15px; padding: 0 4px; }
817      .cta-br { display: block; }
818      .cta-steps { gap: 0; }
819      .cta-step { padding: 12px 14px; }
820      .cta-step-arrow { display: none; }
821      .cta-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
822      .hero-actions { flex-direction: column; align-items: stretch; }
823      .hero-actions .btn { width: 100%; justify-content: center; }
824    }
825  </style>
826
827
828
829  <!-- Pixel Code - https://pushify.com/ -->
830  
830<script defer src="https://pushify.com/pixel/OIlDJOyZeAjuV1Sw"></script>
830
831  <!-- END Pixel Code -->
832</head>
833<body>
834
835
836
837
838<!-- ── MOBILE NAV BACKDROP ── -->
839<div class="mobile-nav-backdrop" id="mobileNavBackdrop" onclick="closeMobileNav()"></div>
840
841<!-- ── MOBILE NAV DRAWER ── -->
842<div class="mobile-nav" id="mobileNav">
843  <div class="mobile-nav-header">
844    <img src="https://pushify.com/uploads/main/4c2b584f6f0013e380a5b53a3a1e0bea.png" alt="Pushify" />
845    <button class="mobile-nav-close" onclick="closeMobileNav()">✕</button>
846  </div>
847  <div class="mobile-nav-links">
848    <a href="https://pushify.com/plan" style="--d:0"><span class="mnav-icon">💰</span>Plans</a>
849    <a href="https://pushify.com/api-documentation" style="--d:50"><span class="mnav-icon">🔌</span>API</a>
850    <a href="https://pushify.com/blog" style="--d:100"><span class="mnav-icon">📝</span>Blog</a>
851    <a href="https://pushify.com/contact" style="--d:150"><span class="mnav-icon">💬</span>Contact</a>
852    <div class="mobile-nav-divider"></div>
853    <a href="https://pushify.com/login" id="mobileAuthLink" style="--d:200"><span class="mnav-icon">👤</span>Sign in</a>
854  </div>
855  <div class="mobile-nav-footer">
856    <a href="https://pushify.com/register" class="btn btn-primary" style="width:100%;justify-content:center">Get started free →</a>
857  </div>
858</div>
859
860<!-- ── NAV ── -->
861<nav>
862  <div class="container nav-inner">
863    <a href="https://pushify.com" class="logo">
864      <div class="logo-icon"><img src="https://pushify.com/uploads/main/4c2b584f6f0013e380a5b53a3a1e0bea.png" alt="Pushify" /></div>
865    </a>
866    <div class="nav-links">
867      <a href="https://pushify.com/plan">Plans</a>
868      <a href="https://pushify.com/api-documentation">API</a>
869      <a href="https://pushify.com/blog">Blog</a>
870      <a href="https://pushify.com/contact">Contact</a>
871    </div>
872    <div class="nav-actions">
873      <a href="https://pushify.com/login" class="nav-signin" id="navAuthLink">Sign in</a>
874
875      <button class="theme-toggle" id="themeToggle" onclick="toggleTheme()" title="Toggle theme">
876        <svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
877        <svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
878      </button>
879      <button class="nav-mobile-toggle" onclick="openMobileNav()">☰</button>
880    </div>
881  </div>
882</nav>
883
884<!-- ── HERO ── -->
885<section class="hero">
886  <div class="hero-bg"></div>
887  <div class="hero-grid"></div>
888  <div class="container">
889    <div class="hero-inner">
890
891      <!-- LEFT -->
892      <div class="hero-left">
893        <div class="hero-badge"><span class="badge">🚀 Free Forever — No Credit Card</span></div>
894        <h1>Send push notifications<br>to <span class="hero-word-swap" id="heroWord">unlimited subscribers</span><br>for $0 — forever.</h1>
895        <p class="hero-sub">The only push platform that never limits your subscribers or sends. Campaigns, flows, RSS automations, segmentation & full REST API — all completely free.</p>
896        <div class="hero-trust" id="heroTrust">
897          <div class="hero-avatar-stack" aria-hidden="true">
898            <div class="ha" style="background:#F43F8E">J</div>
899            <div class="ha" style="background:#8B5CF6">M</div>
900            <div class="ha" style="background:#10B981">A</div>
901            <div class="ha" style="background:#F59E0B">R</div>
902            <div class="ha" style="background:#2E90B3">K</div>
903          </div>
904          <span class="hero-trust-text">Trusted by <strong>12,000+</strong> websites worldwide</span>
905        </div>
906        <div class="hero-stats">
907          <div class="hstat"><span class="hstat-n">∞</span><span class="hstat-l">Subscribers</span></div>
908          <div class="hstat"><span class="hstat-n">∞</span><span class="hstat-l">Sends/month</span></div>
909          <div class="hstat"><span class="hstat-n">$0</span><span class="hstat-l">Forever</span></div>
910          <div class="hstat"><span class="hstat-n">&lt;5min</span><span class="hstat-l">Setup</span></div>
911        </div>
912        <div class="hero-actions">
913          <a href="https://pushify.com/register" class="btn btn-primary btn-large" id="heroCta">Start for free →</a>
914          <a href="#features" class="btn btn-ghost btn-large">See features ↓</a>
915        </div>
916        <div class="hero-proof">
917          <div class="hero-proof-item"><span class="proof-check">✓</span><span>No credit card required</span></div>
918          <div class="hero-proof-item"><span class="proof-check">✓</span><span>Unlimited subscribers</span></div>
919          <div class="hero-proof-item"><span class="proof-check">✓</span><span>Live in under 5 minutes</span></div>
920          <div class="hero-proof-item"><span class="proof-check">✓</span><span>Free forever — no expiry date</span></div>
921        </div>
922      </div>
923
924      <!-- RIGHT: live notification demo -->
925      <div class="hero-right">
926        <div class="hero-right-glow"></div>
927        <div class="notif-demo">
928          <div class="notif-demo-eyebrow">Live preview — what your subscribers see</div>
929          <div class="notif-stack" id="notifStack"></div>
930          <div class="notif-progress"><div class="notif-progress-bar" id="notifProgress"></div></div>
931          <div class="notif-dots" id="notifDots"></div>
932          <div class="hero-tags">
933            <span class="hero-tag">🛒 E-commerce</span>
934            <span class="hero-tag">📝 Blogs</span>
935            <span class="hero-tag">📰 News</span>
936            <span class="hero-tag">🚀 SaaS</span>
937          </div>
938        </div>
939      </div>
940
941    </div>
942  </div>
943</section>
944
945<!-- ── BROWSERS ── -->
946<div class="browsers-section">
947  <div class="container">
948    <p class="browsers-label">Supported on all major platforms & browsers</p>
949    <div class="browsers-list">
950      <div class="browser-logo">
951        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M20 20L20 2A18 18 0 0 1 35.6 29Z" fill="#EA4335"/><path d="M20 20L35.6 29A18 18 0 0 1 4.4 29Z" fill="#FBBC04"/><path d="M20 20L4.4 29A18 18 0 0 1 20 2Z" fill="#34A853"/><circle cx="20" cy="20" r="11" fill="white"/><circle cx="20" cy="20" r="7.5" fill="#4285F4"/></svg>
952        <span>Chrome</span>
953      </div>
954      <div class="browser-logo">
955        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sfg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1EC4F5"/><stop offset="100%" stop-color="#0074DA"/></linearGradient></defs><circle cx="20" cy="20" r="20" fill="url(#sfg)"/><circle cx="20" cy="20" r="14" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="1"/><polygon points="20,7 23.5,20 20,18 16.5,20" fill="#FF3B30"/><polygon points="20,33 16.5,20 20,22 23.5,20" fill="white"/><circle cx="20" cy="20" r="2.5" fill="white" opacity="0.7"/></svg>
956        <span>Safari</span>
957      </div>
958      <div class="browser-logo">
959        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="edg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#0078D4"/><stop offset="100%" stop-color="#50E6FF"/></linearGradient></defs><circle cx="20" cy="20" r="20" fill="url(#edg)"/><path d="M10 19 Q10 11 20 11 Q30 11 30 19 L10 19" fill="none" stroke="white" stroke-width="2.8" stroke-linecap="round"/><path d="M10 19 Q11 29 20 30 Q28 30 30 24" fill="none" stroke="white" stroke-width="2.8" stroke-linecap="round"/><line x1="10" y1="19" x2="22" y2="19" stroke="white" stroke-width="2.8" stroke-linecap="round"/></svg>
960        <span>Edge</span>
961      </div>
962      <div class="browser-logo">
963        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="ffg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0750BB"/><stop offset="100%" stop-color="#0250BB"/></linearGradient></defs><circle cx="20" cy="20" r="20" fill="url(#ffg)"/><circle cx="20" cy="21" r="8.5" fill="#00B3F4" opacity="0.9"/><path d="M20 5 C26 9 31 8 29 15 C32 11 34 15 31 19 C35 14 30 6 24 9 C27 5 23 3 20 5Z" fill="#FF7139"/><path d="M20 5 C14 9 9 8 11 15 C8 11 6 15 9 19 C5 14 10 6 16 9 C13 5 17 3 20 5Z" fill="#FF9500" opacity="0.6"/></svg>
964        <span>Firefox</span>
965      </div>
966      <div class="browser-logo">
967        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="20" fill="#1428A0"/><text x="20" y="27" font-size="20" font-weight="700" text-anchor="middle" fill="white" font-family="sans-serif">S</text></svg>
968        <span>Samsung</span>
969      </div>
970      <div class="browser-logo">
971        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="opg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#FF1B2D"/><stop offset="100%" stop-color="#A70010"/></linearGradient></defs><circle cx="20" cy="20" r="20" fill="url(#opg)"/><ellipse cx="20" cy="20" rx="8" ry="11.5" fill="none" stroke="white" stroke-width="2.8"/></svg>
972        <span>Opera</span>
973      </div>
974    </div>
975    <p class="browsers-platforms">Windows · macOS · Android · iOS</p>
976  </div>
977</div>
978
979<!-- ── FEATURES (Zepio sticky-stack style) ── -->
980<section class="features-section" id="features">
981  <div class="container">
982    <div class="features-sticky-wrap">
983      <div class="features-sticky-title fade-up">
984        <span class="badge" style="margin-bottom:14px">Everything you need</span>
985        <h2>Powerful features, zero complexity</h2>
986        <p>Everything you need to capture, engage, and retain subscribers.</p>
987      </div>
988      <div class="feature-stack">
989
990        <div class="feature-panel fp-teal">
991          <div class="feature-panel-text">
992            <div class="fp-tag">Web Push</div>
993            <h3>Highly configurable notifications</h3>
994            <p>Rich, interactive push notifications with every option you need — images, action buttons, TTL and more.</p>
995            <ul class="fp-list">
996              <li>Attach images to notifications</li>
997              <li>2× custom action buttons</li>
998              <li>Dynamic titles & descriptions</li>
999              <li>Silent mode, urgency & TTL controls</li>
1000            </ul>
1001          </div>
1002          <div class="feature-panel-visual">
1003            <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg">
1004              <circle cx="240" cy="28" r="44" fill="rgba(255,255,255,0.06)"/>
1005              <circle cx="28" cy="168" r="32" fill="rgba(255,255,255,0.06)"/>
1006              <rect x="18" y="26" width="244" height="144" rx="14" fill="white" opacity="0.94"/>
1007              <rect x="18" y="26" width="244" height="6" rx="3" fill="#34A853" opacity="0.7"/>
1008              <rect x="36" y="54" width="36" height="36" rx="9" fill="#2E90B3" opacity="0.9"/>
1009              <rect x="46" y="64" width="16" height="16" rx="3" fill="white" opacity="0.6"/>
1010              <rect x="84" y="57" width="104" height="8" rx="4" fill="#1a1a2e" opacity="0.72"/>
1011              <rect x="84" y="71" width="146" height="6" rx="3" fill="#555" opacity="0.32"/>
1012              <rect x="84" y="82" width="112" height="6" rx="3" fill="#555" opacity="0.22"/>
1013              <rect x="34" y="114" width="84" height="28" rx="7" fill="#2E90B3"/>
1014              <rect x="34" y="114" width="84" height="28" rx="7" fill="rgba(0,0,0,0.08)"/>
1015              <rect x="50" y="124" width="52" height="7" rx="3" fill="white" opacity="0.92"/>
1016              <rect x="130" y="114" width="84" height="28" rx="7" fill="none" stroke="rgba(255,255,255,0.35)" stroke-width="1.5"/>
1017              <rect x="130" y="114" width="84" height="28" rx="7" fill="rgba(255,255,255,0.08)"/>
1018              <rect x="147" y="124" width="50" height="7" rx="3" fill="white" opacity="0.5"/>
1019              <text x="252" y="44" font-size="11" fill="rgba(255,255,255,0.45)" text-anchor="middle" font-family="sans-serif">✕</text>
1020            </svg>
1021          </div>
1022        </div>
1023
1024        <div class="feature-panel fp-gold">
1025          <div class="feature-panel-visual">
1026            <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg">
1027              <circle cx="250" cy="26" r="40" fill="rgba(255,255,255,0.07)"/>
1028              <rect x="18" y="18" width="244" height="160" rx="14" fill="white" opacity="0.93"/>
1029              <rect x="34" y="34" width="94" height="8" rx="4" fill="#333" opacity="0.68"/>
1030              <rect x="204" y="32" width="42" height="16" rx="8" fill="#22c55e" opacity="0.18"/>
1031              <rect x="210" y="37" width="30" height="6" rx="3" fill="#22c55e" opacity="0.65"/>
1032              <line x1="34" y1="58" x2="246" y2="58" stroke="#eee" stroke-width="1"/>
1033              <rect x="34" y="72" width="46" height="6" rx="3" fill="#aaa" opacity="0.5"/>
1034              <rect x="88" y="70" width="130" height="10" rx="5" fill="#2E90B3" opacity="0.88"/>
1035              <rect x="226" y="72" width="16" height="6" rx="3" fill="#555" opacity="0.5"/>
1036              <rect x="34" y="98" width="46" height="6" rx="3" fill="#aaa" opacity="0.5"/>
1037              <rect x="88" y="96" width="80" height="10" rx="5" fill="#F5C518" opacity="0.88"/>
1038              <rect x="176" y="98" width="16" height="6" rx="3" fill="#555" opacity="0.5"/>
1039              <rect x="34" y="124" width="46" height="6" rx="3" fill="#aaa" opacity="0.5"/>
1040              <rect x="88" y="122" width="40" height="10" rx="5" fill="#F43F8E" opacity="0.8"/>
1041              <rect x="136" y="124" width="16" height="6" rx="3" fill="#555" opacity="0.5"/>
1042              <rect x="34" y="148" width="28" height="6" rx="3" fill="#ddd" opacity="0.6"/>
1043              <rect x="72" y="148" width="28" height="6" rx="3" fill="#ddd" opacity="0.6"/>
1044              <rect x="110" y="148" width="28" height="6" rx="3" fill="#ddd" opacity="0.6"/>
1045            </svg>
1046          </div>
1047          <div class="feature-panel-text">
1048            <div class="fp-tag">Campaigns</div>
1049            <h3>Fully featured push campaigns</h3>
1050            <p>Prepare, schedule and send targeted campaigns to all or specific segments of your audience.</p>
1051            <ul class="fp-list">
1052              <li>Spintax for dynamic content</li>
1053              <li>Custom parameter merging</li>
1054              <li>Segment-targeted sends</li>
1055              <li>Detailed post-send insights</li>
1056            </ul>
1057          </div>
1058        </div>
1059
1060        <div class="feature-panel fp-mint">
1061          <div class="feature-panel-text">
1062            <div class="fp-tag">Flows</div>
1063            <h3>Automated drip notification flows</h3>
1064            <p>Set-and-forget automations that onboard, nurture and convert from day one.</p>
1065            <ul class="fp-list">
1066              <li>After 5 min: Welcome notification</li>
1067              <li>After 1 day: Tutorial & onboarding</li>
1068              <li>After 7 days: Free trial offer</li>
1069              <li>After 37 days: Upgrade discount</li>
1070            </ul>
1071          </div>
1072          <div class="feature-panel-visual">
1073            <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg">
1074              <circle cx="240" cy="30" r="42" fill="rgba(255,255,255,0.06)"/>
1075              <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/>
1076              <rect x="34" y="30" width="78" height="7" rx="3" fill="#333" opacity="0.65"/>
1077              <line x1="34" y1="50" x2="246" y2="50" stroke="#eee" stroke-width="1"/>
1078              <line x1="54" y1="60" x2="54" y2="170" stroke="#10B981" stroke-width="2" stroke-dasharray="3 3" opacity="0.35"/>
1079              <circle cx="54" cy="68" r="8" fill="#10B981"/>
1080              <rect x="54" y="64" width="8" height="8" rx="4" fill="white" opacity="0.5"/>
1081              <rect x="72" y="64" width="88" height="7" rx="3" fill="#333" opacity="0.65"/>
1082              <rect x="72" y="75" width="58" height="5" rx="2" fill="#888" opacity="0.35"/>
1083              <rect x="178" y="62" width="58" height="14" rx="7" fill="#E0F5EE"/>
1084              <rect x="184" y="67" width="46" height="5" rx="2" fill="#10B981" opacity="0.6"/>
1085              <circle cx="54" cy="104" r="8" fill="#10B981" opacity="0.75"/>
1086              <rect x="54" y="100" width="8" height="8" rx="4" fill="white" opacity="0.5"/>
1087              <rect x="72" y="100" width="108" height="7" rx="3" fill="#333" opacity="0.58"/>
1088              <rect x="72" y="111" width="68" height="5" rx="2" fill="#888" opacity="0.3"/>
1089              <rect x="194" y="98" width="50" height="14" rx="7" fill="#E0F5EE"/>
1090              <rect x="200" y="103" width="38" height="5" rx="2" fill="#10B981" opacity="0.5"/>
1091              <circle cx="54" cy="140" r="8" fill="#10B981" opacity="0.55"/>
1092              <rect x="54" y="136" width="8" height="8" rx="4" fill="white" opacity="0.5"/>
1093              <rect x="72" y="136" width="94" height="7" rx="3" fill="#333" opacity="0.5"/>
1094              <rect x="72" y="147" width="74" height="5" rx="2" fill="#888" opacity="0.25"/>
1095              <rect x="184" y="134" width="58" height="14" rx="7" fill="#E0F5EE"/>
1096              <rect x="190" y="139" width="46" height="5" rx="2" fill="#10B981" opacity="0.4"/>
1097            </svg>
1098          </div>
1099        </div>
1100
1101        <div class="feature-panel fp-lavender">
1102          <div class="feature-panel-visual">
1103            <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg">
1104              <circle cx="36" cy="30" r="38" fill="rgba(255,255,255,0.07)"/>
1105              <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/>
1106              <rect x="34" y="30" width="84" height="7" rx="3" fill="#333" opacity="0.65"/>
1107              <line x1="34" y1="50" x2="246" y2="50" stroke="#eee" stroke-width="1"/>
1108              <rect x="34" y="64" width="60" height="20" rx="10" fill="#8B5CF6" opacity="0.15"/>
1109              <rect x="40" y="71" width="48" height="6" rx="3" fill="#7C3AED" opacity="0.7"/>
1110              <rect x="104" y="64" width="72" height="20" rx="10" fill="#8B5CF6" opacity="0.12"/>
1111              <rect x="110" y="71" width="60" height="6" rx="3" fill="#7C3AED" opacity="0.55"/>
1112              <rect x="186" y="64" width="58" height="20" rx="10" fill="#8B5CF6" opacity="0.1"/>
1113              <rect x="192" y="71" width="46" height="6" rx="3" fill="#7C3AED" opacity="0.45"/>
1114              <rect x="34" y="94" width="66" height="20" rx="10" fill="#8B5CF6" opacity="0.1"/>
1115              <rect x="40" y="101" width="54" height="6" rx="3" fill="#7C3AED" opacity="0.45"/>
1116              <rect x="110" y="94" width="56" height="20" rx="10" fill="#8B5CF6" opacity="0.12"/>
1117              <rect x="116" y="101" width="44" height="6" rx="3" fill="#7C3AED" opacity="0.5"/>
1118              <line x1="34" y1="128" x2="246" y2="128" stroke="#eee" stroke-width="1"/>
1119              <rect x="34" y="140" width="140" height="7" rx="3" fill="#555" opacity="0.3"/>
1120              <rect x="34" y="152" width="40" height="16" rx="8" fill="#8B5CF6"/>
1121              <rect x="40" y="157" width="28" height="6" rx="3" fill="white" opacity="0.85"/>
1122            </svg>
1123          </div>
1124          <div class="feature-panel-text">
1125            <div class="fp-tag">Segments</div>
1126            <h3>Custom subscriber groups</h3>
1127            <p>Slice and dice your audience for laser-targeted messaging based on any attribute.</p>
1128            <ul class="fp-list">
1129              <li>CSV import of custom subscribers</li>
1130              <li>Filter by continent, country & city</li>
1131              <li>Device, OS & browser targeting</li>
1132              <li>Browser language filters</li>
1133            </ul>
1134          </div>
1135        </div>
1136
1137        <div class="feature-panel fp-sky">
1138          <div class="feature-panel-text">
1139            <div class="fp-tag">RSS Automations</div>
1140            <h3>RSS to push notifications</h3>
1141            <p>Automatically push notifications whenever your RSS feed publishes new content.</p>
1142            <ul class="fp-list">
1143              <li>
1143Fully featured rich notifications</li>
1144              <li>Configurable feed check intervals</li>
1145              <li>Spread out delivery with delays</li>
1146              <li>Dynamic RSS title & description</li>
1147            </ul>
1148          </div>
1149          <div class="feature-panel-visual">
1150            <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg">
1151              <circle cx="240" cy="160" r="42" fill="rgba(255,255,255,0.06)"/>
1152              <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/>
1153              <rect x="34" y="30" width="88" height="7" rx="3" fill="#333" opacity="0.65"/>
1154              <circle cx="226" cy="34" r="12" fill="#0EA5E9" opacity="0.15"/>
1155              <rect x="220" y="30" width="12" height="8" rx="2" fill="#0EA5E9" opacity="0.7"/>
1156              <line x1="34" y1="52" x2="246" y2="52" stroke="#eee" stroke-width="1"/>
1157              <rect x="34" y="64" width="6" height="6" rx="1" fill="#F97316"/>
1158              <rect x="46" y="62" width="160" height="7" rx="3" fill="#333" opacity="0.62"/>
1159              <rect x="46" y="73" width="110" height="5" rx="2" fill="#888" opacity="0.3"/>
1160              <rect x="230" y="64" width="16" height="16" rx="4" fill="#0EA5E9" opacity="0.2"/>
1161              <rect x="234" y="69" width="8" height="6" rx="2" fill="#0EA5E9" opacity="0.7"/>
1162              <line x1="34" y1="90" x2="246" y2="90" stroke="#f5f5f5" stroke-width="1"/>
1163              <rect x="34" y="98" width="6" height="6" rx="1" fill="#F97316"/>
1164              <rect x="46" y="96" width="148" height="7" rx="3" fill="#333" opacity="0.56"/>
1165              <rect x="46" y="107" width="100" height="5" rx="2" fill="#888" opacity="0.27"/>
1166              <rect x="230" y="98" width="16" height="16" rx="4" fill="#0EA5E9" opacity="0.2"/>
1167              <rect x="234" y="103" width="8" height="6" rx="2" fill="#0EA5E9" opacity="0.7"/>
1168              <line x1="34" y1="124" x2="246" y2="124" stroke="#f5f5f5" stroke-width="1"/>
1169              <rect x="34" y="132" width="6" height="6" rx="1" fill="#F97316"/>
1170              <rect x="46" y="130" width="136" height="7" rx="3" fill="#333" opacity="0.5"/>
1171              <rect x="46" y="141" width="88" height="5" rx="2" fill="#888" opacity="0.24"/>
1172              <rect x="230" y="132" width="16" height="16" rx="4" fill="#0EA5E9" opacity="0.2"/>
1173              <rect x="234" y="137" width="8" height="6" rx="2" fill="#0EA5E9" opacity="0.7"/>
1174            </svg>
1175          </div>
1176        </div>
1177
1178        <div class="feature-panel fp-amber">
1179          <div class="feature-panel-visual">
1180            <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg">
1181              <circle cx="36" cy="26" r="36" fill="rgba(255,255,255,0.07)"/>
1182              <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/>
1183              <rect x="34" y="30" width="88" height="7" rx="3" fill="#333" opacity="0.65"/>
1184              <line x1="34" y1="50" x2="246" y2="50" stroke="#eee" stroke-width="1"/>
1185              <rect x="34" y="60" width="34" height="34" rx="6" fill="#F59E0B" opacity="0.15"/>
1186              <rect x="40" y="66" width="22" height="7" rx="3" fill="#C07020" opacity="0.6"/>
1187              <rect x="40" y="77" width="16" height="5" rx="2" fill="#C07020" opacity="0.4"/>
1188              <rect x="78" y="60" width="34" height="34" rx="6" fill="#F59E0B" opacity="0.12"/>
1189              <rect x="84" y="66" width="22" height="7" rx="3" fill="#C07020" opacity="0.55"/>
1190              <rect x="84" y="77" width="16" height="5" rx="2" fill="#C07020" opacity="0.35"/>
1191              <rect x="122" y="60" width="34" height="34" rx="6" fill="#F59E0B" opacity="0.1"/>
1192              <rect x="128" y="66" width="22" height="7" rx="3" fill="#C07020" opacity="0.5"/>
1193              <rect x="128" y="77" width="16" height="5" rx="2" fill="#C07020" opacity="0.3"/>
1194              <rect x="166" y="60" width="34" height="34" rx="6" fill="#F59E0B" opacity="0.2"/>
1195              <rect x="172" y="66" width="22" height="7" rx="3" fill="#C07020" opacity="0.7"/>
1196              <rect x="172" y="77" width="16" height="5" rx="2" fill="#C07020" opacity="0.5"/>
1197              <rect x="210" y="60" width="34" height="34" rx="6" fill="#F59E0B" opacity="0.08"/>
1198              <rect x="216" y="66" width="22" height="7" rx="3" fill="#C07020" opacity="0.45"/>
1199              <line x1="34" y1="108" x2="246" y2="108" stroke="#eee" stroke-width="1"/>
1200              <rect x="34" y="120" width="116" height="7" rx="3" fill="#555" opacity="0.35"/>
1201              <rect x="34" y="134" width="86" height="22" rx="6" fill="#F59E0B"/>
1202              <rect x="44" y="142" width="66" height="6" rx="3" fill="white" opacity="0.9"/>
1203              <rect x="130" y="134" width="74" height="22" rx="6" fill="none" stroke="#F59E0B" stroke-width="1.5" opacity="0.5"/>
1204            </svg>
1205          </div>
1206          <div class="feature-panel-text">
1207            <div class="fp-tag">Recurring Campaigns</div>
1208            <h3>Campaigns on autopilot</h3>
1209            <p>Schedule campaigns to fire automatically — hourly, daily, weekly or monthly.</p>
1210            <ul class="fp-list">
1211              <li>Hour & minute scheduling</li>
1212              <li>Select specific days of the week</li>
1213              <li>Select days of the month</li>
1214            </ul>
1215          </div>
1216        </div>
1217
1218        <div class="feature-panel fp-rose">
1219          <div class="feature-panel-text">
1220            <div class="fp-tag">PWA Builder</div>
1221            <h3>Intelligent PWA builder</h3>
1222            <p>Create beautiful Progressive Web Apps for any website without writing a single line of code.</p>
1223            <ul class="fp-list">
1224              <li>Create your PWA in minutes</li>
1225              <li>Works for any website or CMS</li>
1226              <li>Zero coding required</li>
1227            </ul>
1228          </div>
1229          <div class="feature-panel-visual">
1230            <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg">
1231              <circle cx="140" cy="98" r="54" fill="rgba(255,255,255,0.06)"/>
1232              <rect x="96" y="16" width="88" height="164" rx="18" fill="white" opacity="0.94"/>
1233              <rect x="112" y="22" width="56" height="8" rx="4" fill="#ddd" opacity="0.6"/>
1234              <circle cx="140" cy="26" r="3" fill="#ccc" opacity="0.5"/>
1235              <rect x="106" y="40" width="68" height="90" rx="4" fill="#f8f8f8"/>
1236              <rect x="110" y="44" width="60" height="38" rx="4" fill="#E0F4FB"/>
1237              <rect x="116" y="50" width="24" height="24" rx="6" fill="#2E90B3" opacity="0.7"/>
1238              <rect x="146" y="52" width="18" height="5" rx="2" fill="#333" opacity="0.5"/>
1239              <rect x="146" y="61" width="24" height="4" rx="2" fill="#888" opacity="0.3"/>
1240              <rect x="110" y="90" width="60" height="14" rx="7" fill="#2E90B3"/>
1241              <rect x="124" y="94" width="32" height="5" rx="2" fill="white" opacity="0.88"/>
1242              <rect x="110" y="110" width="60" height="10" rx="5" fill="none" stroke="#ddd" stroke-width="1"/>
1243              <rect x="118" y="114" width="44" height="4" rx="2" fill="#aaa" opacity="0.4"/>
1244              <rect x="116" y="130" width="14" height="4" rx="2" fill="#22c55e" opacity="0.6"/>
1245              <rect x="116" y="138" width="14" height="4" rx="2" fill="#22c55e" opacity="0.5"/>
1246              <rect x="133" y="130" width="40" height="4" rx="2" fill="#888" opacity="0.3"/>
1247              <rect x="133" y="138" width="34" height="4" rx="2" fill="#888" opacity="0.25"/>
1248              <rect x="118" y="168" width="44" height="6" rx="3" fill="#ddd" opacity="0.5"/>
1249              <circle cx="140" cy="175" r="4" fill="#ddd" opacity="0.5"/>
1250            </svg>
1251          </div>
1252        </div>
1253
1254        <div class="feature-panel fp-cyan">
1255          <div class="feature-panel-visual">
1256            <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg">
1257              <circle cx="36" cy="160" r="40" fill="rgba(255,255,255,0.06)"/>
1258              <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/>
1259              <rect x="34" y="30" width="98" height="7" rx="3" fill="#333" opacity="0.65"/>
1260              <circle cx="220" cy="34" r="8" fill="#06B6D4" opacity="0.2"/>
1261              <circle cx="220" cy="34" r="4" fill="#06B6D4" opacity="0.6"/>
1262              <line x1="34" y1="52" x2="246" y2="52" stroke="#eee" stroke-width="1"/>
1263              <rect x="34" y="64" width="32" height="32" rx="8" fill="#2563EB" opacity="0.15"/>
1264              <rect x="42" y="76" width="16" height="8" rx="3" fill="#2563EB" opacity="0.7"/>
1265              <rect x="76" y="64" width="32" height="32" rx="8" fill="#7C3AED" opacity="0.15"/>
1266              <rect x="84" y="76" width="16" height="8" rx="3" fill="#7C3AED" opacity="0.7"/>
1267              <rect x="118" y="64" width="32" height="32" rx="8" fill="#059669" opacity="0.15"/>
1268              <rect x="126" y="76" width="16" height="8" rx="3" fill="#059669" opacity="0.7"/>
1269              <rect x="160" y="64" width="32" height="32" rx="8" fill="#DC2626" opacity="0.15"/>
1270              <rect x="168" y="76" width="16" height="8" rx="3" fill="#DC2626" opacity="0.7"/>
1271              <rect x="202" y="64" width="32" height="32" rx="8" fill="#D97706" opacity="0.15"/>
1272              <rect x="210" y="76" width="16" height="8" rx="3" fill="#D97706" opacity="0.7"/>
1273              <line x1="34" y1="110" x2="246" y2="110" stroke="#f0f0f0" stroke-width="1"/>
1274              <rect x="34" y="122" width="36" height="22" rx="6" fill="#06B6D4" opacity="0.12"/>
1275              <rect x="80" y="122" width="36" height="22" rx="6" fill="#06B6D4" opacity="0.12"/>
1276              <rect x="126" y="122" width="36" height="22" rx="6" fill="#06B6D4" opacity="0.12"/>
1277              <rect x="172" y="122" width="36" height="22" rx="6" fill="#06B6D4" opacity="0.12"/>
1278              <rect x="38" y="130" width="28" height="5" rx="2" fill="#0891B2" opacity="0.5"/>
1279              <rect x="84" y="130" width="28" height="5" rx="2" fill="#0891B2" opacity="0.5"/>
1280              <rect x="130" y="130" width="28" height="5" rx="2" fill="#0891B2" opacity="0.5"/>
1281              <rect x="176" y="130" width="28" height="5" rx="2" fill="#0891B2" opacity="0.5"/>
1282              <rect x="34" y="158" width="120" height="6" rx="3" fill="#888" opacity="0.25"/>
1283            </svg>
1284          </div>
1285          <div class="feature-panel-text">
1286            <div class="fp-tag">Notification Alerts</div>
1287            <h3>New subscriber notifications</h3>
1288            <p>Get alerted instantly via your preferred channel whenever someone new subscribes.</p>
1289            <ul class="fp-list">
1290              <li>Email, Webhook, Slack, Discord</li>
1291              <li>Telegram, WhatsApp, SMS</li>
1292              <li>Phone call, X tweet, MS Teams</li>
1293              <li>Google Chat & internal notifications</li>
1294            </ul>
1295          </div>
1296        </div>
1297
1298        <div class="feature-panel fp-slate">
1299          <div class="feature-panel-text">
1300            <div class="fp-tag">Subscribers</div>
1301            <h3>
1301Comprehensive subscriber journey</h3>
1302            <p>Understand your audience with deep behavioral tracking per subscriber.</p>
1303            <ul class="fp-list">
1304              <li>Continent, country & city data</li>
1305              <li>OS, browser & device info</li>
1306              <li>Referral URL page tracking</li>
1307              <li>Full notification activity logs</li>
1308            </ul>
1309          </div>
1310          <div class="feature-panel-visual">
1311            <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg">
1312              <circle cx="240" cy="40" r="44" fill="rgba(255,255,255,0.06)"/>
1313              <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/>
1314              <circle cx="54" cy="52" r="20" fill="#334155" opacity="0.15"/>
1315              <circle cx="54" cy="46" r="9" fill="#334155" opacity="0.4"/>
1316              <path d="M34 72 Q34 60 54 60 Q74 60 74 72" fill="#334155" opacity="0.3"/>
1317              <rect x="84" y="34" width="100" height="8" rx="4" fill="#333" opacity="0.65"/>
1318              <rect x="84" y="48" width="70" height="6" rx="3" fill="#888" opacity="0.38"/>
1319              <rect x="84" y="60" width="84" height="6" rx="3" fill="#888" opacity="0.28"/>
1320              <line x1="34" y1="84" x2="246" y2="84" stroke="#eee" stroke-width="1"/>
1321              <rect x="34" y="96" width="46" height="6" rx="3" fill="#aaa" opacity="0.45"/>
1322              <rect x="90" y="96" width="80" height="6" rx="3" fill="#333" opacity="0.5"/>
1323              <rect x="34" y="112" width="46" height="6" rx="3" fill="#aaa" opacity="0.45"/>
1324              <rect x="90" y="112" width="64" height="6" rx="3" fill="#333" opacity="0.5"/>
1325              <rect x="34" y="128" width="46" height="6" rx="3" fill="#aaa" opacity="0.45"/>
1326              <rect x="90" y="128" width="72" height="6" rx="3" fill="#333" opacity="0.5"/>
1327              <rect x="34" y="144" width="46" height="6" rx="3" fill="#aaa" opacity="0.45"/>
1328              <rect x="90" y="144" width="56" height="6" rx="3" fill="#333" opacity="0.5"/>
1329              <rect x="176" y="94" width="52" height="16" rx="8" fill="#2E90B3" opacity="0.12"/>
1330              <rect x="182" y="100" width="40" height="5" rx="2" fill="#2E90B3" opacity="0.55"/>
1331              <rect x="176" y="118" width="52" height="16" rx="8" fill="#059669" opacity="0.12"/>
1332              <rect x="182" y="124" width="40" height="5" rx="2" fill="#059669" opacity="0.55"/>
1333              <rect x="176" y="142" width="52" height="16" rx="8" fill="#7C3AED" opacity="0.12"/>
1334              <rect x="182" y="148" width="40" height="5" rx="2" fill="#7C3AED" opacity="0.55"/>
1335            </svg>
1336          </div>
1337        </div>
1338
1339      </div>
1340    </div>
1341  </div>
1342</section>
1343
1344<!-- ── INTEGRATIONS ── -->
1345<section class="integrations-section" id="integrations">
1346  <div class="container">
1347    <div class="section-header fade-up">
1348      <span class="badge">Integrations</span>
1349      <h2>Get notified your way</h2>
1350      <p>12+ integrations for subscriber alert notifications — connect the tools your team already uses.</p>
1351    </div>
1352    <div class="integrations-grid fade-up">
1353      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#2E90B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="2,4 12,13 22,4"/></svg></span>Email</div>
1354      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span>Webhook</div>
1355      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24"><path fill="#E01E5A" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522z"/><path fill="#36C5F0" d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521z"/><path fill="#2EB67D" d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522zm-1.271 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.162 0a2.528 2.528 0 0 1 2.523 2.522z"/><path fill="#ECB22E" d="M15.162 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.162 24a2.527 2.527 0 0 1-2.52-2.522v-2.522zm0-1.271a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.162a2.528 2.528 0 0 1-2.522 2.523z"/></svg></span>Slack</div>
1356      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057c.002.022.015.043.036.06a19.885 19.885 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 
13561.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg></span>Discord</div>
1357      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="#26A5E4"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg></span>Telegram</div>
1358      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" 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 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-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 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.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 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg></span>WhatsApp</div>
1359      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="m2 10 10 5 10-5"/></svg></span>SMS</div>
1360      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.73a16 16 0 0 0 6.29 6.29l.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></span>Phone Call</div>
1361      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></span>X / Twitter</div>
1362      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="#6264A7"><path d="M19.952 4H4.048C2.915 4 2 4.915 2 6.048v11.904C2 19.085 2.915 20 4.048 20h15.904C21.085 20 22 19.085 22 17.952V6.048C22 4.915 21.085 4 19.952 4zM8 15H6v-5h2v5zm-1-5.75A1.25 1.25 0 1 1 7 6.5a1.25 1.25 0 0 1 0 2.75zM18 15h-2v-2.5c0-.828-.448-1.5-1.25-1.5S13.5 11.672 13.5 12.5V15h-2v-5h2v.75a2.744 2.744 0 0 1 2.25-1c1.625 0 2.25 1.063 2.25 2.5V15z"/></svg></span>MS Teams</div>
1363      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="#1A73E8"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.5 7h-3V7.5a1.5 1.5 0 0 0-3 0V9h-3a.5.5 0 0 0 0 1h1.25l.938 6h5.624l.938-6H16.5a.5.5 0 0 0 0-1z"/></svg></span>Google Chat</div>
1364      <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#2E90B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span>Internal</div>
1365    </div>
1366  </div>
1367</section>
1368
1369<!-- ── API ── -->
1370<section class="api-section" id="api">
1371  <div class="container">
1372    <div class="api-grid">
1373      <div class="api-content fade-up">
1374        <span class="badge">Developer Ready</span>
1375        <h2>A full-featured API built for developers</h2>
1376        <p>Everything in the UI is exposed via a clean REST API. Build integrations, automate workflows, and embed push notifications directly into your application.</p>
1377        <div class="api-endpoints">
1378          <div class="api-endpoint"><span class="method method-post">POST</span>/api/campaigns</div>
1379          <div class="api-endpoint"><span class="method method-get">GET</span>/api/subscribers</div>
1380          <div class="api-endpoint"><span class="method method-post">POST</span>/api/personal-notifications</div>
1381          <div class="api-endpoint"><span class="method method-get">GET</span>/api/websites</div>
1382          <div class="api-endpoint"><span class="method method-post">POST</span>/api/flows</div>
1383          <div class="api-endpoint"><span class="method method-get">GET</span>/api/segments</div>
1384        </div>
1385        <a href="https://pushify.com/api-documentation" class="btn btn-primary">Read API Documentation →</a>
1386      </div>
1387      <div class="code-block fade-up stagger-1">
1388        <pre><span class="code-comment"># Send a personal push notification</span>
1389<span class="code-key">curl</span> --request <span class="code-val">POST</span> \
1390  --url <span class="code-str">'https://pushify.com/api/personal-notifications'</span> \
1391  --header <span class="code-str">'Authorization: Bearer {api_key}'</span> \
1392  --header <span class="code-str">'Content-Type: multipart/form-data'</span> \
1393  --form <span class="code-str">'name=Example name'</span> \
1394  --form <span class="code-str">'website_id=1'</span> \
1395  --form <span class="code-str">'subscriber_id=1'</span> \
1396  --form <span class="code-str">'title=Hello 👋'</span> \
1397  --form <span class="code-str">'description=You have a new message'</span></pre>
1398      </div>
1399    </div>
1400  </div>
1401</section>
1402
1403<!-- ── PRICING ── -->
1404<section class="pricing-section" id="pricing">
1405  <div class="container">
1406    <div class="section-header fade-up">
1407      <span class="badge">Pricing</span>
1408      <h2>Simple, transparent pricing.</h2>
1409      <p>Start free and scale as you grow. No hidden fees, no surprise charges.</p>
1410    </div>
1411    <div class="pricing-toggle fade-up">
1412      <span class="toggle-label">Monthly</span>
1413      <label class="toggle-switch">
1414        <input type="checkbox" id="billingToggle" onchange="toggleBilling()" />
1415        <span class="toggle-track"></span>
1416      </label>
1417      <span class="toggle-label">Annual <span class="save-badge">Save 20%</span></span>
1418    </div>
1419    <div class="pricing-grid fade-up">
1420
1421      <!-- STARTER -->
1422      <div class="pricing-card">
1423        <div class="plan-name">Starter</div>
1424        <div class="plan-price"><span class="plan-price-amount">$0</span><span class="plan-price-period">/mo</span></div>
1425        <div class="plan-description">Lifetime free plan — no credit card needed.</div>
1426        <div class="plan-divider"></div>
1427        <ul class="plan-features">
1428          <li><span class="tick">✓</span> Unlimited websites</li>
1429          <li><span class="tick">✓</span> Unlimited subscribers</li>
1430          <li><span class="tick">✓</span> Unlimited campaigns / month</li>
1431          <li><span class="tick">✓</span> Unlimited sent notifications / month</li>
1432          <li><span class="tick">✓</span> Unlimited personal notifications <i class="ph" data-h="Personal notifications are like campaigns, but for one person only. Used for testing, dedicated notifications or API.">i</i></li>
1433          <li><span class="tick">✓</span> 1 RSS automation <i class="ph" data-h="Parse RSS feeds and send push notifications to your subscribers automatically.">i</i></li>
1434          <li><span class="tick">✓</span> 1 recurring campaign <i class="ph" data-h="Deliver recurring campaigns to your users every day, week or month.">i</i></li>
1435          <li><span class="tick">✓</span> Unlimited segments</li>
1436          <li><span class="tick">✓</span> Notification handlers <i class="ph" data-h="Webhook, Slack, Discord, Telegram, MS Teams, X, Google Chat, Internal: Unlimited · Email, SMS, Phone, WhatsApp: Not available">i</i></li>
1437          <li><span class="tick">✓</span> Unlimited flows</li>
1438          <li><span class="tick">✓</span> Unlimited PWAs</li>
1439          <li><span class="cross">✗</span> Custom domains (0)</li>
1440          <li><span class="tick">✓</span> 10 days subscriber log retention</li>
1441          <li><span class="cross">✗</span> Analytics <i class="ph" data-h="Advanced analytics & tracking for subscribers and push notifications.">i</i></li>
1442          <li><span class="cross">✗</span> API access <i class="ph" data-h="Get access to use the REST API.">i</i></li>
1443          <li><span class="cross">✗</span> White labeling <i class="ph" data-h="White label your whole account title, logo, favicon and footer.">i</i></li>
1444          <li><span class="cross">✗</span> Export features (0) <i class="ph" data-h="CSV export ✗ · JSON export ✗ · PDF export ✗">i</i></li>
1445          <li><span class="tick">✓</span> No ads <i class="ph" data-h="No ads for everything related to your account and experience.">i</i></li>
1446          <li><span class="tick">✓</span> Removable branding <i class="ph" data-h="All the branding will be removed from branded resources.">i</i></li>
1447          <li><span class="cross">✗</span> Custom branding <i class="ph" data-h="Customize any brand-able resources with ease.">i</i></li>
1448        </ul>
1449        <a href="https://pushify.com/register" class="btn btn-ghost plan-cta">Get started free</a>
1450      </div>
1451
1452      <!-- PROFESSIONAL -->
1453      <div class="pricing-card popular">
1454        <div class="popular-badge">⭐ Most Popular</div>
1455        <div class="plan-name">Professional</div>
1456        <div class="plan-price"><span class="plan-price-amount" id="proPrice">$10</span><span class="plan-price-period">/mo</span></div>
1457        <div class="plan-description">
1457For growing teams and serious marketers.</div>
1458        <div class="plan-divider"></div>
1459        <ul class="plan-features">
1460          <li><span class="tick">✓</span> 1 website</li>
1461          <li><span class="tick">✓</span> 10,000 subscribers</li>
1462          <li><span class="tick">✓</span> Unlimited campaigns / month</li>
1463          <li><span class="tick">✓</span> Unlimited sent notifications / month</li>
1464          <li><span class="tick">✓</span> Unlimited personal notifications <i class="ph" data-h="Personal notifications are like campaigns, but for one person only. Used for testing, dedicated notifications or API.">i</i></li>
1465          <li><span class="tick">✓</span> Unlimited RSS automations <i class="ph" data-h="Parse RSS feeds and send push notifications to your subscribers automatically.">i</i></li>
1466          <li><span class="tick">✓</span> Unlimited recurring campaigns <i class="ph" data-h="Deliver recurring campaigns to your users every day, week or month.">i</i></li>
1467          <li><span class="tick">✓</span> Unlimited segments</li>
1468          <li><span class="tick">✓</span> Notification handlers <i class="ph" data-h="Email, Webhook, Slack, Discord, Telegram, MS Teams, X, Google Chat, Internal: Unlimited · SMS, Phone, WhatsApp: Not available">i</i></li>
1469          <li><span class="tick">✓</span> Unlimited flows</li>
1470          <li><span class="tick">✓</span> Unlimited PWAs</li>
1471          <li><span class="tick">✓</span> 1 custom domain</li>
1472          <li><span class="tick">✓</span> 1 month subscriber log retention</li>
1473          <li><span class="tick">✓</span> Analytics <i class="ph" data-h="Advanced analytics & tracking for subscribers and push notifications.">i</i></li>
1474          <li><span class="tick">✓</span> API access <i class="ph" data-h="Get access to use the REST API.">i</i></li>
1475          <li><span class="tick">✓</span> White labeling <i class="ph" data-h="White label your whole account title, logo, favicon and footer.">i</i></li>
1476          <li><span class="tick">✓</span> 3 export features <i class="ph" data-h="CSV export ✓ · JSON export ✓ · PDF export ✓">i</i></li>
1477          <li><span class="tick">✓</span> No ads <i class="ph" data-h="No ads for everything related to your account and experience.">i</i></li>
1478          <li><span class="tick">✓</span> Removable branding <i class="ph" data-h="All the branding will be removed from branded resources.">i</i></li>
1479          <li><span class="cross">✗</span> Custom branding <i class="ph" data-h="Customize any brand-able resources with ease.">i</i></li>
1480        </ul>
1481        <a href="https://pushify.com/plan" class="btn btn-primary plan-cta">Choose Professional →</a>
1482      </div>
1483
1484      <!-- ENTERPRISE -->
1485      <div class="pricing-card">
1486        <div class="plan-name">Enterprise</div>
1487        <div class="plan-price"><span class="plan-price-amount" style="font-size:36px;letter-spacing:-1px">Custom</span></div>
1488        <div class="plan-description">Contact us for enterprise pricing.</div>
1489        <div class="plan-divider"></div>
1490        <ul class="plan-features">
1491          <li><span class="tick">✓</span> Unlimited websites</li>
1492          <li><span class="tick">✓</span> Unlimited subscribers</li>
1493          <li><span class="tick">✓</span> Unlimited campaigns / month</li>
1494          <li><span class="tick">✓</span> Unlimited sent notifications / month</li>
1495          <li><span class="tick">✓</span> Unlimited personal notifications <i class="ph" data-h="Personal notifications are like campaigns, but for one person only. Used for testing, dedicated notifications or API.">i</i></li>
1496          <li><span class="tick">✓</span> Unlimited RSS automations <i class="ph" data-h="Parse RSS feeds and send push notifications to your subscribers automatically.">i</i></li>
1497          <li><span class="tick">✓</span> Unlimited recurring campaigns <i class="ph" data-h="Deliver recurring campaigns to your users every day, week or month.">i</i></li>
1498          <li><span class="tick">✓</span> Unlimited segments</li>
1499          <li><span class="tick">✓</span> Notification handlers <i class="ph" data-h="All 12 handler types unlimited: Email, Webhook, Slack, Discord, Telegram, MS Teams, SMS, Phone, WhatsApp, X, Google Chat, Internal">i</i></li>
1500          <li><span class="tick">✓</span> Unlimited flows</li>
1501          <li><span class="tick">✓</span> Unlimited PWAs</li>
1502          <li><span class="tick">✓</span> Unlimited custom domains</li>
1503          <li><span class="tick">✓</span> Unlimited subscriber log retention</li>
1504          <li><span class="tick">✓</span> Analytics <i class="ph" data-h="Advanced analytics & tracking for subscribers and push notifications.">i</i></li>
1505          <li><span class="tick">✓</span> API access <i class="ph" data-h="Get access to use the REST API.">i</i></li>
1506          <li><span class="tick">✓</span> White labeling <i class="ph" data-h="White label your whole account title, logo, favicon and footer.">i</i></li>
1507          <li><span class="tick">✓</span> 3 export features <i class="ph" data-h="CSV export ✓ · JSON export ✓ · PDF export ✓">i</i></li>
1508          <li><span class="tick">✓</span> No ads <i class="ph" data-h="No ads for everything related to your account and experience.">i</i></li>
1509          <li><span class="tick">✓</span> Removable branding <i class="ph" data-h="All the branding will be removed from branded resources.">i</i></li>
1510          <li><span class="tick">✓</span> Custom branding <i class="ph" data-h="Customize any brand-able resources with ease.">i</i></li>
1511        </ul>
1512        <a href="https://pushify.com/contact" class="btn btn-ghost plan-cta">Contact us</a>
1513      </div>
1514
1515    </div>
1516  </div>
1517</section>
1518
1519<!-- ── FAQ ── -->
1520<section class="faq-section">
1521  <div class="container">
1522    <div class="section-header fade-up">
1523      <span class="badge">FAQ</span>
1524      <h2>Common questions answered</h2>
1525    </div>
1526    <div class="faq-list fade-up">
1527      <div class="faq-item">
1528        <button class="faq-question" aria-expanded="false" onclick="toggleFaq(this)">How do I get started?<span class="faq-chevron">⌄</span></button>
1529        <div class="faq-answer"><p>Sign up at pushify.com/register, add your website and copy the small JavaScript snippet to your site. You'll be collecting subscribers and sending push notifications within minutes — no coding required beyond the snippet install.</p></div>
1530      </div>
1531      <div class="faq-item">
1532        <button class="faq-question" aria-expanded="false" onclick="toggleFaq(this)">Do you offer customer support?<span class="faq-chevron">⌄</span></button>
1533        <div class="faq-answer"><p>Yes — all plans include support via email at [email protected], through the contact page, or on WhatsApp. Enterprise customers receive priority support with an SLA.</p></div>
1534      </div>
1535      <div class="faq-item">
1536        <button class="faq-question" aria-expanded="false" onclick="toggleFaq(this)">Is my data secure?<span class="faq-chevron">⌄</span></button>
1537        <div class="faq-answer"><p>Absolutely. All data is encrypted in transit and at rest. We comply with GDPR and major data protection regulations. Your subscriber data belongs to you and you can export it at any time.</p></div>
1538      </div>
1539      <div class="faq-item">
1540        <button class="faq-question" aria-expanded="false" onclick="toggleFaq(this)">Will I need technical skills?<span class="faq-chevron">⌄</span></button>
1541        <div class="faq-answer"><p>Not at all. Pushify is designed for marketers and non-technical users. Setup is just adding a snippet (like Google Analytics). Everything else is managed through an intuitive dashboard. Developers can also use the full REST API.</p></div>
1542      </div>
1543      <div class="faq-item">
1544        <button class="faq-question" aria-expanded="false" onclick="toggleFaq(this)">What makes this different from other tools?<span class="faq-chevron">⌄</span></button>
1545        <div class="faq-answer"><p>Pushify offers a genuinely unlimited free plan — unlimited subscribers, campaigns, and notifications. Most competitors heavily limit the free tier. We also include flows, RSS automations, PWA builder, and 12+ integrations that others charge extra for.</p></div>
1546      </div>
1547    </div>
1548  </div>
1549</section>
1550
1551<!-- ── BLOG ── -->
1552<section class="blog-section" id="blog">
1553  <div class="container">
1554    <div class="section-header fade-up">
1555      <span class="badge">Blog</span>
1556      <h2>Latest from Pushify</h2>
1557      <p>Tips, guides and strategies to get more from web push notifications.</p>
1558    </div>
1559    <div class="blog-grid fade-up" id="blogGrid"></div>
1560    <div style="text-align:center;margin-top:40px" class="fade-up">
1561      <a href="https://pushify.com/blog" class="btn btn-ghost">View all posts →</a>
1562    </div>
1563  </div>
1564</section>
1565
1566<!-- ── CTA ── -->
1567<section class="cta-section">
1568  <div class="cta-ring"></div>
1569  <div class="cta-ring"></div>
1570  <div class="cta-ring"></div>
1571  <div class="cta-content fade-up">
1572
1573    <div class="cta-badge">
1574      <span class="cta-badge-dot"></span>
1575      Free Forever Plan
1576    </div>
1577
1578    <h2>Start Sending Push Notifications<br><span class="cta-h2-highlight">to Every Subscriber — Today</span></h2>
1579    <p>No credit card. No time limit. Unlimited subscribers and notifications<br class="cta-br"> on the free plan — forever.</p>
1580
1581    <!-- 3-step process -->
1582    <div class="cta-steps">
1583      <div class="cta-step">
1584        <div class="cta-step-icon">🔌</div>
1585        <div class="cta-step-num">Step 1</div>
1586        <div class="cta-step-label">Install snippet</div>
1587      </div>
1588      <div class="cta-step-arrow">→</div>
1589      <div class="cta-step">
1590        <div class="cta-step-icon">👥</div>
1591        <div class="cta-step-num">Step 2</div>
1592        <div class="cta-step-label">Collect subscribers</div>
1593      </div>
1594      <div class="cta-step-arrow">→</div>
1595      <div class="cta-step">
1596        <div class="cta-step-icon">🚀</div>
1597        <div class="cta-step-num">Step 3</div>
1598        <div class="cta-step-label">Send campaigns</div>
1599      </div>
1600    </div>
1601
1602    <div class="cta-actions">
1603      <a href="https://pushify.com/register" class="btn-cta-primary">
1604        <span>🎉</span> Create free account →
1605      </a>
1606      <a href="https://pushify.com/plan" class="btn-cta-ghost">Compare plans</a>
1607    </div>
1608
1609    <!-- social proof -->
1610    <div class="cta-proof">
1611      <div class="cta-avatars">
1612        <div class="cta-avatar">😊</div>
1613        <div class="cta-avatar">🧑</div>
1614        <div class="cta-avatar">👩</div>
1615        <div class="cta-avatar">👨</div>
1616        <div class="cta-avatar">🙂</div>
1617      </div>
1618      <div class="cta-proof-text">Trusted by <strong>12,000+</strong> websites worldwide</div>
1619    </div>
1620
1621    <div class="no-cc">
1622      <span>✓ No credit card required</span>
1623      <span class="no-cc-dot">·</span>
1624      <span>✓ Live in under 5 minutes</span>
1625      <span class="no-cc-dot">·</span>
1626      <span>✓ Free forever — no expiry</span>
1627    </div>
1628
1629  </div>
1630</section>
1631
1632<!-- ── FOOTER ── -->
1633<footer>
1634  <div class="container">
1635    <div class="footer-grid">
1636      <div class="footer-brand">
1637        <a href="https://pushify.com" class="logo" style="margin-bottom:14px;display:inline-flex">
1638          <div class="logo-icon"><img src="https://pushify.com/uploads/main/4c2b584f6f0013e380a5b53a3a1e0bea.png" alt="Pushify" /></div>
1639        </a>
1640        <p>Unlimited web push notifications for websites of all sizes. Free to start, powerful at scale.</p>
1641        <div class="footer-socials">
1642          <a href="https://facebook.com/PushifyTeam" class="social-btn" title="Facebook">f</a>
1643          <a href="https://x.com/PushifyTeam" class="social-btn" title="X / Twitter">𝕏</a>
1644          <a href="https://wa.me/+919885211789" class="social-btn" title="WhatsApp">💬</a>
1645          <a href="mailto:[email protected]" class="social-btn" title="Email">@</a>
1646        </div>
1647      </div>
1648      <div class="footer-col">
1649        <h4>Product</h4>
1650        <ul>
1651          <li><a href="https://pushify.com/plan">Pricing & Plans</a></li>
1652          <li><a href="https://pushify.com/api-documentation">API Documentation</a></li>
1653          <li><a href="https://pushify.com/register">Get started free</a></li>
1654          <li><a href="https://pushify.com/login">Sign in</a></li>
1655        </ul>
1656      </div>
1657      <div class="footer-col">
1658        <h4>Features</h4>
1659        <ul>
1660          <li><a href="#features">Push Campaigns</a></li>
1661          <li><a href="#features">Automation Flows</a></li>
1662          <li><a href="#features">RSS Automations</a></li>
1663          <li><a href="#features">PWA Builder</a></li>
1664          <li><a href="#integrations">Integrations</a></li>
1665          <li><a href="#api">API & Webhooks</a></li>
1666          <li><a href="#pricing">Pricing</a></li>
1667        </ul>
1668      </div>
1669      <div class="footer-col">
1670        <h4>Company</h4>
1671        <ul>
1672          <li><a href="https://pushify.com/blog">Blog</a></li>
1673          <li><a href="https://pushify.com/contact">Contact Us</a></li>
1674          <li><a href="https://pushify.com/page/privacy">Privacy Policy</a></li>
1675          <li><a href="https://pushify.com/page/terms">Terms & Conditions</a></li>
1676          <li><a href="#" onclick="window.CookieConsent?.showPreferences();return false;">Cookies</a></li>
1677        </ul>
1678      </div>
1679    </div>
1680    <div class="footer-bottom">
1681      <span>© 2025 Pushify. All rights reserved.</span>
1682    </div>
1683  </div>
1684</footer>
1685
1686<!-- ── WhatsApp Float Button ── -->
1687<a id="waFloatBtn" href="#" target="_blank" rel="noopener" aria-label="Chat on WhatsApp" title="Chat with us on WhatsApp">
1688  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="28" height="28"><path fill="#fff" d="M24 4C13 4 4 13 4 24c0 3.6 1 7 2.7 10L4 44l10.3-2.7C17.1 43 20.5 44 24 44c11 0 20-9 20-20S35 4 24 4z"/><path fill="#25D366" d="M24 6C14.1 6 6 14.1 6 24c0 3.4.9 6.6 2.6 9.4L6.2 42l8.8-2.3C17.5 41.1 20.7 42 24 42c9.9 0 18-8.1 18-18S33.9 6 24 6z"/><path fill="#fff" d="M33.5 28.6c-.5-.2-2.8-1.4-3.2-1.5-.4-.2-.7-.2-1 .2-.3.4-1.2 1.5-1.4 1.8-.3.3-.5.4-1 .1-.5-.2-2-.7-3.8-2.3-1.4-1.2-2.4-2.8-2.6-3.2-.3-.5 0-.7.2-1 .2-.2.5-.5.7-.8.2-.3.3-.5.4-.8.2-.3 0-.6-.1-.8-.1-.2-1-2.5-1.4-3.4-.4-.9-.8-.8-1-.8h-.9c-.3 0-.8.1-1.2.6-.4.5-1.6 1.6-1.6 3.8s1.6 4.4 1.8 4.7c.2.3 3.2 4.9 7.8 6.7 1.1.5 2 .7 2.7.9 1.1.3 2.1.3 2.9.2.9-.1 2.8-1.1 3.2-2.2.4-1.1.4-2 .3-2.2-.1-.2-.4-.3-.9-.5z"/></svg>
1689</a>
1690
1691<script>
1692  // ── Theme ─────────────────────────────────────────────────────────
1693  const html = document.documentElement;
1694  const themeBtn = document.getElementById('themeToggle');
1695
1696  function applyTheme(dark) {
1697    html.classList.toggle('dark', dark);
1698    themeBtn.title = dark ? 'Switch to light mode' : 'Switch to dark mode';
1699    document.querySelector('nav').style.background = '';
1700  }
1701  function toggleTheme() {
1702    const isDark = html.classList.toggle('dark');
1703    localStorage.setItem('theme', isDark ? 'dark' : 'light');
1704    applyTheme(isDark);
1705  }
1706  (function initTheme() {
1707    const saved = localStorage.getItem('theme');
1708    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
1709    applyTheme(saved === 'dark' || (!saved && prefersDark));
1710  })();
1711
1712  // ── Auth check (works when deployed at pushify.com) ────────────────
1713  async function checkAuth() {
1714    try {
1715      const res = await fetch('/api/user', { credentials: 'include' });
1716      if (res.ok) {
1717        const navLink = document.getElementById('navAuthLink');
1718        const mobileLink = document.getElementById('mobileAuthLink');
1719        const cta = document.getElementById('navCta');
1720        // Hide "Sign in", replace CTA with Dashboard
1721        navLink.style.display = 'none';
1722        mobileLink.textContent = 'Dashboard';
1723        mobileLink.href = '/dashboard';
1724        cta.textContent = 'Dashboard →';
1725        cta.href = '/dashboard';
1726        cta.style.background = 'var(--brand)';
1727      }
1728    } catch (_) { /* not on pushify.com or not logged in */ }
1729  }
1730  checkAuth();
1731
1732  // ── Mobile nav ────────────────────────────────────────────────────
1733  function openMobileNav() {
1734    document.getElementById('mobileNav').classList.add('open');
1735    document.getElementById('mobileNavBackdrop').classList.add('open');
1736    document.body.style.overflow = 'hidden';
1737  }
1738  function closeMobileNav() {
1739    document.getElementById('mobileNav').classList.remove('open');
1740    document.getElementById('mobileNavBackdrop').classList.remove('open');
1741    document.body.style.overflow = '';
1742  }
1743
1744  // ── FAQ accordion ─────────────────────────────────────────────────
1745  function toggleFaq(btn) {
1746    const item = btn.closest('.faq-item');
1747    const isOpen = item.classList.contains('open');
1748    document.querySelectorAll('.faq-item').forEach(i => {
1749      i.classList.remove('open');
1750      i.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
1751    });
1752    if (!isOpen) {
1753      item.classList.add('open');
1754      btn.setAttribute('aria-expanded', 'true');
1755    }
1756  }
1757
1758  // ── Pricing toggle ────────────────────────────────────────────────
1759  function toggleBilling() {
1760    const annual = document.getElementById('billingToggle').checked;
1761    document.getElementById('proPrice').textContent = annual ? '$8' : '$10';
1762  }
1763
1764  // ── Blog: fetch RSS, auto-populate latest 3 ──────────────────────
1765  const FALLBACK_POSTS = [
1766    { title: '🔌 Available Integrations for Subscriber Alerts', link: 'https://pushify.com/blog/available-integrations-for-subscriber-alerts', description: 'A complete guide to all 12+ available integrations to stay on top of new subscriber activity in real time.', img: 'https://pushify.com/uploads/blog/5ca2be7f9db19b00ad442074bf7aa359.png', category: 'Integrations' },
1767    { title: '🧠 How to Automate Welcome, Reminder & Re-Engagement Campaigns', link: 'https://pushify.com/blog/automate-welcome-reminder-reengagement', description: 'Step-by-step guide to building automated notification flows that onboard, nurture and re-engage subscribers.', img: 'https://pushify.com/uploads/blog/4b1946af36ec8899ad783ee975d30f05.png', category: 'Automation' },
1768    { title: '🧠 The Psychology of Push Notifications: Timing, Triggers & Tactics', link: 'https://pushify.com/blog/psychology-of-push-notifications', description: 'What the data says about when and how to send push notifications that actually get clicked.', img: 'https://pushify.com/uploads/blog/28ba698cdc0de90781b548a7602adb70.png', category: 'Strategy' }
1769  ];
1770
1771  function slugCategory(title) {
1772    if (/vs\s/i.test(title) || /compar/i.test(title)) return 'Comparisons';
1773    if (/automat|flow|drip|rss/i.test(title)) return 'Automation';
1774    if (/api|webhook|develop/i.test(title)) return 'Developers';
1775    if (/segment|target/i.test(title)) return 'Advanced';
1776    if (/introduc|update/i.test(title)) return 'Product Update';
1777    if (/integrat/i.test(title)) return 'Integrations';
1778    if (/cart|abandon/i.test(title)) return 'E-commerce';
1779    return 'Guide';
1780  }
1781
1782  function renderBlogCards(posts) {
1783    document.getElementById('blogGrid').innerHTML = posts.slice(0, 3).map(p => {
1784      const title = p.title.replace(/^\p{Emoji}\s*/u, '');
1785      const cat = p.category || slugCategory(p.title);
1786      const desc = (p.description || '').replace(/<[^>]+>/g, '').substring(0, 130);
1787      const imgHtml = p.img
1788        ? `<img src="${p.img}" alt="${title}" loading="lazy" />`
1789        : `<span class="emoji-fallback">📝</span>`;
1790      return `<a href="${p.link}" class="blog-card" target="_blank" rel="noopener">
1791        <div class="blog-card-img">${imgHtml}</div>
1792        <div class="blog-card-body">
1793          <div class="blog-tag">${cat}</div>
1794          <h3>${title}</h3>
1795          <p>${desc}…</p>
1796        </div>
1797      </a>`;
1798    }).join('');
1799  }
1800
1801  async function loadBlog() {
1802    renderBlogCards(FALLBACK_POSTS); // show immediately; replace with live data if available
1803    try {
1804      const res = await fetch('https://pushify.com/blog/feed', { mode: 'cors' });
1805      if (!res.ok) return;
1806      const xml = await res.text();
1807      const doc = new DOMParser().parseFromString(xml, 'text/xml');
1808      const posts = [...doc.querySelectorAll('item')].reverse().slice(0, 3).map(item => ({
1809        title: item.querySelector('title')?.textContent || '',
1810        link: item.querySelector('link')?.textContent || '',
1811        description: item.querySelector('description')?.textContent || '',
1812        category: item.querySelector('category')?.textContent || '',
1813        img: null
1814      }));
1815      if (!posts.length) return;
1816      await Promise.all(posts.map(async post => {
1817        try {
1818          const pathname = new URL(post.link).pathname;
1819          const r = await fetch(pathname);
1820          const text = await r.text();
1821          const m = text.match(/property="og:image"\s+content="([^"]+)"/);
1822          if (m) post.img = m[1];
1823        } catch (_) {}
1824      }));
1825      renderBlogCards(posts);
1826    } catch (_) {}
1827  }
1828  loadBlog();
1829
1830
1831  // ── Cookie consent (vanilla-cookieconsent v3) ─────────────────────
1832  window.addEventListener('DOMContentLoaded', () => {
1833    if (typeof window.CookieConsent === 'undefined') return;
1834    window.CookieConsent.run({
1835      categories: {
1836        necessary: { enabled: true, readOnly: true },
1837        analytics: {},
1838        targeting: {},
1839      },
1840      language: {
1841        default: 'en',
1842        translations: {
1843          en: {
1844            consentModal: {
1845              title: 'We use cookies 🍪',
1846              description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent.',
1847              acceptAllBtn: 'Accept all',
1848              acceptNecessaryBtn: 'Reject all',
1849              showPreferencesBtn: 'Customize',
1850            },
1851            preferencesModal: {
1852              title: 'Cookie preferences',
1853              acceptAllBtn: 'Accept all',
1854              acceptNecessaryBtn: 'Reject all',
1855              savePreferencesBtn: 'Save settings',
1856              closeIconLabel: 'Close',
1857              sections: [
1858                { title: 'Cookie usage 📢', description: 'We use cookies to ensure the basic functionalities of the website and to enhance your online experience. For more details please read the full <a href="https://pushify.com/page/privacy" class="cc-link">privacy policy</a>.' },
1859                { title: 'Strictly necessary cookies', description: 'These cookies are essential for the proper functioning of the website.', linkedCategory: 'necessary' },
1860                { title: 'Performance and Analytics cookies', description: 'These cookies allow the website to remember the choices you have made in the past.', linkedCategory: 'analytics' },
1861                { title: 'Advertisement and Targeting cookies', description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on.', linkedCategory: 'targeting' },
1862              ],
1863            },
1864          },
1865        },
1866      },
1867      guiOptions: {
1868        consentModal: { layout: 'bar', position: 'bottom center', flipButtons: fal
1868se },
1869        preferencesModal: { layout: 'box' },
1870      },
1871    });
1872  });
1873
1874  // ── Hero word-swap ────────────────────────────────────────────────
1875  (function heroWordSwap() {
1876    const el = document.getElementById('heroWord');
1877    if (!el) return;
1878    const words = ['every visitor', 'loyal customers', 'your whole list'];
1879    let idx = 0;
1880    setInterval(() => {
1881      el.classList.add('fading');
1882      setTimeout(() => {
1883        idx = (idx + 1) % words.length;
1884        el.textContent = words[idx];
1885        el.classList.remove('fading');
1886      }, 280);
1887    }, 3200);
1888  })();
1889
1890  // ── Notification demo ─────────────────────────────────────────────
1891  (function notifDemo() {
1892    const stack = document.getElementById('notifStack');
1893    const progressBar = document.getElementById('notifProgress');
1894    const dotsContainer = document.getElementById('notifDots');
1895    if (!stack) return;
1896
1897    const NOTIFS = [
1898      { icon: '🛍️', site: 'fashionstore.com', time: 'just now', title: 'Flash Sale — 40% off ends in 1 hour', desc: 'Your favourite items are on sale. Don\'t miss out before midnight!', primary: 'Shop now', secondary: 'Dismiss', accent: '#F97316', iconBg: '#FFF7ED', iconBorder: '#FDBA74' },
1899      { icon: '✍️', site: 'myblog.com', time: '2m ago', title: 'New post: 10 SEO Tips That Actually Work in 2025', desc: 'We\'ve just published our most comprehensive SEO guide yet.', primary: 'Read now', secondary: 'Later', accent: '#10B981', iconBg: '#ECFDF5', iconBorder: '#6EE7B7' },
1900      { icon: '📰', site: 'dailynews.com', time: '5m ago', title: 'Breaking: Global markets hit record highs today', desc: 'Stocks surged across Asia, Europe and the US in early trading.', primary: 'Read more', secondary: 'Dismiss', accent: '#3B82F6', iconBg: '#EFF6FF', iconBorder: '#93C5FD' },
1901      { icon: '⚡', site: 'myapp.io', time: '10m ago', title: 'Your free trial expires in 24 hours', desc: 'Upgrade now and keep all your data, settings and integrations.', primary: 'Upgrade', secondary: 'Remind me', accent: '#8B5CF6', iconBg: '#F5F3FF', iconBorder: '#C4B5FD' },
1902    ];
1903
1904    const INTERVAL = 3800;
1905    let current = 0;
1906    let progressTimer = null;
1907
1908    // Build dots
1909    NOTIFS.forEach((_, i) => {
1910      const d = document.createElement('div');
1911      d.className = 'nd' + (i === 0 ? ' active' : '');
1912      dotsContainer.appendChild(d);
1913    });
1914
1915    function buildCard(n) {
1916      const card = document.createElement('div');
1917      card.className = 'ns-card';
1918      card.style.setProperty('--ns-accent', n.accent || 'var(--brand)');
1919      const iconStyle = n.iconBg ? `style="background:${n.iconBg};border-color:${n.iconBorder};border-width:1.5px;"` : '';
1920      const siteColor = n.accent ? `style="color:${n.accent}"` : '';
1921      card.innerHTML = `
1922        <div class="ns-live-dot"></div>
1923        <div class="ns-icon" ${iconStyle}>${n.icon}</div>
1924        <div class="ns-body">
1925          <div class="ns-meta"><span class="ns-site" ${siteColor}>${n.site}</span><span>${n.time}</span></div>
1926          <div class="ns-title">${n.title}</div>
1927          <div class="ns-desc">${n.desc}</div>
1928          <div class="ns-btns">
1929            <div class="ns-btn ns-primary">${n.primary}</div>
1930            <div class="ns-btn">${n.secondary}</div>
1931          </div>
1932        </div>`;
1933      return card;
1934    }
1935
1936    function setPositions() {
1937      const cards = stack.querySelectorAll('.ns-card:not(.exiting)');
1938      const positions = ['pos-front', 'pos-mid', 'pos-back'];
1939      cards.forEach((c, i) => {
1940        c.className = 'ns-card ' + (positions[i] || 'pos-back');
1941      });
1942    }
1943
1944    function updateDots(idx) {
1945      dotsContainer.querySelectorAll('.nd').forEach((d, i) => d.classList.toggle('active', i === idx));
1946    }
1947
1948    function startProgress() {
1949      if (progressBar) { progressBar.style.transition = 'none'; progressBar.style.width = '0%'; }
1950      requestAnimationFrame(() => {
1951        requestAnimationFrame(() => {
1952          if (progressBar) { progressBar.style.transition = `width ${INTERVAL}ms linear`; progressBar.style.width = '100%'; }
1953        });
1954      });
1955    }
1956
1957    // Init first 3 cards
1958    for (let i = Math.min(2, NOTIFS.length - 1); i >= 0; i--) {
1959      stack.appendChild(buildCard(NOTIFS[i]));
1960    }
1961    setPositions();
1962    startProgress();
1963
1964    setInterval(() => {
1965      current = (current + 1) % NOTIFS.length;
1966      // Exit front card
1967      const front = stack.querySelector('.pos-front');
1968      if (front) { front.classList.replace('pos-front', 'exiting'); setTimeout(() => front.remove(), 500); }
1969      // Add new card at back
1970      const newCard = buildCard(NOTIFS[(current + 2) % NOTIFS.length]);
1971      stack.appendChild(newCard);
1972      newCard.getBoundingClientRect(); // force reflow
1973      setPositions();
1974      updateDots(current);
1975      startProgress();
1976    }, INTERVAL);
1977  })();
1978
1979  // ── Scroll animations ─────────────────────────────────────────────
1980  const observer = new IntersectionObserver(entries => {
1981    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
1982  }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
1983  document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
1984
1985  // ── Nav scroll effect ─────────────────────────────────────────────
1986  window.addEventListener('scroll', () => {
1987    const isDark = html.classList.contains('dark');
1988    document.querySelector('nav').style.background = window.scrollY > 20
1989      ? (isDark ? 'rgba(7,24,32,0.97)' : 'rgba(255,255,255,0.97)')
1990      : '';
1991  });
1992
1993  // ── WhatsApp dynamic link (mobile → wa.me, desktop → web.whatsapp.com) ──
1994  (function () {
1995    var a = document.getElementById('waFloatBtn');
1996    if (!a) return;
1997    var phone = '+919885211789';
1998    var pageTitle = document.title;
1999    var pageUrl   = location.href;
2000    var ref       = document.referrer ? '\nRef: ' + document.referrer : '';
2001    var msg       = "Hi! I'm viewing: " + pageTitle + "\n" + pageUrl + ref;
2002    var isMobile  = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent);
2003    var href      = isMobile
2004      ? ('https://wa.me/' + phone + '?text=' + encodeURIComponent(msg))
2005      : ('https://web.whatsapp.com/send?phone=' + phone + '&text=' + encodeURIComponent(msg));
2006    a.setAttribute('href', href);
2007  })();
2008
2009
2010</script>
2010
2011
2012
2013</body>
2014</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.