layout

public/assets/css/main.css

@@ -234,18 +234,42 @@ body {
 
 /* Hero */
 
-.hero {
+.hero-section {
+  position: relative;
   padding-top: 5rem;
   padding-bottom: 4rem;
-  background: radial-gradient(circle at top left, rgba(58, 111, 248, 0.2), transparent 55%),
-              radial-gradient(circle at bottom right, rgba(255, 215, 166, 0.25), transparent 60%);
+  background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 55%, #e7f0ff 100%);
 }
 
-.hero-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
-  gap: 3rem;
-  align-items: center;
+.hero-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at top left, rgba(58, 111, 248, 0.14), transparent 55%),
+              radial-gradient(circle at bottom right, rgba(255, 215, 166, 0.25), transparent 60%);
+  pointer-events: none;
+}
+
+.hero-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+@media (min-width: 1024px) {
+  .hero-shell {
+    flex-direction: row;
+    gap: 2.5rem;
+  }
+}
+
+.hero-copy {
+  flex: 1;
+}
+
+.hero-preview {
+  flex: 1;
+  max-width: 480px;
 }
 
 .hero-kicker {
@@ -301,58 +325,6 @@ body {
   gap: 1.5rem;
 }
 
-.hero-card {
-  background: linear-gradient(160deg, #ffffff 0%, #f1f5ff 80%);
-  border-radius: 28px;
-  padding: 1.6rem 1.8rem;
-  box-shadow: var(--shadow-soft);
-  border: 1px solid rgba(58, 111, 248, 0.15);
-}
-
-.hero-logo {
-  width: 180px;
-  max-width: 100%;
-  margin-bottom: 0.75rem;
-}
-
-.hero-card-title {
-  font-family: 'Montserrat', system-ui, sans-serif;
-  font-weight: 600;
-  margin: 0 0 1rem;
-  font-size: 1rem;
-}
-
-.hero-metrics {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.9rem;
-  margin-bottom: 1.25rem;
-}
-
-.metric-label {
-  display: block;
-  font-size: 0.8rem;
-  color: #5f6b85;
-}
-
-.metric-value {
-  font-family: 'Montserrat', system-ui, sans-serif;
-  font-weight: 700;
-  font-size: 1.1rem;
-  color: var(--deep-gray);
-}
-
-.hero-small {
-  font-size: 0.78rem;
-  color: #6c7695;
-}
-
-.hero-stick img {
-  width: 200px;
-  max-width: 100%;
-  filter: drop-shadow(0 12px 28px rgba(58, 111, 248, 0.25));
-}
-
 /* Quick test visual */
 
 .quick-preview-card {
@@ -569,6 +541,18 @@ body {
   background: linear-gradient(140deg, #fbfcff 0%, #f2f6ff 100%);
 }
 
+.section-band {
+  position: relative;
+}
+
+.section-band--soft {
+  background: linear-gradient(180deg, #edf3ff 0%, #f9fbff 100%);
+}
+
+.section-band--reverse {
+  background: linear-gradient(180deg, #f9fbff 0%, #edf3ff 100%);
+}
+
 /* Steps / Features / Pricing */
 
 .steps-grid,