diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index d3339c0..600b0e8 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -15,14 +15,14 @@ export default async function Hero({ locale }: HeroProps) {
   const getLabel = (key: string, fallback: string) => cmsMessages[key] || fallback;
 
   return (
-    <section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-stone-50 dark:bg-stone-950 px-6 transition-colors duration-500">
-      {/* Liquid Ambient Background */}
-      <div className="absolute inset-0 pointer-events-none">
+    <section className="relative min-h-screen flex flex-col items-center justify-center bg-stone-50 dark:bg-stone-950 px-6 transition-colors duration-500">
+      {/* Liquid Ambient Background — overflow-hidden here so the blobs are clipped, not the image/badge */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
         <div className="absolute top-[5%] left-[5%] w-[60vw] h-[60vw] bg-liquid-mint rounded-full blur-[140px] opacity-20" />
         <div className="absolute bottom-[5%] right-[5%] w-[50vw] h-[50vw] bg-liquid-purple rounded-full blur-[120px] opacity-15" />
       </div>
 
-      <div className="relative z-10 max-w-7xl mx-auto w-full pt-12 sm:pt-16 md:pt-20">
+      <div className="relative z-10 max-w-7xl mx-auto w-full pt-12 sm:pt-16 md:pt-20 pb-10 sm:pb-16">
         <div className="flex flex-col xl:flex-row items-center gap-8 sm:gap-10 xl:gap-24">
 
           {/* Left: Text Content */}