PageSourceSearch

https://aiopop.com/

html aiopop.com collected 2026-10-09 05:06:48 UTC 61,400 bytes, 1,360 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<!--************************************************************************************************************-->
5<!--********************************************** aioPop Player ***********************************************-->
6<!--*********************************************** Version 1.0 ************************************************-->
7<!--********************************************** June 13, 2026 ***********************************************-->
8<!--************************************************************************************************************-->
9<!---------------------------------------------------------------------------------------------------------------->
10<!---------------------------------------- Code by: Bernd Sebastian Kamps ---------------------------------------->
11<!---------------------------------------------------------------------------------------------------------------->
12<!-- Description: aioPop is a free multilingual audio language player using the Powerplay method.               -->
13<!-- Listen to sentences in six languages, repeat aloud, and follow along in 30 translation languages.          -->
14<!-- Twenty episodes per language, all set in Sardinia. Free PDF downloads. No account required.                -->
15<!--                                                                                                            -->
16<!-- Features:                                                                                                  -->
17<!-- • Powerplay: sentence plays — you repeat aloud — sentence plays again. At your own pace.                  -->
18<!-- • 6 Audio Languages: English, Spanish, French, Italian, Portuguese, Chinese                                -->
19<!-- • 30 Translation Languages: read along in your own language                                                -->
20<!-- • 20 Episodes per language, all set in Sardinia                                                            -->
21<!-- • Continuous and Loop modes, adjustable speed and pause duration                                           -->
22<!-- • Megaloop: drill across multiple lessons in sequence                                                      -->
23<!-- • PDF download for every language pair — no account, no registration                                       -->
24<!-- • Responsive: optimised for desktop and mobile                                                             -->
25<!--                                                                                                            -->
26<!-- Repository: https://github.com/bsk54/aioPop.git ------------------------------------------------------>
27<!-- Web site: https://aiopop.com                                                                               -->
28<!--************************************************************************************************************-->
29
30
31<meta charset="UTF-8">
32<meta name="viewport" content="width=device-width, initial-scale=1.0">
33<title>aioPop — Free Language Courses for the World</title>
34<meta name="description" content="Learn English, Spanish, French, Italian, Portuguese or Chinese free. No app. No account. No payment. Ever. Just open it and listen.">
35
36<!-- ═══════ INVISIBLE SEO: Meta Tags ═══════ -->
37<meta name="keywords" content="learn languages free, free language courses, language learning online, English, Spanish, French, Italian, Portuguese, Chinese, Powerplay method, free language learning, duolingo alternative, free language app alternative">
38<meta name="author" content="Patricia Bourcillier and Bernd Sebastian Kamps">
39<meta name="robots" content="index, follow">
40<link rel="canonical" href="https://aiopop.com">
41
42<!-- ═══════ INVISIBLE SEO: Open Graph (Social Sharing) ═══════ -->
43<meta property="og:type" content="website">
44<meta property="og:url" content="https://aiopop.com">
45<meta property="og:title" content="aioPop — Free Language Courses for the World">
46<meta property="og:description" content="Learn English, Spanish, French, Ital
46ian, Portuguese or Chinese free. No app. No account. No payment. Ever. Just open it and listen.">
47<meta property="og:image" content="https://aiopop.com/img/og-aiopop.jpg">
48<meta property="og:site_name" content="aioPop">
49<meta property="og:locale" content="en_US">
50
51<!-- ═══════ INVISIBLE SEO: Twitter/X Tags ═══════ -->
52<meta name="twitter:card" content="summary_large_image">
53<meta name="twitter:url" content="https://aiopop.com">
54<meta name="twitter:title" content="aioPop — Free Language Learning">
55<meta name="twitter:description" content="Learn 6 languages free. No app. No account. No payment. Ever.">
56<meta name="twitter:image" content="https://aiopop.com/img/og-aiopop.jpg">
57<meta name="twitter:creator" content="@aiopop">
58
59<!-- Favicons (site root) -->
60<link rel="icon" href="/favicons/favicon.ico" sizes="any">
61<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg">
62<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
63<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
64<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
65<link rel="manifest" href="/favicons/site.webmanifest">
66<meta name="theme-color" content="#06283D">
67
68
69
70<style>
71@font-face {
72    font-family: 'Outfit';
73    src: url('fonts/Outfit[wght].ttf') format('truetype');
74    font-weight: 100 900; font-style: normal; font-display: swap;
75}
76@font-face {
77    font-family: 'Cormorant Garamond';
78    src: url('fonts/CormorantGaramond[wght].ttf') format('truetype');
79    font-weight: 100 900; font-style: normal; font-display: swap;
80}
81@font-face {
82    font-family: 'Cormorant Garamond';
83    src: url('fonts/CormorantGaramond-Italic[wght].ttf') format('truetype');
84    font-weight: 100 900; font-style: italic; font-display: swap;
85}
86
87*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
88html { scroll-behavior:smooth; }
89body { font-family:'Outfit',sans-serif; background:#fff; color:#1a1a1a; overflow-x:hidden; }
90
91/* ══════════ NAV ══════════ */
92.nav {
93    position: fixed; top:0; left:0; right:0; z-index:1000;
94    background: rgba(11,34,64,0.97);
95    backdrop-filter: blur(8px);
96    border-bottom: 1px solid rgba(255,255,255,0.07);
97    height: 52px;
98    display: flex; align-items: center;
99    padding: 0 2rem;
100}
101.nav-logo {
102    font-family:'Cormorant Garamond',serif;
103    font-size:1.5rem; font-weight:600;
104    color:#fff; text-decoration:none; letter-spacing:0.01em;
105}
106.nav-logo span { color:#E8C448; }
107.nav-spacer { flex:1; }
108.aio-lang-wrap { position: relative; }
109.aio-lang-btn { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.3rem 0.55rem; border-radius: 4px; cursor: pointer; min-width: 2.4rem; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: background 0.15s; }
110.aio-lang-btn:hover { background: rgba(255,255,255,0.26); }
111.aio-lang-panel { display: none; position: absolute; top: calc(100% + 0.35rem); right: 0; background: #fff; border: 1px solid rgba(0,0,0,0.10); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.14); min-width: 150px; max-height: 260px; overflow-y: auto; padding: 0.3rem 0; z-index: 1100; }
112.aio-lang-panel.open { display: block; }
113.aio-lang-list { display: flex; flex-direction: column; }
114.aio-lang-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.5rem 1rem; font-size: 0.88rem; color: #222; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: background 0.1s; }
115.aio-lang-item:hover { background: #f4f4f4; }
116.aio-lang-item.active { background: #e8f2fb; color: #063A5B; font-weight: 600; }
117.nav-hamburger {
118    background:none; border:none; cursor:pointer;
119    display:flex; flex-direction:column; gap:5px;
120    padding:6px; border-radius:4px;
121    transition: background 0.15s;
122}
123.nav-hamburger:hover { background: rgba(255,255,255,0.08); }
124.nav-hamburger span {
125    display:block; width:22px; height:2px;
126    background:#fff; border-radius:2px;
127    transition: transform 0.25s, opacity 0.25s;
128}
129.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
130.nav-hamburger.open span:nth-child(2) { opacity:0; }
131.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
132
133.nav-drawer {
134    position:fixed; top:52px; right:0; bottom:0;
135    width:260px; background:#0B2240;
136    border-left:1px solid rgba(255,255,255,0.08);
137    z-index:999;
138    display:flex; flex-direction:column;
139    padding:2rem 1.5rem;
140    transform: translateX(100%);
141    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
142}
143.nav-drawer.open { transform: translateX(0); }
144.nav-drawer a {
145    color:rgba(255,255,255,0.75);
146    text-decoration:none;
147    font-size:0.95rem; font-weight:500;
148    padding:0.8rem 0;
149    border-bottom:1px solid rgba(255,255,255,0.07);
150    transition: color 0.15s;
151    display:flex; align-items:center; gap:10px;
152}
153.nav-drawer a:hover { color:#E8C448; }
154.nav-drawer a:last-child { border-bottom:none; }
155.nav-drawer-cta {
156    margin-top:auto;
157    padding:0.9rem 1.2rem;
158    background:#E8C448; color:#0B2240 !important;
159    border-radius:5px; font-weight:700 !important;
160    text-align:center; justify-content:center !important;
161    border-bottom:none !important;
162}
163.nav-drawer-cta:hover { background:#f5d460; color:#0B2240 !important; }
164.nav-overlay {
165    position:fixed; inset:0; background:rgba(0,0,0,0.4);
166    z-index:998; opacity:0; pointer-events:none;
167    transition: opacity 0.28s;
168}
169.nav-overlay.open { opacity:1; pointer-events:all; }
170.hero {
171    background: #0B2240;
172    min-height: 100svh;
173    display: flex;
174    flex-direction: column;
175    justify-content: center;
176    padding: 7rem 4rem 4rem;
177    position: relative;
178    overflow: hidden;
179}
180
181.hero-sardinia {
182    position: absolute; right: -2%; top: 0; bottom: 0;
183    width: 38%; max-width: 420px;
184    opacity: 0.06; pointer-events: none; z-index: 0;
185}
186.hero-sardinia path { stroke:#fff; stroke-width:8; fill:none; stroke-linejoin:round; stroke-linecap:round; }
187
188.hero-ghost {
189    position: absolute; right: -0.03em; bottom: -0.12em;
190    font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700;
191    font-size: clamp(7rem,26vw,20rem); line-height:1;
192    color: rgba(255,255,255,0.025); pointer-events:none; user-select:none; white-space:nowrap; z-index:0;
193}
194
195.hero-inner { position:relative; z-index:1; max-width:820px; }
196
197.hero-eyebrow {
198    font-size:0.7rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase;
199    color:#E8C448; margin-bottom:1.8rem; display:flex; align-items:center; gap:10px;
200}
201.hero-eyebrow::before {
202    content:''; display:block; width:28px; height:2px; background:#E8C448; flex-shrink:0;
203}
204
205.hero-headline {
206    font-family:'Cormorant Garamond',serif;
207    font-size: clamp(3.2rem,7vw,7rem);
208    font-weight:600; line-height:0.9;
209    letter-spacing:-0.02em; color:#fff;
210    margin-bottom:0.6rem;
211}
212.hero-headline em {
213    font-style:italic; color:#E8C448;
214}
215
216.hero-languages {
217    margin:1.5rem 0 2.2rem 0;
218    font-size:1.05rem;
219    color:rgba(255,255,255,0.75);
220    letter-spacing:0.04em;
221    line-height:1.8;
222    font-weight:500;
223}
224
225.hero-honest {
226    font-family:'Cormorant Garamond',serif;
227    font-style:italic;
228    font-size: clamp(1.1rem,2.2vw,1.5rem);
229    color:rgba(255,255,255,0.45);
230    line-height:1.5; margin:1.8rem 0 0.8rem;
231    border-left:2px solid rgba(232,196,72,0.4);
232    padding-left:1rem;
233}
234
235.hero-claims {
236    display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem;
237    margin-bottom:2.8rem;
238}
239.hero-claim {
240    font-size:0.82rem; font-weight:500;
241    color:rgba(255,255,255,0.5);
242    display:flex; align-items:center; gap:6px;
243}
244.hero-claim::before {
245    content:''; display:block; width:5px; height:5px;
246    border-radius:50%; background:#E8C448; flex-shrink:0;
247}
248
249/* ── Language Picker ── */
250.picker-label {
251    font-size:0.75rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase;
252    color:rgba(255,255,255,0.4); margin-bottom:0.8rem;
253}
254
255.picker {
256    display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
257    background:rgba(255,255,255,0.06);
258    border:1px solid rgba(255,255,255,0.15);
259    border-radius:8px; overflow:hidden;
260    width:fit-content; max-width:100%;
261}
262
263.picker-group {
264    display:flex; flex-direction:column;
265    padding:0.8rem 1.2rem;
266    border-right:1px solid rgba(255,255,255,0.1);
267    min-width:160px;
268}
269.picker-group-label {
270    font-size:0.62rem; font-weight:600; letter-spacing:0.15em;
271    text-transform:uppercase; color:rgba(255,255,255,0.3);
272    margin-bottom:0.4rem;
273}
274.picker select {
275    background:transparent; border:none; outline:none;
276    color:#fff; font-family:'Outfit',sans-serif;
277    font-size:1rem; font-weight:600;
278    cursor:pointer; appearance:none;
279    padding-right:1.2rem;
280    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgba(255,255,255,0.4)' d='M7 8l3 3 3-3H7z'/%3E%3C/svg%3E");
281    background-repeat:no-repeat; background-position:right 0 center; background-size:1.1em;
282}
283.picker select option { background:#0B2240; color:#fff; }
284
285.picker-go {
286    display:flex; align-items:center; justify-content:center;
287    padding:1rem 2rem;
288    background:#E8C448; color:#0B2240;
289    font-family:'Outfit',sans-serif;
290    font-size:0.95rem; font-weight:700;
291    border:none; cursor:pointer;
292    transition:background 0.18s;
293    white-space:nowrap; gap:8px;
294    text-decoration:none;
295}
296.picker-go:hover { background:#f5d460; }
297.picker-go svg { flex-shrink:0; }
298
299.hero-since {
300    margin-top:2rem;
301    font-size:0.75rem; color:rgba(255,255,255,0.25);
302    letter-spacing:0.08em;
303}
304
305/* ══════════ HOW IT WORKS ══════════ */
306.how {
307    background:#f7f6f2;
308    padding:5rem 4rem;
309}
310.how-inner { max-width:1100px; margin:0 auto; }
311
312.section-eyebrow {
313    font-size:0.7rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase;
314    color:#E8C448; margin-bottom:1.2rem;
315    display:flex; align-items:center; gap:10px;
316}
317.section-eyebrow::before { content:''; display:block; width:28px; height:2px; background:#E8C448; flex-shrink:0; }
318
319.how-headline {
320    font-family:'Cormorant Garamond',serif;
321    font-size:clamp(2rem,4vw,3.2rem);
322    font-weight:600; color:#0B2240; margin-bottom:0.6rem;
323}
324.how-sub {
325    font-size:0.9rem; color:#888; line-height:1.7; max-width:520px; margin-bottom:3rem;
326}
327
328.steps {
329    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
330    border:1.5px solid #e0ddd5; border-radius:10px; overflow:hidden;
331}
332.step {
333    padding:2rem 2rem 2.2rem;
334    border-right:1.5px solid #e0ddd5;
335    background:#fff;
336}
337.step:last-child { border-right:none; }
338
339.step-num {
340    font-family:'Cormorant Garamond',serif;
341    font-size:3.5rem; font-weight:700; line-height:1;
342    color:#E8C448; margin-bottom:1rem;
343    opacity:0.8;
344}
345.step-title {
346    font-size:1rem; font-weight:700; color:#0B2240;
347    margin-bottom:0.5rem;
348}
349.step-desc {
350    font-size:0.85rem; color:#666; line-height:1.65;
351}
352.step-desc em {
353    font-style:italic; color:#0B2240; font-weight:500;
354}
355
356.how-note {
357    margin-top:2rem;
358    padding:1.2rem 1.5rem;
359    background:#fff; border:1.5px solid #e0ddd5; border-radius:8px;
360    font-family:'Cormorant Garamond',serif; font-style:italic;
361    font-size:1.1rem; color:#555; line-height:1.6;
362    max-width:640px;
363}
364
365/* ══════════ NUMBERS ══════════ */
366.numbers { background:#0B2240; }
367.numbers-inner {
368    max-width:1100px; margin:0 auto;
369    display:grid; grid-template-columns:repeat(5,1fr);
370    border-left:1px solid rgba(255,255,255,0.07);
371}
372.number-item {
373    padding:3rem 2rem;
374    border-right:1px solid rgba(255,255,255,0.07);
375    border-bottom:1px solid rgba(255,255,255,0.07);
376}
377.number-big {
378    font-family:'Cormorant Garamond',serif;
379    font-size:3.5rem; font-weight:700; line-height:1;
380    color:#E8C448; margin-bottom:0.4rem;
381}
382.number-label { font-size:0.8rem; color:rgba(255,255,255,0.45); font-weight:500; line-height:1.4; }
383.number-since { font-size:0.7rem; color:rgba(255,255,255,0.25); margin-top:0.3rem; }
384
385/* ══════════ SARDINIA STORY ══════════ */
386.sardinia {
387    padding:5rem 4rem;
388    display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center;
389    max-width:1100px; margin:0 auto;
390}
391.sardinia-text .section-eyebrow { color:#0B2240; }
392.sardinia-text .section-eyebrow::before { background:#0B2240; }
393.sardinia-headline {
394    font-family:'Cormorant Garamond',serif;
395    font-size:clamp(2rem,3.5vw,2.8rem);
396    font-weight:600; color:#0B2240; line-height:1.05;
397    margin-bottom:1.2rem;
398}
399.sardinia-headline em { font-style:italic; color:#E8C448; }
400.sardinia-body {
401    font-size:0.9rem; color:#555; line-height:1.8; margin-bottom:1.5rem;
402}
403.sardinia-svg {
404    opacity:0.15;
405}
406.sardinia-svg path { stroke:#0B2240; stroke-width:8; fill:none; stroke-linejoin:round; stroke-linecap:round; }
407
408/* ══════════ PROJECTS SECTION ══════════ */
409.projects-section {
410    background:#f7f6f2;
411    padding:5rem 4rem;
412    border-top:1px solid #e8e5dd;
413}
414.projects-inner { max-width:1100px; margin:0 auto; }
415
416/* Featured Projects */
417.projects-featured { margin-bottom:5rem; }
418.projects-featured-title {
419    font-family:'Cormorant Garamond',serif;
420    font-size:clamp(1.6rem, 3vw, 2.2rem);
421    font-weight:600; color:#0B2240; margin-bottom:2.5rem;
422    font-style:italic;
423}
424.featured-grid {
425    display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
426    gap:2rem; margin-bottom:3rem;
427}
428
429.featured-card {
430    background:#fff;
431    border:1.5px solid #e0ddd5;
432    border-radius:10px;
433    overflow:hidden;
434    text-decoration:none; color:inherit;
435    display:flex; flex-direction:column;
436    transition:box-shadow 0.22s, transform 0.18s;
437}
438.featured-card:hover {
439    box-shadow:0 8px 32px rgba(0,0,0,0.09);
440    transform:translateY(-3px);
441}
442
443.featured-header {
444    height:4px;
445    background:var(--grad1);
446}
447
448.featured-body {
449    padding:1.2rem; flex:1; display:flex; flex-direction:column; gap:5px;
450}
451
452.featured-year {
453    font-size:0.65rem; font-weight:600; letter-spacing:0.12em;
454    text-transform:uppercase; color:#bbb;
455}
456
457.featured-name {
458    font-family:'Cormorant Garamond',serif;
459    font-size:1.35rem; font-weight:600; color:#111; line-height:1.1;
460}
461
462.featured-name em {
463    font-style:italic; color:var(--grad1);
464}
465
466.featured-desc {
467    font-size:0.78rem; color:#888; line-height:1.6; flex:1;
468}
469
470.featured-meta {
471    font-size:0.8rem; color:#999;
472    display:flex; gap:1rem; flex-wrap:wrap;
473}
474
475.featured-cta {
476    font-size:0.74rem; font-weight:600;
477    color:var(--grad1); margin-top:0.5rem;
478    text-decoration:none;
479    transition:color 0.18s;
480}
481.featured-card:hover .featured-cta { 
482    color:var(--accent-dark); 
483    opacity:0.8;
484}
485
486/* Archive Projects */
487.projects-archive-title {
488    font-size:0.75rem; font-weight:600; letter-spacing:0.18em;
489    text-transform:uppercase; color:#999; margin-bottom:1.5rem;
490    padding-bottom:1rem; border-bottom:1px solid #e0ddd5;
491}
492.archive-grid {
493    display:grid;
494    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
495    gap:1.2rem;
496}
497
498.archive-card {
499    background:#fff;
500    border:1.5px solid #e0ddd5;
501    border-radius:10px;
502    overflow:hidden;
503    text-decoration:none; color:inherit;
504    display:flex; flex-direction:column;
505    transition:box-shadow 0.22s, transform 0.18s;
506}
507.archive-card:hover {
508    box-shadow:0 8px 32px rgba(0,0,0,0.09);
509    transform:translateY(-3px);
510}
511
512.archive-card-top { height:4px; background:var(--accent); }
513.archive-card-body {
514    padding:1.2rem; flex:1; display:flex;
515    flex-direction:column; gap:5px;
516}
517.archive-year {
518    font-size:0.65rem; font-weight:600; letter-spacing:0.12em;
519    text-transform:uppercase; color:#bbb;
520}
521.archive-name {
522    font-family:'Cormorant Garamond',serif;
523    font-size:1.35rem; font-weight:600; color:#111; line-height:1.1;
524}
525.archive-name em { font-style:italic; color:var(--accent); }
526.archive-desc {
527    font-size:0.78rem; color:#888; line-height:1.6; flex:1;
528}
529.archive-link {
530    font-size:0.74rem; font-weight:600;
531    color:var(--accent); margin-top:0.5rem;
532    transition:color 0.18s;
533}
534.archive-card:hover .archive-link { color:var(--accent-dark); opacity:0.8; }
535
536/* ══════════ AMEDEO CALLOUT ══════════ */
537.amedeo {
538    background:#0B2240;
539    padding:4rem;
540}
541.amedeo-inner {
542    max-width:1100px; margin:0 auto;
543    display:flex; align-items:center; gap:4rem;
544}
545.amedeo-text { flex:1; }
546.amedeo-eyebrow {
547    font-size:0.7rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase;
548    color:#FF6B2B; margin-bottom:1rem;
549}
550.amedeo-headline {
551    font-family:'Cormorant Garamond',serif;
552    font-size:clamp(2rem,3.5vw,3rem);
553    font-weight:600; color:#fff; line-height:1; margin-bottom:0.8rem;
554}
555.amedeo-headline em { font-style:italic; color:#FF6B2B; }
556.amedeo-sub { font-size:0.88rem; color:rgba(255,255,255,0.5); line-height:1.7; max-width:480px; margin-bottom:1.5rem; }
557.amedeo-cta {
558    display:inline-flex; align-items:center; gap:8px;
559    background:#FF6B2B; color:#fff;
560    text-decoration:none; padding:12px 24px; border-radius:5px;
561    font-size:0.88rem; font-weight:600;
562    transition:background 0.18s;
563}
564.amedeo-cta:hover { background:#e55a1f; }
565.amedeo-stats {
566    display:flex; flex-direction:column; gap:1.5rem;
567    border-left:1px solid rgba(255,255,255,0.1);
568    padding-left:4rem; flex-shrink:0;
569}
570.amedeo-stat-num {
571    font-family:'Cormorant Garamond',serif;
572    font-size:2.8rem; font-weight:700; color:#FF6B2B; line-height:1;
573}
574.amedeo-stat-label { font-size:0.75rem; color:rgba(255,255,255,0.35); margin-top:2px; }
575
576/* ══════════ ACKNOWLEDGEMENTS ══════════ */
577.ack-section { background:#060f1a; color:rgba(255,255,255,0.5); }
578.ack-inner { max-width:1100px; margin:0 auto; padding:4rem 4rem; }
579.ack-inner h2 { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:#fff; margin-bottom:1.5rem; }
580.ack-inner h2 em { font-style:italic; color:#E8C448; }
581.ack-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.4rem 2rem; margin-bottom:2rem; }
582.ack-item { font-size:0.8rem; line-height:1.9; }
583.ack-item a { color:rgba(255,255,255,0.55); text-decoration:none; }
584.ack-item a:hover { color:#E8C448; }
585.ack-special { list-style:none; font-size:0.8rem; line-height:1.9; margin-bottom:1.5rem; }
586.ack-special a { color:rgba(255,255,255,0.55); text-decoration:none; }
587.ack-special a:hover { color:#E8C448; }
588
589/* ══════════ FOOTER ══════════ */
590footer {
591    background:#060f1a; color:rgba(255,255,255,0.28);
592    text-align:center; padding:1.5rem;
593    font-size:0.77rem; line-height:2.2;
594    border-top:1px solid rgba(255,255,255,0.05);
595}
596footer a { color:rgba(255,255,255,0.38); text-decoration:none; }
597footer a:hover { color:#E8C448; }
598.sep { margin:0 0.5rem; }
599
600/* ══════════ LESSONS ══════════ */
601.lessons-section {
602    background:#fff;
603    padding:5rem 4rem;
604    border-top:1px solid #e8e5dd;
605}
606.lessons-inner { max-width:1100px; margin:0 auto; }
607.lessons-headline {
608    font-family:'Cormorant Garamond',serif;
609    font-size:clamp(2rem,4vw,3.2rem);
610    font-weight:600; color:#0B2240; margin-bottom:0.6rem;
611}
612.lessons-sub {
613    font-size:0.9rem; color:#888; line-height:1.7; max-width:520px; margin-bottom:3rem;
614}
615.lessons-grid {
616    display:grid;
617    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
618    gap:1.5rem;
619}
620.lesson-card {
621    background:#fff;
622    border:1.5px solid #e0ddd5;
623    border-radius:10px;
624    padding:1.8rem;
625    text-decoration:none;
626    color:inherit;
627    display:flex;
628    flex-direction:column;
629    gap:0.8rem;
630    transition:box-shadow 0.22s, transform 0.18s;
631}
632.lesson-card:hover {
633    box-shadow:0 8px 32px rgba(0,0,0,0.09);
634    transform:translateY(-2px);
635}
636.lesson-num {
637    font-size:0.65rem; font-weight:600; letter-spacing:0.12em;
638    text-transform:uppercase; color:#bbb;
639}
640.lesson-title {
641    font-family:'Cormorant Garamond',serif;
642    font-size:1.4rem; font-weight:600; color:#0B2240; line-height:1.15;
643}
644.lesson-title em {
645    font-style:italic; color:#E8C448;
646}
647.lesson-subtitle {
648    font-size:0.85rem; color:#999; font-weight:500;
649}
650.lesson-desc {
651    font-size:0.8rem; color:#777; line-height:1.6; flex:1;
652}
653.lesson-listen {
654    font-size:0.75rem; font-weight:600;
655    color:#0B2240;
656    text-transform:uppercase;
657    letter-spacing:0.1em;
658    margin-top:0.5rem;
659    transition:color 0.18s;
660}
661.lesson-card:hover .lesson-listen {
662    color:#E8C448;
663}
664
665/* ══════════ RESPONSIVE ══════════ */
666@media (max-width:900px) {
667    .hero { padding:5rem 1.5rem 3rem; }
668    .how { padding:3.5rem 1.5rem; }
669    .steps { grid-template-columns:1fr; border-radius:10px; }
670    .step { border-right:none; border-bottom:1.5px solid #e0ddd5; }
671    .step:last-child { border-bottom:none; }
672    .numbers-inner { grid-template-columns:1fr 1fr; }
673    .sardinia { grid-template-columns:1fr; padding:3.5rem 1.5rem; gap:2rem; }
674    .sardinia-svg { display:none; }
675    .projects-section { padding:3.5rem 1.5rem; }
676    .featured-grid { grid-template-columns:1fr; }
677    .amedeo { padding:3rem 1.5rem; }
678    .amedeo-inner { flex-direction:column; gap:2rem; }
679    .amedeo-stats { flex-direction:row; border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,0.1); padding-top:1.5rem; }
680    .ack-inner { padding:3rem 1.5rem; }
681    .picker { width:100%; }
682    .picker-group { min-width:0; flex:1; }
683}
684@media (max-width:600px) {
685    .numbers-inner { grid-template-columns:1fr 1fr; }
686    .picker { flex-direction:column; }
687    .picker-group { border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); }
688    .picker-go { padding:1rem; }
689    .featured-header { height:120px; }
690    .featured-name { font-size:1.5rem; }
691}
692
693/* ── Modal Picker ── */
694.picker-button {
695    background: transparent; border: none; color: #fff;
696    padding: 0; font-size: 1rem; font-weight: 600;
697    cursor: pointer; display: flex; align-items: center;
698    gap: 0.5rem; font-family: 'Outfit', sans-serif; width: 100%;
699}
700.picker-button:hover { color: rgba(255,255,255,0.85); }
701.picker-button svg { margin-left: auto; flex-shrink: 0; }
702
703.modal-overlay {
704    display: none; position: fixed; inset: 0;
705    background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); z-index: 2000;
706}
707.modal-overlay.open { display: block; }
708
709.language-modal {
710    display: none; position: fixed;
711    top: 50%; left: 50%; transform: translate(-50%, -50%);
712    background: #fff; border-radius: 12px;
713    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
714    z-index: 2001; width: 90vw; max-width: 640px; max-height: 85vh;
715}
716.language-modal.open {
717    display: block;
718    animation: modalIn 0.25s cubic-bezier(0.4,0,0.2,1);
719}
720@keyframes modalIn {
721    from { opacity: 0; transform: translate(-50%, -44%); }
722    to   { opacity: 1; transform: translate(-50%, -50%); }
723}
724.modal-header {
725    display: flex; justify-content: space-between; align-items: center;
726    padding: 1.25rem 1.5rem; border-bottom: 1px solid #eee;
727}
728.modal-header h3 {
729    font-family: 'Cormorant Garamond', serif;
730    font-size: 1.15rem; font-weight: 600; color: #0B2240; margin: 0;
731}
732.modal-close {
733    background: none; border: none; font-size: 1.8rem; line-height: 1;
734    color: #aaa; cursor: pointer; padding: 0; transition: color 0.2s;
735}
736.modal-close:hover { color: #0B2240; }
737.modal-body { overflow-y: auto; max-height: calc(85vh - 70px); padding: 1.25rem; }
738.modal-grid {
739    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem;
740}
741.modal-option {
742    background: #f7f7f7; border: 1.5px solid #e5e5e5; border-radius: 8px;
743    padding: 0.75rem 0.5rem; font-size: 0.88rem; font-weight: 500; color: #0B2240;
744    cursor: pointer; font-family: 'Outfit', sans-serif; text-align: center;
745    transition: all 0.18s;
746}
747.modal-option:hover {
748    background: #fff; border-color: #0B2240;
749    box-shadow: 0 3px 10px rgba(11,34,64,0.1); transform: translateY(-1px);
750}
751.modal-option.selected { background: #E8C448; border-color: #E8C448; }
752
753/* ── Ecosystem line (hero) ── */
754.hero-ecosystem { font-size:0.78rem; color:rgba(255,255,255,0.38); margin:0.4rem 0 1.8rem; letter-spacing:0.02em; }
755.hero-ecosystem a { color:rgba(255,255,255,0.5); text-decoration:none; transition:color 0.15s; }
756.hero-ecosystem a:hover { color:#E8C448; }
757
758/* ── Nav projects link ── */
759.nav-projects { color:rgba(255,255,255,0.55); text-decoration:none; font-size:0.82rem; font-weight:500; margin-right:1.2rem; transition:color 0.15s; letter-spacing:0.02em; }
760.nav-projects:hover { color:#E8C448; }
761</style>
762</head>
763<body>
764
765<!-- Matomo -->
766<script>
767  var _paq = window._paq = window._paq || [];
768  _paq.push(['disableCookies']); _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']);
769  (function() {
770    var u="https://aiopop.com/matnogo/";
771    _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '3']);
772    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
773    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
774  })();
775</script>
775
776
777<!-- ══ NAV ══ -->
778<nav class="nav">
779  <a class="nav-logo" href="/"><span>aio</span>Pop</a>
780  <div class="nav-spacer"></div>
781  <a class="nav-projects" href="#projects">Projects</a>
782  <div class="aio-lang-wrap">
783    <button class="aio-lang-btn" id="aio-lang-btn" aria-haspopup="listbox">EN</button>
784    <div class="aio-lang-panel" id="aio-lang-panel" role="listbox">
785      <div class="aio-lang-list" id="aio-lang-list"></div>
786    </div>
787  </div>
788</nav>
789
790<!-- ══ HERO ══ -->
791<header class="hero">
792  <div class="hero-ghost">Powerplay</div>
793
794  <svg class="hero-sardinia" viewBox="395 0 575 1075" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
795    <g fill="none">
796      <path d="M 775 32 L 742 38 L 750 72 L 733 85 L 699 89 L 670 126 L 649 136 L 651 146 L 627 176 L 589 182 L 549 218 L 514 224 L 501 214 L 469 213 L 441 189 L 431 157 L 446 150 L 442 131 L 451 119 L 475 116 L 468 88 L 450 97 L 454 109 L 432 128 L 417 172 L 432 198 L 402 262 L 426 284 L 404 314 L 413 338 L 424 314 L 425 335 L 455 324 L 469 363 L 483 370 L 492 400 L 485 433 L 507 440 L 518 457 L 509 512 L 520 535 L 511 552 L 481 561 L 494 571 L 489 621 L 503 639 L 512 622 L 527 620 L 543 641 L 524 701 L 510 679 L 503 683 L 511 752 L 485 801 L 493 821 L 479 843 L 499 875 L 475 907 L 490 922 L 495 951 L 502 946 L 513 959 L 510 974 L 540 982 L 538 1003 L 556 1022 L 552 1047 L 563 1049 L 564 1062 L 571 1043 L 590 1031 L 615 1052 L 638 1055 L 689 1011 L 698 978 L 686 950 L 715 914 L 739 928 L 755 907 L 786 913 L 832 952 L 853 946 L 868 970 L 862 957 L 881 942 L 885 885 L 906 864 L 893 839 L 909 797 L 903 774 L 925 631 L 920 612 L 931 602 L 920 584 L 936 536 L 914 517 L 898 476 L 918 430 L 947 404 L 966 345 L 941 316 L 939 281 L 912 235 L 930 212 L 900 197 L 901 178 L 886 186 L 875 180 L 892 145 L 902 153 L 910 147 L 892 135 L 876 142 L 876 129 L 861 138 L 879 92 L 862 77 L 845 84 L 841 97 L 833 66 L 812 56 L 790 62 L 793 50 Z"/>
797      <path d="M 470 951 L 468 953 L 469 961 L 466 966 L 466 974 L 471 991 L 473 993 L 473 997 L 477 1001 L 477 1003 L 483 1014 L 484 1020 L 486 1022 L 491 1019 L 496 1021 L 498 1012 L 502 1008 L 502 1005 L 500 1002 L 501 993 L 504 984 L 508 980 L 509 976 L 505 972 L 505 970 L 502 967 L 501 962 L 499 960 L 493 957 L 485 955 L 476 957 L 475 952 Z"/>
798      <path d="M 828 33 L 827 34 L 828 39 L 826 41 L 821 40 L 820 42 L 821 45 L 819 49 L 820 52 L 819 55 L 823 58 L 832 57 L 836 60 L 839 57 L 840 58 L 839 62 L 840 64 L 845 65 L 844 69 L 845 70 L 850 69 L 851 68 L 850 65 L 851 57 L 853 55 L 853 51 L 850 46 L 850 42 L 848 40 L 846 41 L 846 44 L 842 50 L 843 53 L 841 55 L 839 53 L 840 41 L 838 39 L 838 35 L 836 33 L 833 34 Z"/>
799    </g>
800  </svg>
801
802<div class="hero-inner">
803    <p class="hero-eyebrow" id="aio-eyebrow">aiopop.com — A European language project since 2022</p>
804
805    <h1 class="hero-headline">
806      <span id="aio-line1">Sounds too good</span><br><span id="aio-line2">to be true.</span><br><em id="aio-line3">It isn't.</em>
807    </h1>
808
809    <p class="hero-languages" id="aio-languages">
810      English · Spanish · French · Italian · Portuguese · Chinese
811    </p>
812
813<p style="margin: 1.5rem 0; font-size: 1rem; color: rgba(255,255,255,0.8); font-style: italic;">
814  Free forever. No registration. No cookies.
815</p>
816
817    
818<p class="hero-ecosystem">Also on aioPop: <a href="https://sardinian.aiopop.com" target="_blank">GigaSardinian</a> &nbsp;·&nbsp; <a href="https://amedeochinese.com" target="_blank">Amedeo Chinese</a> &nbsp;·&nbsp; <a href="https://4elisa.aiopop.com" target="_blank">Italian with Elisa</a> &nbsp;·&nbsp; <a href="https://gigafrench.aiopop.com" target="_blank">GigaFrench</a></p>
819
820    <div class="picker" id="picker">
821      <div class="picker-group">
822        <span class="picker-group-label" id="aio-picker-learn-label">I want to learn</span>
823        <button class="picker-button" id="learnButton" onclick="openModal('learnModal')">
824          <span id="learnButtonText">English</span>
825          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
826        </button>
827      </div>
828      <div class="picker-group">
829        <span class="picker-group-label" id="aio-picker-read-label">I read along in</span>
830        <button class="picker-button" id="readButton" onclick="openModal('readModal')">
831          <span id="readButtonText">Spanish</span>
832          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
833        </button>
834      </div>
835      <a class="picker-go" id="pickerGo" href="#" target="_blank" onclick="sessionStorage.setItem('aiopop-from-homepage','1')">
836        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
837        <span id="aio-picker-start-btn">Start now</span>
838      </a>
839    </div>
840
841    <!-- Modal Overlay -->
842    <div class="modal-overlay" id="modalOverlay" onclick="closeAllModals()"></div>
843
844    <!-- Learn Modal -->
845    <div class="language-modal" id="learnModal">
846      <div class="modal-header">
847        <h3>Choose a language to learn</h3>
848        <button class="modal-close" onclick="closeAllModals()">&times;</button>
849      </div>
850      <div class="modal-body">
851        <div class="modal-grid">
852          <button class="modal-option" onclick="selectLearn('cn','Chinese')">🇨🇳 Chinese</button>
853          <button class="modal-option" onclick="selectLearn('en','English')">🇬🇧 English</button>
854          <button class="modal-option" onclick="selectLearn('fr','French')">🇫🇷 French</button>
855          <button class="modal-option" onclick="selectLearn('it','Italian')">🇮🇹 Italian</button>
856          <button class="modal-option" onclick="selectLearn('pt','Portuguese')">🇵🇹 Portuguese</button>
857          <button class="modal-option" onclick="selectLearn('es','Spanish')">🇪🇸 Spanish</button>
858        </div>
859      </div>
860    </div>
861
862    <!-- Read Modal -->
863    <div class="language-modal" id="readModal">
864      <div class="modal-header">
865        <h3>Choose a language to read along in</h3>
866        <button class="modal-close" onclick="closeAllModals()">&times;</button>
867      </div>
868      <div class="modal-body">
869        <div class="modal-grid">
870          <button class="modal-option" onclick="selectRead('ar','Arabic')">🇸🇦 Arabic</button>
871          <button class="modal-option" onclick="selectRead('bn','Bengali')">🇧🇩 Bengali</button>
872          <button class="modal-option" onclick="selectRead('zh','Chinese')">🇨🇳 Chinese</button>
873          <button class="modal-option" onclick="selectRead('hr','Croatian')">🇭🇷 Croatian</button>
874          <button class="modal-option" onclick="selectRead('cs','Czech')">🇨🇿 Czech</button>
875          <button class="modal-option" onclick="selectRead('da','Danish')">🇩🇰 Danish</button>
876          <button class="modal-option" onclick="selectRead('nl','Dutch')">🇳🇱 Dutch</button>
877          <button class="modal-option" onclick="selectRead('en','English')">🇬🇧 English</button>
878          <button class="modal-option" onclick="selectRead('fi','Finnish')">🇫🇮 Finnish</button>
879          <button class="modal-option" onclick="selectRead('fr','French')">🇫🇷 French</button>
880          <button class="modal-option" onclick="selectRead('de','German')">🇩🇪 German</button>
881          <button class="modal-option" onclick="selectRead('el','Greek')">🇬🇷 Greek</button>
882          <button class="modal-option" onclick="selectRead('he','Hebrew')">🇮🇱 Hebrew</button>
883          <button class="modal-option" onclick="selectRead('hi','Hindi')">🇮🇳 Hindi</button>
884          <button class="modal-option" onclick="selectRead('hu','Hungarian')">🇭🇺 Hungarian</button>
885          <button class="modal-option" onclick="selectRead('id','Indonesian')">🇮🇩 Indonesian</button>
886          <button class="modal-option" onclick="selectRead('it','Italian')">🇮🇹 Italian</button>
887          <button class="modal-option" onclick="selectRead('ja','Japanese')">🇯🇵 Japanese</button>
888          <button class="modal-option" onclick="selectRead('ko','Korean')">🇰🇷 Korean</button>
889          <button class="modal-option" onclick="selectRead('nb','Norweg
889ian')">🇳🇴 Norwegian</button>
890          <button class="modal-option" onclick="selectRead('fa','Persian')">🇮🇷 Persian</button>
891          <button class="modal-option" onclick="selectRead('pl','Polish')">🇵🇱 Polish</button>
892          <button class="modal-option" onclick="selectRead('pt','Portuguese')">🇵🇹 Portuguese</button>
893          <button class="modal-option" onclick="selectRead('ro','Romanian')">🇷🇴 Romanian</button>
894          <button class="modal-option" onclick="selectRead('ru','Russian')">🇷🇺 Russian</button>
895          <button class="modal-option" onclick="selectRead('sr','Serbian')">🇷🇸 Serbian</button>
896          <button class="modal-option" onclick="selectRead('sk','Slovak')">🇸🇰 Slovak</button>
897          <button class="modal-option" onclick="selectRead('es','Spanish')">🇪🇸 Spanish</button>
898          <button class="modal-option" onclick="selectRead('sv','Swedish')">🇸🇪 Swedish</button>
899          <button class="modal-option" onclick="selectRead('th','Thai')">🇹🇭 Thai</button>
900          <button class="modal-option" onclick="selectRead('tr','Turkish')">🇹🇷 Turkish</button>
901          <button class="modal-option" onclick="selectRead('uk','Ukrainian')">🇺🇦 Ukrainian</button>
902          <button class="modal-option" onclick="selectRead('vi','Vietnamese')">🇻🇳 Vietnamese</button>
903        </div>
904      </div>
905    </div>
906    <p class="hero-since">By Patricia Bourcillier and Bernd Sebastian Kamps · 200+ contributors worldwide</p>
907  </div>
908</header>
909
910<!-- ══ HOW IT WORKS ══ -->
911<section class="how" id="how">
912  <div class="how-inner">
913    <p class="section-eyebrow" id="aio-how-eyebrow">The Powerplay method</p>
914    <h2 class="how-headline" id="aio-how-headline">Three steps. No grammar drills. No tests.</h2>
915    <p class="how-sub" id="aio-how-sub">The whole method fits in a sentence: listen, repeat aloud, listen again. Your brain does the rest — automatically, at your own pace.</p>
916
917    <div class="steps">
918      <div class="step">
919        <div class="step-num">1</div>
920        <div class="step-title" id="aio-how-step1-title">Audio plays</div>
921        <div class="step-desc" id="aio-how-step1-desc">A sentence plays in the language you want to learn. You read along in your own language. <em>No rushing.</em></div>
922      </div>
923      <div class="step">
924        <div class="step-num">2</div>
925        <div class="step-title" id="aio-how-step2-title">Silence. Your turn.</div>
926        <div class="step-desc" id="aio-how-step2-desc">The audio pauses. You repeat the sentence aloud. As many times as you want. <em>No one is listening. No one is judging.</em></div>
927      </div>
928      <div class="step">
929        <div class="step-num">3</div>
930        <div class="step-title" id="aio-how-step3-title">Audio plays again</div>
931        <div class="step-desc" id="aio-how-step3-desc">The sentence plays once more. You compare what you said to what you hear. <em>That gap is where language enters your brain.</em></div>
932      </div>
933    </div>
934
935    <p class="how-note" id="aio-how-quote">
936      "The Powerplay method is brutally simple: the audio plays, waits — you repeat the sentence aloud — then it plays again. Automatically. At your speed. As many times as it takes."
937    </p>
938  </div>
939</section>
940
941<!-- ══ NUMBERS ══ -->
942<div class="numbers">
943  <div class="numbers-inner">
944    <div class="number-item">
945      <div class="number-big">6</div>
946      <div class="number-label" id="aio-num1-label">Languages to learn</div>
947      <div class="number-since" id="aio-num1-sub">English · Spanish · French · Italian · Portuguese · Chinese</div>
948    </div>
949    <div class="number-item">
950      <div class="number-big">20</div>
951      <div class="number-label" id="aio-num2-label">Episodes per language</div>
952      <div class="number-since" id="aio-num2-sub">All set in Sardinia</div>
953    </div>
954    <div class="number-item">
955      <div class="number-big">30</div>
956      <div class="number-label" id="aio-num3-label">Translation languages</div>
957      <div class="number-since" id="aio-num3-sub">Read along in your own language</div>
958    </div>
959    <div class="number-item">
960      <div class="number-big">30+</div>
961      <div class="number-label" id="aio-num4-label">Free PDFs</div>
962      <div class="number-since" id="aio-num4-sub">No email · No registration</div>
963    </div>
964    <div class="number-item">
965      <div class="number-big">∞</div>
966      <div class="number-label" id="aio-num5-label">Always free</div>
967      <div class="number-since" id="aio-num5-sub">No account · No ads · Since 2022</div>
968    </div>
969  </div>
970</div>
971
972<!-- ══ LESSONS ══ -->
973<section class="lessons-section" id="lessons">
974  <div class="lessons-inner">
975    <h2 class="lessons-headline" id="aio-lessons-headline">Twenty episodes.</h2>
976    <p class="lessons-sub" id="aio-lessons-sub">One coherent story. Real characters. Real conversations. This is what you'll experience in aioPop.</p>
977    <div class="lessons-grid" id="lessonsGrid"></div>
978  </div>
979</section>
980
981<!-- ══ SARDINIA STORY ══ -->
982<section>
983  <div class="sardinia">
984    <div class="sardinia-text">
985      <p class="section-eyebrow" id="aio-sardinia-eyebrow">The setting</p>
986      <h2 class="sardinia-headline" id="aio-sardinia-headline">One island.<br><em>Six languages.</em></h2>
987      <p class="sardinia-body" id="aio-sardinia-body1">
988        aioPop takes place in Sardinia. Leonardo wakes up in Cagliari, where his grandfather points out a quarantined boat off the port carrying an Ebola patient. Then his phone rings — it's his girlfriend, and things between them are complicated.
989      </p>
990      <p class="sardinia-body" id="aio-sardinia-body2">
991        Twenty episodes, a coherent story, a defined cast of characters who reappear throughout. The same story — the same characters, the same world — told in six languages.
992      </p>
993    </div>
994    <svg class="sardinia-svg" viewBox="395 0 575 1075" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width:100%; max-width:320px; margin:0 auto; display:block;">
995      <g fill="none">
996        <path d="M 775 32 L 742 38 L 750 72 L 733 85 L 699 89 L 670 126 L 649 136 L 651 146 L 627 176 L 589 182 L 549 218 L 514 224 L 501 214 L 469 213 L 441 189 L 431 157 L 446 150 L 442 131 L 451 119 L 475 116 L 468 88 L 450 97 L 454 109 L 432 128 L 417 172 L 432 198 L 402 262 L 426 284 L 404 314 L 413 338 L 424 314 L 425 335 L 455 324 L 469 363 L 483 370 L 492 400 L 485 433 L 507 440 L 518 457 L 509 512 L 520 535 L 511 552 L 481 561 L 494 571 L 489 621 L 503 639 L 512 622 L 527 620 L 543 641 L 524 701 L 510 679 L 503 683 L 511 752 L 485 801 L 493 821 L 479 843 L 499 875 L 475 907 L 490 922 L 495 951 L 502 946 L 513 959 L 510 974 L 540 982 L 538 1003 L 556 1022 L 552 1047 L 563 1049 L 564 1062 L 571 1043 L 590 1031 L 615 1052 L 638 1055 L 689 1011 L 698 978 L 686 950 L 715 914 L 739 928 L 755 907 L 786 913 L 832 952 L 853 946 L 868 970 L 862 957 L 881 942 L 885 885 L 906 864 L 893 839 L 909 797 L 903 774 L 925 631 L 920 612 L 931 602 L 920 584 L 936 536 L 914 517 L 898 476 L 918 430 L 947 404 L 966 345 L 941 316 L 939 281 L 912 235 L 930 212 L 900 197 L 901 178 L 886 186 L 875 180 L 892 145 L 902 153 L 910 147 L 892 135 L 876 142 L 876 129 L 861 138 L 879 92 L 862 77 L 845 84 L 841 97 L 833 66 L 812 56 L 790 62 L 793 50 Z"/>
997      </g>
998    </svg>
999  </div>
1000</section>
1001
1002<!-- ══ SPECIAL PROJECTS ══ -->
1003<section class="projects-section" id="projects">
1004  <div class="projects-inner">
1005    <p class="section-eyebrow" id="aio-projects-eyebrow">Special projects</p>
1006    <h2 class="how-headline" id="aio-projects-headline">Our other courses</h2>
1007
1008    <!-- Featured Projects -->
1009    <div class="projects-featured">
1010      <h3 class="projects-featured-title" id="aio-projects-featured">Featured editions</h3>
1011      <div class="featured-grid" id="featuredGrid"></div>
1012    </div>
1013
1014    <!-- Living Voices -->
1015    <div class="projects-archive">
1016      <h4 class="projects-archive-title" id="aio-projects-voices">Living Voices</h4>
1017      <p style="font-size:0.95rem; color:#555; margin-bottom:1.5rem; max-width:700px; line-height:1.7;" id="aio-projects-voices-desc">
1018        Sardinian and Martinique Creole are magnificent languages—rich with history, culture, and beauty. 
1019        They deserve to be heard, learned, and celebrated. Here's where you can discover them.
1020      </p>
1021      <div class="archive-grid" id="voicesGrid"></div>
1022    </div>
1023
1024    <!-- Archive -->
1025    <div class="projects-archive" style="margin-top:4rem; padding-top:3rem; border-top:1px solid #e8e5dd;">
1026      <h4 class="projects-archive-title" id="aio-projects-archive">From the archive</h4>
1027      <p style="font-size:0.88rem; color:#999; margin-bottom:1.5rem; max-width:700px; line-height:1.6;" id="aio-projects-archive-desc">
1028        A legendary course that shaped language learning. Preserved and offered freely online.
1029      </p>
1030      <div class="archive-grid" id="archiveGrid" style="max-width:320px;"></div>
1031    </div>
1032  </div>
1033</section>
1034
1035<!-- ══ AMEDEO CHINESE ══ -->
1036<section class="amedeo" id="amedeo">
1037  <div class="amedeo-inner">
1038    <div class="amedeo-text">
1039      <p class="amedeo-eyebrow" id="aio-amedeo-eyebrow">Full learning platform · HSK 1</p>
1040      <h2 class="amedeo-headline" id="aio-amedeo-headline">Amedeo <em>Chinese</em></h2>
1041      <p class="amedeo-sub" id="aio-amedeo-sub">Powerplay plus: vocabulary games, grammar notes, exercises, spaced repetition, and a Megaloop drill — for anyone who wants a rigorous, complete introduction to Mandarin. Available in 21 languages.</p>
1042      <a class="amedeo-cta" href="https://amedeochinese.com" target="_blank" id="aio-amedeo-cta">
1043        <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
1044        Open Amedeo Chinese
1045      </a>
1046    </div>
1047    <div class="amedeo-stats">
1048      <div>
1049        <div class="amedeo-stat-num">21</div>
1050        <div class="amedeo-stat-label" id="aio-amedeo-stat1">interface languages</div>
1051      </div>
1052      <div>
1053        <div class="amedeo-stat-num">7</div>
1054        <div class="amedeo-stat-label" id="aio-amedeo-stat2">study modes</div>
1055      </div>
1056      <div>
1057        <div class="amedeo-stat-num">∞</div>
1058        <div class="amedeo-stat-label" id="aio-amedeo-stat3">always free</div>
1059      </div>
1060    </div>
1061  </div>
1062</section>
1063
1064<!-- ══ ACKNOWLEDGEMENTS ══ -->
1065<div class="ack-section">
1066  <div class="ack-inner">
1067    <h2 id="aio-ack-title">Acknowledgements — <em>200+ contributors</em></h2>
1068    <p style="font-size:0.82rem;margin-bottom:1.5rem;color:rgba(255,255,255,0.38)" id="aio-ack-sub">Among the more than 200 people who collaborated in this project, we are particularly indebted to:</p>
1069    <ul class="ack-special">
1070      <li class="ack-item">STK — App programming</li>
1071      <li class="ack-item"><a href="http://baghino.com/" target="_blank">Attilio Baghino</a> — Designer</li>
1072      <li class="ack-item"><a href="https://www.linkedin.com/in/rob-camp-1a444817/" target="_blank">Rob Camp</a> — Associate Editor</li>
1073      <li class="ack-item"><a href="https://www.jeandidieraissy.com/en/" target="_blank">Jean-Didier Aïssy</a> — Project Manager Multilangue</li>
1074      <li class="ack-item"><a href="https://www.logosound.it/en-gb/home" target="_blank">Logosound</a> — Sound Consulting</li>
1075    </ul>
1076    <div class="ack-grid">
1077      <div class="ack-item"><a href="https://www.bodalgo.com/it/speaker/andrea-melis" target="_blank">Andrea Melis</a> — Ukrainian–Italian Edition</div>
1078      <div class="ack-item">Betti Batalla — Spanish Edition</div>
1079      <div class="ack-item">Daniel Francis-Berenson — English Edition</div>
1080      <div class="ack-item">Dermot Arrigan — English Edition</div>
1081      <div class="ack-item">Elisa Cadinu — Italian Edition</div>
1082      <div class="ack-item">Faye Hadley Espero — English Edition</div>
1083      <div class="ack-item">Françoise Bourcillier — French Edition</div>
1084      <div class="ack-item">Gerolamo Cuomo — Italian Edition</div>
1085      <div class="ack-item">Giulia Deiana — Italian Edition</div>
1086      <div class="ack-item">Inês Morais — Portuguese Edition</div>
1087      <div class="ack-item">Jasper Kamradt — German Edition</div>
1088      <div class="ack-item">Julie Nash — English Edition</div>
1089      <div class="ack-item">Maxie Sinner — German Edition</div>
1090      <div class="ack-item">Siegfried März — Web Security</div>
1091      <div class="ack-item">王珊珊 / Shanshan Wang — Chinese Edition</div>
1092    </div>
1093  </div>
1094</div>
1095
1096<footer>
1097  <p>&copy; 2022–<span id="yr"></span> aioPop / aioLingua &nbsp;—&nbsp;
1098    <a href="http://aiopop.com">aiopop.com</a> &nbsp;·&nbsp;
1099    <a href="https://aiolingua.com">aiolingua.com</a></p>
1100  <p id="aio-footer-credits">By Patricia Bourcillier and Bernd Sebastian Kamps</p>
1101  <p>
1102    <a href="/learn-english-free/">Learn English free</a>	
1103	<span class="sep">·</span>
1104<a href="/zh/learn-english-free/" lang="zh-CN">中文:免费在线学英语</a>
1105    <span class="sep">·</span>
1106    <a href="/learn-spanish-free/">Learn Spanish free</a>
1107    <span class="sep">·</span>
1108    <a href="/learn-french-free/">Learn French free</a>
1109    <span class="sep">·</span>
1110    <a href="/learn-italian-free/">Learn Italian free</a>
1111    <span class="sep">·</span>
1112    <a href="/learn-portuguese-free/">Learn Portuguese free</a>
1113    <span class="sep">·</span>
1114    <a href="/learn-chinese-free/">Learn Chinese free</a>
1115  </p>
1116  <p>
1117    <a href="https://amedeo.com/privacy.html" id="aio-footer-privacy">Privacy</a>
1118    <span class="sep">|</span>
1119    <a href="https://amedeo.com/impressum.html" id="aio-footer-imprint">Imprint</a>
1120  </p>
1121</footer>
1122
1123<!-- ═══════════════════════════════════════════════════════════════ -->
1124<!-- ═══════ INVISIBLE SEO: Schema Markup Only ═══════ -->
1125<!-- ═══════════════════════════════════════════════════════════════ -->
1126
1127<!-- Organization Schema (for Knowledge Graph) -->
1128<script type="application/ld+json">
1129{
1130  "@context": "https://schema.org",
1131  "@type": "Organization",
1132  "name": "aioPop",
1133  "url": "https://aiopop.com",
1134  "logo": "https://aiopop.com/img/aiopop-logo.png",
1135  "description": "Free language learning platform. Learn 6 languages through one coherent story set in Sardinia. No app, no account, no payment.",
1136  "sameAs": [
1137    "https://www.facebook.com/aiopop",
1138    "https://twitter.com/aiopop",
1139    "https://www.linkedin.com/company/aiopop"
1140  ],
1141  "founder": [
1142    { "@type": "Person", "name": "Patricia Bourcillier" },
1143    { "@type": "Person", "name": "Bernd Sebastian Kamps" }
1144  ],
1145  "contactPoint": {
1146    "@type": "ContactPoint",
1147    "contactType": "Customer Support",
1148    "url": "https://aiopop.com"
1149  }
1150}
1151</script>
1151
1152
1153<!-- FAQ Schema (Rich Snippets in Search Results) -->
1154<script type="application/ld+json">
1155{
1156  "@context": "https://schema.org",
1157  "@type": "FAQPage",
1158  "mainEntity": [
1159    {
1160      "@type": "Question",
1161      "name": "Is aioPop really completely free?",
1162      "acceptedAnswer": {
1163        "@type": "Answer",
1164        "text": "Yes, aioPop is 100% free forever. No app required, no account needed, no payment ever. All lessons, PDFs, and translations are completely free."
1165      }
1166    },
1167    {
1168      "@type": "Question",
1169      "name": "What languages can I learn on aioPop?",
1170      "acceptedAnswer": {
1171        "@type": "Answer",
1172        "text": "You can learn English, Spanish, French, Italian, Portuguese, or Chinese. Each language has 20 episodes of the same story set in Sardinia."
1173      }
1174    },
1175    {
1176      "@type": "Question",
1177      "name": "How many languages can I read along in?",
1178      "acceptedAnswer": {
1179        "@type": "Answer",
1180        "text": "You can read along in 30+ languages including English, Spanish, French, Italian, Portuguese, German, Russian, Japanese, Arabic, Chinese, and many more."
1181      }
1182    },
1183    {
1184      "@type": "Question",
1185      "name": "Do I need an app to use aioPop?",
1186      "acceptedAnswer": {
1187        "@type": "Answer",
1188        "text": "No, aioPop works in your web browser on any phone, tablet, or computer. No app download needed."
1189      }
1190    },
1191    {
1192      "@type": "Question",
1193      "name": "What is the Powerplay method?",
1194      "acceptedAnswer": {
1195        "@type": "Answer",
1196        "text": "Powerplay is simple: Audio plays → you repeat aloud → audio plays again. That's it. No grammar drills, no tests, just natural language learning."
1197      }
1198    }
1199  ]
1200}
1201</script>
1201
1202
1203<script>
1204// Year
1205document.getElementById('yr').textContent = new Date().getFullYear();
1206
1207// Modal language picker
1208var _learn = 'en', _read = 'es';
1209
1210// ── Code mapping: homepage modal ↔ player URL params ──────────────────────
1211// Some codes differ (zh↔CN, nb↔NO). Codes not in the homepage read modal
1212// (BG, ET, LV, LT, SL, BR, PY) fall back to the current _read value.
1213function toPlayerLang(code) {
1214    var map = { zh: 'CN', nb: 'NO' };
1215    return (map[code] || code).toUpperCase();
1216}
1217var PLAYER_TO_READ = {
1218    CN: 'zh', NO: 'nb',
1219    PY: null, BG: null, ET: null, LV: null, LT: null, SL: null, BR: null
1220};
1221var READ_LABELS = {
1222    ar:'Arabic', bn:'Bengali', zh:'Chinese', cs:'Czech', da:'Danish',
1223    nl:'Dutch', en:'English', fi:'Finnish', fr:'French', de:'German',
1224    el:'Greek', he:'Hebrew', hi:'Hindi', hr:'Croatian', hu:'Hungarian',
1225    id:'Indonesian', it:'Italian', ja:'Japanese', ko:'Korean', nb:'Norwegian',
1226    fa:'Persian', pl:'Polish', pt:'Portuguese', ro:'Romanian', ru:'Russian',
1227    sr:'Serbian', sk:'Slovak', es:'Spanish', sv:'Swedish', th:'Thai',
1228    tr:'Turkish', uk:'Ukrainian', vi:'Vietnamese'
1229};
1230var LEARN_LABELS = {
1231    cn:'Chinese', en:'English', fr:'French',
1232    it:'Italian', pt:'Portuguese', es:'Spanish'
1233};
1234
1235// ── Core picker URL ────────────────────────────────────────────────────────
1236function updatePickerUrl() {
1237    document.getElementById('pickerGo').href =
1238        'https://aiopop.com/player/?source=' + _learn.toUpperCase() +
1239        '&lang=' + toPlayerLang(_read) + '&lesson=1';
1240}
1241
1242// ── Lesson card links — kept in sync with picker at all times ─────────────
1243function updateLessonCardLinks() {
1244    var links = document.querySelectorAll('a.lesson-listen');
1245    for (var i = 0; i < links.length; i++) {
1246        var m = (links[i].getAttribute('href') || '').match(/lesson=(\d+)/);
1247        var n = m ? m[1] : String(i + 1);
1248        links[i].href =
1249            'https://aiopop.com/player/?source=' + _learn.toUpperCase() +
1250            '&lang=' + toPlayerLang(_read) + '&lesson=' + n;
1251        // Tell the player this was a deliberate click, suppress tap-to-start overlay
1252        links[i].setAttribute('onclick', 'sessionStorage.setItem("aiopop-from-homepage","1")');
1253    }
1254}
1255
1256// ── Modal controls ────────────────────────────────────────────────────────
1257function openModal(id) {
1258    document.getElementById('modalOverlay').classList.add('open');
1259    document.getElementById(id).classList.add('open');
1260}
1261
1262function closeAllModals() {
1263    document.getElementById('modalOverlay').classList.remove('open');
1264    document.getElementById('learnModal').classList.remove('open');
1265    document.getElementById('readModal').classList.remove('open');
1266}
1267
1268function selectLearn(code, label) {
1269    _learn = code;
1270    document.getElementById('learnButtonText').textContent = label;
1271    closeAllModals();
1272    updatePickerUrl();
1273    updateLessonCardLinks();
1274}
1275
1276function selectRead(code, label) {
1277    _read = code;
1278    document.getElementById('readButtonText').textContent = label;
1279    closeAllModals();
1280    updatePickerUrl();
1281    updateLessonCardLinks();
1282}
1283
1284// ── Restore player's last-used languages from localStorage ────────────────
1285(function() {
1286    var savedSource = localStorage.getItem('ap-source-lang');
1287    var savedLang   = localStorage.getItem('ap-translation-lang');
1288
1289    if (savedSource) {
1290        var lc = savedSource.toLowerCase();
1291        if (LEARN_LABELS[lc]) {
1292            _learn = lc;
1293            document.getElementById('learnButtonText').textContent = LEARN_LABELS[lc];
1294        }
1295    }
1296
1297    if (savedLang) {
1298        var upper = savedLang.toUpperCase();
1299        var readCode;
1300        if (Object.prototype.hasOwnProperty.call(PLAYER_TO_READ, upper)) {
1301            readCode = PLAYER_TO_READ[upper]; // null = unsupported in homepage, keep default
1302        } else {
1303            readCode = savedLang.toLowerCase();
1304        }
1305        if (readCode && READ_LABELS[readCode]) {
1306            _read = readCode;
1307            document.getElementById('readButtonText').textContent = READ_LABELS[readCode];
1308        }
1309    }
1310
1311    updatePickerUrl();
1312})();
1313
1314// All course and lesson data is now in aiopop-i18n.js and rendered by applang.js
1315
1316</script>
vendor: 1 bytes, line 1316
1316
1317<script src="aiopop-i18n.js"></script>
vendor: 1 bytes, line 1317
1317
1318<script src="aiopop-applang.js"></script>
vendor: 1 bytes, line 1318
1318
1319<script>
1320document.addEventListener('DOMContentLoaded', function() {
1321  // Runs AFTER applang's DOMContentLoaded (registered first), so grid is fully populated
1322  var grid = document.getElementById('lessonsGrid');
1323  if (!grid) return;
1324
1325  // Inject GigaSardinian discovery card after lesson 4
1326  var card = document.createElement('div');
1327  card.style.cssText = [
1328    'background:linear-gradient(135deg,#0B2240 0%,#163660 100%)',
1329    'border:1.5px solid rgba(232,196,72,0.25)',
1330    'border-radius:10px',
1331    'padding:1.8rem',
1332    'display:flex',
1333    'flex-direction:column',
1334    'gap:0.8rem'
1335  ].join(';');
1336  card.innerHTML =
1337    '<div style="font-size:0.65rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(232,196,72,0.65);">Also on aioPop</div>' +
1338    '<div style="font-family:\'Cormorant Garamond\',serif;font-size:1.4rem;font-weight:600;color:#fff;line-height:1.15;">GigaSardinian</div>' +
1339    '<div style="font-size:0.8rem;color:rgba(255,255,255,0.55);line-height:1.6;flex:1;">14 lessons in authentic Sardinian — one of Europe\'s most beautiful minority languages. Read along in 40 languages. Free, as always.</div>' +
1340    '<a href="https://sardinian.aiopop.com" target="_blank" style="font-size:0.75rem;font-weight:600;color:#E8C448;text-transform:uppercase;letter-spacing:0.1em;text-decoration:none;margin-top:0.5rem;">Discover GigaSardinian →</a>';
1341  var children = grid.children;
1342  if (children.length >= 4) {
1343    grid.insertBefore(card, children[4]);
1344  } else {
1345    grid.appendChild(card);
1346  }
1347
1348  // Now all 20 lesson cards exist — rewrite their links with correct language/translation
1349  if (typeof updateLessonCardLinks === 'function') updateLessonCardLinks();
1350
1351  // Watch for future rebuilds (e.g. system language change calls renderLessons())
1352  // and immediately reapply correct source/lang to all card links
1353  var observer = new MutationObserver(function() {
1354    if (typeof updateLessonCardLinks === 'function') updateLessonCardLinks();
1355  });
1356  observer.observe(grid, { childList: true });
1357});
1358</script>
1358
1359</body>
1360</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.