add diagram

index.html

@@ -121,6 +121,11 @@
       font-family: 'Telegraf', sans-serif;
       font-size: 1.2rem;
     }
+    .hero-diagram img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
 
     /* wizard */
     main { 
@@ -425,6 +430,9 @@
         might still be human-written or AI-generated without that specific mark.
       </p>
     </div>
+    <div class="hero-diagram">
+      <img src="visual.png" alt="Workflow diagram showing 6 steps: 1) Generate keys in browser, 2) Encrypt text provided locally, 3) Send encrypted text to server, 4) Server performs watermark detection on encrypted data, 5) Return encrypted result to browser, 6) Decrypt result locally. The diagram shows the user/browser on the left and server on the right with arrows indicating data flow.">
+    </div>
   </header>
 
   <!-- Wizard Steps -->