diff --git a/src/components/CoreSystem.astro b/src/components/CoreSystem.astro
index 10d3e8e..ce95581 100644
--- a/src/components/CoreSystem.astro
+++ b/src/components/CoreSystem.astro
@@ -17,50 +17,33 @@ const cards = [
 ]
 ---
 
-<section id="features" class="relative w-full flex flex-col gap-[60px] items-center py-[120px] overflow-hidden">
+<section id="features" class="relative w-full flex flex-col gap-[60px] items-center py-16 lg:py-[120px] overflow-hidden">
   <!-- Background halftone -->
   <img alt="" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[1319px] w-[2363px] object-cover pointer-events-none opacity-20" src={halftone} />
 
   <!-- Section header -->
-  <div class="relative flex flex-col gap-[24px] items-center justify-end overflow-clip px-[180px] w-[1280px]">
+  <div class="relative flex flex-col gap-[24px] items-center justify-end overflow-clip w-full max-w-[1280px] mx-auto px-4 lg:px-[180px]">
     <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
       <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">CORE FEATURES</span>
     </div>
-    <p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">Everything You Need to Communicate</p>
+    <p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">Everything You Need to Communicate</p>
     <p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full">
       Different identities, different conversations, and different privacy levels should not be forced into one flat interface. TalkPro lets them exist in order inside one platform.
     </p>
   </div>
 
   <!-- Card grid -->
-  <div class="relative flex flex-col gap-[22px] items-start w-[1280px]">
-    <!-- Row 1 -->
-    <div class="flex gap-[22px] items-start w-full">
-      {cards.slice(0, 3).map(card => (
-        <div class="bg-[rgba(255,255,255,0.78)] flex flex-1 flex-col gap-[16px] items-center min-w-0 p-[32px] rounded-[30px] self-stretch">
-          <div class="relative shrink-0 size-[160px] overflow-hidden">
-            <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
-          </div>
-          <div class="flex flex-col gap-[12px] items-start text-center w-full">
-            <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
-            <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
-          </div>
+  <div class="relative grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[22px] w-full max-w-[1280px] mx-auto px-4 lg:px-0">
+    {cards.map(card => (
+      <div class="bg-[rgba(255,255,255,0.78)] flex flex-col gap-[16px] items-center p-[32px] rounded-[30px]">
+        <div class="relative shrink-0 size-[160px] overflow-hidden">
+          <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
         </div>
-      ))}
-    </div>
-    <!-- Row 2 -->
-    <div class="flex gap-[22px] items-center w-full">
-      {cards.slice(3).map(card => (
-        <div class="bg-[rgba(255,255,255,0.78)] flex flex-1 flex-col gap-[16px] items-center min-w-0 p-[32px] rounded-[30px] self-stretch">
-          <div class="relative shrink-0 size-[160px] overflow-hidden">
-            <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
-          </div>
-          <div class="flex flex-col gap-[12px] items-start text-center w-full">
-            <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
-            <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
-          </div>
+        <div class="flex flex-col gap-[12px] items-start text-center w-full">
+          <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
+          <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
         </div>
-      ))}
-    </div>
+      </div>
+    ))}
   </div>
 </section>
diff --git a/src/components/Experience.astro b/src/components/Experience.astro
index 1593a83..e5d0281 100644
--- a/src/components/Experience.astro
+++ b/src/components/Experience.astro
@@ -1,19 +1,19 @@
 ---
 ---
 
-<section id="experience" class="bg-white w-full flex flex-col items-center justify-center py-[120px]">
-  <div class="flex flex-col gap-[40px] items-center justify-center w-[1008px]">
-    <p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
+<section id="experience" class="bg-white w-full flex flex-col items-center justify-center py-16 lg:py-[120px]">
+  <div class="flex flex-col gap-[40px] items-center justify-center w-full max-w-[1008px] mx-auto px-4 lg:px-0">
+    <p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
       A Cleaner, More Comfortable Messaging Experience
     </p>
 
     <div class="flex flex-col items-start w-full">
       <!-- 3 cards row -->
-      <div class="flex gap-[24px] h-[477px] items-center w-full shrink-0">
+      <div class="flex flex-col lg:flex-row lg:gap-[24px] lg:h-[477px] lg:items-center gap-6 w-full shrink-0">
 
         <!-- Card 1: Clear Interface -->
-        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
-          <div class="relative h-[232px] shrink-0 w-[320px]">
+        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] lg:h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-full lg:w-[320px]">
+          <div class="relative h-[232px] shrink-0 w-full lg:w-[320px]">
             <div class="absolute inset-0 overflow-hidden pointer-events-none">
               <img alt="Clear interface screenshot" class="absolute h-[298.5%] left-0 max-w-none top-[-58.58%] w-full" src="/assets/exp-card-1.png" />
             </div>
