diff --git a/src/pages/GrowBusinessPage.tsx b/src/pages/GrowBusinessPage.tsx
index d7c96d8..0f32cb0 100644
--- a/src/pages/GrowBusinessPage.tsx
+++ b/src/pages/GrowBusinessPage.tsx
@@ -335,13 +335,16 @@ export const GrowBusinessPage: React.FC = () => {
               <div key={idx} className="column is-3-desktop is-6-tablet is-12-mobile">
                 <div 
                   onClick={() => scrollToInitiative(card.target)}
-                  className="card p-4 h-100 trad-card-interactive" 
+                  className="card p-4 trad-card-interactive" 
                   style={{ 
                     borderRadius: '14px', 
-                    border: '1px solid #EAE6DF', 
+                    border: '1px solid #E5E7EB', 
                     backgroundColor: '#FFFFFF',
-                    boxShadow: '0 2px 8px rgba(0,0,0,0.02)',
-                    cursor: 'pointer'
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.03)',
+                    cursor: 'pointer',
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
                   <div 
@@ -350,16 +353,17 @@ export const GrowBusinessPage: React.FC = () => {
                       width: '36px',
                       height: '36px',
                       borderRadius: '50%',
-                      backgroundColor: '#E6F4EA',
-                      color: '#155E54'
+                      backgroundColor: '#FAF2F4',
+                      color: 'var(--trad-maroon)',
+                      flexShrink: 0
                     }}
                   >
                     {card.icon}
                   </div>
-                  <h3 className="title is-size-6 has-text-weight-bold mb-2" style={{ color: '#111827' }}>
+                  <h3 className="title is-size-6 has-text-weight-bold mb-2" style={{ color: '#111827', fontSize: '0.95rem' }}>
                     {card.title}
                   </h3>
-                  <p style={{ fontSize: '12px', color: '#4B5563', lineHeight: 1.5, margin: 0 }}>
+                  <p style={{ fontSize: '0.85rem', color: '#4B5563', lineHeight: 1.5, margin: 0, flex: '1 1 auto' }}>
                     {card.desc}
                   </p>
                 </div>
@@ -526,21 +530,26 @@ export const GrowBusinessPage: React.FC = () => {
             {advantages.map((adv, idx) => (
               <div key={idx} className="column is-4-desktop is-12-tablet">
                 <div 
-                  className="card p-5 h-100 has-text-centered" 
+                  className="card p-5 has-text-centered trad-card-interactive" 
                   style={{
                     borderRadius: '16px',
-                    border: '1px solid #EAE6DF',
+                    border: '1px solid #E5E7EB',
                     backgroundColor: '#FFFFFF',
-                    boxShadow: '0 4px 12px rgba(0,0,0,0.02)'
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.03)',
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    padding: '1.5rem 1.25rem'
                   }}
                 >
-                  <div style={{ fontSize: '1.75rem', fontWeight: 800, color: '#155E54', marginBottom: '6px' }}>
+                  <div style={{ fontSize: '1.65rem', fontWeight: 800, color: 'var(--trad-maroon)', marginBottom: '6px' }}>
                     {adv.highlight}
                   </div>
-                  <div style={{ fontSize: '13px', fontWeight: 700, color: '#1F2937', marginBottom: '10px' }}>
+                  <div style={{ fontSize: '0.95rem', fontWeight: 700, color: '#111827', marginBottom: '8px' }}>
                     {adv.title}
                   </div>
-                  <p style={{ fontSize: '12.5px', color: '#4B5563', lineHeight: 1.5, margin: 0 }}>
+                  <p style={{ fontSize: '0.875rem', color: '#4B5563', lineHeight: 1.55, margin: 0 }}>
                     {adv.desc}
                   </p>
                 </div>
diff --git a/src/pages/HowItWorksPage.tsx b/src/pages/HowItWorksPage.tsx
index 99ffe96..abd0a79 100644
--- a/src/pages/HowItWorksPage.tsx
+++ b/src/pages/HowItWorksPage.tsx
@@ -190,33 +190,40 @@ export const HowItWorksPage: React.FC = () => {
               <div key={item.num} className="column is-2-desktop is-4-tablet is-6-mobile">
                 <div 
                   onClick={() => scrollToStep(item.target)}
-                  className="card p-3 has-text-centered h-100 is-flex is-flex-direction-column is-align-items-center is-justify-content-center trad-card-interactive"
+                  className="card p-3 has-text-centered trad-card-interactive"
                   style={{ 
                     borderRadius: '14px', 
-                    border: '1px solid var(--trad-border)', 
+                    border: '1px solid #E5E7EB', 
                     backgroundColor: '#FFFFFF',
                     cursor: 'pointer',
+                    minHeight: '115px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.03)',
                     transition: 'transform 0.2s ease, box-shadow 0.2s ease'
                   }}
                 >
                   <div 
                     className="is-flex is-align-items-center is-justify-content-center mb-2"
                     style={{ 
-                      width: '28px', 
-                      height: '28px', 
+                      width: '30px', 
+                      height: '30px', 
                       borderRadius: '50%', 
                       backgroundColor: 'var(--trad-maroon)', 
                       color: '#ffffff',
                       fontSize: '0.85rem',
-                      fontWeight: 700
+                      fontWeight: 700,
+                      flexShrink: 0
                     }}
                   >
                     {item.num}
                   </div>
-                  <div className="is-size-7 has-text-weight-bold" style={{ color: '#1A1A1A' }}>
+                  <div style={{ fontSize: '0.85rem', fontWeight: 700, color: '#111827', lineHeight: 1.25 }}>
                     {item.title}
                   </div>
-                  <div className="is-size-7 has-text-grey" style={{ fontSize: '0.72rem' }}>
+                  <div style={{ fontSize: '0.73rem', color: '#6B7280', marginTop: '2px' }}>
                     {item.sub}
                   </div>
                 </div>
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 5df9cc8..9b98913 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -113,32 +113,32 @@ export const LandingPage: React.FC = () => {
   const journeySteps = [
     {
       num: '1',
-      title: '1. Create',
+      title: 'Create',
       desc: 'Craft your unique handmade creations with traditional skill, sustainable materials, and artisan pride.'
     },
     {
       num: '2',
-      title: '2. List',
+      title: 'List',
       desc: 'Upload photos, specifications & set fair pricing with our zero listing fee support and catalog assistance.'
     },
     {
       num: '3',
-      title: '3. Tell your story',
+      title: 'Tell your story',
       desc: 'Showcase the artisan heritage, technique and cultural narrative behind each craft to connect with buyers.'
     },
     {
       num: '4',
-      title: '4. Order',
+      title: 'Order',
       desc: 'Receive confirmed domestic and international orders seamlessly through your seller portal with instant alerts.'
     },
     {
       num: '5',
-      title: '5. Shipment',
+      title: 'Shipment',
       desc: 'Doorstep courier pickup across 15,000+ pincodes with eco-friendly protective packaging and live tracking.'
     },
     {
       num: '6',
-      title: '6. Payment',
+      title: 'Payment',
       desc: 'Direct bank payout with 100% transparency, timely settlement cycles within 7 days, and zero hidden deductions.'
     }
   ];
@@ -147,20 +147,20 @@ export const LandingPage: React.FC = () => {
     <div className="landing-page-exact">
       {/* 1. HeroSection */}
       <section className="section py-6" style={{ background: 'linear-gradient(180deg, #FDFCFA 0%, #FFFFFF 100%)', borderBottom: '1px solid var(--trad-border)' }}>
-        <div className="container is-widescreen px-4">
-          <div className="columns is-vcentered is-variable is-8">
+        <div className="container is-widescreen px-4" style={{ maxWidth: '1320px' }}>
+          <div className="columns is-vcentered is-variable is-6-desktop is-4-tablet">
             {/* Hero Left Column */}
             <div className="column is-7-desktop is-12-tablet">
-              <div className="tag is-trad-wine is-rounded mb-4 py-2 px-3">
+              <div className="tag is-trad-wine is-rounded mb-4 py-2 px-3" style={{ fontSize: '0.8rem' }}>
                 <span className="mr-2" style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: 'var(--trad-maroon)' }}></span>
-                <span className="has-text-weight-bold">India's Premier Artisan & Handcrafted Marketplace</span>
+                <span className="has-text-weight-bold">India's Premier Artisan &amp; Handcrafted Marketplace</span>
               </div>
 
-              <h1 className="title is-size-1-desktop is-size-2-tablet is-size-3-mobile has-text-weight-black mb-4" style={{ lineHeight: 1.15, color: '#1A1A1A' }}>
-                Sell Authentic Handcrafted Products Across India & Worldwide
+              <h1 className="title is-size-1-desktop is-size-2-tablet is-size-3-mobile has-text-weight-black mb-4" style={{ lineHeight: 1.18, color: '#111827', letterSpacing: '-0.02em' }}>
+                Sell Authentic Handcrafted Products Across India &amp; Worldwide
               </h1>
 
-              <p className="subtitle is-size-5-desktop is-size-6-mobile mb-5" style={{ color: '#4A4A4A', lineHeight: 1.6 }}>
+              <p className="subtitle is-size-5-desktop is-size-6-mobile mb-5" style={{ color: '#4B5563', lineHeight: 1.6, maxWidth: '620px' }}>
                 Empowering artisans, ODOP clusters, and regional creators with transparent pricing, comprehensive logistics, and zero upfront platform charges.
               </p>
 
@@ -186,13 +186,13 @@ export const LandingPage: React.FC = () => {
               </form>
 
               {/* Trust Indicators */}
-              <div className="is-flex is-flex-wrap-wrap is-align-items-center is-size-7 mb-4" style={{ color: '#2D3748', fontWeight: 600, gap: '0.75rem 1rem' }}>
+              <div className="is-flex is-flex-wrap-wrap is-align-items-center is-size-7 mb-4" style={{ color: '#374151', fontWeight: 600, gap: '0.75rem 1rem' }}>
                 <span className="is-flex is-align-items-center" style={{ color: '#15803D' }}>
                   <Check size={15} className="mr-1" style={{ strokeWidth: 3 }} /> Zero listing fees
                 </span>
                 <span style={{ color: '#CBD5E1' }}>•</span>
                 <span className="is-flex is-align-items-center">
-                  Fair & transparent
+                  Fair &amp; transparent
                 </span>
                 <span style={{ color: '#CBD5E1' }}>•</span>
                 <span className="is-flex is-align-items-center">
@@ -203,8 +203,8 @@ export const LandingPage: React.FC = () => {
 
             {/* Hero Right Column: Montage Image */}
             <div className="column is-5-desktop is-12-tablet">
-              <div className="card" style={{ borderRadius: '24px', overflow: 'hidden', border: '1px solid var(--trad-border)', position: 'relative' }}>
-                <div style={{ height: '360px', position: 'relative' }}>
+              <div className="card" style={{ borderRadius: '20px', overflow: 'hidden', border: '1px solid #E5E7EB', position: 'relative', boxShadow: '0 10px 30px rgba(0, 0, 0, 0.06)' }}>
+                <div style={{ height: '420px', position: 'relative', backgroundColor: '#F3F4F6' }}>
                   <img
                     src="/images/landing/hero-showcase.jpg"
                     alt="Comprehensive collective montage showcase of authentic Indian handcrafted artisan products"
@@ -213,24 +213,24 @@ export const LandingPage: React.FC = () => {
                       (e.target as HTMLImageElement).src = '/artisan_banner.jpg';
                     }}
                   />
-                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%)' }}></div>
+                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 55%)' }}></div>
 
                   {/* Top-Right Badge */}
-                  <div className="tag is-white is-rounded has-text-weight-bold" style={{ position: 'absolute', top: '16px', right: '16px', border: '1px solid var(--trad-border)', color: 'var(--trad-maroon)' }}>
-                    <span className="mr-1" style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: 'var(--trad-maroon)' }}></span>
+                  <div className="tag is-white is-rounded has-text-weight-bold" style={{ position: 'absolute', top: '16px', right: '16px', border: '1px solid #E5E7EB', color: 'var(--trad-maroon)', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
+                    <span className="mr-1.5" style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: 'var(--trad-maroon)' }}></span>
                     AUTHENTIC HANDCRAFTS
                   </div>
 
                   {/* Bottom Collective Overlay */}
-                  <div style={{ position: 'absolute', bottom: '16px', left: '16px', right: '16px', background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(8px)', borderRadius: '16px', padding: '14px 16px', border: '1px solid var(--trad-border)' }}>
+                  <div style={{ position: 'absolute', bottom: '16px', left: '16px', right: '16px', background: 'rgba(255, 255, 255, 0.96)', backdropFilter: 'blur(10px)', borderRadius: '14px', padding: '14px 16px', border: '1px solid rgba(255,255,255,0.8)', boxShadow: '0 4px 16px rgba(0,0,0,0.12)' }}>
                     <div className="is-flex is-align-items-center is-justify-content-space-between">
                       <div>
                         <div className="is-size-7 has-text-weight-bold" style={{ color: 'var(--trad-maroon)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>TRADHOX Collective</div>
-                        <div className="is-size-6 has-text-weight-bold has-text-dark">From Village Roots to Global Shelves</div>
+                        <div className="is-size-6 has-text-weight-bold" style={{ color: '#111827' }}>From Village Roots to Global Shelves</div>
                       </div>
-                      <div className="pl-3 has-text-centered" style={{ borderLeft: '1px solid var(--trad-border)' }}>
+                      <div className="pl-3 has-text-centered" style={{ borderLeft: '1px solid #E5E7EB' }}>
                         <div className="is-size-5 has-text-weight-black" style={{ color: 'var(--trad-maroon)' }}>100%</div>
-                        <div className="is-size-7 has-text-grey" style={{ fontSize: '10px' }}>Authentic</div>
+                        <div className="is-size-7" style={{ fontSize: '10px', color: '#6B7280', fontWeight: 600 }}>Authentic</div>
                       </div>
                     </div>
                   </div>
@@ -257,8 +257,19 @@ export const LandingPage: React.FC = () => {
           <div className="columns is-mobile is-multiline is-variable is-2-mobile is-3-tablet">
             {benefitCards.map((card, idx) => (
               <div key={idx} className="column is-one-fifth-desktop is-one-third-tablet is-6-mobile">
-                <div className="card trad-card-interactive h-100 is-flex is-flex-direction-column" style={{ borderRadius: '16px', overflow: 'hidden' }}>
-                  <div style={{ height: '115px', position: 'relative', overflow: 'hidden' }}>
+                <div 
+                  className="card trad-card-interactive" 
+                  style={{ 
+                    borderRadius: '14px', 
+                    overflow: 'hidden', 
+                    height: '100%', 
+                    display: 'flex', 
+                    flexDirection: 'column',
+                    border: '1px solid #E5E7EB',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)'
+                  }}
+                >
+                  <div style={{ height: '140px', position: 'relative', overflow: 'hidden', backgroundColor: '#F3F4F6', flexShrink: 0 }}>
                     <img
                       src={card.img}
                       alt={card.title}
@@ -270,24 +281,41 @@ export const LandingPage: React.FC = () => {
                     <div
                       style={{
                         position: 'absolute',
-                        top: '8px',
-                        left: '8px',
-                        width: '28px',
-                        height: '28px',
+                        top: '10px',
+                        left: '10px',
+                        width: '30px',
+                        height: '30px',
                         borderRadius: '8px',
                         backgroundColor: 'rgba(255, 255, 255, 0.95)',
                         border: '1px solid rgba(103, 27, 38, 0.2)',
                         color: 'var(--trad-maroon)',
                         display: 'flex',
                         alignItems: 'center',
-                        justifyContent: 'center'
+                        justifyContent: 'center',
+                        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
                       }}
                     >
                       {card.icon}
                     </div>
                   </div>
-                  <div className="p-3 is-flex-grow-1 is-flex is-align-items-center">
-                    <span className="is-size-7 has-text-weight-bold has-text-dark" style={{ lineHeight: 1.3 }}>
+                  <div 
+                    className="p-3" 
+                    style={{ 
+                      flex: '1 1 auto', 
+                      display: 'flex', 
+                      alignItems: 'center', 
+                      minHeight: '58px',
+                      backgroundColor: '#FFFFFF'
+                    }}
+                  >
+                    <span 
+                      style={{ 
+                        fontSize: '0.85rem', 
+                        fontWeight: 700, 
+                        color: '#1F2937', 
+                        lineHeight: 1.35
+                      }}
+                    >
                       {card.title}
                     </span>
                   </div>
@@ -317,23 +345,40 @@ export const LandingPage: React.FC = () => {
           <div className="columns is-multiline is-variable is-4">
             {journeySteps.map((step, idx) => (
               <div key={idx} className="column is-4-desktop is-6-tablet is-12-mobile">
-                <div className="card p-5 h-100" style={{ borderRadius: '18px', border: '1px solid var(--trad-border)' }}>
-                  <div
-                    className="mb-3 is-flex is-align-items-center is-justify-content-center"
-                    style={{
-                      width: '36px',
-                      height: '36px',
-                      borderRadius: '50%',
-                      backgroundColor: 'rgba(103, 27, 38, 0.1)',
-                      color: 'var(--trad-maroon)',
-                      fontWeight: 800,
-                      fontSize: '0.9rem'
-                    }}
-                  >
-                    {step.num}
+                <div 
+                  className="card trad-card-interactive" 
+                  style={{ 
+                    borderRadius: '16px', 
+                    border: '1px solid #E5E7EB', 
+                    padding: '1.35rem 1.25rem',
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    backgroundColor: '#FFFFFF',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.03)'
+                  }}
+                >
+                  <div className="is-flex is-align-items-center mb-3">
+                    <div
+                      className="mr-2.5 is-flex is-align-items-center is-justify-content-center"
+                      style={{
+                        width: '32px',
+                        height: '32px',
+                        borderRadius: '50%',
+                        backgroundColor: 'var(--trad-maroon)',
+                        color: '#FFFFFF',
+                        fontWeight: 800,
+                        fontSize: '0.85rem',
+                        flexShrink: 0
+                      }}
+                    >
+                      {step.num}
+                    </div>
+                    <h3 className="title mb-0" style={{ color: '#111827', fontSize: '1.05rem', fontWeight: 700 }}>
+                      {step.title}
+                    </h3>
                   </div>
-                  <h3 className="title is-size-5 mb-2">{step.title}</h3>
-                  <p className="is-size-6 has-text-grey" style={{ lineHeight: 1.55 }}>
+                  <p style={{ color: '#4B5563', fontSize: '0.875rem', lineHeight: 1.55, margin: 0 }}>
                     {step.desc}
                   </p>
                 </div>
@@ -359,72 +404,114 @@ export const LandingPage: React.FC = () => {
           <div className="columns is-variable is-5">
             {/* Box 1: GI-tagged products */}
             <div className="column is-4-desktop is-12-tablet">
-              <div className="card trad-card-interactive p-4 h-100 is-flex is-flex-direction-column justify-between" style={{ borderRadius: '18px', border: '1px solid var(--trad-border)' }}>
-                <div>
-                  <div style={{ height: '180px', borderRadius: '12px', overflow: 'hidden', position: 'relative' }}>
-                    <img src="/images/landing/cat-gi.jpg" alt="Authentic Indian GI-tagged crafts showcase flatlay" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                    <span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '10px', left: '10px', color: 'var(--trad-maroon)', fontSize: '10px' }}>
-                      GI Authenticated
-                    </span>
-                  </div>
-                  <div className="has-text-centered mt-4">
-                    <h3 className="title is-size-5 mb-1">GI-tagged products</h3>
-                    <p className="is-size-7 has-text-grey mb-3">
+              <div 
+                className="card trad-card-interactive" 
+                style={{ 
+                  borderRadius: '16px', 
+                  border: '1px solid #E5E7EB', 
+                  height: '100%', 
+                  display: 'flex', 
+                  flexDirection: 'column',
+                  overflow: 'hidden',
+                  backgroundColor: '#FFFFFF',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.03)'
+                }}
+              >
+                <div style={{ height: '190px', position: 'relative', overflow: 'hidden', backgroundColor: '#F3F4F6', flexShrink: 0 }}>
+                  <img src="/images/landing/cat-gi.jpg" alt="Authentic Indian GI-tagged crafts showcase flatlay" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                  <span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '12px', left: '12px', color: 'var(--trad-maroon)', fontSize: '11px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
+                    GI Authenticated
+                  </span>
+                </div>
+                <div className="p-4" style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+                  <div>
+                    <h3 className="title mb-1.5" style={{ fontSize: '1.15rem', fontWeight: 700, color: '#111827' }}>
+                      GI-tagged products
+                    </h3>
+                    <p style={{ color: '#4B5563', fontSize: '0.85rem', lineHeight: 1.5, margin: 0 }}>
                       Protected geographical indication crafts preserving verified regional legacy and genuine master traditions.
                     </p>
                   </div>
-                </div>
-                <div className="pt-3 is-flex is-justify-content-space-between is-size-7 has-text-grey" style={{ borderTop: '1px solid #EFEFEF' }}>
-                  <span>Verified Heritage Crafts</span>
-                  <strong className="has-text-dark">100% Authentic</strong>
+                  <div className="pt-3 mt-4 is-flex is-justify-content-space-between is-size-7" style={{ borderTop: '1px solid #F3F4F6', color: '#6B7280' }}>
+                    <span>Verified Heritage Crafts</span>
+                    <strong style={{ color: '#111827', fontWeight: 700 }}>100% Authentic</strong>
+                  </div>
                 </div>
               </div>
             </div>
 
             {/* Box 2: ODOP products */}
             <div className="column is-4-desktop is-12-tablet">
-              <div className="card trad-card-interactive p-4 h-100 is-flex is-flex-direction-column justify-between" style={{ borderRadius: '18px', border: '1px solid var(--trad-border)' }}>
-                <div>
-                  <div style={{ height: '180px', borderRadius: '12px', overflow: 'hidden', position: 'relative' }}>
-                    <img src="/images/landing/cat-odop.jpg" alt="High-resolution authentic product flatlay representing India's One District One Product specialties" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                    <span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '10px', left: '10px', color: 'var(--trad-maroon)', fontSize: '10px' }}>
-                      ODOP Regional Hub
-                    </span>
-                  </div>
-                  <div className="has-text-centered mt-4">
-                    <h3 className="title is-size-5 mb-1">ODOP products</h3>
-                    <p className="is-size-7 has-text-grey mb-3">
+              <div 
+                className="card trad-card-interactive" 
+                style={{ 
+                  borderRadius: '16px', 
+                  border: '1px solid #E5E7EB', 
+                  height: '100%', 
+                  display: 'flex', 
+                  flexDirection: 'column',
+                  overflow: 'hidden',
+                  backgroundColor: '#FFFFFF',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.03)'
+                }}
+              >
+                <div style={{ height: '190px', position: 'relative', overflow: 'hidden', backgroundColor: '#F3F4F6', flexShrink: 0 }}>
+                  <img src="/images/landing/cat-odop.jpg" alt="High-resolution authentic product flatlay representing India's One District One Product specialties" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                  <span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '12px', left: '12px', color: 'var(--trad-maroon)', fontSize: '11px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
+                    ODOP Regional Hub
+                  </span>
+                </div>
+                <div className="p-4" style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+                  <div>
+                    <h3 className="title mb-1.5" style={{ fontSize: '1.15rem', fontWeight: 700, color: '#111827' }}>
+                      ODOP products
+                    </h3>
+                    <p style={{ color: '#4B5563', fontSize: '0.85rem', lineHeight: 1.5, margin: 0 }}>
                       Indigenous district-level specialties bringing distinctive indigenous crafts from local villages to direct markets.
                     </p>
                   </div>
-                </div>
-                <div className="pt-3 is-flex is-justify-content-space-between is-size-7 has-text-grey" style={{ borderTop: '1px solid #EFEFEF' }}>
-                  <span>Districts Active</span>
-                  <strong className="has-text-dark">760+ Districts</strong>
+                  <div className="pt-3 mt-4 is-flex is-justify-content-space-between is-size-7" style={{ borderTop: '1px solid #F3F4F6', color: '#6B7280' }}>
+                    <span>Districts Active</span>
+                    <strong style={{ color: '#111827', fontWeight: 700 }}>760+ Districts</strong>
+                  </div>
                 </div>
               </div>
             </div>
 
             {/* Box 3: Sustainable products */}
             <div className="column is-4-desktop is-12-tablet">
-              <div className="card trad-card-interactive p-4 h-100 is-flex is-flex-direction-column justify-between" style={{ borderRadius: '18px', border: '1px solid var(--trad-border)' }}>
-                <div>
-                  <div style={{ height: '180px', borderRadius: '12px', overflow: 'hidden', position: 'relative' }}>
-                    <img src="/images/landing/cat-sustainable.jpg" alt="High-resolution commercial flatlay of sustainable eco-friendly handcrafted lifestyle products" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                    <span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '10px', left: '10px', color: 'var(--trad-maroon)', fontSize: '10px' }}>
-                      Eco-Conscious
-                    </span>
-                  </div>
-                  <div className="has-text-centered mt-4">
-                    <h3 className="title is-size-5 mb-1">Sustainable products</h3>
-                    <p className="is-size-7 has-text-grey mb-3">
+              <div 
+                className="card trad-card-interactive" 
+                style={{ 
+                  borderRadius: '16px', 
+                  border: '1px solid #E5E7EB', 
+                  height: '100%', 
+                  display: 'flex', 
+                  flexDirection: 'column',
+                  overflow: 'hidden',
+                  backgroundColor: '#FFFFFF',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.03)'
+                }}
+              >
+                <div style={{ height: '190px', position: 'relative', overflow: 'hidden', backgroundColor: '#F3F4F6', flexShrink: 0 }}>
+                  <img src="/images/landing/cat-sustainable.jpg" alt="High-resolution commercial flatlay of sustainable eco-friendly handcrafted lifestyle products" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                  <span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '12px', left: '12px', color: 'var(--trad-maroon)', fontSize: '11px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
+                    Eco-Conscious
+                  </span>
+                </div>
+                <div className="p-4" style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+                  <div>
+                    <h3 className="title mb-1.5" style={{ fontSize: '1.15rem', fontWeight: 700, color: '#111827' }}>
+                      Sustainable products
+                    </h3>
+                    <p style={{ color: '#4B5563', fontSize: '0.85rem', lineHeight: 1.5, margin: 0 }}>
                       Eco-friendly, chemical-free creations crafted with natural fibers, terracotta, bamboo, and circular materials.
                     </p>
                   </div>
-                </div>
-                <div className="pt-3 is-flex is-justify-content-space-between is-size-7 has-text-grey" style={{ borderTop: '1px solid #EFEFEF' }}>
-                  <span>Eco Clusters</span>
-                  <strong className="has-text-dark">1,850+ Clusters</strong>
+                  <div className="pt-3 mt-4 is-flex is-justify-content-space-between is-size-7" style={{ borderTop: '1px solid #F3F4F6', color: '#6B7280' }}>
+                    <span>Eco Clusters</span>
+                    <strong style={{ color: '#111827', fontWeight: 700 }}>1,850+ Clusters</strong>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/styles/custom-bulma.css b/src/styles/custom-bulma.css
index bc26082..4829df8 100644
--- a/src/styles/custom-bulma.css
+++ b/src/styles/custom-bulma.css
@@ -526,6 +526,7 @@ h1, h2, h3, h4, h5, h6, .title {
 /* Landing Page Hero Form Responsive Styles */
 .trad-hero-lead-form {
   max-width: 520px;
+  width: 100%;
   margin-bottom: 1.25rem;
 }
 
@@ -533,23 +534,32 @@ h1, h2, h3, h4, h5, h6, .title {
   .trad-hero-lead-form .form-container {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     background-color: #FFFFFF;
     border-radius: 9999px;
     border: 1.5px solid var(--trad-border);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
-    padding: 5px;
+    padding: 4px;
+    width: 100%;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
   .trad-hero-lead-form .form-container:focus-within {
     border-color: var(--trad-maroon);
     box-shadow: 0 4px 24px rgba(103, 27, 38, 0.12);
   }
+  .trad-hero-lead-form .input-group-mobile {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
   .trad-hero-lead-form .phone-prefix {
-    padding-left: 1rem;
+    padding-left: 1.15rem;
     padding-right: 0.5rem;
     font-weight: 700;
     color: #2D3748;
     flex-shrink: 0;
+    font-size: 0.95rem;
   }
   .trad-hero-lead-form .phone-input {
     flex: 1;
@@ -560,13 +570,17 @@ h1, h2, h3, h4, h5, h6, .title {
     font-weight: 600;
     color: #1A1A1A;
     font-size: 0.95rem;
-    padding: 0.5rem 0.75rem;
+    padding: 0.5rem 0.5rem;
     min-width: 0;
+    width: 100%;
   }
   .trad-hero-lead-form .submit-btn {
     border-radius: 9999px !important;
     flex-shrink: 0;
     white-space: nowrap;
+    height: 44px;
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
   }
 }