diff --git a/AGENTS.md b/AGENTS.md
index 5079312..4d94105 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -4,9 +4,10 @@ This version has breaking changes — APIs, conventions, and file structure may
 # STRICT PROJECT-WIDE EXECUTION RULES (TOKEN SAVER)
 Whenever you are assigned ANY task (bug fix, new feature, UI update, backend logic, etc.), you MUST follow these constraints strictly to prevent infinite loops and save compute resources:
 
-1. DO NOT start the Next.js dev server or any local server.
-2. DO NOT use curl, browser tools, Puppeteer, or any network request to test localhost or any local API endpoints.
-3. DO NOT attempt to take screenshots, scrape pages, or self-verify visual/functional changes locally.
-4. DO NOT write "VERIFICATION REQUIRED" or attempt to run integration tests unless explicitly asked.
-5. Provide the exact code fix, logic, or file modification directly based on your analysis of the provided files.
-6. The human developer will always be responsible for running the server, executing the code, and verifying it locally.
\ No newline at end of file
+1. For frontend UI, layout, responsive, styling, or screenshot-reference tasks, you MAY start the Next.js local development server using `npm run dev`.
+2. For those frontend visual tasks, you MAY open and inspect `http://localhost:3000` locally.
+3. For those frontend visual tasks, you MAY capture local screenshots for before/after comparison.
+4. `npm run build` verifies compilation only. Do not claim a visual issue is fixed based only on build success.
+5. For visual tasks, inspect localhost before reporting completion.
+6. Provide the exact code fix, logic, or file modification directly based on your analysis of the provided files.
+7. For frontend UI, layout, responsive, styling, and screenshot-reference tasks, the agent must inspect localhost before reporting completion. Screenshots are required only for major layout changes, responsive/mobile changes, hero/footer changes, or when explicitly requested by the user. For small isolated CSS spacing fixes, screenshots are optional. The human developer gives final approval only.
\ No newline at end of file
diff --git a/desktop_screenshot.png b/desktop_screenshot.png
new file mode 100644
index 0000000..277f8f8
Binary files /dev/null and b/desktop_screenshot.png differ
diff --git a/mobile_screenshot.png b/mobile_screenshot.png
new file mode 100644
index 0000000..908e01c
Binary files /dev/null and b/mobile_screenshot.png differ
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index df69dff..8510c34 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -38,39 +38,38 @@ const COUNTERS = [
 
 export default function AboutPage() {
   return (
-    <div className="relative min-h-screen bg-background">
-      
-      {/* ─── Hero Section ─── */}
-      <section className="hero-section relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center">
-        {/* Background Image with Overlay */}
-        <div className="absolute inset-0 z-0 select-none pointer-events-none">
-          <Image
-            src="/about.png"
-            alt="About Nearle Background"
-            fill
-            sizes="100vw"
-            className="object-cover"
-            priority
-          />
-          <div className="absolute inset-0 bg-[#120217]/50" />
-        </div>
+    <main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
+      <div className="page-frame">
+        {/* ─── Hero Section ─── */}
+        <section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
+          {/* Background Image with Overlay */}
+          <div className="absolute inset-0 z-0 select-none pointer-events-none">
+            <Image
+              src="/about.png"
+              alt="About Nearle Background"
+              fill
+              sizes="100vw"
+              className="object-cover"
+              priority
+            />
+            <div className="absolute inset-0 bg-[#120217]/50" />
+          </div>
 
-        <div className="relative z-10 mx-auto max-w-container-max">
-          <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
-            We are Nearle
-          </p>
-          <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
-            We build Neighbourhoods.
-          </h1>
-          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
-            Nearle is India&apos;s first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
-          </p>
-        </div>
-      </section>
+          <div className="relative z-10 mx-auto max-w-container-max">
+            <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
+              We are Nearle
+            </p>
+            <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
+              We build Neighbourhoods.
+            </h1>
+            <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
+              Nearle is India&apos;s first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
+            </p>
+          </div>
+        </section>
 
-      {/* ─── Intro Description Block ─── */}
-      <section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
-        <div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl text-center">
+        {/* ─── Intro Description Block ─── */}
+        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 text-center">
           <span className="text-label-sm font-black text-primary uppercase tracking-widest">
             Our Platform
           </span>
@@ -80,34 +79,32 @@ export default function AboutPage() {
           <p className="mx-auto max-w-3xl text-body-md text-on-surface-variant leading-relaxed">
             We are redefining modern urban living by providing never before convenience. By linking local physical stores to an integrated digital framework, Nearle boosts merchant sales and delivers products instantly, fostering closer, cleaner, and faster local economies.
           </p>
-        </div>
-      </section>
+        </section>
 
-      {/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
-      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {STRATEGY_CARDS.map((card) => (
-            <div
-              key={card.title}
-              className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col"
-            >
-              <div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
-                <MaterialIcon icon={card.icon} size={24} />
+        {/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
+        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {STRATEGY_CARDS.map((card) => (
+              <div
+                key={card.title}
+                className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col text-left"
+              >
+                <div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
+                  <MaterialIcon icon={card.icon} size={24} />
+                </div>
+                <h3 className="font-display text-xl font-black text-brand-dark mb-3">
+                  {card.title}
+                </h3>
+                <p className="text-body-sm text-on-surface-variant leading-relaxed">
+                  {card.descr}
+                </p>
               </div>
-              <h3 className="font-display text-xl font-black text-brand-dark mb-3">
-                {card.title}
-              </h3>
-              <p className="text-body-sm text-on-surface-variant leading-relaxed">
-                {card.descr}
-              </p>
-            </div>
-          ))}
-        </div>
-      </section>
+            ))}
+          </div>
+        </section>
 
-      {/* ─── Global Stats counters ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
-        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
+        {/* ─── Global Stats counters ─── */}
+        <section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {COUNTERS.map((c) => (
               <div key={c.label} className="flex flex-col items-center text-center">
@@ -121,39 +118,39 @@ export default function AboutPage() {
               </div>
             ))}
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* ─── Brand Building Banner ─── */}
-      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28 text-center">
-        <div className="bg-white rounded-[2.5rem] p-12 md:p-16 border border-outline-variant/15 shadow-xl max-w-4xl mx-auto">
-          <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
-            Don&apos;t miss the opportunity
-          </span>
-          <h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4">
-            Build Your Brand with Nearle
-          </h2>
-          <p className="text-body-md text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
-            Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
-          </p>
-          <div className="flex flex-wrap justify-center gap-4">
-            <Link
-              href="/businesses"
-              className="bg-primary hover:bg-primary-container text-on-primary font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 active:scale-95 flex items-center gap-2"
-            >
-              <MaterialIcon icon="bolt" size={18} />
-              <span>Register Merchant</span>
-            </Link>
-            <Link
-              href="/people"
-              className="bg-surface-container hover:bg-surface-container-high text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
-            >
-              <MaterialIcon icon="download" size={18} />
-              <span>Download App</span>
-            </Link>
+        {/* ─── Brand Building Banner ─── */}
+        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
+          <div className="max-w-4xl mx-auto">
+            <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
+              Don&apos;t miss the opportunity
+            </span>
+            <h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4">
+              Build Your Brand with Nearle
+            </h2>
+            <p className="text-body-md text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
+              Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
+            </p>
+            <div className="flex flex-wrap justify-center gap-4">
+              <Link
+                href="/businesses"
+                className="bg-primary hover:bg-primary-container text-on-primary font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 active:scale-95 flex items-center gap-2"
+              >
+                <MaterialIcon icon="bolt" size={18} />
+                <span>Register Merchant</span>
+              </Link>
+              <Link
+                href="/people"
+                className="bg-surface-container hover:bg-surface-container-high text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
+              >
+                <MaterialIcon icon="download" size={18} />
+                <span>Download App</span>
+              </Link>
+            </div>
           </div>
-        </div>
-      </section>
-    </div>
+        </section>
+      </div>
+    </main>
   );
 }
diff --git a/src/app/businesses/page.tsx b/src/app/businesses/page.tsx
index 2c71d0b..a266ede 100644
--- a/src/app/businesses/page.tsx
+++ b/src/app/businesses/page.tsx
@@ -88,42 +88,41 @@ export default function BusinessesPage() {
   }, []);
 
   return (
-    <div className="relative min-h-screen bg-background">
-      {/* ─── Hero Section with Animated Rotator ─── */}
-      <section className="hero-section relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center">
-        {/* Background Image with Overlay */}
-        <div className="absolute inset-0 z-0 select-none pointer-events-none">
-          <Image
-            src="/Nearle Business.png"
-            alt="Nearle Business Background"
-            fill
-            sizes="100vw"
-            className="object-cover"
-            priority
-          />
-          <div className="absolute inset-0 bg-[#120217]/50" />
-        </div>
+    <main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
+      <div className="page-frame">
+        {/* ─── Hero Section with Animated Rotator ─── */}
+        <section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
+          {/* Background Image with Overlay */}
+          <div className="absolute inset-0 z-0 select-none pointer-events-none">
+            <Image
+              src="/Nearle Business.png"
+              alt="Nearle Business Background"
+              fill
+              sizes="100vw"
+              className="object-cover"
+              priority
+            />
+            <div className="absolute inset-0 bg-[#120217]/50" />
+          </div>
 
-        <div className="relative z-10 mx-auto max-w-container-max">
-          <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
-            Nearle for Business
-          </p>
+          <div className="relative z-10 mx-auto max-w-container-max">
+            <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
+              Nearle for Business
+            </p>
 
-          <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
-            <span>Power your business.</span>
-            <br />
-            <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
-              {ROTATOR_WORDS[wordIndex]}
-            </span>
-          </h1>
+            <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
+              <span>Power your business.</span>
+              <br />
+              <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
+                {ROTATOR_WORDS[wordIndex]}
+              </span>
+            </h1>
+          </div>
+        </section>
 
-        </div>
-      </section>
-
-      {/* ─── Intro Highlight Banner ─── */}
-      <section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
-        <div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
-          <div className="max-w-2xl">
+        {/* ─── Intro Highlight Banner ─── */}
+        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 flex flex-col lg:flex-row justify-between items-center gap-8">
+          <div className="max-w-2xl text-left">
             <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
               Together, we grow
             </span>
@@ -143,53 +142,50 @@ export default function BusinessesPage() {
               <span>Talk to an Expert</span>
             </Link>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* ─── Timeline / Core Process Steps ─── */}
-      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
-        <div className="text-center mb-16">
-          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
-            How it works
-          </span>
-          <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
-            Build Your Neighborhood Brand
-          </h2>
-          <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
-            Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
-          </p>
-        </div>
+        {/* ─── Timeline / Core Process Steps ─── */}
+        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
+          <div className="text-center mb-16">
+            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
+              How it works
+            </span>
+            <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
+              Build Your Neighborhood Brand
+            </h2>
+            <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
+              Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
+            </p>
+          </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {PROCESS_STEPS.map((ps) => (
-            <div
-              key={ps.step}
-              className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
-            >
-              <div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
-                {ps.step}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {PROCESS_STEPS.map((ps) => (
+              <div
+                key={ps.step}
+                className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
+              >
+                <div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
+                  {ps.step}
+                </div>
+                <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
+                  <MaterialIcon icon={ps.icon} size={28} />
+                </div>
+                <h3 className="font-display text-xl font-black text-brand-dark mb-3 text-left">
+                  {ps.title}
+                </h3>
+                <p className="text-body-sm text-on-surface-variant leading-relaxed text-left">
+                  {ps.descr}
+                </p>
               </div>
-              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
-                <MaterialIcon icon={ps.icon} size={28} />
-              </div>
-              <h3 className="font-display text-xl font-black text-brand-dark mb-3">
-                {ps.title}
-              </h3>
-              <p className="text-body-sm text-on-surface-variant leading-relaxed">
-                {ps.descr}
-              </p>
-            </div>
-          ))}
-        </div>
-      </section>
+            ))}
+          </div>
+        </section>
 
-      {/* ─── Grid Stats & Value Prop ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
-        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
+        {/* ─── Grid Stats & Value Prop ─── */}
+        <section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
           <div className="grid lg:grid-cols-12 gap-16 items-center">
-            
             {/* Left side: features block (7 cols) */}
-            <div className="lg:col-span-7">
+            <div className="lg:col-span-7 text-left">
               <span className="text-label-sm font-black text-primary uppercase tracking-widest">
                 Our features
               </span>
@@ -220,7 +216,7 @@ export default function BusinessesPage() {
             </div>
 
             {/* Right side: stats quadrant (5 cols) */}
-            <div className="lg:col-span-5 grid grid-cols-2 gap-6">
+            <div className="lg:col-span-5 grid grid-cols-2 gap-6 text-left">
               {STATS.map((stat, i) => (
                 <div
                   key={stat.label}
@@ -246,14 +242,11 @@ export default function BusinessesPage() {
                 </div>
               ))}
             </div>
-
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* ─── Join/Download Call to Action ─── */}
-      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24 text-center">
-        <div className="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
+        {/* ─── Join/Download Call to Action ─── */}
+        <section className="bg-primary rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden p-12 md:p-20 relative text-center">
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(203,157,248,0.18),transparent_50%)] animate-pulse-subtle" />
           <div className="relative z-10 max-w-2xl mx-auto text-on-primary">
             <h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
@@ -281,8 +274,8 @@ export default function BusinessesPage() {
               </Link>
             </div>
           </div>
-        </div>
-      </section>
-    </div>
+        </section>
+      </div>
+    </main>
   );
 }
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 33e9581..048e4b2 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Image from "next/image";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { ContactForm } from "@/components/contact/ContactForm";
 import type { Metadata } from "next";
@@ -11,10 +10,9 @@ export const metadata: Metadata = {
 
 export default function ContactPage() {
   return (
-    <div className="bg-[#E6D7EA] min-h-screen pt-20 md:pt-24 lg:pt-28 pb-10 md:pb-16 flex flex-col gap-4 md:gap-6 lg:gap-8">
-      
-      {/* ─── Redesigned Hero/Contact Section ─── */}
-      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
+    <main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
+      <div className="page-frame">
+        {/* ─── Redesigned Hero/Contact Section ─── */}
         <section className="bg-brand-dark rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden min-h-[720px] flex items-center relative px-6 py-16 md:px-10 md:py-20 lg:px-16 lg:py-24">
           {/* Subtle decorative blurred purple glow behind left content */}
           <div className="absolute left-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-primary/25 blur-[120px] pointer-events-none z-0" />
@@ -23,7 +21,7 @@ export default function ContactPage() {
             <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
               
               {/* Left Column — MUST BE VISIBLE */}
-              <div className="relative z-10 text-white max-w-[580px]">
+              <div className="relative z-10 text-white max-w-[580px] text-left">
                 <span className="text-brand-accent uppercase tracking-[0.18em] font-bold text-xs block">
                   LET’S CONNECT
                 </span>
@@ -79,99 +77,97 @@ export default function ContactPage() {
             </div>
           </div>
         </section>
-      </div>
 
-      {/* ─── Four Contact Info Cards ─── */}
-      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          
-          {/* Card 1: Location */}
-          <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
-            <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
-              <MaterialIcon icon="location_on" size={28} className="text-primary" />
-            </div>
-            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
-            <p className="text-body-sm text-on-surface-variant leading-relaxed">
-              Nearle HQ, 424, Diwan Bahadur Rd,<br />
-              Opposite To Sri Krishna Sweets, R.S. Puram,<br />
-              Coimbatore, Tamil Nadu 641002
-            </p>
-            <a 
-              href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
-            >
-              Get Directions 
-              <MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
-            </a>
-          </div>
-
-          {/* Card 2: Phones */}
-          <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
-            <div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
-              <MaterialIcon icon="call" size={28} className="text-secondary" />
-            </div>
-            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
-            <p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
-              <span>+91 80 4912 3456</span>
-              <span>+91 422 491 2345</span>
-            </p>
-            <div className="mt-auto pt-4 flex gap-4">
+        {/* ─── Four Contact Info Cards ─── */}
+        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 px-6 md:px-12">
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            
+            {/* Card 1: Location */}
+            <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
+              <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
+                <MaterialIcon icon="location_on" size={28} className="text-primary" />
+              </div>
+              <h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
+              <p className="text-body-sm text-on-surface-variant leading-relaxed">
+                Nearle HQ, 424, Diwan Bahadur Rd,<br />
+                Opposite To Sri Krishna Sweets, R.S. Puram,<br />
+                Coimbatore, Tamil Nadu 641002
+              </p>
               <a 
-                href="tel:+918049123456"
-                className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
+                href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
               >
-                Helpdesk 
-                <MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
+                Get Directions 
+                <MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
               </a>
             </div>
-          </div>
 
-          {/* Card 3: Email */}
-          <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
-            <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
-              <MaterialIcon icon="mail" size={28} className="text-primary" />
+            {/* Card 2: Phones */}
+            <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
+              <div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
+                <MaterialIcon icon="call" size={28} className="text-secondary" />
+              </div>
+              <h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
+              <p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
+                <span>+91 80 4912 3456</span>
+                <span>+91 422 491 2345</span>
+              </p>
+              <div className="mt-auto pt-4 flex gap-4">
+                <a 
+                  href="tel:+918049123456"
+                  className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
+                >
+                  Helpdesk 
+                  <MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
+                </a>
+              </div>
             </div>
-            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
-            <p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
-              <a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
-              <a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
-            </p>
-            <a 
-              href="mailto:support@nearle.in"
-              className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
-            >
-              Write to us 
-              <MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
-            </a>
-          </div>
 
-          {/* Card 4: Working Hours */}
-          <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
-            <div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
-              <MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
+            {/* Card 3: Email */}
+            <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
+              <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
+                <MaterialIcon icon="mail" size={28} className="text-primary" />
+              </div>
+              <h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
+              <p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
+                <a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
+                <a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
+              </p>
+              <a 
+                href="mailto:support@nearle.in"
+                className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
+              >
+                Write to us 
+                <MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
+              </a>
             </div>
-            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
-            <p className="text-body-sm text-on-surface-variant leading-relaxed">
-              Monday - Saturday<br />
-              9:00 AM - 6:00 PM<br />
-              <span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
-            </p>
-            <div className="mt-auto pt-4">
-              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
-                <span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
-                Helpdesk Active
-              </span>
+
+            {/* Card 4: Working Hours */}
+            <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
+              <div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
+                <MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
+              </div>
+              <h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
+              <p className="text-body-sm text-on-surface-variant leading-relaxed">
+                Monday - Saturday<br />
+                9:00 AM - 6:00 PM<br />
+                <span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
+              </p>
+              <div className="mt-auto pt-4">
+                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
+                  <span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
+                  Helpdesk Active
+                </span>
+              </div>
             </div>
+
           </div>
+        </section>
 
-        </div>
-      </div>
-
-      {/* ─── Map Section ─── */}
-      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
-        <section className="bg-white rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8 shadow-lg">
+        {/* ─── Map Section ─── */}
+        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8">
           <div className="relative w-full h-[450px]">
             <iframe
               title="Nearle Coimbatore Location Map"
@@ -197,7 +193,6 @@ export default function ContactPage() {
           </div>
         </section>
       </div>
-
-    </div>
+    </main>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 6533f1d..bc598bf 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1131,6 +1131,41 @@ body {
   z-index: 1;
 }
 
+/* ─── Shared Premium Framed Layout Classes ─── */
+.page-canvas {
+  @apply bg-[#E6D7EA] flex flex-col gap-0;
+}
+
+.page-frame {
+  @apply mx-auto w-full;
+  max-width: min(100% - 16px, 1560px);
+}
+
+@media (min-width: 640px) {
+  .page-frame {
+    max-width: min(100% - 24px, 1560px);
+  }
+}
+
+@media (min-width: 1024px) {
+  .page-frame {
+    max-width: min(100% - 40px, 1680px);
+  }
+}
+
+@media (min-width: 1536px) {
+  .page-frame {
+    max-width: min(100% - 56px, 1840px);
+  }
+}
+
+@media (min-width: 2560px) {
+  .page-frame {
+    max-width: min(100% - 96px, 2200px);
+  }
+}
+
+
 
 
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 12e63bc..22eb1a9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,29 +8,17 @@ import { StoreQRSection } from "@/components/home/StoreQRSection";
 
 export default function HomePage() {
   return (
-    <div className="bg-[#E6D7EA] min-h-screen pt-20 md:pt-24 lg:pt-28 pb-10 md:pb-16 flex flex-col gap-4 md:gap-6 lg:gap-8">
-      <div className="w-full max-w-[1560px] mx-auto px-4 md:px-6 lg:px-8 xl:px-10">
+    <main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-2 md:pt-3 lg:pt-4 pb-0">
+      <div className="page-frame">
         <Hero />
-      </div>
-      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
         <ServiceCategories />
-      </div>
-      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
         <WhyNearle />
-      </div>
-      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
         <HowItWorks />
-      </div>
-      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
         <HyperlocalFeatures />
-      </div>
-      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
         <BusinessSection />
-      </div>
-      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
         <StoreQRSection />
       </div>
-    </div>
+    </main>
   );
 }
 
diff --git a/src/app/people/page.tsx b/src/app/people/page.tsx
index 76465ae..dd41b52 100644
--- a/src/app/people/page.tsx
+++ b/src/app/people/page.tsx
@@ -145,81 +145,80 @@ export default function PeoplePage() {
   }, []);
 
   return (
-    <div className="relative min-h-screen bg-background">
-      
-      {/* ─── Hero Section ─── */}
-      <section className="hero-section relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center">
-        {/* Background Image with Overlay */}
-        <div className="hero-background select-none pointer-events-none">
-          <Image
-            src="/nearle people.png"
-            alt="Nearle People Background"
-            fill
-            sizes="100vw"
-            className="object-cover object-right"
-            priority
-          />
-        </div>
+    <main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
+      <div className="page-frame">
+        {/* ─── Hero Section ─── */}
+        <section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
+          {/* Background Image with Overlay */}
+          <div className="hero-background select-none pointer-events-none">
+            <Image
+              src="/nearle people.png"
+              alt="Nearle People Background"
+              fill
+              sizes="100vw"
+              className="object-cover object-right"
+              priority
+            />
+          </div>
 
-        <div className="hero-content relative z-10 mx-auto max-w-container-max">
-          <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
-            Nearle for People
-          </p>
+          <div className="hero-content relative z-10 mx-auto max-w-container-max">
+            <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
+              Nearle for People
+            </p>
 
-          <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
-            <span>Redefining Local Living.</span>
-            <br />
-            <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
-              {ROTATOR_SLIDES[slideIndex]}
+            <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
+              <span>Redefining Local Living.</span>
+              <br />
+              <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
+                {ROTATOR_SLIDES[slideIndex]}
+              </span>
+            </h1>
+          </div>
+        </section>
+
+        {/* ─── 9 Core Offerings Bento Grid ─── */}
+        <section className="experience-section bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
+          <div className="mb-16">
+            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
+              What we offer
             </span>
-          </h1>
-        </div>
-      </section>
+            <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
+              Everything You Need, Just a Click Away
+            </h2>
+            <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
+              Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
+            </p>
+          </div>
 
-      {/* ─── 9 Core Offerings Bento Grid ─── */}
-      <section className="experience-section mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
-        <div className="text-center mb-16">
-          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
-            What we offer
-          </span>
-          <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
-            Everything You Need, Just a Click Away
-          </h2>
-          <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
-            Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
-          </p>
-        </div>
-
-        <div className="experience-grid">
-          {OFFERINGS.map((offering) => (
-            <article
-              key={offering.title}
-              className="experience-card"
-            >
-              <Image
-                src={offering.image}
-                alt={offering.title}
-                fill
-                sizes="(max-width: 1023px) 100vw, 33vw"
-                className="experience-card__image"
-              />
-              <div className="experience-card__overlay" />
-              <div className="experience-card__content">
-                <div className="experience-card__icon">
-                  <MaterialIcon icon={offering.icon} size={22} className="text-white" />
+          <div className="experience-grid">
+            {OFFERINGS.map((offering) => (
+              <article
+                key={offering.title}
+                className="experience-card"
+              >
+                <Image
+                  src={offering.image}
+                  alt={offering.title}
+                  fill
+                  sizes="(max-width: 1023px) 100vw, 33vw"
+                  className="experience-card__image"
+                />
+                <div className="experience-card__overlay" />
+                <div className="experience-card__content text-left">
+                  <div className="experience-card__icon">
+                    <MaterialIcon icon={offering.icon} size={22} className="text-white" />
+                  </div>
+                  <h3>{offering.title}</h3>
+                  <p>{offering.descr}</p>
                 </div>
-                <h3>{offering.title}</h3>
-                <p>{offering.descr}</p>
-              </div>
-            </article>
-          ))}
-        </div>
-      </section>
+              </article>
+            ))}
+          </div>
+        </section>
 
-      {/* ─── Localized Stats Block ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
-        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
-          <div className="text-center mb-12">
+        {/* ─── Localized Stats Block ─── */}
+        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
+          <div className="mb-12">
             <span className="text-label-sm font-black text-primary uppercase tracking-widest">
               Nearle Network
             </span>
@@ -247,12 +246,10 @@ export default function PeoplePage() {
               </div>
             ))}
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* ─── Ready to Download Section ─── */}
-      <section id="download-section" className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-20">
-        <div className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] rounded-[2.5rem] p-8 md:p-12 lg:p-14 relative overflow-hidden shadow-2xl border border-white/5">
+        {/* ─── Ready to Download Section ─── */}
+        <section id="download-section" className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden p-8 md:p-12 lg:p-14 relative text-center">
           {/* Subtle ambient light gradient overlays */}
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(224,200,247,0.15),transparent_70%)] pointer-events-none" />
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_80%,rgba(123,248,161,0.06),transparent_50%)] pointer-events-none" />
@@ -452,8 +449,8 @@ export default function PeoplePage() {
                     className="text-secondary"
                   />
                 </div>
-                <div className="text-left">
-                  <p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p>
+                <div className="text-left text-brand-dark">
+                  <p className="text-xs font-black leading-tight">Order Confirmed</p>
                   <p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
                 </div>
               </div>
@@ -555,8 +552,8 @@ export default function PeoplePage() {
                   className="text-secondary"
                 />
               </div>
-              <div className="text-left">
-                <p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p>
+              <div className="text-left text-brand-dark">
+                <p className="text-xs font-black leading-tight">Order Confirmed</p>
                 <p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
               </div>
             </div>
@@ -596,8 +593,8 @@ export default function PeoplePage() {
               </div>
             </div>
           </div>
-        </div>
-      </section>
-    </div>
+        </section>
+      </div>
+    </main>
   );
 }
diff --git a/src/components/home/BusinessSection.tsx b/src/components/home/BusinessSection.tsx
index 0b25564..2132a60 100644
--- a/src/components/home/BusinessSection.tsx
+++ b/src/components/home/BusinessSection.tsx
@@ -31,8 +31,8 @@ const BENEFITS = [
 
 export function BusinessSection() {
   return (
-    <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 lg:py-16 px-6 md:px-12 lg:px-20 xl:px-24">
-      <div className="max-w-container-max mx-auto">
+    <section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6">
+      <div className="w-full">
         
         {/* Merchant Section Grid */}
         <div className="grid lg:grid-cols-12 gap-16 items-center">
@@ -100,7 +100,7 @@ export function BusinessSection() {
         </div>
 
         {/* CURVED PROMO BANNER (Bottom CTA Block) */}
-        <div className="mt-16 md:mt-20 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
+        <div className="mt-8 md:mt-10 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
           {/* Decorative background vectors */}
           <div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
           <div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index cb61ffb..8e35bae 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -28,8 +28,8 @@ const QUICK_LINKS = [
 
 export function Hero() {
   return (
-    <>
-      <div className="hero rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden">
+    <section className="relative pb-4 md:pb-6">
+      <div className="relative overflow-hidden rounded-[1.75rem] md:rounded-[2.25rem] bg-[#16001F]">
         {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
         <div className="hero-dark-panel select-none pointer-events-none">
           {/* Subtle Background Dot Texture */}
@@ -50,7 +50,7 @@ export function Hero() {
         </div>
 
         {/* ─── Main Content Wrapper ─── */}
-        <div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
+        <div className="hero-stage min-h-0 pb-10 md:pb-12 relative w-full flex flex-col z-10 md:justify-center md:items-start">
           {/* Left Column: Text & Search Content */}
           <div className="hero-content text-white select-none">
             <span className="inline-block text-xs font-black tracking-widest uppercase mb-5 bg-brand-accent/15 px-4 py-1.5 rounded-full border border-brand-accent/20 text-brand-accent">
@@ -141,7 +141,7 @@ export function Hero() {
       </div>
 
       {/* Overlapping Quick Category Links */}
-      <div className="service-cards-wrapper max-w-container-max mx-auto">
+      <div className="service-cards-wrapper max-w-container-max mx-auto relative z-20 -mt-8 md:-mt-10 lg:-mt-12">
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
           {QUICK_LINKS.map((item) => (
             <div
@@ -174,6 +174,6 @@ export function Hero() {
           ))}
         </div>
       </div>
-    </>
+    </section>
   );
 }
diff --git a/src/components/home/HowItWorks.tsx b/src/components/home/HowItWorks.tsx
index b834793..2aca737 100644
--- a/src/components/home/HowItWorks.tsx
+++ b/src/components/home/HowItWorks.tsx
@@ -26,10 +26,10 @@ const STEPS = [
 
 export function HowItWorks() {
   return (
-    <section className="bg-[#EEDDF3] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden pt-12 md:pt-16 pb-8 md:pb-10 px-6 md:px-12 lg:px-20 xl:px-24">
-      <div className="max-w-container-max mx-auto">
+    <section className="border-t border-brand-dark/10 pt-12 md:pt-16 lg:pt-20 pb-6 md:pb-8 lg:pb-10">
+      <div className="w-full">
         {/* Header Section */}
-        <div className="text-center mb-8 md:mb-10">
+        <div className="text-center mb-12 md:mb-16">
           <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
             Simple Process
           </span>
diff --git a/src/components/home/HyperlocalFeatures.tsx b/src/components/home/HyperlocalFeatures.tsx
index 1150507..8262c60 100644
--- a/src/components/home/HyperlocalFeatures.tsx
+++ b/src/components/home/HyperlocalFeatures.tsx
@@ -27,42 +27,42 @@ const FEATURES = [
 
 export function HyperlocalFeatures() {
   return (
-    <section className="bg-[#F6F1F8] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/50 overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24 relative">
+    <section className="pt-4 md:pt-5 lg:pt-6 pb-2 md:pb-3 lg:pb-4 relative">
       {/* Scoped CSS styles for precise layout enforcement */}
       <style>{`
          @media (min-width: 901px) {
-           .custom-care-grid {
-             grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
-             gap: 64px !important;
-             width: min(1360px, 100%) !important;
-           }
-           .custom-care-visual {
-             max-width: 530px !important;
-             height: 580px !important;
-           }
-           .custom-care-card {
-             min-height: 580px !important;
-             padding: 60px !important;
-             display: flex !important;
-             flex-direction: column !important;
-             justify-content: center !important;
-           }
-         }
-         @media (max-width: 900px) {
-           .custom-care-grid {
-             grid-template-columns: 1fr !important;
-             gap: 32px !important;
-             width: 100% !important;
-           }
-           .custom-care-visual {
-             max-width: 420px !important;
-             height: 460px !important;
-           }
-           .custom-care-card {
-             min-height: auto !important;
-             padding: 36px 24px !important;
-           }
-         }
+            .custom-care-grid {
+              grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
+              gap: 56px !important;
+              width: min(1360px, 100%) !important;
+            }
+            .custom-care-visual {
+              max-width: 530px !important;
+              height: 580px !important;
+            }
+            .custom-care-card {
+              min-height: 580px !important;
+              padding: 60px !important;
+              display: flex !important;
+              flex-direction: column !important;
+              justify-content: center !important;
+            }
+          }
+          @media (max-width: 900px) {
+            .custom-care-grid {
+              grid-template-columns: 1fr !important;
+              gap: 40px !important;
+              width: 100% !important;
+            }
+            .custom-care-visual {
+              max-width: 420px !important;
+              height: 460px !important;
+            }
+            .custom-care-card {
+              min-height: auto !important;
+              padding: 36px 24px !important;
+            }
+          }
        `}</style>
 
       {/* Subtle background radial glows */}
diff --git a/src/components/home/ServiceCategories.tsx b/src/components/home/ServiceCategories.tsx
index ea96838..0e7c40e 100644
--- a/src/components/home/ServiceCategories.tsx
+++ b/src/components/home/ServiceCategories.tsx
@@ -55,8 +55,8 @@ const CATEGORIES = [
 
 export function ServiceCategories() {
   return (
-    <section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24">
-      <div className="max-w-container-max mx-auto">
+    <section className="pt-10 md:pt-14 lg:pt-16 pb-2 md:pb-3 lg:pb-4">
+      <div className="w-full">
         {/* Header Section */}
         <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 md:mb-16 gap-6">
           <div>
diff --git a/src/components/home/StoreQRSection.tsx b/src/components/home/StoreQRSection.tsx
index 7f91c4d..e773a9f 100644
--- a/src/components/home/StoreQRSection.tsx
+++ b/src/components/home/StoreQRSection.tsx
@@ -9,12 +9,12 @@ const FLOW_STEPS = [
 
 export function StoreQRSection() {
   return (
-    <section id="download" className="bg-gradient-to-br from-[#1C0024] to-[#0D0012] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24 text-white relative min-h-[640px] flex items-center">
+    <section id="download" className="bg-gradient-to-br from-[#1C0024] to-[#0D0012] rounded-[1.75rem] md:rounded-[2.25rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-white relative flex items-center mt-2 md:mt-3 mb-2 md:mb-3">
       {/* Background ambient glowing details */}
       <div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
       <div className="absolute left-[-10%] bottom-[-10%] w-[50%] h-[50%] rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
 
-      <div className="w-full max-w-container-max mx-auto relative z-10">
+      <div className="w-full relative z-10">
         
         {/* ─── DESKTOP LAYOUT (lg and above) ─── */}
         <div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center">
diff --git a/src/components/home/WhyNearle.tsx b/src/components/home/WhyNearle.tsx
index 0823462..b08e1fc 100644
--- a/src/components/home/WhyNearle.tsx
+++ b/src/components/home/WhyNearle.tsx
@@ -29,8 +29,8 @@ const CARDS = [
 
 export function WhyNearle() {
   return (
-    <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 lg:py-14 px-6 md:px-12 lg:px-20 xl:px-24">
-      <div className="max-w-container-max mx-auto">
+    <section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6">
+      <div className="w-full">
         {/* Header Section */}
         <div className="text-center mb-8 md:mb-10">
           <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full">
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index d2218d1..57bc11d 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -57,7 +57,7 @@ export function Footer() {
   const [submitSuccess, setSubmitSuccess] = useState(false);
 
   const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const { name, value } = e.target;
     setFormData((prev) => ({
@@ -123,10 +123,7 @@ export function Footer() {
 
   const brandCol = (
     <div className="footer-brand min-w-0 self-start">
-      <Link
-        href="/"
-        className="mb-4 inline-block"
-      >
+      <Link href="/" className="mb-4 inline-block">
         <Image
           src="/logo-v2.png"
           alt="Nearle"
@@ -137,23 +134,16 @@ export function Footer() {
         />
       </Link>
       <p className="footer-desc mb-4 text-white/80">
-        India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
+        India&apos;s leading hyperlocal neighborhood network, empowering
+        communities and verified local businesses within 2km.
       </p>
 
       {/* Social Links */}
       <div className="flex gap-4">
-        <a
-          href="#"
-          className="footer-social-link"
-          aria-label="Share"
-        >
+        <a href="#" className="footer-social-link" aria-label="Share">
           <MaterialIcon icon="share" size={24} />
         </a>
-        <a
-          href="#"
-          className="footer-social-link"
-          aria-label="Website"
-        >
+        <a href="#" className="footer-social-link" aria-label="Website">
           <MaterialIcon icon="public" size={24} />
         </a>
       </div>
@@ -161,8 +151,8 @@ export function Footer() {
   );
 
   return (
-    <footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 py-8 md:py-12 lg:py-14 w-full mt-24">
-      <div className="mx-auto max-w-[1560px]">
+    <footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 pb-0 w-full mt-3 md:mt-4">
+      <div className="mx-auto" style={{ maxWidth: "min(100% - 48px, 1520px)" }}>
         <div className="bg-[#120217] rounded-[1.5rem] md:rounded-[2rem] lg:rounded-[2.5rem] overflow-hidden border border-white/10 shadow-[0_18px_45px_rgba(20,0,30,0.28)]">
           {/* Top Helpdesk Bar */}
           <div className="bg-[#2A0838] border-b border-white/10 px-5 py-4 md:px-8 md:py-5 flex flex-col md:flex-row justify-between items-center gap-6">
@@ -171,7 +161,9 @@ export function Footer() {
                 <MaterialIcon icon="headset_mic" size={24} />
               </div>
               <div className="text-left">
-                <h4 className="text-headline-md font-black text-white">24/7 Neighborhood Helpdesk</h4>
+                <h4 className="text-headline-md font-black text-white">
+                  24/7 Neighborhood Helpdesk
+                </h4>
                 <p className="text-sm font-semibold text-white/70 mt-0.5">
                   Need immediate assistance with an order or local service?
                 </p>
@@ -181,18 +173,24 @@ export function Footer() {
               href="tel:+918049123456"
               className="flex items-center gap-3 bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-6 py-3 rounded-full text-base shadow-lg transition-all duration-300 hover:-translate-y-0.5 shrink-0"
             >
-              <MaterialIcon icon="phone" size={20} className="animate-pulse-subtle" />
+              <MaterialIcon
+                icon="phone"
+                size={20}
+                className="animate-pulse-subtle"
+              />
               <span>+91 80 4912 3456</span>
             </a>
           </div>
 
           {/* Main Footer Content */}
           <div className="px-5 pt-10 pb-8 md:px-8 md:pt-12 md:pb-10 lg:px-12 lg:pt-12 lg:pb-10 text-white">
-            <div className={
-              isContactPage 
-                ? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10" 
-                : "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start"
-            }>
+            <div
+              className={
+                isContactPage
+                  ? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10"
+                  : "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start"
+              }
+            >
               {isContactPage ? (
                 <>
                   {/* Brand Column */}
@@ -237,9 +235,12 @@ export function Footer() {
                       </h4>
 
                       <p className="mt-3 text-sm leading-6 text-white/60">
-                        424, Diwan Bahadur Rd,<br />
-                        Opposite to Sri Krishna Sweets,<br />
-                        R.S. Puram, Coimbatore,<br />
+                        424, Diwan Bahadur Rd,
+                        <br />
+                        Opposite to Sri Krishna Sweets,
+                        <br />
+                        R.S. Puram, Coimbatore,
+                        <br />
                         Tamil Nadu 641002
                       </p>
 
@@ -280,7 +281,12 @@ export function Footer() {
 
                           <div className="footer-form-row grid grid-cols-1 sm:grid-cols-2 gap-4">
                             <div className="flex flex-col text-left">
-                              <label htmlFor="footer-field-name" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Name</label>
+                              <label
+                                htmlFor="footer-field-name"
+                                className="text-xs font-black text-brand-dark/70 mb-1.5"
+                              >
+                                Your Name
+                              </label>
                               <input
                                 type="text"
                                 id="footer-field-name"
@@ -298,7 +304,12 @@ export function Footer() {
                               )}
                             </div>
                             <div className="flex flex-col text-left">
-                              <label htmlFor="footer-field-phone" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Phone</label>
+                              <label
+                                htmlFor="footer-field-phone"
+                                className="text-xs font-black text-brand-dark/70 mb-1.5"
+                              >
+                                Your Phone
+                              </label>
                               <input
                                 type="text"
                                 id="footer-field-phone"
@@ -318,7 +329,12 @@ export function Footer() {
                           </div>
 
                           <div className="flex flex-col text-left">
-                            <label htmlFor="footer-field-email" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Email Address</label>
+                            <label
+                              htmlFor="footer-field-email"
+                              className="text-xs font-black text-brand-dark/70 mb-1.5"
+                            >
+                              Your Email Address
+                            </label>
                             <input
                               type="email"
                               id="footer-field-email"
@@ -337,7 +353,12 @@ export function Footer() {
                           </div>
 
                           <div className="flex flex-col text-left">
-                            <label htmlFor="footer-field-message" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Message</label>
+                            <label
+                              htmlFor="footer-field-message"
+                              className="text-xs font-black text-brand-dark/70 mb-1.5"
+                            >
+                              Your Message
+                            </label>
                             <textarea
                               id="footer-field-message"
                               name="message"
@@ -382,7 +403,11 @@ export function Footer() {
                 <p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
                 <div className="flex flex-col md:flex-row gap-2 md:gap-6 text-left">
                   {LEGAL.map((link) => (
-                    <Link key={link.label} href={link.href} className="hover:text-[#e0c8f7] transition-colors">
+                    <Link
+                      key={link.label}
+                      href={link.href}
+                      className="hover:text-[#e0c8f7] transition-colors"
+                    >
                       {link.label}
                     </Link>
                   ))}
@@ -399,7 +424,6 @@ export function Footer() {
 // Ensure default export is also available for Next.js app router client components if needed
 export default Footer;
 
-
 function FooterCol({
   title,
   links,
@@ -409,16 +433,11 @@ function FooterCol({
 }) {
   return (
     <div>
-      <h5 className="footer-column-title">
-        {title}
-      </h5>
+      <h5 className="footer-column-title">{title}</h5>
       <ul className="footer-links-list">
         {links.map((l) => (
           <li key={l.label}>
-            <Link
-              href={l.href}
-              className="footer-link inline-block"
-            >
+            <Link href={l.href} className="footer-link inline-block">
               {l.label}
             </Link>
           </li>
diff --git a/take_screenshot.js b/take_screenshot.js
new file mode 100644
index 0000000..67f7cc0
--- /dev/null
+++ b/take_screenshot.js
@@ -0,0 +1,35 @@
+const puppeteer = require('puppeteer-core');
+const path = require('path');
+
+(async () => {
+  const browser = await puppeteer.launch({
+    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    headless: true
+  });
+
+  const page = await browser.newPage();
+
+  // Desktop Screenshot (1440px)
+  await page.setViewport({ width: 1440, height: 900 });
+  try {
+    await page.goto('http://localhost:3000', { waitUntil: 'networkidle2', timeout: 15000 });
+    console.log('Successfully navigated to http://localhost:3000');
+  } catch (err) {
+    console.error('Navigation failed:', err);
+    await browser.close();
+    process.exit(1);
+  }
+
+  const desktopPath = path.join(__dirname, 'desktop_screenshot.png');
+  await page.screenshot({ path: desktopPath, fullPage: true });
+  console.log('Saved desktop screenshot to:', desktopPath);
+
+  // Mobile Screenshot (390px)
+  await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
+  await page.goto('http://localhost:3000', { waitUntil: 'networkidle2', timeout: 15000 });
+  const mobilePath = path.join(__dirname, 'mobile_screenshot.png');
+  await page.screenshot({ path: mobilePath, fullPage: true });
+  console.log('Saved mobile screenshot to:', mobilePath);
+
+  await browser.close();
+})();