@@ -25,8 +25,8 @@
         </div>
 
         <!-- Card 2: Smooth Navigation -->
-        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
-          <div class="bg-[#ffeddf] flex flex-col items-start shrink-0 w-[320px]">
+        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] lg:h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-full lg:w-[320px]">
+          <div class="bg-[#ffeddf] flex flex-col items-start shrink-0 w-full lg:w-[320px]">
             <div class="relative h-[232px] shrink-0 w-full">
               <div class="absolute inset-0 overflow-hidden pointer-events-none">
                 <img alt="Smooth navigation screenshot" class="absolute h-[411.28%] left-[-5.95%] max-w-none top-[-335.6%] w-[137.79%]" src="/assets/exp-card-2.png" />
@@ -40,8 +40,8 @@
         </div>
 
         <!-- Card 3: Refined Visual Design -->
-        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
-          <div class="bg-[#ffeddf] flex flex-col h-[232px] items-start overflow-clip shrink-0 w-[320px]">
+        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] lg:h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-full lg:w-[320px]">
+          <div class="bg-[#ffeddf] flex flex-col h-[232px] items-start overflow-clip shrink-0 w-full lg:w-[320px]">
             <div class="flex-1 min-h-0 relative w-full">
               <div class="absolute inset-0 overflow-hidden pointer-events-none">
                 <img alt="Refined visual design screenshot" class="absolute h-[298.5%] left-0 max-w-none top-[-99.23%] w-full" src="/assets/exp-card-3.png" />
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 8de7156..4341e12 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -5,7 +5,7 @@ const globeIcon = "/assets/header-globe.svg";
 ---
 
 <header class="bg-white border-b border-[#e3d9d1] w-full flex items-center justify-center h-[72px] sticky top-0 z-50">
-  <div class="flex items-center w-[1280px]">
+  <div class="flex items-center w-full max-w-[1280px] mx-auto px-4 lg:px-6">
     <!-- Logo -->
     <div class="flex flex-1 items-center min-w-0">
       <a href="/" class="relative h-[42px] w-[143px] shrink-0 block">
@@ -19,7 +19,7 @@ const globeIcon = "/assets/header-globe.svg";
     </div>
 
     <!-- Nav -->
-    <nav class="flex items-center gap-[32px] shrink-0">
+    <nav class="hidden lg:flex items-center gap-[32px] shrink-0">
       <a href="#" class="font-semibold text-[14px] text-[#f28a4b] tracking-[-0.09px] whitespace-nowrap leading-normal">Home</a>
       <a href="#features" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Features</a>
       <a href="#experience" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Experience</a>
@@ -29,7 +29,7 @@ const globeIcon = "/assets/header-globe.svg";
 
     <!-- Actions -->
     <div class="flex flex-1 gap-[12px] items-center justify-end min-w-0">
-      <button class="border border-[rgba(46,42,40,0.3)] flex gap-[8px] h-[43px] items-center justify-center pl-[12px] pr-[16px] rounded-[17px] shrink-0 hover:border-[#f28a4b] transition-colors">
+      <button class="hidden lg:flex border border-[rgba(46,42,40,0.3)] gap-[8px] h-[43px] items-center justify-center pl-[12px] pr-[16px] rounded-[17px] shrink-0 hover:border-[#f28a4b] transition-colors">
         <img alt="Language" class="block size-[26px] object-contain" src={globeIcon} />
         <span class="font-semibold text-[14px] text-[#2e2a28] tracking-[-0.09px] whitespace-nowrap leading-[14px]">EN</span>
       </button>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 478a41b..5e532ec 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -3,12 +3,12 @@ const heroBg = "/assets/hero-bg.png";
 const phoneMockup = "/assets/hero-phone.png";
 ---
 
-<section class="relative w-full flex items-start justify-center h-[891px] overflow-hidden">
+<section class="relative w-full flex items-start justify-center min-h-[600px] lg:h-[891px] overflow-hidden">
   <img alt="" class="absolute inset-0 max-w-none object-cover size-full pointer-events-none" src={heroBg} />
 
-  <div class="relative flex gap-[40px] items-start w-[1280px] h-full">
+  <div class="relative flex flex-col-reverse lg:flex-row gap-[40px] items-start w-full max-w-[1280px] mx-auto px-4 lg:px-0 h-full">
     <!-- Phone mockup -->
