diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 7589d22..14cab02 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -51,7 +51,8 @@ export function Header() {
               src={brand.logo}
               alt={brand.name}
               className={`w-auto object-contain transition-[height] duration-300 ease-lux ${
-                scrolled ? "h-14" : "h-20"
+                // موبایل: لوگوی کوچک‌تر تا هدر محتوای زیرش را نپوشاند
+                scrolled ? "h-12 md:h-14" : "h-14 md:h-20"
               }`}
             />
           </Link>
diff --git a/frontend/src/components/PageHero.tsx b/frontend/src/components/PageHero.tsx
index 35227f6..33ce18a 100644
--- a/frontend/src/components/PageHero.tsx
+++ b/frontend/src/components/PageHero.tsx
@@ -28,7 +28,9 @@ export function PageHero({ pageKey, hideImage = false }: PageHeroProps) {
     })
 
   return (
-    <section className="relative flex h-[58vh] min-h-[420px] items-end overflow-hidden">
+    <section className="relative flex min-h-[58vh] items-end overflow-hidden pt-32 pb-16">
+      {/* pt-32 فضای هدر ثابت را رزرو می‌کند تا بردکرUMB/عنوان هرگز زیر لوگو نروند؛
+          min-h به‌جای h تا اگر محتوا بلندتر شد (موبایل)، بخش بلندتر شود نه اینکه زیر هدر برود */}
       {hero.image && !hideImage && <img src={hero.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" fetchPriority="high" decoding="async" />}
 
       {!hideImage && (
diff --git a/frontend/src/components/home/Hero.tsx b/frontend/src/components/home/Hero.tsx
index 5a13493..39aadf5 100644
--- a/frontend/src/components/home/Hero.tsx
+++ b/frontend/src/components/home/Hero.tsx
@@ -62,7 +62,7 @@ export function Hero() {
     })
 
   return (
-    <section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label={t('heroAria')}>
+    <section className="relative min-h-screen w-full overflow-hidden pt-28" aria-label={t('heroAria')}>
       {/* تصویر پس‌زمینه */}
       <motion.img
         src={brand.hero}
@@ -83,7 +83,7 @@ export function Hero() {
       {/* محتوای اصلی هیرو */}
       <motion.div
         style={{ y: contentY }}
-        className="relative mx-auto flex h-full max-w-site flex-col justify-center px-6 lg:px-10"
+        className="relative mx-auto flex min-h-[calc(100vh-7rem)] max-w-site flex-col justify-center px-6 lg:px-10"
       >
         <div className="w-full max-w-[700px] lg:max-w-[58%]">
           {/* کیکر بالای تیتر */}