From 8550e6ecc5cf1dd64e6cd76c7fb798446dc986c4 Mon Sep 17 00:00:00 2001
From: albivkt <albivkt@outlook.com>
Date: Sun, 6 Jul 2025 19:09:22 +0300
Subject: [PATCH] Enhance responsiveness and layout across multiple components:
 Added new screen sizes in Tailwind configuration, improved padding and
 margins in various sections, and updated styles for better mobile
 compatibility. Adjusted header and footer designs for improved user
 experience.

---
 public/styles/global.css                      | 270 +++++++++++++++++-
 src/components/About.astro                    |  28 +-
 src/components/Breadcrumbs.astro              |   2 +-
 src/components/FloatingFAQ.astro              |  44 +--
 src/components/Footer.astro                   |  58 ++--
 src/components/Header.astro                   |  61 ++--
 src/components/Hero.astro                     |  70 ++---
 src/components/InfoSection.astro              |  90 +++---
 src/components/Products.astro                 |  44 +--
 src/components/Up.astro                       |   4 +-
 src/layouts/Layout.astro                      |   2 +-
 src/pages/404.astro                           |   2 +-
 src/pages/[slug].astro                        |  46 +--
 .../blog/affinazh-dragocennyh-metallov.astro  |   2 +-
 src/pages/blog/index.astro                    |  72 ++---
 .../platinovye-metally-promyshlennost.astro   |   2 +-
 .../sertifikaciya-kontrolj-kachestva.astro    |   2 +-
 src/pages/cities.astro                        | 108 +++----
 src/pages/faq.astro                           |  90 +++---
 tailwind.config.mjs                           |   1 +
 vercel.json                                   |   2 +-
 21 files changed, 632 insertions(+), 368 deletions(-)

diff --git a/public/styles/global.css b/public/styles/global.css
index e88d570..3bd2a6d 100644
--- a/public/styles/global.css
+++ b/public/styles/global.css
@@ -30,22 +30,276 @@ body {
   color: #2c2c2c;
 }
 
+/* Отступы от фиксированного хедера */
+.header-offset {
+  padding-top: 4rem; /* 64px */
+}
+
+@media (min-width: 320px) {
+  .header-offset {
+    padding-top: 4.5rem; /* 72px */
+  }
+}
+
+@media (min-width: 480px) {
+  .header-offset {
+    padding-top: 5rem; /* 80px */
+  }
+}
+
+@media (min-width: 640px) {
+  .header-offset {
+    padding-top: 5.5rem; /* 88px */
+  }
+}
+
+@media (min-width: 768px) {
+  .header-offset {
+    padding-top: 6rem; /* 96px */
+  }
+}
+
+@media (min-width: 1024px) {
+  .header-offset {
+    padding-top: 7rem; /* 112px */
+  }
+}
+
+/* Планшетные стили */
+@media (min-width: 768px) and (max-width: 1023px) {
+  /* Оптимизация для планшетов */
+  .tablet-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .tablet-text-lg {
+    font-size: 1.125rem;
+  }
+  
+  .tablet-p-6 {
+    padding: 1.5rem;
+  }
+  
+  .tablet-gap-6 {
+    gap: 1.5rem;
+  }
+  
+  /* Увеличиваем размер кликабельных элементов для планшетов */
+  .tablet-touch-target {
+    min-height: 48px;
+    min-width: 48px;
+  }
+}
+
+/* Портретная ориентация планшетов */
+@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
+  .tablet-portrait-stack {
+    flex-direction: column;
+  }
+  
+  .tablet-portrait-full {
+    width: 100%;
+  }
+  
+  .tablet-portrait-center {
+    text-align: center;
+  }
+}
+
+/* Альбомная ориентация планшетов */
+@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
+  .tablet-landscape-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .tablet-landscape-flex {
+    display: flex;
+    align-items: center;
+  }
+}
+
+/* Ноутбучные стили */
+@media (min-width: 1024px) and (max-width: 1439px) {
+  /* Оптимизация для ноутбуков */
+  .laptop-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .laptop-text-xl {
+    font-size: 1.25rem;
+  }
+  
+  .laptop-p-8 {
+    padding: 2rem;
+  }
+  
+  .laptop-gap-8 {
+    gap: 2rem;
+  }
+  
+  /* Компактные отступы для ноутбуков */
+  .laptop-compact {
+    padding: 1rem 2rem;
+  }
+  
+  .laptop-sidebar {
+    width: 280px;
+  }
+}
+
+/* Оптимизация для touch-устройств */
+@media (hover: none) and (pointer: coarse) {
+  /* Увеличиваем размер кликабельных элементов */
+  button, 
+  .btn,
+  a[role="button"],
+  input[type="button"],
+  input[type="submit"] {
+    min-height: 44px;
+    min-width: 44px;
+    padding: 12px 16px;
+  }
+  
+  /* Убираем hover эффекты для touch-устройств */
+  .hover\:scale-105:hover {
+    transform: none;
+  }
+  
+  /* Добавляем активные состояния для touch */
+  .touch-active:active {
+    transform: scale(0.95);
+    transition: transform 0.1s ease;
+  }
+}
+
+/* Улучшенная прокрутка для планшетов */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+  
+  /* Скрываем скроллбары на планшетах для более чистого вида */
+  .hide-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Адаптивная типографика */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .responsive-text-sm {
+    font-size: 0.875rem;
+  }
+  
+  .responsive-text-base {
+    font-size: 1rem;
+  }
+  
+  .responsive-text-lg {
+    font-size: 1.125rem;
+  }
+  
+  .responsive-text-xl {
+    font-size: 1.25rem;
+  }
+  
+  .responsive-text-2xl {
+    font-size: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .responsive-text-sm {
+    font-size: 0.875rem;
+  }
+  
+  .responsive-text-base {
+    font-size: 1rem;
+  }
+  
+  .responsive-text-lg {
+    font-size: 1.125rem;
+  }
+  
+  .responsive-text-xl {
+    font-size: 1.25rem;
+  }
+  
+  .responsive-text-2xl {
+    font-size: 1.5rem;
+  }
+  
+  .responsive-text-3xl {
+    font-size: 1.875rem;
+  }
+}
+
 /* Кастомные стили */
 .social-icon {
-  transition:
-    transform 0.3s ease,
-    color 0.3s ease;
+  transition: transform 0.3s ease, opacity 0.3s ease;
 }
 
 .social-icon:hover {
   transform: scale(1.1);
-  color: #facc15;
+  opacity: 0.8;
 }
 
-.social-icon img {
-  transition: filter 0.3s ease;
+/* Анимации */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.social-icon:hover img {
-  filter: brightness(1.2) saturate(1.2);
+.fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+/* Специальные стили для модальных окон на планшетах */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .modal-tablet {
+    max-width: 90vw;
+    max-height: 90vh;
+  }
+  
+  .modal-tablet .modal-content {
+    padding: 2rem;
+  }
+  
+  .modal-tablet .modal-header {
+    font-size: 1.5rem;
+  }
+  
+  .modal-tablet .modal-text {
+    font-size: 1rem;
+  }
+}
+
+/* Специальные стили для модальных окон на ноутбуках */
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .modal-laptop {
+    max-width: 80vw;
+    max-height: 85vh;
+  }
+  
+  .modal-laptop .modal-content {
+    padding: 2.5rem;
+  }
+  
+  .modal-laptop .modal-header {
+    font-size: 1.75rem;
+  }
+  
+  .modal-laptop .modal-text {
+    font-size: 1.125rem;
+  }
 }
