Make hero title bulletproof-visible

Gradio's theme CSS was overriding the gradient background, leaving the
gradient-text title transparent (invisible). Force the gradient with
!important inside an @supports guard, and fall back to a solid visible
color where gradient-text isn't applied.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app.py

@@ -385,15 +385,21 @@ body, .gradio-container {
   display: inline-block;
   font-size: 3.5rem;
   font-weight: 800;
-  color: var(--accent-blue); /* fallback if background-clip:text is unsupported */
-  background: linear-gradient(110deg, var(--accent-blue), var(--accent-purple), #F0ABFC, var(--accent-blue));
-  background-size: 250% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
   letter-spacing: -1px;
   margin-top: 0.5rem;
-  animation: rdHero 7s ease infinite;
+  color: #7DD3FC; /* solid, always-visible fallback */
+}
+/* Only apply the transparent gradient-text effect where it is actually supported,
+   and force our background to win over Gradio's theme CSS. */
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  .hero-title {
+    background: linear-gradient(110deg, var(--accent-blue), var(--accent-purple), #F0ABFC, var(--accent-blue)) !important;
+    background-size: 250% auto !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    animation: rdHero 7s ease infinite;
+  }
 }
 @keyframes rdHero {
   0% { background-position: 0% center; }