PageSourceSearch

https://autozenapp.com/pl/

html autozenapp.com collected 2026-09-24 13:44:33 UTC 62,181 bytes, 1,073 lines download raw bytes

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7    <title>AutoZen – deska rozdzielcza i nawigacja samochodowa na Androida</title>
8
9    <!-- Primary SEO Meta Tags -->
10    <meta name="description" content="Zmień telefon z Androidem w inteligentną deskę rozdzielczą: nawigacja GPS zakręt po zakręcie, ostrzeżenia o fotoradarach, muzyka, połączenia i asystent głosowy AI – bez użycia rąk. Za darmo, ponad 1 mln pobrań.">
11    <meta name="keywords" content="nawigacja samochodowa, alternatywa android auto, launcher samochodowy, nawigacja gps, deska rozdzielcza, ostrzeżenia o fotoradarach, ruch na żywo, tryb głośnomówiący">
12    <meta name="author" content="Zenthek">
13    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
14
15    <!-- Canonical URL -->
16    <link rel="canonical" href="https://autozenapp.com/pl/">
17
18    <!-- Hreflang for International SEO -->
19    <link rel="alternate" hreflang="en" href="https://autozenapp.com/">
20    <link rel="alternate" hreflang="es" href="https://autozenapp.com/es/">
21    <link rel="alternate" hreflang="de" href="https://autozenapp.com/de/">
22    <link rel="alternate" hreflang="pl" href="https://autozenapp.com/pl/">
23    <link rel="alternate" hreflang="x-default" href="https://autozenapp.com/">
24
25    <!-- Open Graph -->
26    <meta property="og:type" content="website">
27    <meta property="og:title" content="AutoZen – deska rozdzielcza i nawigacja samochodowa na Androida">
28    <meta property="og:description" content="Zaawansowana nawigacja zakręt po zakręcie, ostrzeżenia o fotoradarach, muzyka, połączenia i asystent głosowy AI. Twój towarzysz jazdy bez użycia rąk – ponad 1 mln pobrań.">
29    <meta property="og:locale" content="pl_PL">
30    <meta property="og:url" content="https://autozenapp.com/pl/">
31    <meta property="og:site_name" content="AutoZen">
32    <meta property="og:image" content="https://autozenapp.com/assets/og-image.jpg">
33    <meta property="og:image:secure_url" content="https://autozenapp.com/assets/og-image.jpg">
34    <meta property="og:image:width" content="1200">
35    <meta property="og:image:height" content="630">
36    <meta property="og:image:type" content="image/jpeg">
37    <meta property="og:image:alt" content="Deska rozdzielcza AutoZen z prędkościomierzem, pogodą, muzyką i nawigacją">
38
39    <!-- App-specific Open Graph -->
40    <meta property="al:android:package" content="com.zenthek.autozen">
41    <meta property="al:android:url" content="autozen://app">
42    <meta property="al:android:app_name" content="AutoZen">
43
44    <!-- Twitter Card -->
45    <meta name="twitter:card" content="summary_large_image">
46    <meta name="twitter:site" content="@autozen_app">
47    <meta name="twitter:creator" content="@autozen_app">
48    <meta name="twitter:title" content="AutoZen – deska rozdzielcza i nawigacja samochodowa na Androida">
49    <meta name="twitter:description" content="Zaawansowana nawigacja zakręt po zakręcie, ostrzeżenia o fotoradarach, muzyka, połączenia i asystent głosowy AI – bez użycia rąk. Ponad 1 mln pobrań.">
50    <meta name="twitter:image" content="https://autozenapp.com/assets/og-image.jpg">
51    <meta name="twitter:image:alt" content="Deska rozdzielcza AutoZen z prędkościomierzem, pogodą, muzyką i nawigacją">
52    <meta name="twitter:app:name:googleplay" content="AutoZen">
53    <meta name="twitter:app:id:googleplay" content="com.zenthek.autozen">
54    <meta name="twitter:app:url:googleplay" content="https://play.google.com/store/apps/details?id=com.zenthek.autozen">
55
56    <!-- Verification -->
57    <meta name="yandex-verification" content="71ab4e7ce591d010">
58    <meta name="google-play-app" content="app-id=com.zenthek.autozen">
59
60    <!-- Theme -->
61    <meta name="theme-color" content="#06080f">
62
63    <!-- Favicons and App Icons -->
64    <link rel="icon" href="/assets/favicon.png" type="image/png">
65    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
66    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
67    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
68    <link rel="manifest" href="/manifest.json">
69
70    <!-- Structured Data -->
71    
71<script type="application/ld+json">
72    {
73        "@context": "https://schema.org",
74        "@type": "MobileApplication",
75        "name": "AutoZen – Car Dashboard & Launcher",
76        "alternateName": "AutoZen",
77        "description": "Deska rozdzielcza, nawigacja i launcher do samochodu. Nawigacja GPS zakręt po zakręcie, ruch na żywo, ostrzeżenia o fotoradarach, muzyka, połączenia, wiadomości i asystent głosowy AI – bez użycia rąk.",
78        "url": "https://autozenapp.com/",
79        "applicationCategory": "NavigationApplication",
80        "operatingSystem": "Android",
81        "contentRating": "PEGI 3",
82        "offers": {
83            "@type": "Offer",
84            "price": "0",
85            "priceCurrency": "USD"
86        },
87        "downloadUrl": "https://play.google.com/store/apps/details?id=com.zenthek.autozen",
88        "installUrl": "https://play.google.com/store/apps/details?id=com.zenthek.autozen",
89        "screenshot": [
90            "https://autozenapp.com/assets/ps/card-01.webp",
91            "https://autozenapp.com/assets/ps/card-02.webp",
92            "https://autozenapp.com/assets/ps/showcase-2000.webp",
93            "https://autozenapp.com/assets/ps/search-map.webp"
94        ],
95        "aggregateRating": {
96            "@type": "AggregateRating",
97            "ratingValue": "4.1",
98            "ratingCount": "5892",
99            "bestRating": "5",
100            "worstRating": "1"
101        },
102        "author": {
103            "@type": "Organization",
104            "name": "Zenthek",
105            "url": "https://autozenapp.com/"
106        },
107        "publisher": {
108            "@type": "Organization",
109            "name": "Zenthek",
110            "logo": {
111                "@type": "ImageObject",
112                "url": "https://autozenapp.com/assets/logo-c.svg"
113            }
114        },
115        "featureList": [
116            "Nawigacja zakręt po zakręcie",
117            "Ruch drogowy na żywo",
118            "Ostrzeżenia o fotoradarach",
119            "Asystent głosowy AI",
120            "Integracja z muzyką",
121            "Połączenia bez użycia rąk",
122            "Odczytywanie i głosowe odpowiadanie na wiadomości",
123            "Informacje o pogodzie",
124            "Tryb launchera z widżetami",
125            "Podzielony ekran"
126        ],
127        "sameAs": [
128            "https://www.instagram.com/autozen_app/",
129            "https://www.youtube.com/@autozenApp",
130            "https://x.com/autozen_app",
131            "https://play.google.com/store/apps/details?id=com.zenthek.autozen"
132        ]
133    }
134    </script>
134
135    
135<script type="application/ld+json">
136    {
137        "@context": "https://schema.org",
138        "@type": "VideoObject",
139        "name": "Prezentacja aplikacji AutoZen",
140        "description": "Zobacz AutoZen w akcji: zaawansowane trasy, dokładne czasy przejazdu i intuicyjne wskazówki zakręt po zakręcie.",
141        "thumbnailUrl": "https://autozenapp.com/assets/preview-web.png",
142        "uploadDate": "2024-01-15",
143        "contentUrl": "https://autozenapp.com/assets/video.mp4"
144    }
145    </script>
145
146
147    <!-- Performance -->
148    <link rel="preconnect" href="https://fonts.googleapis.com">
149    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
150    <link rel="dns-prefetch" href="//play.google.com">
151    <link rel="preload" as="image" href="/assets/ps/card-01.webp">
152
153    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
154    <noscript><link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"></noscript>
155
156    <style>
157        :root {
158            --bg: #06080f;
159            --bg-2: #0a0e1a;
160            --panel: #0d1322;
161            --panel-2: #111a30;
162            --line: rgba(146, 163, 205, .14);
163            --line-strong: rgba(146, 163, 205, .26);
164            --text: #eef2fb;
165            --muted: #98a5c1;
166            --accent: #4f7df9;
167            --accent-2: #38c6ff;
168            --violet: #7c6bff;
169            --grad: linear-gradient(92deg, #6b9aff 0%, #38c6ff 55%, #8f7bff 100%);
170            --radius: 18px;
171            --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
172            --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
173            --header-h: 72px;
174        }
175
176        * { margin: 0; padding: 0; box-sizing: border-box; }
177
178        html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
179
180        body {
181            background: var(--bg);
182            color: var(--text);
183            font-family: var(--font-body);
184            font-size: 16px;
185            line-height: 1.6;
186            -webkit-font-smoothing: antialiased;
187            overflow-x: hidden;
188        }
189
190        img { max-width: 100%; height: auto; display: block; }
191        a { color: inherit; text-decoration: none; }
192        button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
193
194        ::selection { background: rgba(79, 125, 249, .45); }
195
196        .sr-only {
197            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
198            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
199        }
200
201        .skip-link {
202            position: fixed; top: -60px; left: 16px; z-index: 200;
203            background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 10px;
204            transition: top .2s;
205        }
206        .skip-link:focus { top: 12px; }
207
208        .wrap { width: min(1180px, 92%); margin-inline: auto; }
209
210        /* ---------- Ambient background ---------- */
211        .ambient {
212            position: fixed; inset: 0; z-index: -2; pointer-events: none;
213            background:
214                radial-gradient(52% 44% at 82% -6%, rgba(79, 125, 249, .28) 0%, transparent 62%),
215                radial-gradient(44% 38% at 4% 16%, rgba(124, 107, 255, .16) 0%, transparent 60%),
216                radial-gradient(36% 30% at 68% 68%, rgba(56, 198, 255, .07) 0%, transparent 60%),
217                var(--bg);
218        }
219        .ambient::after {
220            content: ""; position: absolute; inset: 0;
221            background-image:
222                linear-gradient(rgba(148, 163, 205, .05) 1px, transparent 1px),
223                linear-gradient(90deg, rgba(148, 163, 205, .05) 1px, transparent 1px);
224            background-size: 56px 56px;
225            mask-image: radial-gradient(60% 46% at 50% 6%, rgba(0,0,0,.9), transparent 78%);
226            -webkit-mask-image: radial-gradient(60% 46% at 50% 6%, rgba(0,0,0,.9), transparent 78%);
227        }
228
229        /* ---------- Header ---------- */
230        .site-header {
231            position: fixed; top: 0; left: 0; right: 0; z-index: 100;
232            height: var(--header-h);
233            display: flex; align-items: center;
234            transition: background .3s, border-color .3s, backdrop-filter .3s;
235            border-bottom: 1px solid transparent;
236        }
237        .site-header.scrolled {
238            background: rgba(7, 10, 18, .78);
239            -webkit-backdrop-filter: saturate(140%) blur(14px);
240            backdrop-filter: saturate(140%) blur(14px);
241            border-bottom-color: var(--line);
242        }
243        .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
244
245        .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: .2px; }
246        .brand img { width: 38px; height: 38px; }
247
248        .main-nav ul { display: flex; align-items: center; gap: 6px; list-style: none; }
249        .main-nav a {
250            display: block; padding: 9px 15px; border-radius: 10px;
251            font-size: 14.5px; font-weight: 500; color: var(--muted);
252            transition: color .2s, background .2s;
253        }
254        .main-nav a:hover, .main-nav a:focus-visible { color: var(--text); background: rgba(148, 163, 205, .1); }
255
256        .header-cta {
257            display: inline-flex; align-items: center; gap: 8px;
258            padding: 10px 18px; border-radius: 12px;
259            background: var(--accent); color: #fff; font-weight: 600; font-size: 14.5px;
260            box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 24px rgba(79,125,249,.35);
261            transition: transform .2s, box-shadow .2s, background .2s;
262        }
263        .header-cta:hover { background: #618cff; transform: translateY(-1px); }
264        .header-cta svg { width: 15px; height: 15px; }
265
266        .lang-switch {
267            display: flex; align-items: center; gap: 2px;
268            border: 1px solid var(--line); border-radius: 999px; padding: 3px;
269            background: rgba(13, 19, 34, .5);
270        }
271        .lang-switch a {
272            padding: 5px 10px; border-radius: 999px;
273            font-size: 12.5px; font-weight: 600; letter-spacing: .4px;
274            color: var(--muted); transition: color .2s, background .2s;
275        }
276        .lang-switch a:hover { color: var(--text); }
277        .lang-switch a.active { background: rgba(79, 125, 249, .3); color: #fff; }
278        .main-nav .lang-switch { display: none; }
279
280        .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; }
281        .nav-toggle:hover { background: rgba(148,163,205,.12); }
282        .nav-toggle svg { width: 26px;
282 height: 26px; }
283        .nav-close { display: none; }
284
285        /* ---------- Hero ---------- */
286        .hero { padding: calc(var(--header-h) + 64px) 0 40px; position: relative; }
287        .hero-grid {
288            display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
289            gap: 48px; align-items: center;
290        }
291
292        .rating-chip {
293            display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
294            padding: 7px 14px; border-radius: 999px;
295            border: 1px solid var(--line-strong);
296            background: rgba(15, 22, 40, .6);
297            font-size: 13px; font-weight: 500; color: var(--muted);
298            margin-bottom: 26px;
299        }
300        .rating-chip .star { color: #ffc83d; }
301        .rating-chip b { color: var(--text); font-weight: 600; }
302        .rating-chip .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
303
304        h1 {
305            font-family: var(--font-display);
306            font-size: clamp(38px, 5.2vw, 62px);
307            line-height: 1.06; letter-spacing: -1.2px; font-weight: 700;
308            margin-bottom: 22px; text-wrap: balance;
309        }
310        h1 .grad {
311            background: var(--grad);
312            -webkit-background-clip: text; background-clip: text;
313            -webkit-text-fill-color: transparent; color: transparent;
314        }
315
316        .hero-sub { font-size: clamp(16px, 1.6vw, 18.5px); color: var(--muted); max-width: 54ch; margin-bottom: 34px; }
317
318        .hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
319
320        .btn-play {
321            display: inline-flex; align-items: center; gap: 13px;
322            padding: 13px 24px 13px 18px; border-radius: 14px;
323            background: #fff; color: #0b0e17;
324            box-shadow: 0 10px 34px rgba(107, 154, 255, .3);
325            transition: transform .2s, box-shadow .2s;
326        }
327        .btn-play:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(107, 154, 255, .42); }
328        .btn-play img { width: 30px; height: 32px; }
329        .btn-play .txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
330        .btn-play .txt small { font-size: 11px; font-weight: 600; letter-spacing: .8px; opacity: .65; text-transform: uppercase; }
331        .btn-play .txt strong { font-size: 18px; font-weight: 700; font-family: var(--font-display); }
332
333        .btn-ghost {
334            display: inline-flex; align-items: center; gap: 10px;
335            padding: 14px 22px; border-radius: 14px;
336            border: 1px solid var(--line-strong);
337            background: rgba(15, 22, 40, .5);
338            font-weight: 600; font-size: 15px;
339            transition: border-color .2s, background .2s, transform .2s;
340        }
341        .btn-ghost:hover { border-color: rgba(146,163,205,.5); background: rgba(24, 33, 58, .7); transform: translateY(-2px); }
342        .btn-ghost svg { width: 17px; height: 17px; color: var(--accent-2); }
343
344        /* ---------- Stacked-card carousel ---------- */
345        .hero-copy { position: relative; z-index: 6; }
346        .hero-carousel { position: relative; }
347        .carousel-stage {
348            position: relative; height: clamp(420px, 46vw, 560px);
349            display: flex; align-items: center; justify-content: center;
350            perspective: 1300px;
351            touch-action: pan-y;
352            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
353            -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
354        }
355        .hero-card {
356            position: absolute;
357            width: clamp(210px, 22vw, 280px);
358            aspect-ratio: 720 / 1281;
359            border-radius: 22px; overflow: hidden;
360            border: 1px solid rgba(255, 255, 255, .14);
361            background: var(--panel);
362            box-shadow: 0 24px 70px rgba(3, 6, 14, .6);
363            transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .6s, filter .6s, box-shadow .6s;
364            will-change: transform;
365            padding: 0;
366        }
367        .hero-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
368        .hero-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
369
370        .hero-card[data-pos="0"] {
371            transform: translateX(0) scale(1);
371 z-index: 5; opacity: 1; cursor: default;
372            box-shadow: 0 10px 30px rgba(3,6,14,.5), 0 34px 90px rgba(79, 125, 249, .28);
373        }
374        .hero-card[data-pos="1"]  { transform: translateX(58%) rotateY(-9deg) scale(.86); z-index: 4; opacity: .85; filter: brightness(.62); }
375        .hero-card[data-pos="-1"] { transform: translateX(-58%) rotateY(9deg) scale(.86); z-index: 4; opacity: .85; filter: brightness(.62); }
376        .hero-card[data-pos="2"]  { transform: translateX(96%) rotateY(-13deg) scale(.72); z-index: 3; opacity: .4; filter: brightness(.4); }
377        .hero-card[data-pos="-2"] { transform: translateX(-96%) rotateY(13deg) scale(.72); z-index: 3; opacity: .4; filter: brightness(.4); }
378
379        .carousel-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
380        .car-btn {
381            width: 44px; height: 44px; border-radius: 50%;
382            border: 1px solid var(--line-strong);
383            background: rgba(15, 22, 40, .6);
384            display: inline-flex; align-items: center; justify-content: center;
385            transition: background .2s, border-color .2s, transform .2s;
386        }
387        .car-btn:hover { background: rgba(31, 44, 78, .8); border-color: rgba(146,163,205,.5); transform: translateY(-1px); }
388        .car-btn svg { width: 18px; height: 18px; }
389
390        .carousel-dots { display: flex; gap: 8px; }
391        .carousel-dots button {
392            width: 8px; height: 8px; border-radius: 999px; padding: 0;
393            background: rgba(148, 163, 205, .3);
394            transition: background .25s, width .25s;
395        }
396        .carousel-dots button[aria-current="true"] { width: 24px; background: var(--accent-2); }
397
398        /* ---------- Showcase band ---------- */
399        .showcase { padding: 72px 0 30px; }
400        .showcase-frame {
401            position: relative; border-radius: 26px; overflow: hidden;
402            border: 1px solid rgba(255, 255, 255, .12);
403            background: #05070d;
404            box-shadow: 0 40px 120px rgba(3, 6, 14, .7), 0 0 90px rgba(79, 125, 249, .13);
405        }
406        .showcase-frame::before {
407            content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
408            background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 14%);
409        }
410        .showcase-frame img { width: 100%; }
411        .showcase-caption { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 18px; }
412        .showcase-caption b { color: var(--text); font-weight: 600; }
413
414        /* ---------- Section scaffolding ---------- */
415        section { position: relative; }
416        .section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
417        .kicker {
418            display: inline-flex; align-items: center; gap: 8px;
419            font-size: 12.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
420            color: var(--accent-2); margin-bottom: 16px;
421        }
422        .kicker::before { content: ""; width: 22px; height: 2px; background: var(--grad); border-radius: 2px; }
423        .kicker.center::before { display: none; }
424        h2 {
425            font-family: var(--font-display);
426            font-size: clamp(28px, 3.6vw, 42px);
427            line-height: 1.12; letter-spacing: -.8px; font-weight: 700;
428            text-wrap: balance;
429        }
430        .section-head p { color: var(--muted); margin-top: 18px; font-size: 16.5px; }
431
432        /* ---------- Discover rows ---------- */
433        .discover { padding: 90px 0 30px; }
434        .feature-row {
435            display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px);
436            align-items: center; padding: 46px 0;
437        }
438        .feature-row .txt h2 { font-size: clamp(24px, 2.7vw, 33px); margin-bottom: 16px; }
439        .feature-row .txt h2 strong {
440            background: var(--grad);
441            -webkit-background-clip: text; background-clip: text;
442            -webkit-text-fill-color: transparent; color: transparent;
443        }
444        .feature-row .txt p { color: var(--muted); max-width: 50ch; }
445        .feature-icon {
446            width: 52px; height: 52px; border-radius: 14px;
447            display: flex; align-items: center; justify-content: center;
448            background: linear-gradient(145deg, rgba(79,125,249,.2), rgba(56,198,255,.08));
449            border: 1px solid rgba(79, 125, 249, .3);
450            margin-bottom: 20px;
451        }
452        .feature-icon img { width: 28px; height: 28px; }
453
454        .device-card {
455            border-radius: 22px; overflow: hidden;
456            border: 1px solid var(--line);
457            background: linear-gradient(160deg, var(--panel-2), var(--panel));
458            padding: 14px;
459            box-shadow: 0 30px 80px rgba(3, 6, 14, .55);
460        }
461        .device-card img { border-radius: 12px; width: 100%; }
462        .feature-row:nth-child(even) .txt { order: 1; }
463        .feature-row:nth-child(even) .vis { order: 0; }
464
465        /* ---------- Features tabs ---------- */
466        .features { padding: 100px 0 40px; }
467        .tabs-bar {
468            display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
469            margin-bottom: 40px;
470        }
471        .tab-btn {
472            display: inline-flex; align-items: center; gap: 9px;
473            padding: 11px 19px; border-radius: 999px;
474            border: 1px solid var(--line);
475            background: rgba(13, 19, 34, .6);
476            color: var(--muted); font-weight: 600; font-size: 14px;
477            transition: all .25s;
478        }
479        .tab-btn svg { width: 17px; height: 17px; }
480        .tab-btn:hover { color: var(--text); border-color: var(--line-strong); }
481        .tab-btn[aria-selected="true"] {
482            color: #fff; border-color: transparent;
483            background: linear-gradient(120deg, #4f7df9, #3d6cf0);
484            box-shadow: 0 10px 30px rgba(79, 125, 249, .35);
485        }
486
487        .tab-panel {
488            display: none;
489            grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
490            gap: clamp(32px, 4.5vw, 64px); align-items: center;
491            border: 1px solid var(--line);
492            border-radius: 26px;
493            background: linear-gradient(165deg, rgba(17, 26, 48, .75), rgba(10, 14, 26, .9));
494            padding: clamp(26px, 4vw, 52px);
495        }
496        .tab-panel.active { display: grid; animation: panelIn .5s cubic-bezier(.22,.61,.36,1); }
497        @keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
498
499        .tab-panel figure {
500            display: flex; align-items: center; justify-content: center;
501            max-height: 520px;
502        }
503        .tab-panel figure img {
504            max-height: 500px; width: auto; max-width: 100%;
505            border-radius: 16px;
506            box-shadow: 0 26px 70px rgba(3, 6, 14, .6);
507        }
508        .tab-panel h3 {
509            font-family: var(--font-display);
510            font-size: clamp(22px, 2.4vw, 30px); line-height: 1.18;
511            letter-spacing: -.5px; margin-bottom: 14px; text-wrap: balance;
512        }
513        .tab-panel .panel-txt p { color: var(--muted); max-width: 48ch; }
514
515        /* ---------- CTA band ---------- */
516        .cta { padding: 110px 0; }
517        .cta-band {
518            position: relative; overflow: hidden;
519            border-radius: 30px; text-align: center;
520            padding: clamp(56px, 7vw, 88px) 24px;
521            background:
522                radial-gradient(70% 120% at 50% -20%, rgba(56, 198, 255, .35) 0%, transparent 60%),
523                radial-gradient(90% 150% at 80% 120%, rgba(124, 107, 255, .4) 0%, transparent 55%),
524                linear-gradient(140deg, #16255c 0%, #101a3f 55%, #0c1128 100%);
525            border: 1px solid rgba(120, 150, 255, .3);
526        }
527        .cta-band::before {
528            content: ""; position: absolute; inset: 0; pointer-events: none;
529            background-image:
530                linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
531                linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
532            background-size: 44px 44px;
533            mask-image: radial-gradient(70% 90% at 50% 0%, rgba(0,0,0,.8), transparent 80%);
534            -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, rgba(0,0,0,.8), transparent 80%);
535        }
536        .cta-band h2 { margin-bottom: 16px; }
537        .cta-band p { color: rgba(226, 233, 250, .78); max-width: 56ch; margin: 0 auto 34px; }
538        .cta-band .btn-play { box-shadow: 0 14px 44px rgba(4, 8, 20, .5); }
539        .cta-rating { margin-top: 22px; font-size: 13.5px; color: rgba(226, 233, 250, .6); }
540        .cta-rating .star { color: #ffc83d; }
541
542        /* ---------- Footer ---------- */
543        .site-footer { border-top: 1px solid var(--line); padding: 44px 0 52px; background: rgba(6, 9, 16, .8); }
544        .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
545        .footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
546        .footer-brand img { width: 30px; height: 30px; }
547        .footer-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; color: var(--muted); }
548        .footer-links a:hover { color: var(--text); }
549        .footer-social { display: flex; align-items: center; gap: 8px; }
550        .footer-social a {
551            width: 40px; height: 40px; border-radius: 11px;
552            display: inline-flex; align-items: center; justify-content: center;
553            border: 1px solid var(--line); color: var(--muted);
554            transition: all .2s;
555        }
556        .footer-social a:hover { color: var(--text); border-color: var(--line-strong); background: rgba(148,163,205,.08); transform: translateY(-2px); }
557        .footer-social svg { width: 18px; height: 18px; }
558        .footer-copy { width: 100%; margin-top: 10px; font-size: 13px; color: rgba(152, 165, 193, .55); }
559
560        /* ---------- Video modal ---------- */
561        dialog.video-modal {
562            border: 1px solid var(--line-strong); border-radius: 20px; padding: 0;
563            background: #05070d; color: var(--text);
564            width: min(960px, 94vw);
565            box-shadow: 0 50px 140px rgba(0, 0, 0, .8);
566        }
567        dialog.video-modal::backdrop { background: rgba(3, 5, 10, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
568        .video-shell { position: relative; }
569        .video-shell video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 20px; }
570        .video-close {
571            position: absolute; top: -14px; right: -14px; z-index: 2;
572            width: 40px; height: 40px; border-radius: 50%;
573            background: #fff; color: #0b0e17;
574            display: flex; align-items: center; justify-content: center;
575            box-shadow: 0 8px 24px rgba(0,0,0,.5);
576        }
577        .video-close svg { width: 16px; height: 16px; }
578
579        /* ---------- Reveal animations ---------- */
580        .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
581        .reveal.in { opacity: 1; transform: none; }
582
583        @media (prefers-reduced-motion: reduce) {
584            html { scroll-behavior: auto; }
585            *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
586            .reveal { opacity: 1; transform: none; }
587        }
588
589        /* ---------- Responsive ---------- */
590        @media (max-width: 1024px) {
591            .hero-grid { grid-template-columns: 1fr; gap: 26px; }
592            .hero { text-align: center; padding-top: calc(var(--header-h) + 44px); }
593            .hero-sub { margin-inline: auto; }
594            .hero-ctas { justify-content: center; }
595            .carousel-stage { height: clamp(400px, 62vw, 520px); }
596            .hero-card { width: clamp(190px, 26vw, 250px); }
597            .feature-row { grid-template-columns: 1fr; gap: 30px; padding: 36px 0; }
598            .feature-row:nth-child(even) .vis { order: 1; }
599            .feature-row .txt { text-align: center; }
600            .feature-row .txt p { margin-inline: auto; }
601            .feature-icon { margin-inline: auto; }
602            .tab-panel { grid-template-columns: 1fr; text-align: center; }
603            .tab-panel .panel-txt p { margin-inline: auto; }
604            .tab-panel figure img { max-height: 420px; }
605        }
606
607        @media (max-width: 760px) {
608            .main-nav {
609                position: fixed; inset: 0; z-index: 150;
610                background: rgba(4, 6, 12, .99);
611                -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
612                display: flex; align-items: center; justify-content: center;
613                opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
614            }
615            .main-nav.open { opacity: 1; visibility: visible; }
616            .main-nav ul { flex-direction: column; gap: 10px; text-align: center; }
617            .main-nav a { font-size: 22px; font-family: var(--font-display); font-weight: 600; color: var(--text); padding: 12px 26px; }
618            .nav-close {
619                display: flex; position: absolute; top: 18px; right: 18px;
620                width: 44px; height: 44px; border-radius: 12px;
621                align-items: center; justify-content: center;
622                border: 1px solid var(--line-strong);
623            }
624            .nav-close svg { width: 20px; height: 20px; }
625            .nav-toggle { display: inline-flex; }
626            .header-cta { display: none; }
627            .header-lang { display: none; }
628            .main-nav .lang-switch {
629                display: flex; position: absolute; bottom: 44px; left: 50%;
630                transform: translateX(-50%);
631            }
632            .main-nav .lang-switch a { font-size: 14px; padding: 7px 14px; }
633            .hero-card { width: clamp(180px, 52vw, 230px); }
634            .hero-card[data-pos="1"], .hero-card[data-pos="-1"] { opacity: .55; }
635            .hero-card[data-pos="2"], .hero-card[data-pos="-2"] { opacity: 0; pointer-events: none; }
636            .showcase { padding-top: 46px; }
637            .showcase-frame { border-radius: 16px; }
638            .cta { padding: 70px 0; }
639            .footer-inner { flex-direction: column; text-align: center; }
640            .footer-copy { margin-top: 4px; }
641        }
642    </style>
643</head>
644<body>
645    <a class="skip-link" href="#home">Przejdź do treści</a>
646    <div class="ambient" aria-hidden="true"></div>
647
648    <header class="site-header" id="siteHeader">
649        <div class="wrap header-inner">
650            <a class="brand" href="#home" aria-label="Strona główna AutoZen">
651                <img src="/assets/logo-c.svg" alt="" width="38" height="38">
652                <span>AutoZen</span>
653            </a>
654
655            <nav class="main-nav" id="mainNav" aria-label="Nawigacja główna">
656                <ul>
657                    <li><a href="#home" class="nav-link">Start</a></li>
658                    <li><a href="#discover" class="nav-link">Odkrywaj</a></li>
659                    <li><a href="#features" class="nav-link">Funkcje</a></li>
660                    <li><a href="https://autozenapp.com/forum/" target="_blank" rel="noopener">Forum</a></li>
661                    <li><a href="#download" class="nav-link">Zaczynamy!</a></li>
662                </ul>
663                <button class="nav-close" id="navClose" aria-label="Zamknij menu">
664                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
665                </button>
666                <div class="lang-switch" aria-label="Language">
667                    <a href="/" lang="en" hreflang="en">EN</a>
668                    <a href="/es/" lang="es" hreflang="es">ES</a>
669                    <a href="/de/" lang="de" hreflang="de">DE</a>
670                    <a href="/pl/" class="active" lang="pl" hreflang="pl">PL</a>
671                </div>
672            </nav>
673
674            <div style="display:flex; align-items:center; gap:10px;">
675                <div class="lang-switch header-lang" aria-label="Language">
676                    <a href="/" lang="en" hreflang="en">EN</a>
677                    <a href="/es/" lang="es" hreflang="es">ES</a>
678                    <a href="/de/" lang="de" hreflang="de">DE</a>
679                    <a href="/pl/" class="active" lang="pl" hreflang="pl">PL</a>
680                </div>
681                <a class="header-cta" href="https://play.google.com/store/apps/details?id=com.zenthek.autozen" target="_blank" rel="noopener">
682                    Pobierz aplikację
683                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
684                </a>
685                <button class="nav-toggle" id="navToggle" aria-label="Otwórz menu" aria-expanded="false" aria-controls="mainNav">
686                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
687                </button>
688            </div>
689        </div>
690    </header>
691
692    <main>
693        <!-- ============ HERO ============ -->
694        <section class="hero" id="home">
695            <div class="wrap">
696                <div class="hero-grid">
697                    <div class="hero-copy">
698                        <p class="rating-chip">
699                            <span><span class="star" aria-hidden="true">★</span> <b>4,1</b> w Google Play</span>
700                            <span class="dot" aria-hidden="true"></span>
701                            <span><b>1 mln+</b> pobrań</span>
702                            <span class="dot" aria-hidden="true"></span>
703                            <span>Za darmo</span>
704                        </p>
705
706                        <h1>Zaawansowana <span class="grad">nawigacja</span> zakręt po zakręcie dla Twojego auta</h1>
707
708                        <p class="hero-sub">Korzystaj z zaawansowanych tras i dokładnych czasów przejazdu z intuicyjnymi wskazówkami zakręt po zakręcie. Muzyka, połączenia i wiadomości – wszystko bez użycia rąk, z oczami na drodze.</p>
709
710                        <div class="hero-ctas">
711                            <a href="https://play.google.com/store/apps/details?id=com.zenthek.autozen" target="_blank" rel="noopener" class="btn-play" aria-label="Pobierz AutoZen z Google Play">
712                                <svg viewBox="0 0 512 512" width="30" height="32" aria-hidden="true"><path fill="#00d7fe" d="M48 32c-8 5-13 14-13 25v398c0 11 5 20 13 25l224-224L48 32z"/><path fill="#00f076" d="M48 32c6-4 15-5 24 0l276 157-76 76L48 32z"/><path fill="#ffce00" d="M348 189l67 38c22 13 22 45 0 58l-67 38-82-67 82-67z"/><path fill="#ff3a44" d="M48 480c6 4 15 5 24 0l276-157-76-76L48 480z"/></svg>
713                                <span class="txt"><small>Pobierz z</small><strong>Google Play</strong></span>
714                            </a>
715                            <button class="btn-ghost" id="watchDemo">
716                                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13l11-6.5-11-6.5z"/></svg>
717                                Zobacz demo
718                            </button>
719                        </div>
720                    </div>
721
722                    <div class="hero-carousel">
723                        <div class="carousel-stage" id="carouselStage" aria-roledescription="carousel" aria-label="Zrzuty ekranu AutoZen">
724                            <button class="hero-card" data-i="0" data-pos="0"><img src="/assets/ps/card-01.webp" alt="Ekran nawigacji zakręt po zakręcie w AutoZen" width="720" height="1281" fetchpriority="high"></button>
725                            <button class="hero-card" data-i="1" data-pos="1"><img src="/assets/ps/card-02.webp" alt="Nawigacja HERE Maps z budynkami 3D w AutoZen" width="720" height="1281"></button>
726                            <button class="hero-card" data-i="2" data-pos="2"><img src="/assets/ps/card-05.webp" alt="Jasny i ciemny tryb mapy w AutoZen" width="720" height="1281" loading="lazy"></button>
727                            <button class="hero-card" data-i="3" data-pos="-2"><img src="/assets/ps/card-06.webp" alt="Tryb launchera AutoZen z prędkościomierzem i widżetami" width="720" height="1281" loading="lazy"></button>
728                            <button class="hero-card" data-i="4" data-pos="-1"><img src="/assets/ps/card-07.webp" alt="Konfigurowalne pulpity AutoZen" width="720" height="1281" loading="lazy"></button>
729                        </div>
730
731                        <div class="carousel-controls">
732                            <button class="car-btn" id="carPrev" aria-label="Poprzedni zrzut ekranu">
733                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg>
734                            </button>
735                            <div class="carousel-dots" id="carDots" role="group" aria-label="Wybierz zrzut ekranu"></div>
736                            <button class="car-btn" id="carNext" aria-label="Następny zrzut ekranu">
737                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/></svg>
738                            </button>
739                        </div>
740                    </div>
741                </div>
742
743                <div class="showcase reveal">
744                    <div class="showcase-frame">
745                        <img src="/assets/ps/showcase-1100.webp"
746                             srcset="/assets/ps/showcase-1100.webp 1100w, /assets/ps/showcase-2000.webp 2000w"
747                             sizes="(max-width: 1240px) 92vw, 1180px"
748                             alt="Tryb launchera AutoZen: pogoda, muzyka, prędkościomierz, ograniczenie prędkości i skróty aplikacji na jednym pulpicie"
749                             width="2000" height="925" loading="lazy">
750                    </div>
751                    <p class="showcase-caption"><b>Tryb launchera</b> – kompletny pulpit stworzony do jazdy: prędkość, pogoda, muzyka i Twoje aplikacje w zasięgu wzroku.</p>
752                </div>
753            </div>
754        </section>
755
756        <!-- ============ DISCOVER ============ -->
757        <section class="discover" id="discover">
758            <div class="wrap">
759                <div class="section-head reveal">
760                    <p class="kicker center">Odkrywaj</p>
761                    <h2>Wszystko, czego potrzebujesz w drodze</h2>
762                </div>
763
764                <div class="feature-row reveal">
765                    <div class="txt">
766                        <div class="feature-icon"><img src="/assets/icon-caracteristica-1.svg" alt="" width="28" height="28"></div>
767                        <h2>Wyszukuj <strong>ciekawe miejsca</strong> bez wysiłku</h2>
768                        <p>Nawiguj z łatwością dzięki wyszukiwarce miejsc AutoZen – odkrywaj cele podróży i ciekawe miejsca (POI) dla płynnej, bezstresowej jazdy.</p>
769                    </div>
770                    <div class="vis">
771                        <div class="device-card"><img src="/assets/ps/feature-1.webp" alt="Animowane demo: wyszukiwanie miejsc i punktów POI w AutoZen" width="720" height="551" loading="lazy"></div>
772                    </div>
773                </div>
774
775                <div class="feature-row reveal">
776                    <div class="txt">
777                        <div class="feature-icon"><img src="/assets/icon-caracteristica-2.svg" alt="" width="28" height="28"></div>
778                        <h2>Bądź o krok do przodu, <strong>jedź mądrze</strong></h2>
779                        <p>Ostrzeżenia o fotoradarach w AutoZen informują Cię na bieżąco o zbliżających się fotoradarach – Twój najlepszy towarzysz bezpiecznej i bezstresowej jazdy.</p>
780                    </div>
781                    <div class="vis">
782                        <div class="device-card"><img src="/assets/ps/feature-2.webp" alt="Animowane demo: ostrzeżenia o fotoradarach w czasie rzeczywistym" width="640" height="489" loading="lazy"></div>
783                    </div>
784                </div>
785
786                <div class="feature-row reveal">
787                    <div class="txt">
788                        <div class="feature-icon"><img src="/assets/icon-caracteristica-3.svg" alt="" width="28" height="28"></div>
789                        <h2><strong>Pogoda</strong> w czasie rzeczywistym</h2>
790                        <p>
790Bądź na bieżąco z informacjami i alertami pogodowymi w czasie rzeczywistym podczas podróży.</p>
791                    </div>
792                    <div class="vis">
793                        <div class="device-card"><img src="/assets/ps/feature-3.webp" alt="Animowane demo: informacje o pogodzie w AutoZen" width="720" height="551" loading="lazy"></div>
794                    </div>
795                </div>
796
797                <div class="feature-row reveal">
798                    <div class="txt">
799                        <div class="feature-icon"><img src="/assets/icon-caracteristica-4.svg" alt="" width="28" height="28"></div>
800                        <h2><strong>Asystent głosowy AI</strong>, który podróżuje z Tobą</h2>
801                        <p>Poproś AutoZen o wyszukanie celu, sterowanie nawigacją, odtwarzanie utworów z serwisów muzycznych, sprawdzenie pogody, zadzwonienie do kontaktu i więcej.</p>
802                    </div>
803                    <div class="vis">
804                        <div class="device-card"><img src="/assets/ps/feature-4.webp" alt="Animowane demo: asystent głosowy AI steruje nawigacją i muzyką" width="640" height="489" loading="lazy"></div>
805                    </div>
806                </div>
807            </div>
808        </section>
809
810        <!-- ============ FEATURES ============ -->
811        <section class="features" id="features">
812            <div class="wrap">
813                <div class="section-head reveal">
814                    <p class="kicker center">Funkcje</p>
815                    <h2>Porzuć rozpraszacze, jedź mądrzej</h2>
816                    <p>AutoZen przenosi Twoje ulubione aplikacje na Twoje urządzenie. Nawiguj, rozmawiaj i słuchaj muzyki – wszystko bez użycia rąk, z oczami na drodze. Nawigacja, muzyka, wiadomości, telefon, kontakty, fotoradary: wszystko w jednym miejscu.</p>
817                </div>
818
819                <div class="tabs-bar reveal" role="tablist" aria-label="Narzędzia AutoZen">
820                    <button class="tab-btn" role="tab" id="tab-music" aria-controls="panel-music" aria-selected="true">
821                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
822                        Muzyka
823                    </button>
824                    <button class="tab-btn" role="tab" id="tab-calls" aria-controls="panel-calls" aria-selected="false">
825                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
826                        Połączenia
827                    </button>
828                    <button class="tab-btn" role="tab" id="tab-messages" aria-controls="panel-messages" aria-selected="false">
829                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
830                        Wiadomości
831                    </button>
832                    <button class="tab-btn" role="tab" id="tab-design" aria-controls="panel-design" aria-selected="false">
833                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r="2.5"/><path d="M12 2a10 10 0 1 0 10 10c0-1.38-1.12-2.5-2.5-2.5H17a2 2 0 0 1-2-2c0-.5.2-.97.5-1.32.3-.36.5-.82.5-1.31A2.87 2.87 0 0 0 13.13 2H12z"/></svg>
834                        Wygląd
835                    </button>
836                    <button class="tab-btn" role="tab" id="tab-functionality" aria-controls="panel-functionality" aria-selected="false">
837                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 3v18"/></svg>
838                        Funkcjonalność
839                    </button>
840                    <button class="tab-btn" role="tab" id="tab-widgets" aria-controls="panel-widgets" aria-selected="false">
841                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
842                        Widżety
843                    </button>
844                </div>
845
846                <div class="tab-panel active" id="panel-music" role="tabpanel" aria-labelledby="tab-music">
847                    <figure><img src="/assets/ps/tab-04.webp" alt="Odtwarzacz muzyki AutoZen sterujący Spotify" width="800" height="1186" loading="lazy"></figure>
848                    <div class="panel-txt">
849                        <h3>Twoja ulubiona muzyka w drodze!</h3>
850                        <p>Podkręć zabawę i steruj ulubionym odtwarzaczem muzyki jednym dotknięciem lub gestem.</p>
851                    </div>
852                </div>
853
854                <div class="tab-panel" id="panel-calls" role="tabpanel" aria-labelledby="tab-calls" hidden>
855                    <figure><img src="/assets/img-o-caracteristicas-2.webp" alt="Dialer AutoZen z integracją kontaktów" width="850" height="450" loading="lazy"></figure>
856                    <div class="panel-txt">
857                        <h3>Dzwoń bez wysiłku</h3>
858                        <p>AutoZen integruje kontakty – dzwoń bezpośrednio z listy ostatnich połączeń lub kontaktów.</p>
859                    </div>
860                </div>
861
862                <div class="tab-panel" id="panel-messages" role="tabpanel" aria-labelledby="tab-messages" hidden>
863                    <figure><img src="/assets/ps/tab-03.webp" alt="Powiadomienia AutoZen z głosowymi odpowiedziami" width="800" height="1170" loading="lazy"></figure>
864                    <div class="panel-txt">
865                        <h3>Wiadomości bez rozpraszania</h3>
866                        <p>Odsłuchuj przychodzące wiadomości i odpowiadaj głosowo na SMS, WhatsApp, Signal, Facebook Messenger i inne.</p>
867                    </div>
868                </div>
869
870                <div class="tab-panel" id="panel-design" role="tabpanel" aria-labelledby="tab-design" hidden>
871                    <figure><img src="/assets/ps/tab-07.webp" alt="Konfigurowalne pulpity AutoZen" width="800" height="1194" loading="lazy"></figure>
872                    <div class="panel-txt">
873                        <h3>Tryb launchera to nowy wymiar pulpitu</h3>
874                        <p>Ulepsz swoją jazdę, wybierając spośród pulpitów takich jak Cockpit, Coolwalk, Mapa, Prędkościomierze i inne. Dodaj widżety, aby nadać im osobisty charakter.</p>
875                    </div>
876                </div>
877
878                <div class="tab-panel" id="panel-functionality" role="tabpanel" aria-labelledby="tab-functionality" hidden>
879                    <figure><img src="/assets/img-o-caracteristicas-5.webp" alt="Tryb Coolwalk z mapą i multimediami na podzielonym ekranie" width="850" height="450" loading="lazy"></figure>
880                    <div class="panel-txt">
881                        <h3>Zobacz więcej dzięki podzielonemu ekranowi</h3>
882                        <p>Miej pełny obraz na każdym ekranie – tryb launchera Coolwalk pokazuje więcej informacji podczas jazdy.</p>
883                    </div>
884                </div>
885
886                <div class="tab-panel" id="panel-widgets" role="tabpanel" aria-labelledby="tab-widgets" hidden>
887                    <figure><img src="/assets/ps/tab-06.webp" alt="Launcher AutoZen z widżetami pogody, muzyki i mapy" width="800" height="1289" loading="lazy"></figure>
888                    <div class="panel-txt">
889                        <h3>
889Dodaj ulubione widżety do launchera</h3>
890                        <p>Wybieraj między widżetami AutoZen a natywnymi widżetami Androida, jak Google Maps, aby ulepszyć swój launcher.</p>
891                    </div>
892                </div>
893            </div>
894        </section>
895
896        <!-- ============ CTA ============ -->
897        <section class="cta" id="download">
898            <div class="wrap">
899                <div class="cta-band reveal">
900                    <h2>Gotowy, by zacząć?</h2>
901                    <p>Od autostrady po boczne drogi – z AutoZen zrobisz więcej podczas jazdy. Podróż bez zakłóceń. Pobierz AutoZen już teraz.</p>
902                    <a href="https://play.google.com/store/apps/details?id=com.zenthek.autozen" target="_blank" rel="noopener" class="btn-play" aria-label="Pobierz AutoZen z Google Play">
903                        <svg viewBox="0 0 512 512" width="30" height="32" aria-hidden="true"><path fill="#00d7fe" d="M48 32c-8 5-13 14-13 25v398c0 11 5 20 13 25l224-224L48 32z"/><path fill="#00f076" d="M48 32c6-4 15-5 24 0l276 157-76 76L48 32z"/><path fill="#ffce00" d="M348 189l67 38c22 13 22 45 0 58l-67 38-82-67 82-67z"/><path fill="#ff3a44" d="M48 480c6 4 15 5 24 0l276-157-76-76L48 480z"/></svg>
904                        <span class="txt"><small>Pobierz z</small><strong>Google Play</strong></span>
905                    </a>
906                    <p class="cta-rating"><span class="star" aria-hidden="true">★</span> Ocena 4,1 · 5892 opinie · 1 mln+ pobrań · Za darmo</p>
907                </div>
908            </div>
909        </section>
910    </main>
911
912    <footer class="site-footer">
913        <div class="wrap footer-inner">
914            <div class="footer-brand">
915                <img src="/assets/logo-c.svg" alt="" width="30" height="30">
916                <span>AutoZen</span>
917            </div>
918
919            <nav class="footer-links" aria-label="Stopka">
920                <a href="https://autozenapp.com/forum/" target="_blank" rel="noopener">Forum</a>
921                <a href="/privacy-policy.html">Polityka prywatności</a>
922                <a href="/terms.html">Warunki korzystania</a>
923            </nav>
924
925            <div class="footer-social">
926                <a href="https://play.google.com/store/apps/details?id=com.zenthek.autozen" target="_blank" rel="noopener" aria-label="AutoZen w Google Play">
927                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 1.8c-.4.2-.6.6-.6 1.1v18.2c0 .5.2.9.6 1.1l10-10.2L3.6 1.8zm11.1 9.1l2.8-2.8-11.3-6.5 8.5 9.3zm0 2.2l-8.5 9.3 11.3-6.5-2.8-2.8zm4.7-3.5l-2.6 1.5 2.9 2.9 1.7-1c1-.6 1-2.1 0-2.7l-2-.7z"/></svg>
928                </a>
929                <a href="https://www.instagram.com/autozen_app/" target="_blank" rel="noopener" aria-label="AutoZen na Instagramie">
930                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4.2"/><circle cx="17.4" cy="6.6" r="1.1" fill="currentColor" stroke="none"/></svg>
931                </a>
932                <a href="https://www.youtube.com/@autozenApp" target="_blank" rel="noopener" aria-label="AutoZen na YouTube">
933                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 7.2a3 3 0 0 0-2.1-2.2C19.5 4.5 12 4.5 12 4.5s-7.5 0-9.4.5A3 3 0 0 0 .5 7.2 31.6 31.6 0 0 0 0 12c0 1.6.2 3.2.5 4.8a3 3 0 0 0 2.1 2.2c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.2c.3-1.6.5-3.2.5-4.8s-.2-3.2-.5-4.8zM9.6 15.6V8.4L15.8 12l-6.2 3.6z"/></svg>
934                </a>
935                <a href="https://x.com/autozen_app" target="_blank" rel="noopener" aria-label="AutoZen na X (Twitter)">
936                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.9 1.2h3.7l-8.1 9.3L24 22.8h-7.5l-5.9-7.7-6.7 7.7H.2l8.7-9.9L0 1.2h7.7l5.3 7 5.9-7zm-1.3 19.4h2L6.6 3.3h-2.2l13.2 17.3z"/></svg>
937                </a>
938            </div>
939
940            <p class="footer-copy">© <span id="year">2026</span> Zenthek · AutoZen na Androida</p>
941        </div>
942    </footer>
943
944    <dialog class="video-modal" id="demoDialog" aria-label="Wideo demonstracyjne AutoZen">
945        <div class="video-shell">
946            <button class="video-close" id="demoClose" aria-label="Zamknij wideo">
947                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
948            </button>
949            <video controls playsinline preload="none" poster="/assets/preview-web.png" id="demoVideo">
950                <source src="/assets/video.mp4" type="video/mp4">
951            </video>
952        </div>
953    </dialog>
954
955    
955<script>
956    (function () {
957        "use strict";
958        var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
959
960        /* Header state */
961        var header = document.getElementById("siteHeader");
962        function onScroll() { header.classList.toggle("scrolled", window.scrollY > 8); }
963        window.addEventListener("scroll", onScroll, { passive: true });
964        onScroll();
965
966        /* Mobile nav */
967        var nav = document.getElementById("mainNav");
968        var navToggle = document.getElementById("navToggle");
969        function setNav(open) {
970            nav.classList.toggle("open", open);
971            navToggle.setAttribute("aria-expanded", String(open));
972            document.body.style.overflow = open ? "hidden" : "";
973        }
974        navToggle.addEventListener("click", function () { setNav(!nav.classList.contains("open")); });
975        document.getElementById("navClose").addEventListener("click", function () { setNav(false); });
976        nav.querySelectorAll("a").forEach(function (a) { a.addEventListener("click", function () { setNav(false); }); });
977
978        /* Stacked-card carousel */
979        var cards = Array.prototype.slice.call(document.querySelectorAll(".hero-card"));
980        var N = cards.length;
981        var active = 0;
982        var dotsWrap = document.getElementById("carDots");
983        var stage = document.getElementById("carouselStage");
984
985        cards.forEach(function (c, i) {
986            var d = document.createElement("button");
987            d.setAttribute("aria-label", "Przejdź do zrzutu " + (i + 1));
988            d.addEventListener("click", function () { goTo(i); restart(); });
989            dotsWrap.appendChild(d);
990        });
991        var dots = Array.prototype.slice.call(dotsWrap.children);
992
993        function render() {
994            cards.forEach(function (c, i) {
995                var off = (i - active + N) % N;      /* 0..N-1 */
996                if (off > N / 2) off -= N;            /* -2..2 for N=5 */
997                c.setAttribute("data-pos", String(off));
998                c.setAttribute("aria-hidden", off === 0 ? "false" : "true");
999                c.tabIndex = off === 0 ? -1 : 0;
1000                var lbl = off === 0 ? "Bieżący zrzut ekranu" : "Pokaż zrzut " + (i + 1);
1001                c.setAttribute("aria-label", lbl);
1002            });
1003            dots.forEach(function (d, i) { d.setAttribute("aria-current", i === active ? "true" : "false"); });
1004        }
1005        function goTo(i) { active = (i + N) % N; render(); }
1006        function next() { goTo(active + 1); }
1007        function prev() { goTo(active - 1); }
1008
1009        cards.forEach(function (c, i) { c.addEventListener("click", function () { if (i !== active) { goTo(i); restart(); } }); });
1010        document.getElementById("carNext").addEventListener("click", function () { next(); restart(); });
1011        document.getElementById("carPrev").addEventListener("click", function () { prev(); restart(); });
1012
1013        /* Swipe */
1014        var px = null;
1015        stage.addEventListener("pointerdown", function (e) { px = e.clientX; }, { passive: true });
1016        stage.addEventListener("pointerup", function (e) {
1017            if (px === null) return;
1018            var dx = e.clientX - px; px = null;
1019            if (Math.abs(dx) > 42) { dx < 0 ? next() : prev(); restart(); }
1020        });
1021
1022        /* Auto-advance */
1023        var timer = null;
1024        function start() { if (!reduceMotion) timer = setInterval(next, 6000); }
1025        function stop() { if (timer) { clearInterval(timer); timer = null; } }
1026        function restart() { stop(); start(); }
1027        stage.addEventListener("pointerenter", stop);
1028        stage.addEventListener("pointerleave", start);
1029        document.addEventListener("visibilitychange", function () { document.hidden ? stop() : start(); });
1030        render(); start();
1031
1032        /* Tabs */
1033        var tabs = Array.prototype.slice.call(document.querySelectorAll(".tab-btn"));
1034        var panels = Array.prototype.slice.call(document.querySelectorAll(".tab-panel"));
1035        tabs.forEach(function (t) {
1036            t.addEventListener("click", function () {
1037                tabs.forEach(function (o) { o.setAttribute("aria-selected", "false"); });
1038                panels.forEach(function (p) { p.classList.remove("active"); p.hidden = true; });
1039                t.setAttribute("aria-selected", "true");
1040                var panel = document.getElementById(t.getAttribute("aria-controls"));
1041                panel.hidden = false;
1042                panel.classList.add("active");
1043            });
1044        });
1045
1046        /* Video modal */
1047        var dialog = document.getElementById("demoDialog");
1048        var video = document.getElementById("demoVideo");
1049        document.getElementById("watchDemo").addEventListener("click", function () { dialog.showModal(); });
1050        function closeDemo() { video.pause(); dialog.close(); }
1051        document.getElementById("demoClose").addEventListener("click", closeDemo);
1052        dialog.addEventListener("click", function (e) { if (e.target === dialog) closeDemo(); });
1053        dialog.addEventListener("cancel", function () { video.pause(); });
1054
1055        /* Reveal on scroll */
1056        var revealEls = Array.prototype.slice.call(document.querySelectorAll(".reveal"));
1057        if (!("IntersectionObserver" in window) || reduceMotion) {
1058            revealEls.forEach(function (el) { el.classList.add("in"); });
1059        } else {
1060            var io = new IntersectionObserver(function (entries) {
1061                entries.forEach(function (en) {
1062                    if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
1063                });
1064            }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });
1065            revealEls.forEach(function (el) { io.observe(el); });
1066        }
1067
1068        document.getElementById("year").textContent = String(new Date().getFullYear());
1069    })();
1070    </script>
vendor: 1 bytes, line 1070
1070
1071<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"95515ee44af04e9cb96f75ffda20ec32","r":1,"spa":2}' crossorigin="anonymous"></script>
1071
1072</body>
1073</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.