diff --git a/src/components/About.astro b/src/components/About.astro
index de6d2bc..11ea700 100644
--- a/src/components/About.astro
+++ b/src/components/About.astro
@@ -14,37 +14,37 @@ const about = {
 
 <section
   id="about"
-  class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-20 px-8 lg:px-24 relative overflow-hidden"
+  class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-12 xs:py-16 sm:py-20 md:py-24 lg:py-28 px-4 xs:px-6 sm:px-8 md:px-12 lg:px-24 relative overflow-hidden"
 >
   <!-- Декоративные элементы -->
   <div class="absolute inset-0 opacity-5">
-    <div class="absolute top-32 left-32 w-40 h-40 bg-yellow-500 rounded-full blur-3xl"></div>
-    <div class="absolute bottom-32 right-32 w-48 h-48 bg-yellow-400 rounded-full blur-3xl"></div>
+    <div class="absolute top-16 xs:top-20 sm:top-24 md:top-32 left-16 xs:left-20 sm:left-24 md:left-32 w-24 xs:w-28 sm:w-32 md:w-40 h-24 xs:h-28 sm:h-32 md:h-40 bg-yellow-500 rounded-full blur-3xl"></div>
+    <div class="absolute bottom-16 xs:bottom-20 sm:bottom-24 md:bottom-32 right-16 xs:right-20 sm:right-24 md:right-32 w-28 xs:w-32 sm:w-36 md:w-48 h-28 xs:h-32 sm:h-36 md:h-48 bg-yellow-400 rounded-full blur-3xl"></div>
   </div>
 
   <div class="relative z-10 flex flex-col lg:flex-row items-center justify-between max-w-7xl mx-auto">
     <!-- Левая часть: заголовок и описание -->
-    <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-16">
+    <div class="lg:w-1/2 mb-8 xs:mb-10 sm:mb-12 lg:mb-0 lg:pr-8 xl:pr-16">
       <h2
-        class="text-6xl lg:text-8xl font-bold text-yellow-500 mb-8 font-nevduplenysh leading-tight"
+        class="text-4xl xs:text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-yellow-500 mb-4 xs:mb-6 sm:mb-8 font-nevduplenysh leading-tight"
       >
         {about.title}
       </h2>
-      <div class="text-lg lg:text-xl text-gray-300 leading-relaxed font-gilroy">
-        <p class="text-2xl text-white font-semibold mb-4">{about.paragraph1}</p>
+      <div class="text-base xs:text-lg sm:text-xl md:text-2xl text-gray-300 leading-relaxed font-gilroy">
+        <p class="text-xl xs:text-2xl sm:text-3xl md:text-4xl text-white font-semibold mb-3 xs:mb-4 leading-tight">{about.paragraph1}</p>
       </div>
       
       <!-- Блок быстрых ссылок -->
-      <div class="mt-12 flex flex-wrap gap-4">
-        <a href="/cities" class="group inline-flex items-center px-6 py-3 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25">
-          <svg class="w-5 h-5 mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div class="mt-8 xs:mt-10 sm:mt-12 flex flex-col xs:flex-row gap-3 xs:gap-4">
+        <a href="/cities" class="group inline-flex items-center justify-center px-4 xs:px-5 sm:px-6 py-2.5 xs:py-3 sm:py-3.5 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-lg xs:rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25 text-sm xs:text-base">
+          <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
           </svg>
           Наши города
         </a>
-        <a href="/requisites" class="group inline-flex items-center px-6 py-3 bg-gradient-to-r from-gray-700 to-gray-800 text-white rounded-xl hover:from-gray-600 hover:to-gray-700 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold border border-gray-600 hover:border-gray-500">
-          <svg class="w-5 h-5 mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <a href="/requisites" class="group inline-flex items-center justify-center px-4 xs:px-5 sm:px-6 py-2.5 xs:py-3 sm:py-3.5 bg-gradient-to-r from-gray-700 to-gray-800 text-white rounded-lg xs:rounded-xl hover:from-gray-600 hover:to-gray-700 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold border border-gray-600 hover:border-gray-500 text-sm xs:text-base">
+          <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
           </svg>
           Реквизиты
@@ -53,10 +53,10 @@ const about = {
     </div>
 
     <!-- Правая часть: коллаж из изображений -->
-    <div class="lg:w-1/2 grid grid-cols-2 gap-6">
+    <div class="lg:w-1/2 grid grid-cols-2 gap-3 xs:gap-4 sm:gap-6">
       {
         about.imageUrls.map((imageUrl, index) => (
-          <div class="group relative overflow-hidden rounded-2xl shadow-2xl hover:shadow-yellow-500/20 transition-all duration-500 transform hover:scale-105">
+          <div class="group relative overflow-hidden rounded-xl xs:rounded-2xl shadow-2xl hover:shadow-yellow-500/20 transition-all duration-500 transform hover:scale-105">
             <img
               src={imageUrl}
               alt={`О нас изображение ${index + 1}`}
diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
index b6d8ce7..055dba2 100644
--- a/src/components/Breadcrumbs.astro
+++ b/src/components/Breadcrumbs.astro
@@ -10,7 +10,7 @@ const { items } = Astro.props;
 const SITE_URL = "https://ooodmdk.ru";
 ---
 
-<nav aria-label="Хлебные крошки" class="py-4 px-8 lg:px-24">
+<nav aria-label="Хлебные крошки" class="py-4 px-8 lg:px-24 header-offset">
   <ol
     class="flex flex-wrap items-center space-x-2 text-sm text-gray-600"
     itemscope
diff --git a/src/components/FloatingFAQ.astro b/src/components/FloatingFAQ.astro
index 78438ef..e929368 100644
--- a/src/components/FloatingFAQ.astro
+++ b/src/components/FloatingFAQ.astro
@@ -1,12 +1,12 @@
 <!-- Плавающая кнопка FAQ -->
-<div class="fixed bottom-8 left-8 z-50">
+<div class="fixed bottom-4 xs:bottom-6 sm:bottom-8 left-4 xs:left-6 sm:left-8 z-50">
   <button
     id="floating-faq-btn"
-    class="group w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-2xl shadow-2xl shadow-blue-500/25 hover:shadow-blue-400/40 hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-110 flex items-center justify-center"
+    class="group w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl xs:rounded-2xl shadow-2xl shadow-blue-500/25 hover:shadow-blue-400/40 hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-110 flex items-center justify-center"
     aria-label="Часто задаваемые вопросы"
   >
     <svg
-      class="w-8 h-8 group-hover:scale-110 transition-transform duration-300"
+      class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 group-hover:scale-110 transition-transform duration-300"
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"
@@ -24,7 +24,7 @@
   <!-- Тултип -->
   <div
     id="faq-tooltip"
-    class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-4 px-4 py-2 bg-gray-900 text-white text-sm rounded-xl shadow-lg opacity-0 invisible transition-all duration-300 whitespace-nowrap font-gilroy border border-gray-700"
+    class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 xs:mb-4 px-2 xs:px-4 py-1 xs:py-2 bg-gray-900 text-white text-xs xs:text-sm rounded-lg xs:rounded-xl shadow-lg opacity-0 invisible transition-all duration-300 whitespace-nowrap font-gilroy border border-gray-700"
   >
     Часто задаваемые вопросы
     <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
@@ -34,17 +34,17 @@
 <!-- Модальное окно FAQ -->
 <div
   id="faq-modal"
-  class="fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300"
+  class="fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300 p-4"
 >
   <div
-    class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl p-8 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto relative border border-gray-700 shadow-2xl"
+    class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl xs:rounded-3xl p-6 xs:p-8 max-w-2xl w-full max-h-[90vh] xs:max-h-[80vh] overflow-y-auto relative border border-gray-700 shadow-2xl"
   >
     <button
       id="close-faq-modal"
-      class="absolute top-6 right-6 w-10 h-10 bg-gray-700 hover:bg-gray-600 text-white rounded-xl transition-colors duration-300 flex items-center justify-center"
+      class="absolute top-4 xs:top-6 right-4 xs:right-6 w-8 h-8 xs:w-10 xs:h-10 bg-gray-700 hover:bg-gray-600 text-white rounded-lg xs:rounded-xl transition-colors duration-300 flex items-center justify-center"
     >
       <svg
-        class="w-5 h-5"
+        class="w-4 h-4 xs:w-5 xs:h-5"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"
@@ -59,48 +59,48 @@
       </svg>
     </button>
 
-    <h2 class="text-3xl font-bold mb-8 text-white font-nevduplenysh">
+    <h2 class="text-2xl xs:text-3xl font-bold mb-6 xs:mb-8 text-white font-nevduplenysh">
       Быстрые ответы
     </h2>
 
-    <div class="space-y-6">
+    <div class="space-y-4 xs:space-y-6">
       <!-- Вопрос 1 -->
-      <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700">
-        <h3 class="text-xl font-semibold text-yellow-400 mb-3 font-gilroy">
+      <div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
+        <h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
           Какие драгоценные металлы вы предлагаете?
         </h3>
-        <p class="text-gray-300 font-gilroy leading-relaxed">
+        <p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
           Мы работаем с полным спектром драгоценных металлов: золото, серебро, платина, палладий, родий. Предлагаем различные формы: слитки, гранулы, проволока, фольга.
         </p>
       </div>
 
       <!-- Вопрос 2 -->
-      <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700">
-        <h3 class="text-xl font-semibold text-yellow-400 mb-3 font-gilroy">
+      <div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
+        <h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
           Какова чистота ваших металлов?
         </h3>
-        <p class="text-gray-300 font-gilroy leading-relaxed">
+        <p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
           Мы гарантируем высочайшую чистоту: золото 999,9 пробы, серебро 999,9 пробы, платина 999,5 пробы. Каждая партия сопровождается сертификатом качества.
         </p>
       </div>
 
       <!-- Вопрос 3 -->
-      <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700">
-        <h3 class="text-xl font-semibold text-yellow-400 mb-3 font-gilroy">
+      <div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
+        <h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
           Как быстро происходит доставка?
         </h3>
-        <p class="text-gray-300 font-gilroy leading-relaxed">
+        <p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
           Доставка по Москве — в день заказа, по России — 1-7 дней в зависимости от региона. Все грузы застрахованы и отслеживаются.
         </p>
       </div>
     </div>
 
-    <div class="mt-8 text-center">
+    <div class="mt-6 xs:mt-8 text-center">
       <a
         href="/faq"
-        class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-2xl hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-blue-500/25"
+        class="inline-flex items-center px-6 xs:px-8 py-3 xs:py-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl xs:rounded-2xl hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-blue-500/25 text-sm xs:text-base"
       >
-        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
         </svg>
         Все вопросы и ответы
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 289950f..f0282b8 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,6 +1,6 @@
 <footer
   id="contacts"
-  class="bg-gradient-to-br from-gray-900 via-black to-gray-900 text-white py-16 px-8 lg:px-24 relative overflow-hidden"
+  class="bg-gradient-to-br from-gray-900 via-black to-gray-900 text-white py-12 xs:py-16 px-4 xs:px-6 sm:px-8 lg:px-24 relative overflow-hidden"
 >
   <!-- Декоративные элементы -->
   <div class="absolute inset-0 opacity-10">
@@ -12,18 +12,18 @@
   <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-yellow-500 to-transparent"></div>
 
   <div class="relative z-10 max-w-7xl mx-auto">
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 xs:gap-10 sm:gap-12">
       <!-- Левая колонка -->
       <div>
-        <div class="flex items-center mb-8">
-          <img src="/logo.svg" alt="Логотип" class="h-16 mr-6" />
-          <h3 class="text-4xl font-bold font-gilroy">ООО «ДМДК»</h3>
+        <div class="flex items-center mb-6 xs:mb-8">
+          <img src="/logo.svg" alt="Логотип" class="h-12 xs:h-14 sm:h-16 mr-4 xs:mr-6" />
+          <h3 class="text-2xl xs:text-3xl sm:text-4xl font-bold font-gilroy">ООО «ДМДК»</h3>
         </div>
-        <p class="text-2xl mb-8 font-gilroy text-gray-300">
+        <p class="text-lg xs:text-xl sm:text-2xl mb-6 xs:mb-8 font-gilroy text-gray-300">
           Режим работы:<br />
           <span class="text-yellow-400 font-semibold">09:00 - 21:00</span>
         </p>
-        <nav class="space-y-4 text-lg">
+        <nav class="space-y-3 xs:space-y-4 text-base xs:text-lg">
           <a href="/#about" class="block hover:text-yellow-400 font-gilroy transition-colors duration-300 hover:translate-x-2 transform">о нас</a>
           <a href="/#products" class="block hover:text-yellow-400 font-gilroy transition-colors duration-300 hover:translate-x-2 transform">продукция</a>
           <a href="/cities" class="block hover:text-yellow-400 font-gilroy transition-colors duration-300 hover:translate-x-2 transform">наши города</a>
@@ -35,16 +35,16 @@
       </div>
 
       <!-- Правая колонка -->
-      <div class="flex flex-col space-y-8">
+      <div class="flex flex-col space-y-6 xs:space-y-8">
         <div class="group">
-          <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-8 rounded-2xl border border-gray-700 hover:border-yellow-500/50 transition-all duration-300 hover:transform hover:scale-105">
-            <div class="flex items-center mb-4">
-              <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center mr-4">
-                <img src="/icons/phone.svg" alt="Позвонить" class="h-6 w-6" />
+          <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-6 xs:p-8 rounded-xl xs:rounded-2xl border border-gray-700 hover:border-yellow-500/50 transition-all duration-300 hover:transform hover:scale-105">
+            <div class="flex items-center mb-3 xs:mb-4">
+              <div class="w-10 h-10 xs:w-12 xs:h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-lg xs:rounded-xl flex items-center justify-center mr-3 xs:mr-4">
+                <img src="/icons/phone.svg" alt="Позвонить" class="h-5 w-5 xs:h-6 xs:w-6" />
               </div>
-              <h4 class="text-2xl text-yellow-400 font-semibold font-gilroy">ПОЗВОНИТЬ</h4>
+              <h4 class="text-xl xs:text-2xl text-yellow-400 font-semibold font-gilroy">ПОЗВОНИТЬ</h4>
             </div>
-            <div class="text-xl text-white font-gilroy">
+            <div class="text-lg xs:text-xl text-white font-gilroy">
               <a href="tel:+79251045050" class="block hover:text-yellow-400 transition-colors">+7 (925) 104-50-50</a>
               <a href="tel:+79266646246" class="block hover:text-yellow-400 transition-colors">+7 (926) 664-62-46</a>
             </div>
@@ -52,43 +52,43 @@
         </div>
 
         <div class="group">
-          <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-8 rounded-2xl border border-gray-700 hover:border-blue-500/50 transition-all duration-300 hover:transform hover:scale-105">
-            <div class="flex items-center mb-4">
-              <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mr-4">
-                <img src="/icons/email.svg" alt="Написать" class="h-6 w-6" />
+          <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-6 xs:p-8 rounded-xl xs:rounded-2xl border border-gray-700 hover:border-blue-500/50 transition-all duration-300 hover:transform hover:scale-105">
+            <div class="flex items-center mb-3 xs:mb-4">
+              <div class="w-10 h-10 xs:w-12 xs:h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg xs:rounded-xl flex items-center justify-center mr-3 xs:mr-4">
+                <img src="/icons/email.svg" alt="Написать" class="h-5 w-5 xs:h-6 xs:w-6" />
               </div>
-              <h4 class="text-2xl text-blue-400 font-semibold font-gilroy">НАПИСАТЬ</h4>
+              <h4 class="text-xl xs:text-2xl text-blue-400 font-semibold font-gilroy">НАПИСАТЬ</h4>
             </div>
-            <a href="mailto:ooo.dmdk@mail.ru" class="text-xl text-white font-gilroy hover:text-blue-400 transition-colors">
+            <a href="mailto:ooo.dmdk@mail.ru" class="text-lg xs:text-xl text-white font-gilroy hover:text-blue-400 transition-colors">
               ooo.dmdk@mail.ru
             </a>
           </div>
         </div>
 
-        <div class="flex space-x-6 mt-8">
+        <div class="flex justify-center lg:justify-start space-x-4 xs:space-x-6 mt-6 xs:mt-8">
           <a
             href="https://wa.me/79251045050"
-            class="group bg-gradient-to-br from-green-500 to-green-600 p-6 rounded-2xl text-white flex items-center justify-center w-20 h-20 hover:from-green-400 hover:to-green-500 transition-all duration-300 transform hover:scale-110 shadow-lg shadow-green-500/25"
+            class="group bg-gradient-to-br from-green-500 to-green-600 p-4 xs:p-6 rounded-xl xs:rounded-2xl text-white flex items-center justify-center w-16 h-16 xs:w-20 xs:h-20 hover:from-green-400 hover:to-green-500 transition-all duration-300 transform hover:scale-110 shadow-lg shadow-green-500/25"
           >
-            <img src="/icons/ws.svg" alt="WhatsApp" class="h-10 w-10" />
+            <img src="/icons/ws.svg" alt="WhatsApp" class="h-8 w-8 xs:h-10 xs:w-10" />
           </a>
           <a
             href="https://t.me/OOO_DMDK"
-            class="group bg-gradient-to-br from-blue-500 to-blue-600 p-6 rounded-2xl text-white flex items-center justify-center w-20 h-20 hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-110 shadow-lg shadow-blue-500/25"
+            class="group bg-gradient-to-br from-blue-500 to-blue-600 p-4 xs:p-6 rounded-xl xs:rounded-2xl text-white flex items-center justify-center w-16 h-16 xs:w-20 xs:h-20 hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-110 shadow-lg shadow-blue-500/25"
           >
-            <img src="/icons/tg.svg" alt="Telegram" class="h-10 w-10" />
+            <img src="/icons/tg.svg" alt="Telegram" class="h-8 w-8 xs:h-10 xs:w-10" />
           </a>
         </div>
       </div>
     </div>
 
     <!-- Нижняя часть -->
-    <div class="mt-16 pt-8 border-t border-gray-700">
-      <div class="flex flex-col md:flex-row justify-between items-center">
-        <div class="text-gray-400 font-gilroy mb-4 md:mb-0">
+    <div class="mt-12 xs:mt-16 pt-6 xs:pt-8 border-t border-gray-700">
+      <div class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
+        <div class="text-gray-400 font-gilroy text-sm xs:text-base text-center sm:text-left">
           © 2024 ООО «ДМДК». Все права защищены.
         </div>
-        <div class="flex space-x-6 text-sm text-gray-400 font-gilroy">
+        <div class="flex flex-col xs:flex-row space-y-2 xs:space-y-0 xs:space-x-4 sm:space-x-6 text-xs xs:text-sm text-gray-400 font-gilroy text-center">
           <a href="/requisites" class="hover:text-yellow-400 transition-colors">Политика конфиденциальности</a>
           <a href="/requisites" class="hover:text-yellow-400 transition-colors">Пользовательское соглашение</a>
         </div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index aa508ba..56e550e 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -62,11 +62,11 @@
 </div>
 
 <header
-  class="fixed text-white top-2 sm:top-4 left-1/2 transform -translate-x-1/2 w-11/12 max-w-screen-xl z-50 flex justify-between items-center px-3 py-2 sm:px-4 sm:py-3 lg:px-6 lg:py-4 bg-black bg-opacity-70 backdrop-blur-sm rounded-xl sm:rounded-2xl border border-white border-opacity-20"
+  class="fixed text-white top-1 xs:top-2 sm:top-3 md:top-4 left-1/2 transform -translate-x-1/2 w-[95%] xs:w-11/12 max-w-screen-xl z-50 flex justify-between items-center px-2 py-1.5 xs:px-3 xs:py-2 sm:px-4 sm:py-3 md:px-6 md:py-4 bg-black bg-opacity-70 backdrop-blur-sm rounded-lg xs:rounded-xl sm:rounded-2xl border border-white border-opacity-20"
 >
-  <a href="/" class="flex items-center min-w-0">
-    <img src="/logo.svg" alt="Логотип" class="h-6 sm:h-8 lg:h-12 flex-shrink-0" />
-    <span class="ml-1 sm:ml-2 font-bold text-base sm:text-lg lg:text-2xl font-gilroy truncate">
+  <a href="/" class="flex items-center min-w-0 flex-shrink-0">
+    <img src="/logo.svg" alt="Логотип" class="h-5 xs:h-6 sm:h-8 md:h-10 lg:h-12 flex-shrink-0" />
+    <span class="ml-1 xs:ml-1.5 sm:ml-2 font-bold text-sm xs:text-base sm:text-lg md:text-xl lg:text-2xl font-gilroy truncate">
       ООО «ДМДК»
     </span>
   </a>
@@ -122,16 +122,22 @@
 
     <!-- Кнопка "Оставить заявку" -->
     <button
-      class="open-modal ml-6 px-6 py-3 text-lg font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy"
+      class="open-modal ml-6 px-4 py-2 xl:px-6 xl:py-3 text-base xl:text-lg font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy"
     >
       Оставить заявку
     </button>
   </nav>
 
-  <div class="lg:hidden">
+  <!-- Кнопка мобильного меню -->
+  <div class="lg:hidden flex items-center space-x-2">
+    <!-- Компактная кнопка заявки для планшетов -->
+    <button class="open-modal hidden md:block lg:hidden px-3 py-2 text-sm font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy">
+      Заявка
+    </button>
+    
     <button id="menu-toggle" class="focus:outline-none p-1 hover:text-yellow-400 transition-colors">
       <svg
-        class="w-6 h-6 sm:w-8 sm:h-8"
+        class="w-5 h-5 xs:w-6 xs:h-6 sm:w-7 sm:h-7 md:w-8 md:h-8"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"
@@ -149,23 +155,46 @@
 
 <div
   id="mobile-menu"
-  class="fixed inset-x-0 top-0 h-screen bg-black bg-opacity-95 backdrop-blur-sm text-white flex flex-col justify-center items-center space-y-6 transform translate-y-full transition-transform duration-300 ease-in-out z-50"
+  class="fixed inset-0 bg-black bg-opacity-95 backdrop-blur-sm text-white flex flex-col justify-center items-center space-y-4 xs:space-y-6 md:space-y-8 transform translate-y-full transition-transform duration-300 ease-in-out z-50"
 >
-  <button id="close-menu" class="absolute top-6 right-6 text-white hover:text-yellow-400 transition-colors">
-    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+  <button id="close-menu" class="absolute top-4 xs:top-6 right-4 xs:right-6 text-white hover:text-yellow-400 transition-colors">
+    <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
     </svg>
   </button>
   
-  <a href="/#about" class="text-xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">О НАС</a>
-  <a href="/#products" class="text-xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">ПРОДУКЦИЯ</a>
-  <a href="/blog" class="text-xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">БЛОГ</a>
-  <a href="/faq" class="text-xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">FAQ</a>
-  <a href="/#contacts" class="text-xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">КОНТАКТЫ</a>
+  <!-- Логотип в мобильном меню -->
+  <div class="flex items-center mb-4 xs:mb-6">
+    <img src="/logo.svg" alt="Логотип" class="h-8 xs:h-10 sm:h-12" />
+    <span class="ml-2 xs:ml-3 font-bold text-lg xs:text-xl sm:text-2xl font-gilroy">ООО «ДМДК»</span>
+  </div>
+  
+  <a href="/#about" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">О НАС</a>
+  <a href="/#products" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">ПРОДУКЦИЯ</a>
+  <a href="/blog" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">БЛОГ</a>
+  <a href="/faq" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">FAQ</a>
+  <a href="/#contacts" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">КОНТАКТЫ</a>
+  
+  <!-- Контактная информация в мобильном меню -->
+  <div class="mt-6 xs:mt-8 text-center space-y-2 xs:space-y-3">
+    <div class="text-sm xs:text-base text-gray-300 font-gilroy">
+      <p>+7 (925) 104-50-50</p>
+      <p>+7 (926) 664-62-46</p>
+      <p>ooo.dmdk@mail.ru</p>
+    </div>
+    <div class="flex justify-center space-x-4 mt-4">
+      <a href="https://t.me/OOO_DMDK" class="social-icon">
+        <img src="/icons/tg.svg" alt="Telegram" class="w-8 h-8" />
+      </a>
+      <a href="https://wa.me/79251045050" class="social-icon">
+        <img src="/icons/ws.svg" alt="WhatsApp" class="w-8 h-8" />
+      </a>
+    </div>
+  </div>
   
   <!-- Кнопка "Оставить заявку" в мобильном меню -->
   <button
-    class="open-modal mt-8 px-8 py-4 text-lg font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy"
+    class="open-modal mt-6 xs:mt-8 px-6 xs:px-8 py-3 xs:py-4 text-base xs:text-lg font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg xs:rounded-xl shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy"
   >
     Оставить заявку
   </button>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 6020773..38b925c 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,5 +1,5 @@
 <section
-  class="relative flex items-center justify-start h-screen bg-cover bg-center overflow-hidden"
+  class="relative flex items-center justify-start min-h-screen bg-cover bg-center overflow-hidden header-offset"
   style="background-image: url('/images/hero.webp');"
 >
   <!-- Градиентный оверлей -->
@@ -7,30 +7,30 @@
   
   <!-- Декоративные элементы -->
   <div class="absolute inset-0 opacity-20">
-    <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div>
-    <div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
+    <div class="absolute top-1/4 left-1/4 w-32 h-32 xs:w-48 xs:h-48 sm:w-64 sm:h-64 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div>
+    <div class="absolute bottom-1/4 right-1/4 w-40 h-40 xs:w-60 xs:h-60 sm:w-80 sm:h-80 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
   </div>
 
   <!-- Контент -->
-  <div class="relative text-left z-10 p-8 lg:p-16 w-full">
+  <div class="relative text-left z-10 p-3 xs:p-4 sm:p-6 md:p-8 lg:p-16 w-full">
     <div class="max-w-4xl">
       <h1
-        class="text-5xl sm:text-7xl lg:text-8xl xl:text-9xl font-bold text-white font-nevduplenysh tracking-wider leading-tight mb-8 animate-fade-in"
+        class="text-2xl xs:text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl 2xl:text-8xl font-bold text-white font-nevduplenysh tracking-wider leading-tight mb-4 xs:mb-6 sm:mb-8 animate-fade-in"
       >
         <span class="block">Драгоценные металлы</span>
         <span class="block text-gradient">высшей пробы</span>
       </h1>
       
-      <p class="mt-8 lg:mt-12 text-white text-xl lg:text-3xl max-w-3xl font-gilroy leading-relaxed animate-slide-in">
+      <p class="mt-4 xs:mt-6 sm:mt-8 lg:mt-12 text-white text-base xs:text-lg sm:text-xl md:text-2xl lg:text-3xl max-w-3xl font-gilroy leading-relaxed animate-slide-in">
         ООО «ДМДК» — ведущий поставщик аффинированных драгоценных металлов. 
         <span class="text-yellow-400 font-semibold">Блеск и надежность в каждом грамме.</span>
       </p>
       
-      <div class="mt-12 lg:mt-16 flex flex-col sm:flex-row gap-6 animate-fade-in" style="animation-delay: 0.3s;">
+      <div class="mt-6 xs:mt-8 sm:mt-12 lg:mt-16 flex flex-col xs:flex-row gap-3 xs:gap-4 sm:gap-6 animate-fade-in" style="animation-delay: 0.3s;">
         <button
-          class="open-modal group inline-flex items-center px-10 py-5 lg:px-14 lg:py-7 text-xl lg:text-2xl font-bold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-black rounded-2xl shadow-2xl shadow-yellow-500/50 hover:shadow-yellow-400/70 hover:from-yellow-400 hover:to-yellow-600 transition-all duration-300 transform hover:scale-105 font-gilroy"
+          class="open-modal group inline-flex items-center justify-center px-4 py-3 xs:px-6 xs:py-4 sm:px-8 sm:py-5 lg:px-14 lg:py-7 text-base xs:text-lg sm:text-xl lg:text-2xl font-bold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-black rounded-lg xs:rounded-xl sm:rounded-2xl shadow-2xl shadow-yellow-500/50 hover:shadow-yellow-400/70 hover:from-yellow-400 hover:to-yellow-600 transition-all duration-300 transform hover:scale-105 font-gilroy"
         >
-          <svg class="w-6 h-6 mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 mr-2 xs:mr-2 sm:mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
           </svg>
           Оставить заявку
@@ -38,9 +38,9 @@
         
         <a 
           href="/#products"
-          class="group inline-flex items-center px-10 py-5 lg:px-14 lg:py-7 text-xl lg:text-2xl font-bold bg-white/10 backdrop-blur-sm text-white rounded-2xl border-2 border-white/20 hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105 font-gilroy"
+          class="group inline-flex items-center justify-center px-4 py-3 xs:px-6 xs:py-4 sm:px-8 sm:py-5 lg:px-14 lg:py-7 text-base xs:text-lg sm:text-xl lg:text-2xl font-bold bg-white/10 backdrop-blur-sm text-white rounded-lg xs:rounded-xl sm:rounded-2xl border-2 border-white/20 hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105 font-gilroy"
         >
-          <svg class="w-6 h-6 mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 mr-2 xs:mr-2 sm:mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0l-4-4m4 4l-4 4"></path>
           </svg>
           Наша продукция
@@ -48,46 +48,26 @@
       </div>
 
       <!-- Статистика -->
-      <div class="mt-16 lg:mt-20 grid grid-cols-2 lg:grid-cols-4 gap-6 animate-fade-in max-w-4xl" style="animation-delay: 0.6s;">
-        <div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
-          <div class="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">15+</div>
-          <div class="text-white font-gilroy font-medium">лет опыта</div>
+      <div class="mt-8 xs:mt-10 sm:mt-12 lg:mt-20 grid grid-cols-2 md:grid-cols-4 gap-2 xs:gap-3 sm:gap-4 lg:gap-6 animate-fade-in max-w-4xl" style="animation-delay: 0.6s;">
+        <div class="bg-black/40 backdrop-blur-sm rounded-lg xs:rounded-xl lg:rounded-2xl p-3 xs:p-4 sm:p-5 lg:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
+          <div class="text-xl xs:text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-1 lg:mb-2">15+</div>
+          <div class="text-white font-gilroy font-medium text-xs xs:text-sm sm:text-base">лет опыта</div>
         </div>
-        <div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
-          <div class="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">99.9%</div>
-          <div class="text-white font-gilroy font-medium">чистота металлов</div>
+        <div class="bg-black/40 backdrop-blur-sm rounded-lg xs:rounded-xl lg:rounded-2xl p-3 xs:p-4 sm:p-5 lg:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
+          <div class="text-xl xs:text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-1 lg:mb-2">99.9%</div>
+          <div class="text-white font-gilroy font-medium text-xs xs:text-sm sm:text-base">чистота металлов</div>
         </div>
-        <div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
-          <div class="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">50+</div>
-          <div class="text-white font-gilroy font-medium">городов</div>
+        <div class="bg-black/40 backdrop-blur-sm rounded-lg xs:rounded-xl lg:rounded-2xl p-3 xs:p-4 sm:p-5 lg:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
+          <div class="text-xl xs:text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-1 lg:mb-2">50+</div>
+          <div class="text-white font-gilroy font-medium text-xs xs:text-sm sm:text-base">городов</div>
         </div>
-        <div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
-          <div class="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">24/7</div>
-          <div class="text-white font-gilroy font-medium">поддержка</div>
+        <div class="bg-black/40 backdrop-blur-sm rounded-lg xs:rounded-xl lg:rounded-2xl p-3 xs:p-4 sm:p-5 lg:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
+          <div class="text-xl xs:text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-1 lg:mb-2">24/7</div>
+          <div class="text-white font-gilroy font-medium text-xs xs:text-sm sm:text-base">поддержка</div>
         </div>
       </div>
     </div>
   </div>
 
-  <!-- Двигающаяся стрелочка с подсказкой -->
-  <div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
-    <div class="flex flex-col items-center">
-      <div class="text-lg mb-3 font-gilroy text-white/80">Листай ниже</div>
-      <div class="w-8 h-8 border-2 border-yellow-400 rounded-full flex items-center justify-center">
-        <svg
-          class="w-4 h-4 text-yellow-400"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M19 9l-7 7-7-7"></path>
-        </svg>
-      </div>
-    </div>
-  </div>
+
 </section>
diff --git a/src/components/InfoSection.astro b/src/components/InfoSection.astro
index cfcb277..cc40302 100644
--- a/src/components/InfoSection.astro
+++ b/src/components/InfoSection.astro
@@ -2,39 +2,39 @@
 // Компонент информационного блока с ссылками на важные страницы
 ---
 
-<section class="py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-black relative overflow-hidden">
+<section class="py-12 xs:py-16 sm:py-20 md:py-24 lg:py-28 bg-gradient-to-br from-gray-900 via-gray-800 to-black relative overflow-hidden">
   <!-- Декоративные элементы -->
   <div class="absolute inset-0 opacity-5">
-    <div class="absolute top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div>
-    <div class="absolute bottom-20 right-20 w-40 h-40 bg-yellow-400 rounded-full blur-3xl"></div>
-    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-60 h-60 bg-yellow-300 rounded-full blur-3xl"></div>
+    <div class="absolute top-10 xs:top-12 sm:top-16 md:top-20 left-10 xs:left-12 sm:left-16 md:left-20 w-20 xs:w-24 sm:w-28 md:w-32 h-20 xs:h-24 sm:h-28 md:h-32 bg-yellow-500 rounded-full blur-3xl"></div>
+    <div class="absolute bottom-10 xs:bottom-12 sm:bottom-16 md:bottom-20 right-10 xs:right-12 sm:right-16 md:right-20 w-24 xs:w-28 sm:w-32 md:w-40 h-24 xs:h-28 sm:h-32 md:h-40 bg-yellow-400 rounded-full blur-3xl"></div>
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-40 xs:w-48 sm:w-56 md:w-60 h-40 xs:h-48 sm:h-56 md:h-60 bg-yellow-300 rounded-full blur-3xl"></div>
   </div>
 
-  <div class="container mx-auto px-8 lg:px-24 relative z-10">
-    <div class="text-center mb-16">
-      <h2 class="text-5xl lg:text-6xl font-bold text-white mb-6 font-nevduplenysh">
+  <div class="container mx-auto px-4 xs:px-6 sm:px-8 md:px-12 lg:px-24 relative z-10">
+    <div class="text-center mb-8 xs:mb-10 sm:mb-12 md:mb-16">
+      <h2 class="text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-4 xs:mb-5 sm:mb-6 font-nevduplenysh">
         Экспертиза и сервис
       </h2>
-      <p class="text-xl lg:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed">
+      <p class="text-base xs:text-lg sm:text-xl md:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed">
         Профессиональная поддержка, экспертные знания и комплексные решения для вашего бизнеса
       </p>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 xs:gap-6 sm:gap-8">
       <!-- Блог -->
-      <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 border border-gray-700 hover:border-yellow-500/50 transition-all duration-500 hover:transform hover:scale-105">
-        <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+      <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700 hover:border-yellow-500/50 transition-all duration-500 hover:transform hover:scale-105">
+        <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-transparent rounded-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
         <div class="relative z-10">
-          <div class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center mb-6 group-hover:shadow-lg group-hover:shadow-yellow-500/25 transition-shadow duration-500">
-            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-lg xs:rounded-xl flex items-center justify-center mb-4 xs:mb-5 sm:mb-6 group-hover:shadow-lg group-hover:shadow-yellow-500/25 transition-shadow duration-500">
+            <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
             </svg>
           </div>
-          <h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Экспертный блог</h3>
-          <p class="text-gray-300 mb-6 font-gilroy leading-relaxed">Глубокие знания о драгоценных металлах, технологиях аффинажа и рыночных тенденциях</p>
-          <a href="/blog" class="inline-flex items-center text-yellow-400 hover:text-yellow-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300">
+          <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white mb-3 xs:mb-4 font-gilroy">Экспертный блог</h3>
+          <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-5 sm:mb-6 font-gilroy leading-relaxed">Глубокие знания о драгоценных металлах, технологиях аффинажа и рыночных тенденциях</p>
+          <a href="/blog" class="inline-flex items-center text-yellow-400 hover:text-yellow-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300 text-sm xs:text-base">
             Читать статьи
-            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-3 h-3 xs:w-4 xs:h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
             </svg>
           </a>
@@ -42,19 +42,19 @@
       </div>
 
       <!-- FAQ -->
-      <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 border border-gray-700 hover:border-blue-500/50 transition-all duration-500 hover:transform hover:scale-105">
-        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+      <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700 hover:border-blue-500/50 transition-all duration-500 hover:transform hover:scale-105">
+        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent rounded-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
         <div class="relative z-10">
-          <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:shadow-lg group-hover:shadow-blue-500/25 transition-shadow duration-500">
-            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg xs:rounded-xl flex items-center justify-center mb-4 xs:mb-5 sm:mb-6 group-hover:shadow-lg group-hover:shadow-blue-500/25 transition-shadow duration-500">
+            <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
             </svg>
           </div>
-          <h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Вопросы и ответы</h3>
-          <p class="text-gray-300 mb-6 font-gilroy leading-relaxed">Исчерпывающие ответы на вопросы о продукции, сотрудничестве и технических решениях</p>
-          <a href="/faq" class="inline-flex items-center text-blue-400 hover:text-blue-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300">
+          <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white mb-3 xs:mb-4 font-gilroy">Вопросы и ответы</h3>
+          <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-5 sm:mb-6 font-gilroy leading-relaxed">Исчерпывающие ответы на вопросы о продукции, сотрудничестве и технических решениях</p>
+          <a href="/faq" class="inline-flex items-center text-blue-400 hover:text-blue-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300 text-sm xs:text-base">
             Найти ответы
-            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-3 h-3 xs:w-4 xs:h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
             </svg>
           </a>
@@ -62,20 +62,20 @@
       </div>
 
       <!-- Наши города -->
-      <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 border border-gray-700 hover:border-green-500/50 transition-all duration-500 hover:transform hover:scale-105">
-        <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+      <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700 hover:border-green-500/50 transition-all duration-500 hover:transform hover:scale-105">
+        <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent rounded-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
         <div class="relative z-10">
-          <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center mb-6 group-hover:shadow-lg group-hover:shadow-green-500/25 transition-shadow duration-500">
-            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-lg xs:rounded-xl flex items-center justify-center mb-4 xs:mb-5 sm:mb-6 group-hover:shadow-lg group-hover:shadow-green-500/25 transition-shadow duration-500">
+            <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
             </svg>
           </div>
-          <h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Региональная сеть</h3>
-          <p class="text-gray-300 mb-6 font-gilroy leading-relaxed">Широкая география присутствия, надежная логистика и локальная поддержка клиентов</p>
-          <a href="/cities" class="inline-flex items-center text-green-400 hover:text-green-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300">
+          <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white mb-3 xs:mb-4 font-gilroy">Региональная сеть</h3>
+          <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-5 sm:mb-6 font-gilroy leading-relaxed">Широкая география присутствия, надежная логистика и локальная поддержка клиентов</p>
+          <a href="/cities" class="inline-flex items-center text-green-400 hover:text-green-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300 text-sm xs:text-base">
             География работы
-            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-3 h-3 xs:w-4 xs:h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
             </svg>
           </a>
@@ -83,19 +83,19 @@
       </div>
 
       <!-- Реквизиты -->
-      <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 border border-gray-700 hover:border-purple-500/50 transition-all duration-500 hover:transform hover:scale-105">
-        <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+      <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700 hover:border-purple-500/50 transition-all duration-500 hover:transform hover:scale-105">
+        <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent rounded-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
         <div class="relative z-10">
-          <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mb-6 group-hover:shadow-lg group-hover:shadow-purple-500/25 transition-shadow duration-500">
-            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg xs:rounded-xl flex items-center justify-center mb-4 xs:mb-5 sm:mb-6 group-hover:shadow-lg group-hover:shadow-purple-500/25 transition-shadow duration-500">
+            <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
             </svg>
           </div>
-          <h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Документооборот</h3>
-          <p class="text-gray-300 mb-6 font-gilroy leading-relaxed">Полная юридическая информация, реквизиты и документы для ведения бизнеса</p>
-          <a href="/requisites" class="inline-flex items-center text-purple-400 hover:text-purple-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300">
+          <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white mb-3 xs:mb-4 font-gilroy">Документооборот</h3>
+          <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-5 sm:mb-6 font-gilroy leading-relaxed">Полная юридическая информация, реквизиты и документы для ведения бизнеса</p>
+          <a href="/requisites" class="inline-flex items-center text-purple-400 hover:text-purple-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300 text-sm xs:text-base">
             Документы
-            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-3 h-3 xs:w-4 xs:h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
             </svg>
           </a>
@@ -104,12 +104,12 @@
     </div>
 
     <!-- Дополнительная информация -->
-    <div class="mt-16 text-center">
-      <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 rounded-full border border-yellow-500/30">
-        <svg class="w-5 h-5 text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <div class="mt-8 xs:mt-10 sm:mt-12 md:mt-16 text-center">
+      <div class="inline-flex items-center px-4 xs:px-5 sm:px-6 py-2 xs:py-2.5 sm:py-3 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 rounded-full border border-yellow-500/30">
+        <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
         </svg>
-        <span class="text-yellow-300 font-gilroy">Профессиональная поддержка 24/7</span>
+        <span class="text-yellow-300 font-gilroy text-sm xs:text-base">Профессиональная поддержка 24/7</span>
       </div>
     </div>
   </div>
diff --git a/src/components/Products.astro b/src/components/Products.astro
index b9ba63b..2b951f5 100644
--- a/src/components/Products.astro
+++ b/src/components/Products.astro
@@ -20,7 +20,7 @@ const categories =
 }`);
 ---
 
-<section id="products" class="bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white py-20 px-8 lg:px-24 relative overflow-hidden">
+<section id="products" class="bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white py-12 xs:py-16 sm:py-20 px-4 xs:px-6 sm:px-8 lg:px-24 relative overflow-hidden">
   <!-- Декоративные элементы -->
   <div class="absolute inset-0 opacity-5">
     <div class="absolute top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div>
@@ -30,56 +30,56 @@ const categories =
 
   <div class="relative z-10 max-w-7xl mx-auto">
     <h2
-      class="text-center text-6xl lg:text-8xl font-bold text-yellow-500 mb-16 font-nevduplenysh"
+      class="text-center text-4xl xs:text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold text-yellow-500 mb-8 xs:mb-12 sm:mb-16 font-nevduplenysh"
     >
       ПРОДУКЦИЯ
     </h2>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 xs:gap-6 sm:gap-8">
       {
         categories.map((category, index) => (
           <div
-            class={`group relative rounded-3xl shadow-2xl overflow-hidden transition-all duration-500 hover:transform hover:scale-105 ${
-              index === categories.length - 1 ? "lg:col-span-3" : ""
+            class={`group relative rounded-2xl xs:rounded-3xl shadow-2xl overflow-hidden transition-all duration-500 hover:transform hover:scale-105 ${
+              index === categories.length - 1 ? "xl:col-span-3" : ""
             }`}
             style={`background: linear-gradient(135deg, ${category.color}, ${category.color}dd); min-height: ${
-              300 + category.elements.length * 18
+              280 + category.elements.length * 15
             }px;`}
           >
             <!-- Градиентный оверлей -->
             <div class="absolute inset-0 bg-gradient-to-br from-black/20 to-black/60"></div>
             
             <!-- Декоративные элементы -->
-            <div class={`absolute top-4 right-4 z-20 ${category.elements.length > 2 ? 'grid grid-cols-2 gap-1 max-w-[80px]' : 'flex flex-col space-y-2 max-w-[70px]'}`}>
+            <div class={`absolute top-3 xs:top-4 right-3 xs:right-4 z-20 ${category.elements.length > 2 ? 'grid grid-cols-2 gap-1 max-w-[70px] xs:max-w-[80px]' : 'flex flex-col space-y-1.5 xs:space-y-2 max-w-[60px] xs:max-w-[70px]'}`}>
               {category.elements.map((element, idx) => (
                 <div
-                  class={`relative flex flex-col items-center justify-center rounded-lg text-white font-bold shadow-lg backdrop-blur-sm border border-white/20 shrink-0 ${category.elements.length > 2 ? 'w-9 h-9' : 'w-14 h-14'}`}
+                  class={`relative flex flex-col items-center justify-center rounded-lg text-white font-bold shadow-lg backdrop-blur-sm border border-white/20 shrink-0 ${category.elements.length > 2 ? 'w-8 h-8 xs:w-9 xs:h-9' : 'w-12 h-12 xs:w-14 xs:h-14'}`}
                   style={`background: linear-gradient(135deg, ${category.color}ee, ${category.color}aa);`}
                 >
                   <span class={category.elements.length > 2 ? 'text-xs' : 'text-sm'}>{element.element}</span>
-                  <span class={`font-normal opacity-90 ${category.elements.length > 2 ? 'text-[10px]' : 'text-xs'}`}>
+                  <span class={`font-normal opacity-90 ${category.elements.length > 2 ? 'text-[9px] xs:text-[10px]' : 'text-xs'}`}>
                     {element.elementNumber}
                   </span>
                 </div>
               ))}
             </div>
 
-            <div class="relative z-10 p-8 h-full flex flex-col justify-between">
-              <div class="pr-20">
-                <h3 class="text-3xl font-bold mb-6 text-white font-nevduplenysh break-words leading-tight">
+            <div class="relative z-10 p-4 xs:p-6 sm:p-8 h-full flex flex-col justify-between">
+              <div class="pr-16 xs:pr-20">
+                <h3 class="text-xl xs:text-2xl sm:text-3xl font-bold mb-4 xs:mb-6 text-white font-nevduplenysh break-words leading-tight">
                   {category.title.toUpperCase()}
                 </h3>
               </div>
 
               <div class="mt-auto">
                 <button
-                  class="w-full text-xl font-semibold py-4 px-6 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 text-white transition-all duration-300 flex items-center justify-center hover:bg-white hover:text-gray-900 group-hover:transform group-hover:scale-105 font-gilroy shadow-lg"
+                  class="w-full text-base xs:text-lg sm:text-xl font-semibold py-3 xs:py-4 px-4 xs:px-6 rounded-xl xs:rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 text-white transition-all duration-300 flex items-center justify-center hover:bg-white hover:text-gray-900 group-hover:transform group-hover:scale-105 font-gilroy shadow-lg"
                   onclick={`toggleDropdown('${category.slug.current}')`}
                 >
                   Показать товары
                   <svg
                     id={`arrow-${category.slug.current}`}
-                    class="ml-3 w-6 h-6 transform transition-transform duration-300"
+                    class="ml-2 xs:ml-3 w-5 h-5 xs:w-6 xs:h-6 transform transition-transform duration-300"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -94,23 +94,23 @@ const categories =
                   </svg>
                 </button>
 
-                <div id={`dropdown-${category.slug.current}`} class="mt-6 hidden">
-                  <div class="bg-black/30 backdrop-blur-sm rounded-2xl p-6 border border-white/10">
-                    <ul class="text-lg space-y-3 text-white font-gilroy">
+                <div id={`dropdown-${category.slug.current}`} class="mt-4 xs:mt-6 hidden">
+                  <div class="bg-black/30 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-white/10">
+                    <ul class="text-base xs:text-lg space-y-2 xs:space-y-3 text-white font-gilroy">
                       {category.products.map((product) => (
                         <li class="group/item">
                           <a
                             href={`/${product.slug.current}`}
-                            class="block hover:text-yellow-400 transition-colors duration-300 font-gilroy p-3 rounded-xl hover:bg-white/5"
+                            class="block hover:text-yellow-400 transition-colors duration-300 font-gilroy p-2 xs:p-3 rounded-lg xs:rounded-xl hover:bg-white/5"
                           >
                             <div class="flex items-center">
-                              <svg class="w-4 h-4 mr-3 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <svg class="w-3 h-3 xs:w-4 xs:h-4 mr-2 xs:mr-3 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                               </svg>
-                              {product.title}
+                              <span class="text-sm xs:text-base">{product.title}</span>
                             </div>
                             {product.description && (
-                              <p class="ml-7 text-sm text-gray-300 mt-2 line-clamp-2 font-gilroy">
+                              <p class="ml-5 xs:ml-7 text-xs xs:text-sm text-gray-300 mt-1 xs:mt-2 line-clamp-2 font-gilroy">
                                 {product.description}
                               </p>
                             )}
@@ -151,7 +151,7 @@ const categories =
     buttons.forEach((button) => {
       (button as HTMLElement).onclick = function (e) {
         e.preventDefault();
-        const categorySlug = this.getAttribute("onclick")?.match(/'([^']+)'/)?.[1];
+        const categorySlug = (this as HTMLElement).getAttribute("onclick")?.match(/'([^']+)'/)?.[1];
         if (categorySlug) {
           (window as any).toggleDropdown(categorySlug);
         }
diff --git a/src/components/Up.astro b/src/components/Up.astro
index 317199c..c463b57 100644
--- a/src/components/Up.astro
+++ b/src/components/Up.astro
@@ -1,10 +1,10 @@
 <button
   id="scroll-to-top"
-  class="fixed bottom-8 right-8 w-14 h-14 bg-gradient-to-br from-yellow-500 to-yellow-600 text-black rounded-2xl shadow-2xl shadow-yellow-500/25 hover:shadow-yellow-400/40 hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-110 z-50 opacity-0 invisible"
+  class="fixed bottom-4 xs:bottom-6 sm:bottom-8 right-4 xs:right-6 sm:right-8 w-12 h-12 xs:w-14 xs:h-14 bg-gradient-to-br from-yellow-500 to-yellow-600 text-black rounded-xl xs:rounded-2xl shadow-2xl shadow-yellow-500/25 hover:shadow-yellow-400/40 hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-110 z-50 opacity-0 invisible"
   aria-label="Прокрутить наверх"
 >
   <svg
-    class="w-6 h-6 mx-auto"
+    class="w-5 h-5 xs:w-6 xs:h-6 mx-auto"
     fill="none"
     stroke="currentColor"
     viewBox="0 0 24 24"
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e25f0b1..f90ad13 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -77,7 +77,7 @@ const allKeywords = `${commonKeywords}, ${silverKeywords}, ${goldKeywords}`;
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; img-src 'self' https: data: mc.yandex.ru; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com mc.yandex.ru; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self' https://api.telegram.org;"
+      content="default-src 'self'; img-src 'self' https: data: mc.yandex.ru; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com mc.yandex.ru; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self' https://api.telegram.org https://mc.yandex.ru https://www.google-analytics.com; frame-src 'self' https://mc.yandex.ru;"
     />
 
     <!-- Canonical URL -->
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 332a79c..0d58e00 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -6,7 +6,7 @@ import Layout from "../layouts/Layout.astro";
   title="Страница не найдена - ООО ДМДК"
   description="Запрашиваемая страница не найдена. Вернитесь на главную страницу или воспользуйтесь навигацией по сайту ООО ДМДК."
 >
-  <main class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8">
+  <main class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8 header-offset">
     <div class="max-w-md mx-auto text-center">
       <!-- Основной заголовок страницы -->
       <h1 class="text-6xl lg:text-8xl font-bold mb-8 text-yellow-500 font-nevduplenysh">404</h1>
diff --git a/src/pages/[slug].astro b/src/pages/[slug].astro
index 947102f..8a9d2ef 100644
--- a/src/pages/[slug].astro
+++ b/src/pages/[slug].astro
@@ -86,25 +86,25 @@ const analyticsScript = `
   <Breadcrumbs items={breadcrumbItems} />
 
   <article
-    class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-20 px-8 lg:px-24 relative overflow-hidden"
+    class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-12 xs:py-16 sm:py-20 md:py-24 lg:py-28 px-4 xs:px-6 sm:px-8 md:px-12 lg:px-24 relative overflow-hidden"
     data-product-id={product._id}
   >
     <!-- Декоративные элементы -->
     <div class="absolute inset-0 opacity-5">
-      <div class="absolute top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div>
-      <div class="absolute bottom-20 right-20 w-40 h-40 bg-yellow-400 rounded-full blur-3xl"></div>
+      <div class="absolute top-10 xs:top-12 sm:top-16 md:top-20 left-10 xs:left-12 sm:left-16 md:left-20 w-20 xs:w-24 sm:w-28 md:w-32 h-20 xs:h-24 sm:h-28 md:h-32 bg-yellow-500 rounded-full blur-3xl"></div>
+      <div class="absolute bottom-10 xs:bottom-12 sm:bottom-16 md:bottom-20 right-10 xs:right-12 sm:right-16 md:right-20 w-24 xs:w-28 sm:w-32 md:w-40 h-24 xs:h-28 sm:h-32 md:h-40 bg-yellow-400 rounded-full blur-3xl"></div>
     </div>
 
     <div class="relative z-10 max-w-7xl mx-auto">
       <h1
-        class="text-5xl lg:text-7xl font-bold mb-12 text-yellow-500 font-nevduplenysh text-center"
+        class="text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 xs:mb-8 sm:mb-10 md:mb-12 text-yellow-500 font-nevduplenysh text-center"
       >
         {product.title}
       </h1>
 
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 xs:gap-10 sm:gap-12 md:gap-16">
         <div class="relative group">
-          <div class="overflow-hidden rounded-3xl shadow-2xl">
+          <div class="overflow-hidden rounded-2xl xs:rounded-3xl shadow-2xl">
             <OptimizedImage
               src={product.imageUrl}
               alt={product.title}
@@ -115,19 +115,19 @@ const analyticsScript = `
           </div>
         </div>
 
-        <div class="space-y-8">
-          <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700">
-            <h2 class="text-2xl font-bold text-yellow-400 mb-6 font-gilroy">Описание продукта</h2>
-            <p class="text-lg leading-relaxed text-gray-300 font-gilroy">{product.description}</p>
+        <div class="space-y-4 xs:space-y-6 sm:space-y-8">
+          <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700">
+            <h2 class="text-lg xs:text-xl sm:text-2xl font-bold text-yellow-400 mb-3 xs:mb-4 sm:mb-6 font-gilroy">Описание продукта</h2>
+            <p class="text-base xs:text-lg leading-relaxed text-gray-300 font-gilroy">{product.description}</p>
           </div>
 
           {
             product.descriptions && product.descriptions.length > 0 && (
-              <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700">
-                <h2 class="text-2xl font-bold text-yellow-400 mb-6 font-gilroy">Подробное описание</h2>
-                <div class="space-y-4">
+              <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700">
+                <h2 class="text-lg xs:text-xl sm:text-2xl font-bold text-yellow-400 mb-3 xs:mb-4 sm:mb-6 font-gilroy">Подробное описание</h2>
+                <div class="space-y-3 xs:space-y-4">
                   {product.descriptions.map((desc) => (
-                    <p class="text-base text-gray-300 leading-relaxed font-gilroy">{desc}</p>
+                    <p class="text-sm xs:text-base text-gray-300 leading-relaxed font-gilroy">{desc}</p>
                   ))}
                 </div>
               </div>
@@ -136,13 +136,13 @@ const analyticsScript = `
 
           {
             product.items && product.items.length > 0 && (
-              <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700">
-                <h2 class="text-2xl font-bold text-yellow-400 mb-6 font-gilroy">Характеристики</h2>
-                <ul class="space-y-3">
+              <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700">
+                <h2 class="text-lg xs:text-xl sm:text-2xl font-bold text-yellow-400 mb-3 xs:mb-4 sm:mb-6 font-gilroy">Характеристики</h2>
+                <ul class="space-y-2 xs:space-y-3">
                   {product.items.map((item) => (
                     <li class="flex items-center space-x-3">
                       <div class="w-2 h-2 bg-yellow-500 rounded-full flex-shrink-0" />
-                      <span class="text-gray-300 font-gilroy">{item}</span>
+                      <span class="text-gray-300 font-gilroy text-sm xs:text-base">{item}</span>
                     </li>
                   ))}
                 </ul>
@@ -151,11 +151,11 @@ const analyticsScript = `
           }
 
           <!-- Кнопка заказа -->
-          <div class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 rounded-2xl p-8 border border-yellow-500/30">
-            <h3 class="text-xl font-bold text-yellow-400 mb-4 font-gilroy">Заинтересовал этот продукт?</h3>
-            <p class="text-gray-300 mb-6 font-gilroy">Свяжитесь с нами для получения подробной информации и оформления заказа</p>
-            <button class="open-modal w-full inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25">
-              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-yellow-500/30">
+            <h3 class="text-lg xs:text-xl font-bold text-yellow-400 mb-3 xs:mb-4 font-gilroy">Заинтересовал этот продукт?</h3>
+            <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-6 font-gilroy">Свяжитесь с нами для получения подробной информации и оформления заказа</p>
+            <button class="open-modal w-full inline-flex items-center justify-center px-4 xs:px-6 sm:px-8 py-3 xs:py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-lg xs:rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25 text-sm xs:text-base">
+              <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
               </svg>
               Заказать продукт
diff --git a/src/pages/blog/affinazh-dragocennyh-metallov.astro b/src/pages/blog/affinazh-dragocennyh-metallov.astro
index ea90621..92064f0 100644
--- a/src/pages/blog/affinazh-dragocennyh-metallov.astro
+++ b/src/pages/blog/affinazh-dragocennyh-metallov.astro
@@ -25,7 +25,7 @@ const breadcrumbItems = [
   </Fragment>
 
   <!-- Hero секция статьи -->
-  <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white pt-32 pb-20 px-8 lg:px-24 overflow-hidden">
+  <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white header-offset pb-20 px-8 lg:px-24 overflow-hidden">
     <!-- Декоративные элементы -->
     <div class="absolute inset-0 opacity-10">
       <div class="absolute top-20 left-20 w-32 h-32 bg-purple-500 rounded-full blur-3xl"></div>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 3535740..21c2440 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -48,7 +48,7 @@ const articles = [
   </Fragment>
 
   <!-- Hero секция для блога -->
-  <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white pt-32 pb-24 px-8 lg:px-24 overflow-hidden">
+  <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white header-offset pb-16 xs:pb-20 sm:pb-24 px-4 xs:px-6 sm:px-8 lg:px-24 overflow-hidden">
     <!-- Декоративные элементы -->
     <div class="absolute inset-0 opacity-10">
       <div class="absolute top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div>
@@ -57,27 +57,27 @@ const articles = [
     </div>
 
     <div class="relative z-10 max-w-7xl mx-auto text-center">
-      <h1 class="text-6xl lg:text-8xl font-bold text-yellow-500 mb-8 font-nevduplenysh">
+      <h1 class="text-4xl xs:text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold text-yellow-500 mb-6 xs:mb-8 font-nevduplenysh">
         ЭКСПЕРТНЫЙ БЛОГ
       </h1>
-      <p class="text-xl lg:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed">
+      <p class="text-base xs:text-lg sm:text-xl lg:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed">
         Профессиональные знания и экспертные материалы о драгоценных металлах, 
         <span class="text-yellow-400 font-semibold">технологиях и стандартах качества</span>
       </p>
 
       <!-- Статистика блога -->
-      <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
-        <div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
-          <div class="text-4xl font-bold text-yellow-400 font-nevduplenysh mb-2">15+</div>
-          <div class="text-white font-gilroy font-medium">экспертных статей</div>
+      <div class="mt-12 xs:mt-16 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-6 sm:gap-8 max-w-4xl mx-auto">
+        <div class="bg-black/40 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
+          <div class="text-3xl xs:text-4xl font-bold text-yellow-400 font-nevduplenysh mb-1 xs:mb-2">15+</div>
+          <div class="text-white font-gilroy font-medium text-sm xs:text-base">экспертных статей</div>
         </div>
-        <div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
-          <div class="text-4xl font-bold text-yellow-400 font-nevduplenysh mb-2">5000+</div>
-          <div class="text-white font-gilroy font-medium">читателей в месяц</div>
+        <div class="bg-black/40 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
+          <div class="text-3xl xs:text-4xl font-bold text-yellow-400 font-nevduplenysh mb-1 xs:mb-2">5000+</div>
+          <div class="text-white font-gilroy font-medium text-sm xs:text-base">читателей в месяц</div>
         </div>
-        <div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
-          <div class="text-4xl font-bold text-yellow-400 font-nevduplenysh mb-2">24/7</div>
-          <div class="text-white font-gilroy font-medium">обновления</div>
+        <div class="bg-black/40 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
+          <div class="text-3xl xs:text-4xl font-bold text-yellow-400 font-nevduplenysh mb-1 xs:mb-2">24/7</div>
+          <div class="text-white font-gilroy font-medium text-sm xs:text-base">обновления</div>
         </div>
       </div>
     </div>
@@ -86,7 +86,7 @@ const articles = [
   <Breadcrumbs items={breadcrumbItems} />
 
   <!-- Основной контент блога -->
-  <main class="bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white py-20 px-8 lg:px-24 relative overflow-hidden">
+  <main class="bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white py-12 xs:py-16 sm:py-20 px-4 xs:px-6 sm:px-8 lg:px-24 relative overflow-hidden">
     <!-- Декоративные элементы -->
     <div class="absolute inset-0 opacity-5">
       <div class="absolute top-40 left-40 w-32 h-32 bg-blue-500 rounded-full blur-3xl"></div>
@@ -95,53 +95,53 @@ const articles = [
 
     <div class="relative z-10 max-w-7xl mx-auto">
       <!-- Заголовок раздела -->
-      <div class="text-center mb-16">
-        <h2 class="text-4xl lg:text-6xl font-bold text-white mb-6 font-nevduplenysh">
+      <div class="text-center mb-12 xs:mb-16">
+        <h2 class="text-3xl xs:text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-4 xs:mb-6 font-nevduplenysh">
           ПОСЛЕДНИЕ СТАТЬИ
         </h2>
-        <p class="text-xl text-gray-300 max-w-3xl mx-auto font-gilroy leading-relaxed">
+        <p class="text-base xs:text-lg sm:text-xl text-gray-300 max-w-3xl mx-auto font-gilroy leading-relaxed">
           Актуальные материалы от наших экспертов о драгоценных металлах, технологиях и рыночных трендах
         </p>
       </div>
 
       <!-- Сетка статей -->
-      <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
+      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 xs:gap-8">
         {articles.map((article, index) => (
-          <article class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl overflow-hidden shadow-2xl hover:transform hover:scale-105 transition-all duration-500 border border-gray-700 hover:border-yellow-500/50">
+          <article class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl xs:rounded-3xl overflow-hidden shadow-2xl hover:transform hover:scale-105 transition-all duration-500 border border-gray-700 hover:border-yellow-500/50">
             <!-- Фоновое изображение -->
             <div class="absolute inset-0 bg-cover bg-center opacity-20" style={`background-image: url('${article.image}');`}></div>
             <div class="absolute inset-0 bg-gradient-to-br from-black/60 to-black/80"></div>
             
-            <div class="relative z-10 p-8 h-full flex flex-col">
+            <div class="relative z-10 p-6 xs:p-8 h-full flex flex-col">
               <!-- Категория -->
-              <div class="mb-4">
-                <span class={`inline-block px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r ${article.categoryColor} shadow-lg`}>
+              <div class="mb-3 xs:mb-4">
+                <span class={`inline-block px-3 py-1 xs:px-4 xs:py-2 rounded-full text-xs xs:text-sm font-semibold text-white bg-gradient-to-r ${article.categoryColor} shadow-lg`}>
                   {article.category}
                 </span>
               </div>
 
               <!-- Заголовок -->
-              <h3 class="text-2xl font-bold mb-4 text-white font-gilroy leading-tight group-hover:text-yellow-400 transition-colors duration-300">
+              <h3 class="text-xl xs:text-2xl font-bold mb-3 xs:mb-4 text-white font-gilroy leading-tight group-hover:text-yellow-400 transition-colors duration-300">
                 <a href={`/blog/${article.slug}`} class="block">
                   {article.title}
                 </a>
               </h3>
 
               <!-- Описание -->
-              <p class="text-gray-300 mb-6 font-gilroy leading-relaxed flex-grow">
+              <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-6 font-gilroy leading-relaxed flex-grow">
                 {article.excerpt}
               </p>
 
               <!-- Метаинформация -->
-              <div class="flex justify-between items-center text-sm text-gray-400 font-gilroy mb-6">
+              <div class="flex justify-between items-center text-xs xs:text-sm text-gray-400 font-gilroy mb-4 xs:mb-6">
                 <span class="flex items-center">
-                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg class="w-3 h-3 xs:w-4 xs:h-4 mr-1 xs:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                   </svg>
                   {article.publishDate}
                 </span>
                 <span class="flex items-center">
-                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg class="w-3 h-3 xs:w-4 xs:h-4 mr-1 xs:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                   </svg>
                   {article.readTime}
@@ -151,32 +151,32 @@ const articles = [
               <!-- Кнопка чтения -->
               <a 
                 href={`/blog/${article.slug}`}
-                class="group/btn inline-flex items-center justify-center w-full px-6 py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25"
+                class="group/btn inline-flex items-center justify-center w-full px-4 py-3 xs:px-6 xs:py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-lg xs:rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25 text-sm xs:text-base"
               >
                 <span>Читать статью</span>
-                <svg class="w-5 h-5 ml-3 group-hover/btn:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-4 h-4 xs:w-5 xs:h-5 ml-2 xs:ml-3 group-hover/btn:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                 </svg>
               </a>
             </div>
 
             <!-- Декоративный элемент -->
-            <div class="absolute top-4 right-4 w-12 h-12 bg-gradient-to-br from-yellow-500/20 to-yellow-600/20 rounded-full blur-xl group-hover:from-yellow-400/30 group-hover:to-yellow-500/30 transition-all duration-500"></div>
+            <div class="absolute top-3 xs:top-4 right-3 xs:right-4 w-10 h-10 xs:w-12 xs:h-12 bg-gradient-to-br from-yellow-500/20 to-yellow-600/20 rounded-full blur-xl group-hover:from-yellow-400/30 group-hover:to-yellow-500/30 transition-all duration-500"></div>
           </article>
         ))}
       </div>
 
       <!-- Call to Action -->
-      <div class="mt-20 text-center">
-        <div class="bg-gradient-to-r from-gray-800/60 to-gray-900/60 backdrop-blur-sm rounded-3xl p-12 border border-gray-700/50">
-          <h3 class="text-3xl lg:text-4xl font-bold text-white mb-6 font-nevduplenysh">
+      <div class="mt-16 xs:mt-20 text-center">
+        <div class="bg-gradient-to-r from-gray-800/60 to-gray-900/60 backdrop-blur-sm rounded-2xl xs:rounded-3xl p-8 xs:p-12 border border-gray-700/50">
+          <h3 class="text-2xl xs:text-3xl lg:text-4xl font-bold text-white mb-4 xs:mb-6 font-nevduplenysh">
             ОСТАЛИСЬ ВОПРОСЫ?
           </h3>
-          <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto font-gilroy leading-relaxed">
+          <p class="text-base xs:text-lg sm:text-xl text-gray-300 mb-6 xs:mb-8 max-w-2xl mx-auto font-gilroy leading-relaxed">
             Наши эксперты готовы ответить на любые вопросы о драгоценных металлах и поделиться профессиональным опытом
           </p>
-          <button class="open-modal inline-flex items-center px-8 py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25">
-            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <button class="open-modal inline-flex items-center px-6 py-3 xs:px-8 xs:py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-lg xs:rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25 text-sm xs:text-base">
+            <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
             </svg>
             Задать вопрос эксперту
diff --git a/src/pages/blog/platinovye-metally-promyshlennost.astro b/src/pages/blog/platinovye-metally-promyshlennost.astro
index 74db6ee..2970ff0 100644
--- a/src/pages/blog/platinovye-metally-promyshlennost.astro
+++ b/src/pages/blog/platinovye-metally-promyshlennost.astro
@@ -25,7 +25,7 @@ const breadcrumbItems = [
   </Fragment>
 
   <!-- Hero секция статьи -->
-  <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white pt-32 pb-20 px-8 lg:px-24 overflow-hidden">
+  <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white header-offset pb-20 px-8 lg:px-24 overflow-hidden">
     <!-- Декоративные элементы -->
     <div class="absolute inset-0 opacity-10">
       <div class="absolute top-20 left-20 w-32 h-32 bg-blue-500 rounded-full blur-3xl"></div>
diff --git a/src/pages/blog/sertifikaciya-kontrolj-kachestva.astro b/src/pages/blog/sertifikaciya-kontrolj-kachestva.astro
index 14562d8..76e7689 100644
--- a/src/pages/blog/sertifikaciya-kontrolj-kachestva.astro
+++ b/src/pages/blog/sertifikaciya-kontrolj-kachestva.astro
@@ -25,7 +25,7 @@ const breadcrumbItems = [
   </Fragment>
 
   <!-- Hero секция статьи -->
-  <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white pt-32 pb-20 px-8 lg:px-24 overflow-hidden">
+  <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white header-offset pb-20 px-8 lg:px-24 overflow-hidden">
     <!-- Декоративные элементы -->
     <div class="absolute inset-0 opacity-10">
       <div class="absolute top-20 left-20 w-32 h-32 bg-green-500 rounded-full blur-3xl"></div>
diff --git a/src/pages/cities.astro b/src/pages/cities.astro
index 0c6b31e..7a291b0 100644
--- a/src/pages/cities.astro
+++ b/src/pages/cities.astro
@@ -183,96 +183,96 @@ const deliveryInfo = [
 
       <!-- Контакты региональных представителей -->
       <section>
-        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-8 lg:mb-12 text-center font-nevduplenysh">
+        <h2 class="text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-6 xs:mb-8 lg:mb-12 text-center font-nevduplenysh">
           Контакты региональных представителей
         </h2>
-        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-8">
+        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 xs:gap-6 lg:gap-8">
           {cities.map((city) => (
-            <div class={`group bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-6 lg:p-8 rounded-2xl shadow-2xl border-l-4 ${city.isHeadOffice ? 'border-yellow-500 shadow-yellow-500/20' : 'border-blue-500 shadow-blue-500/20'} hover:shadow-2xl transition-all duration-500 transform hover:scale-105 backdrop-blur-sm border border-gray-700/50 hover:border-yellow-500/50`}>
-              <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-4 lg:mb-6 space-y-2 sm:space-y-0">
-                <h3 class="text-xl sm:text-2xl font-bold text-white group-hover:text-yellow-400 transition-colors duration-300 font-nevduplenysh">{city.name}</h3>
+            <div class={`group bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-4 xs:p-6 lg:p-8 rounded-xl xs:rounded-2xl shadow-2xl border-l-4 ${city.isHeadOffice ? 'border-yellow-500 shadow-yellow-500/20' : 'border-blue-500 shadow-blue-500/20'} hover:shadow-2xl transition-all duration-500 transform hover:scale-105 backdrop-blur-sm border border-gray-700/50 hover:border-yellow-500/50`}>
+              <div class="flex flex-col xs:flex-row xs:items-center justify-between mb-3 xs:mb-4 lg:mb-6 space-y-2 xs:space-y-0">
+                <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white group-hover:text-yellow-400 transition-colors duration-300 font-nevduplenysh">{city.name}</h3>
                 {city.isHeadOffice && (
-                  <span class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-black px-2 sm:px-3 py-1 rounded-full text-xs font-bold self-start sm:self-center">
+                  <span class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-black px-2 xs:px-3 py-1 rounded-full text-xs font-bold self-start xs:self-center">
                     ГОЛОВНОЙ ОФИС
                   </span>
                 )}
               </div>
               
-              <div class="space-y-4 text-gray-300 font-gilroy">
-                <div class="flex items-start space-x-3">
-                  <svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div class="space-y-3 xs:space-y-4 text-gray-300 font-gilroy">
+                <div class="flex items-start space-x-2 xs:space-x-3">
+                  <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                   </svg>
                   <div>
-                    <div class="text-sm text-gray-400">Регион</div>
-                    <div class="text-white font-medium">{city.region}</div>
+                    <div class="text-xs xs:text-sm text-gray-400">Регион</div>
+                    <div class="text-white font-medium text-sm xs:text-base">{city.region}</div>
                   </div>
                 </div>
                 
                 {city.address && (
-                  <div class="flex items-start space-x-3">
-                    <svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <div class="flex items-start space-x-2 xs:space-x-3">
+                    <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                     </svg>
                     <div>
-                      <div class="text-sm text-gray-400">Адрес</div>
-                      <div class="text-white">{city.address}</div>
+                      <div class="text-xs xs:text-sm text-gray-400">Адрес</div>
+                      <div class="text-white text-sm xs:text-base">{city.address}</div>
                     </div>
                   </div>
                 )}
 
                 
-                <div class="flex items-start space-x-3">
-                  <svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="flex items-start space-x-2 xs:space-x-3">
+                  <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"></path>
                   </svg>
                   <div>
-                    <div class="text-sm text-gray-400">Телефон</div>
-                    <div class="text-white font-medium">{city.phone}</div>
+                    <div class="text-xs xs:text-sm text-gray-400">Телефон</div>
+                    <div class="text-white font-medium text-sm xs:text-base">{city.phone}</div>
                   </div>
                 </div>
                 
-                <div class="flex items-start space-x-3">
-                  <svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="flex items-start space-x-2 xs:space-x-3">
+                  <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                   </svg>
                   <div>
-                    <div class="text-sm text-gray-400">Email</div>
-                    <div class="text-white">{city.email}</div>
+                    <div class="text-xs xs:text-sm text-gray-400">Email</div>
+                    <div class="text-white text-sm xs:text-base">{city.email}</div>
                   </div>
                 </div>
                 
                 {city.manager && (
-                  <div class="flex items-start space-x-3">
-                    <svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <div class="flex items-start space-x-2 xs:space-x-3">
+                    <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                     </svg>
                     <div>
-                      <div class="text-sm text-gray-400">Менеджер</div>
-                      <div class="text-white">{city.manager}</div>
+                      <div class="text-xs xs:text-sm text-gray-400">Менеджер</div>
+                      <div class="text-white text-sm xs:text-base">{city.manager}</div>
                     </div>
                   </div>
                 )}
 
                 
-                <div class="flex items-start space-x-3">
-                  <svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="flex items-start space-x-2 xs:space-x-3">
+                  <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                   </svg>
                   <div>
-                    <div class="text-sm text-gray-400">Режим работы</div>
-                    <div class="text-white">{city.workingHours}</div>
+                    <div class="text-xs xs:text-sm text-gray-400">Режим работы</div>
+                    <div class="text-white text-sm xs:text-base">{city.workingHours}</div>
                   </div>
                 </div>
               </div>
               
               <!-- Услуги -->
-              <div class="mt-6 pt-6 border-t border-gray-700/50">
-                <div class="text-sm text-gray-400 mb-3">Услуги</div>
-                <div class="flex flex-wrap gap-2">
+              <div class="mt-4 xs:mt-6 pt-4 xs:pt-6 border-t border-gray-700/50">
+                <div class="text-xs xs:text-sm text-gray-400 mb-2 xs:mb-3">Услуги</div>
+                <div class="flex flex-wrap gap-1.5 xs:gap-2">
                   {city.services.map((service) => (
-                    <span class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 text-yellow-400 px-3 py-1 rounded-full text-xs font-medium border border-yellow-500/30">
+                    <span class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 text-yellow-400 px-2 xs:px-3 py-1 rounded-full text-xs font-medium border border-yellow-500/30">
                       {service}
                     </span>
                   ))}
@@ -284,17 +284,17 @@ const deliveryInfo = [
       </section>
 
       <!-- Условия доставки -->
-      <section class="bg-black/40 backdrop-blur-sm rounded-3xl p-4 sm:p-6 lg:p-8 xl:p-12 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-500">
-        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-8 lg:mb-12 text-center font-nevduplenysh">
+      <section class="bg-black/40 backdrop-blur-sm rounded-2xl xs:rounded-3xl p-4 xs:p-6 sm:p-8 lg:p-12 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-500">
+        <h2 class="text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-6 xs:mb-8 lg:mb-12 text-center font-nevduplenysh">
           Условия доставки по регионам
         </h2>
         
         <!-- Мобильная версия - карточки -->
-        <div class="block lg:hidden space-y-4">
+        <div class="block lg:hidden space-y-3 xs:space-y-4">
           {deliveryInfo.map((info, index) => (
-            <div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-4 sm:p-6 rounded-2xl shadow-2xl border border-gray-700/50 hover:border-yellow-500/50 transition-all duration-300">
-              <h3 class="text-lg sm:text-xl font-bold text-yellow-400 mb-4 font-nevduplenysh">{info.region}</h3>
-              <div class="space-y-3 text-sm sm:text-base font-gilroy">
+            <div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-4 xs:p-6 rounded-xl xs:rounded-2xl shadow-2xl border border-gray-700/50 hover:border-yellow-500/50 transition-all duration-300">
+              <h3 class="text-base xs:text-lg sm:text-xl font-bold text-yellow-400 mb-3 xs:mb-4 font-nevduplenysh">{info.region}</h3>
+              <div class="space-y-2 xs:space-y-3 text-sm xs:text-base font-gilroy">
                 <div class="flex justify-between items-center">
                   <span class="text-gray-400">Время доставки:</span>
                   <span class="text-white font-medium">{info.deliveryTime}</span>
@@ -305,7 +305,7 @@ const deliveryInfo = [
                 </div>
                 <div class="pt-2 border-t border-gray-700/50">
                   <span class="text-gray-400 block mb-2">Особенности:</span>
-                  <span class="text-white">{info.specialConditions}</span>
+                  <span class="text-white text-sm xs:text-base">{info.specialConditions}</span>
                 </div>
               </div>
             </div>
@@ -336,34 +336,34 @@ const deliveryInfo = [
           </table>
         </div>
         
-        <div class="mt-8 lg:mt-12 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 border-l-4 border-yellow-500 p-4 sm:p-6 lg:p-8 rounded-2xl backdrop-blur-sm">
-          <h3 class="text-xl sm:text-2xl font-bold text-yellow-400 mb-4 sm:mb-6 font-nevduplenysh flex items-center">
-            <svg class="w-6 h-6 sm:w-8 sm:h-8 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="mt-6 xs:mt-8 lg:mt-12 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 border-l-4 border-yellow-500 p-4 xs:p-6 lg:p-8 rounded-xl xs:rounded-2xl backdrop-blur-sm">
+          <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-yellow-400 mb-3 xs:mb-4 sm:mb-6 font-nevduplenysh flex items-center">
+            <svg class="w-5 h-5 xs:w-6 xs:h-6 sm:w-8 sm:h-8 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
             </svg>
             Важная информация
           </h3>
-          <ul class="space-y-3 text-white font-gilroy text-base sm:text-lg">
-            <li class="flex items-start space-x-3">
-              <svg class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <ul class="space-y-2 xs:space-y-3 text-white font-gilroy text-sm xs:text-base sm:text-lg">
+            <li class="flex items-start space-x-2 xs:space-x-3">
+              <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
               </svg>
               <span>Все поставки драгоценных металлов осуществляются с соблюдением требований безопасности</span>
             </li>
-            <li class="flex items-start space-x-3">
-              <svg class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <li class="flex items-start space-x-2 xs:space-x-3">
+              <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
               </svg>
               <span>Доставка производится только в рабочие дни с 9:00 до 18:00</span>
             </li>
-            <li class="flex items-start space-x-3">
-              <svg class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <li class="flex items-start space-x-2 xs:space-x-3">
+              <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
               </svg>
               <span>Для крупных заказов возможна индивидуальная схема логистики</span>
             </li>
-            <li class="flex items-start space-x-3">
-              <svg class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <li class="flex items-start space-x-2 xs:space-x-3">
+              <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
               </svg>
               <span>Все грузы застрахованы на полную стоимость</span>
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
index 05ad58b..4681f8b 100644
--- a/src/pages/faq.astro
+++ b/src/pages/faq.astro
@@ -150,48 +150,48 @@ const faqCategories = [
     <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-gradient-to-r from-green-500/5 to-teal-500/5 rounded-full blur-3xl"></div>
   </div>
 
-  <main class="relative bg-gradient-to-br from-black via-gray-900 to-black text-white py-16 px-8 lg:px-24 min-h-screen">
+  <main class="relative bg-gradient-to-br from-black via-gray-900 to-black text-white py-12 xs:py-16 px-4 xs:px-6 sm:px-8 lg:px-24 min-h-screen">
     <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.02),transparent)] pointer-events-none"></div>
     
     <div class="relative z-10">
-      <h1 class="text-4xl lg:text-6xl font-bold mb-12 text-transparent bg-gradient-to-r from-yellow-400 via-yellow-500 to-orange-500 bg-clip-text font-nevduplenysh text-center">
+      <h1 class="text-3xl xs:text-4xl sm:text-5xl lg:text-6xl font-bold mb-8 xs:mb-12 text-transparent bg-gradient-to-r from-yellow-400 via-yellow-500 to-orange-500 bg-clip-text font-nevduplenysh text-center">
         Часто задаваемые вопросы
       </h1>
 
       <div class="max-w-6xl mx-auto">
-        <div class="mb-12 text-center">
-          <p class="text-lg text-gray-300 leading-relaxed max-w-3xl mx-auto">
+        <div class="mb-8 xs:mb-12 text-center">
+          <p class="text-base xs:text-lg text-gray-300 leading-relaxed max-w-3xl mx-auto">
             Здесь собраны ответы на наиболее популярные вопросы наших клиентов. 
             Если вы не нашли ответ на свой вопрос, свяжитесь с нами.
           </p>
         </div>
 
         {faqCategories.map((category, categoryIndex) => (
-          <section class="mb-16">
-            <div class="relative bg-gradient-to-r from-gray-900/80 via-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-8 mb-8">
-              <div class="absolute inset-0 bg-gradient-to-r from-yellow-500/5 to-orange-500/5 rounded-2xl"></div>
-              <h2 class="relative text-3xl font-bold text-white flex items-center gap-4">
-                <div class="w-2 h-8 bg-gradient-to-b from-yellow-400 to-orange-500 rounded-full"></div>
+          <section class="mb-12 xs:mb-16">
+            <div class="relative bg-gradient-to-r from-gray-900/80 via-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/50 rounded-xl xs:rounded-2xl p-6 xs:p-8 mb-6 xs:mb-8">
+              <div class="absolute inset-0 bg-gradient-to-r from-yellow-500/5 to-orange-500/5 rounded-xl xs:rounded-2xl"></div>
+              <h2 class="relative text-2xl xs:text-3xl font-bold text-white flex items-center gap-3 xs:gap-4">
+                <div class="w-1.5 xs:w-2 h-6 xs:h-8 bg-gradient-to-b from-yellow-400 to-orange-500 rounded-full"></div>
                 {category.title}
               </h2>
             </div>
             
-            <div class="space-y-4">
+            <div class="space-y-3 xs:space-y-4">
               {category.questions.map((faq, index) => (
-                <div class="group relative bg-gradient-to-br from-gray-900/60 via-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/30 rounded-xl overflow-hidden hover:border-gray-600/50 transition-all duration-300">
+                <div class="group relative bg-gradient-to-br from-gray-900/60 via-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/30 rounded-lg xs:rounded-xl overflow-hidden hover:border-gray-600/50 transition-all duration-300">
                   <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                   
                   <div class="faq-item relative">
                     <button 
-                      class="faq-question w-full text-left flex justify-between items-start focus:outline-none p-6 group-hover:bg-white/[0.02] transition-colors duration-300"
+                      class="faq-question w-full text-left flex justify-between items-start focus:outline-none p-4 xs:p-6 group-hover:bg-white/[0.02] transition-colors duration-300"
                       onclick={`toggleFaq('faq-${categoryIndex}-${index}')`}
                     >
-                      <h3 class="text-lg font-semibold text-white pr-4 group-hover:text-yellow-300 transition-colors duration-300">
+                      <h3 class="text-base xs:text-lg font-semibold text-white pr-3 xs:pr-4 group-hover:text-yellow-300 transition-colors duration-300">
                         {faq.question}
                       </h3>
-                      <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-r from-yellow-500/20 to-orange-500/20 rounded-lg flex items-center justify-center group-hover:from-yellow-500/30 group-hover:to-orange-500/30 transition-all duration-300">
+                      <div class="flex-shrink-0 w-8 h-8 xs:w-10 xs:h-10 bg-gradient-to-r from-yellow-500/20 to-orange-500/20 rounded-lg flex items-center justify-center group-hover:from-yellow-500/30 group-hover:to-orange-500/30 transition-all duration-300">
                         <svg 
-                          class="faq-icon w-5 h-5 text-yellow-400 transition-transform duration-300"
+                          class="faq-icon w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 transition-transform duration-300"
                           fill="none" 
                           stroke="currentColor" 
                           viewBox="0 0 24 24"
@@ -208,10 +208,10 @@ const faqCategories = [
                     
                     <div 
                       id={`faq-${categoryIndex}-${index}`}
-                      class="faq-answer hidden px-6 pb-6"
+                      class="faq-answer hidden px-4 xs:px-6 pb-4 xs:pb-6"
                     >
-                      <div class="border-t border-gray-700/50 pt-4">
-                        <p class="text-gray-300 leading-relaxed">
+                      <div class="border-t border-gray-700/50 pt-3 xs:pt-4">
+                        <p class="text-sm xs:text-base text-gray-300 leading-relaxed">
                           {faq.answer}
                         </p>
                       </div>
@@ -224,29 +224,29 @@ const faqCategories = [
         ))}
 
         <!-- Контактная информация -->
-        <section class="relative bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-8 mt-16 overflow-hidden">
-          <div class="absolute inset-0 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 rounded-2xl"></div>
-          <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-full blur-2xl"></div>
+        <section class="relative bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/50 rounded-xl xs:rounded-2xl p-6 xs:p-8 mt-12 xs:mt-16 overflow-hidden">
+          <div class="absolute inset-0 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 rounded-xl xs:rounded-2xl"></div>
+          <div class="absolute top-0 right-0 w-24 h-24 xs:w-32 xs:h-32 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-full blur-2xl"></div>
           
           <div class="relative z-10">
-            <h2 class="text-2xl font-bold text-white mb-4 text-center flex items-center justify-center gap-3">
-              <div class="w-8 h-8 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center">
-                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <h2 class="text-xl xs:text-2xl font-bold text-white mb-3 xs:mb-4 text-center flex items-center justify-center gap-2 xs:gap-3">
+              <div class="w-6 h-6 xs:w-8 xs:h-8 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center">
+                <svg class="w-3 h-3 xs:w-4 xs:h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                 </svg>
               </div>
               Не нашли ответ на свой вопрос?
             </h2>
-            <p class="text-gray-300 text-center mb-8 max-w-2xl mx-auto">
+            <p class="text-sm xs:text-base text-gray-300 text-center mb-6 xs:mb-8 max-w-2xl mx-auto">
               Свяжитесь с нашими специалистами, и мы обязательно поможем вам
             </p>
-            <div class="flex flex-col md:flex-row justify-center items-center gap-6">
+            <div class="flex flex-col sm:flex-row justify-center items-center gap-4 xs:gap-6">
               <a 
                 href="tel:+79251045050" 
-                class="group flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-blue-600/80 to-blue-500/80 backdrop-blur-sm text-white rounded-xl hover:from-blue-500 hover:to-blue-400 transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-105"
+                class="group flex items-center gap-2 xs:gap-3 px-4 py-2.5 xs:px-6 xs:py-3 bg-gradient-to-r from-blue-600/80 to-blue-500/80 backdrop-blur-sm text-white rounded-lg xs:rounded-xl hover:from-blue-500 hover:to-blue-400 transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-105 text-sm xs:text-base w-full sm:w-auto"
               >
-                <div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center group-hover:bg-white/30 transition-colors">
-                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                <div class="w-6 h-6 xs:w-8 xs:h-8 bg-white/20 rounded-lg flex items-center justify-center group-hover:bg-white/30 transition-colors">
+                  <svg class="w-3 h-3 xs:w-4 xs:h-4" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                   </svg>
                 </div>
@@ -254,19 +254,19 @@ const faqCategories = [
               </a>
               <a 
                 href="mailto:ooo.dmdk@mail.ru" 
-                class="group flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-purple-600/80 to-purple-500/80 backdrop-blur-sm text-white rounded-xl hover:from-purple-500 hover:to-purple-400 transition-all duration-300 shadow-lg hover:shadow-purple-500/25 hover:scale-105"
+                class="group flex items-center gap-2 xs:gap-3 px-4 py-2.5 xs:px-6 xs:py-3 bg-gradient-to-r from-purple-600/80 to-purple-500/80 backdrop-blur-sm text-white rounded-lg xs:rounded-xl hover:from-purple-500 hover:to-purple-400 transition-all duration-300 shadow-lg hover:shadow-purple-500/25 hover:scale-105 text-sm xs:text-base w-full sm:w-auto"
               >
-                <div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center group-hover:bg-white/30 transition-colors">
-                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                <div class="w-6 h-6 xs:w-8 xs:h-8 bg-white/20 rounded-lg flex items-center justify-center group-hover:bg-white/30 transition-colors">
+                  <svg class="w-3 h-3 xs:w-4 xs:h-4" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                     <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                   </svg>
                 </div>
                 <span class="font-semibold">ooo.dmdk@mail.ru</span>
               </a>
-              <button class="open-modal group px-6 py-3 bg-gradient-to-r from-yellow-600 to-orange-600 text-white rounded-xl font-semibold hover:from-yellow-500 hover:to-orange-500 transition-all duration-300 shadow-lg hover:shadow-yellow-500/25 hover:scale-105">
-                <span class="flex items-center gap-2">
-                  <svg class="w-4 h-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <button class="open-modal group px-4 py-2.5 xs:px-6 xs:py-3 bg-gradient-to-r from-yellow-600 to-orange-600 text-white rounded-lg xs:rounded-xl font-semibold hover:from-yellow-500 hover:to-orange-500 transition-all duration-300 shadow-lg hover:shadow-yellow-500/25 hover:scale-105 text-sm xs:text-base w-full sm:w-auto">
+                <span class="flex items-center justify-center gap-2">
+                  <svg class="w-3 h-3 xs:w-4 xs:h-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                   </svg>
                   Задать вопрос
@@ -280,23 +280,23 @@ const faqCategories = [
   </main>
 
   <script>
-    function toggleFaq(id) {
+    function toggleFaq(id: string) {
       const answer = document.getElementById(id);
-      const button = answer.previousElementSibling;
-      const icon = button.querySelector('.faq-icon');
+      const button = answer?.previousElementSibling as HTMLElement;
+      const icon = button?.querySelector('.faq-icon') as HTMLElement;
       
-      if (answer.classList.contains('hidden')) {
+      if (answer?.classList.contains('hidden')) {
         answer.classList.remove('hidden');
-        icon.style.transform = 'rotate(180deg)';
-        button.classList.add('bg-white/[0.05]');
+        if (icon) icon.style.transform = 'rotate(180deg)';
+        button?.classList.add('bg-white/[0.05]');
       } else {
-        answer.classList.add('hidden');
-        icon.style.transform = 'rotate(0deg)';
-        button.classList.remove('bg-white/[0.05]');
+        answer?.classList.add('hidden');
+        if (icon) icon.style.transform = 'rotate(0deg)';
+        button?.classList.remove('bg-white/[0.05]');
       }
     }
 
     // Глобальная функция для использования в onclick
-    window.toggleFaq = toggleFaq;
+    (window as any).toggleFaq = toggleFaq;
   </script>
 </Layout> 
\ No newline at end of file
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 2fdcb6b..0689c01 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -9,6 +9,7 @@ export default {
       },
     },
     screens: {
+      xs: "320px",
       sm: "480px",
       md: "768px",
       lg: "1028px",
diff --git a/vercel.json b/vercel.json
index 70784c2..c5d5028 100644
--- a/vercel.json
+++ b/vercel.json
@@ -6,7 +6,7 @@
       "headers": [
         {
           "key": "Content-Security-Policy",
-          "value": "default-src 'self'; img-src 'self' https: data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self';"
+          "value": "default-src 'self'; img-src 'self' https: data: mc.yandex.ru; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com mc.yandex.ru; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self' https://api.telegram.org https://mc.yandex.ru https://www.google-analytics.com; frame-src 'self' https://mc.yandex.ru;"
         }
       ]
     }