style: refine website section spacing

website/app/globals.css

@@ -1004,6 +1004,12 @@ a {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
+.factory-section,
+.control-section,
+.deploy-section {
+  margin-block: 32px;
+}
+
 .workflow-panel {
   padding: 34px;
 }
@@ -1104,18 +1110,18 @@ a {
 
 .factory-section {
   display: grid;
-  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
-  gap: 24px;
+  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
+  gap: clamp(34px, 5vw, 72px);
   align-items: center;
-  padding: 34px;
+  padding: clamp(42px, 5vw, 66px);
 }
 
 .control-section {
   display: grid;
-  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
-  gap: 24px;
+  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
+  gap: clamp(36px, 5vw, 78px);
   align-items: center;
-  padding: 34px;
+  padding: clamp(42px, 5vw, 66px);
 }
 
 .control-panel {
@@ -1126,18 +1132,18 @@ a {
 .control-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
+  gap: 14px;
 }
 
 .control-grid > div {
-  min-height: 92px;
+  min-height: 108px;
   display: grid;
   align-content: center;
-  gap: 12px;
+  gap: 16px;
   border: 1px solid var(--line);
   border-radius: 22px;
   background: rgba(255, 255, 255, 0.03);
-  padding: 16px;
+  padding: 20px;
 }
 
 .control-grid span {
@@ -1156,7 +1162,8 @@ a {
 .module-strip {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 12px;
+  align-content: center;
 }
 
 .module-strip span {
@@ -1164,7 +1171,7 @@ a {
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.035);
   color: var(--muted);
-  padding: 11px 14px;
+  padding: 12px 16px;
   font-size: 13px;
   font-weight: 700;
 }
@@ -1172,9 +1179,9 @@ a {
 .deploy-section {
   display: grid;
   grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.72fr);
-  gap: 24px;
+  gap: clamp(34px, 5vw, 72px);
   align-items: end;
-  padding: 34px;
+  padding: clamp(42px, 5vw, 66px);
 }
 
 .deploy-stack {
@@ -1238,6 +1245,14 @@ a {
   .endpoint-grid {
     grid-template-columns: 1fr;
   }
+
+  .factory-section,
+  .control-section,
+  .deploy-section {
+    gap: 28px;
+    margin-block: 24px;
+    padding: 34px;
+  }
 }
 
 @media (max-width: 640px) {
@@ -1333,6 +1348,13 @@ a {
     border-radius: 26px;
   }
 
+  .factory-section,
+  .control-section,
+  .deploy-section {
+    gap: 22px;
+    margin-block: 18px;
+  }
+
   .mode-list div {
     grid-template-columns: 1fr;
     gap: 4px;