overhaul

src/pages/Home.css

@@ -4,9 +4,8 @@
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  min-height: 590px;
-  margin-top: 24px;
-  border-radius: 7px;
+  min-height: 768px;
+  margin-inline: calc(0px - var(--page-gutter));
   color: var(--paper);
   background: var(--ink);
 }
@@ -21,11 +20,14 @@
 .home-hero__shade {
   position: absolute;
   inset: 0;
-  background: #1419108f;
+  background:
+    linear-gradient(90deg, #132630e8 0%, #1f3239a8 54%, #17262f73 100%),
+    linear-gradient(0deg, #111b22b5 0%, transparent 45%);
 }
 .home-hero__content {
   position: relative;
   z-index: 1;
+  max-width: 900px;
   padding: 65px 62px 90px;
 }
 .home-hero__title {
@@ -51,8 +53,8 @@
 .home-hero__bottom {
   position: absolute;
   bottom: 0;
-  left: 32px;
-  right: 32px;
+  left: var(--page-gutter);
+  right: var(--page-gutter);
   display: flex;
   justify-content: space-between;
   gap: 20px;
@@ -128,6 +130,9 @@
   padding: 58px 0;
   border-bottom: 1px solid var(--line);
 }
+.process__item:nth-child(even) {
+  background: linear-gradient(90deg, transparent, #49667808, transparent);
+}
 .process__item:nth-child(even) .process__visual {
   order: -1;
 }
@@ -137,9 +142,12 @@
 }
 .process__verb {
   margin: 0 0 24px;
-  font-size: 14px;
+  font-family: var(--mono);
+  font-size: 11px;
   font-weight: 500;
-  color: var(--muted);
+  color: var(--industrial);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 .process__title {
   margin: 0 0 22px;
@@ -175,19 +183,18 @@
 }
 @media (max-width: 760px) {
   .home-hero {
-    margin-top: 18px;
     min-height: 560px;
   }
   .home-hero__content {
-    padding: 42px 26px 130px;
+    padding: 42px var(--page-gutter) 130px;
   }
   .home-hero__title {
     font-size: clamp(44px, 8.9vw, 68px);
     margin-top: 32px;
   }
   .home-hero__bottom {
-    left: 26px;
-    right: 26px;
+    left: var(--page-gutter);
+    right: var(--page-gutter);
     flex-direction: column;
     gap: 8px;
     padding: 15px 0;