Update app.py

app.py

@@ -92,16 +92,29 @@ CUSTOM_CSS = """
 .sticky-cta .cta-link { font-weight:600; text-decoration: underline; }
 
 
-/* hero API chip */
+/* centered, single-label API CTA */
+.api-cta-wrap { text-align:center; margin-top:10px; }
 .api-cta-hero {
-  display:inline-flex; align-items:center; justify-content:center;
-  gap:8px; padding:8px 14px; border-radius:999px;
-  background:#0ea5e9; color:#fff; font-weight:700; border:1px solid rgba(255,255,255,0.25);
-  box-shadow: 0 4px 14px rgba(14,165,233,0.25);
+  display:inline-flex; align-items:center; gap:10px;
+  padding:10px 14px; border-radius:14px;
+  background: linear-gradient(90deg,#0ea5e9 0%, #6366f1 100%);
+  color:#fff; font-weight:800; letter-spacing:0.1px;
+  box-shadow: 0 6px 22px rgba(99,102,241,0.35);
+  border: 1px solid rgba(255,255,255,0.22);
+  text-decoration:none;
 }
-.api-cta-hero:hover { filter: brightness(1.05); }
-.api-cta-wrap { text-align:center; margin-top:8px; }
+.api-cta-hero:hover { filter:brightness(1.05); transform: translateY(-1px); transition: all .15s ease; }
 
+.api-cta-hero .new {
+  background:#fff; color:#0ea5e9; font-weight:900;
+  padding:2px 8px; border-radius:999px; font-size:12px; line-height:1;
+}
+.api-cta-hero .txt { font-weight:800; }
+.api-cta-hero .chev { opacity:.95; }
+@media (max-width: 520px){
+  .api-cta-hero { padding:9px 12px; gap:8px; font-size:14px; }
+  .api-cta-hero .new { display:none; } /* keep it tidy on phones */
+}
 
 
 /* floating bottom promo */
@@ -160,15 +173,18 @@ with gr.Blocks(title="Video Face Swap", theme=gr.themes.Soft(), css=CUSTOM_CSS)
         """
         <div class="api-cta-wrap">
           <a class="api-cta-hero"
-             href="https://www.face-swap.co/api?utm_source=hfspace_videofaceswap&utm_medium=hero_api"
+             href="https://www.face-swap.co/api?utm_source=hfspace_videofaceswap&utm_medium=hero_api_new"
              target="_blank" rel="noopener" aria-label="Face Swap API">
-             API
+            <span class="new">NEW</span>
+            <span class="txt">Face Swap API — build into your app</span>
+            <span class="chev">↗</span>
           </a>
         </div>
         """
     )
 
 
+
     with gr.Row():
         with gr.Column(scale=5):