feat(website): add lookdown koala to hero, questions koala to features, pro-contra koala to comparison, translate learning tile to Gemeinsam Lernen, and refine copy

website/index.html

@@ -81,6 +81,10 @@
                     <span lang="en">Your remote movie night without lags. No registration, no data collection. Just share a link and watch together.</span>
                     <span lang="de">Dein Kino-Abend auf Distanz. Keine Lags, keine Anmeldung. Einfach Link teilen und zusammen schauen.</span>
                 </h2>
+                <div class="hero-mascot-container" data-reveal>
+                    <img src="assets/LookDownKoala.webp" alt="A cute koala standing and looking down at the download buttons" class="hero-lookdown-mascot" lang="en" width="90" height="132" loading="lazy">
+                    <img src="assets/LookDownKoala.webp" alt="Ein niedlicher Koala steht da und schaut nach unten auf die Download-Buttons" class="hero-lookdown-mascot" lang="de" width="90" height="132" loading="lazy">
+                </div>
                 <div class="cta-group" data-reveal>
                     <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
                         <img src="assets/chrome.svg" alt="Chrome" width="20" height="20">
@@ -448,7 +452,7 @@
                     <img src="assets/RemoteProf.webp" alt="Ein Koala-Professor hält einen Vortrag auf einem Bildschirm vor zwei remote zugeschalteten Schüler-Koalas" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
                     <h3>
                         <span lang="en">Remote Learning</span>
-                        <span lang="de">Remote Learning</span>
+                        <span lang="de">Gemeinsam Lernen</span>
                     </h3>
                     <p lang="en">Analyze online tutorials, lectures, or developer training streams together with classmates or colleagues. Pause and discuss complex steps in perfect harmony.</p>
                     <p lang="de">Analysiert Online-Tutorials, Vorlesungen oder Streams gemeinsam mit Mitschülern oder Kollegen. Pausiert und besprecht komplizierte Schritte in perfektem Sync.</p>
@@ -469,6 +473,8 @@
 
     <section id="features">
         <div class="container">
+            <img src="assets/KoalaQuestions.webp" alt="A cute koala with a question mark above its head wondering why to choose KoalaSync" class="features-questions-mascot" lang="en" width="250" height="211" loading="lazy" data-reveal>
+            <img src="assets/KoalaQuestions.webp" alt="Ein niedlicher Koala mit einem Fragezeichen über dem Kopf, der sich fragt, warum er KoalaSync wählen soll" class="features-questions-mascot" lang="de" width="250" height="211" loading="lazy" data-reveal>
             <h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
                 <span lang="en">Why KoalaSync?</span><span lang="de">Warum KoalaSync?</span>
             </h2>
@@ -482,7 +488,7 @@
                     <h3>
                         <span class="feature-icon">⚡</span>
                         <span lang="en">Full Control / Instant Sync</span>
-                        <span lang="de">Volle Kontrolle & Echtzeit</span>
+                        <span lang="de">Volle Kontrolle, in Echtzeit</span>
                     </h3>
                     <p lang="en">One pauses, everyone pauses. One seeks, everyone follows. Our two-phase sync protocol coordinates playback in real time across all participants.</p>
                     <p lang="de">Einer pausiert, alle pausieren. Einer spult, alle folgen. Unser Zwei-Phasen-Synchronisationsprotokoll koordiniert die Wiedergabe aller Teilnehmer in Echtzeit.</p>
@@ -539,6 +545,8 @@
 
     <section id="comparison" class="comparison-section">
         <div class="container">
+            <img src="assets/ProContraKoala.webp" alt="A cute koala weighing options in both hands to compare KoalaSync vs Teleparty" class="comparison-mascot" lang="en" width="260" height="184" loading="lazy" data-reveal>
+            <img src="assets/ProContraKoala.webp" alt="Ein niedlicher Koala, der Optionen in beiden Händen abwägt, um KoalaSync mit Teleparty zu vergleichen" class="comparison-mascot" lang="de" width="260" height="184" loading="lazy" data-reveal>
             <h2 class="section-title" data-reveal style="text-align: center; font-size: 2.2rem; margin-bottom: 1rem;">
                 <span lang="en">KoalaSync vs. Teleparty</span>
                 <span lang="de">KoalaSync vs. Teleparty</span>
@@ -803,7 +811,7 @@
         </div>
     </section>
 
-    <section style="text-align: center; border-top: 1px solid var(--glass-border); padding: 6rem 0;">
+    <section style="text-align: center; border-top: 1px solid var(--glass-border); padding: 6rem 0 2rem 0;">
         <div class="container">
             <h2 data-reveal style="font-size: 2.2rem; margin-bottom: 1rem;">
                 <span lang="en">Not convinced? See for yourself.</span>
@@ -824,8 +832,10 @@
                 </a>
             </div>
             
-            <img src="assets/KoalaGithub.webp" alt="A cute koala holding a GitHub repository page next to the GitHub mascot Octocat" class="cta-github-mascot" lang="en" width="250" height="165" loading="lazy" data-reveal>
-            <img src="assets/KoalaGithub.webp" alt="Ein niedlicher Koala hält eine GitHub-Projektseite zusammen mit dem GitHub Maskottchen Octocat" class="cta-github-mascot" lang="de" width="250" height="165" loading="lazy" data-reveal>
+            <a href="https://github.com/Shik3i/KoalaSync" target="_blank" data-reveal style="display: inline-block; text-decoration: none;">
+                <img src="assets/KoalaGithub.webp" alt="A cute koala holding a GitHub repository page next to the GitHub mascot Octocat" class="cta-github-mascot" lang="en" width="250" height="165" loading="lazy">
+                <img src="assets/KoalaGithub.webp" alt="Ein niedlicher Koala hält eine GitHub-Projektseite zusammen mit dem GitHub Maskottchen Octocat" class="cta-github-mascot" lang="de" width="250" height="165" loading="lazy">
+            </a>
             
             <div class="cta-group" data-reveal style="justify-content: center; margin-top: 1rem;">
                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">

website/style.css

@@ -186,6 +186,25 @@ nav {
     font-weight: 400;
     line-height: 1.6;
 }
+.hero-mascot-container {
+    display: block;
+    margin-bottom: -0.5rem;
+    margin-left: 2.2rem;
+}
+
+.hero-lookdown-mascot {
+    display: block;
+    width: 90px;
+    height: auto;
+}
+
+@media (max-width: 768px) {
+    .hero-mascot-container {
+        margin-left: 0;
+        display: flex;
+        justify-content: center;
+    }
+}
 
 .cta-group {
     display: flex;
@@ -1490,7 +1509,7 @@ html.lang-de [lang="en"] {
     transition: opacity 0.3s ease;
 }
 
-.use-case-card:nth-child(1) { --card-accent-border: #6366f1; }
+.use-case-card:nth-child(1) { --card-accent-border: #f59e0b; }
 .use-case-card:nth-child(2) { --card-accent-border: #38bdf8; }
 .use-case-card:nth-child(3) { --card-accent-border: #ec4899; }
 
@@ -1523,6 +1542,22 @@ html.lang-de [lang="en"] {
     margin: 1.5rem auto;
 }
 
+.features-questions-mascot {
+    display: block;
+    width: 100%;
+    max-width: 250px;
+    height: auto;
+    margin: -1.5rem auto 0.2rem auto;
+}
+
+.comparison-mascot {
+    display: block;
+    width: 100%;
+    max-width: 260px;
+    height: auto;
+    margin: -2.2rem auto 0.2rem auto;
+}
+
 .use-case-icon {
     font-size: 1.6rem;
     margin-right: 0.6rem;