diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index e1f5155..d632ac9 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -53,20 +53,9 @@ const secondaryCtaVariant = {
   visible: { opacity: 1, x: 0, transition: { duration: 0.4, ease: EASE } },
 };
 
-// Right column: each element enters independently
-const imgFromLeft = {
-  hidden: { opacity: 0, x: -36 },
-  visible: { opacity: 1, x: 0, transition: { duration: 0.65, ease: EASE } },
-};
-
-const centerCardReveal = {
-  hidden: { opacity: 0, scale: 0.86, y: 24 },
-  visible: { opacity: 1, scale: 1, y: 0, transition: { duration: 0.75, ease: EASE } },
-};
-
-const imgFromRight = {
-  hidden: { opacity: 0, x: 36 },
-  visible: { opacity: 1, x: 0, transition: { duration: 0.65, ease: EASE } },
+const logoReveal = {
+  hidden: { opacity: 0, scale: 0.88, y: 20 },
+  visible: { opacity: 1, scale: 1, y: 0, transition: { duration: 0.75, ease: EASE, delay: 0.15 } },
 };
 
 const statStagger = {
@@ -93,16 +82,6 @@ export function Hero() {
         transition={{ duration: 14, repeat: Infinity, ease: "easeInOut" }}
       />
 
-      {/* 2. Purple solid circle (center-right around collage) */}
-      <div className="hidden lg:block absolute right-[22%] top-[38%] w-[84px] h-[84px] rounded-full bg-[#6D28D9] z-0 shadow-[0_8px_32px_rgba(109,40,217,0.3)] pointer-events-none motion-safe:animate-pulse" />
-
-      {/* 3. Striped purple circle (lower-middle collage area) */}
-      <div
-        className="hidden lg:block absolute left-[45%] bottom-[15%] w-[100px] h-[100px] rounded-full opacity-80 z-0 pointer-events-none"
-        style={{
-          backgroundImage: 'repeating-linear-gradient(45deg, rgba(109, 40, 217, 0.2) 0px, rgba(109, 40, 217, 0.2) 2px, transparent 2px, transparent 8px)'
-        }}
-      />
 
       {/* 4. Dotted pattern (between left text and right collage) */}
       <div className="hidden lg:block absolute left-[41%] top-[25%] w-48 h-48 opacity-[0.35] z-0 pointer-events-none">
@@ -191,133 +170,42 @@ export function Hero() {
           </div>
         </motion.div>
 
-        {/* RIGHT COLUMN: Individual image + center card animations */}
-        <div className="w-full z-20">
+        {/* RIGHT COLUMN: Nearle brand logo composition */}
+        <div className="w-full z-20 flex items-center justify-center py-4 lg:py-0">
+          <motion.div
+            className="relative flex items-center justify-center"
+            variants={logoReveal}
+            initial="hidden"
+            animate="visible"
+          >
+            {/* Atmospheric glow — elliptical, not circular, fades naturally */}
+            <div
+              className="absolute pointer-events-none"
+              style={{
+                width: '160%',
+                height: '160%',
+                top: '-30%',
+                left: '-30%',
+                background: 'radial-gradient(ellipse 60% 50% at 50% 53%, rgba(109,40,217,0.15) 0%, rgba(109,40,217,0.05) 48%, transparent 75%)',
+              }}
+            />
 
-          {/* DESKTOP LAYOUT (lg and above) */}
-          <div className="hidden lg:block relative h-[500px] lg:h-[560px] w-full">
-
-            {/* Left image: slides in from left */}
+            {/* Logo with slow float and grounding shadow */}
             <motion.div
-              className="absolute left-[10%] top-[20%] w-[170px] h-[360px] rounded-[1.5rem] overflow-hidden shadow-lg border-2 border-white z-10"
-              variants={imgFromLeft}
-              initial="hidden"
-              animate="visible"
-              transition={{ delay: 0.3 }}
-              whileHover={{ scale: 1.02, transition: { duration: 0.25, ease: EASE } }}
+              animate={!reducedMotion ? { y: [0, -16, 0] } : {}}
+              transition={{ duration: 11, repeat: Infinity, ease: "easeInOut", delay: 0.8 }}
             >
               <Image
-                src="/images/cat-daily-essentials.png"
-                alt="Local grocery products"
-                fill
-                className="object-cover"
-                sizes="170px"
-              />
-            </motion.div>
-
-            {/* Center card: scales up from below, then gently bobs */}
-            <motion.div
-              className="absolute left-[38%] top-[8%] z-20"
-              variants={centerCardReveal}
-              initial="hidden"
-              animate="visible"
-              transition={{ delay: 0.15 }}
-            >
-              <motion.div
-                animate={!reducedMotion ? { y: [0, -10, 0] } : {}}
-                transition={{ delay: 0.9, duration: 4, repeat: Infinity, ease: "easeInOut" }}
-                whileHover={{ scale: 1.02, transition: { duration: 0.25, ease: EASE } }}
-              >
-                <div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
-                  <Image
-                    src="/nearlenewlogo.png"
-                    alt="Central logo panel"
-                    width={160}
-                    height={160}
-                    className="object-contain max-h-[140px] w-auto motion-safe:animate-[pulse_6s_infinite]"
-                    priority
-                  />
-                </div>
-              </motion.div>
-            </motion.div>
-
-            {/* Right image: slides in from right */}
-            <motion.div
-              className="absolute right-[2%] top-[18%] w-[180px] h-[390px] rounded-[1.5rem] overflow-hidden shadow-lg border-2 border-white z-10"
-              variants={imgFromRight}
-              initial="hidden"
-              animate="visible"
-              transition={{ delay: 0.42 }}
-              whileHover={{ scale: 1.02, transition: { duration: 0.25, ease: EASE } }}
-            >
-              <Image
-                src="/nearle people.png"
-                alt="Local customer shopping"
-                fill
+                src="/nearlenewlogo.png"
+                alt="Nearle – Your Neighbourhood Commerce Platform"
+                width={480}
+                height={480}
+                className="relative z-10 w-[200px] sm:w-[260px] lg:w-[400px] xl:w-[460px] h-auto object-contain select-none"
+                style={{ filter: 'drop-shadow(0 28px 52px rgba(109,40,217,0.22)) drop-shadow(0 4px 10px rgba(22,0,29,0.06))' }}
                 priority
-                className="object-cover"
-                sizes="180px"
               />
             </motion.div>
-          </div>
-
-          {/* MOBILE/TABLET COLLAGE (below lg) */}
-          <div className="lg:hidden flex items-center justify-center gap-2 mt-2 w-full relative h-[280px]">
-            <motion.div
-              className="relative w-[95px] h-[200px] rounded-2xl overflow-hidden border border-white shadow-md z-10"
-              variants={imgFromLeft}
-              initial="hidden"
-              animate="visible"
-              transition={{ delay: 0.28 }}
-            >
-              <Image
-                src="/images/cat-daily-essentials.png"
-                alt="Grocery products"
-                fill
-                className="object-cover"
-                sizes="95px"
-              />
-            </motion.div>
-
-            <motion.div
-              className="relative w-[115px] h-[240px] rounded-2xl border-4 border-white shadow-lg bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-3 -mx-5 z-20"
-              variants={centerCardReveal}
-              initial="hidden"
-              animate="visible"
-              transition={{ delay: 0.15 }}
-            >
-              <motion.div
-                animate={!reducedMotion ? { y: [0, -6, 0] } : {}}
-                transition={{ delay: 0.85, duration: 3.5, repeat: Infinity, ease: "easeInOut" }}
-              >
-                <Image
-                  src="/nearlenewlogo.png"
-                  alt="Central logo panel"
-                  width={100}
-                  height={100}
-                  className="object-contain max-h-[90px] w-auto motion-safe:animate-[pulse_6s_infinite]"
-                  priority
-                />
-              </motion.div>
-            </motion.div>
-
-            <motion.div
-              className="relative w-[105px] h-[220px] rounded-2xl overflow-hidden border border-white shadow-md z-10"
-              variants={imgFromRight}
-              initial="hidden"
-              animate="visible"
-              transition={{ delay: 0.36 }}
-            >
-              <Image
-                src="/nearle people.png"
-                alt="Customer"
-                fill
-                className="object-cover"
-                sizes="105px"
-              />
-            </motion.div>
-          </div>
-
+          </motion.div>
         </div>
 
       </div>