diff --git a/css/styles.css b/css/styles.css
index d9c4bb3..09c45e4 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -336,6 +336,37 @@ body {
 }
 .btn-telegram:active { transform: scale(0.98); }
 
+/* CTA button — hero section */
+.btn-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 28px;
+  font-size: 17px;
+  font-weight: 700;
+  border-radius: 12px;
+  background: #0088cc;
+  color: #fff;
+  text-decoration: none;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 4px 16px rgba(0, 136, 204, 0.4);
+  margin-top: 24px;
+}
+.btn-cta:hover {
+  background: #0077b3;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 136, 204, 0.5);
+}
+.btn-cta:active {
+  transform: translateY(0) scale(0.98);
+}
+.btn-cta svg {
+  transition: transform 0.2s ease;
+}
+.btn-cta:hover svg {
+  transform: scale(1.1);
+}
+
 /* ========================================
    HERO — Focal Motion
    ======================================== */
diff --git a/index.html b/index.html
index 8f339a9..92c4be2 100644
--- a/index.html
+++ b/index.html
@@ -265,6 +265,11 @@
           <span class="hide-en">Wiki Articles</span>
         </div>
       </div>
+      <a href="https://t.me/+2s0N78kM5n4xMzBi" target="_blank" rel="noopener" class="btn btn-cta">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm5.94 8.13l-1.97 9.27c-.15.67-.54.83-1.09.52l-3.02-2.22-1.46 1.4c-.16.16-.3.3-.61.3l.22-3.06 5.55-5.02c.24-.22-.05-.34-.38-.13L8.69 14.7l-2.95-.92c-.64-.2-.66-.64.14-.95l11.15-4.3c.52-.19.97.13.81.9z"/></svg>
+        <span class="hide-de">Unserem Telegram-Kanal beitreten</span>
+        <span class="hide-en">Join our Telegram Channel</span>
+      </a>
     </div>
   </section>