Upload 2 files

app.py

@@ -0,0 +1,537 @@
+
+
+
+
+
+import gradio as gr
+import os
+import base64
+
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+css_path = os.path.join(BASE_DIR, "style1.css")
+
+with open(css_path, "r") as f:
+    css = f.read()
+
+logo_path = os.path.join(BASE_DIR, "public/linkedin.png") 
+email_path = os.path.join(BASE_DIR, "public/email_icon.png") 
+
+def embed_image_base64(path):
+    with open(path, "rb") as f:
+        return "data:image/svg;base64," + base64.b64encode(f.read()).decode()
+
+linkedin_logo = embed_image_base64(logo_path)
+email_logo = embed_image_base64(email_path)
+# logo_b64 = embed_image_base64(logo_path)
+
+AGENT_URLS = {
+    "delivery": "https://huggingface.co/spaces/shuv25/optimize_delivery_system",
+    "agent2": "https://huggingface.co/spaces/Tamannathakur/SPARKNOVA",
+    "agent3": "https://huggingface.co/spaces/Tamannathakur/SparkMart",
+    "agent4": "https://huggingface.co/spaces/SparkBrainsAI/AI_Trade_Analyzer"
+}
+
+# ---------------------------
+# PREMIUM CARD COMPONENT
+# ---------------------------
+def create_agent_card(title, description, features, url, color, status="active"):
+
+    if status == "active":
+        status_badge = """
+            <span style='
+                border:2px solid #168c44;
+                color:#168c44;
+                padding:4px 12px;
+                border-radius:12px;
+                font-size:0.85em;
+                font-weight:600;
+            '>
+            • ACTIVE
+            </span>
+        """
+    else:
+        status_badge = """
+            <span style='
+                background:#6b7280;
+                color:white;
+                padding:4px 12px;
+                border-radius:12px;
+                font-size:0.85em;
+                font-weight:600;
+            '>
+            COMING SOON
+            </span>
+        """
+
+    features_html = "".join([f"<li style='margin:6px 0; color:#4b5563;'>{feature}</li>" for feature in features])
+
+    if status == "active":
+        button = f"""
+            <a href="{url}" target="_blank" rel="noopener noreferrer"
+            style='
+                display:block;
+                text-align:center;
+                padding:14px;
+                background:#204C6C;
+                color:white;
+                text-decoration:none;
+                border-radius:16px;
+                font-weight:600;
+                font-size:1em;
+                transition:0.25s ease;
+            '
+            onmouseover="this.style.transform='scale(1.04)'; this.style.opacity='0.92';"
+            onmouseout="this.style.transform='scale(1)'; this.style.opacity='1';">
+                Launch Agent
+            </a>
+        """
+    else:
+        button = """
+            <div style='
+                text-align:center;
+                padding:14px;
+                background:#e5e7eb;
+                color:#6b7280;
+                border-radius:10px;
+                font-weight:600;
+                font-size:1em;
+                cursor:not-allowed;
+            '>
+                Coming Soon
+            </div>
+        """
+
+    return f"""
+        <div style='
+            padding:28px;
+            margin-top: 20px;
+            background:white;
+            min-height:400px;
+            display:flex;   
+            width:100%;
+            flex-direction:column;
+            justify-content:space-between;
+            box-shadow:0px 6px 16px rgba(0,0,0,0.07);
+            border-top:4px solid #204C6C;
+        '>
+            <div>
+                <div style='display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;'>
+                    <h2 style='margin:0; color:#1f2937; font-size:1.45em;'>{title}</h2>
+                    {status_badge}
+                </div>
+
+                <p style='color:#6b7280; margin:10px 0 18px 0; line-height:1.6; font-size:0.95em;'>
+                    {description}
+                </p>
+
+                <div style='background:#f9fafb; padding:16px; border-radius:10px;'>
+                    <h4 style='margin:0 0 0px 0; color:#374151; font-size:0.9em; font-weight:600;'>
+                        KEY FEATURES:
+                    </h4>
+                    <ul style='margin:0; padding-left:18px;'>
+                        {features_html}
+                    </ul>
+                </div>
+            </div>
+
+            <div style='margin-top:20px;'>{button}</div>
+        </div>
+    """
+
+
+# ------------------------------------
+# MAIN UI (ENHANCED LAYOUT)
+# ------------------------------------
+
+with gr.Blocks(
+    theme=gr.themes.Soft(primary_hue="green"),
+    title="Spark-Agent System",
+    # css="""
+    #     body, html {
+    #         margin:0;
+    #         padding:0;
+    #         width:100%;
+    #         overflow-x:hidden;
+    #         font-family: Georgia, serif;
+    #         background-color: #17203D;            
+    #     }
+
+    #     .gradio-container {
+    #         max-width: 1900px !important;
+    #         # background-color: #17203D;            
+    #         margin:auto !important;
+    #     }
+    # """
+    css=css  
+   
+) as demo:
+
+    # HEADER SECTION -----------------------------------------------------
+    gr.HTML(f"""
+<div style='
+    padding:40px 30px;
+    background:
+        radial-gradient(circle at 20% 10%, rgba(255,255,255,0.25), transparent 55%),
+        radial-gradient(circle at 85% 20%, rgba(45,135,255,0.22), transparent 70%),
+        linear-gradient(135deg, #0e1a2b, #0f1032, #03011a);
+    color:white;
+    border-bottom-left-radius:40px;
+    border-bottom-right-radius:40px;
+    box-shadow:0 50px 90px -20px rgba(0,0,0,0.6);
+
+    display:flex;
+    justify-content:space-;
+    align-items:center;
+    width:100%;
+'>
+
+    <!-- LEFT: LOGO -->
+    <div style="flex:1; display:flex; justify-content:flex-start; width: 100px;">
+        <img src="{''}" width="120" style="margin-bottom:70px; opacity:0.95;">
+    </div>
+
+    <!-- CENTER: TITLE -->
+    <div style="flex:1; display:flex; justify-content:center;">
+        <h1 style='
+            margin:0;
+            font-size:2.5em;
+            font-weight:800;
+            letter-spacing:1px;
+            background:linear-gradient(to right, #fff 20%, #dce4ff 40%, #cedcff 60%);
+            -webkit-background-clip:text;
+            color:transparent;
+        '>
+            Spark-Agent System
+        </h1>
+    </div>
+
+    <div style="flex:1;"></div>
+
+</div>
+
+<div style='text-align: center;'>
+ <p style='margin-top:20px; font-size:1.30em; opacity:0.92; color: white;'>
+        Specialized AI Agents Crafted for Precision & Performance
+    </p>
+
+    <p style='margin-top:5px; font-size:1.05em; opacity:0.85; color: white;'>
+        Task-focused intelligence working together to deliver accurate, efficient, and context-aware results across different workflows.
+    </p>
+</div>
+""")
+
+
+    # --------------------------------------
+    # AVAILABLE AGENTS TITLE
+    # --------------------------------------
+    gr.HTML("""
+        <div style='
+            font-size:2.2em;
+            text-align:center;
+            font-weight:800;
+            margin:60px 0 60px;
+            color: white;
+        '>
+            Available Agents
+            <hr style='margin:0px;'/>
+        </div>
+    """)
+
+    # AGENT GRID ---------------------------------------------------------
+    with gr.Row(equal_height=True):
+
+        with gr.Column(scale=1):
+            gr.HTML(create_agent_card(
+                title="SparkDelivery",
+                description="AI-powered logistics assistant that plans optimal routes, analyzes traffic and weather conditions, estimates delivery costs, and optimizes multi-stop deliveries with intelligent vehicle recommendations.",
+                features=[
+                    "Interactive route planning",
+                    "Multi-destination optimization",
+                    "Real-time traffic analysis",
+                    "Weather forecasting",
+                    "Smart cost estimation"
+                ],
+                url=AGENT_URLS["delivery"],
+                color="#164d8c"
+            ))
+
+        with gr.Column(scale=1):
+            gr.HTML(create_agent_card(
+                title="SparkNova",
+                description="SparkNova is an AI-powered data analysis tool that automatically explores, visualizes, and generates insights from uploaded CSV datasets through natural language queries efficiently.",
+                features=[
+                    "AI-driven Query Understanding",
+                    "Smart Visualizations",
+                    "Insight Generation",
+                    "Time-Efficient Analysis",
+                    "Decision Support"
+                ],
+                url=AGENT_URLS["agent2"],
+                color="#168c44"
+            ))
+
+        with gr.Column(scale=1):
+            gr.HTML(create_agent_card(
+                title="SparkMart AI",
+                description="""SparkMart AI is a chatbot for e-commerce customer service, automating order tracking, resolving complaints, and offering personalized and specific product recommendations to customers.""",
+                features=[
+                    "Order Management",
+                    "Personalized Recommendations",
+                    "Complaint Resolution",
+                    "Conversational State",
+                    "Query Assistance"
+                ],
+                url=AGENT_URLS["agent3"],
+                color="#168c44"
+            ))
+        
+        with gr.Column(scale=1):
+            gr.HTML(create_agent_card(
+                title="SparkTrade Analyzer",
+                description="""SparkTrade Analyzer is an AI-powered trading intelligence agent that analyzes stock market queries, evaluates technical indicators, and generates actionable intraday insights to support smarter trading decisions.""",
+                features=[
+                    "AI-driven Stock Analysis",
+                    "Technical Indicator Evaluation",
+                    "Intraday Trade Signals",
+                    "Risk & Confidence Scoring",
+                    "Visual Price Trend Insights"
+                ],
+                url=AGENT_URLS["agent4"],
+                color="#168c44"
+            ))
+        
+        with gr.Column(scale=1):
+            gr.HTML('')
+        
+        with gr.Column(scale=1):
+            gr.HTML('')
+
+    gr.HTML("""
+
+    <div style='
+    margin-top: 80px;
+    padding: 35px;
+    background: linear-gradient(135deg, #e8f5ff 0%, #f3fff6 100%);
+    border-radius: 18px;
+    border-left: 6px solid #204c6c;
+    box-shadow: 0px 8px 25px rgba(0,0,0,0.08);
+'>
+
+    <h3 style='
+        margin:0 0 25px 0;
+        font-size:1.8em;
+        font-weight:800;
+        color:#0e1a2b;
+        letter-spacing:0.5px;
+    '>
+        System Status
+    </h3>
+
+    <div style='
+        display:flex;
+        gap:22px;
+        flex-wrap:wrap;
+    '>
+
+        <!-- ACTIVE AGENTS -->
+        <div style='
+            flex:1;
+            min-width:230px;
+            text-align:center;
+            padding:25px;
+            background:rgba(255,255,255,0.75);
+            border-radius:16px;
+            border:1px solid rgba(32,76,108,0.18);
+            backdrop-filter:blur(6px);
+            box-shadow:0 4px 14px rgba(32,76,108,0.15);
+            transition:0.3s ease;
+        '
+        onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 10px 28px rgba(32,76,108,0.25)';"
+        onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 14px rgba(32,76,108,0.15)';"
+        >
+            <div style='font-size:2.4em; color:#204c6c; font-weight:700;'>4</div>
+            <div style='color:#334155; font-size:1em; margin-top:6px;'>Active Agents</div>
+        </div>
+
+        <!-- IN DEVELOPMENT -->
+        <div style='
+            flex:1;
+            min-width:230px;
+            text-align:center;
+            padding:25px;
+            background:rgba(255,255,255,0.75);
+            border-radius:16px;
+            border:1px solid rgba(32,76,108,0.18);
+            backdrop-filter:blur(6px);
+            box-shadow:0 4px 14px rgba(32,76,108,0.15);
+            transition:0.3s ease;
+        '
+        onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 10px 28px rgba(32,76,108,0.25)';"
+        onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 14px rgba(32,76,108,0.15)';"
+        >
+            <div style='font-size:2.4em; color:#204c6c; font-weight:700;'>0</div>
+            <div style='color:#334155; font-size:1em; margin-top:6px;'>In Development</div>
+        </div>
+
+        <!-- TOTAL AGENTS -->
+        <div style='
+            flex:1;
+            min-width:230px;
+            text-align:center;
+            padding:25px;
+            background:rgba(255,255,255,0.75);
+            border-radius:16px;
+            border:1px solid rgba(32,76,108,0.18);
+            backdrop-filter:blur(6px);
+            box-shadow:0 4px 14px rgba(32,76,108,0.15);
+            transition:0.3s ease;
+        '
+        onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 10px 28px rgba(32,76,108,0.25)';"
+        onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 14px rgba(32,76,108,0.15)';"
+        >
+            <div style='font-size:2.4em; color:#204c6c; font-weight:700;'>4</div>
+            <div style='color:#334155; font-size:1em; margin-top:6px;'>Total Agents</div>
+        </div>
+
+    </div>
+</div>
+
+
+    """)
+ 
+    # -----------------------------------
+    # HOW IT WORKS TITLE
+    # -----------------------------------
+    gr.HTML("""
+        <div style='
+            margin-top:60px;
+            text-align:center;
+            font-size:2.8em;
+            font-weight:800;
+            letter-spacing:1px;
+            color: #ffffff;
+        '>
+            How It Works
+        </div>
+    """)
+
+    with gr.Row():
+
+        with gr.Column():   
+            gr.HTML("""
+                <div style='padding:20px 40px; text-align:left; margin-left: 130px; color: white;'>
+                    <h3>Independent Agents</h3>
+                    <ul>
+                        <li>Isolated environments</li>
+                        <li>Scalable + independently upgradable</li>
+                        <li>Optimized resource allocation</li>
+                        <li>Specialized task modules</li>
+                    </ul>
+                </div>
+            """)
+
+        with gr.Column():
+            gr.HTML("""
+                <div style='padding:20px 40px; text-align:left; margin-left: 130px;'>
+                    <h3>Getting Started</h3>
+                    <ul>
+                        <li>Choose your agent</li>
+                        <li>Click “Launch Agent”</li>
+                        <li>Enter your query & receive instant results</li>
+                        <li>Save or download output</li>
+                    </ul>
+                </div>
+            """)
+
+        with gr.Column():
+            gr.HTML("""
+                <div style='padding:20px 40px; text-align:left; margin-left: 130px;'>
+                    <h3>Best Practices</h3>
+                    <ul>
+                        <li>Be specific with queries</li>
+                        <li>Add relevant details</li>
+                        <li>Use examples as guidance</li>
+                        <li>Use agent-specific features</li>
+                    </ul>
+                </div>
+            """)
+#     gr.HTML("""
+# <div style="
+#     margin: 90px auto 40px;
+#     text-align: center;
+# ">
+#     <a href="https://sparkbrains.ai" target="_blank" rel="noopener noreferrer"
+#        style="
+#         display: inline-block;
+#         padding: 16px 38px;
+#         font-size: 1.1em;
+#         font-weight: 700;
+#         color: white;
+#         text-decoration: none;
+#         border-top: 1px solid #168c44
+#         border-radius: 999px;
+#         background: linear-gradient(135deg, #204C6C, #168c44);
+#         box-shadow: 0 10px 30px rgba(32, 76, 108, 0.35);
+#         transition: all 0.3s ease;
+#        "
+#        onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 18px 40px rgba(32,76,108,0.45)'"
+#        onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(32,76,108,0.35)'"
+#     >
+#         Visit SparkBrains →
+#     </a>
+
+#     <p style="
+#         margin-top: 14px;
+#         font-size: 0.9em;
+#         color: #cbd5f5;
+#         opacity: 0.85;
+#     ">
+#         Explore our full AI ecosystem, products & research
+#     </p>
+# </div>
+# """)
+
+            
+
+    # FOOTER --------------------------------------------------------------
+    gr.HTML(f"""
+<div class="spark-footer">
+
+    <div class="footer-top">
+        <a href="https://www.linkedin.com/company/sparkbrains/"
+           target="_blank"
+           class="icon-text-wrap">
+            <img src="{linkedin_logo}" class="footer-icon"/>
+            <span class="linkedin_text">LinkedIn</span>
+        </a>
+
+        <a href="mailto:sales@sparkbrains.in"
+           class="icon-text-wrap">
+            <img src="{email_logo}" class="footer-icon"/>
+            <span class="linkedin_text">sales@sparkbrains.in</span>
+        </a>
+    </div>
+
+    <a href="https://sparkbrains.in"
+       target="_blank"
+       rel="noopener noreferrer"
+       class="footer-cta">
+        Visit SparkBrains →
+    </a>
+
+    <div class="footer-bottom">
+        © 2026 SparkBrains AI · Building Intelligent Systems
+    </div>
+
+</div>
+""")
+
+
+if __name__ == "__main__":
+    demo.launch(share=True)
+#   <h3 style='margin-bottom:10px;'>Built with Modern AI Stack</h3>
+#             <p>DeepAgents • LangChain • Groq • OpenStreetMap • Gradio</p>
+#             <p style='font-size:0.85em; color:#6b7280; margin-top:10px;'>
+#                 HuggingFace Spaces | Open Source Architecture
+#             </p>

