diff --git a/echokit_cube.html b/echokit_cube.html
index a8a6887..d03117f 100644
--- a/echokit_cube.html
+++ b/echokit_cube.html
@@ -8,7 +8,15 @@
     <meta name="keywords" content="AI education, voice AI learning, Rust programming education, open source AI toolkit, STEM learning, AI for students, build AI agent, educational AI hardware">
     <meta property="og:title" content="EchoKit - Educational Voice AI Toolkit for Students">
     <meta property="og:description" content="Learn AI by building. Complete open-source voice AI system with hardware, firmware, and server code. Perfect for students and educators.">
-    <meta property="og:type" content="product">
+    <meta property="og:type" content="website">
+    <meta name="author" content="EchoKit"/>
+    <meta name="robots" content="index,follow"/>
+    <link rel="canonical" href="https://echokit.dev/echokit_cube.html"/>
+    <meta property="og:image" content="https://echokit.dev/media/echokit_cube-01.webp"/>
+    <meta property="og:url" content="https://echokit.dev/echokit_cube.html"/>
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="twitter:site" content="@echokit"/>
+    <meta name="theme-color" content="#0a0a1f"/>
     
     <style>
         * {
@@ -66,7 +74,7 @@
         }
 
         .nav-links a:hover {
-            color: #667eea;
+            color: #6550af;
         }
 
         .container {
@@ -82,11 +90,13 @@
         }
 
         .breadcrumb a {
-            color: #667eea;
+            color: #6550af;
+            font-weight: 600;
             text-decoration: none;
         }
 
         .breadcrumb a:hover {
+            color: #8968c1;
             text-decoration: underline;
         }
 
@@ -173,7 +183,7 @@
         }
 
         .thumbnail:hover, .thumbnail.active {
-            border-color: #667eea;
+            border-color: #6550af;
             transform: translateY(-3px);
             box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
         }
@@ -207,13 +217,13 @@
             border-radius: 20px;
             font-size: 0.9rem;
             font-weight: 600;
-            color: #667eea;
+            color: #6550af;
         }
 
         .education-badge {
             background: rgba(16, 185, 129, 0.1);
             border-color: rgba(16, 185, 129, 0.3);
-            color: #10b981;
+            color: #0a6e4d;
         }
 
         .price-section {
@@ -228,7 +238,7 @@
         .price {
             font-size: 3rem;
             font-weight: 800;
-            color: #667eea;
+            color: #6550af;
             margin-bottom: 10px;
         }
 
@@ -268,6 +278,7 @@
         }
 
         .cta-secondary {
+            color: #745fbc;
             background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
             border: 2px solid rgba(102, 126, 234, 0.5);
         }
@@ -285,7 +296,7 @@
             font-size: 1.8rem;
             font-weight: 700;
             margin-bottom: 20px;
-            color: #667eea;
+            color: #6550af;
         }
 
         .section p {
@@ -311,7 +322,7 @@
             content: "✓";
             position: absolute;
             left: 0;
-            color: #10b981;
+            color: #0a6e4d;
             font-weight: bold;
             font-size: 1.3rem;
         }
@@ -327,7 +338,7 @@
         }
 
         .edu-focus h2 {
-            color: #10b981;
+            color: #0a6e4d;
             font-size: 2rem;
             margin-bottom: 20px;
         }
@@ -350,13 +361,13 @@
 
         .learning-card:hover {
             transform: translateY(-5px);
-            border-color: #667eea;
+            border-color: #6550af;
             box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
         }
 
         .learning-card h3 {
             font-size: 1.3rem;
-            color: #667eea;
+            color: #6550af;
             margin-bottom: 12px;
         }
 
@@ -390,7 +401,7 @@
 
         .spec-label {
             font-weight: 700;
-            color: #667eea;
+            color: #6550af;
             font-size: 0.95rem;
         }
 
@@ -420,7 +431,7 @@
         .included-item:hover {
             transform: translateY(-3px);
             box-shadow: 0 6px 16px rgba(102, 126, 234, 0.15);
-            border-color: #667eea;
+            border-color: #6550af;
         }
 
         .included-icon {
@@ -431,7 +442,7 @@
         .included-item h3 {
             font-size: 1.2rem;
             margin-bottom: 10px;
-            color: #667eea;
+            color: #6550af;
         }
 
         /* Responsive */
@@ -625,14 +636,14 @@
                     <!--
                     <div class="thumbnail active" style="position: relative;" onclick="changeMedia(0)">
                         <div class="video-icon" style="font-size: 20px;">▶️</div>
-                        <img src="media/XroT7a0DLkw.jpg" alt="EchoKit Video">
+                        <img src="media/XroT7a0DLkw.webp" alt="EchoKit Video">
                     </div>
                     -->
                     <div class="thumbnail" onclick="changeMedia(0)">
-                        <img src="media/echokit-cube-01.jpg" alt="EchoKit">
+                        <img src="media/echokit-cube-01-305.webp" alt="EchoKit">
                     </div>
                     <div class="thumbnail" onclick="changeMedia(1)">
-                        <img src="media/echokit-cube-02.png" alt="EchoKit">
+                        <img src="media/echokit-cube-02-305.webp" alt="EchoKit">
                     </div>
                 </div>
             </div>
@@ -712,7 +723,7 @@ <h3>Educators</h3>
 
         <!-- Technical Specifications -->
         <div class="specs-section" id="specs">
-            <h2 style="font-size: 2rem; color: #667eea; margin-bottom: 30px;">Technical Specifications</h2>
+            <h2 style="font-size: 2rem; color: #6550af; margin-bottom: 30px;">Technical Specifications</h2>
             <div class="specs-grid">
                 <div class="spec-item">
                     <div class="spec-label">Processor</div>
@@ -831,7 +842,7 @@ <h2 style="font-size: 2rem;">Software Capabilities</h2>
 
         <!-- CTA Section -->
         <div class="price-section" style="text-align: center;">
-            <h2 style="font-size: 2rem; color: #667eea; margin-bottom: 20px;">Start Your AI Learning Journey</h2>
+            <h2 style="font-size: 2rem; color: #6550af; margin-bottom: 20px;">Start Your AI Learning Journey</h2>
             <p style="font-size: 1.1rem; margin-bottom: 30px; color: #555;">
                 Ships within 3 weeks. Each device is hand-assembled, tested, and comes with lifetime access to documentation and updates.
             </p>
@@ -846,12 +857,11 @@ <h2 style="font-size: 2rem; color: #667eea; margin-bottom: 20px;">Start Your AI
         <p style="color: #666;">© 2025 EchoKit. Open source under GPL-3.0 License.</p>
     </footer>
 
-<script>
-    const media = [
-        // {type: 'video', src: 'media/XroT7a0DLkw.mp4', poster: 'media/XroT7a0DLkw.jpg'},
-        {type: 'image', src: 'media/echokit-cube-01.jpg'},
-        {type: 'image', src: 'media/echokit-cube-02.png'}
-    ];
+    <script>
+        const media = [
+            {type: 'image', src: 'media/echokit-cube-01.webp'},
+            {type: 'image', src: 'media/echokit-cube-02.webp'}
+        ];
 
     let endedListener = null;
     let currentVideo = null;
diff --git a/echokit_diy.html b/echokit_diy.html
index 5ae3090..37727e8 100644
--- a/echokit_diy.html
+++ b/echokit_diy.html
@@ -11,7 +11,15 @@
     <meta property="og:title" content="EchoKit - Educational Voice AI Toolkit for Students">
     <meta property="og:description"
           content="Learn AI by building. Complete open-source voice AI system with hardware, firmware, and server code. Perfect for students and educators.">
-    <meta property="og:type" content="product">
+    <meta property="og:type" content="website">
+    <meta name="author" content="EchoKit"/>
+    <meta name="robots" content="index,follow"/>
+    <link rel="canonical" href="https://echokit.dev/echokit_diy.html"/>
+    <meta property="og:image" content="https://echokit.dev/media/echokit-diy-01.webp"/>
+    <meta property="og:url" content="https://echokit.dev/echokit_diy.html"/>
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="twitter:site" content="@echokit"/>
+    <meta name="theme-color" content="#0a0a1f"/>
     <style>
         * {
             margin: 0;
@@ -68,7 +76,7 @@
         }
 
         .nav-links a:hover {
-            color: #667eea;
+            color: #6550af;
         }
 
         .container {
@@ -84,11 +92,13 @@
         }
 
         .breadcrumb a {
-            color: #667eea;
+            color: #6550af;
+            font-weight: 600;
             text-decoration: none;
         }
 
         .breadcrumb a:hover {
+            color: #8968c1;
             text-decoration: underline;
         }
 
@@ -175,7 +185,7 @@
         }
 
         .thumbnail:hover, .thumbnail.active {
-            border-color: #667eea;
+            border-color: #6550af;
             transform: translateY(-3px);
             box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
         }
@@ -209,13 +219,13 @@
             border-radius: 20px;
             font-size: 0.9rem;
             font-weight: 600;
-            color: #667eea;
+            color: #6550af;
         }
 
         .education-badge {
             background: rgba(16, 185, 129, 0.1);
             border-color: rgba(16, 185, 129, 0.3);
-            color: #10b981;
+            color: #0a6e4d;
         }
 
         .price-section {
@@ -230,7 +240,7 @@
         .price {
             font-size: 3rem;
             font-weight: 800;
-            color: #667eea;
+            color: #6550af;
             margin-bottom: 10px;
         }
 
@@ -270,6 +280,7 @@
         }
 
         .cta-secondary {
+            color: #745fbc;
             background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
             border: 2px solid rgba(102, 126, 234, 0.5);
         }
@@ -287,7 +298,7 @@
             font-size: 1.8rem;
             font-weight: 700;
             margin-bottom: 20px;
-            color: #667eea;
+            color: #6550af;
         }
 
         .section p {
@@ -313,7 +324,7 @@
             content: "✓";
             position: absolute;
             left: 0;
-            color: #10b981;
+            color: #0a6e4d;
             font-weight: bold;
             font-size: 1.3rem;
         }
@@ -329,7 +340,7 @@
         }
 
         .edu-focus h2 {
-            color: #10b981;
+            color: #0a6e4d;
             font-size: 2rem;
             margin-bottom: 20px;
         }
@@ -352,13 +363,13 @@
 
         .learning-card:hover {
             transform: translateY(-5px);
-            border-color: #667eea;
+            border-color: #6550af;
             box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
         }
 
         .learning-card h3 {
             font-size: 1.3rem;
-            color: #667eea;
+            color: #6550af;
             margin-bottom: 12px;
         }
 
@@ -392,7 +403,7 @@
 
         .spec-label {
             font-weight: 700;
-            color: #667eea;
+            color: #6550af;
             font-size: 0.95rem;
         }
 
@@ -422,7 +433,7 @@
         .included-item:hover {
             transform: translateY(-3px);
             box-shadow: 0 6px 16px rgba(102, 126, 234, 0.15);
-            border-color: #667eea;
+            border-color: #6550af;
         }
 
         .included-icon {
@@ -433,7 +444,7 @@
         .included-item h3 {
             font-size: 1.2rem;
             margin-bottom: 10px;
-            color: #667eea;
+            color: #6550af;
         }
 
         /* Responsive */
@@ -626,19 +637,20 @@
             <div class="thumbnail-grid">
                 <div class="thumbnail active" style="position: relative;" onclick="changeMedia(0)">
                     <div class="video-icon" style="font-size: 20px;">▶️</div>
-                    <img src="media/XroT7a0DLkw.jpg" alt="EchoKit Video">
+                    <img src="media/XroT7a0DLkw-305.webp"
+                         alt="EchoKit Video">
                 </div>
                 <div class="thumbnail" onclick="changeMedia(1)">
-                    <img src="media/echokit-diy-02.png" alt="Components">
+                    <img src="media/echokit-diy-02-305.webp" alt="Components">
                 </div>
                 <div class="thumbnail" onclick="changeMedia(2)">
-                    <img src="media/echokit-diy-03.png" alt="Assembled">
+                    <img src="media/echokit-diy-03-305.webp" alt="Assembled">
                 </div>
                 <div class="thumbnail" onclick="changeMedia(3)">
-                    <img src="media/echokit-diy-04.jpg" alt="EchoKit DIY">
+                    <img src="media/echokit-diy-04-305.webp" alt="EchoKit DIY">
                 </div>
                 <div class="thumbnail" onclick="changeMedia(4)">
-                    <img src="media/echokit-diy-05.png" alt="Configure">
+                    <img src="media/echokit-diy-05-305.webp" alt="Configure">
                 </div>
             </div>
         </div>
@@ -729,7 +741,7 @@ <h3>Educators</h3>
 
     <!-- Technical Specifications -->
     <div class="specs-section" id="specs">
-        <h2 style="font-size: 2rem; color: #667eea; margin-bottom: 30px;">Technical Specifications</h2>
+        <h2 style="font-size: 2rem; color: #6550af; margin-bottom: 30px;">Technical Specifications</h2>
         <div class="specs-grid">
             <div class="spec-item">
                 <div class="spec-label">Processor</div>
@@ -851,7 +863,7 @@ <h2 style="font-size: 2rem;">Software Capabilities</h2>
 
     <!-- CTA Section -->
     <div class="price-section" style="text-align: center;">
-        <h2 style="font-size: 2rem; color: #667eea; margin-bottom: 20px;">Start Your AI Learning Journey</h2>
+        <h2 style="font-size: 2rem; color: #6550af; margin-bottom: 20px;">Start Your AI Learning Journey</h2>
         <p style="font-size: 1.1rem; margin-bottom: 30px; color: #555;">
             Ships within 3 weeks. Each device is hand-assembled, tested, and comes with lifetime access to documentation
             and updates.
@@ -870,11 +882,11 @@ <h2 style="font-size: 2rem; color: #667eea; margin-bottom: 20px;">Start Your AI
 
 <script>
     const media = [
-        {type: 'video', src: 'media/XroT7a0DLkw.mp4', poster: 'media/XroT7a0DLkw.jpg'},
-        {type: 'image', src: 'media/echokit-diy-02.png'},
-        {type: 'image', src: 'media/echokit-diy-03.png'},
-        {type: 'image', src: 'media/echokit-diy-04.jpg'},
-        {type: 'image', src: 'media/echokit-diy-05.png'}
+        {type: 'video', src: 'media/XroT7a0DLkw.mp4', poster: 'media/XroT7a0DLkw.webp'},
+        {type: 'image', src: 'media/echokit-diy-02.webp'},
+        {type: 'image', src: 'media/echokit-diy-03.webp'},
+        {type: 'image', src: 'media/echokit-diy-04.webp'},
+        {type: 'image', src: 'media/echokit-diy-05.webp'}
     ];
 
     let endedListener = null;
diff --git a/echokit_web.html b/echokit_web.html
index b557f5c..ea1f9df 100644
--- a/echokit_web.html
+++ b/echokit_web.html
@@ -8,7 +8,15 @@
     <meta name="keywords" content="AI education, voice AI learning, Rust programming education, open source AI toolkit, STEM learning, AI for students, build AI agent, educational AI hardware">
     <meta property="og:title" content="EchoKit - Educational Voice AI Toolkit for Students">
     <meta property="og:description" content="Learn AI by building. Complete open-source voice AI system with hardware, firmware, and server code. Perfect for students and educators.">
-    <meta property="og:type" content="product">
+    <meta property="og:type" content="website">
+    <meta name="author" content="EchoKit"/>
+    <meta name="robots" content="index,follow"/>
+    <link rel="canonical" href="https://echokit.dev/echokit_web.html"/>
+    <meta property="og:image" content="https://echokit.dev/media/echokit-web-01.webp"/>
+    <meta property="og:url" content="https://echokit.dev/echokit_web.html"/>
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="twitter:site" content="@echokit"/>
+    <meta name="theme-color" content="#0a0a1f"/>
     
     <style>
         * {
@@ -66,7 +74,7 @@
         }
 
         .nav-links a:hover {
-            color: #667eea;
+            color: #6550af;
         }
 
         .container {
@@ -82,11 +90,13 @@
         }
 
         .breadcrumb a {
-            color: #667eea;
+            color: #6550af;
+            font-weight: 600;
             text-decoration: none;
         }
 
         .breadcrumb a:hover {
+            color: #8968c1;
             text-decoration: underline;
         }
 
@@ -173,7 +183,7 @@
         }
 
         .thumbnail:hover, .thumbnail.active {
-            border-color: #667eea;
+            border-color: #6550af;
             transform: translateY(-3px);
             box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
         }
