diff --git a/index.html b/index.html
index ae88393..038768a 100644
--- a/index.html
+++ b/index.html
@@ -505,6 +505,21 @@ <h1 class="fade-up delay-1">
         <span class="card-badge coming-soon"><span class="badge-dot"></span>Coming soon</span>
       </div>
 
+      <!-- Before & After — coming soon -->
+      <div class="card card--coming-soon fade-up delay-4" aria-disabled="true">
+        <div class="card-icon">⚡</div>
+        <div class="card-header">
+          <span class="card-title">Before &amp; After</span>
+          <span class="card-arrow">
+            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M2 12L12 2M12 2H5M12 2V9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+        </div>
+        <p class="card-description">See the difference. Compare legacy integration architectures with an event-driven approach — side by side, industry by industry.</p>
+        <span class="card-badge coming-soon"><span class="badge-dot"></span>Coming soon</span>
+      </div>
+
     </div>
   </main>