style1.css

@@ -0,0 +1,466 @@
+/* ============================================
+   GLOBAL BASE STYLES
+   ============================================ */
+body,
+html,
+.gradio-container,
+.contain {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  background-size: cover;
+  background-attachment: fixed;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+body {
+  /* background: 
+        radial-gradient(circle at 20% 15%, rgba(59, 130, 246, 0.12), transparent 40%),
+        radial-gradient(circle at 80% 25%, rgba(23, 194, 106, 0.794), transparent 45%),
+        radial-gradient(circle at 50% 70%, rgba(16, 185, 129, 0.08), transparent 50%),
+        radial-gradient(circle at 10% 85%, rgba(236, 72, 153, 0.08), transparent 45%),
+        linear-gradient(135deg, #0a0e27 0%, #1a1f3a 25%, #0f1629 50%, #189f18 75%, #0d1425 100%) !important;
+    background-size: cover;
+    background-attachment: fixed; */
+}
+
+/* ============================================
+   NEXT-GEN TECH GRID BACKGROUND
+   ============================================ */
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+
+  /* MICRO GRID */
+  background-image: linear-gradient(
+      rgba(255, 255, 255, 0.035) 1px,
+      transparent 1px
+    ),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+    /* MACRO GRID */
+      linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
+    /* BASE GRADIENT */
+      radial-gradient(
+        circle at 20% 10%,
+        rgba(59, 130, 246, 0.18),
+        transparent 45%
+      ),
+    radial-gradient(
+      circle at 80% 20%,
+      rgba(139, 92, 246, 0.15),
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 50% 75%,
+      rgba(16, 185, 129, 0.12),
+      transparent 55%
+    ),
+    linear-gradient(135deg, #060b1a 0%, #0b1025 35%, #070d1f 60%, #050914 100%);
+
+  background-size: 24px 24px, /* micro grid */ 24px 24px, 120px 120px,
+    /* macro grid */ 120px 120px, auto, auto, auto, auto;
+
+  background-blend-mode: normal, normal, overlay, overlay, screen, screen,
+    screen, normal;
+}
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+
+  background-image: radial-gradient(
+      circle at 15% 20%,
+      rgba(59, 130, 246, 0.25) 1px,
+      transparent 1px
+    ),
+    radial-gradient(
+      circle at 40% 35%,
+      rgba(139, 92, 246, 0.25) 1px,
+      transparent 1px
+    ),
+    radial-gradient(
+      circle at 70% 25%,
+      rgba(16, 185, 129, 0.25) 1px,
+      transparent 1px
+    ),
+    radial-gradient(
+      circle at 85% 70%,
+      rgba(236, 72, 153, 0.22) 1px,
+      transparent 1px
+    );
+
+  background-size: 400px 400px;
+  opacity: 0.35;
+}
+
+/* ============================================
+   FLOATING GLOWING ORBS
+   ============================================ */
+.contain::before {
+  content: "";
+  position: fixed;
+  top: 10%;
+  right: 15%;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(
+    circle,
+    rgba(59, 130, 246, 0.15),
+    transparent 70%
+  );
+  border-radius: 50%;
+  filter: blur(80px);
+  /* animation: floatOrb1 25s ease-in-out infinite; */
+  pointer-events: none;
+  z-index: 0;
+}
+
+.contain::after {
+  content: "";
+  position: fixed;
+  bottom: 15%;
+  left: 10%;
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(139, 92, 246, 0.12),
+    transparent 70%
+  );
+  border-radius: 50%;
+  filter: blur(70px);
+  /* animation: floatOrb2 30s ease-in-out infinite; */
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ============================================
+   GRADIO CONTAINER IMPROVEMENTS
+   ============================================ */
+.gradio-container {
+  max-width: 1519px !important;
+  margin: 0 auto !important;
+  padding: 20px 40px !important;
+  position: relative;
+  z-index: 1;
+}
+
+/* Ensure all content is above background effects */
+.gradio-container > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* ============================================
+   IMPROVED ROW & COLUMN SPACING
+   ============================================ */
+.gradio-container .row {
+  gap: 24px !important;
+  margin-bottom: 30px !important;
+}
+
+.gradio-container .column {
+  padding: 0 12px !important;
+}
+
+/* ============================================
+   CARD STYLING ENHANCEMENTS
+   ============================================ */
+.gradio-container div[style*="background:white"] {
+  border-radius: 20px !important;
+  transition: all 0.3s ease !important;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+.gradio-container div[style*="background:white"]:hover {
+  transform: translateY(-8px) !important;
+  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15) !important;
+}
+
+.linkedin_logo {
+  transition: all 0.3s ease !important;
+}
+.linkedin_logo:hover {
+  transform: translateY(-8px) !important;
+}
+
+.linkedin_text {
+  font-size: 13px;
+  color: #ffffff;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+
+/* =========================
+   FOOTER
+========================= */
+
+.spark-footer {
+  margin-top: 80px;
+  padding: 40px 30px 28px;
+  background: linear-gradient(135deg, #010f2a, #011433);
+  border-top: 2px solid #168c44;
+  border-radius: 18px;
+  text-align: center;
+}
+
+/* Top row */
+.footer-top {
+  display: flex;
+  gap: 28px;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 28px;
+}
+
+/* Icon + text */
+.icon-text-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  color: #e5e7eb;
+  font-size: 13px;
+  transition: all 0.3s ease;
+}
+
+.icon-text-wrap:hover {
+  color: #7ee787;
+  transform: translateY(-3px);
+}
+
+/* Icons */
+.footer-icon {
+  width: 22px;
+  height: auto;
+  transition: transform 0.3s ease;
+}
+
+.icon-text-wrap:hover .footer-icon {
+  transform: scale(1.15);
+}
+
+/* CTA Button */
+.footer-cta {
+  display: inline-block;
+  padding: 14px 40px;
+  font-size: 1.05em;
+  font-weight: 700;
+  color: white;
+  text-decoration: none;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #204c6c, #168c44);
+  box-shadow: 0 12px 32px rgba(32, 76, 108, 0.4);
+  transition: all 0.3s ease;
+}
+
+.footer-cta:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 45px rgba(32, 76, 108, 0.55);
+}
+
+/* Bottom text */
+.footer-bottom {
+  margin-top: 26px;
+  font-size: 0.8em;
+  color: #9ca3af;
+  opacity: 0.85;
+}
+
+.icon-text-wrap {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+/* ============================================
+   TEXT STYLING
+   ============================================ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  letter-spacing: 0.5px;
+  line-height: 1.3;
+}
+
+ul {
+  margin-left: 80px;
+}
+
+ul,
+li {
+  color: white;
+  line-height: 1.8;
+}
+
+p {
+  line-height: 1.7;
+}
+
+/* ============================================
+   BUTTON IMPROVEMENTS
+   ============================================ */
+a[style*="Launch Agent"],
+button {
+  box-shadow: 0 4px 12px rgba(32, 76, 108, 0.3) !important;
+  transition: all 0.3s ease !important;
+  font-weight: 600 !important;
+}
+
+a[style*="Launch Agent"]:hover {
+  box-shadow: 0 8px 20px rgba(32, 76, 108, 0.5) !important;
+}
+
+/* ============================================
+   SYSTEM STATUS BOX REFINEMENT
+   ============================================ */
+div[style*="margin-top: 50px"] {
+  backdrop-filter: blur(12px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+}
+
+/* ============================================
+   "HOW IT WORKS" SECTION ALIGNMENT
+   ============================================ */
+.gradio-container div[style*="margin-left: 130px"] {
+  margin-left: 0px !important;
+  padding: 30px 40px !important;
+  background: rgba(255, 255, 255, 0.03) !important;
+  border-radius: 16px !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  backdrop-filter: blur(8px) !important;
+  transition: all 0.3s ease !important;
+}
+
+.gradio-container div[style*="margin-left: 130px"]:hover {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border-color: rgba(59, 130, 246, 0.3) !important;
+  transform: translateY(-4px);
+}
+
+.gradio-container div[style*="margin-left: 130px"] h3 {
+  color: #ffffff !important;
+  font-size: 1.4em !important;
+  margin-bottom: 16px !important;
+  font-weight: 700 !important;
+  background: linear-gradient(to right, #3b82f6, #8b5cf6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.gradio-container div[style*="margin-left: 130px"] ul {
+  margin: 0 !important;
+  padding-left: 24px !important;
+}
+
+.gradio-container div[style*="margin-left: 130px"] li {
+  margin: 10px 0 !important;
+  color: rgba(255, 255, 255, 0.85) !important;
+  font-size: 0.95em !important;
+}
+
+/* ============================================
+   HEADER SECTION REFINEMENT
+   ============================================ */
+div[style*="border-bottom-left-radius:40px"] {
+  margin-bottom: 40px !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+/* ============================================
+   RESPONSIVE IMPROVEMENTS
+   ============================================ */
+@media (max-width: 1200px) {
+  .gradio-container {
+    max-width: 95% !important;
+    padding: 20px !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .gradio-container div[style*="margin-left: 130px"] {
+    padding: 20px !important;
+  }
+
+  div[style*="flex:1; display:flex"] {
+    flex-direction: column !important;
+  }
+}
+
+@keyframes gridScroll {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(60px, 60px);
+  }
+}
+
+@keyframes floatOrb1 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.4;
+  }
+  33% {
+    transform: translate(-50px, 40px) scale(1.15);
+    opacity: 0.6;
+  }
+  66% {
+    transform: translate(30px, -30px) scale(0.9);
+    opacity: 0.5;
+  }
+}
+
+@keyframes floatOrb2 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.35;
+  }
+  33% {
+    transform: translate(40px, -50px) scale(0.85);
+    opacity: 0.5;
+  }
+  66% {
+    transform: translate(-35px, 35px) scale(1.1);
+    opacity: 0.45;
+  }
+}
+
+/* ============================================
+   SMOOTH SCROLLING
+   ============================================ */
+html {
+  scroll-behavior: smooth;
+}
+
+/* ============================================
+   ACCESSIBILITY & POLISH
+   ============================================ */
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background: rgba(59, 130, 246, 0.3);
+  color: white;
+}
+
+/* Force page header title to stay on one line */
+h1 {
+  white-space: nowrap !important;
+  width: auto !important;
+}