@@ -207,13 +217,13 @@
             border-radius: 20px;
             font-size: 0.9rem;
             font-weight: 600;
-            color: #667eea;
+            color: #6550af;
         }
 
         .education-badge {
             background: rgba(16, 185, 129, 0.1);
             border-color: rgba(16, 185, 129, 0.3);
-            color: #10b981;
+            color: #0a6e4d;
         }
 
         .price-section {
@@ -228,7 +238,7 @@
         .price {
             font-size: 3rem;
             font-weight: 800;
-            color: #667eea;
+            color: #6550af;
             margin-bottom: 10px;
         }
 
@@ -268,6 +278,7 @@
         }
 
         .cta-secondary {
+            color: #745fbc;
             background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
             border: 2px solid rgba(102, 126, 234, 0.5);
         }
@@ -311,7 +322,7 @@
             content: "✓";
             position: absolute;
             left: 0;
-            color: #10b981;
+            color: #0a6e4d;
             font-weight: bold;
             font-size: 1.3rem;
         }
@@ -327,7 +338,7 @@
         }
 
         .edu-focus h2 {
-            color: #10b981;
+            color: #0a6e4d;
             font-size: 2rem;
             margin-bottom: 20px;
         }
@@ -350,13 +361,13 @@
 
         .learning-card:hover {
             transform: translateY(-5px);
-            border-color: #667eea;
+            border-color: #6550af;
             box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
         }
 
         .learning-card h3 {
             font-size: 1.3rem;
-            color: #667eea;
+            color: #6550af;
             margin-bottom: 12px;
         }
 
@@ -390,7 +401,7 @@
 
         .spec-label {
             font-weight: 700;
-            color: #667eea;
+            color: #6550af;
             font-size: 0.95rem;
         }
 
