Update the spaces

app.py

@@ -14,23 +14,22 @@ 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") 
-main_logo = os.path.join(BASE_DIR, "public/main-logo.png") 
+
+
+
+
+logo_path = os.path.join(BASE_DIR, "public/main-logo.png")
 
 def embed_image_base64(path):
     with open(path, "rb") as f:
-        return "data:image/svg;base64," + base64.b64encode(f.read()).decode()
+        return "data:image/png;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(main_logo)
+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"
+    "agent3": "https://huggingface.co/spaces/Tamannathakur/SparkMart"
 }
 
 # ---------------------------
@@ -106,7 +105,6 @@ def create_agent_card(title, description, features, url, color, status="active")
     return f"""
         <div style='
             padding:28px;
-            margin-top: 20px;
             background:white;
             min-height:400px;
             display:flex;   
@@ -231,11 +229,10 @@ with gr.Blocks(
             font-size:2.2em;
             text-align:center;
             font-weight:800;
-            margin:60px 0 60px;
+            margin:30px 0 40px;
             color: white;
         '>
             Available Agents
-            <hr style='margin:0px;'/>
         </div>
     """)
 
@@ -286,32 +283,11 @@ with gr.Blocks(
                 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;
+    margin-top: 50px;
     padding: 35px;
     background: linear-gradient(135deg, #e8f5ff 0%, #f3fff6 100%);
     border-radius: 18px;
@@ -351,7 +327,7 @@ with gr.Blocks(
         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='font-size:2.4em; color:#204c6c; font-weight:700;'>3</div>
             <div style='color:#334155; font-size:1em; margin-top:6px;'>Active Agents</div>
         </div>
 
@@ -391,7 +367,7 @@ with gr.Blocks(
         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='font-size:2.4em; color:#204c6c; font-weight:700;'>3</div>
             <div style='color:#334155; font-size:1em; margin-top:6px;'>Total Agents</div>
         </div>
 
@@ -457,82 +433,26 @@ with gr.Blocks(
                     </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>
-""")
-
+    # gr.HTML("""
+    #     <div style='
+    #         text-align:center;
+    #         padding:30px;
+    #         margin-top:60px;
+    #         background:#f0fdf4;
+    #         border-radius:15px;
+    #         border:2px solid #dcfce7;
+    #     '>
+    #         <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>
+    #     </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

@@ -1,21 +1,21 @@
 /* ============================================
    GLOBAL BASE STYLES
    ============================================ */
-body,
+body, 
 html,
-.gradio-container,
+.gradio-container, 
 .contain {
-  margin: 0;
-  padding: 0;
-  position: relative;
-  background-size: cover;
-  background-attachment: fixed;
-  min-height: 100vh;
-  overflow-x: hidden;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    background-size: cover;
+    background-attachment: fixed;
+    min-height: 100vh;
+    overflow-x: hidden;
 }
 
-body {
-  /* background: 
+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%),
@@ -26,286 +26,144 @@ body {
 }
 
 /* ============================================
-   NEXT-GEN TECH GRID BACKGROUND
+   TECH GRID PATTERN
    ============================================ */
-
 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;
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+    pointer-events: none;
+    z-index: 0;
+    background: 
+        radial-gradient(circle at 20% 15%, rgba(59, 130, 246, 0.12), transparent 40%),
+        radial-gradient(circle at 80% 25%, rgba(139, 92, 246, 0.1), 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%, #1e2139 75%, #0d1425 100%) !important;
+    /* animation: gridScroll 30s linear infinite; */
 }
+
+/* Hexagon pattern overlay */
 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;
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(174, 246, 59, 0.015) 35px, rgba(93, 205, 18, 0.015) 70px),
+        repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(139, 92, 246, 0.015) 35px, rgba(139, 92, 246, 0.015) 70px);
+    pointer-events: none;
+    z-index: 0;
+    opacity: 0.6;
 }
 
 /* ============================================
    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;
+    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;
+    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;
+    max-width: 1400px !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;
+    position: relative;
+    z-index: 1;
 }
 
 /* ============================================
    IMPROVED ROW & COLUMN SPACING
    ============================================ */
 .gradio-container .row {
-  gap: 24px !important;
-  margin-bottom: 30px !important;
+    gap: 24px !important;
+    margin-bottom: 30px !important;
 }
 
 .gradio-container .column {
-  padding: 0 12px !important;
+    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;
+    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;
+    transform: translateY(-8px) !important;
+    box-shadow: 0px 20px 40px rgba(0,0,0,0.15) !important;
 }
 
 /* ============================================
    TEXT STYLING
    ============================================ */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  letter-spacing: 0.5px;
-  line-height: 1.3;
+h1, h2, h3, h4, h5, h6 {
+    letter-spacing: 0.5px;
+    line-height: 1.3;
 }
 
 ul {
-  margin-left: 80px;
+    margin-left: 80px;
 }
 
-ul,
-li {
-  color: white;
-  line-height: 1.8;
+ul, li {
+    color: white;
+    line-height: 1.8;
 }
 
+
+
 p {
-  line-height: 1.7;
+    line-height: 1.7;
 }
 
 /* ============================================
@@ -313,154 +171,152 @@ p {
    ============================================ */
 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;
+    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;
+    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;
+    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;
+    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);
+    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;
+    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;
+    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;
+    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;
+    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;
-  }
+    .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;
-  }
+    .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);
-  }
+    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;
-  }
+    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;
-  }
+    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;
+    scroll-behavior: smooth;
 }
 
 /* ============================================
    ACCESSIBILITY & POLISH
    ============================================ */
 * {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 ::selection {
-  background: rgba(59, 130, 246, 0.3);
-  color: white;
+    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;
+    white-space: nowrap !important;
+    width: auto !important;
 }