Обновление стилей и функционала модальных окон, добавление новых услуг и их описаний

assets/css/main.css

@@ -409,7 +409,8 @@ a:hover {
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%;
+    height: 100vh;
+    height: 100dvh; /* Для лучшей поддержки мобильных устройств */
     z-index: 1000;
     display: flex;
     align-items: center;
@@ -417,6 +418,7 @@ a:hover {
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
+    overscroll-behavior: contain; /* Предотвращает скролл фона */
 }
 
 .service-modal.active {
@@ -425,11 +427,12 @@ a:hover {
 }
 
 .modal-overlay {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%;
+    height: 100vh;
+    height: 100dvh;
     background-color: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(5px);
 }
@@ -441,10 +444,13 @@ a:hover {
     max-width: 600px;
     width: 90%;
     max-height: 80vh;
+    max-height: 80dvh;
     overflow-y: auto;
     position: relative;
+    z-index: 1001;
     transform: scale(0.7) translateY(50px);
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    margin: auto;
 }
 
 .service-modal.active .modal-card {
@@ -498,6 +504,10 @@ a:hover {
     border-radius: 50%;
     transition: var(--transition);
     flex-shrink: 0;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 10;
 }
 
 .modal-close:hover {
@@ -537,20 +547,6 @@ a:hover {
     transform: translateX(5px);
 }
 
-.modal-footer {
-    padding: 1rem 2rem 2rem;
-    text-align: center;
-    border-top: 1px solid var(--bg-gray);
-}
-
-.modal-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 1rem 2rem;
-    font-size: 1.1rem;
-}
-
 .service-icon {
     width: 80px;
     height: 80px;
@@ -886,8 +882,15 @@ a:hover {
     /* Modal Mobile Styles */
     .modal-card {
         width: 95%;
-        max-height: 90vh;
-        margin: 0 auto;
+        max-height: 85vh;
+        max-height: 85dvh;
+        margin: auto;
+        transform: scale(0.8) translateY(30px);
+        transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+    
+    .service-modal.active .modal-card {
+        transform: scale(1) translateY(0);
     }
     
     .modal-header {
@@ -920,16 +923,6 @@ a:hover {
         padding: 0.8rem;
         font-size: 0.9rem;
     }
-    
-    .modal-footer {
-        padding: 1rem 1.5rem 1.5rem;
-    }
-    
-    .modal-close {
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-    }
 }
 
 @media (max-width: 480px) {
@@ -957,11 +950,11 @@ a:hover {
     }
 }
 
-/* Animations */
+/* Animations - плавные эффекты появления */
 @keyframes fadeInUp {
     from {
         opacity: 0;
-        transform: translateY(30px);
+        transform: translateY(20px);
     }
     to {
         opacity: 1;
@@ -969,8 +962,22 @@ a:hover {
     }
 }
 
+/* Стили для элементов до анимации */
+.service-card:not(.fade-in-up),
+.feature:not(.fade-in-up),
+.contact-item:not(.fade-in-up),
+.section-header:not(.fade-in-up),
+.about-text:not(.fade-in-up),
+.stats-item:not(.fade-in-up) {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: none;
+}
+
+/* После анимации элементы остаются видимыми */
 .fade-in-up {
-    animation: fadeInUp 0.6s ease-out;
+    opacity: 1 !important;
+    transform: translateY(0) !important;
 }
 
 /* Smooth scrolling offset for fixed header */