Новые правки

frontend/src/components/home/Steps.astro

@@ -59,6 +59,14 @@ const {
         <div class="steps-container">
             {steps.map((step: Step, index: number) => (
                     <div class="step-card-wrapper animate-on-scroll" data-animation="fade-up" data-delay={index * 100 + 200}>
+                        <!-- Вертикальный соединитель (только для мобильной версии, кроме первого элемента) -->
+                        {index > 0 && (
+                            <div class="mobile-connector mobile-only">
+                                <div class="mobile-connector-line"></div>
+                                <div class="mobile-connector-dot"></div>
+                            </div>
+                        )}
+                        
                         <div class="step-card">
                             <!-- Декоративный фон -->
                             <div class="step-bg"></div>
@@ -79,14 +87,6 @@ const {
                                 <h3 class="step-title">{step.title}</h3>
                                 <p class="step-description">{step.description}</p>
                             </div>
-
-                            <!-- Соединительная линия -->
-                            {index < steps.length - 1 && (
-                                    <div class="step-connector">
-                                        <div class="connector-line"></div>
-                                        <div class="connector-dot"></div>
-                                    </div>
-                            )}
                         </div>
                     </div>
             ))}
@@ -255,6 +255,37 @@ const {
     .step-card-wrapper {
         flex: 1;
         min-width: 0;
+        position: relative;
+    }
+
+    /* Вертикальный соединитель для мобильной версии (скрыт по умолчанию) */
+    .mobile-connector {
+        display: none;
+        position: absolute;
+        top: -24px;
+        left: 50%;
+        transform: translateX(-50%);
+        height: 24px;
+        width: 2px;
+        z-index: 3;
+    }
+
+    .mobile-connector-line {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(to bottom, rgba(234, 194, 110, 0.2) 0%, var(--color-accent) 100%);
+    }
+
+    .mobile-connector-dot {
+        position: absolute;
+        bottom: -4px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 8px;
+        height: 8px;
+        background: var(--color-accent);
+        border-radius: 50%;
+        box-shadow: 0 0 10px var(--color-accent);
     }
 
     /* Карточка шага */
@@ -272,17 +303,7 @@ const {
         flex-direction: column;
     }
 
-    .step-card::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 2px;
-        background: var(--gradient-accent);
-        transform: scaleX(0);
-        transition: transform 0.4s ease;
-    }
+    /* Убрана верхняя полоса внутри карточки */
 
     .step-card:hover {
         transform: translateY(-8px);
@@ -291,10 +312,6 @@ const {
         box-shadow: var(--shadow-glow);
     }
 
-    .step-card:hover::before {
-        transform: scaleX(1);
-    }
-
     .step-bg {
         position: absolute;
         top: -50%;
@@ -405,37 +422,6 @@ const {
         margin: 0;
     }
 
-    /* Соединительная линия */
-    .step-connector {
-        position: absolute;
-        right: -1.25rem;
-        top: 50%;
-        transform: translateY(-50%);
-        width: calc(100% + 1rem);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 3;
-        pointer-events: none;
-    }
-
-    .connector-line {
-        width: 100%;
-        height: 2px;
-        background: linear-gradient(90deg, var(--color-accent) 0%, rgba(234, 194, 110, 0.2) 100%);
-        position: relative;
-    }
-
-    .connector-dot {
-        position: absolute;
-        right: 0;
-        width: 8px;
-        height: 8px;
-        background: var(--color-accent);
-        border-radius: 50%;
-        box-shadow: 0 0 10px var(--color-accent);
-    }
-
     /* Статистика */
     .stats-bar {
         display: flex;
@@ -533,15 +519,21 @@ const {
     @media (max-width: 1024px) {
         .steps-container {
             flex-direction: column;
-            gap: 1.5rem;
+            gap: 0;
         }
 
         .step-card-wrapper {
             width: 100%;
+            margin-bottom: 1.5rem;
         }
 
-        .step-connector {
-            display: none;
+        .step-card-wrapper:last-child {
+            margin-bottom: 0;
+        }
+
+        /* Показываем вертикальные соединители */
+        .mobile-connector {
+            display: block;
         }
 
         .stats-bar {