diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index b874ae7..f01b9b8 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -239,10 +239,10 @@ export function HeroSection({ content }: { content?: HeroContent }) {
             </div>
           </div>
 
-          {/* Validation Error Message */}
+          {/* Validation Error Message (overlay — does not push layout) */}
           {validationError && (
-            <div className="mt-3 flex justify-center px-2">
-              <div className="text-white font-serif text-xs md:text-sm bg-red-500/90 rounded-[7px] py-1.5 px-3 inline-flex items-center gap-2 max-w-fit shadow-md">
+            <div className="pointer-events-none fixed inset-x-0 top-20 z-50 flex justify-center px-4 md:absolute md:top-auto md:bottom-[-56px] md:inset-x-0">
+              <div className="pointer-events-auto text-white font-serif text-xs md:text-sm bg-red-500/95 rounded-[7px] py-2 px-3 inline-flex items-center gap-2 max-w-[92%] shadow-lg">
                 <span className="text-left">{validationError}</span>
                 <button
                   onClick={handleClearError}