Update style1.css

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,144 +26,286 @@ body  {
 }
 
 /* ============================================
-   TECH GRID PATTERN
+   NEXT-GEN TECH GRID BACKGROUND
    ============================================ */
+
 body::before {
-    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; */
+  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;
 }
-
-/* Hexagon pattern overlay */
 body::after {
-    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;
+  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;
+  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: 1400px !important;
-    margin: 0 auto !important;
-    padding: 20px 40px !important;
-    position: relative;
-    z-index: 1;
+  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;
+  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;
+  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;
+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;
 }
 
 /* ============================================
@@ -171,152 +313,154 @@ 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;
 }