diff --git a/index.html b/index.html
index 6b4103b..b948356 100644
--- a/index.html
+++ b/index.html
@@ -445,7 +445,179 @@
         }
 
         /* ══════════════════════════════════════════════════════════
-           SPEEDRUN (How It Works)
+           VIDEO SLIDER (Speed Run)
+           ══════════════════════════════════════════════════════════ */
+        .video-slider-wrapper {
+            position: relative;
+            max-width: 960px;
+            margin: 0 auto;
+        }
+
+        .video-slider {
+            display: flex;
+            gap: 20px;
+            overflow-x: auto;
+            scroll-snap-type: x mandatory;
+            -webkit-overflow-scrolling: touch;
+            scrollbar-width: none;
+            padding: 8px 4px;
+        }
+        .video-slider::-webkit-scrollbar {
+            display: none;
+        }
+
+        .video-slide {
+            flex: 0 0 calc((100% - 40px) / 3);
+            min-width: 260px;
+            scroll-snap-align: start;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-card);
+            overflow: hidden;
+            transition: border-color 0.2s, transform 0.2s;
+        }
+        .video-slide:hover {
+            border-color: var(--border-hi);
+            transform: translateY(-4px);
+        }
+
+        .video-slide a {
+            text-decoration: none;
+            color: inherit;
+            display: block;
+        }
+        .video-slide a:hover {
+            text-decoration: none;
+        }
+
+        .video-thumb {
+            position: relative;
+            width: 100%;
+            aspect-ratio: 16 / 9;
+            background-size: cover;
+            background-position: center;
+            background-color: var(--bg-inner);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .video-thumb .play-btn {
+            width: 54px;
+            height: 54px;
+            border-radius: 50%;
+            background: rgba(0, 0, 0, 0.7);
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s, transform 0.2s;
+            backdrop-filter: blur(4px);
+        }
+        .video-slide:hover .play-btn {
+            background: var(--accent);
+            border-color: var(--accent);
+            transform: scale(1.08);
+        }
+        .video-thumb .play-btn svg {
+            width: 20px;
+            height: 20px;
+            fill: #fff;
+            margin-left: 2px;
+        }
+
+        .video-info {
+            padding: 14px 16px 18px;
+        }
+        .video-info h4 {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--text);
+            margin-bottom: 4px;
+            line-height: 1.4;
+        }
+        .video-info .video-desc {
+            font-size: 12px;
+            color: var(--text-muted);
+            line-height: 1.4;
+        }
+
+        .slider-arrow {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 10;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border: 1px solid var(--border);
+            background: var(--bg-card);
+            color: var(--text);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: background 0.15s, border-color 0.15s;
+            opacity: 0;
+            pointer-events: none;
+        }
+        .video-slider-wrapper:hover .slider-arrow {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        .slider-arrow:hover {
+            background: var(--bg-hover);
+            border-color: var(--accent);
+        }
+        .slider-arrow-prev {
+            left: -20px;
+        }
+        .slider-arrow-next {
+            right: -20px;
+        }
+
+        .slider-dots {
+            display: flex;
+            justify-content: center;
+            gap: 8px;
+            margin-top: 24px;
+        }
+        .slider-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            border: none;
+            background: var(--border);
+            cursor: pointer;
+            transition: background 0.2s, transform 0.2s;
+            padding: 0;
+        }
+        .slider-dot.active {
+            background: var(--accent);
+            transform: scale(1.3);
+        }
+        .slider-dot:hover {
+            background: var(--text-muted);
+        }
+
+        @media (max-width: 768px) {
+            .video-slide {
+                flex: 0 0 calc((100% - 20px) / 2);
+                min-width: 0;
+            }
+            .slider-arrow {
+                display: none;
+            }
+        }
+        @media (max-width: 480px) {
+            .video-slide {
+                flex: 0 0 85%;
+            }
+        }
+
+        /* ══════════════════════════════════════════════════════════
+           SPEEDRUN (How It Works) — kept for reference
            ══════════════════════════════════════════════════════════ */
         .steps {
             display: grid;
@@ -1222,43 +1394,130 @@
                 Just pick your agent, pay, and prompt.
             </p>
 
-            <div class="steps">
-                <div class="step-card">
-                    <div class="step-number">01</div>
-                    <div class="step-icon">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-                            <circle cx="8.5" cy="7" r="4"/>
-                            <polyline points="17 11 19 13 23 9"/>
-                        </svg>
+            <div class="video-slider-wrapper">
+                <button class="slider-arrow slider-arrow-prev" onclick="slideSpeedrun(-1)" aria-label="Previous">‹</button>
+                <div class="video-slider" id="speedrunSlider">
+                    <div class="video-slide">
+                        <a href="https://www.youtube.com/watch?v=iyxQ6Xz1Ngw" target="_blank" rel="noopener">
+                            <div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/iyxQ6Xz1Ngw/hqdefault.jpg')">
+                                <div class="play-btn">
+                                    <svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
+                                </div>
+                            </div>
+                            <div class="video-info">
+                                <h4>Speed Run Example 1</h4>
+                                <div class="video-desc">Watch how fast you can go from zero to a working agent.</div>
+                            </div>
+                        </a>
                     </div>
-                    <h3>1. Sign Up &amp; Choose</h3>
-                    <p>Enter your email, pick your agent (Hermes or OpenClaw), and choose your region. Complete the Stripe payment — takes under 2 minutes.</p>
-                </div>
 
-                <div class="step-card">
-                    <div class="step-number">02</div>
-                    <div class="step-icon">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
-                        </svg>
+                    <div class="video-slide">
+                        <a href="https://www.youtube.com/watch?v=QQEgIo4Juxg" target="_blank" rel="noopener">
+                            <div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/QQEgIo4Juxg/hqdefault.jpg')">
+                                <div class="play-btn">
+                                    <svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
+                                </div>
+                            </div>
+                            <div class="video-info">
+                                <h4>Speed Run Example 2</h4>
+                                <div class="video-desc">Another demo of the Derez.ai speed-run workflow.</div>
+                            </div>
+                        </a>
                     </div>
-                    <h3>2. Configure Your Prompt</h3>
-                    <p>Tell your agent who it is and what it should do. Use our built-in skill library or write custom instructions. Name your agent something memorable.</p>
-                </div>
 
-                <div class="step-card">
-                    <div class="step-number">03</div>
-                    <div class="step-icon">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polygon points="12 2 2 7 12 12 22 7 12 2"/>
-                            <polyline points="2 17 12 22 22 17"/>
-                        </svg>
+                    <div class="video-slide">
+                        <a href="https://www.youtube.com/watch?v=gb5TlGw6Uks" target="_blank" rel="noopener">
+                            <div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/gb5TlGw6Uks/hqdefault.jpg')">
+                                <div class="play-btn">
+                                    <svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
+                                </div>
+                            </div>
+                            <div class="video-info">
+                                <h4>Speed Run Example 3</h4>
+                                <div class="video-desc">See the full pipeline from signup to deployment.</div>
+                            </div>
+                        </a>
+                    </div>
+
+                    <div class="video-slide">
+                        <a href="https://www.youtube.com/watch?v=XoitaexiCi0" target="_blank" rel="noopener">
+                            <div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/XoitaexiCi0/hqdefault.jpg')">
+                                <div class="play-btn">
+                                    <svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
+                                </div>
+                            </div>
+                            <div class="video-info">
+                                <h4>Speed Run Example 4</h4>
+                                <div class="video-desc">Agent configuration and deployment in minutes.</div>
+                            </div>
+                        </a>
+                    </div>
+
+                    <div class="video-slide">
+                        <a href="https://www.youtube.com/watch?v=02Mw6P9ZH84" target="_blank" rel="noopener">
+                            <div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/02Mw6P9ZH84/hqdefault.jpg')">
+                                <div class="play-btn">
+                                    <svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
+                                </div>
+                            </div>
+                            <div class="video-info">
+                                <h4>Speed Run Example 5</h4>
+                                <div class="video-desc">Another real-time speed run on Derez.ai.</div>
+                            </div>
+                        </a>
                     </div>
-                    <h3>3. Deploy &amp; Use</h3>
-                    <p>Your agent is provisioned on a dedicated Linux instance in seconds. SSH in, open the dashboard, or talk to it directly. Speed-run complete.</p>
                 </div>
+                <button class="slider-arrow slider-arrow-next" onclick="slideSpeedrun(1)" aria-label="Next">›</button>
+                <div class="slider-dots" id="speedrunDots"></div>
             </div>
+
+            <script>
+            (function() {
+                const slider = document.getElementById('speedrunSlider');
+                const dotsContainer = document.getElementById('speedrunDots');
+                if (!slider || !dotsContainer) return;
+                const slides = slider.querySelectorAll('.video-slide');
+                const total = slides.length;
+                if (total === 0) return;
+
+                for (let i = 0; i < total; i++) {
+                    const dot = document.createElement('button');
+                    dot.className = 'slider-dot' + (i === 0 ? ' active' : '');
+                    dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
+                    dot.onclick = function() {
+                        slides[i].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+                    };
+                    dotsContainer.appendChild(dot);
+                }
+
+                function updateDots() {
+                    const threshold = 120;
+                    let activeIdx = 0;
+                    for (let i = 0; i < total; i++) {
+                        const rect = slides[i].getBoundingClientRect();
+                        const center = rect.left + rect.width / 2;
+                        const sl = slider.getBoundingClientRect();
+                        const slCenter = sl.left + sl.width / 2;
+                        if (Math.abs(center - slCenter) < threshold) {
+                            activeIdx = i;
+                        }
+                    }
+                    dotsContainer.querySelectorAll('.slider-dot').forEach((d, i) => {
+                        d.classList.toggle('active', i === activeIdx);
+                    });
+                }
+
+                slider.addEventListener('scroll', updateDots);
+                updateDots();
+            })();
+
+            function slideSpeedrun(dir) {
+                const slider = document.getElementById('speedrunSlider');
+                if (!slider) return;
+                const slideWidth = slider.querySelector('.video-slide').offsetWidth + 20;
+                slider.scrollBy({ left: slideWidth * dir, behavior: 'smooth' });
+            }
+            </script>
         </div>
     </section>