feat: Add a demo video link to the UI and enhance styling for the workflow overview, main cards, and overall page container.

app.py

@@ -219,7 +219,7 @@ def create_gradio_interface() -> gr.Blocks:
                     """,
                     elem_id="header-title",
                 )
-            with gr.Column(scale=4):
+            with gr.Column(scale=4, elem_id="workflow-overview-card"):
                 gr.Markdown(
                     """
                     **Workflow Overview**
@@ -230,6 +230,10 @@ def create_gradio_interface() -> gr.Blocks:
                     4. Dashboard + Tutor help you interpret and fix issues  
                     """,
                 )
+        with gr.Row(elem_id="demo-video-row"):
+            gr.HTML(
+                """<div style="font-size: 1.1rem; margin: 0; padding: 0.2rem 0;">📺 <strong>New to VAPT Agent?</strong> Watch our <a href="https://youtu.be/wFgW_o48pw8?si=ywttNSKFVvViPdl5" target="_blank" style="color: #0066cc; text-decoration: none; font-weight: 500;">DEMO VIDEO</a> to learn how to use this tool effectively.</div>"""
+            )
 
         # --- Main two-column layout ---
         with gr.Row():

vapt_styles.css

@@ -267,4 +267,44 @@ body {
 #severity-col .gr-plot {
     max-width: 480px;
     width: 100%;
+}
+
+/* Demo video row with divider */
+#demo-video-row {
+    margin-top: 0 !important;
+    margin-bottom: 0.75rem !important;
+    padding: 0.75rem 0 0.85rem 0 !important;
+    background: linear-gradient(to right, #e0f2fe, #dbeafe, #e0f2fe) !important;
+    border-radius: 8px;
+    border-bottom: 2px solid #e5e7eb;
+}
+
+#demo-video-row>div {
+    padding: 0 !important;
+}
+
+/* Workflow Overview card styling */
+#workflow-overview-card {
+    background: #f9fafb !important;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 16px 18px;
+    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
+}
+
+/* Add left accent border to main cards */
+#config-card {
+    border-left: 4px solid #3b82f6 !important;
+}
+
+#results-card {
+    border-left: 4px solid #ea580c !important;
+}
+
+/* Page frame - subtle border and elevated shadow */
+.gradio-container {
+    border: 1px solid #d1d5db;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05);
+    border-radius: 16px;
+    background: #ffffff !important;
 }