web-agent-bridge 1.0.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/README.ar.md +1 -1
  2. package/README.md +336 -36
  3. package/docs/DEPLOY.md +118 -0
  4. package/docs/SPEC.md +1540 -0
  5. package/examples/mcp-agent.js +94 -0
  6. package/examples/vision-agent.js +12 -0
  7. package/package.json +14 -3
  8. package/public/admin/dashboard.html +848 -0
  9. package/public/admin/login.html +84 -0
  10. package/public/cookies.html +208 -0
  11. package/public/css/premium.css +317 -0
  12. package/public/dashboard.html +138 -0
  13. package/public/docs.html +5 -2
  14. package/public/index.html +54 -28
  15. package/public/js/auth-nav.js +31 -0
  16. package/public/js/auth-redirect.js +12 -0
  17. package/public/js/cookie-consent.js +56 -0
  18. package/public/js/ws-client.js +74 -0
  19. package/public/login.html +4 -2
  20. package/public/premium-dashboard.html +2075 -0
  21. package/public/premium.html +791 -0
  22. package/public/privacy.html +295 -0
  23. package/public/register.html +11 -2
  24. package/public/terms.html +254 -0
  25. package/script/ai-agent-bridge.js +253 -22
  26. package/sdk/index.js +36 -0
  27. package/server/config/secrets.js +92 -0
  28. package/server/index.js +102 -26
  29. package/server/middleware/adminAuth.js +30 -0
  30. package/server/middleware/auth.js +4 -7
  31. package/server/middleware/rateLimits.js +24 -0
  32. package/server/migrations/001_add_analytics_indexes.sql +7 -0
  33. package/server/migrations/002_premium_features.sql +418 -0
  34. package/server/models/db.js +360 -4
  35. package/server/routes/admin.js +247 -0
  36. package/server/routes/api.js +26 -9
  37. package/server/routes/billing.js +45 -0
  38. package/server/routes/discovery.js +329 -0
  39. package/server/routes/license.js +200 -11
  40. package/server/routes/noscript.js +543 -0
  41. package/server/routes/premium.js +724 -0
  42. package/server/routes/wab-api.js +476 -0
  43. package/server/services/email.js +204 -0
  44. package/server/services/fairness.js +420 -0
  45. package/server/services/premium.js +1680 -0
  46. package/server/services/stripe.js +192 -0
  47. package/server/utils/cache.js +125 -0
  48. package/server/utils/migrate.js +81 -0
  49. package/server/utils/secureFields.js +50 -0
  50. package/server/ws.js +33 -13
  51. package/wab-mcp-adapter/README.md +136 -0
  52. package/wab-mcp-adapter/index.js +555 -0
  53. package/wab-mcp-adapter/package.json +17 -0
