1<!DOCTYPE html>
2<html lang="en-US" data-theme="light">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Privacy Policy - The Service 4 U</title>
7
8 <link rel="icon" type="image/webp" href="http://theservice4u.com/media_content/The-Service-4-U_transparent.webp">
9
10 <link rel="preconnect" href="https://fonts.googleapis.com">
11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
13
14 <style>
15 :root {
16 --bg: #f7f5f2;
17 --bg-card: #ffffff;
18 --text: #1c1c1e;
19 --text-muted: #6b6b6b;
20 --accent: #0a6eff;
21 --accent-2: #ff6b35;
22 --border: #e8e4de;
23 --header-bg: rgba(247, 245, 242, 0.9);
24 --shadow: 0 4px 24px rgba(0,0,0,0.08);
25 --nav-link: #1c1c1e;
26 --toggle-bg: #e8e4de;
27 --toggle-circle: #1c1c1e;
28 --section-num: #e8e4de;
29 }
30
31 [data-theme="dark"] {
32 --bg: #0e0e12;
33 --bg-card: #16161e;
34 --text: #eeecf0;
35 --text-muted: #888899;
36 --accent: #4da6ff;
37 --accent-2: #ff8c5a;
38 --border: #2a2a38;
39 --header-bg: rgba(14, 14, 18, 0.92);
40 --shadow: 0 4px 24px rgba(0,0,0,0.4);
41 --nav-link: #eeecf0;
42 --toggle-bg: #2a2a38;
43 --toggle-circle: #4da6ff;
44 --section-num: #1e1e2a;
45 }
46
47 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
48
49 body {
50 font-family: 'DM Sans', sans-serif;
51 background: var(--bg);
52 color: var(--text);
53 line-height: 1.75;
54 font-weight: 300;
55 transition: background 0.3s, color 0.3s;
56 }
57
58 /* HEADER */
59 .site-header {
60 position: sticky;
61 top: 0;
62 background: var(--header-bg);
63 backdrop-filter: blur(16px);
64 -webkit-backdrop-filter: blur(16px);
65 border-bottom: 1px solid var(--border);
66 z-index: 9999;
67 transition: background 0.3s, border-color 0.3s;
68 }
69
70 .nav-wrap {
71 max-width: 1120px;
72 margin: auto;
73 display: flex;
74 align-items: center;
75 justify-content: space-between;
76 padding: 0 24px;
77 height: 64px;
78 gap: 24px;
79 }
80
81 .logo {
82 font-family: 'Playfair Display', serif;
83 font-weight: 900;
84 font-size: 20px;
85 color: var(--text);
86 white-space: nowrap;
87 letter-spacing: -0.5px;
88 transition: color 0.3s;
89 }
90
91 .logo span {
92 color: var(--accent);
93 }
94
95 .main-nav ul {
96 display: flex;
97 gap: 4px;
98 list-style: none;
99 }
100
101 .main-nav a {
102 display: block;
103 text-decoration: none;
104 font-weight: 500;
105 font-size: 14px;
106 color: var(--text-muted);
107 padding: 6px 12px;
108 border-radius: 8px;
109 transition: color 0.2s, background 0.2s;
110 }
111
112 .main-nav a:hover {
113 color: var(--text);
114 background: var(--border);
115 }
116
117 .header-right {
118 display: flex;
119 align-items: center;
120 gap: 12px;
121 }
122
123 /* Dark mode toggle */
124 .theme-toggle {
125 position: relative;
126 width: 48px;
127 height: 26px;
128 cursor: pointer;
129 flex-shrink: 0;
130 }
131
132 .theme-toggle input {
133 opacity: 0;
134 width: 0;
135 height: 0;
136 position: absolute;
137 }
138
139 .toggle-track {
140 position: absolute;
141 inset: 0;
142 background: var(--toggle-bg);
143 border-radius: 999px;
144 transition: background 0.3s;
145 display: flex;
146 align-items: center;
147 justify-content: space-between;
148 padding: 0 5px;
149 font-size: 11px;
150 }
151
152 .toggle-thumb {
153 position: absolute;
154 top: 3px;
155 left: 3px;
156 width: 20px;
157 height: 20px;
158 background: var(--toggle-circle);
159 border-radius: 50%;
160 transition: left 0.3s, background 0.3s;
161 }
162
163 input:checked ~ .toggle-thumb {
164 left: calc(100% - 23px);
165 }
166
167 .menu-toggle {
168 display: none;
169 background: none;
170 border: 1px solid var(--border);
171 color: var(--text);
172 font-size: 14px;
173 font-weight: 500;
174 padding: 8px 14px;
175 border-radius: 8px;
176 cursor: pointer;
177 transition: border-color 0.2s, color 0.2s;
178 }
179
180 @media (max-width: 768px) {
181 .menu-toggle { display: block; }
182 .main-nav {
183 position: absolute;
184 left: 0; right: 0;
185 top: 64px;
186 background: var(--bg-card);
187 border-bottom: 1px solid var(--border);
188 display: none;
189 }
190 .main-nav.active { display: block; }
191 .main-nav ul { flex-direction: column; padding: 12px; gap: 2px; }
192 .main-nav a { border-radius: 8px; }
193 }
194
195 /* HERO */
196 .page-hero {
197 background: var(--bg-card);
198 border-bottom: 1px solid var(--border);
199 padding: 64px 24px 56px;
200 text-align: center;
201 transition: background 0.3s, border-color 0.3s;
202 }
203
204 .hero-label {
205 display: inline-block;
206 font-size: 11px;
207 font-weight: 500;
208 letter-spacing: 0.12em;
209 text-transform: uppercase;
210 color: var(--accent);
211 background: color-mix(in srgb, var(--accent) 12%, transparent);
212 padding: 4px 12px;
213 border-radius: 999px;
214 margin-bottom: 20px;
215 }
216
217 .page-hero h1 {
218 font-family: 'Playfair Display', serif;
219 font-size: clamp(36px, 5vw, 60px);
220 font-weight: 700;
221 letter-spacing: -1.5px;
222 line-height: 1.1;
223 color: var(--text);
224 margin-bottom: 16px;
225 }
226
227 .page-hero p {
228 font-size: 16px;
229 color: var(--text-muted);
230 max-width: 480px;
231 margin: 0 auto;
232 }
233
234 /* MAIN CONTENT */
235 .content-wrap {
236 max-width: 760px;
237 margin: 0 auto;
238 padding: 64px 24px 80px;
239 }
240
241 .policy-section {
242 margin-bottom: 48px;
243 padding: 36px 40px;
244 background: var(--bg-card);
245 border-radius: 16px;
246 border: 1px solid var(--border);
247 box-shadow: var(--shadow);
248 position: relative;
249 overflow: hidden;
250 transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
251 animation: fadeUp 0.5s both;
252 }
253
254 .policy-section:nth-child(1) { animation-delay: 0.05s; }
255 .policy-section:nth-child(2) { animation-delay: 0.1s; }
256 .policy-section:nth-child(3) { animation-delay: 0.15s; }
257 .policy-section:nth-child(4) { animation-delay: 0.2s; }
258 .policy-section:nth-child(5) { animation-delay: 0.25s; }
259 .policy-section:nth-child(6) { animation-delay: 0.3s; }
260 .policy-section:nth-child(7) { animation-delay: 0.35s; }
261
262 @keyframes fadeUp {
263 from { opacity: 0; transform: translateY(18px); }
264 to { opacity: 1; transform: translateY(0); }
265 }
266
267 .section-num {
268 position: absolute;
269 top: 24px;
270 right: 28px;
271 font-family: 'Playfair Display', serif;
272 font-size: 72px;
273 font-weight: 900;
274 color: var(--section-num);
275 line-height: 1;
276 user-select: none;
277 transition: color 0.3s;
278 }
279
280 .policy-section h2 {
281 font-family: 'Playfair Display', serif;
282 font-size: 22px;
283 font-weight: 700;
284 color: var(--text);
285 margin-bottom: 16px;
286 letter-spacing: -0.3px;
287 position: relative;
288 }
289
290 .policy-section p {
291 color: var(--text-muted);
292 font-size: 15px;
293 line-height: 1.8;
294 margin-bottom: 12px;
295 }
296
297 .policy-section p:last-child { margin-bottom: 0; }
298
299 .policy-section ul {
300 list-style: none;
301 padding: 0;
302 margin: 0;
303 }
304
305 .policy-section ul li {
306 color: var(--text-muted);
307 font-size: 15px;
308 padding: 6px 0 6px 20px;
309 position: relative;
310 border-bottom: 1px solid var(--border);
311 }
312
313 .policy-section ul li:last-child { border-bottom: none; }
314
315 .policy-section ul li::before {
316 content: '';
317 position: absolute;
318 left: 0;
319 top: 50%;
320 transform: translateY(-50%);
321 width: 6px;
322 height: 6px;
323 background: var(--accent);
324 border-radius: 50%;
325 }
326
327 .effective-date {
328 text-align: center;
329 margin-bottom: 40px;
330 padding: 16px 24px;
331 background: color-mix(in srgb, var(--accent) 8%, transparent);
332 border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
333 border-radius: 12px;
334 color: var(--accent);
335 font-size: 14px;
336 font-weight: 500;
337 }
338
339 /* FOOTER */
340 .site-footer {
341 background: var(--bg-card);
342 border-top: 1px solid var(--border);
343 padding: 32px 24px;
344 text-align: center;
345 transition: background 0.3s, border-color 0.3s;
346 }
347
348 .site-footer p {
349 color: var(--text-muted);
350 font-size: 13px;
351 }
352
353 .site-footer a {
354 color: var(--accent);
355 text-decoration: none;
356 }
357
358 @media (max-width: 600px) {
359 .policy-section { padding: 28px 24px; }
360 .section-num { font-size: 52px; top: 20px; right: 20px; }
361 }
362 </style>
363</head>
364<body>
365
366 <header class="site-header">
367 <div class="nav-wrap">
368 <div class="logo">The Service <span>4 U</span></div>
369 <button class="menu-toggle" aria-label="Toggle Menu">Menu</button>
370 <nav class="main-nav" aria-label="Primary">
371 <ul>
372 <li><a href="https://theservice4u.com/">Home</a></li>
373 <li><a href="https://theservice4u.com/all-plans/">All Plans</a></li>
374 <li><a href="https://theservice4u.com/install/">Installation</a></li>
375 <li><a href="https://theservice4u.com/clients/clientarea.php">My Account</a></li>
376 <li><a href="https://theservice4u.com/resellers/">Resellers</a></li>
377 </ul>
378 </nav>
379 <div class="header-right">
380 <label class="theme-toggle" aria-label="Toggle dark mode">
381 <input type="checkbox" id="themeToggle">
382 <div class="toggle-track">
383 <span>☀️</span>
384 <span>🌙</span>
385 </div>
386 <div class="toggle-thumb"></div>
387 </label>
388 </div>
389 </div>
390 </header>
391
392 <div class="page-hero">
393 <div class="hero-label">Legal</div>
394 <h1>Privacy Policy</h1>
395 <p>How we collect, use, and protect your information when you use our services.</p>
396 </div>
397
398 <main class="content-wrap">
399
400 <div class="effective-date">Effective Date: August 1, 2024</div>
401
402 <article>
403
404 <div class="policy-section">
405 <div class="section-num">1</div>
406 <h2>Information We Collect</h2>
407 <p>We may collect the following types of information:</p>
408 <ul>
409 <li>Personal identification information (name, email address, phone number)</li>
410 <li>Billing and payment information</li>
411 <li>Usage data and interaction with our services</li>
412 <li>Device and browser information</li>
413 <li>IP address and location data</li>
414 </ul>
415 </div>
416
417 <div class="policy-section">
418 <div class="section-num">2</div>
419 <h2>How We Use Your Information</h2>
420 <p>We use collected information to provide, maintain, and improve our services, process transactions, send service-related communications, respond to comments and questions, and analyze usage patterns to enhance user experience.</p>
421 <p>We do not sell, trade, or rent your personal information to third parties for their marketing purposes.</p>
422 </div>
423
424 <div class="policy-section">
425 <div class="section-num">3</div>
426 <h2>Cookies & Tracking</h2>
427 <p>We use cookies and similar tracking technologies to track activity on our website and hold certain information. Cookies are files with a small amount of data which may include an anonymous unique identifier.</p>
428 <p>You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you do not accept cookies, some portions of our service may not function properly.</p>
429 </div>
430
431 <div class="policy-section">
432 <div class="section-num">4</div>
433 <h2>Data Security</h2>
434 <p>We implement reasonable security measures to protect your personal information. However, no method of transmission over the internet or method of electronic storage is 100% secure.</p>
435 <p>While we strive to use commercially acceptable means to protect your information, we cannot guarantee its absolute security.</p>
436 </div>
437
438 <div class="policy-section">
439 <div class="section-num">5</div>
440 <h2>Your Rights</h2>
441 <p>You may have certain rights regarding your personal information, including:</p>
442 <ul>
443 <li>The right to access, correct, or delete your personal information</li>
444 <li>The right to withdraw consent if you have provided it</li>
445 <li>The right to opt out of marketing communications</li>
446 </ul>
447 <p style="margin-top:16px;">To exercise these rights, please contact us at our site.</p>
448 </div>
449
450 <div class="policy-section">
451 <div class="section-num">6</div>
452 <h2>Third-Party Links</h2>
453 <p>Our website may contain links to third-party websites. We are not responsible for the privacy practices of these websites. We encourage you to review their privacy policies before providing any personal information.</p>
454 </div>
455
456 <div class="policy-section">
457 <div class="section-num">7</div>
458 <h2>Changes to This Policy</h2>
459 <p>We may update this Privacy Policy from time to time. Any changes will be posted on this page with an updated effective date.</p>
460 <p>We encourage you to review this Privacy Policy periodically to stay informed about how we are protecting your information.</p>
461 </div>
462
463 </article>
464 </main>
465
466 <footer class="site-footer">
467 <p>Copyright © 2026 <a href="https://theservice4u.com/">The Service 4 U</a> — Powered by The Service 4 U</p>
468 </footer>
469
470 <script>
471 // Menu toggle
472 const btn = document.querySelector('.menu-toggle');
473 const nav = document.querySelector('.main-nav');
474 btn.addEventListener('click', e => { e.preventDefault(); nav.classList.toggle('active'); });
475 document.addEventListener('click', e => {
476 if (!nav.classList.contains('active')) return;
477 if (btn.contains(e.target) || nav.contains(e.target)) return;
478 nav.classList.remove('active');
479 });
480
481 // Dark mode toggle - persist preference
482 const toggle = document.getElementById('themeToggle');
483 const html = document.documentElement;
484
485 const saved = localStorage.getItem('theme');
486 if (saved === 'dark') { html.setAttribute('data-theme', 'dark'); toggle.checked = true; }
487
488 toggle.addEventListener('change', () => {
489 const isDark = toggle.checked;
490 html.setAttribute('data-theme', isDark ? 'dark' : 'light');
491 localStorage.setItem('theme', isDark ? 'dark' : 'light');
492 });
493 </script>
494
495</body>
496</html>
497