WEBSITE: Added demo video

Author: PredictabilityAtScale

website/index.html

@@ -98,6 +98,27 @@ <h1>Centralize AI behavior without leaving your codebase.</h1>
         <pre><code>npm install promptopskit</code></pre>
       </section>
 
+      <section id="demo" class="container section section-demo">
+        <div class="demo-copy">
+          <p class="eyebrow">See it working</p>
+          <h2>Watch the PromptOpsKit demo</h2>
+          <p class="section-intro">
+            A quick walkthrough of how PromptOpsKit structures prompts, shared instructions,
+            and provider-specific rendering inside a normal codebase.
+          </p>
+        </div>
+        <div class="video-frame">
+          <iframe
+            src="https://www.youtube-nocookie.com/embed/U7W_Uv-Ly0M"
+            title="PromptOpsKit demo video"
+            loading="lazy"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerpolicy="strict-origin-when-cross-origin"
+            allowfullscreen
+          ></iframe>
+        </div>
+      </section>
+
       <!-- ─── THE PROBLEM ─── -->
       <section id="why" class="container section">
         <h2>Your prompts are already in Git. They're just not managed.</h2>

website/styles.css

@@ -29,6 +29,7 @@ body {
 .site-header {
   position: sticky;
   top: 0;
+  z-index: 30;
   background: rgba(255, 255, 255, 0.96);
   border-bottom: 1px solid var(--line);
   backdrop-filter: blur(6px);
@@ -91,6 +92,33 @@ nav a:hover,
   padding: 5rem 0 3rem;
 }
 
+.section-demo {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.demo-copy {
+  margin-bottom: 1.25rem;
+}
+
+.video-frame {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background:
+    radial-gradient(circle at top left, rgba(15, 23, 42, 0.08), transparent 35%),
+    #0b1220;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
+  aspect-ratio: 16 / 9;
+}
+
+.video-frame iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
 .eyebrow {
   margin: 0;
   font-size: 0.9rem;