@@ -0,0 +1,84 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Admin Login — Web Agent Bridge</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="/css/styles.css">
11
+ </head>
12
+ <body class="auth-page">
13
+ <div class="auth-container">
14
+ <div class="auth-card">
15
+ <div class="auth-header" style="text-align:center;">
16
+ <div class="brand-icon" style="background:linear-gradient(135deg,#ef4444,#f59e0b);width:56px;height:56px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:16px;">🛡️</div>
17
+ <h1>Admin Panel</h1>
18
+ <p style="color:var(--text-muted);">Web Agent Bridge Administration</p>
19
+ </div>
20
+ <div class="alert alert-error" id="loginError" style="display:none;"></div>
21
+ <form id="loginForm" onsubmit="return handleLogin(event)">
22
+ <div class="form-group">
23
+ <label>Email</label>
24
+ <input type="email" class="form-input" id="email" required autofocus placeholder="admin@webagentbridge.com">
25
+ </div>
26
+ <div class="form-group">
27
+ <label>Password</label>
28
+ <input type="password" class="form-input" id="password" required placeholder="••••••••">
29
+ </div>
30
+ <button type="submit" class="btn btn-primary" style="width:100%;margin-top:16px;" id="submitBtn">Sign In</button>
31
+ </form>
32
+ <div style="text-align:center;margin-top:20px;">
33
+ <a href="/" style="color:var(--text-muted);font-size:0.85rem;">← Back to Website</a>
34
+ </div>
35
+ </div>
36
+ </div>
37
+
38
+ <script>
39
+ if (localStorage.getItem('wab_admin_token')) {
40
+ window.location.href = '/admin';
41
+ }
42
+
43
+ async function handleLogin(e) {
44
+ e.preventDefault();
45
+ const email = document.getElementById('email').value;
46
+ const password = document.getElementById('password').value;
47
+ const errEl = document.getElementById('loginError');
48
+ const btn = document.getElementById('submitBtn');
49
+
50
+ errEl.style.display = 'none';
51
+ btn.disabled = true;
52
+ btn.textContent = 'Signing in...';
53
+
54
+ try {
55
+ const res = await fetch('/api/admin/login', {
56
+ method: 'POST',
57
+ headers: { 'Content-Type': 'application/json' },
58
+ body: JSON.stringify({ email, password })
59
+ });
60
+ const data = await res.json();
61
+
62
+ if (!res.ok) {
63
+ errEl.textContent = data.error || 'Invalid credentials';
64
+ errEl.style.display = 'block';
65
+ btn.disabled = false;
66
+ btn.textContent = 'Sign In';
67
+ return;
68
+ }
69
+
70
+ localStorage.setItem('wab_admin_token', data.token);
71
+ localStorage.setItem('wab_admin', JSON.stringify(data.admin));
72
+ window.location.href = '/admin';
73
+ } catch (err) {
74
+ errEl.textContent = 'Connection error. Please try again.';
75
+ errEl.style.display = 'block';
76
+ btn.disabled = false;
77
+ btn.textContent = 'Sign In';
78
+ }
79
+ return false;
80
+ }
81
+ </script>
82
+ <script src="/js/cookie-consent.js"></script>
83
+ </body>
84
+ </html>
@@ -0,0 +1,208 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cookie Policy — Web Agent Bridge</title>
7
+ <meta name="description" content="Cookie Policy for Web Agent Bridge. ePrivacy and GDPR compliant.">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="/css/styles.css">
12
+ </head>
13
+ <body>
14
+
15
+ <nav class="navbar" id="navbar">
16
+ <div class="container">
17
+ <a href="/" class="navbar-brand">
18
+ <div class="brand-icon">⚡</div>
19
+ <span>WAB</span>
20
+ </a>
21
+ <ul class="navbar-links">
22
+ <li><a href="/#features">Features</a></li>
23
+ <li><a href="/#pricing">Pricing</a></li>
24
+ <li><a href="/docs">Docs</a></li>
25
+ </ul>
26
+ <div class="navbar-actions">
27
+ <a href="/login" class="btn btn-ghost">Sign In</a>
28
+ <a href="/register" class="btn btn-primary btn-sm">Get Started</a>
29
+ </div>
30
+ </div>
31
+ </nav>
32
+
33
+ <div class="container" style="padding-top: 120px; padding-bottom: 80px; max-width: 800px;">
34
+ <div class="section-header" style="text-align: left;">
35
+ <span class="label">Legal</span>
36
+ <h1 style="font-size: 2.2rem;">Cookie Policy</h1>
37
+ <p style="max-width: 100%;">Last updated: March 22, 2026</p>
38
+ </div>
39
+
40
+ <div class="docs-content">
41
+
42
+ <h2 id="what-are-cookies">1. What Are Cookies</h2>
43
+ <p>
44
+ Cookies are small text files placed on your device when you visit a website. They are widely
45
+ used to make websites work, provide analytics, and remember your preferences.
46
+ </p>
47
+ <p>
48
+ This Cookie Policy complies with the <strong>EU ePrivacy Directive (2002/58/EC)</strong>,
49
+ the <strong>GDPR (EU 2016/679)</strong>, and the
50
+ <strong>Dutch Telecommunications Act (Telecommunicatiewet, Art. 11.7a)</strong>.
51
+ </p>
52
+
53
+ <h2 id="cookies-we-use">2. Cookies We Use</h2>
54
+ <p>WAB uses a <strong>minimal cookie approach</strong>. We only use what is strictly necessary.</p>
55
+
56
+ <h3>2.1 Strictly Necessary Cookies</h3>
57
+ <p>These cookies are essential for the Service to function. No consent is required under the ePrivacy Directive.</p>
58
+ <table style="width: 100%; border-collapse: collapse; margin: 16px 0;">
59
+ <thead>
60
+ <tr style="border-bottom: 2px solid var(--border-color);">
61
+ <th style="text-align: left; padding: 12px; color: var(--text-primary);">Name</th>
62
+ <th style="text-align: left; padding: 12px; color: var(--text-primary);">Purpose</th>
63
+ <th style="text-align: left; padding: 12px; color: var(--text-primary);">Duration</th>
64
+ <th style="text-align: left; padding: 12px; color: var(--text-primary);">Type</th>
65
+ </tr>
66
+ </thead>
67
+ <tbody>
68
+ <tr style="border-bottom: 1px solid var(--border-color);">
69
+ <td style="padding: 12px; color: var(--text-secondary);"><code style="font-family: var(--font-mono); background: var(--bg-surface); padding: 2px 6px; border-radius: 4px;">token</code></td>
70
+ <td style="padding: 12px; color: var(--text-secondary);">Authentication session (JWT)</td>
71
+ <td style="padding: 12px; color: var(--text-secondary);">Session / until logout</td>
72
+ <td style="padding: 12px; color: var(--text-secondary);">localStorage</td>
73
+ </tr>
74
+ <tr style="border-bottom: 1px solid var(--border-color);">
75
+ <td style="padding: 12px; color: var(--text-secondary);"><code style="font-family: var(--font-mono); background: var(--bg-surface); padding: 2px 6px; border-radius: 4px;">adminToken</code></td>
76
+ <td style="padding: 12px; color: var(--text-secondary);">Admin authentication session</td>
77
+ <td style="padding: 12px; color: var(--text-secondary);">Session / until logout</td>
78
+ <td style="padding: 12px; color: var(--text-secondary);">localStorage</td>
79
+ </tr>
80
+ <tr>
81
+ <td style="padding: 12px; color: var(--text-secondary);"><code style="font-family: var(--font-mono); background: var(--bg-surface); padding: 2px 6px; border-radius: 4px;">wab_cookie_consent</code></td>
82
+ <td style="padding: 12px; color: var(--text-secondary);">Remembers your cookie consent choice</td>
83
+ <td style="padding: 12px; color: var(--text-secondary);">365 days</td>
84
+ <td style="padding: 12px; color: var(--text-secondary);">localStorage</td>
85
+ </tr>
86
+ </tbody>
87
+ </table>
88
+
89
+ <h3>2.2 Analytics Cookies</h3>
90
+ <p>
91
+ <strong>We do not use any analytics cookies.</strong> We do not use Google Analytics, Facebook Pixel,
92
+ Hotjar, or any third-party tracking service. Our analytics system tracks AI agent behavior only
93
+ (not human visitors) and does not use cookies.
94
+ </p>
95
+
96
+ <h3>2.3 Marketing Cookies</h3>
97
+ <p><strong>We do not use marketing or advertising cookies.</strong></p>
98
+
99
+ <h3>2.4 Third-Party Cookies</h3>
100
+ <p>
101
+ We load Google Fonts for typography. Google may set cookies when fonts are loaded.
102
+ See <a href="https://policies.google.com/privacy" style="color: var(--accent-blue);" target="_blank" rel="noopener">Google's Privacy Policy</a>.
103
+ </p>
104
+ <p>
105
+ When you interact with payment flows, <strong>Stripe</strong> may set cookies for fraud prevention.
106
+ See <a href="https://stripe.com/cookie-settings" style="color: var(--accent-blue);" target="_blank" rel="noopener">Stripe's Cookie Policy</a>.
107
+ </p>
108
+
109
+ <h2 id="consent">3. Cookie Consent</h2>
110
+ <p>
111
+ Under the Dutch Telecommunicatiewet and the ePrivacy Directive:
112
+ </p>
113
+ <ul>
114
+ <li><strong>Strictly necessary cookies</strong> do not require consent (they are exempt under Art. 11.7a(3) Tw)</li>
115
+ <li><strong>Non-essential cookies</strong> require informed, prior consent — we obtain this via our cookie banner</li>
116
+ </ul>
117
+ <p>
118
+ Since WAB currently uses <strong>only strictly necessary storage</strong>, we inform you via the cookie
119
+ banner but no opt-in is required for our cookies. Third-party cookies from Google Fonts and Stripe
120
+ are noted for transparency.
121
+ </p>
122
+
123
+ <h2 id="manage">4. How to Manage Cookies</h2>
124
+ <p>You can control cookies through your browser settings:</p>
125
+ <ul>
126
+ <li><strong>Chrome</strong>: Settings → Privacy and security → Cookies</li>
127
+ <li><strong>Firefox</strong>: Settings → Privacy & Security → Cookies</li>
128
+ <li><strong>Safari</strong>: Preferences → Privacy → Cookies</li>
129
+ <li><strong>Edge</strong>: Settings → Cookies and site permissions</li>
130
+ </ul>
131
+ <p>
132
+ Note: Blocking essential cookies (like the authentication token) will prevent you from logging
133
+ into your WAB account.
134
+ </p>
135
+
136
+ <h2 id="local-storage">5. Local Storage</h2>
137
+ <p>
138
+ WAB uses <strong>localStorage</strong> (not traditional cookies) for authentication tokens.
139
+ While localStorage is technically not a "cookie," it serves a similar purpose and is covered
140
+ by the ePrivacy Directive's rules on storing information on user devices. We treat it with
141
+ the same transparency requirements.
142
+ </p>
143
+
144
+ <h2 id="bridge-script">6. The WAB Bridge Script</h2>
145
+ <p>
146
+ The WAB bridge script (<code style="font-family: var(--font-mono); background: var(--bg-surface); padding: 2px 6px; border-radius: 4px;">ai-agent-bridge.js</code>)
147
+ that Site Owners embed on their websites:
148
+ </p>
149
+ <ul>
150
+ <li><strong>Does not set any cookies</strong> on website visitors' browsers</li>
151
+ <li><strong>Does not use localStorage</strong> on website visitors' browsers</li>
152
+ <li><strong>Does not track human visitors</strong> — it only creates an interface for AI agents</li>
153
+ <li>Uses temporary in-memory session tokens (not persisted to disk)</li>
154
+ </ul>
155
+
156
+ <h2 id="changes">7. Changes to This Policy</h2>
157
+ <p>
158
+ We will update this Cookie Policy if we change our cookie practices. Changes will be posted on
159
+ this page with an updated date.
160
+ </p>
161
+
162
+ <h2 id="contact">8. Contact</h2>
163
+ <p>
164
+ For questions about our cookie practices:<br>
165
+ Email: <a href="mailto:privacy@webagentbridge.com" style="color: var(--accent-blue);">privacy@webagentbridge.com</a>
166
+ </p>
167
+ </div>
168
+ </div>
169
+
170
+ <footer class="footer">
171
+ <div class="container">
172
+ <div class="footer-grid">
173
+ <div class="footer-brand">
174
+ <a href="/" class="navbar-brand"><div class="brand-icon">⚡</div><span>Web Agent Bridge</span></a>
175
+ <p>Open-source middleware for AI agent and website interaction.</p>
176
+ </div>
177
+ <div class="footer-col">
178
+ <h4>Product</h4>
179
+ <ul>
180
+ <li><a href="/#features">Features</a></li>
181
+ <li><a href="/#pricing">Pricing</a></li>
182
+ <li><a href="/docs">Documentation</a></li>
183
+ </ul>
184
+ </div>
185
+ <div class="footer-col">
186
+ <h4>Developers</h4>
187
+ <ul>
188
+ <li><a href="/docs#quick-start">Quick Start</a></li>
189
+ <li><a href="/docs#api-reference">API Reference</a></li>
190
+ <li><a href="https://github.com/abokenan444/web-agent-bridge" target="_blank" rel="noopener">GitHub</a></li>
191
+ </ul>
192
+ </div>
193
+ <div class="footer-col">
194
+ <h4>Legal</h4>
195
+ <ul>
196
+ <li><a href="/privacy">Privacy Policy</a></li>
197
+ <li><a href="/terms">Terms of Service</a></li>
198
+ <li><a href="/cookies">Cookie Policy</a></li>
199
+ </ul>
200
+ </div>
201
+ </div>
202
+ <div class="footer-bottom">
203
+ <span>&copy; 2026 Web Agent Bridge. MIT License. Operated from the Netherlands.</span>
204
+ </div>
205
+ </div>
206
+ </footer>
207
+ </body>
208
+ </html>
@@ -0,0 +1,317 @@
1
+ /* ═══════════════════════════════════════════════════════════════════════
2
+ Premium Services Page Styles
3
+ ═══════════════════════════════════════════════════════════════════════ */
4
+
5
+ .active-link {
6
+ color: var(--accent-purple) !important;
7
+ }
8
+
9
+ /* ─── Premium Hero ────────────────────────────────────────────────── */
10
+ .premium-hero {
11
+ min-height: 70vh;
12
+ display: flex;
13
+ align-items: center;
14
+ text-align: center;
15
+ background: var(--gradient-hero);
16
+ position: relative;
17
+ overflow: hidden;
18
+ padding-top: 120px;
19
+ padding-bottom: 80px;
20
+ }
21
+
22
+ .premium-hero::before {
23
+ content: '';
24
+ position: absolute;
25
+ top: -50%;
26
+ left: -50%;
27
+ width: 200%;
28
+ height: 200%;
29
+ background:
30
+ radial-gradient(circle at 30% 30%, rgba(139,92,246,0.08) 0%, transparent 50%),
31
+ radial-gradient(circle at 70% 70%, rgba(236,72,153,0.06) 0%, transparent 50%);
32
+ animation: heroGlow 15s ease-in-out infinite alternate;
33
+ }
34
+
35
+ .premium-hero-content {
36
+ position: relative;
37
+ z-index: 1;
38
+ max-width: 800px;
39
+ margin: 0 auto;
40
+ }
41
+
42
+ .premium-hero h1 {
43
+ margin-bottom: 24px;
44
+ }
45
+
46
+ .premium-hero p {
47
+ font-size: 1.15rem;
48
+ color: var(--text-secondary);
49
+ max-width: 640px;
50
+ margin: 0 auto 36px;
51
+ line-height: 1.7;
52
+ }
53
+
54
+ /* ─── Tier Pills ──────────────────────────────────────────────────── */
55
+ .tier-pills {
56
+ display: flex;
57
+ gap: 16px;
58
+ justify-content: center;
59
+ flex-wrap: wrap;
60
+ }
61
+
62
+ .tier-pill {
63
+ display: flex;
64
+ align-items: center;
65
+ gap: 14px;
66
+ background: var(--bg-card);
67
+ border: 1px solid var(--border-color);
68
+ border-radius: var(--radius-lg);
69
+ padding: 16px 24px;
70
+ min-width: 220px;
71
+ transition: all var(--transition-normal);
72
+ }
73
+
74
+ .tier-pill.active {
75
+ border-color: var(--accent-purple);
76
+ box-shadow: 0 0 20px rgba(139,92,246,0.15);
77
+ }
78
+
79
+ .tier-pill:hover {
80
+ border-color: var(--border-hover);
81
+ transform: translateY(-2px);
82
+ }
83
+
84
+ .tier-pill-icon {
85
+ width: 40px;
86
+ height: 40px;
87
+ border-radius: var(--radius-md);
88
+ display: flex;
89
+ align-items: center;
90
+ justify-content: center;
91
+ font-size: 1rem;
92
+ flex-shrink: 0;
93
+ }
94
+
95
+ .tier-pill strong {
96
+ display: block;
97
+ font-size: 0.9rem;
98
+ color: var(--text-primary);
99
+ }
100
+
101
+ .tier-pill span {
102
+ font-size: 0.8rem;
103
+ color: var(--text-muted);
104
+ }
105
+
106
+ /* ─── Service Row ─────────────────────────────────────────────────── */
107
+ .service-row {
108
+ display: flex;
109
+ gap: 32px;
110
+ padding: 48px 0;
111
+ border-bottom: 1px solid var(--border-color);
112
+ align-items: flex-start;
113
+ }
114
+
115
+ .service-row:last-child {
116
+ border-bottom: none;
117
+ }
118
+
119
+ .service-number {
120
+ font-size: 3rem;
121
+ font-weight: 900;
122
+ letter-spacing: -0.04em;
123
+ background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(59,130,246,0.1));
124
+ -webkit-background-clip: text;
125
+ -webkit-text-fill-color: transparent;
126
+ background-clip: text;
127
+ min-width: 70px;
128
+ text-align: center;
129
+ line-height: 1;
130
+ padding-top: 8px;
131
+ }
132
+
133
+ .service-body {
134
+ flex: 1;
135
+ min-width: 0;
136
+ }
137
+
138
+ .service-head {
139
+ display: flex;
140
+ align-items: center;
141
+ gap: 16px;
142
+ margin-bottom: 12px;
143
+ }
144
+
145
+ .service-icon {
146
+ width: 52px;
147
+ height: 52px;
148
+ border-radius: var(--radius-md);
149
+ display: flex;
150
+ align-items: center;
151
+ justify-content: center;
152
+ font-size: 1.5rem;
153
+ flex-shrink: 0;
154
+ }
155
+
156
+ .service-head h3 {
157
+ margin-bottom: 4px;
158
+ font-size: 1.35rem;
159
+ }
160
+
161
+ .service-tiers {
162
+ display: flex;
163
+ gap: 6px;
164
+ flex-wrap: wrap;
165
+ }
166
+
167
+ .service-body > p {
168
+ color: var(--text-secondary);
169
+ font-size: 1rem;
170
+ line-height: 1.7;
171
+ margin-bottom: 24px;
172
+ max-width: 700px;
173
+ }
174
+
175
+ /* ─── Service Feature Grid ────────────────────────────────────────── */
176
+ .service-features {
177
+ display: grid;
178
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
179
+ gap: 16px;
180
+ }
181
+
182
+ .sf-item {
183
+ display: flex;
184
+ gap: 14px;
185
+ padding: 16px;
186
+ background: var(--bg-card);
187
+ border: 1px solid var(--border-color);
188
+ border-radius: var(--radius-md);
189
+ transition: border-color var(--transition-fast);
190
+ }
191
+
192
+ .sf-item:hover {
193
+ border-color: var(--border-hover);
194
+ }
195
+
196
+ .sf-icon {
197
+ font-size: 1.25rem;
198
+ flex-shrink: 0;
199
+ width: 28px;
200
+ text-align: center;
201
+ padding-top: 2px;
202
+ }
203
+
204
+ .sf-item strong {
205
+ display: block;
206
+ font-size: 0.88rem;
207
+ color: var(--text-primary);
208
+ margin-bottom: 4px;
209
+ }
210
+
211
+ .sf-item span {
212
+ font-size: 0.82rem;
213
+ color: var(--text-muted);
214
+ line-height: 1.5;
215
+ }
216
+
217
+ /* ─── Comparison Table ────────────────────────────────────────────── */
218
+ .compare-table {
219
+ width: 100%;
220
+ border-collapse: collapse;
221
+ }
222
+
223
+ .compare-table th,
224
+ .compare-table td {
225
+ padding: 14px 20px;
226
+ font-size: 0.88rem;
227
+ }
228
+
229
+ .compare-table th {
230
+ background: var(--bg-surface);
231
+ color: var(--text-muted);
232
+ font-weight: 700;
233
+ text-transform: uppercase;
234
+ letter-spacing: 0.04em;
235
+ font-size: 0.78rem;
236
+ }
237
+
238
+ .compare-table td {
239
+ border-bottom: 1px solid var(--border-color);
240
+ color: var(--text-secondary);
241
+ }
242
+
243
+ .compare-table tr:last-child td {
244
+ border-bottom: none;
245
+ }
246
+
247
+ .compare-table tr:hover td {
248
+ background: rgba(59,130,246,0.03);
249
+ }
250
+
251
+ .tc {
252
+ text-align: center !important;
253
+ }
254
+
255
+ .highlight-col {
256
+ background: rgba(139,92,246,0.04);
257
+ }
258
+
259
+ .compare-table .check {
260
+ color: var(--accent-green);
261
+ font-weight: 700;
262
+ font-size: 1rem;
263
+ }
264
+
265
+ .compare-table .cross {
266
+ color: var(--text-muted);
267
+ font-size: 0.9rem;
268
+ }
269
+
270
+ /* ─── Premium CTA ─────────────────────────────────────────────────── */
271
+ .premium-cta {
272
+ max-width: 700px;
273
+ margin: 0 auto;
274
+ }
275
+
276
+ .premium-cta h2 {
277
+ margin-bottom: 16px;
278
+ }
279
+
280
+ .premium-cta p {
281
+ color: var(--text-secondary);
282
+ font-size: 1.1rem;
283
+ line-height: 1.7;
284
+ }
285
+
286
+ /* ─── Responsive ──────────────────────────────────────────────────── */
287
+ @media (max-width: 768px) {
288
+ .service-row {
289
+ flex-direction: column;
290
+ gap: 16px;
291
+ }
292
+
293
+ .service-number {
294
+ min-width: auto;
295
+ font-size: 2.2rem;
296
+ }
297
+
298
+ .service-features {
299
+ grid-template-columns: 1fr;
300
+ }
301
+
302
+ .tier-pills {
303
+ flex-direction: column;
304
+ align-items: center;
305
+ }
306
+
307
+ .tier-pill {
308
+ width: 100%;
309
+ max-width: 360px;
310
+ }
311
+
312
+ .compare-table th,
313
+ .compare-table td {
314
+ padding: 10px 12px;
315
+ font-size: 0.8rem;
316
+ }
317
+ }