@@ -420,7 +431,7 @@
         .included-item:hover {
             transform: translateY(-3px);
             box-shadow: 0 6px 16px rgba(102, 126, 234, 0.15);
-            border-color: #667eea;
+            border-color: #6550af;
         }
 
         .included-icon {
@@ -431,7 +442,7 @@
         .included-item h3 {
             font-size: 1.2rem;
             margin-bottom: 10px;
-            color: #667eea;
+            color: #6550af;
         }
 
         /* Responsive */
@@ -624,16 +635,19 @@
                 <div class="thumbnail-grid">
                     <div class="thumbnail active" style="position: relative;" onclick="changeMedia(0)">
                         <div class="video-icon" style="font-size: 20px;">▶️</div>
-                        <img src="media/echokit-web-01.jpg" alt="EchoKit Video">
+                        <img src="media/echokit-web-01-305.webp" alt="EchoKit Video">
                     </div>
-                    <div class="thumbnail" onclick="changeMedia(1)">
-                        <img src="media/echokit-web-02.jpg" alt="EchoKit Video">
+                    <div class="thumbnail" style="position: relative;" onclick="changeMedia(1)">
+                        <div class="video-icon" style="font-size: 20px;">▶️</div>
+                        <img src="media/echokit-web-02-305.webp" alt="EchoKit Video">
                     </div>
-                    <div class="thumbnail" onclick="changeMedia(2)">
-                        <img src="media/echokit-web-03.jpg" alt="EchoKit Video">
+                    <div class="thumbnail" style="position: relative;" onclick="changeMedia(2)">
+                        <div class="video-icon" style="font-size: 20px;">▶️</div>
+                        <img src="media/echokit-web-03-305.webp" alt="EchoKit Video">
                     </div>
-                    <div class="thumbnail" onclick="changeMedia(3)">
-                        <img src="media/echokit-web-04.jpg" alt="EchoKit Video">
+                    <div class="thumbnail" style="position: relative;" onclick="changeMedia(3)">
+                        <div class="video-icon" style="font-size: 20px;">▶️</div>
+                        <img src="media/echokit-web-04-305.webp" alt="EchoKit Video">
                     </div>
                 </div>
             </div>
@@ -641,7 +655,7 @@
             <!-- Product Info -->
             <div class="product-info">
                 <h1>EchoKit: Educational Voice AI Toolkit for Students and Builders</h1>
-                
+
                 <div class="badges">
                     <span class="badge">Open Source GPL-3.0</span>
                     <span class="badge">Built with Rust</span>
@@ -661,7 +675,7 @@ <h1>EchoKit: Educational Voice AI Toolkit for Students and Builders</h1>
                 <div class="price-section">
                     <div class="price">FREE trial, then $8 / month</div>
                     <p class="price-note">Chat with EchoKit's fun voice characters and personalities on your computer. No hardware purchase needed. No-risk free trial. Full AI agent server source code, documentation, and learning materials included.</p>
-                    
+
                     <div class="cta-buttons">
                         <a href="https://buy.stripe.com/9B6dRaf5Fg3V4cS8e163K0e" class="cta-button">Try for free</a>
                         <a href="https://forms.gle/MagV8UfLNYYLnCqi6" target="_blank" class="cta-button cta-secondary">Schools and teachers</a>
@@ -712,7 +726,7 @@ <h3>Educators</h3>
 
         <!-- Technical Specifications -->
         <div class="specs-section" id="specs">
-            <h2 style="font-size: 2rem; color: #667eea; margin-bottom: 30px;">Technical Specifications</h2>
+            <h2 style="font-size: 2rem; color: #6550af; margin-bottom: 30px;">Technical Specifications</h2>
             <div class="specs-grid">
                 <div class="spec-item">
                     <div class="spec-label">Programming</div>
@@ -788,7 +802,7 @@ <h2 style="font-size: 2rem;">Software Capabilities</h2>
 
         <!-- CTA Section -->
         <div class="price-section" style="text-align: center;">
-            <h2 style="font-size: 2rem; color: #667eea; margin-bottom: 20px;">Start Your AI Learning Journey</h2>
+            <h2 style="font-size: 2rem; color: #6550af; margin-bottom: 20px;">Start Your AI Learning Journey</h2>
             <p style="font-size: 1.1rem; margin-bottom: 30px; color: #555;">
                 Online access. Comes with lifetime access to documentation and updates. Free trial, and then $8 / month only if you choose to continue.
             </p>
@@ -805,10 +819,10 @@ <h2 style="font-size: 2rem; color: #667eea; margin-bottom: 20px;">Start Your AI
 
 <script>
     const media = [
-        {type: 'video', src: 'media/echokit-web-01.mp4', poster: 'media/echokit-web-01.jpg'},
-        {type: 'video', src: 'media/echokit-web-02.mp4', poster: 'media/echokit-web-02.jpg'},
-        {type: 'video', src: 'media/echokit-web-03.mp4', poster: 'media/echokit-web-03.jpg'},
-        {type: 'video', src: 'media/echokit-web-04.mp4', poster: 'media/echokit-web-04.jpg'}
+        {type: 'video', src: 'media/echokit-web-01.mp4', poster: 'media/echokit-web-01.webp'},
+        {type: 'video', src: 'media/echokit-web-02.mp4', poster: 'media/echokit-web-02.webp'},
+        {type: 'video', src: 'media/echokit-web-03.mp4', poster: 'media/echokit-web-03.webp'},
+        {type: 'video', src: 'media/echokit-web-04.mp4', poster: 'media/echokit-web-04.webp'}
     ];
 
     let endedListener = null;
diff --git a/index.html b/index.html
index f81b4e3..2e623ab 100644
--- a/index.html
+++ b/index.html
@@ -1,739 +1,752 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>EchoKit - Open Source voice AI agent toolkit for students and builders</title>
-        <meta name="google-site-verification" content="KV9hvH2byraLGVL6oxOCD_I3XwzE3phSHl_D_T3l7X4" />
-        <style>
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-
-            body {
-                font-family:
-                    "Inter",
-                    -apple-system,
-                    BlinkMacSystemFont,
-                    sans-serif;
-                background: linear-gradient(
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>EchoKit - Open Source voice AI agent toolkit for students and builders</title>
+    <meta name="google-site-verification" content="KV9hvH2byraLGVL6oxOCD_I3XwzE3phSHl_D_T3l7X4"/>
+    <meta name="description"
+          content="EchoKit — Open Source voice AI agent toolkit for students and builders. Build, customize and host your own voice AI agent."/>
+    <meta name="keywords" content="EchoKit, voice AI, open source, Rust, TTS, VAD, MCP, AI agents"/>
+    <meta name="author" content="EchoKit"/>
+    <meta name="robots" content="index,follow"/>
+    <link rel="canonical" href="https://echokit.dev/"/>
+    <meta property="og:title" content="EchoKit - Open Source voice AI agent toolkit"/>
+    <meta property="og:description"
+          content="Build, customize and host your own voice AI agent — private, realtime, and student-friendly."/>
+    <meta property="og:image" content="https://echokit.dev/media/echokit-diy-01.webp"/>
+    <meta property="og:url" content="https://echokit.dev/"/>
+    <meta property="og:type" content="website"/>
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="twitter:site" content="@echokit"/>
+    <meta name="theme-color" content="#0a0a1f"/>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: "Inter",
+            -apple-system,
+            BlinkMacSystemFont,
+            sans-serif;
+            background: linear-gradient(
                     135deg,
                     #0a0a1f 0%,
                     #1a0d2e 50%,
                     #2d1b3d 100%
-                );
-                color: #ffffff;
-                line-height: 1.6;
-                overflow-x: hidden;
-            }
-
-            .container {
-                max-width: 80%;
-                margin: 0 auto;
-                padding: 0 20px;
-            }
-
-            /* Header */
-            header {
-                padding: 20px 0;
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                z-index: 1000;
-                background: rgba(10, 10, 31, 0.6);
-                backdrop-filter: blur(20px);
-                border-bottom: 1px solid rgba(147, 51, 234, 0.2);
-                transition: all 0.3s ease;
-            }
-
-            nav {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            }
-
-            .logo {
-                font-size: 24px;
-                font-weight: 800;
-                background: linear-gradient(45deg, #ce422b, #9333ea, #06b6d4);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                background-clip: text;
-            }
-
-            .nav-links {
-                display: flex;
-                gap: 30px;
-            }
-
-            .nav-links a {
-                color: #ffffff;
-                text-decoration: none;
-                font-weight: 500;
-                transition: all 0.3s ease;
-                position: relative;
-            }
-
-            .nav-links a:hover {
-                color: #9333ea;
-                transform: translateY(-2px);
-            }
-
-            .nav-links a::after {
-                content: "";
-                position: absolute;
-                bottom: -5px;
-                left: 0;
-                width: 0;
-                height: 2px;
-                background: linear-gradient(45deg, #9333ea, #06b6d4);
-                transition: width 0.3s ease;
-            }
-
-            .nav-links a:hover::after {
-                width: 100%;
-            }
-
-            /* Hero Section */
-            .hero {
-                padding: 120px 0 80px;
-                text-align: center;
-                position: relative;
-                min-height: 100vh;
-                display: flex;
-                align-items: center;
-                background: 
-                    radial-gradient(circle at 20% 30%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
-                    radial-gradient(circle at 80% 70%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
-                    linear-gradient(135deg, #0a0a1f 0%, #1a0d2e 50%, #2d1b3d 100%);
-            }
-
-            .hero-content {
-                position: relative;
-                z-index: 2;
-            }
-
-            .hero-badge {
-                display: inline-block;
-                padding: 8px 20px;
-                background: rgba(147, 51, 234, 0.2);
-                border: 1px solid rgba(147, 51, 234, 0.3);
-                border-radius: 50px;
-                font-size: 0.9rem;
-                font-weight: 600;
-                margin-bottom: 30px;
-            }
-
-            .hero h1 {
-                font-size: 4.5rem;
-                font-weight: 900;
-                padding-bottom: 40px;
-                background: linear-gradient(45deg, #ffffff, #9333ea, #06b6d4);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                background-clip: text;
-                line-height: 1.1;
-            }
-
-            .hero-subtitle {
-                font-size: 1.5rem;
-                font-weight: 600;
-                margin-bottom: 15px;
-                color: #9333ea;
-            }
-
-            .hero p {
-                font-size: 1.2rem;
-                margin-bottom: 40px;
-                opacity: 0.9;
-                max-width: 800px;
-                margin-left: auto;
-                margin-right: auto;
-            }
-
-            .cta-buttons {
-                display: flex;
-                gap: 20px;
-                justify-content: center;
-                flex-wrap: wrap;
-            }
-
-            .cta-button {
-                display: inline-block;
-                padding: 15px 35px;
-                background: linear-gradient(45deg, #9333ea, #06b6d4);
-                color: white;
-                text-decoration: none;
-                border-radius: 50px;
-                font-weight: 600;
-                transition: all 0.3s ease;
-                box-shadow: 0 10px 30px rgba(147, 51, 234, 0.3);
-            }
-
-            .cta-button:hover {
-                transform: translateY(-3px);
-                box-shadow: 0 15px 40px rgba(147, 51, 234, 0.5);
-            }
-
-            .cta-secondary {
-                background: rgba(255, 255, 255, 0.1);
-                border: 1px solid rgba(255, 255, 255, 0.2);
-            }
-
-            .cta-secondary:hover {
-                background: rgba(255, 255, 255, 0.2);
-            }
-
-            /* Trust Indicators Section */
-            .trust-indicators {
-                padding: 40px 0;
-                background: rgba(0, 0, 0, 0.1);
-                border-bottom: 1px solid rgba(147, 51, 234, 0.1);
-            }
-
-            .trust-logos {
-                display: flex;
-                justify-content: center;
-                gap: 50px;
-                flex-wrap: wrap;
-            }
-
-            .trust-logo {
-                font-size: 1.1rem;
-                font-weight: 600;
-                color: #ffffff;
-                opacity: 0.9;
-                display: flex;
-                align-items: center;
-                gap: 8px;
-            }
-
-            /* In Action Section */
-            .in-action {
-                padding: 100px 0;
-                background: rgba(0, 0, 0, 0.2);
-            }
-
-            .video-carousel {
-                position: relative;
-                max-width: 900px;
-                margin: 60px auto 0;
-                border-radius: 20px;
-                overflow: hidden;
-                box-shadow: 0 20px 60px rgba(147, 51, 234, 0.3);
-                cursor: pointer;
-            }
-
-            .carousel-video {
-                width: 100%;
-                aspect-ratio: 16/9;
-                display: none;
-                object-fit: cover;
-            }
-
-            .carousel-video.active {
-                display: block;
-            }
-
-            .play-overlay {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 80px;
-                height: 80px;
-                background: rgba(147, 51, 234, 0.9);
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                transition: all 0.3s ease;
-                pointer-events: none;
-            }
-
-            .video-carousel:hover .play-overlay {
-                background: rgba(147, 51, 234, 1);
-                transform: translate(-50%, -50%) scale(1.1);
-            }
-
-            .play-icon {
-                width: 0;
-                height: 0;
-                border-left: 25px solid white;
-                border-top: 15px solid transparent;
-                border-bottom: 15px solid transparent;
-                margin-left: 5px;
-            }
-
-            .carousel-indicators {
-                display: flex;
-                justify-content: center;
-                gap: 10px;
-                margin-top: 30px;
-            }
-
-            .indicator {
-                width: 12px;
-                height: 12px;
-                border-radius: 50%;
-                background: rgba(255, 255, 255, 0.3);
-                cursor: pointer;
-                transition: all 0.3s ease;
-            }
-
-            .indicator.active {
-                background: #9333ea;
-                width: 30px;
-                border-radius: 6px;
-            }
-
-            /* Loss Aversion Section */
-            .loss-aversion {
-                padding: 100px 0;
-                background: rgba(0, 0, 0, 0.2);
-            }
-
-            .section-title {
-                text-align: center;
-                font-size: 3rem;
-                font-weight: 800;
-                margin-bottom: 20px;
-                background: linear-gradient(45deg, #ffffff, #9333ea);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                background-clip: text;
-            }
-
-            .section-subtitle {
-                text-align: center;
-                font-size: 1.2rem;
-                opacity: 0.8;
-                margin-bottom: 60px;
-                max-width: 600px;
-                margin-left: auto;
-                margin-right: auto;
-            }
-
-            .pain-points {
-                display: grid;
-                grid-template-columns: repeat(4, 1fr);
-                gap: 30px;
-                margin-top: 60px;
-            }
-
-            .pain-point {
-                display: grid;
-                grid-template-rows: auto 1fr auto; /* 1fr takes up the space above, auto takes the bottom a tag */
-                background: rgba(255, 255, 255, 0.05);
-                border-radius: 16px;
-                padding: 35px;
-                border: 1px solid rgba(147, 51, 234, 0.2);
-                transition: all 0.3s ease;
-            }
-
-            .pain-point:hover {
-                transform: translateY(-5px);
-                background: rgba(255, 255, 255, 0.08);
-            }
-
-            .pain-point .icon {
-                font-size: 3rem;
-                display: block;
-                margin-bottom: 20px;
-            }
-
-            .pain-point h3 {
-                font-size: 1.4rem;
-                font-weight: 700;
-                margin-bottom: 15px;
-                color: #9333ea;
-            }
-
-            .pain-point p {
-                opacity: 0.9;
-                line-height: 1.6;
-            }
-
-            /* Section Styles */
-            .section {
-                padding: 100px 0;
-            }
-
-            /* Features Section - Card Layout */
-            .features {
-                background: linear-gradient(
+            );
+            color: #ffffff;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+
+        .container {
+            max-width: 80%;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        /* Header */
+        header {
+            padding: 20px 0;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+            background: rgba(10, 10, 31, 0.6);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(147, 51, 234, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .logo {
+            font-size: 24px;
+            font-weight: 800;
+            background: linear-gradient(45deg, #ce422b, #9333ea, #06b6d4);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 30px;
+        }
+
+        .nav-links a {
+            color: #ffffff;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+
+        .nav-links a:hover {
+            color: #9333ea;
+            transform: translateY(-2px);
+        }
+
+        .nav-links a::after {
+            content: "";
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: linear-gradient(45deg, #9333ea, #06b6d4);
+            transition: width 0.3s ease;
+        }
+
+        .nav-links a:hover::after {
+            width: 100%;
+        }
+
+        /* Hero Section */
+        .hero {
+            padding: 120px 0 80px;
+            text-align: center;
+            position: relative;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            background: radial-gradient(circle at 20% 30%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
+            radial-gradient(circle at 80% 70%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
+            linear-gradient(135deg, #0a0a1f 0%, #1a0d2e 50%, #2d1b3d 100%);
+        }
+
+        .hero-content {
+            position: relative;
+            z-index: 2;
+        }
+
+        .hero-badge {
+            display: inline-block;
+            padding: 8px 20px;
+            background: rgba(147, 51, 234, 0.2);
+            border: 1px solid rgba(147, 51, 234, 0.3);
+            border-radius: 50px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            margin-bottom: 30px;
+        }
+
+        .hero h1 {
+            font-size: 4.5rem;
+            font-weight: 900;
+            padding-bottom: 40px;
+            background: linear-gradient(45deg, #ffffff, #9333ea, #06b6d4);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            line-height: 1.1;
+        }
+
+        .hero-subtitle {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #9333ea;
+        }
+
+        .hero p {
+            font-size: 1.2rem;
+            margin-bottom: 40px;
+            opacity: 0.9;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .cta-buttons {
+            display: flex;
+            gap: 20px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .cta-button {
+            display: inline-block;
+            padding: 15px 35px;
+            background: linear-gradient(45deg, #9333ea, #06b6d4);
+            color: white;
+            text-decoration: none;
+            border-radius: 50px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 10px 30px rgba(147, 51, 234, 0.3);
+        }
+
+        .cta-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(147, 51, 234, 0.5);
+        }
+
+        .cta-secondary {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .cta-secondary:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        /* Trust Indicators Section */
+        .trust-indicators {
+            padding: 40px 0;
+            background: rgba(0, 0, 0, 0.1);
+            border-bottom: 1px solid rgba(147, 51, 234, 0.1);
+        }
+
+        .trust-logos {
+            display: flex;
+            justify-content: center;
+            gap: 50px;
+            flex-wrap: wrap;
+        }
+
+        .trust-logo {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #ffffff;
+            opacity: 0.9;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        /* In Action Section */
+        .in-action {
+            padding: 100px 0;
+            background: rgba(0, 0, 0, 0.2);
+        }
+
+        .video-carousel {
+            position: relative;
+            max-width: 900px;
+            margin: 60px auto 0;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 20px 60px rgba(147, 51, 234, 0.3);
+            cursor: pointer;
+        }
+
+        .carousel-video {
+            width: 100%;
+            aspect-ratio: 16/9;
+            display: none;
+            object-fit: cover;
+        }
+
+        .carousel-video.active {
+            display: block;
+        }
+
+        .play-overlay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80px;
+            height: 80px;
+            background: rgba(147, 51, 234, 0.9);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            pointer-events: none;
+        }
+
+        .video-carousel:hover .play-overlay {
+            background: rgba(147, 51, 234, 1);
+            transform: translate(-50%, -50%) scale(1.1);
+        }
+
+        .play-icon {
+            width: 0;
+            height: 0;
+            border-left: 25px solid white;
+            border-top: 15px solid transparent;
+            border-bottom: 15px solid transparent;
+            margin-left: 5px;
+        }
+
+        .carousel-indicators {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-top: 30px;
+        }
+
+        .indicator {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .indicator.active {
+            background: #9333ea;
+            width: 30px;
+            border-radius: 6px;
+        }
+
+        /* Loss Aversion Section */
+        .loss-aversion {
+            padding: 100px 0;
+            background: rgba(0, 0, 0, 0.2);
+        }
+
+        .section-title {
+            text-align: center;
+            font-size: 3rem;
+            font-weight: 800;
+            margin-bottom: 20px;
+            background: linear-gradient(45deg, #ffffff, #9333ea);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .section-subtitle {
+            text-align: center;
+            font-size: 1.2rem;
+            opacity: 0.8;
+            margin-bottom: 60px;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .pain-points {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 30px;
+            margin-top: 60px;
+        }
+
+        .pain-point {
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            padding: 35px;
+            border: 1px solid rgba(147, 51, 234, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        .pain-point:hover {
+            transform: translateY(-5px);
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        .pain-point .icon {
+            font-size: 3rem;
+            display: block;
+            margin-bottom: 20px;
+        }
+
+        .pain-point h3 {
+            font-size: 1.4rem;
+            font-weight: 700;
+            margin-bottom: 15px;
+            color: #9333ea;
+        }
+
+        .pain-point p {
+            opacity: 0.9;
+            line-height: 1.6;
+        }
+
+        /* Section Styles */
+        .section {
+            padding: 100px 0;
+        }
+
+        /* Features Section - Card Layout */
+        .features {
+            background: linear-gradient(
                     180deg,
                     rgba(147, 51, 234, 0.05) 0%,
                     transparent 100%
-                );
-                margin-top: 60px;
-            }
-
-            .features-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-                gap: 30px;
-                margin-top: 60px;
-            }
-
-            .feature-card {
-                background: rgba(255, 255, 255, 0.08);
-                border-radius: 16px;
-                padding: 35px;
-                border: 1px solid rgba(147, 51, 234, 0.2);
-                transition: all 0.3s ease;
-            }
-
-            .feature-card:hover {
-                transform: translateY(-8px);
-                background: rgba(255, 255, 255, 0.12);
-                border-color: rgba(147, 51, 234, 0.4);
-                box-shadow: 0 20px 40px rgba(147, 51, 234, 0.15);
-            }
-
-            .feature-card h3 {
-                font-size: 1.4rem;
-                font-weight: 700;
-                margin-bottom: 15px;
-                color: #9333ea;
-                display: flex;
-                align-items: center;
-                gap: 12px;
-            }
-
-            .feature-icon {
-                font-size: 1.5rem;
-            }
-
-            /* Benefits Section - List Layout */
-            .benefits {
-                background: rgba(0, 0, 0, 0.2);
-            }
-
-            .benefits-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-                gap: 30px;
-                margin-top: 60px;
-            }
-
-            .benefit-card {
-                background: linear-gradient(
+            );
+        }
+
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 30px;
+            margin-top: 60px;
+        }
+
+        .feature-card {
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 16px;
+            padding: 35px;
+            border: 1px solid rgba(147, 51, 234, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-8px);
+            background: rgba(255, 255, 255, 0.12);
+            border-color: rgba(147, 51, 234, 0.4);
+            box-shadow: 0 20px 40px rgba(147, 51, 234, 0.15);
+        }
+
+        .feature-card h3 {
+            font-size: 1.4rem;
+            font-weight: 700;
+            margin-bottom: 15px;
+            color: #9333ea;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .feature-icon {
+            font-size: 1.5rem;
+        }
+
+        /* Benefits Section - List Layout */
+        .benefits {
+            padding-bottom: 60px;
+            background: rgba(0, 0, 0, 0.2);
+        }
+
+        .benefits-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            gap: 30px;
+            margin-top: 60px;
+        }
+
+        .benefit-card {
+            background: linear-gradient(
                     135deg,
                     rgba(6, 182, 212, 0.1),
                     rgba(16, 185, 129, 0.1)
-                );
-                border-radius: 20px;
-                padding: 40px;
-                border-left: 4px solid #06b6d4;
-                transition: all 0.3s ease;
-            }
-
-            .benefit-card:hover {
-                transform: translateY(-5px);
-                box-shadow: 0 15px 30px rgba(6, 182, 212, 0.15);
-            }
-
-            .benefit-card h3 {
-                font-size: 1.4rem;
-                font-weight: 700;
-                margin-bottom: 15px;
-                color: #06b6d4;
-                display: flex;
-                align-items: center;
-                gap: 15px;
-            }
-
-            .benefit-icon {
-                font-size: 1.5rem;
-            }
-
-            .benefit-card p {
-                opacity: 0.9;
-                line-height: 1.6;
-            }
-
-            /* Open Source Section */
-            .opensource {
-                background: rgba(0, 0, 0, 0.2);
-                padding: 100px 0;
-            }
-
-            .opensource-grid {
-                display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                gap: 30px;
-                margin-top: 60px;
-            }
-
-            .repo-card {
-                background: linear-gradient(
+            );
+            border-radius: 20px;
+            padding: 40px;
+            border-left: 4px solid #06b6d4;
+            transition: all 0.3s ease;
+        }
+
+        .benefit-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(6, 182, 212, 0.15);
+        }
+
+        .benefit-card h3 {
+            font-size: 1.4rem;
+            font-weight: 700;
+            margin-bottom: 15px;
+            color: #06b6d4;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .benefit-icon {
+            font-size: 1.5rem;
+        }
+
+        .benefit-card p {
+            opacity: 0.9;
+            line-height: 1.6;
+        }
+
+        /* Open Source Section */
+        .opensource {
+            background: rgba(0, 0, 0, 0.2);
+            padding: 100px 0;
+        }
+
+        .opensource-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 30px;
+            margin-top: 60px;
+        }
+
+        .repo-card {
+            background: linear-gradient(
                     135deg,
                     rgba(147, 51, 234, 0.1),
                     rgba(6, 182, 212, 0.05)
-                );
-                border-radius: 20px;
-                padding: 35px;
-                border: 1px solid rgba(147, 51, 234, 0.2);
-                transition: all 0.3s ease;
-                position: relative;
-                overflow: hidden;
-            }
-
-            .repo-card:hover {
-                transform: translateY(-8px);
-                background: linear-gradient(
+            );
+            border-radius: 20px;
+            padding: 35px;
+            border: 1px solid rgba(147, 51, 234, 0.2);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .repo-card:hover {
+            transform: translateY(-8px);
+            background: linear-gradient(
                     135deg,
                     rgba(147, 51, 234, 0.15),
                     rgba(6, 182, 212, 0.1)
-                );
-                border-color: rgba(147, 51, 234, 0.4);
-                box-shadow: 0 20px 40px rgba(147, 51, 234, 0.15);
-            }
-
-            .repo-card::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                height: 3px;
-                background: linear-gradient(45deg, #9333ea, #06b6d4);
-            }
-
-            .repo-header {
-                display: flex;
-                justify-content: space-between;
-                align-items: flex-start;
-                margin-bottom: 15px;
-                flex-wrap: wrap;
-                gap: 10px;
+            );
+            border-color: rgba(147, 51, 234, 0.4);
+            box-shadow: 0 20px 40px rgba(147, 51, 234, 0.15);
+        }
+
+        .repo-card::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(45deg, #9333ea, #06b6d4);
+        }
+
+        .repo-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 15px;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        .repo-card h3 {
+            font-size: 1.3rem;
+            font-weight: 700;
+            color: #9333ea;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin: 0;
+        }
+
+        .repo-icon {
+            font-size: 1.4rem;
+        }
+
+        .tech-stack {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .tech-tag {
+            background: rgba(147, 51, 234, 0.2);
+            border: 1px solid rgba(147, 51, 234, 0.3);
+            border-radius: 15px;
+            padding: 4px 12px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: #9333ea;
+        }
+
+        .repo-card p {
+            opacity: 0.9;
+            line-height: 1.6;
+            margin-bottom: 25px;
+            color: #ffffff;
+        }
+
+        .repo-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: #06b6d4;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            border: 1px solid rgba(6, 182, 212, 0.3);
+            padding: 10px 20px;
+            border-radius: 25px;
+            background: rgba(6, 182, 212, 0.1);
+        }
+
+        .repo-link:hover {
+            color: #ffffff;
+            background: rgba(6, 182, 212, 0.2);
+            border-color: rgba(6, 182, 212, 0.5);
+            transform: translateY(-2px);
+        }
+
+        .github-icon {
+            font-size: 1.1rem;
+        }
+
+        /* Process Section */
+        .process {
+            padding: 100px 0;
+            background: rgba(0, 0, 0, 0.1);
+        }
+
+        .process-steps {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 40px;
+            margin-top: 60px;
+        }
+
+        .process-step {
+            text-align: center;
+            padding: 40px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 20px;
+            border: 1px solid rgba(147, 51, 234, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        .process-step:hover {
+            transform: translateY(-5px);
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        .step-number {
+            display: inline-block;
+            width: 60px;
+            height: 60px;
+            line-height: 60px;
+            background: linear-gradient(45deg, #9333ea, #06b6d4);
+            border-radius: 50%;
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 20px;
+        }
+
+        .process-step h3 {
+            font-size: 1.4rem;
+            font-weight: 700;
+            margin-bottom: 15px;
+            color: #9333ea;
+        }
+
+        .process-step p {
+            opacity: 0.9;
+            line-height: 1.6;
+        }
+
+        /* Preorder Section */
+        .preorder {
+            padding: 120px 0;
+            background: linear-gradient(
+                    135deg,
+                    rgba(147, 51, 234, 0.1),
+                    rgba(6, 182, 212, 0.1)
+            );
+            text-align: center;
+        }
+
+        .preorder-title {
+            font-size: 3rem;
+            font-weight: 800;
+            margin-bottom: 20px;
+            background: linear-gradient(45deg, #ffffff, #9333ea);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-align: center;
+        }
+
+        .preorder-subtitle {
+            font-size: 1.3rem;
+            margin-bottom: 40px;
+            opacity: 0.9;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+            text-align: center;
+        }
+
+        /* Responsive */
+        @media (max-width: 1200px) {
+            .pain-points {
+                grid-template-columns: repeat(2, 1fr);
             }
+        }
 
-            .repo-card h3 {
-                font-size: 1.3rem;
-                font-weight: 700;
-                color: #9333ea;
-                display: flex;
-                align-items: center;
-                gap: 12px;
-                margin: 0;
+        /* Responsive */
+        @media (max-width: 768px) {
+            .nav-links {
+                display: none;
             }
 
-            .repo-icon {
-                font-size: 1.4rem;
+            .hero h1 {
+                font-size: 2.8rem;
             }
 
-            .tech-stack {
-                display: flex;
-                gap: 8px;
-                flex-wrap: wrap;
+            .section-title {
+                font-size: 2.2rem;
             }
 
-            .tech-tag {
-                background: rgba(147, 51, 234, 0.2);
-                border: 1px solid rgba(147, 51, 234, 0.3);
-                border-radius: 15px;
-                padding: 4px 12px;
-                font-size: 0.8rem;
-                font-weight: 600;
-                color: #9333ea;
+            .preorder-title {
+                font-size: 2.2rem;
             }
 
-            .repo-card p {
-                opacity: 0.9;
-                line-height: 1.6;
-                margin-bottom: 25px;
-                color: #ffffff;
+            .benefits-grid,
+            .features-grid,
+            .process-steps,
+            .opensource-grid {
+                grid-template-columns: 1fr;
             }
 
-            .repo-link {
-                display: inline-flex;
+            .cta-buttons {
+                flex-direction: column;
                 align-items: center;
-                gap: 8px;
-                color: #06b6d4;
-                text-decoration: none;
-                font-weight: 600;
-                transition: all 0.3s ease;
-                border: 1px solid rgba(6, 182, 212, 0.3);
-                padding: 10px 20px;
-                border-radius: 25px;
-                background: rgba(6, 182, 212, 0.1);
             }
 
-            .repo-link:hover {
-                color: #ffffff;
-                background: rgba(6, 182, 212, 0.2);
-                border-color: rgba(6, 182, 212, 0.5);
-                transform: translateY(-2px);
-            }
-
-            .github-icon {
-                font-size: 1.1rem;
-            }
-
-            /* Process Section */
-            .process {
-                padding: 100px 0;
-                background: rgba(0, 0, 0, 0.1);
-            }
-
-            .process-steps {
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                gap: 40px;
-                margin-top: 60px;
-            }
-
-            .process-step {
-                text-align: center;
-                padding: 40px;
-                background: rgba(255, 255, 255, 0.05);
-                border-radius: 20px;
-                border: 1px solid rgba(147, 51, 234, 0.2);
-                transition: all 0.3s ease;
-            }
-
-            .process-step:hover {
-                transform: translateY(-5px);
-                background: rgba(255, 255, 255, 0.08);
+            .trust-logos {
+                gap: 20px;
             }
 
-            .step-number {
-                display: inline-block;
-                width: 60px;
-                height: 60px;
-                line-height: 60px;
-                background: linear-gradient(45deg, #9333ea, #06b6d4);
-                border-radius: 50%;
-                font-size: 1.5rem;
-                font-weight: 700;
-                margin-bottom: 20px;
+            .trust-logo {
+                font-size: 1rem;
             }
 
-            .process-step h3 {
-                font-size: 1.4rem;
-                font-weight: 700;
-                margin-bottom: 15px;
-                color: #9333ea;
+            .container {
+                max-width: 95%;
+                padding: 0 15px;
             }
 
-            .process-step p {
-                opacity: 0.9;
-                line-height: 1.6;
+            .loss-aversion {
+                padding: 60px 0;
             }
 
-            /* Preorder Section */
-            .preorder {
-                padding: 120px 0;
-                background: linear-gradient(
-                    135deg,
-                    rgba(147, 51, 234, 0.1),
-                    rgba(6, 182, 212, 0.1)
-                );
-                text-align: center;
+            .section-subtitle {
+                font-size: 1.1rem;
+                margin-bottom: 40px;
+                padding: 0 10px;
             }
 
-            .preorder-title {
-                font-size: 3rem;
-                font-weight: 800;
-                margin-bottom: 20px;
-                background: linear-gradient(45deg, #ffffff, #9333ea);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                background-clip: text;
-                text-align: center;
+            .pain-points {
+                grid-template-columns: 1fr;
+                gap: 20px;
+                margin-top: 40px;
             }
 
-            .preorder-subtitle {
-                font-size: 1.3rem;
-                margin-bottom: 40px;
-                opacity: 0.9;
-                max-width: 600px;
-                margin-left: auto;
-                margin-right: auto;
+            .pain-point {
+                padding: 25px 20px;
+                border-radius: 12px;
                 text-align: center;
             }
 
-            /* Responsive */
-            @media (max-width: 1200px) {
-                .pain-points {
-                    grid-template-columns: repeat(2, 1fr);
-                }
+            .opensource {
+                padding: 60px 0;
             }
 
-            /* Responsive */
-            @media (max-width: 768px) {
-                .nav-links {
-                    display: none;
-                }
-
-                .hero h1 {
-                    font-size: 2.8rem;
-                }
-
-                .section-title {
-                    font-size: 2.2rem;
-                }
-
-                .preorder-title {
-                    font-size: 2.2rem;
-                }
-
-                .benefits-grid,
-                .features-grid,
-                .process-steps,
-                .opensource-grid {
-                    grid-template-columns: 1fr;
-                }
-
-                .cta-buttons {
-                    flex-direction: column;
-                    align-items: center;
-                }
-
-                .trust-logos {
-                    gap: 20px;
-                }
-
-                .trust-logo {
-                    font-size: 1rem;
-                }
-
-                .container {
-                    max-width: 95%;
-                    padding: 0 15px;
-                }
-
-                .loss-aversion {
-                    padding: 60px 0;
-                }
-
-                .section-subtitle {
-                    font-size: 1.1rem;
-                    margin-bottom: 40px;
-                    padding: 0 10px;
-                }
-
-                .pain-points {
-                    grid-template-columns: 1fr;
-                    gap: 20px;
-                    margin-top: 40px;
-                }
-
-                .pain-point {
-                    padding: 25px 20px;
-                    border-radius: 12px;
-                    text-align: center;
-                }
-
-                .opensource {
-                    padding: 60px 0;
-                }
-
                 .opensource-grid {
                     margin-top: 40px;
                     gap: 20px;
@@ -751,7 +764,7 @@
 
   gtag('config', 'G-EMHQHV54LP');
 </script>
-    
+
     <body>
         <header>
             <nav class="container">
@@ -766,151 +779,163 @@
             </nav>
         </header>
 
-        <section class="hero">
-            <div class="container">
-                <div class="hero-content">
-                    <div class="hero-badge">🦀 Full-stack AI agent powered by Rust</div>
-                    <h1>Open Source voice AI agent toolkit for students and builders</h1>
-                    <div class="hero-subtitle">
-                        Build, customize and host your own voice AI agent
-                    </div>
-                    <p>
-                        EchoKit is a fun voice AI agent that can chat with you out of the box. But more importantly, it is also a complete toolkit that enables YOU (and your kids / students) to build cutting edge AI agent systems.
-                    </p>
-                    <div class="cta-buttons">
-                        <a
-                            href="echokit_web.html"
-                            class="cta-button"
-                        >
-                             Try for free</a
-                        >
-                        
-                        <a
-                            href="echokit_diy.html"
-                            class="cta-button"
-                        >
-                             Get yours for $49</a
-                        >
-                        
-                        <a
-                            href="#demos"
-                            class="cta-button cta-secondary"
-                            >See it in action</a
-                        >
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Trust Indicators -->
-        <section class="trust-indicators">
-            <div class="container">
-                <div class="trust-logos">
-                    <div class="trust-logo">🏆 Open Source</div>
-                    <div class="trust-logo">🔐 Private knowledge &amp; data</div>
-                    <div class="trust-logo">⚡ Fast &amp; realtime voice</div>
-                    <div class="trust-logo">🆓 Any AI model</div>
-                </div>
+<section class="hero">
+    <div class="container">
+        <div class="hero-content">
+            <div class="hero-badge">🦀 Full-stack AI agent powered by Rust</div>
+            <h1>Open Source voice AI agent toolkit for students and builders</h1>
+            <div class="hero-subtitle">
+                Build, customize and host your own voice AI agent
             </div>
-        </section>
-
-        <!-- In Action Section -->
-        <section id="demos" class="in-action">
-            <div class="container">
-                <h2 class="section-title">EchoKit in Action</h2>
-                <p class="section-subtitle">
-                    See how people are using EchoKit to build amazing voice AI experiences
-                </p>
+            <p>
+                EchoKit is a fun voice AI agent that can chat with you out of the box. But more importantly, it is also
+                a complete toolkit that enables YOU (and your kids / students) to build cutting edge AI agent systems.
+            </p>
+            <div class="cta-buttons">
+                <a
+                        href="echokit_web.html"
+                        class="cta-button"
+                >
+                    Try for free</a
+                >
 
-                <div class="video-carousel" id="videoCarousel">
-                    <img class="carousel-video active" src="media/XroT7a0DLkw.jpg" alt="EchoKit Demo Video" data-video-id="XroT7a0DLkw">
-                    <img class="carousel-video" src="media/bu_frrOB1F4.jpg" alt="EchoKit Demo Video" data-video-id="bu_frrOB1F4">
-                    <img class="carousel-video" src="media/4DYYT1AUZ9c.jpg" alt="EchoKit Demo Video" data-video-id="4DYYT1AUZ9c">
-                    <div id="play-overlay" class="play-overlay">
-                        <div class="play-icon"></div>
-                    </div>
-                </div>
+                <a
+                        href="echokit_diy.html"
+                        class="cta-button"
+                >
+                    Get yours for $49</a
+                >
 
-                <div class="carousel-indicators">
-                    <div class="indicator active" data-index="0"></div>
-                    <div class="indicator" data-index="1"></div>
-                    <div class="indicator" data-index="2"></div>
-                </div>
+                <a
+                        href="#demos"
+                        class="cta-button cta-secondary"
+                >See it in action</a
+                >
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Trust Indicators -->
+<section class="trust-indicators">
+    <div class="container">
+        <div class="trust-logos">
+            <div class="trust-logo">🏆 Open Source</div>
+            <div class="trust-logo">🔐 Private knowledge &amp; data</div>
+            <div class="trust-logo">⚡ Fast &amp; realtime voice</div>
+            <div class="trust-logo">🆓 Any AI model</div>
+        </div>
+    </div>
+</section>
+
+<!-- In Action Section -->
+<section id="demos" class="in-action">
+    <div class="container">
+        <h2 class="section-title">EchoKit in Action</h2>
+        <p class="section-subtitle">
+            See how people are using EchoKit to build amazing voice AI experiences
+        </p>
+
+        <div class="video-carousel" id="videoCarousel">
+            <img class="carousel-video active" src="media/XroT7a0DLkw.webp"
+                 srcset="media/XroT7a0DLkw-305.webp 305w,media/XroT7a0DLkw-542.webp 542w,media/XroT7a0DLkw-720.webp 720w"
+                 alt="EchoKit Demo Video"
+                 data-video-id="XroT7a0DLkw">
+            <img class="carousel-video" src="media/bu_frrOB1F4.webp"
+                 srcset="media/bu_frrOB1F4-305.webp 305w,media/bu_frrOB1F4-542.webp 542w,media/bu_frrOB1F4-720.webp 720w"
+                 alt="EchoKit Demo Video"
+                 data-video-id="bu_frrOB1F4">
+            <img class="carousel-video" src="media/4DYYT1AUZ9c.webp"
+                 srcset="media/4DYYT1AUZ9c-305.webp 305w,media/4DYYT1AUZ9c-542.webp 542w,media/4DYYT1AUZ9c-720.webp 720w"
+                 alt="EchoKit Demo Video" data-video-id="4DYYT1AUZ9c">
+            <div id="play-overlay" class="play-overlay">
+                <div class="play-icon"></div>
             </div>
-        </section>
-
-        <!-- Loss Aversion Section -->
-        <!--
-        <section id="problem" class="loss-aversion">
-            <div class="container">
-                <h2 class="section-title">
-                    Tired of AI that doesn't work for You?
-                </h2>
-                <p class="section-subtitle">
-                    Proprietary AI systems from big tech are failing us!
+        </div>
+
+        <div class="carousel-indicators">
+            <div class="indicator active" data-index="0"></div>
+            <div class="indicator" data-index="1"></div>
+            <div class="indicator" data-index="2"></div>
+        </div>
+    </div>
+</section>
+
+<!-- Loss Aversion Section -->
+<!--
+<section id="problem" class="loss-aversion">
+    <div class="container">
+        <h2 class="section-title">
+            Tired of AI that doesn't work for You?
+        </h2>
+        <p class="section-subtitle">
+            Proprietary AI systems from big tech are failing us!
+        </p>
+
+        <div class="pain-points">
+            <div class="pain-point animate-on-scroll">
+                <span class="icon">🔒</span>
+                <h3>Lack of Privacy</h3>
+                <p>
+                    Big Tech forces you to use their cloud services. They store your knowledge and even memory!
+                    You deserve the freedom to choose where your data goes.
                 </p>
+            </div>
 
-                <div class="pain-points">
-                    <div class="pain-point animate-on-scroll">
-                        <span class="icon">🔒</span>
-                        <h3>Lack of Privacy</h3>
-                        <p>
-                            Big Tech forces you to use their cloud services. They store your knowledge and even memory! 
-                            You deserve the freedom to choose where your data goes.
-                        </p>
-                    </div>
-
-                    <div class="pain-point animate-on-scroll">
-                        <span class="icon">💸</span>
-                        <h3>Expensive</h3>
-                        <p>
-                            Proprietary AI systems could be expensive, especially those requiring multimodal and
-                            real-time interactions. Bills add up fast.
-                        </p>
-                    </div>
+            <div class="pain-point animate-on-scroll">
+                <span class="icon">💸</span>
+                <h3>Expensive</h3>
+                <p>
+                    Proprietary AI systems could be expensive, especially those requiring multimodal and
+                    real-time interactions. Bills add up fast.
+                </p>
+            </div>
 
-                    <div class="pain-point animate-on-scroll">
-                        <span class="icon">🤖</span>
-                        <h3>Limited</h3>
-                        <p>
-                            Past generation's "smart speakers" or "smart assistants" like Alexa and Siri barely do
-                            anything useful. They're not actually smart.
-                        </p>
-                    </div>
+            <div class="pain-point animate-on-scroll">
+                <span class="icon">🤖</span>
+                <h3>Limited</h3>
+                <p>
+                    Past generation's "smart speakers" or "smart assistants" like Alexa and Siri barely do
+                    anything useful. They're not actually smart.
+                </p>
+            </div>
 
-                    <div class="pain-point animate-on-scroll">
-                        <span class="icon">📦</span>
-                        <h3>Black box</h3>
-                        <p>
-                            Working with AI is a crucial job skill for the future. Yet, most existing AI
-                            are black boxes and impossible to learn. We need learnable AI systems.
-                        </p>
-                    </div>
-                </div>
+            <div class="pain-point animate-on-scroll">
+                <span class="icon">📦</span>
+                <h3>Black box</h3>
+                <p>
+                    Working with AI is a crucial job skill for the future. Yet, most existing AI
+                    are black boxes and impossible to learn. We need learnable AI systems.
+                </p>
             </div>
-        </section>
-        -->
-
-        <section id="problem" class="loss-aversion">
-            <div class="container">
-                <h2 class="section-title">
-                    What is EchoKit?
-                </h2>
-                <p class="section-subtitle">
-                    AI learning with EchoKit is fun! Voice chat with interesting characters and get first-hand experience with real-time AI. You can also customize every aspect of the hardware and software stack, and run the whole AI agent system in your own home!
+        </div>
+    </div>
+</section>
+-->
+
+<section id="problem" class="loss-aversion">
+    <div class="container">
+        <h2 class="section-title">
+            What is EchoKit?
+        </h2>
+        <p class="section-subtitle">
+            AI learning with EchoKit is fun! Voice chat with interesting characters and get first-hand experience with
+            real-time AI. You can also customize every aspect of the hardware and software stack, and run the whole AI
+            agent system in your own home!
+        </p>
+
+        <div class="pain-points">
+            <div class="pain-point animate-on-scroll">
+                <h3>EchoKit DIY</h3>
+                <p>
+                    Get the hardware components (assemble like Lego), AI agent server software, docs and learning
+                    materials in a single package.
+                    <br>
                 </p>
-
-                <div class="pain-points">
-                    <div class="pain-point animate-on-scroll">
-                        <h3>EchoKit DIY</h3>
-                        <p>
-                            Get the hardware components (assemble like Lego), AI agent server software, docs and learning materials in a single package.
-                            <br>
-                        </p>
-                        <a
-                            href="echokit_diy.html"
-                            class="cta-button"
-                            style="
+                <a
+                        href="echokit_diy.html"
+                        class="cta-button"
+                        style="
                                 font-size: 1.2rem;
                                 padding: 20px 30px;
                                 width: max-content;
@@ -918,19 +943,20 @@ <h3>EchoKit DIY</h3>
                                 margin-top: 20px;
                                 display: inline-block;
                             "
-                        >$49 - Details</a>
-                    </div>
+                >$49 - Details</a>
+            </div>
 
-                    <div class="pain-point animate-on-scroll">
-                        <h3>EchoKit Cube</h3>
-                        <p>
-                            The EchoKit Cube is a pre-assembled voice AI device. You will also get the complete AI agent server software, docs and learning materials.
-                            <br>
-                        </p>
-                        <a
-                            href="echokit_cube.html"
-                            class="cta-button"
-                            style="
+            <div class="pain-point animate-on-scroll">
+                <h3>EchoKit Cube</h3>
+                <p>
+                    The EchoKit Cube is a pre-assembled voice AI device. You will also get the complete AI agent server
+                    software, docs and learning materials.
+                    <br>
+                </p>
+                <a
+                        href="echokit_cube.html"
+                        class="cta-button"
+                        style="
                                 font-size: 1.2rem;
                                 padding: 20px 30px;
                                 width: max-content;
@@ -938,19 +964,20 @@ <h3>EchoKit Cube</h3>
                                 margin-top: 20px;
                                 display: inline-block;
                             "
-                        >$49 - Details</a>
-                    </div>
+                >$49 - Details</a>
+            </div>
 
-                    <div class="pain-point animate-on-scroll">
-                        <h3>Fun voice</h3>
-                        <p>
-                            Not ready for the $49 device? Chat with fun AI characters for FREE from your browser! Experiment with and learn voice AI.
-                            <br>
-                        </p>
-                        <a
-                            href="echokit_web.html"
-                            class="cta-button"
-                            style="
+            <div class="pain-point animate-on-scroll">
+                <h3>Fun voice</h3>
+                <p>
+                    Not ready for the $49 device? Chat with fun AI characters for FREE from your browser! Experiment
+                    with and learn voice AI.
+                    <br>
+                </p>
+                <a
+                        href="echokit_web.html"
+                        class="cta-button"
+                        style="
                                 font-size: 1.2rem;
                                 padding: 20px 30px;
                                 width: max-content;
@@ -958,20 +985,21 @@ <h3>Fun voice</h3>
                                 margin-top: 20px;
                                 display: inline-block;
                             "
-                        >FREE trial</a>
-                    </div>
+                >FREE trial</a>
+            </div>
 
-                    <div class="pain-point animate-on-scroll">
-                        <h3>Teachers</h3>
-                        <p>
-                            If you are interested in building an AI lab for your school, you can purchase EchoKit and related course materials in bulk!
-                            <br>
-                        </p>
-                        <a
-                            href="https://forms.gle/MagV8UfLNYYLnCqi6"
-                            target="_blank"
-                            class="cta-button cta-secondary"
-                            style="
+            <div class="pain-point animate-on-scroll">
+                <h3>Teachers</h3>
+                <p>
+                    If you are interested in building an AI lab for your school, you can purchase EchoKit and related
+                    course materials in bulk!
+                    <br>
+                </p>
+                <a
+                        href="https://forms.gle/MagV8UfLNYYLnCqi6"
+                        target="_blank"
+                        class="cta-button cta-secondary"
+                        style="
                                 font-size: 1.2rem;
                                 padding: 20px 30px;
                                 width: max-content;
@@ -979,535 +1007,536 @@ <h3>Teachers</h3>
                                 margin-top: 20px;
                                 display: inline-block;
                             "
-                        >Get in touch</a>
-                    </div>
-
-                </div>
+                >Get in touch</a>
             </div>
-        </section>
-
-        <!-- Benefits Section -->
-        <section id="benefits" class="benefits">
-            <div class="container">
-                <h2 class="section-title">Why you'll love the EchoKit</h2>
-                <p class="section-subtitle">
-                    Cheaper, better, and private realtime voice AI agent in your own house.
-                </p>
 
-                <div class="benefits-grid">
-                    <div class="benefit-card animate-on-scroll">
-                        <h3>
-                            <span class="benefit-icon">🎭</span>Fun voice AI characters
-                        </h3>
-                        <p>
-                            Speak with entertaining and engaging AI personalities right
-                            out of the box. No more boring, robotic responses.
-                        </p>
-                    </div>
+        </div>
+    </div>
+</section>
+
+<!-- Benefits Section -->
+<section id="benefits" class="benefits">
+    <div class="container">
+        <h2 class="section-title">Why you'll love the EchoKit</h2>
+        <p class="section-subtitle">
+            Cheaper, better, and private realtime voice AI agent in your own house.
+        </p>
+
+        <div class="benefits-grid">
+            <div class="benefit-card animate-on-scroll">
+                <h3>
+                    <span class="benefit-icon">🎭</span>Fun voice AI characters
+                </h3>
+                <p>
+                    Speak with entertaining and engaging AI personalities right
+                    out of the box. No more boring, robotic responses.
+                </p>
+            </div>
 
-                    <div class="benefit-card animate-on-scroll">
-                        <h3>
-                            <span class="benefit-icon">🆓</span>Use private AI models for free
-                        </h3>
-                        <p>
-                            Setup and run your own AI models on your computers without any monthly
-                            fees or usage limits. Complete freedom.
-                        </p>
-                    </div>
+            <div class="benefit-card animate-on-scroll">
+                <h3>
+                    <span class="benefit-icon">🆓</span>Use private AI models for free
+                </h3>
+                <p>
+                    Setup and run your own AI models on your computers without any monthly
+                    fees or usage limits. Complete freedom.
+                </p>
+            </div>
 
-                    <div class="benefit-card animate-on-scroll">
-                        <h3>
-                            <span class="benefit-icon">📚</span>Private and proprietary knowledge
-                        </h3>
-                        <p>
-                            Ground your voice AI agent with your own documents, notes,
-                            and knowledge. Create a digital twin!
-                        </p>
-                    </div>
+            <div class="benefit-card animate-on-scroll">
+                <h3>
+                    <span class="benefit-icon">📚</span>Private and proprietary knowledge
+                </h3>
+                <p>
+                    Ground your voice AI agent with your own documents, notes,
+                    and knowledge. Create a digital twin!
+                </p>
+            </div>
 
-                    <div class="benefit-card animate-on-scroll">
-                        <h3>
-                            <span class="benefit-icon">🗣️</span>Speak in any voice
-                        </h3>
-                        <p>
-                            Make the AI agent speak in anyone's voice and style. Bring your favorite people from 
-                            distance or past into your own house!
-                        </p>
-                    </div>
+            <div class="benefit-card animate-on-scroll">
+                <h3>
+                    <span class="benefit-icon">🗣️</span>Speak in any voice
+                </h3>
+                <p>
+                    Make the AI agent speak in anyone's voice and style. Bring your favorite people from
+                    distance or past into your own house!
+                </p>
+            </div>
 
-                    <div class="benefit-card animate-on-scroll">
-                        <h3>
-                            <span class="benefit-icon">🎯</span>Voice commands &amp; actions
-                        </h3>
-                        <p>
-                            Control your environment and send commands across the Internet
-                            through natural voice interactions.
-                        </p>
-                    </div>
+            <div class="benefit-card animate-on-scroll">
+                <h3>
+                    <span class="benefit-icon">🎯</span>Voice commands &amp; actions
+                </h3>
+                <p>
+                    Control your environment and send commands across the Internet
+                    through natural voice interactions.
+                </p>
+            </div>
 
-                    <div class="benefit-card animate-on-scroll">
-                        <h3>
-                            <span class="benefit-icon">🎓</span>Learn by building
-                        </h3>
-                        <p>
-                            Build an end-to-end AI project and understand every
-                            component. Future-proof your job skills.
-                        </p>
-                    </div>
-                </div>
+            <div class="benefit-card animate-on-scroll">
+                <h3>
+                    <span class="benefit-icon">🎓</span>Learn by building
+                </h3>
+                <p>
+                    Build an end-to-end AI project and understand every
+                    component. Future-proof your job skills.
+                </p>
             </div>
-        </section>
-
-        <!-- Features Section -->
-        <section id="features" class="section features">
-            <div class="container">
-                <h2 class="section-title">
-                    Everything you need in one package
-                </h2>
-                <p class="section-subtitle">
-                    Complete full-stack open-source solution from hardware firmware to AI agents to MCP to AI models
+        </div>
+    </div>
+</section>
+
+<!-- Features Section -->
+<section id="features" class="section features">
+    <div class="container">
+        <h2 class="section-title">
+            Everything you need in one package
+        </h2>
+        <p class="section-subtitle">
+            Complete full-stack open-source solution from hardware firmware to AI agents to MCP to AI models
+        </p>
+
+        <div class="features-grid">
+            <div class="feature-card animate-on-scroll">
+                <h3>
+                    <span class="feature-icon">🏗️</span>Full stack open-source
+                </h3>
+                <p>
+                    Complete solution from embedded firmware to AI
+                    inference server. Run everything privately on your
+                    own hardware or use our hosted service - you decide.
                 </p>
+            </div>
 
-                <div class="features-grid">
-                    <div class="feature-card animate-on-scroll">
-                        <h3>
-                            <span class="feature-icon">🏗️</span>Full stack open-source
-                        </h3>
-                        <p>
-                            Complete solution from embedded firmware to AI
-                            inference server. Run everything privately on your
-                            own hardware or use our hosted service - you decide.
-                        </p>
-                    </div>
-
-                    <div class="feature-card animate-on-scroll">
-                        <h3>
-                            <span class="feature-icon">🧠</span>Works with any AI model
-                        </h3>
-                        <p>
-                            Compatible with all major LLMs, voice-to-text, and
-                            TTS models. Choose your preferred AI models or
-                            switch between them seamlessly.
-                        </p>
-                    </div>
+            <div class="feature-card animate-on-scroll">
+                <h3>
+                    <span class="feature-icon">🧠</span>Works with any AI model
+                </h3>
+                <p>
+                    Compatible with all major LLMs, voice-to-text, and
+                    TTS models. Choose your preferred AI models or
+                    switch between them seamlessly.
+                </p>
+            </div>
 
-                    <div class="feature-card animate-on-scroll">
-                        <h3>
-                            <span class="feature-icon">🎵</span>Voice Cloning
-                        </h3>
-                        <p>
-                            Create personalized voice experiences with advanced
-                            voice cloning technology. Make your AI sound exactly
-                            how you want.
-                        </p>
-                    </div>
+            <div class="feature-card animate-on-scroll">
+                <h3>
+                    <span class="feature-icon">🎵</span>Voice Cloning
+                </h3>
+                <p>
+                    Create personalized voice experiences with advanced
+                    voice cloning technology. Make your AI sound exactly
+                    how you want.
+                </p>
+            </div>
 
-                    <div class="feature-card animate-on-scroll">
-                        <h3>
-                            <span class="feature-icon">🔍</span>Agentic Search
-                        </h3>
-                        <p>
-                            Ground your LLMs with personal knowledge bases for accurate and updated
-                            responses that are aligned with your values.
-                        </p>
-                    </div>
+            <div class="feature-card animate-on-scroll">
+                <h3>
+                    <span class="feature-icon">🔍</span>Agentic Search
+                </h3>
+                <p>
+                    Ground your LLMs with personal knowledge bases for accurate and updated
+                    responses that are aligned with your values.
+                </p>
+            </div>
 
-                    <div class="feature-card animate-on-scroll">
-                        <h3><span class="feature-icon">🔧</span>MCP Support</h3>
-                        <p>
-                            Extensible action system with MCP-based tool calls.
-                            Enhance your AI's abilities with custom tools and
-                            integrations.
-                        </p>
-                    </div>
+            <div class="feature-card animate-on-scroll">
+                <h3><span class="feature-icon">🔧</span>MCP Support</h3>
+                <p>
+                    Extensible action system with MCP-based tool calls.
+                    Enhance your AI's abilities with custom tools and
+                    integrations.
+                </p>
+            </div>
 
-                    <div class="feature-card animate-on-scroll">
-                        <h3>
-                            <span class="feature-icon">☁️</span>Flexible deployment
-                        </h3>
-                        <p>
-                            Use hosted services for convenience or run your own
-                            server for complete control. Unlike Big Tech, we
-                            give you the choice.
-                        </p>
-                    </div>
+            <div class="feature-card animate-on-scroll">
+                <h3>
+                    <span class="feature-icon">☁️</span>Flexible deployment
+                </h3>
+                <p>
+                    Use hosted services for convenience or run your own
+                    server for complete control. Unlike Big Tech, we
+                    give you the choice.
+                </p>
+            </div>
 
-                    <div class="feature-card animate-on-scroll">
-                        <h3>
-                            <span class="feature-icon">🦀</span>Rust Performance
-                        </h3>
-                        <p>
-                            Built entirely in Rust for maximum safety,
-                            performance, and reliability. Memory-safe code with
-                            blazing-fast execution.
-                        </p>
-                    </div>
+            <div class="feature-card animate-on-scroll">
+                <h3>
+                    <span class="feature-icon">🦀</span>Rust Performance
+                </h3>
+                <p>
+                    Built entirely in Rust for maximum safety,
+                    performance, and reliability. Memory-safe code with
+                    blazing-fast execution.
+                </p>
+            </div>
 
-                    <div class="feature-card animate-on-scroll">
-                        <h3>
-                            <span class="feature-icon">🧑‍🏫</span>Designed for learning
-                        </h3>
-                        <p>
-                            Full documentation and tutorials that teach you how to build and customize
-                            your own AI system on your own computers. You will learn AI from inside out.
-                        </p>
+            <div class="feature-card animate-on-scroll">
+                <h3>
+                    <span class="feature-icon">🧑‍🏫</span>Designed for learning
+                </h3>
+                <p>
+                    Full documentation and tutorials that teach you how to build and customize
+                    your own AI system on your own computers. You will learn AI from inside out.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Open Source Section -->
+<section id="opensource" class="opensource">
+    <div class="container">
+        <h2 class="section-title">Built on Open Source Foundation</h2>
+        <p class="section-subtitle">
+            Community-driven development. Learn how it works, fork it for your own needs, and contribute back!
+        </p>
+
+        <div class="opensource-grid">
+            <div class="repo-card animate-on-scroll">
+                <div class="repo-header">
+                    <h3>
+                        <span class="repo-icon">🚀</span>EchoKit Server
+                    </h3>
+                    <div class="tech-stack">
+                        <span class="tech-tag">Rust</span>
+                        <span class="tech-tag">AI</span>
                     </div>
                 </div>
-            </div>
-        </section>
-
-        <!-- Open Source Section -->
-        <section id="opensource" class="opensource">
-            <div class="container">
-                <h2 class="section-title">Built on Open Source Foundation</h2>
-                <p class="section-subtitle">
-                    Community-driven development. Learn how it works, fork it for your own needs, and contribute back!
+                <p>
+                    WebSocket-based AI agent server with VAD, voice recognition and synthesis, LLM integration, and MCP
+                    support.
+                    The coordinator of your voice agent system.
                 </p>
+                <a href="https://github.com/second-state/echokit_server"
+                   target="_blank"
+                   class="repo-link">
+                    <span class="github-icon">⚡</span>
+                    Source code on GitHub
+                </a>
+            </div>
 
-                <div class="opensource-grid">
-                    <div class="repo-card animate-on-scroll">
-                        <div class="repo-header">
-                            <h3>
-                                <span class="repo-icon">🚀</span>EchoKit Server
-                            </h3>
-                            <div class="tech-stack">
-                                <span class="tech-tag">Rust</span>
-                                <span class="tech-tag">AI</span>
-                            </div>
-                        </div>
-                        <p>
-                            WebSocket-based AI agent server with VAD, voice recognition and synthesis, LLM integration, and MCP support. 
-                            The coordinator of your voice agent system.
-                        </p>
-                        <a href="https://github.com/second-state/echokit_server" 
-                           target="_blank" 
-                           class="repo-link">
-                            <span class="github-icon">⚡</span>
-                            Source code on GitHub
-                        </a>
-                    </div>
-
-                    <div class="repo-card animate-on-scroll">
-                        <div class="repo-header">
-                            <h3>
-                                <span class="repo-icon">📦</span>EchoKit Device
-                            </h3>
-                            <div class="tech-stack">
-                                <span class="tech-tag">Rust, ESP32, RISC-V</span>
-                                <span class="tech-tag">Embedded</span>
-                            </div>
-                        </div>
-                        <p>
-                            Hardware firmware written in embedded Rust for the EchoKit device. 
-                            Handles audio I/O, buttons, display, WiFi, Bluetooth and device management.
-                        </p>
-                        <a href="https://github.com/second-state/echokit_box" 
-                           target="_blank" 
-                           class="repo-link">
-                            <span class="github-icon">⚡</span>
-                            Source code on GitHub
-                        </a>
-                    </div>
-
-                    <div class="repo-card animate-on-scroll">
-                        <div class="repo-header">
-                            <h3>
-                                <span class="repo-icon">🎙️</span>Silero VAD Server
-                            </h3>
-                            <div class="tech-stack">
-                                <span class="tech-tag">Rust, VAD, Silero</span>
-                                <span class="tech-tag">ML</span>
-                            </div>
-                        </div>
-                        <p>
-                            Voice Activity Detection service using SOTA VAD models. 
-                            Efficiently detects when the user is speaking for optimal interaction.
-                        </p>
-                        <a href="https://github.com/second-state/silero_vad_server" 
-                           target="_blank" 
-                           class="repo-link">
-                            <span class="github-icon">⚡</span>
-                            Source code on GitHub
-                        </a>
-                    </div>
-
-                    <div class="repo-card animate-on-scroll">
-                        <div class="repo-header">
-                            <h3>
-                                <span class="repo-icon">🗣️</span>GSV TTS
-                            </h3>
-                            <div class="tech-stack">
-                                <span class="tech-tag">Rust, GPT-SoVITS, torch</span>
-                                <span class="tech-tag">TTS</span>
-                            </div>
-                        </div>
-                        <p>
-                            High-quality and streaming Text-to-Speech service with voice cloning capabilities. 
-                            Generate natural-sounding speech in any voice you want.
-                        </p>
-                        <a href="https://github.com/second-state/gsv_tts" 
-                           target="_blank" 
-                           class="repo-link">
-                            <span class="github-icon">⚡</span>
-                            Source code on GitHub
-                        </a>
+            <div class="repo-card animate-on-scroll">
+                <div class="repo-header">
+                    <h3>
+                        <span class="repo-icon">📦</span>EchoKit Device
+                    </h3>
+                    <div class="tech-stack">
+                        <span class="tech-tag">Rust, ESP32, RISC-V</span>
+                        <span class="tech-tag">Embedded</span>
                     </div>
                 </div>
-            </div>
-        </section>
-
-        <!-- Process Section -->
-        <section id="process" class="process">
-            <div class="container">
-                <h2 class="section-title">Get started in 3 simple steps</h2>
-                <p class="section-subtitle">
-                    From unboxing to chatting with your AI in minutes
+                <p>
+                    Hardware firmware written in embedded Rust for the EchoKit device.
+                    Handles audio I/O, buttons, display, WiFi, Bluetooth and device management.
                 </p>
+                <a href="https://github.com/second-state/echokit_box"
+                   target="_blank"
+                   class="repo-link">
+                    <span class="github-icon">⚡</span>
+                    Source code on GitHub
+                </a>
+            </div>
 
-                <div class="process-steps">
-                    <div class="process-step animate-on-scroll">
-                        <div class="step-number">1</div>
-                        <h3>Power Up &amp; Connect</h3>
-                        <p>
-                            Simply power up your EchoKit device and connect it
-                            to your WiFi network. No complex setup required.
-                        </p>
-                    </div>
-
-                    <div class="process-step animate-on-scroll">
-                        <div class="step-number">2</div>
-                        <h3>Start Chatting!</h3>
-                        <p>
-                            Begin talking to your AI assistant immediately. It
-                            works out of the box with powerful default models.
-                        </p>
+            <div class="repo-card animate-on-scroll">
+                <div class="repo-header">
+                    <h3>
+                        <span class="repo-icon">🎙️</span>Silero VAD Server
+                    </h3>
+                    <div class="tech-stack">
+                        <span class="tech-tag">Rust, VAD, Silero</span>
+                        <span class="tech-tag">ML</span>
                     </div>
+                </div>
+                <p>
+                    Voice Activity Detection service using SOTA VAD models.
+                    Efficiently detects when the user is speaking for optimal interaction.
+                </p>
+                <a href="https://github.com/second-state/silero_vad_server"
+                   target="_blank"
+                   class="repo-link">
+                    <span class="github-icon">⚡</span>
+                    Source code on GitHub
+                </a>
+            </div>
 
-                    <div class="process-step animate-on-scroll">
-                        <div class="step-number">3</div>
-                        <h3>Customize Your AI</h3>
-                        <p>
-                            Set up your own AI server, add custom knowledge,
-                            clone voices, and build advanced capabilities.
-                        </p>
+            <div class="repo-card animate-on-scroll">
+                <div class="repo-header">
+                    <h3>
+                        <span class="repo-icon">🗣️</span>GSV TTS
+                    </h3>
+                    <div class="tech-stack">
+                        <span class="tech-tag">Rust, GPT-SoVITS, torch</span>
+                        <span class="tech-tag">TTS</span>
                     </div>
                 </div>
+                <p>
+                    High-quality and streaming Text-to-Speech service with voice cloning capabilities.
+                    Generate natural-sounding speech in any voice you want.
+                </p>
+                <a href="https://github.com/second-state/gsv_tts"
+                   target="_blank"
+                   class="repo-link">
+                    <span class="github-icon">⚡</span>
+                    Source code on GitHub
+                </a>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Process Section -->
+<section id="process" class="process">
+    <div class="container">
+        <h2 class="section-title">Get started in 3 simple steps</h2>
+        <p class="section-subtitle">
+            From unboxing to chatting with your AI in minutes
+        </p>
+
+        <div class="process-steps">
+            <div class="process-step animate-on-scroll">
+                <div class="step-number">1</div>
+                <h3>Power Up &amp; Connect</h3>
+                <p>
+                    Simply power up your EchoKit device and connect it
+                    to your WiFi network. No complex setup required.
+                </p>
             </div>
-        </section>
 
-        <section id="preorder" class="preorder">
-            <div class="container">
-                <h2 class="preorder-title">Your trusted partner</h2>
-                <p class="preorder-subtitle">
-                    EchoKit is used by students and teachers in colleges, high schools and middle schools all over the world.
+            <div class="process-step animate-on-scroll">
+                <div class="step-number">2</div>
+                <h3>Start Chatting!</h3>
+                <p>
+                    Begin talking to your AI assistant immediately. It
+                    works out of the box with powerful default models.
                 </p>
             </div>
-        </section>
-
-        <!--
-        <section id="preorder" class="preorder">
-            <div class="container">
-                <h2 class="preorder-title">Buy EchoKit</h2>
-                <p class="preorder-subtitle">
-                    We will manually assemble, flash, and test each device toolkit before shipping. Expect delivery in up to 3 weeks for international orders. Thank you for your patience.
+
+            <div class="process-step animate-on-scroll">
+                <div class="step-number">3</div>
+                <h3>Customize Your AI</h3>
+                <p>
+                    Set up your own AI server, add custom knowledge,
+                    clone voices, and build advanced capabilities.
                 </p>
-                <div class="cta-buttons">
-                    <a
-                        href="https://echokit.dev/spec.html"
-                        target="_blank"
-                        class="cta-button cta-secondary"
-                        style="
-                            font-size: 1.2rem;
-                            padding: 20px 50px;
-                            display: inline-block;
-                        "
-                        >Spec →</a
-                    >
-                    <a
-                        href="https://buy.stripe.com/5kQcN66z93h924Kam963K04"
-                        target="_blank"
-                        class="cta-button"
-                        style="
-                            font-size: 1.2rem;
-                            padding: 20px 50px;
-                            display: inline-block;
-                        "
-                        >Buy EchoKit →</a
-                    >
-                    <a
-                        href="https://buy.stripe.com/5kQ28scXx2d56l09i563K03"
-                        target="_blank"
-                        class="cta-button"
-                        style="
-                            font-size: 1.2rem;
-                            padding: 20px 50px;
-                            display: inline-block;
-                        "
-                        >EchoKit + Book →</a
-                    >
-                </div>
             </div>
-        </section>
-        -->
-        
-        <footer
-            style="
+        </div>
+    </div>
+</section>
+
+<section id="preorder" class="preorder">
+    <div class="container">
+        <h2 class="preorder-title">Your trusted partner</h2>
+        <p class="preorder-subtitle">
+            EchoKit is used by students and teachers in colleges, high schools and middle schools all over the world.
+        </p>
+    </div>
+</section>
+
+<!--
+<section id="preorder" class="preorder">
+    <div class="container">
+        <h2 class="preorder-title">Buy EchoKit</h2>
+        <p class="preorder-subtitle">
+            We will manually assemble, flash, and test each device toolkit before shipping. Expect delivery in up to 3 weeks for international orders. Thank you for your patience.
+        </p>
+        <div class="cta-buttons">
+            <a
+                href="https://echokit.dev/spec.html"
+                target="_blank"
+                class="cta-button cta-secondary"
+                style="
+                    font-size: 1.2rem;
+                    padding: 20px 50px;
+                    display: inline-block;
+                "
+                >Spec →</a
+            >
+            <a
+                href="https://buy.stripe.com/5kQcN66z93h924Kam963K04"
+                target="_blank"
+                class="cta-button"
+                style="
+                    font-size: 1.2rem;
+                    padding: 20px 50px;
+                    display: inline-block;
+                "
+                >Buy EchoKit →</a
+            >
+            <a
+                href="https://buy.stripe.com/5kQ28scXx2d56l09i563K03"
+                target="_blank"
+                class="cta-button"
+                style="
+                    font-size: 1.2rem;
+                    padding: 20px 50px;
+                    display: inline-block;
+                "
+                >EchoKit + Book →</a
+            >
+        </div>
+    </div>
+</section>
+-->
+
+<footer
+        style="
                 padding: 40px 0;
                 background: rgba(0, 0, 0, 0.3);
                 border-top: 1px solid rgba(147, 51, 234, 0.2);
                 text-align: center;
             "
-        >
-            <div class="container">
-                <p style="opacity: 0.8">
-                    &copy; 2025 EchoKit. Open source under GPL3 License.
-                </p>
-            </div>
-        </footer>
-
-        <script>
-            // Smooth scrolling for navigation links
-            document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
-                anchor.addEventListener("click", function (e) {
-                    e.preventDefault();
-                    const target = document.querySelector(
-                        this.getAttribute("href"),
-                    );
-                    if (target) {
-                        target.scrollIntoView({
-                            behavior: "smooth",
-                            block: "start",
-                        });
-                    }
-                });
-            });
-
-            // Header scroll effect
-            window.addEventListener("scroll", () => {
-                const header = document.querySelector("header");
-                if (window.scrollY > 100) {
-                    header.style.background = "rgba(10, 10, 31, 0.15)";
-                    header.style.backdropFilter = "blur(20px)";
-                } else {
-                    header.style.background = "rgba(10, 10, 31, 0.6)";
-                    header.style.backdropFilter = "blur(20px)";
-                }
-            });
-
-            // Animate elements on scroll
-            const observerOptions = {
-                threshold: 0.1,
-                rootMargin: "0px 0px -50px 0px",
-            };
-
-            const observer = new IntersectionObserver((entries) => {
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting) {
-                        entry.target.style.opacity = "1";
-                        entry.target.style.transform = "translateY(0)";
-                    }
-                });
-            }, observerOptions);
-
-            document
-                .querySelectorAll(
-                    ".feature-card, .benefit-card, .pain-point, .process-step, .repo-card",
-                )
-                .forEach((el) => {
-                    el.style.opacity = "0";
-                    el.style.transform = "translateY(20px)";
-                    el.style.transition =
-                        "opacity 0.6s ease, transform 0.6s ease";
-                    observer.observe(el);
-                });
+>
+    <div class="container">
+        <p style="opacity: 0.8">
+            &copy; 2025 EchoKit. Open source under GPL3 License.
+        </p>
+    </div>
+</footer>
 
-            // Video carousel functionality
-            let currentVideoIndex = 0;
-            const videos = document.querySelectorAll('.carousel-video');
-            const indicators = document.querySelectorAll('.indicator');
-            const videoCarousel = document.getElementById('videoCarousel');
-
-            function showVideo(index) {
-                videos.forEach((video, i) => {
-                    if (i === index) {
-                        video.classList.add('active');
-                    } else {
-                        video.classList.remove('active');
-                    }
-                });
-
-                indicators.forEach((indicator, i) => {
-                    if (i === index) {
-                        indicator.classList.add('active');
-                    } else {
-                        indicator.classList.remove('active');
-                    }
+<script>
+    // Smooth scrolling for navigation links
+    document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+        anchor.addEventListener("click", function (e) {
+            e.preventDefault();
+            const target = document.querySelector(
+                this.getAttribute("href"),
+            );
+            if (target) {
+                target.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
                 });
             }
-
-            function nextVideo() {
-                const videoPlayer = document.getElementById('local-player');
-                if (videoPlayer) {
-                    const activeVideo = document.querySelector('.carousel-video.active');
-                    activeVideo.style.display = '';
-                    console.log("Removing video player");
-                    console.log(activeVideo);
-                    document.getElementById('play-overlay').style.display = '';
-                    videoPlayer.pause();
-                    videoPlayer.remove();
-                }
-                currentVideoIndex = (currentVideoIndex + 1) % videos.length;
-                showVideo(currentVideoIndex);
-            }
-
-            // Auto-advance carousel every 3 seconds
-            let carouselInterval = setInterval(nextVideo, 3000);
-
-            // Manual carousel control
-            indicators.forEach((indicator) => {
-                indicator.addEventListener('click', () => {
-                    const videoPlayer = document.getElementById('local-player');
-                    if (videoPlayer) {
-                        const activeVideo = document.querySelector('.carousel-video.active');
-                        activeVideo.style.display = '';
-                        document.getElementById('play-overlay').style.display = '';
-                        videoPlayer.pause();
-                        videoPlayer.remove();
-                    }
-                    currentVideoIndex = parseInt(indicator.dataset.index);
-                    showVideo(currentVideoIndex);
-                    clearInterval(carouselInterval);
-                });
-            });
-
-            // Play local video inline when videoCarousel is clicked
-            videoCarousel.addEventListener('click', () => {
+        });
+    });
+
+    // Header scroll effect
+    window.addEventListener("scroll", () => {
+        const header = document.querySelector("header");
+        if (window.scrollY > 100) {
+            header.style.background = "rgba(10, 10, 31, 0.15)";
+            header.style.backdropFilter = "blur(20px)";
+        } else {
+            header.style.background = "rgba(10, 10, 31, 0.6)";
+            header.style.backdropFilter = "blur(20px)";
+        }
+    });
+
+    // Animate elements on scroll
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: "0px 0px -50px 0px",
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = "1";
+                entry.target.style.transform = "translateY(0)";
+            }
+        });
+    }, observerOptions);
+
+    document
+        .querySelectorAll(
+            ".feature-card, .benefit-card, .pain-point, .process-step, .repo-card",
+        )
+        .forEach((el) => {
+            el.style.opacity = "0";
+            el.style.transform = "translateY(20px)";
+            el.style.transition =
+                "opacity 0.6s ease, transform 0.6s ease";
+            observer.observe(el);
+        });
+
+    // Video carousel functionality
+    let currentVideoIndex = 0;
+    const videos = document.querySelectorAll('.carousel-video');
+    const indicators = document.querySelectorAll('.indicator');
+    const videoCarousel = document.getElementById('videoCarousel');
+
+    function showVideo(index) {
+        videos.forEach((video, i) => {
+            if (i === index) {
+                video.classList.add('active');
+            } else {
+                video.classList.remove('active');
+            }
+        });
+
+        indicators.forEach((indicator, i) => {
+            if (i === index) {
+                indicator.classList.add('active');
+            } else {
+                indicator.classList.remove('active');
+            }
+        });
+    }
+
+    function nextVideo() {
+        const videoPlayer = document.getElementById('local-player');
+        if (videoPlayer) {
+            const activeVideo = document.querySelector('.carousel-video.active');
+            activeVideo.style.display = '';
+            console.log("Removing video player");
+            console.log(activeVideo);
+            document.getElementById('play-overlay').style.display = '';
+            videoPlayer.pause();
+            videoPlayer.remove();
+        }
+        currentVideoIndex = (currentVideoIndex + 1) % videos.length;
+        showVideo(currentVideoIndex);
+    }
+
+    // Auto-advance carousel every 3 seconds
+    let carouselInterval = setInterval(nextVideo, 3000);
+
+    // Manual carousel control
+    indicators.forEach((indicator) => {
+        indicator.addEventListener('click', () => {
+            const videoPlayer = document.getElementById('local-player');
+            if (videoPlayer) {
                 const activeVideo = document.querySelector('.carousel-video.active');
-                const videoId = activeVideo.dataset.videoId;
-                const videoSrc = `media/${videoId}.mp4`
-                const rect = activeVideo.getBoundingClientRect();
-                // 隐藏当前图片
-                activeVideo.style.display = 'none';
-                // Create or switch to the video element
-                let videoPlayer = document.getElementById('local-player');
-                if (!videoPlayer) {
-                    videoPlayer = document.createElement('video');
-                    videoPlayer.id = 'local-player';
-                    videoPlayer.width = rect.width;
-                    videoPlayer.height = rect.height;
-                    videoPlayer.style.border = 'none';
-                    document.getElementById('play-overlay').style.display = 'none';
-                    videoPlayer.controls = true;
-                    videoPlayer.autoplay = true;
-                    videoCarousel.appendChild(videoPlayer);
-                }
-                videoPlayer.src = videoSrc;
-                videoPlayer.play();
-                videoPlayer.onended = () => {
-                    carouselInterval = setInterval(nextVideo, 3000);
-                };
-                clearInterval(carouselInterval);
-            });
-        </script>
-    </body>
+                activeVideo.style.display = '';
+                document.getElementById('play-overlay').style.display = '';
+                videoPlayer.pause();
+                videoPlayer.remove();
+            }
+            currentVideoIndex = parseInt(indicator.dataset.index);
+            showVideo(currentVideoIndex);
+            clearInterval(carouselInterval);
+        });
+    });
+
+    // Play local video inline when videoCarousel is clicked
+    videoCarousel.addEventListener('click', () => {
+        const activeVideo = document.querySelector('.carousel-video.active');
+        const videoId = activeVideo.dataset.videoId;
+        const videoSrc = `media/${videoId}.mp4`
+        const rect = activeVideo.getBoundingClientRect();
+        // 隐藏当前图片
+        activeVideo.style.display = 'none';
+        // Create or switch to the video element
+        let videoPlayer = document.getElementById('local-player');
+        if (!videoPlayer) {
+            videoPlayer = document.createElement('video');
+            videoPlayer.id = 'local-player';
+            videoPlayer.width = rect.width;
+            videoPlayer.height = rect.height;
+            videoPlayer.style.border = 'none';
+            document.getElementById('play-overlay').style.display = 'none';
+            videoPlayer.controls = true;
+            videoPlayer.autoplay = true;
+            videoCarousel.appendChild(videoPlayer);
+        }
+        videoPlayer.src = videoSrc;
+        videoPlayer.play();
+        videoPlayer.onended = () => {
+            carouselInterval = setInterval(nextVideo, 3000);
+        };
+        clearInterval(carouselInterval);
+    });
+</script>
+</body>
 </html>
diff --git a/media/4DYYT1AUZ9c-305.webp b/media/4DYYT1AUZ9c-305.webp
new file mode 100644
index 0000000..d0a98a9
Binary files /dev/null and b/media/4DYYT1AUZ9c-305.webp differ
diff --git a/media/4DYYT1AUZ9c-542.webp b/media/4DYYT1AUZ9c-542.webp
new file mode 100644
index 0000000..ab8b542
Binary files /dev/null and b/media/4DYYT1AUZ9c-542.webp differ
diff --git a/media/4DYYT1AUZ9c-720.webp b/media/4DYYT1AUZ9c-720.webp
new file mode 100644
index 0000000..d060b03
Binary files /dev/null and b/media/4DYYT1AUZ9c-720.webp differ
diff --git a/media/4DYYT1AUZ9c.jpg b/media/4DYYT1AUZ9c.jpg
deleted file mode 100644
index 524d172..0000000
Binary files a/media/4DYYT1AUZ9c.jpg and /dev/null differ
diff --git a/media/4DYYT1AUZ9c.webp b/media/4DYYT1AUZ9c.webp
new file mode 100644
index 0000000..cc305d3
Binary files /dev/null and b/media/4DYYT1AUZ9c.webp differ
diff --git a/media/XroT7a0DLkw-305.webp b/media/XroT7a0DLkw-305.webp
new file mode 100644
index 0000000..1644360
Binary files /dev/null and b/media/XroT7a0DLkw-305.webp differ
diff --git a/media/XroT7a0DLkw-542.webp b/media/XroT7a0DLkw-542.webp
new file mode 100644
index 0000000..dc0db4d
Binary files /dev/null and b/media/XroT7a0DLkw-542.webp differ
diff --git a/media/XroT7a0DLkw-720.webp b/media/XroT7a0DLkw-720.webp
new file mode 100644
index 0000000..e028fb9
Binary files /dev/null and b/media/XroT7a0DLkw-720.webp differ
diff --git a/media/XroT7a0DLkw.jpg b/media/XroT7a0DLkw.jpg
deleted file mode 100644
index 26a35b9..0000000
Binary files a/media/XroT7a0DLkw.jpg and /dev/null differ
diff --git a/media/XroT7a0DLkw.webp b/media/XroT7a0DLkw.webp
new file mode 100644
index 0000000..0446f0b
Binary files /dev/null and b/media/XroT7a0DLkw.webp differ
diff --git a/media/bu_frrOB1F4-305.webp b/media/bu_frrOB1F4-305.webp
new file mode 100644
index 0000000..57e3b9e
Binary files /dev/null and b/media/bu_frrOB1F4-305.webp differ
diff --git a/media/bu_frrOB1F4-542.webp b/media/bu_frrOB1F4-542.webp
new file mode 100644
index 0000000..7962229
Binary files /dev/null and b/media/bu_frrOB1F4-542.webp differ
diff --git a/media/bu_frrOB1F4-720.webp b/media/bu_frrOB1F4-720.webp
new file mode 100644
index 0000000..f58f1fd
Binary files /dev/null and b/media/bu_frrOB1F4-720.webp differ
diff --git a/media/bu_frrOB1F4.jpg b/media/bu_frrOB1F4.jpg
deleted file mode 100644
index 7a0bb7c..0000000
Binary files a/media/bu_frrOB1F4.jpg and /dev/null differ
diff --git a/media/bu_frrOB1F4.webp b/media/bu_frrOB1F4.webp
new file mode 100644
index 0000000..2095f7f
Binary files /dev/null and b/media/bu_frrOB1F4.webp differ
diff --git a/media/echokit-cube-01-305.webp b/media/echokit-cube-01-305.webp
new file mode 100644
index 0000000..6b471cc
Binary files /dev/null and b/media/echokit-cube-01-305.webp differ
diff --git a/media/echokit-cube-01-542.webp b/media/echokit-cube-01-542.webp
new file mode 100644
index 0000000..83ed279
Binary files /dev/null and b/media/echokit-cube-01-542.webp differ
diff --git a/media/echokit-cube-01-720.webp b/media/echokit-cube-01-720.webp
new file mode 100644
index 0000000..322b406
Binary files /dev/null and b/media/echokit-cube-01-720.webp differ
diff --git a/media/echokit-cube-01.jpg b/media/echokit-cube-01.jpg
deleted file mode 100644
index 76ede7b..0000000
Binary files a/media/echokit-cube-01.jpg and /dev/null differ
diff --git a/media/echokit-cube-01.png b/media/echokit-cube-01.png
deleted file mode 100644
index 8d1bfe7..0000000
Binary files a/media/echokit-cube-01.png and /dev/null differ
diff --git a/media/echokit-cube-01.webp b/media/echokit-cube-01.webp
new file mode 100644
index 0000000..2b1eb75
Binary files /dev/null and b/media/echokit-cube-01.webp differ
diff --git a/media/echokit-cube-02-1280.webp b/media/echokit-cube-02-1280.webp
new file mode 100644
index 0000000..f860887
Binary files /dev/null and b/media/echokit-cube-02-1280.webp differ
diff --git a/media/echokit-cube-02-305.webp b/media/echokit-cube-02-305.webp
new file mode 100644
index 0000000..fed5bcd
Binary files /dev/null and b/media/echokit-cube-02-305.webp differ
diff --git a/media/echokit-cube-02-542.webp b/media/echokit-cube-02-542.webp
new file mode 100644
index 0000000..4934ecc
Binary files /dev/null and b/media/echokit-cube-02-542.webp differ
diff --git a/media/echokit-cube-02-720.webp b/media/echokit-cube-02-720.webp
new file mode 100644
index 0000000..fd6b531
Binary files /dev/null and b/media/echokit-cube-02-720.webp differ
diff --git a/media/echokit-cube-02.png b/media/echokit-cube-02.png
deleted file mode 100644
index 2a200b4..0000000
Binary files a/media/echokit-cube-02.png and /dev/null differ
diff --git a/media/echokit-cube-02.webp b/media/echokit-cube-02.webp
new file mode 100644
index 0000000..1825e27
Binary files /dev/null and b/media/echokit-cube-02.webp differ
diff --git a/media/echokit-diy-01-1280.webp b/media/echokit-diy-01-1280.webp
new file mode 100644
index 0000000..41f9f9a
Binary files /dev/null and b/media/echokit-diy-01-1280.webp differ
diff --git a/media/echokit-diy-01-305.webp b/media/echokit-diy-01-305.webp
new file mode 100644
index 0000000..8dad5ca
Binary files /dev/null and b/media/echokit-diy-01-305.webp differ
diff --git a/media/echokit-diy-01-542.webp b/media/echokit-diy-01-542.webp
new file mode 100644
index 0000000..5ccbd27
Binary files /dev/null and b/media/echokit-diy-01-542.webp differ
diff --git a/media/echokit-diy-01-720.webp b/media/echokit-diy-01-720.webp
new file mode 100644
index 0000000..feeaf86
Binary files /dev/null and b/media/echokit-diy-01-720.webp differ
diff --git a/media/echokit-diy-01.webp b/media/echokit-diy-01.webp
new file mode 100644
index 0000000..86ba9c0
Binary files /dev/null and b/media/echokit-diy-01.webp differ
diff --git a/media/echokit-diy-02-1280.webp b/media/echokit-diy-02-1280.webp
new file mode 100644
index 0000000..5f1ce6e
Binary files /dev/null and b/media/echokit-diy-02-1280.webp differ
diff --git a/media/echokit-diy-02-305.webp b/media/echokit-diy-02-305.webp
new file mode 100644
index 0000000..55d5cc7
Binary files /dev/null and b/media/echokit-diy-02-305.webp differ
diff --git a/media/echokit-diy-02-542.webp b/media/echokit-diy-02-542.webp
new file mode 100644
index 0000000..68b57f9
Binary files /dev/null and b/media/echokit-diy-02-542.webp differ
diff --git a/media/echokit-diy-02-720.webp b/media/echokit-diy-02-720.webp
new file mode 100644
index 0000000..c3e22af
Binary files /dev/null and b/media/echokit-diy-02-720.webp differ
diff --git a/media/echokit-diy-02.png b/media/echokit-diy-02.png
deleted file mode 100644
index 3e7bbd9..0000000
Binary files a/media/echokit-diy-02.png and /dev/null differ
diff --git a/media/echokit-diy-02.webp b/media/echokit-diy-02.webp
new file mode 100644
index 0000000..2db53c9
Binary files /dev/null and b/media/echokit-diy-02.webp differ
diff --git a/media/echokit-diy-03-305.webp b/media/echokit-diy-03-305.webp
new file mode 100644
index 0000000..ce3d504
Binary files /dev/null and b/media/echokit-diy-03-305.webp differ
diff --git a/media/echokit-diy-03-542.webp b/media/echokit-diy-03-542.webp
new file mode 100644
index 0000000..a188f15
Binary files /dev/null and b/media/echokit-diy-03-542.webp differ
diff --git a/media/echokit-diy-03-720.webp b/media/echokit-diy-03-720.webp
new file mode 100644
index 0000000..49051bb
Binary files /dev/null and b/media/echokit-diy-03-720.webp differ
diff --git a/media/echokit-diy-03.png b/media/echokit-diy-03.png
deleted file mode 100644
index 74f8778..0000000
Binary files a/media/echokit-diy-03.png and /dev/null differ
diff --git a/media/echokit-diy-03.webp b/media/echokit-diy-03.webp
new file mode 100644
index 0000000..859a899
Binary files /dev/null and b/media/echokit-diy-03.webp differ
diff --git a/media/echokit-diy-04-305.webp b/media/echokit-diy-04-305.webp
new file mode 100644
index 0000000..8031fd5
Binary files /dev/null and b/media/echokit-diy-04-305.webp differ
diff --git a/media/echokit-diy-04.jpg b/media/echokit-diy-04.jpg
deleted file mode 100644
index b496fc6..0000000
Binary files a/media/echokit-diy-04.jpg and /dev/null differ
diff --git a/media/echokit-diy-04.png b/media/echokit-diy-04.png
deleted file mode 100644
index b24ff97..0000000
Binary files a/media/echokit-diy-04.png and /dev/null differ
diff --git a/media/echokit-diy-04.webp b/media/echokit-diy-04.webp
new file mode 100644
index 0000000..80f56b8
Binary files /dev/null and b/media/echokit-diy-04.webp differ
diff --git a/media/echokit-diy-05-1280.webp b/media/echokit-diy-05-1280.webp
new file mode 100644
index 0000000..f860887
Binary files /dev/null and b/media/echokit-diy-05-1280.webp differ
diff --git a/media/echokit-diy-05-305.webp b/media/echokit-diy-05-305.webp
new file mode 100644
index 0000000..fed5bcd
Binary files /dev/null and b/media/echokit-diy-05-305.webp differ
diff --git a/media/echokit-diy-05-542.webp b/media/echokit-diy-05-542.webp
new file mode 100644
index 0000000..4934ecc
Binary files /dev/null and b/media/echokit-diy-05-542.webp differ
diff --git a/media/echokit-diy-05-720.webp b/media/echokit-diy-05-720.webp
new file mode 100644
index 0000000..fd6b531
Binary files /dev/null and b/media/echokit-diy-05-720.webp differ
diff --git a/media/echokit-diy-05.png b/media/echokit-diy-05.png
deleted file mode 100644
index 2a200b4..0000000
Binary files a/media/echokit-diy-05.png and /dev/null differ
diff --git a/media/echokit-diy-05.webp b/media/echokit-diy-05.webp
new file mode 100644
index 0000000..1825e27
Binary files /dev/null and b/media/echokit-diy-05.webp differ
diff --git a/media/echokit-web-01-1280.webp b/media/echokit-web-01-1280.webp
new file mode 100644
index 0000000..e99b5eb
Binary files /dev/null and b/media/echokit-web-01-1280.webp differ
diff --git a/media/echokit-web-01-305.webp b/media/echokit-web-01-305.webp
new file mode 100644
index 0000000..0cde762
Binary files /dev/null and b/media/echokit-web-01-305.webp differ
diff --git a/media/echokit-web-01-542.webp b/media/echokit-web-01-542.webp
new file mode 100644
index 0000000..ca6ea63
Binary files /dev/null and b/media/echokit-web-01-542.webp differ
diff --git a/media/echokit-web-01-720.webp b/media/echokit-web-01-720.webp
new file mode 100644
index 0000000..630bf11
Binary files /dev/null and b/media/echokit-web-01-720.webp differ
diff --git a/media/echokit-web-01.jpg b/media/echokit-web-01.jpg
deleted file mode 100644
index d8be7c7..0000000
Binary files a/media/echokit-web-01.jpg and /dev/null differ
diff --git a/media/echokit-web-01.png b/media/echokit-web-01.png
deleted file mode 100644
index 439a15b..0000000
Binary files a/media/echokit-web-01.png and /dev/null differ
diff --git a/media/echokit-web-01.webp b/media/echokit-web-01.webp
new file mode 100644
index 0000000..c1b8caf
Binary files /dev/null and b/media/echokit-web-01.webp differ
diff --git a/media/echokit-web-02-1280.webp b/media/echokit-web-02-1280.webp
new file mode 100644
index 0000000..6bc1df3
Binary files /dev/null and b/media/echokit-web-02-1280.webp differ
diff --git a/media/echokit-web-02-305.webp b/media/echokit-web-02-305.webp
new file mode 100644
index 0000000..a17a382
Binary files /dev/null and b/media/echokit-web-02-305.webp differ
diff --git a/media/echokit-web-02-542.webp b/media/echokit-web-02-542.webp
new file mode 100644
index 0000000..1e2e007
Binary files /dev/null and b/media/echokit-web-02-542.webp differ
diff --git a/media/echokit-web-02-720.webp b/media/echokit-web-02-720.webp
new file mode 100644
index 0000000..e250fc3
Binary files /dev/null and b/media/echokit-web-02-720.webp differ
diff --git a/media/echokit-web-02.jpg b/media/echokit-web-02.jpg
deleted file mode 100644
index 994fac7..0000000
Binary files a/media/echokit-web-02.jpg and /dev/null differ
diff --git a/media/echokit-web-02.png b/media/echokit-web-02.png
deleted file mode 100644
index 91ccc84..0000000
Binary files a/media/echokit-web-02.png and /dev/null differ
diff --git a/media/echokit-web-02.webp b/media/echokit-web-02.webp
new file mode 100644
index 0000000..9b31f73
Binary files /dev/null and b/media/echokit-web-02.webp differ
diff --git a/media/echokit-web-03-1280.webp b/media/echokit-web-03-1280.webp
new file mode 100644
index 0000000..294dbf0
Binary files /dev/null and b/media/echokit-web-03-1280.webp differ
diff --git a/media/echokit-web-03-305.webp b/media/echokit-web-03-305.webp
new file mode 100644
index 0000000..28d1069
Binary files /dev/null and b/media/echokit-web-03-305.webp differ
diff --git a/media/echokit-web-03-542.webp b/media/echokit-web-03-542.webp
new file mode 100644
index 0000000..48f7282
Binary files /dev/null and b/media/echokit-web-03-542.webp differ
diff --git a/media/echokit-web-03-720.webp b/media/echokit-web-03-720.webp
new file mode 100644
index 0000000..f2d944e
Binary files /dev/null and b/media/echokit-web-03-720.webp differ
diff --git a/media/echokit-web-03.jpg b/media/echokit-web-03.jpg
deleted file mode 100644
index 1424a1c..0000000
Binary files a/media/echokit-web-03.jpg and /dev/null differ
diff --git a/media/echokit-web-03.png b/media/echokit-web-03.png
deleted file mode 100644
index 0eb8530..0000000
Binary files a/media/echokit-web-03.png and /dev/null differ
diff --git a/media/echokit-web-03.webp b/media/echokit-web-03.webp
new file mode 100644
index 0000000..17e45c9
Binary files /dev/null and b/media/echokit-web-03.webp differ
diff --git a/media/echokit-web-04-1280.webp b/media/echokit-web-04-1280.webp
new file mode 100644
index 0000000..1614e62
Binary files /dev/null and b/media/echokit-web-04-1280.webp differ
diff --git a/media/echokit-web-04-305.webp b/media/echokit-web-04-305.webp
new file mode 100644
index 0000000..7fbcebd
Binary files /dev/null and b/media/echokit-web-04-305.webp differ
diff --git a/media/echokit-web-04-542.webp b/media/echokit-web-04-542.webp
new file mode 100644
index 0000000..5d031cd
Binary files /dev/null and b/media/echokit-web-04-542.webp differ
diff --git a/media/echokit-web-04-720.webp b/media/echokit-web-04-720.webp
new file mode 100644
index 0000000..1dc36ee
Binary files /dev/null and b/media/echokit-web-04-720.webp differ
diff --git a/media/echokit-web-04.jpg b/media/echokit-web-04.jpg
deleted file mode 100644
index 090c53c..0000000
Binary files a/media/echokit-web-04.jpg and /dev/null differ
diff --git a/media/echokit-web-04.png b/media/echokit-web-04.png
deleted file mode 100644
index e7f4f13..0000000
Binary files a/media/echokit-web-04.png and /dev/null differ
diff --git a/media/echokit-web-04.webp b/media/echokit-web-04.webp
new file mode 100644
index 0000000..d71b5a2
Binary files /dev/null and b/media/echokit-web-04.webp differ
diff --git a/media/resizeImg.py b/media/resizeImg.py
new file mode 100644
index 0000000..0d46589
--- /dev/null
+++ b/media/resizeImg.py
@@ -0,0 +1,54 @@
+import os
+from PIL import Image
+
+def generate_responsive_webp(input_folder, sizes=(305, 542, 720, 1280), quality=80):
+    """
+    根据已有 WebP 图片批量生成不同尺寸版本，用于 <img srcset>。
+
+    参数:
+        input_folder (str): 存放 WebP 图片的文件夹
+        sizes (tuple): 要生成的宽度列表
+        quality (int): 输出 WebP 质量（0-100）
+    """
+    if not os.path.exists(input_folder):
+        print(f"❌ 输入文件夹不存在: {input_folder}")
+        return
+
+    for filename in os.listdir(input_folder):
+        if not filename.lower().endswith(".webp"):
+            continue
+
+        input_path = os.path.join(input_folder, filename)
+        name, ext = os.path.splitext(filename)
+
+        try:
+            with Image.open(input_path) as img:
+                width, height = img.size
+
+                for target_width in sizes:
+                    if width <= target_width:
+                        continue  # 小图不放大
+
+                    ratio = target_width / width
+                    target_height = int(height * ratio)
+                    output_filename = f"{name}-{target_width}.webp"
+                    output_path = os.path.join(input_folder, output_filename)
+
+                    if os.path.exists(output_path):
+                        print(f"⚠️ 已存在，跳过: {output_filename}")
+                        continue
+
+                    resized_img = img.resize((target_width, target_height), Image.LANCZOS)
+                    resized_img.save(output_path, "WEBP", quality=quality, method=6)
+                    print(f"✅ 生成: {output_filename}")
+
+                # 生成 srcset 字符串
+                srcset = ",\n    ".join([f"{name}-{w}.webp {w}w" for w in sizes if w < width])
+                print(f"\n📜 <img src=\"{filename}\" srcset=\"\n    {srcset}\n  \" alt=\"...\">\n")
+
+        except Exception as e:
+            print(f"❌ 处理失败: {filename}，原因: {e}")
+
+
+if __name__ == "__main__":
+    generate_responsive_webp("./", sizes=(305, 542, 720, 1280), quality=80)
\ No newline at end of file
diff --git a/media/trans_image.py b/media/trans_image.py
new file mode 100644
index 0000000..bf7a2c4
--- /dev/null
+++ b/media/trans_image.py
@@ -0,0 +1,52 @@
+import os
+from PIL import Image
+
+def convert_images_to_webp(input_folder, output_folder=None, quality=80):
+    """
+    批量转换文件夹中的 PNG / JPG 为 WebP 格式。
+    
+    参数:
+        input_folder (str): 输入文件夹路径
+        output_folder (str): 输出文件夹路径（默认同输入）
+        quality (int): 压缩质量（0-100，推荐 70-85）
+    """
+    if not os.path.exists(input_folder):
+        print(f"❌ 输入文件夹不存在: {input_folder}")
+        return
+    
+    if output_folder is None:
+        output_folder = input_folder
+    else:
+        os.makedirs(output_folder, exist_ok=True)
+    
+    supported_exts = (".png", ".jpg", ".jpeg")
+    count = 0
+    
+    for filename in os.listdir(input_folder):
+        if filename.lower().endswith(supported_exts):
+            input_path = os.path.join(input_folder, filename)
+            output_name = os.path.splitext(filename)[0] + ".webp"
+            output_path = os.path.join(output_folder, output_name)
+            
+            # 跳过已存在的文件
+            if os.path.exists(output_path):
+                print(f"⚠️ 已存在，跳过: {output_name}")
+                continue
+            
+            try:
+                with Image.open(input_path) as img:
+                    # 转换为 RGB 避免 Alpha 通道导致体积变大
+                    if img.mode in ("RGBA", "LA"):
+                        img = img.convert("RGB")
+                    
+                    img.save(output_path, "WEBP", quality=quality, method=6)
+                    count += 1
+                    print(f"✅ 转换成功: {filename} → {output_name}")
+            except Exception as e:
+                print(f"❌ 转换失败: {filename}，原因: {e}")
+    
+    print(f"\n🎉 转换完成！共转换 {count} 张图片。")
+
+# 示例调用：
+if __name__ == "__main__":
+    convert_images_to_webp("./", quality=80)
\ No newline at end of file
diff --git a/media/video-1280.webp b/media/video-1280.webp
new file mode 100644
index 0000000..78eff1b
Binary files /dev/null and b/media/video-1280.webp differ
diff --git a/media/video-305.webp b/media/video-305.webp
new file mode 100644
index 0000000..fc6f444
Binary files /dev/null and b/media/video-305.webp differ
diff --git a/media/video-542.webp b/media/video-542.webp
new file mode 100644
index 0000000..4f396aa
Binary files /dev/null and b/media/video-542.webp differ
diff --git a/media/video-720.webp b/media/video-720.webp
new file mode 100644
index 0000000..e4e4f49
Binary files /dev/null and b/media/video-720.webp differ
diff --git a/media/video.png b/media/video.png
deleted file mode 100644
index 98ee9f0..0000000
Binary files a/media/video.png and /dev/null differ
diff --git a/media/video.webp b/media/video.webp
new file mode 100644
index 0000000..b31cb22
Binary files /dev/null and b/media/video.webp differ