From 0b6f30a83e4ac67e5319a3852f5b07e86b2f51d2 Mon Sep 17 00:00:00 2001
From: Lars Gebhardt-Kusche <lars@kusche.berlin>
Date: Mon, 24 Nov 2025 00:26:43 +0100
Subject: [PATCH] layout

---
 partials/landing/main/faq.php      |   2 +-
 partials/landing/main/features.php |   2 +-
 partials/landing/main/hero.php     |  12 ++--
 partials/landing/main/how.php      |   2 +-
 partials/landing/main/problem.php  |   2 +-
 partials/landing/main/security.php |   2 +-
 public/assets/css/main.css         | 104 ++++++++++++-----------------
 7 files changed, 55 insertions(+), 71 deletions(-)

diff --git a/partials/landing/main/faq.php b/partials/landing/main/faq.php
index 7ce8c97..426d4be 100644
--- a/partials/landing/main/faq.php
+++ b/partials/landing/main/faq.php
@@ -1,4 +1,4 @@
-<section id="faq" class="border-t border-brand-border/60 bg-brand-primarySoft/10 py-16 sm:py-20">
+<section id="faq" class="section-band section-band--soft border-t border-brand-border/60 py-16 sm:py-20">
     <div class="px-4 sm:px-6 lg:px-8">
         <div class="section-shell space-y-10">
         <div class="max-w-3xl space-y-4">
diff --git a/partials/landing/main/features.php b/partials/landing/main/features.php
index 121f01a..c89fdcd 100644
--- a/partials/landing/main/features.php
+++ b/partials/landing/main/features.php
@@ -1,4 +1,4 @@
-<section id="features" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
+<section id="features" class="section-band section-band--soft border-t border-brand-border/60 py-16 sm:py-20">
     <div class="px-4 sm:px-6 lg:px-8">
         <div class="section-shell space-y-10">
         <div class="max-w-3xl space-y-4">
diff --git a/partials/landing/main/hero.php b/partials/landing/main/hero.php
index dffa0e0..47767a4 100644
--- a/partials/landing/main/hero.php
+++ b/partials/landing/main/hero.php
@@ -1,9 +1,8 @@
-<section id="hero" class="relative overflow-hidden">
-    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(58,111,248,0.18),_transparent_55%),radial-gradient(circle_at_bottom,_rgba(255,183,134,0.35),_transparent_60%)] pointer-events-none"></div>
-
-    <div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24 flex flex-col lg:flex-row gap-10 items-center">
+<section id="hero" class="hero-section relative overflow-hidden">
+    <div class="relative px-4 sm:px-6 lg:px-8">
+        <div class="section-shell hero-shell items-center">
         <!-- Left: Text -->
-        <div class="flex-1 space-y-7">
+        <div class="hero-copy space-y-7">
             <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="hero_kicker">
                 Detect fake USB sticks before you lose data
             </p>
@@ -50,7 +49,7 @@
         </div>
 
         <!-- Right: Card (Teaser Quickcheck) -->
-        <div class="flex-1 w-full max-w-xl">
+        <div class="hero-preview w-full">
             <div class="quick-preview-card space-y-6">
                 <div class="quick-preview-header">
                     <div>
@@ -117,5 +116,6 @@
                 </a>
             </div>
         </div>
+        </div>
     </div>
 </section>
diff --git a/partials/landing/main/how.php b/partials/landing/main/how.php
index 75e7da4..5e3e66b 100644
--- a/partials/landing/main/how.php
+++ b/partials/landing/main/how.php
@@ -1,4 +1,4 @@
-<section id="how" class="border-t border-brand-border/60 bg-brand-primarySoft/30 py-16 sm:py-20">
+<section id="how" class="section-band section-band--soft border-t border-brand-border/60 py-16 sm:py-20">
     <div class="px-4 sm:px-6 lg:px-8">
         <div class="section-shell grid gap-10 lg:grid-cols-[1.2fr,1fr]">
             <div class="space-y-6">
diff --git a/partials/landing/main/problem.php b/partials/landing/main/problem.php
index 0463cfe..76e2269 100644
--- a/partials/landing/main/problem.php
+++ b/partials/landing/main/problem.php
@@ -1,4 +1,4 @@
-<section id="problem" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
+<section id="problem" class="section-band section-band--reverse border-t border-brand-border/60 py-16 sm:py-20">
     <div class="px-4 sm:px-6 lg:px-8">
         <div class="section-shell space-y-8">
         <div class="max-w-3xl space-y-4">
diff --git a/partials/landing/main/security.php b/partials/landing/main/security.php
index ff4202a..c4f05bd 100644
--- a/partials/landing/main/security.php
+++ b/partials/landing/main/security.php
@@ -1,4 +1,4 @@
-<section id="security" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
+<section id="security" class="section-band section-band--reverse border-t border-brand-border/60 py-16 sm:py-20">
     <div class="px-4 sm:px-6 lg:px-8">
         <div class="section-shell space-y-8">
         <div class="max-w-3xl space-y-4">
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index e55955a..5bf8ffc 100644
--- a/public/assets/css/main.css
+++ b/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,