diff --git a/src/components/heroes/AboutHero.tsx b/src/components/heroes/AboutHero.tsx
index 62c332a..3996b1b 100644
--- a/src/components/heroes/AboutHero.tsx
+++ b/src/components/heroes/AboutHero.tsx
@@ -54,10 +54,10 @@ export function AboutHero() {
         <div className="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
 
         {/* Content */}
-        <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-20 lg:px-16 lg:py-24 max-w-[1600px] mx-auto">
+        <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-16 lg:px-16 lg:py-16 max-w-[1600px] mx-auto">
 
           <motion.div
-            className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-10 md:px-14 md:py-12"
+            className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-8 md:px-14 md:py-6 lg:py-8"
             variants={staggerContainer}
             initial="hidden"
             animate="visible"
diff --git a/src/components/heroes/BrandsHero.tsx b/src/components/heroes/BrandsHero.tsx
index 1131767..176f98a 100644
--- a/src/components/heroes/BrandsHero.tsx
+++ b/src/components/heroes/BrandsHero.tsx
@@ -55,8 +55,8 @@ export function BrandsHero() {
         {/* Overlay: dark behind the text on the left, fading out so the storefront stays vivid on the right */}
         <div className="absolute inset-0 z-[1] bg-black/45 md:bg-[linear-gradient(90deg,rgba(9,4,19,0.82)_0%,rgba(9,4,19,0.62)_30%,rgba(9,4,19,0.28)_52%,rgba(9,4,19,0.04)_68%,rgba(9,4,19,0)_82%)]" />
 
-        <div className="page-container relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:py-20 lg:py-24">
-          <div className="relative z-20 flex w-full max-w-[860px] flex-col items-center text-center px-6 py-10 md:px-14 md:py-12">
+        <div className="page-container relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:py-16 lg:py-16">
+          <div className="relative z-20 flex w-full max-w-[860px] flex-col items-center text-center px-6 py-8 md:px-14 md:py-6 lg:py-8">
             <HeroLogo />
 
             <motion.span
@@ -85,7 +85,7 @@ export function BrandsHero() {
               variants={descVariant}
               initial="hidden"
               animate="visible"
-              className="max-w-[520px] text-lg md:text-xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
+              className="max-w-[650px] text-lg md:text-xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
             >
               Help your D2C brand reach nearby customers, increase repeat purchases, and build a loyal local community—all from one powerful platform.
             </motion.p>
diff --git a/src/components/heroes/BusinessHero.tsx b/src/components/heroes/BusinessHero.tsx
index 2c7e20b..59ff7cf 100644
--- a/src/components/heroes/BusinessHero.tsx
+++ b/src/components/heroes/BusinessHero.tsx
@@ -45,11 +45,11 @@ export function BusinessHero() {
         />
         <div className="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
 
-        <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-20 lg:px-16 lg:py-24 xl:px-8 max-w-[1600px] mx-auto">
+        <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-16 lg:px-16 lg:py-16 xl:px-8 max-w-[1600px] mx-auto">
 
           {/* Left Column: animated with unique stagger */}
           <motion.div
-            className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-10 md:px-14 md:py-12"
+            className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-8 md:px-14 md:py-6 lg:py-8"
             variants={staggerContainer}
             initial="hidden"
             animate="visible"
diff --git a/src/components/heroes/PeopleHero.tsx b/src/components/heroes/PeopleHero.tsx
index 30ba479..ba30353 100644
--- a/src/components/heroes/PeopleHero.tsx
+++ b/src/components/heroes/PeopleHero.tsx
@@ -45,10 +45,10 @@ export function PeopleHero() {
         />
         <div className="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
 
-        <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-20 lg:px-16 lg:py-24 max-w-[1600px] mx-auto">
+        <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-16 lg:px-16 lg:py-16 max-w-[1600px] mx-auto">
 
           <motion.div
-            className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-10 md:px-14 md:py-12"
+            className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-8 md:px-14 md:py-6 lg:py-8"
             variants={staggerFast}
             initial="hidden"
             animate="visible"
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index f3de71b..148f79f 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -106,9 +106,9 @@ export function Hero() {
           transition={{ duration: 1.2, ease: "easeOut" }}
         />
 
-        <div className="page-container relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:py-20 lg:py-24">
+        <div className="page-container relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:py-16 lg:py-16">
 
-          <div className="relative z-20 flex w-full max-w-[860px] flex-col items-center text-center px-6 py-10 md:px-14 md:py-12">
+          <div className="relative z-20 flex w-full max-w-[860px] flex-col items-center text-center px-6 py-8 md:px-14 md:py-6 lg:py-8">
             <HeroLogo />
 
             {/* Badge */}