From ed30d0b5b727333163e3d6d3d0a445ed0d50f22d Mon Sep 17 00:00:00 2001
From: Zakhar <tz@za-ek.ru>
Date: Thu, 21 May 2026 13:32:08 +0200
Subject: [PATCH] scroll smooth

---
 index.html | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 292cee0..a2e3cc3 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
     <style>
         html, body {height: 100vh;overflow: hidden;}
         body {background: #FCFFFB;padding:0;margin:0;font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;}
-        #scroller {scroll-snap-type: y mandatory;overflow: scroll;height: 100vh;}
+        #scroller {scroll-snap-type: y mandatory;overflow: scroll;height: 100vh;scroll-behavior: smooth;}
         .container {max-width: 1440px;margin: 0 auto;position: relative;width:100%;}
         .text_secondary {color:#6D8982;}
         h1 {font-size: 254px;padding:0;margin:0;}
@@ -62,10 +62,10 @@
         .page_meal_plan_item img {width:54px;}
         .page_meal_plan_item_text {display: flex;flex-direction: column;gap:8px;}
 
-        #page_how_it_works {}
+        #page_how_it_works {display: flex;flex-direction: column;justify-content: space-between;padding-top:80px;box-sizing: border-box;}
         #page_how_it_works_content {text-align: center;}
         #page_how_it_works_step {}
-        #page_how_it_works_steps {display: flex;flex-direction: row;justify-content: space-between;margin-top:64px;}
+        #page_how_it_works_steps {display: flex;flex-direction: row;justify-content: space-between;margin-top:64px;font-size:18px;}
         #page_how_it_works_steps .step-image {width:80px;}
         .page_how_it_works_steps_arrow {display: flex;justify-content: center;align-items: center;}
         #page_how_it_works_step_1 {position: relative;}
@@ -73,7 +73,7 @@
         #page_how_it_works_step_2 {}
         #page_how_it_works_step_2_arrow {height:30px;}
         #page_how_it_works_step_3 {position: relative;align-items: end;display: flex;}
-        #page_how_it_works_step_3 img {position:absolute;width:240px;top:-170px;left:-30px;}
+        #page_how_it_works_step_3 img {position:absolute;width:240px;top:-170px;}
 
         #page_how_it_works_info {background-color: #edfaae;width:100%;border-radius: 24px;position: relative;display: flex;flex-direction: row;box-sizing: border-box;height:320px;margin-top:60px;}
         #page_how_it_works_info_image {position: relative;height:320px;margin-top:70px;}
@@ -84,7 +84,7 @@
         #page_how_it_works_info_content ul li {list-style-type: disc;padding-top:3px;padding-bottom:24px;}
         #page_how_it_works_info_content ul li span {margin-top: -28px;display: flex;}
 
-        #page_footer {min-height: 136px;}
+        #page_footer {height: 136px;width: 100%;}
         #page_footer > div {display: flex;align-items: center;justify-content: space-between;}
         #page_footer a {color:#5EA12D;text-decoration: none;}
 
@@ -176,7 +176,7 @@
                 </div>
                 <div class="page_meal_plan_item">
                     <div><img src="/images/personalization-icon.png" alt=""></div>
-                    <div class="page_meal_plan_item_text"><h3>Персонализация</h3><p>Общий план — муж/ребёнок/соседка по комнате знают, что готовить, без ваших объяснений</p></div>
+                    <div class="page_meal_plan_item_text"><h3>Персонализация</h3><p>Общий план — муж/ребёнок/соседка по комнате знают, что готовить, без ваших объяснений</p></div>
                 </div>
             </div>
         </div>
@@ -204,12 +204,12 @@
             </div>
             <div id="page_how_it_works_step_2">
                 <img src="/images/laugh-icon.png" class="step-image" alt="">
-                <p>Заменить ужин — пара кликов, <br>и рецепт встаёт в план <br>с новым списком покупок</p>
+                <p>Заменить ужин — пара кликов, <br>и рецепт встаёт в план <br>с новым списком покупок</p>
             </div>
             <div class="page_how_it_works_steps_arrow"><img src="/images/arrow-2.png" alt="" id="page_how_it_works_step_2_arrow"></div>
             <div id="page_how_it_works_step_3">
                 <img src="/images/broc_meal_plan.png" alt="">
-                <p>Из списка продуктов можно <br> сформировать автокорзину <br>на недостающие</p>
+                <p>Из списка продуктов можно <br> сформировать автокорзину <br>на недостающие</p>
             </div>
         </div>
         <div id="page_how_it_works_info">
@@ -227,18 +227,18 @@
             </div>
         </div>
     </div>
-</div>
-</div>
-<div id="page_footer">
-    <div class="container container_row">
-        <div>
-            <div id="bottom_logo"><img src="/images/logo.png" alt="">Хватило</div>
-            &copy; 2026 &mdash; <a href="mailto:info@hvatilo.ru">info@hvatilo.ru</a> <br>
-        </div>
-        <div>
-            <a href="https://hvatilo.ru/app/offer" target="_blank">Пользовательское соглашение</a>
+    <div id="page_footer">
+        <div class="container container_row">
+            <div>
+                <div id="bottom_logo"><img src="/images/logo.png" alt="">Хватило</div>
+                &copy; 2026 &mdash; <a href="mailto:info@hvatilo.ru">info@hvatilo.ru</a> <br>
+            </div>
+            <div>
+                <a href="https://hvatilo.ru/app/offer" target="_blank">Пользовательское соглашение</a>
+            </div>
         </div>
     </div>
 </div>
+</div>
 </body>
 </html>
\ No newline at end of file