feat: add "Coming Soon" badge to demo items with corresponding styles.

index.html

@@ -132,6 +132,7 @@
                 <i data-lucide="play" class="demo-play-icon"></i>
               </div>
               <div class="demo-duration">2:30</div>
+              <div class="demo-badge">Coming Soon</div>
             </div>
             <div class="demo-info">
               <h3>Voice Conversation & Medication Logging</h3>
@@ -148,6 +149,7 @@
                 <i data-lucide="play" class="demo-play-icon"></i>
               </div>
               <div class="demo-duration">1:45</div>
+              <div class="demo-badge">Coming Soon</div>
             </div>
             <div class="demo-info">
               <h3>Headache Tracking & Generative UI</h3>
@@ -163,6 +165,7 @@
                 <i data-lucide="play" class="demo-play-icon"></i>
               </div>
               <div class="demo-duration">3:00</div>
+              <div class="demo-badge">Coming Soon</div>
             </div>
             <div class="demo-info">
               <h3>Onboarding, Reports & Robot Expressions</h3>

style.css

@@ -602,6 +602,21 @@ code {
   border-radius: 4px;
   z-index: 1;
 }
+.demo-badge {
+  position: absolute;
+  top: 10px; right: 12px;
+  background: rgba(179, 156, 208, 0.25);
+  border: 1px solid rgba(179, 156, 208, 0.5);
+  color: var(--color-cta);
+  font-family: var(--font-heading);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 3px 10px;
+  border-radius: 20px;
+  z-index: 1;
+}
 .demo-info {
   padding: 16px 18px;
 }