Update styles.css

styles.css

@@ -50,6 +50,7 @@ body {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 30px;
+    overflow: hidden; /* Предотвращает выход текста за границы на ПК */
 }
 
 /* Шапка */
@@ -60,7 +61,7 @@ header {
     position: fixed;
     width: 100%;
     top: 0;
-    z-index: 1000; /* Увеличил z-index, чтобы шапка была выше контента */
+    z-index: 1000;
     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
 }
 
@@ -78,7 +79,7 @@ nav {
 }
 
 .menu-toggle {
-    display: none; /* Скрыто по умолчанию на ПК */
+    display: none;
     background: none;
     border: none;
     color: #fff;
@@ -133,7 +134,7 @@ nav {
     align-items: center;
     text-align: center;
     background: radial-gradient(circle at center, rgba(40, 40, 40, 0.3), #0a0a0a);
-    padding-top: 60px; /* Смещаем контент вниз, чтобы шапка не перекрывала */
+    padding-top: 80px; /* Увеличил отступ, чтобы текст не обрезался на мобильных */
 }
 
 #webgl-bg {
@@ -159,6 +160,7 @@ nav {
     color: transparent;
     animation: fadeInUp 1.5s ease-out;
     text-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
+    text-wrap: balance; /* Предотвращает выход текста за границы на ПК */
 }
 
 .hero p {
@@ -166,6 +168,7 @@ nav {
     margin: 25px 0 50px;
     color: #eee;
     text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+    text-wrap: balance;
 }
 
 .cta-button {
@@ -230,12 +233,13 @@ nav {
 .service-card {
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(20px);
-    padding: 50px;
+    padding: 40px;
     text-align: center;
-    border-radius: 30px;
+    border-radius: 25px;
     border: 1px solid rgba(255, 107, 107, 0.2);
     transition: all 0.4s ease;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    overflow: hidden; /* Предотвращает выход текста за границы */
 }
 
 .service-card:hover {
@@ -247,11 +251,13 @@ nav {
     font-size: 32px;
     margin-bottom: 20px;
     color: #ff6b6b;
+    text-wrap: balance;
 }
 
 .service-card p {
     color: #ddd;
     font-size: 20px;
+    text-wrap: balance;
 }
 
 /* О нас */
@@ -265,6 +271,7 @@ nav {
     font-size: 54px;
     margin-bottom: 40px;
     color: #fff;
+    text-wrap: balance;
 }
 
 .about p {
@@ -272,6 +279,7 @@ nav {
     max-width: 1000px;
     margin: 0 auto 50px;
     color: #eee;
+    text-wrap: balance;
 }
 
 #tracking-demo {
@@ -322,6 +330,7 @@ nav {
     background: linear-gradient(135deg, #fff, #ff6b6b);
     -webkit-background-clip: text;
     color: transparent;
+    text-wrap: balance;
 }
 
 form {
@@ -396,13 +405,13 @@ footer {
     }
 
     .menu-toggle {
-        display: block; /* Показываем кнопку меню на мобильных */
+        display: block;
     }
 
     .nav-list {
-        display: none; /* Скрываем меню по умолчанию на мобильных */
+        display: none;
         position: absolute;
-        top: 60px; /* Располагаем меню под шапкой */
+        top: 60px;
         left: 0;
         width: 100%;
         background: rgba(10, 10, 10, 0.9);
@@ -412,7 +421,7 @@ footer {
     }
 
     .nav-list.active {
-        display: block; /* Показываем меню при активации */
+        display: block;
     }
 
     .nav-list li {
@@ -426,13 +435,14 @@ footer {
     }
 
     .hero {
-        height: auto; /* Убираем фиксированную высоту для мобильных */
-        padding: 80px 0 40px; /* Увеличиваем отступ сверху, чтобы контент не перекрывался шапкой */
+        height: auto;
+        padding: 90px 0 40px; /* Увеличил верхний отступ для мобильных */
     }
 
     .hero h2 {
         font-size: 48px;
         letter-spacing: 2px;
+        margin-top: 10px; /* Добавил отступ сверху для текста */
     }
 
     .hero p {
@@ -459,12 +469,13 @@ footer {
     }
 
     .service-grid {
-        grid-template-columns: 1fr; /* Одна колонка на мобильных */
+        grid-template-columns: 1fr;
         gap: 30px;
     }
 
     .service-card {
         padding: 30px;
+        border-radius: 20px; /* Уменьшил радиус для мобильных */
     }
 
     .service-card h4 {