-    <div class="flex flex-1 items-center min-w-0 pt-[60px] h-full">
+    <div class="hidden lg:flex flex-1 items-center min-w-0 pt-[60px] h-full">
       <div class="relative w-full" style="aspect-ratio: 673/1108;">
         <div class="absolute inset-0 overflow-hidden pointer-events-none">
           <img alt="TalkPro app on iPhone" class="absolute h-[114.36%] left-[-2.67%] max-w-none top-[-7.18%] w-[105.35%]" src={phoneMockup} />
@@ -17,21 +17,21 @@ const phoneMockup = "/assets/hero-phone.png";
     </div>
 
     <!-- Hero copy -->
-    <div class="flex flex-col gap-[60px] h-full items-start justify-center overflow-clip shrink-0 w-[660px]">
+    <div class="flex flex-col gap-[60px] h-full items-start justify-center overflow-clip shrink-0 w-full lg:w-[660px] py-8 lg:py-[80px]">
       <!-- Pill -->
       <div class="bg-white border border-[#f08458] flex items-center overflow-clip px-[16px] py-[12px] rounded-[999px] shrink-0">
         <p class="font-bold text-[#0d0d0d] text-[14px] tracking-[-0.09px] leading-normal">✦&nbsp; Available on iOS and Android</p>
       </div>
 
       <div class="flex flex-col gap-[24px] items-start shrink-0 w-full">
-        <div class="font-bold text-[#2e2a28] text-[72px] tracking-[-1.61px] w-full">
+        <div class="font-bold text-[#2e2a28] text-[40px] md:text-[56px] lg:text-[72px] tracking-[-1.61px] w-full">
           <p class="leading-[1.1] mb-0">A Modern Way to</p>
           <p class="leading-[1.1]">Stay Connected</p>
         </div>
         <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
           TalkPro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, TalkPro helps people stay connected in one familiar experience.
         </p>
-        <div class="flex gap-[14px] items-center overflow-clip shrink-0">
+        <div class="flex flex-wrap gap-[14px] items-center overflow-clip shrink-0">
           <a href="#download" class="bg-[#f28a4b] flex items-center justify-center overflow-clip px-[24px] py-[14px] rounded-[17px] shrink-0 hover:bg-[#e07a3b] transition-colors">
             <span class="font-bold text-white text-[15px] tracking-[-0.13px] leading-normal">Download TalkPro  ↓</span>
           </a>
@@ -42,7 +42,7 @@ const phoneMockup = "/assets/hero-phone.png";
       </div>
 
       <!-- Tags -->
-      <div class="flex gap-[10px] items-center overflow-clip shrink-0">
+      <div class="flex flex-wrap gap-[10px] items-center overflow-clip shrink-0">
         <div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
           <span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Identity Layer</span>
         </div>
diff --git a/src/components/Trust.astro b/src/components/Trust.astro
index 0d962d1..26a8c40 100644
--- a/src/components/Trust.astro
+++ b/src/components/Trust.astro
@@ -1,22 +1,22 @@
 ---
 ---
 
-<section id="reliability" class="bg-white w-full flex flex-col items-center justify-center p-[120px]">
-  <div class="flex flex-col gap-[40px] items-start w-[1280px]">
+<section id="reliability" class="bg-white w-full flex flex-col items-center justify-center py-16 px-4 lg:p-[120px]">
+  <div class="flex flex-col gap-[40px] items-start w-full max-w-[1280px] mx-auto">
 
     <!-- Header -->
     <div class="flex flex-col gap-[24px] items-start overflow-clip w-full">
       <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
         <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">RELIABILITY</span>
       </div>
-      <p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] w-full">Built with User Trust in Mind</p>
+      <p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] tracking-[-1.16px] leading-[1.2] w-full">Built with User Trust in Mind</p>
       <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
         TalkPro is designed with a privacy-conscious approach and a focus on dependable communication. The app keeps the user experience simple while supporting the core communication features people expect from a modern messaging platform.
       </p>
     </div>
 
     <!-- 4-column feature row -->
-    <div class="flex gap-[24px] items-center justify-center w-full">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:flex lg:gap-[24px] lg:items-center gap-8 justify-center w-full">
 
       <!-- Card 1: Privacy-Conscious Design -->
       <div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
@@ -32,7 +32,7 @@
       </div>
 
       <!-- Divider -->
-      <div class="relative h-[118px] shrink-0 w-0">
+      <div class="hidden lg:block relative h-[118px] shrink-0 w-0">
         <div class="absolute inset-[0_-0.5px]">
           <img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
         </div>
@@ -52,7 +52,7 @@
       </div>
 
       <!-- Divider -->
-      <div class="relative h-[118px] shrink-0 w-0">
+      <div class="hidden lg:block relative h-[118px] shrink-0 w-0">
         <div class="absolute inset-[0_-0.5px]">
           <img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
         </div>
