diff --git a/next.config.ts b/next.config.ts
index f7b60bb..3aff34d 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,6 +2,10 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: 'standalone',
+  images: {
+    unoptimized: false,
+    remotePatterns: [],
+  },
   /* config options here */
 };
 
diff --git a/public/images/stryokab.webp b/public/images/stryokab.webp
new file mode 100644
index 0000000..6c697b6
Binary files /dev/null and b/public/images/stryokab.webp differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a8c3ab3..93315dc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -83,7 +83,7 @@ export default function Home() {
       
       {/* Hero Section */}
       <section 
-        className="relative min-h-screen pt-20 pb-16 flex items-center bg-cover bg-center bg-no-repeat"
+        className="relative min-h-screen pt-16 sm:pt-20 pb-12 sm:pb-16 flex items-center bg-cover bg-center bg-no-repeat"
         style={{
           backgroundImage: "url('/images/stanica.png')"
         }}
@@ -92,50 +92,50 @@ export default function Home() {
         <div className="absolute inset-0 bg-black/30 z-0"></div>
         
         {/* Content */}
-        <div className="container mx-auto px-4 relative z-10">
-          <div className="flex flex-col lg:flex-row items-center justify-between gap-12">
+        <div className="container mx-auto px-4 sm:px-6 relative z-10">
+          <div className="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12">
             {/* Left Content */}
-                         <FadeInSection as="div" className="flex-1 text-white" delay={0.2}>
+                         <FadeInSection as="div" className="flex-1 text-white text-center lg:text-left" delay={0.2}>
               
-                             <h1 className="text-4xl lg:text-6xl xl:text-7xl font-bold text-white mb-6 leading-tight">
+                             <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-white mb-4 sm:mb-6 leading-tight">
                  СТРОИТЕЛЬСТВО КАМЕННЫХ<br />
                  И КАРКАСНЫХ ДОМОВ<br />
                  С ФИКСАЦИЕЙ ЦЕНЫ
                </h1>
                
-               <p className="text-xl lg:text-2xl text-white/90 mb-12">
+               <p className="text-lg sm:text-xl lg:text-2xl text-white/90 mb-8 sm:mb-12">
                  Построим технологичный дом за 90 дней
                </p>
                
                {/* Stats Section */}
-               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-8">
-                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
-                   <div className="text-3xl lg:text-4xl font-bold text-white mb-2">+100</div>
-                   <div className="text-white/80 text-sm font-medium">Реализованных объектов</div>
+               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
+                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 sm:p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
+                   <div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">+100</div>
+                   <div className="text-white/80 text-xs sm:text-sm font-medium">Реализованных объектов</div>
                  </div>
-                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
-                   <div className="text-3xl lg:text-4xl font-bold text-white mb-2">5</div>
-                   <div className="text-white/80 text-sm font-medium">Лет гарантии</div>
+                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 sm:p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
+                   <div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">5</div>
+                   <div className="text-white/80 text-xs sm:text-sm font-medium">Лет гарантии</div>
                  </div>
-                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
-                   <div className="text-3xl lg:text-4xl font-bold text-white mb-2">90%</div>
-                   <div className="text-white/80 text-sm font-medium">Клиентов рекомендуют нас</div>
+                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 sm:p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
+                   <div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">90%</div>
+                   <div className="text-white/80 text-xs sm:text-sm font-medium">Клиентов рекомендуют нас</div>
                  </div>
                </div>
             </FadeInSection>
             
             {/* Right Form */}
-            <FadeInSection as="div" className="w-full lg:w-96" delay={0.4}>
-              <div className="group relative p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 shadow-2xl">
+            <FadeInSection as="div" className="w-full max-w-md lg:w-96" delay={0.4}>
+              <div className="group relative p-4 sm:p-6 lg:p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 shadow-2xl">
                 {/* Фон */}
                 <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                 
                 <div className="relative z-10">
-                  <h3 className="text-2xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-6 text-center">
+                  <h3 className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4 sm:mb-6 text-center">
                     Получите расчет стоимости
                   </h3>
                   
-                  <form onSubmit={handleFormSubmit} className="space-y-6">
+                  <form onSubmit={handleFormSubmit} className="space-y-4 sm:space-y-6">
                     <input
                       type="tel"
                       placeholder="Ваш телефон"
@@ -144,34 +144,34 @@ export default function Home() {
                         const val = e.target.value.replace(/\D/g, '').slice(0, 11);
                         setPhone(val);
                       }}
-                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
+                      className="w-full px-3 sm:px-4 py-2.5 sm:py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300 text-sm sm:text-base"
                     />
                     <input
                       type="text"
                       placeholder="Ваше имя"
                       value={name}
                       onChange={(e) => setName(e.target.value)}
-                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
+                      className="w-full px-3 sm:px-4 py-2.5 sm:py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300 text-sm sm:text-base"
                     />
                     
                     <button
                       type="submit"
-                      className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-4 rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-lg font-semibold flex items-center justify-center group hover:scale-105 shadow-lg"
+                      className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 sm:py-4 rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-base sm:text-lg font-semibold flex items-center justify-center group hover:scale-105 shadow-lg"
                     >
                       Обсудить проект
-                      <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <svg className="w-4 h-4 sm:w-5 sm:h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                       </svg>
                     </button>
                     
                     {error && (
-                      <div className="bg-red-500/20 border border-red-500/30 text-red-300 text-center py-3 px-4 rounded-xl text-sm backdrop-blur-sm">
+                      <div className="bg-red-500/20 border border-red-500/30 text-red-300 text-center py-2 sm:py-3 px-3 sm:px-4 rounded-xl text-xs sm:text-sm backdrop-blur-sm">
                         {error}
                       </div>
                     )}
                   </form>
                   
-                  <p className="text-xs text-gray-400 mt-4 text-center">
+                  <p className="text-xs text-gray-400 mt-3 sm:mt-4 text-center">
                     Нажимая кнопку &quot;Обсудить проект&quot;, вы соглашаетесь с{' '}
                     <a href="#" className="underline hover:text-blue-400 transition-colors duration-300">
                       Политикой конфиденциальности
diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
index 9c78843..e594ecb 100644
--- a/src/components/AboutSection.tsx
+++ b/src/components/AboutSection.tsx
@@ -34,59 +34,61 @@ const AboutSection = () => {
   ];
 
   return (
-    <section id="about" className="relative py-20 bg-gradient-to-br from-blue-50 via-white to-indigo-50 overflow-hidden">
+    <section id="about" className="relative py-12 sm:py-16 lg:py-20 bg-gradient-to-br from-blue-50 via-white to-indigo-50 overflow-hidden">
       {/* Современный геометрический фон */}
       <div className="absolute inset-0 opacity-40">
         {/* Треугольники */}
-        <div className="absolute top-10 left-10 w-32 h-32 bg-blue-500 transform rotate-45 opacity-20"></div>
-        <div className="absolute top-1/3 right-20 w-24 h-24 bg-indigo-600 transform rotate-12 opacity-30"></div>
-        <div className="absolute bottom-20 left-1/4 w-20 h-20 bg-cyan-500 transform -rotate-45 opacity-25"></div>
+        <div className="absolute top-10 left-10 w-16 sm:w-24 lg:w-32 h-16 sm:h-24 lg:h-32 bg-blue-500 transform rotate-45 opacity-20"></div>
+        <div className="absolute top-1/3 right-20 w-12 sm:w-18 lg:w-24 h-12 sm:h-18 lg:h-24 bg-indigo-600 transform rotate-12 opacity-30"></div>
+        <div className="absolute bottom-20 left-1/4 w-10 sm:w-16 lg:w-20 h-10 sm:h-16 lg:h-20 bg-cyan-500 transform -rotate-45 opacity-25"></div>
         
         {/* Круги с четкими краями */}
-        <div className="absolute top-1/4 right-1/3 w-16 h-16 bg-blue-400 rounded-full opacity-30"></div>
-        <div className="absolute bottom-1/3 right-10 w-12 h-12 bg-indigo-500 rounded-full opacity-40"></div>
-        <div className="absolute top-2/3 left-1/6 w-8 h-8 bg-cyan-400 rounded-full opacity-35"></div>
+        <div className="absolute top-1/4 right-1/3 w-8 sm:w-12 lg:w-16 h-8 sm:h-12 lg:h-16 bg-blue-400 rounded-full opacity-30"></div>
+        <div className="absolute bottom-1/3 right-10 w-6 sm:w-8 lg:w-12 h-6 sm:h-8 lg:h-12 bg-indigo-500 rounded-full opacity-40"></div>
+        <div className="absolute top-2/3 left-1/6 w-4 sm:w-6 lg:w-8 h-4 sm:h-6 lg:h-8 bg-cyan-400 rounded-full opacity-35"></div>
         
         {/* Линии */}
         <div className="absolute top-0 left-1/3 w-1 h-full bg-gradient-to-b from-transparent via-blue-300 to-transparent opacity-20"></div>
         <div className="absolute top-0 right-1/4 w-1 h-full bg-gradient-to-b from-transparent via-indigo-300 to-transparent opacity-15"></div>
       </div>
 
-      <div className="container mx-auto px-4 relative z-10">
+      <div className="container mx-auto px-4 sm:px-6 relative z-10">
         {/* Заголовок секции */}
-        <FadeInSection as="div" className="text-center mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
+        <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
             О компании Ваш Дом
           </h2>
           <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
         </FadeInSection>
 
         {/* Основной контент */}
-        <div className="grid lg:grid-cols-2 gap-16 items-center mb-20">
+        <div className="grid lg:grid-cols-2 gap-8 sm:gap-12 lg:gap-16 items-center mb-12 sm:mb-16 lg:mb-20">
           {/* Изображение */}
           <FadeInSection as="div" className="relative group">
-            <div className="relative h-[500px] w-full rounded-2xl overflow-hidden">
+            <div className="relative h-[300px] sm:h-[400px] lg:h-[500px] w-full rounded-2xl overflow-hidden">
               <div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div>
               <Image
-                src="/images/o_nac.jpg"
-                alt="О нашей компании"
+                src="/images/stryokab.webp?v=3&t=1234567890"
+                alt="Строительная бригада за работой"
                 fill
                 className="object-cover transition-transform duration-700 group-hover:scale-110"
+                priority
+                unoptimized={true}
               />
               {/* Декоративные элементы */}
-              <div className="absolute -top-4 -left-4 w-24 h-24 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>
-              <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-xl"></div>
+              <div className="absolute -top-4 -left-4 w-16 sm:w-20 lg:w-24 h-16 sm:h-20 lg:h-24 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>
+              <div className="absolute -bottom-4 -right-4 w-20 sm:w-24 lg:w-32 h-20 sm:h-24 lg:h-32 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-xl"></div>
             </div>
           </FadeInSection>
 
           {/* Текстовый контент */}
           <FadeInSection as="div" delay={0.2}>
-            <div className="h-[500px] flex flex-col justify-center space-y-6">
-              <div className="space-y-4">
-                <h3 className="text-2xl font-bold text-gray-800">
+            <div className="lg:h-[500px] flex flex-col justify-center space-y-4 sm:space-y-6">
+              <div className="space-y-3 sm:space-y-4">
+                <h3 className="text-xl sm:text-2xl font-bold text-gray-800">
                   Строим дома вашей мечты
                 </h3>
-                <p className="text-gray-600 leading-relaxed text-xl">
+                <p className="text-gray-600 leading-relaxed text-base sm:text-lg lg:text-xl">
                   Мы - команда профессионалов с более чем 10-летним опытом в строительстве 
                   современных домов. Наша миссия - создавать качественное и комфортное 
                   жилье для наших клиентов, используя передовые технологии и материалы.
@@ -115,23 +117,23 @@ const AboutSection = () => {
 
         {/* Статистика */}
         <FadeInSection as="div" delay={0.4}>
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
             {stats.map((stat, index) => (
               <div
                 key={index}
-                className="group relative p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2"
+                className="group relative p-4 sm:p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2"
               >
                 {/* Фон */}
                 <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                 
                 <div className="relative z-10 text-center">
-                  <div className="text-5xl mb-4 group-hover:scale-110 transition-transform duration-300">
+                  <div className="text-3xl sm:text-4xl lg:text-5xl mb-2 sm:mb-4 group-hover:scale-110 transition-transform duration-300">
                     {stat.icon}
                   </div>
-                  <div className="text-5xl font-bold text-gray-800 mb-4 group-hover:text-blue-600 transition-all duration-300 drop-shadow-lg">
+                  <div className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-800 mb-2 sm:mb-4 group-hover:text-blue-600 transition-all duration-300 drop-shadow-lg">
                     {stat.number}
                   </div>
-                  <div className="text-gray-600 text-lg font-medium leading-relaxed">
+                  <div className="text-gray-600 text-sm sm:text-base lg:text-lg font-medium leading-relaxed">
                     {stat.label}
                   </div>
                 </div>
diff --git a/src/components/CatalogRequestModal.tsx b/src/components/CatalogRequestModal.tsx
index fb18d4c..14a28a7 100644
--- a/src/components/CatalogRequestModal.tsx
+++ b/src/components/CatalogRequestModal.tsx
@@ -92,6 +92,7 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
                 width={320} 
                 height={120} 
                 className="object-contain rounded-lg shadow-md group-hover:scale-105 transition-transform duration-300" 
+                unoptimized={true}
               />
               {/* Декоративные элементы вокруг изображения */}
               <div className="absolute -top-2 -left-2 w-16 h-16 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>
diff --git a/src/components/ContactSection.tsx b/src/components/ContactSection.tsx
index 938e30d..cbad220 100644
--- a/src/components/ContactSection.tsx
+++ b/src/components/ContactSection.tsx
@@ -52,101 +52,105 @@ const ContactSection = () => {
   };
 
   return (
-    <section id="contacts" className="relative py-20 bg-gradient-to-r from-slate-50 via-white to-blue-50 overflow-hidden">
-      {/* Коммуникационный фон */}
+    <section id="contact" className="relative py-12 sm:py-16 lg:py-20 bg-gradient-to-tr from-gray-50 via-white to-blue-50 overflow-hidden">
+      {/* Современный фон */}
       <div className="absolute inset-0 opacity-30">
-        {/* Связи и соединения */}
-        <div className="absolute top-16 left-1/4 w-12 h-12 border-2 border-dashed border-blue-400 rounded-full opacity-25"></div>
-        <div className="absolute bottom-24 right-1/4 w-8 h-8 border-2 border-dashed border-indigo-400 rounded-full opacity-30"></div>
+        {/* Геометрические фигуры */}
+        <div className="absolute top-16 left-16 w-16 sm:w-20 lg:w-24 h-16 sm:h-20 lg:h-24 bg-blue-500 rounded-full opacity-20"></div>
+        <div className="absolute top-32 right-24 w-12 sm:w-16 lg:w-20 h-12 sm:h-16 lg:h-20 bg-indigo-600 transform rotate-45 opacity-25"></div>
+        <div className="absolute bottom-24 left-1/4 w-10 sm:w-14 lg:w-18 h-10 sm:h-14 lg:h-18 bg-cyan-500 rounded-full opacity-30"></div>
         
-        {/* Сигналы */}
-        <div className="absolute top-1/3 left-16 w-6 h-1 bg-blue-400 opacity-35"></div>
-        <div className="absolute top-1/3 left-24 w-4 h-1 bg-blue-300 opacity-30"></div>
-        <div className="absolute top-1/3 left-30 w-2 h-1 bg-blue-200 opacity-25"></div>
+        {/* Соединительные линии */}
+        <div className="absolute top-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-300 to-transparent opacity-25"></div>
+        <div className="absolute bottom-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-indigo-300 to-transparent opacity-20"></div>
         
-        <div className="absolute bottom-1/3 right-16 w-6 h-1 bg-indigo-400 opacity-35"></div>
-        <div className="absolute bottom-1/3 right-24 w-4 h-1 bg-indigo-300 opacity-30"></div>
-        <div className="absolute bottom-1/3 right-30 w-2 h-1 bg-indigo-200 opacity-25"></div>
-        
-        {/* Углы карты */}
-        <div className="absolute top-8 right-8 w-16 h-16 border-2 border-blue-300 opacity-20 transform rotate-12"></div>
-        <div className="absolute bottom-8 left-8 w-12 h-12 border-2 border-cyan-300 opacity-25 transform -rotate-12"></div>
+        {/* Вертикальные линии */}
+        <div className="absolute top-0 left-1/3 w-px h-full bg-gradient-to-b from-transparent via-blue-300 to-transparent opacity-20"></div>
+        <div className="absolute top-0 right-1/4 w-px h-full bg-gradient-to-b from-transparent via-indigo-300 to-transparent opacity-15"></div>
       </div>
 
-      <div className="container mx-auto px-4 relative z-10">
+      <div className="container mx-auto px-4 sm:px-6 relative z-10">
         {/* Заголовок секции */}
-        <FadeInSection as="div" className="text-center mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
+        <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
             Наши контакты
           </h2>
           <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
         </FadeInSection>
 
-        <div className="grid lg:grid-cols-2 gap-12">
+        <div className="grid lg:grid-cols-2 gap-8 sm:gap-12">
           {/* Контактная информация */}
           <FadeInSection 
             as="div" 
-            className="group relative p-8 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500"
+            className="group relative p-6 sm:p-8 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500"
             delay={0.2}
           >
             {/* Фон */}
             <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
             
-            <div className="relative z-10 space-y-8">
-              <div className="flex items-start group/item">
-                <div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mr-4 group-hover/item:scale-110 transition-transform duration-300">
-                  <Phone className="w-6 h-6 text-blue-600" />
+            <div className="relative z-10">
+              <h3 className="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6 group-hover:text-blue-600 transition-all duration-300">
+                Свяжитесь с нами
+              </h3>
+              
+              <div className="space-y-4 sm:space-y-6">
+                <div className="flex items-start space-x-3 sm:space-x-4">
+                  <div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-blue-500/20 rounded-full flex items-center justify-center group-hover:bg-blue-500/30 transition-colors duration-300">
+                    <svg className="w-5 sm:w-6 h-5 sm:h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">Телефон</p>
+                    <a href="tel:+79530132423" className="text-lg sm:text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-300">
+                      +7 953 013 24 23
+                    </a>
+                  </div>
                 </div>
-                <div>
-                  <h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
-                    Телефон
-                  </h3>
-                  <a 
-                    href="tel:+79530132423" 
-                    className="text-gray-600 text-lg hover:text-blue-600 hover:bg-blue-50 px-2 py-1 rounded-lg transition-all duration-300 cursor-pointer"
-                  >
-                    7 953 013 24 23
-                  </a>
+                
+                <div className="flex items-start space-x-3 sm:space-x-4">
+                  <div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-green-500/20 rounded-full flex items-center justify-center group-hover:bg-green-500/30 transition-colors duration-300">
+                    <svg className="w-5 sm:w-6 h-5 sm:h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.787"/>
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">WhatsApp</p>
+                    <a href="https://wa.me/79530132423" className="text-lg sm:text-xl font-semibold text-gray-800 hover:text-green-600 transition-colors duration-300">
+                      +7 953 013 24 23
+                    </a>
+                  </div>
                 </div>
-              </div>
-
-              <div className="flex items-start group/item">
-                <div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mr-4 group-hover/item:scale-110 transition-transform duration-300">
-                  <Mail className="w-6 h-6 text-blue-600" />
+                
+                <div className="flex items-start space-x-3 sm:space-x-4">
+                  <div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-red-500/20 rounded-full flex items-center justify-center group-hover:bg-red-500/30 transition-colors duration-300">
+                    <svg className="w-5 sm:w-6 h-5 sm:h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">Адрес</p>
+                    <p className="text-lg sm:text-xl font-semibold text-gray-800">
+                      г. Чебоксары,<br />ул. Калинина, 107
+                    </p>
+                  </div>
                 </div>
-                <div>
-                  <h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
-                    Email
-                  </h3>
-                  <span className="text-gray-600 text-lg">
-                    Будет
-                  </span>
+                
+                <div className="flex items-start space-x-3 sm:space-x-4">
+                  <div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-purple-500/20 rounded-full flex items-center justify-center group-hover:bg-purple-500/30 transition-colors duration-300">
+                    <svg className="w-5 sm:w-6 h-5 sm:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">Время работы</p>
+                    <p className="text-lg sm:text-xl font-semibold text-gray-800">
+                      Пн - Вс с 8:00 до 20:00
+                    </p>
+                  </div>
                 </div>
               </div>
-
-              <div className="flex items-start group/item">
-                <div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mr-4 group-hover/item:scale-110 transition-transform duration-300">
-                  <MapPin className="w-6 h-6 text-blue-600" />
-                </div>
-                <div>
-                  <h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
-                    Адрес
-                  </h3>
-                  <p className="text-gray-600 text-lg leading-relaxed">
-                    г. Чебоксары, ул. Калинина, 107
-                  </p>
-                </div>
-              </div>
-
-              <div className="pt-6 border-t border-gray-200">
-                <h3 className="text-xl font-bold text-gray-800 mb-4">
-                  Реквизиты
-                </h3>
-                <p className="text-gray-600 leading-relaxed">
-                  ИП Фомин Александр Вениаминович<br />
-                  ИНН 213012845835
-                </p>
-              </div>
             </div>
 
             {/* Декоративный элемент */}
@@ -156,84 +160,88 @@ const ContactSection = () => {
           {/* Форма обратной связи */}
           <FadeInSection 
             as="div" 
-            className="group relative p-8 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500"
+            className="group relative p-6 sm:p-8 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500"
             delay={0.4}
           >
             {/* Фон */}
             <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
             
             <div className="relative z-10">
-              <h3 className="text-2xl font-bold text-gray-800 mb-6 group-hover:text-blue-600 transition-colors duration-300">
-                Отправить сообщение
+              <h3 className="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6 group-hover:text-blue-600 transition-all duration-300">
+                Задать вопрос
               </h3>
               
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div>
-                  <input
-                    type="text"
-                    name="name"
-                    placeholder="Ваше имя"
-                    value={name}
-                    onChange={e => setName(e.target.value)}
-                    className="w-full px-4 py-3 rounded-lg bg-white/50 border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500"
-                    required
-                  />
-                </div>
-                
-                <div>
-                  <input
-                    type="tel"
-                    name="phone"
-                    placeholder="Ваш телефон"
-                    value={phone}
-                    onChange={e => {
-                      const val = e.target.value.replace(/\D/g, '').slice(0, 11);
-                      setPhone(val);
-                    }}
-                    className="w-full px-4 py-3 rounded-lg bg-white/50 border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500"
-                    required
-                  />
-                </div>
-                
-                <div>
-                  <textarea
-                    name="message"
-                    placeholder="Ваше сообщение"
-                    rows={4}
-                    value={message}
-                    onChange={e => setMessage(e.target.value)}
-                    className="w-full px-4 py-3 rounded-lg bg-white/50 border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500 resize-none"
-                    required
-                  />
-                </div>
-                
-                <button
-                  type="submit"
-                  disabled={loading}
-                  className="w-full py-3 px-6 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold hover:from-blue-600 hover:to-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:scale-[1.02] hover:shadow-lg"
-                >
-                  {loading ? 'Отправка...' : 'Отправить сообщение'}
-                </button>
-                
-                {success && (
-                  <div className="bg-green-100 border border-green-300 text-green-700 text-center py-3 px-4 rounded-xl text-sm">
-                    {success}
+              {success ? (
+                <div className="text-center py-8 sm:py-12">
+                  <div className="w-12 sm:w-16 h-12 sm:h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <svg className="w-6 sm:w-8 h-6 sm:h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
                   </div>
-                )}
-                
-                {error && (
-                  <div className="bg-red-100 border border-red-300 text-red-700 text-center py-3 px-4 rounded-xl text-sm">
-                    {error}
+                  <p className="text-lg sm:text-xl font-semibold text-green-600 mb-2">Спасибо за обращение!</p>
+                  <p className="text-gray-600 text-sm sm:text-base">Мы свяжемся с вами в ближайшее время</p>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
+                      Ваше имя
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      className="w-full px-3 sm:px-4 py-2 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 text-sm sm:text-base"
+                      placeholder="Введите ваше имя"
+                      required
+                    />
                   </div>
-                )}
-              </form>
-              
-              <p className="text-xs text-gray-500 mt-4 text-center">
-                Нажимая кнопку &ldquo;Отправить сообщение&rdquo;, вы соглашаетесь с{' '}
-                <a href="#" className="underline hover:text-blue-600 transition-colors duration-300">
-                  Политикой конфиденциальности
-                </a>
-              </p>
+                  
+                  <div>
+                    <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
+                      Телефон
+                    </label>
+                    <input
+                      type="tel"
+                      id="phone"
+                      value={phone}
+                      onChange={(e) => setPhone(e.target.value)}
+                      className="w-full px-3 sm:px-4 py-2 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 text-sm sm:text-base"
+                      placeholder="+7 (999) 123-45-67"
+                      required
+                    />
+                  </div>
+                  
+                  <div>
+                    <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
+                      Сообщение
+                    </label>
+                    <textarea
+                      id="message"
+                      value={message}
+                      onChange={(e) => setMessage(e.target.value)}
+                      rows={4}
+                      className="w-full px-3 sm:px-4 py-2 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 text-sm sm:text-base resize-none"
+                      placeholder="Ваш вопрос или комментарий..."
+                    />
+                  </div>
+                  
+                  {error && (
+                    <div className="p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg">
+                      <p className="text-red-600 text-sm sm:text-base">{error}</p>
+                    </div>
+                  )}
+                  
+                  <button
+                    type="submit"
+                    disabled={loading}
+                    className="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 sm:py-4 px-6 sm:px-8 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
+                  >
+                    {loading ? 'Отправка...' : 'Отправить сообщение'}
+                  </button>
+                </form>
+              )}
             </div>
 
             {/* Декоративный элемент */}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a160bd1..87bfcd5 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -13,46 +13,43 @@ const Header = () => {
 
   return (
     <>
-      <FadeInOnMount as="header" className={`fixed w-full z-50 bg-gray-900/95 backdrop-blur-sm py-4 shadow-lg`}>
-        <div className="container mx-auto px-4">
-          <div className="flex items-center justify-between gap-4">
+      <FadeInOnMount as="header" className={`fixed w-full z-50 bg-gray-900/95 backdrop-blur-sm py-3 sm:py-4 shadow-lg`}>
+        <div className="container mx-auto px-4 sm:px-6">
+          <div className="flex items-center justify-between gap-2 sm:gap-4">
             {/* Logo */}
-            <Link href="/" className="flex items-center space-x-3 flex-shrink-0 py-1">
-              <div className="bg-blue-600 p-2 rounded">
-                <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
+            <Link href="/" className="flex items-center space-x-2 sm:space-x-3 flex-shrink-0 py-1">
+              <div className="bg-blue-600 p-1.5 sm:p-2 rounded">
+                <svg className="w-6 sm:w-8 h-6 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M2 12L12 2L22 12V22H16V16H8V22H2V12Z"/>
                 </svg>
               </div>
               <div className="text-white">
-                <div className="text-xl font-bold">Ваш Дом</div>
+                <div className="text-lg sm:text-xl font-bold">Ваш Дом</div>
               </div>
             </Link>
             
             {/* Navigation */}
-            <nav className="hidden lg:flex items-center space-x-8">
-              <Link href="#services" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
-                Услуги
-              </Link>
-              <Link href="#about" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
+            <nav className="hidden lg:flex items-center space-x-8 flex-1 justify-center">
+              <Link href="#about" className="text-white hover:text-blue-400 transition-colors font-medium">
                 О нас
               </Link>
-              <Link href="#projects" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
-                Каталог домов
+              <Link href="#projects" className="text-white hover:text-blue-400 transition-colors font-medium">
+                Проекты
               </Link>
-              <Link href="#additional-services" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
-                Доп услуги
+              <Link href="#additional-services" className="text-white hover:text-blue-400 transition-colors font-medium">
+                Услуги
               </Link>
-              <Link href="#contacts" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
+              <Link href="#contact" className="text-white hover:text-blue-400 transition-colors font-medium">
                 Контакты
               </Link>
             </nav>
-
-            {/* Right side */}
-            <div className="hidden md:flex items-center space-x-6 flex-shrink-0">
+            
+            {/* Contact Info & CTA */}
+            <div className="hidden md:flex items-center space-x-4 lg:space-x-6 flex-shrink-0">
               <div className="text-right">
                 <a 
                   href="tel:+79530132423" 
-                  className="flex items-center text-white hover:text-blue-400 transition-colors group text-lg font-semibold whitespace-nowrap"
+                  className="flex items-center text-white hover:text-blue-400 transition-colors group text-base lg:text-lg font-semibold whitespace-nowrap"
                 >
                   +7 953 013 24 23
                 </a>
@@ -60,7 +57,7 @@ const Header = () => {
               </div>
               <button 
                 onClick={() => setIsModalOpen(true)}
-                className="relative bg-gradient-to-r from-orange-500 to-red-500 text-white px-8 py-3.5 rounded-lg font-bold text-base flex-shrink-0 flex items-center space-x-2 group overflow-hidden transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl animate-pulse hover:animate-none"
+                className="relative bg-gradient-to-r from-orange-500 to-red-500 text-white px-4 lg:px-8 py-2.5 lg:py-3.5 rounded-lg font-bold text-sm lg:text-base flex-shrink-0 flex items-center space-x-2 group overflow-hidden transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl animate-pulse hover:animate-none"
               >
                 {/* Светящийся фон */}
                 <div className="absolute inset-0 bg-gradient-to-r from-orange-400 to-red-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
@@ -71,7 +68,7 @@ const Header = () => {
                 
                 {/* Контент кнопки */}
                 <div className="relative z-10 flex items-center space-x-2">
-                <Phone className="w-5 h-5 group-hover:animate-bounce" />
+                <Phone className="w-4 lg:w-5 h-4 lg:h-5 group-hover:animate-bounce" />
                   <span className="relative">
                     Оставить заявку
                     {/* Подчеркивание */}
@@ -89,7 +86,7 @@ const Header = () => {
               className="md:hidden text-white hover:text-gray-300 transition-colors p-2 hover:bg-white/10 rounded-lg"
               aria-label="Открыть меню"
             >
-              <Menu className="w-6 h-6" />
+              <Menu className="w-5 h-5 sm:w-6 sm:h-6" />
             </button>
           </div>
         </div>
diff --git a/src/components/HouseCalculatorModal.tsx b/src/components/HouseCalculatorModal.tsx
index e680e82..d8c78f5 100644
--- a/src/components/HouseCalculatorModal.tsx
+++ b/src/components/HouseCalculatorModal.tsx
@@ -115,47 +115,43 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-2 sm:p-4">
       {/* Декоративный фон */}
       <div className="absolute inset-0 opacity-20">
-        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
-        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
-        <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl"></div>
+        <div className="absolute top-1/4 left-1/4 w-64 sm:w-80 lg:w-96 h-64 sm:h-80 lg:h-96 bg-blue-500 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-56 sm:w-64 lg:w-80 h-56 sm:h-64 lg:h-80 bg-purple-500 rounded-full blur-3xl"></div>
+        <div className="absolute top-1/2 left-1/2 w-48 sm:w-56 lg:w-64 h-48 sm:h-56 lg:h-64 bg-cyan-500 rounded-full blur-3xl"></div>
       </div>
 
-      <div className="relative bg-gradient-to-br from-gray-900/95 via-gray-800/95 to-gray-900/95 backdrop-blur-md border border-white/20 rounded-2xl shadow-2xl w-full max-w-2xl mx-auto animate-fadeIn max-h-[90vh] overflow-y-auto">
+      <div className="relative bg-gradient-to-br from-gray-900/95 via-gray-800/95 to-gray-900/95 backdrop-blur-md border border-white/20 rounded-2xl shadow-2xl w-full max-w-xs sm:max-w-md lg:max-w-2xl mx-auto animate-fadeIn max-h-[90vh] overflow-y-auto">
         <button
           onClick={closeModal}
-          className="absolute top-4 right-4 text-gray-400 hover:text-white p-2 hover:bg-white/10 rounded-full transition-colors z-10"
+          className="absolute top-3 sm:top-4 right-3 sm:right-4 text-gray-400 hover:text-white p-1.5 sm:p-2 hover:bg-white/10 rounded-full transition-colors z-10"
           aria-label="Закрыть калькулятор"
         >
-          <X className="w-5 h-5 sm:w-6 sm:h-6" />
+          <X className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6" />
         </button>
-        
-        <div className="p-4 sm:p-6 md:p-8">
-          <div className="flex items-center justify-between mb-4 sm:mb-6">
-            <span className="text-gray-300 text-xs sm:text-sm">
-              {step < 5 ? 'Для расчета стоимости выберите один из вариантов' : 'Спасибо за заявку!'}
-            </span>
-            <span className="text-gray-300 text-xs sm:text-sm">{step}/5</span>
-          </div>
-          
-          <div className="w-full h-2 bg-white/10 rounded-full mb-6 sm:mb-8">
-            <div className="h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500" style={{ width: `${(step-1)*25}%` }} />
+
+        <div className="p-4 sm:p-6 lg:p-8">
+          <div className="text-center mb-6 sm:mb-8">
+            <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+              Калькулятор стоимости дома
+            </h1>
+            <div className="w-16 sm:w-20 lg:w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
           </div>
 
           {step === 1 && (
             <div>
-              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
-                Из какого материала хотите построить дом?
+              <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+                Выберите материал
               </h2>
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
                 {materials.map((m) => (
                   <button
                     key={m.value}
                     type="button"
                     onClick={() => setMaterial(m.value)}
-                    className={`group relative p-4 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 hover:scale-[1.02] ${
+                    className={`group relative p-3 sm:p-4 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 hover:scale-[1.02] ${
                       material === m.value 
                         ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
                         : 'border-white/20 hover:border-white/40'
@@ -166,22 +162,16 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
                       material === m.value ? 'opacity-100' : 'opacity-0'
                     }`}></div>
                     
-                    <div className="relative z-10 flex flex-col items-center">
-                      <div className="relative w-20 h-20 sm:w-24 sm:h-24 mb-3 sm:mb-4 rounded-xl overflow-hidden">
-                        <Image 
-                          src={m.img} 
-                          alt={m.label} 
-                          fill 
-                          className="object-cover"
-                          sizes="(max-width: 640px) 80px, (max-width: 1024px) 96px, 96px"
-                        />
+                    <div className="relative z-10 text-center">
+                      <div className="text-2xl sm:text-3xl lg:text-4xl mb-2 sm:mb-3 group-hover:scale-110 transition-transform duration-300">
+                        {m.icon}
                       </div>
-                      <span className="text-sm sm:text-base font-medium text-white text-center group-hover:text-blue-300 transition-colors duration-300">
-                        {m.label}
-                      </span>
-                      {material === m.value && (
-                        <CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 text-blue-400 absolute top-2 right-2" />
-                      )}
+                      <h3 className="text-sm sm:text-base lg:text-lg font-bold text-white mb-1 sm:mb-2 group-hover:text-blue-300 transition-colors duration-300">
+                        {m.name}
+                      </h3>
+                      <p className="text-xs sm:text-sm text-gray-300 group-hover:text-white transition-colors duration-300">
+                        {m.description}
+                      </p>
                     </div>
                   </button>
                 ))}
@@ -191,12 +181,12 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
           {step === 2 && (
             <div>
-              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+              <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
                 Какая площадь дома?
               </h2>
-              <div className="flex flex-col gap-3 sm:gap-4">
+              <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
                 {areas.map((a) => (
-                  <label key={a} className="group relative cursor-pointer p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
+                  <label key={a} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
                     <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                     <div className="relative z-10 flex items-center">
                       <input
@@ -205,9 +195,9 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
                         value={a}
                         checked={area === a}
                         onChange={() => setArea(a)}
-                        className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
+                        className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 mr-2 sm:mr-3 accent-blue-500"
                       />
-                      <span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{a}</span>
+                      <span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{a}</span>
                     </div>
                   </label>
                 ))}
@@ -217,23 +207,31 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
           {step === 3 && (
             <div>
-              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
-                Вариант отделки
+              <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+                Дополнительные опции
               </h2>
-              <div className="flex flex-col gap-3 sm:gap-4">
-                {finishes.map((f) => (
-                  <label key={f} className="group relative cursor-pointer p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
+              <div className="space-y-2 sm:space-y-3 lg:space-y-4">
+                {options.map((option) => (
+                  <label key={option.value} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300 flex items-center justify-between">
                     <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                    <div className="relative z-10 flex items-center">
+                    <div className="relative z-10 flex items-center flex-1">
                       <input
-                        type="radio"
-                        name="finish"
-                        value={f}
-                        checked={finish === f}
-                        onChange={() => setFinish(f)}
-                        className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
+                        type="checkbox"
+                        checked={selectedOptions.includes(option.value)}
+                        onChange={() => handleOptionChange(option.value)}
+                        className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 mr-2 sm:mr-3 accent-blue-500"
                       />
-                      <span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span>
+                      <div className="flex-1">
+                        <span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">
+                          {option.name}
+                        </span>
+                        <div className="text-xs sm:text-sm text-gray-300 mt-1">
+                          {option.description}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="relative z-10 text-xs sm:text-sm lg:text-base text-blue-300 font-semibold">
+                      +{option.price.toLocaleString()} ₽
                     </div>
                   </label>
                 ))}
@@ -242,86 +240,76 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
           )}
 
           {step === 4 && (
-            <div>
-              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
-                Источник финансирования
-              </h2>
-              <div className="flex flex-col gap-3 sm:gap-4">
-                {finances.map((f) => (
-                  <label key={f} className="group relative cursor-pointer p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
-                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                    <div className="relative z-10 flex items-center">
-                      <input
-                        type="radio"
-                        name="finance"
-                        value={f}
-                        checked={finance === f}
-                        onChange={() => setFinance(f)}
-                        className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
-                      />
-                      <span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span>
+            <div className="text-center">
+              <div className="mb-6 sm:mb-8">
+                <div className="text-3xl sm:text-4xl lg:text-5xl mb-2 sm:mb-4">🏠</div>
+                <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+                  Расчет готов!
+                </h2>
+                <div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-400 mb-2 sm:mb-4">
+                  {totalPrice.toLocaleString()} ₽
+                </div>
+                <p className="text-sm sm:text-base text-gray-300">
+                  Итоговая стоимость строительства
+                </p>
+              </div>
+              
+              <div className="bg-white/10 backdrop-blur-md rounded-xl p-4 sm:p-6 mb-6 sm:mb-8 border border-white/20">
+                <h3 className="text-base sm:text-lg font-bold text-white mb-3 sm:mb-4">Детали расчета:</h3>
+                <div className="space-y-2 text-sm sm:text-base text-gray-300">
+                  <div className="flex justify-between">
+                    <span>Материал:</span>
+                    <span className="text-white">{materials.find(m => m.value === material)?.name}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Площадь:</span>
+                    <span className="text-white">{area}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Базовая стоимость:</span>
+                    <span className="text-white">{basePrice.toLocaleString()} ₽</span>
+                  </div>
+                  {selectedOptions.length > 0 && (
+                    <div className="flex justify-between">
+                      <span>Дополнительно:</span>
+                      <span className="text-white">+{optionsPrice.toLocaleString()} ₽</span>
                     </div>
-                  </label>
-                ))}
+                  )}
+                </div>
               </div>
             </div>
           )}
 
-          {step === 5 && (
-            <div className="flex flex-col items-center justify-center py-8 sm:py-12 animate-fadeIn">
-              <div className="bg-green-500/20 border border-green-500/30 backdrop-blur-sm rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 flex items-center shadow-lg w-full max-w-xl mx-auto">
-                <CheckCircle className="w-8 h-8 sm:w-10 sm:h-10 text-green-400 mr-3 sm:mr-4 flex-shrink-0" />
-                <span className="text-green-300 text-base sm:text-lg md:text-xl font-semibold leading-snug text-left">
-                  Благодарим за обращение в нашу компанию!<br className='hidden md:block' /> В течение 15 минут мы свяжемся с вами!
-                </span>
-              </div>
+          <div className="flex justify-between items-center mt-6 sm:mt-8">
+            {step > 1 && (
+              <button
+                onClick={handlePrevious}
+                className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-gray-600 to-gray-700 text-white hover:from-gray-700 hover:to-gray-800 transition-all duration-300 hover:scale-105 text-sm sm:text-base"
+              >
+                <ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
+                <span>Назад</span>
+              </button>
+            )}
+            
+            {step < 4 ? (
+              <button
+                onClick={handleNext}
+                disabled={!canProceed()}
+                className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:scale-105 ml-auto text-sm sm:text-base"
+              >
+                <span>Далее</span>
+                <ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
+              </button>
+            ) : (
               <button
                 onClick={closeModal}
-                className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-3 rounded-full hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-base sm:text-lg font-semibold shadow-lg hover:scale-105"
+                className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition-all duration-300 hover:scale-105 ml-auto text-sm sm:text-base"
               >
-                Закрыть
+                <span>Готово</span>
+                <Check className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
-            </div>
-          )}
-
-
-
-          {error && (
-            <div className="mt-4 sm:mt-6 bg-red-500/20 border border-red-500/30 text-red-300 text-center py-2 sm:py-3 px-3 sm:px-4 rounded-xl flex items-center justify-center min-h-[40px] sm:min-h-[48px] text-sm sm:text-base backdrop-blur-sm">
-              <AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 mr-2 shrink-0" />
-              <span className="block w-full break-words">{error}</span>
-            </div>
-          )}
-
-          {step < 5 && (
-            <div className="flex justify-between mt-6 sm:mt-8">
-              {step > 1 && (
-                <button
-                  onClick={handlePrev}
-                  className="bg-white/10 backdrop-blur-sm border border-white/20 text-white px-4 sm:px-6 py-2 rounded-full hover:bg-white/20 hover:scale-105 transition-all duration-300 text-sm sm:text-base font-medium"
-                >
-                  ← Назад
-                </button>
-              )}
-              {step < 4 && (
-                <button
-                  onClick={handleNext}
-                  className="ml-auto bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-2 rounded-full hover:from-blue-600 hover:to-purple-600 hover:scale-105 transition-all duration-300 text-sm sm:text-base font-medium shadow-lg"
-                >
-                  Далее →
-                </button>
-              )}
-              {step === 4 && (
-                <button
-                  onClick={handleNext}
-                  disabled={isSubmitting}
-                  className="ml-auto bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-2 rounded-full hover:from-blue-600 hover:to-purple-600 hover:scale-105 transition-all duration-300 text-sm sm:text-base font-medium shadow-lg disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100"
-                >
-                  {isSubmitting ? 'Отправка...' : 'Рассчитать стоимость'}
-                </button>
-              )}
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx
index b74be58..cacfbcd 100644
--- a/src/components/ProjectsSection.tsx
+++ b/src/components/ProjectsSection.tsx
@@ -144,6 +144,7 @@ const ProjectImageSlider = ({ project }: { project: typeof projects[0] }) => {
             ? 'object-contain p-4' 
             : 'object-cover'
         }`}
+        unoptimized={true}
       />
 
       {/* Навигация по изображениям */}
diff --git a/src/components/ReviewsSection.tsx b/src/components/ReviewsSection.tsx
index 0b5e74d..4e21580 100644
--- a/src/components/ReviewsSection.tsx
+++ b/src/components/ReviewsSection.tsx
@@ -75,6 +75,7 @@ const ReviewsSection = () => {
                       alt={review.name}
                       fill
                       className="object-cover"
+                      unoptimized={true}
                     />
                     {/* Декоративная рамка */}
                     <div className="absolute inset-0 rounded-full border border-gray-200 group-hover:border-blue-300 transition-colors duration-300"></div>
diff --git a/src/components/TeamSection.tsx b/src/components/TeamSection.tsx
index 7c5e5b4..2265bc9 100644
--- a/src/components/TeamSection.tsx
+++ b/src/components/TeamSection.tsx
@@ -9,51 +9,51 @@ import { Droplets, Zap, Thermometer, Wrench } from 'lucide-react';
 const workExamples = [
   {
     id: 1,
-    title: 'Деревянный каркасный дом',
+    title: 'Дом из пеноблоков',
     description: 'Г.Чебоксары п. Альгешево, 100 м2',
     image: '/images/koroche.jpg',
     area: '100 кв.м',
-    material: 'Каркасная технология',
+    material: 'Пеноблоки',
   },
   {
     id: 2,
-    title: 'Деревянный каркасный дом',
+    title: 'Дом из пеноблоков',
     description: 'г. Мариинский Посад, 80 м2',
     image: '/images/koroche2.jpg',
     area: '80 кв.м',
-    material: 'Каркасная технология',
+    material: 'Пеноблоки',
   },
   {
     id: 3,
-    title: 'Деревянный каркасный дом',
+    title: 'Дом из пеноблоков',
     description: 'г. Цивильск, 80 м2',
     image: '/images/koroche3.jpg',
     area: '80 кв.м',
-    material: 'Каркасная технология',
+    material: 'Пеноблоки',
   },
   {
     id: 4,
-    title: 'Деревянный каркасный дом',
+    title: 'Дом из пеноблоков',
     description: 'с. Комсомольское, 78 м2',
     image: '/images/koroche4.jpg',
     area: '78 кв.м',
-    material: 'Каркасная технология',
+    material: 'Пеноблоки',
   },
   {
     id: 5,
-    title: 'Деревянный каркасный дом',
+    title: 'Дом из пеноблоков',
     description: 'Сосновка, 92 м2',
     image: '/images/koroche5.jpg',
     area: '92 кв.м',
-    material: 'Каркасная технология',
+    material: 'Пеноблоки',
   },
   {
     id: 6,
-    title: 'Деревянный каркасный дом',
+    title: 'Дом из пеноблоков',
     description: 'пос. Кугеси 110 м2',
     image: '/images/koroche6.webp',
     area: '110 кв.м',
-    material: 'Каркасная технология',
+    material: 'Пеноблоки',
   },
 ];
 
@@ -96,17 +96,17 @@ const WorkExamplesSection = () => {
   const [isCallbackModalOpen, setIsCallbackModalOpen] = useState(false);
 
   return (
-    <section className="relative py-20 bg-gradient-to-tl from-indigo-50 via-white to-blue-50 overflow-hidden">
+    <section className="relative py-12 sm:py-16 lg:py-20 bg-gradient-to-tl from-indigo-50 via-white to-blue-50 overflow-hidden">
       {/* Технический фон */}
       <div className="absolute inset-0 opacity-25">
         {/* Инструменты стилизованные */}
-        <div className="absolute top-12 left-12 w-6 h-6 border-2 border-blue-400 transform rotate-45 opacity-30"></div>
-        <div className="absolute top-1/4 right-16 w-8 h-2 bg-indigo-400 rounded opacity-35"></div>
-        <div className="absolute bottom-20 left-1/5 w-2 h-8 bg-cyan-400 rounded opacity-40"></div>
+        <div className="absolute top-12 left-12 w-4 sm:w-6 h-4 sm:h-6 border-2 border-blue-400 transform rotate-45 opacity-30"></div>
+        <div className="absolute top-1/4 right-16 w-6 sm:w-8 h-1 sm:h-2 bg-indigo-400 rounded opacity-35"></div>
+        <div className="absolute bottom-20 left-1/5 w-1 sm:w-2 h-6 sm:h-8 bg-cyan-400 rounded opacity-40"></div>
         
         {/* Гайки и болты */}
-        <div className="absolute top-1/3 left-1/3 w-4 h-4 border border-blue-500 rounded-full opacity-25"></div>
-        <div className="absolute bottom-1/3 right-1/4 w-3 h-3 bg-indigo-500 rounded-sm opacity-30"></div>
+        <div className="absolute top-1/3 left-1/3 w-3 sm:w-4 h-3 sm:h-4 border border-blue-500 rounded-full opacity-25"></div>
+        <div className="absolute bottom-1/3 right-1/4 w-2 sm:w-3 h-2 sm:h-3 bg-indigo-500 rounded-sm opacity-30"></div>
         
         {/* Технические линии */}
         <div className="absolute top-0 left-1/4 w-px h-1/2 bg-gradient-to-b from-blue-300 to-transparent opacity-30"></div>
@@ -114,21 +114,21 @@ const WorkExamplesSection = () => {
         <div className="absolute top-1/3 left-0 w-1/3 h-px bg-gradient-to-r from-cyan-300 to-transparent opacity-20"></div>
       </div>
 
-      <div className="container mx-auto px-4 relative z-10">
+      <div className="container mx-auto px-4 sm:px-6 relative z-10">
         {/* Заголовок секции */}
-        <FadeInSection as="div" className="text-center mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
+        <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
             Примеры наших работ
           </h2>
           <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
         </FadeInSection>
 
-        <FadeInSection as="p" className="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto" delay={0.2}>
+        <FadeInSection as="p" className="text-base sm:text-lg text-gray-600 text-center mb-8 sm:mb-12 max-w-2xl mx-auto" delay={0.2}>
           Реальные проекты, которые мы успешно реализовали для наших клиентов
         </FadeInSection>
 
         {/* Карточки примеров работ */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 mb-12 sm:mb-16 lg:mb-20">
           {workExamples.map((example, index) => (
             <FadeInSection 
               key={example.id} 
@@ -141,29 +141,30 @@ const WorkExamplesSection = () => {
               
               <div className="relative z-10">
                 {/* Изображение */}
-                <div className="relative h-48 w-full overflow-hidden rounded-t-2xl">
+                <div className="relative h-40 sm:h-48 w-full overflow-hidden rounded-t-2xl">
                   <Image
                     src={example.image}
                     alt={example.title}
                     fill
                     className="object-cover group-hover:scale-110 transition-transform duration-500"
                     sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                    unoptimized={true}
                   />
                   {/* Градиент поверх изображения */}
                   <div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent"></div>
                   
                   {/* Бейдж с материалом */}
-                  <div className="absolute top-4 left-4 px-3 py-1 bg-blue-500/80 backdrop-blur-sm rounded-full text-white text-sm font-medium">
+                  <div className="absolute top-3 sm:top-4 left-3 sm:left-4 px-2 sm:px-3 py-1 bg-blue-500/80 backdrop-blur-sm rounded-full text-white text-xs sm:text-sm font-medium">
                     {example.material}
                   </div>
                 </div>
                 
                 {/* Контент */}
-                <div className="p-6">
-                  <h3 className="text-xl font-bold text-gray-800 mb-2 group-hover:text-blue-600 transition-all duration-300">
+                <div className="p-4 sm:p-6">
+                  <h3 className="text-lg sm:text-xl font-bold text-gray-800 mb-2 group-hover:text-blue-600 transition-all duration-300">
                     {example.title}
                   </h3>
-                  <p className="text-gray-600 text-sm mb-4 leading-relaxed">
+                  <p className="text-gray-600 text-sm mb-3 sm:mb-4 leading-relaxed">
                     {example.description}
                   </p>
                   
@@ -171,10 +172,10 @@ const WorkExamplesSection = () => {
                   <div className="flex items-center justify-between">
                     <div className="flex items-center space-x-2">
                       <div className="w-2 h-2 bg-green-400 rounded-full"></div>
-                      <span className="text-gray-500 text-sm">Площадь:</span>
-                      <span className="text-gray-800 text-sm font-medium">{example.area}</span>
+                      <span className="text-gray-500 text-xs sm:text-sm">Площадь:</span>
+                      <span className="text-gray-800 text-xs sm:text-sm font-medium">{example.area}</span>
                     </div>
-                    <div className="px-3 py-1 bg-green-100 rounded-full text-green-600 text-xs font-medium">
+                    <div className="px-2 sm:px-3 py-1 bg-green-100 rounded-full text-green-600 text-xs font-medium">
                       Завершен
                     </div>
                   </div>
@@ -189,15 +190,15 @@ const WorkExamplesSection = () => {
 
         {/* Дополнительные услуги */}
         <div id="additional-services">
-          <FadeInSection as="div" className="mb-16" delay={0.8}>
-            <div className="text-center mb-12">
-            <h3 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
+        <FadeInSection as="div" className="mb-16" delay={0.8}>
+          <div className="text-center mb-8 sm:mb-12">
+            <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
               Дополнительные услуги
             </h3>
             <div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
           </div>
           
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
             {additionalServices.map((service, index) => (
               <FadeInSection 
                 key={service.id} 
@@ -210,37 +211,38 @@ const WorkExamplesSection = () => {
                 
                 <div className="relative z-10">
                   {/* Изображение */}
-                  <div className="relative h-40 w-full overflow-hidden rounded-t-2xl">
+                  <div className="relative h-32 sm:h-40 w-full overflow-hidden rounded-t-2xl">
                     <Image
                       src={service.image}
                       alt={service.title}
                       fill
                       className="object-cover group-hover:scale-110 transition-transform duration-500"
                       sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
+                      unoptimized={true}
                     />
                     {/* Градиент поверх изображения */}
                     <div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent"></div>
                     
                     {/* Иконка поверх изображения */}
-                    <div className="absolute top-4 left-4 w-12 h-12 rounded-full bg-white/20 backdrop-blur-sm border border-white/30 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
-                      <service.icon className="w-6 h-6 text-white" />
+                    <div className="absolute top-3 sm:top-4 left-3 sm:left-4 w-10 sm:w-12 h-10 sm:h-12 rounded-full bg-white/20 backdrop-blur-sm border border-white/30 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                      <service.icon className="w-5 sm:w-6 h-5 sm:h-6 text-white" />
                     </div>
                   </div>
                   
                   {/* Контент */}
-                  <div className="p-6 text-center">
-                    <h4 className="text-xl font-bold text-gray-800 mb-4 group-hover:text-blue-600 transition-colors duration-300">
+                  <div className="p-4 sm:p-6 text-center">
+                    <h4 className="text-lg sm:text-xl font-bold text-gray-800 mb-3 sm:mb-4 group-hover:text-blue-600 transition-colors duration-300">
                       {service.title}
                     </h4>
                     
-                    <p className="text-gray-600 text-base mb-6 leading-relaxed">
+                    <p className="text-gray-600 text-sm sm:text-base mb-4 sm:mb-6 leading-relaxed">
                       {service.description}
                     </p>
                     
-                    <ul className="space-y-3">
+                    <ul className="space-y-2 sm:space-y-3">
                       {service.features.map((feature, featureIndex) => (
-                        <li key={featureIndex} className="flex items-center text-sm text-gray-500">
-                          <div className="w-2 h-2 bg-green-400 rounded-full mr-3"></div>
+                        <li key={featureIndex} className="flex items-center text-xs sm:text-sm text-gray-500">
+                          <div className="w-2 h-2 bg-green-400 rounded-full mr-2 sm:mr-3"></div>
                           {feature}
                         </li>
                       ))}
@@ -253,7 +255,7 @@ const WorkExamplesSection = () => {
               </FadeInSection>
             ))}
           </div>
-          </FadeInSection>
+        </FadeInSection>
         </div>
 
         {/* Призыв к действию */}
diff --git a/src/components/WhyChooseUsSection.tsx b/src/components/WhyChooseUsSection.tsx
index 589322e..0831216 100644
--- a/src/components/WhyChooseUsSection.tsx
+++ b/src/components/WhyChooseUsSection.tsx
@@ -28,51 +28,51 @@ const features = [
 
 const WhyChooseUsSection = () => {
   return (
-    <section className="relative py-20 bg-gradient-to-bl from-blue-50 via-white to-slate-50 overflow-hidden">
+    <section className="relative py-12 sm:py-16 lg:py-20 bg-gradient-to-bl from-blue-50 via-white to-slate-50 overflow-hidden">
       {/* Минималистичный фон */}
       <div className="absolute inset-0 opacity-35">
         {/* Точки */}
-        <div className="absolute top-20 left-20 w-3 h-3 bg-blue-500 rounded-full opacity-40"></div>
-        <div className="absolute top-40 right-32 w-2 h-2 bg-indigo-500 rounded-full opacity-50"></div>
-        <div className="absolute bottom-32 left-1/4 w-4 h-4 bg-cyan-500 rounded-full opacity-30"></div>
-        <div className="absolute top-1/3 right-1/4 w-2 h-2 bg-blue-400 rounded-full opacity-45"></div>
+        <div className="absolute top-20 left-20 w-2 sm:w-3 h-2 sm:h-3 bg-blue-500 rounded-full opacity-40"></div>
+        <div className="absolute top-40 right-32 w-1.5 sm:w-2 h-1.5 sm:h-2 bg-indigo-500 rounded-full opacity-50"></div>
+        <div className="absolute bottom-32 left-1/4 w-3 sm:w-4 h-3 sm:h-4 bg-cyan-500 rounded-full opacity-30"></div>
+        <div className="absolute top-1/3 right-1/4 w-1.5 sm:w-2 h-1.5 sm:h-2 bg-blue-400 rounded-full opacity-45"></div>
         
         {/* Тонкие линии */}
         <div className="absolute top-1/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-300 to-transparent opacity-25"></div>
         <div className="absolute bottom-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-indigo-300 to-transparent opacity-20"></div>
         
         {/* Угловые элементы */}
-        <div className="absolute top-0 right-0 w-32 h-32 border-t-2 border-r-2 border-blue-300 opacity-20"></div>
-        <div className="absolute bottom-0 left-0 w-24 h-24 border-b-2 border-l-2 border-indigo-300 opacity-25"></div>
+        <div className="absolute top-0 right-0 w-24 sm:w-32 h-24 sm:h-32 border-t-2 border-r-2 border-blue-300 opacity-20"></div>
+        <div className="absolute bottom-0 left-0 w-18 sm:w-24 h-18 sm:h-24 border-b-2 border-l-2 border-indigo-300 opacity-25"></div>
       </div>
 
-      <div className="container mx-auto px-4 relative z-10">
+      <div className="container mx-auto px-4 sm:px-6 relative z-10">
         {/* Заголовок секции */}
-        <FadeInSection as="div" className="text-center mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
+        <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
             Почему выбирают нас?
           </h2>
           <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
         </FadeInSection>
 
         {/* Карточки преимуществ */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
           {features.map((feature, index) => (
             <FadeInSection 
               key={index} 
               as="div" 
-              className="group relative p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2"
+              className="group relative p-4 sm:p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2"
               delay={0.2 * index}
             >
               {/* Фон */}
               <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
               
               <div className="relative z-10">
-                <feature.icon className="w-12 h-12 text-blue-600 mb-4 group-hover:text-blue-700 group-hover:scale-110 transition-all duration-300" />
-                <h3 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-blue-600 transition-all duration-300">
+                <feature.icon className="w-10 sm:w-12 h-10 sm:h-12 text-blue-600 mb-3 sm:mb-4 group-hover:text-blue-700 group-hover:scale-110 transition-all duration-300" />
+                <h3 className="text-lg sm:text-xl font-bold text-gray-800 mb-2 sm:mb-3 group-hover:text-blue-600 transition-all duration-300">
                   {feature.title}
                 </h3>
-                <p className="text-gray-600 leading-relaxed">
+                <p className="text-gray-600 leading-relaxed text-sm sm:text-base">
                   {feature.description}
                 </p>
               </div>