@@ -72,7 +72,7 @@
       </div>
 
       <!-- Divider -->
-      <div class="relative h-[118px] shrink-0 w-0">
+      <div class="hidden lg:block relative h-[118px] shrink-0 w-0">
         <div class="absolute inset-[0_-0.5px]">
           <img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
         </div>
diff --git a/src/components/WhyTalkPro.astro b/src/components/WhyTalkPro.astro
index 8b79830..03af9b3 100644
--- a/src/components/WhyTalkPro.astro
+++ b/src/components/WhyTalkPro.astro
@@ -6,18 +6,18 @@ const iconConn     = "/assets/why-icon-connected.svg";
 const iconModern   = "/assets/why-icon-modern.svg";
 ---
 
-<section class="bg-white w-full flex flex-col items-center justify-center py-[120px]">
-  <div class="flex flex-col gap-[40px] items-start w-[1280px]">
+<section class="bg-white w-full flex flex-col items-center justify-center py-16 lg:py-[120px]">
+  <div class="flex flex-col gap-[40px] items-start w-full max-w-[1280px] mx-auto px-4 lg:px-0">
 
     <!-- Header row -->
-    <div class="flex gap-[36px] items-start overflow-clip w-full">
+    <div class="flex flex-col lg:flex-row gap-[36px] items-start overflow-clip w-full">
       <!-- Left: pill + heading + description -->
       <div class="flex flex-1 flex-col gap-[36px] items-start min-w-0">
         <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
           <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">WHY TALKPRO</span>
         </div>
         <div class="flex flex-col gap-[24px] items-start w-full">
-          <div class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] w-full">
+          <div class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] tracking-[-1.16px] w-full">
             <p class="leading-[1.2] mb-0">Designed for the Way</p>
             <p class="leading-[1.2]">People Communicate Today</p>
           </div>
@@ -34,53 +34,47 @@ const iconModern   = "/assets/why-icon-modern.svg";
       </div>
 
       <!-- Right: illustration -->
-      <div class="relative shrink-0 size-[480px]">
+      <div class="hidden lg:block relative shrink-0 size-[480px]">
         <img alt="People communicating with TalkPro" class="absolute inset-0 size-full object-contain" src="/assets/why-illustration.png" />
       </div>
     </div>
 
     <!-- 2×2 card grid -->
-    <div class="flex flex-col gap-[24px] items-start overflow-clip w-full">
-      <!-- Row 1 -->
-      <div class="flex gap-[24px] items-center w-full">
-        <div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
-          <div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
-            <img alt="" class="block size-[44px]" src={iconSimple} />
-          </div>
-          <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
-            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Simple</p>
-            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">An easy-to-use experience designed for everyday communication.</p>
-          </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
+      <div class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
+        <div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
+          <img alt="" class="block size-[44px]" src={iconSimple} />
         </div>
-        <div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
-          <div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
-            <img alt="" class="block" style="width:38px;height:40px;" src={iconFamiliar} />
-          </div>
-          <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
-            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Familiar</p>
-            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A messaging structure that feels natural from the first use.</p>
-          </div>
+        <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
+          <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Simple</p>
+          <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">An easy-to-use experience designed for everyday communication.</p>
         </div>
       </div>
-      <!-- Row 2 -->
-      <div class="flex gap-[24px] items-center w-full">
-        <div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
-          <div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
-            <img alt="" class="block size-[44px]" src={iconConn} />
-          </div>
-          <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
-            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Connected</p>
-            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Private chats, groups, channels, voice, and video in one app.</p>
-          </div>
+      <div class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
+        <div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
+          <img alt="" class="block" style="width:38px;height:40px;" src={iconFamiliar} />
         </div>
-        <div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
-          <div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
-            <img alt="" class="block" style="width:24px;height:44px;" src={iconModern} />
-          </div>
-          <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
-            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Modern</p>
-            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A refined interface with clean visuals and smooth interaction.</p>
-          </div>
+        <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
+          <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Familiar</p>
+          <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A messaging structure that feels natural from the first use.</p>
+        </div>
+      </div>
+      <div class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
+        <div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
+          <img alt="" class="block size-[44px]" src={iconConn} />
+        </div>
+        <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
+          <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Connected</p>
+          <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Private chats, groups, channels, voice, and video in one app.</p>
+        </div>
+      </div>
+      <div class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
+        <div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
+          <img alt="" class="block" style="width:24px;height:44px;" src={iconModern} />
+        </div>
+        <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
+          <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Modern</p>
+          <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A refined interface with clean visuals and smooth interaction.</p>
         </div>
       </div>
     </div>