Progress so far. Waarom Linux still looks very ugly so WIP

static/css/style.css

@@ -374,6 +374,11 @@ p {
     background: #f9fafb;
 }
 
+/* Brand-tinted light background for callouts and CTAs */
+.section--brand {
+    background: #f0fdf4;
+}
+
 .section--hero {
     padding: 4rem 0;
     min-height: 80vh;
@@ -415,9 +420,6 @@ p {
 }
 
 /* Legacy Section Classes - Cleaned Up */
-.benefits {
-    background: #fff;
-}
 
 .benefits h2 {
     text-align: center;
@@ -547,9 +549,6 @@ p {
 }
 
 /* Distributions Section */
-.distros {
-    background: #f9fafb;
-}
 
 .distros h2 {
     text-align: center;
@@ -675,9 +674,6 @@ p {
 }
 
 /* Services Section */
-.services {
-    background: #fff;
-}
 
 .services h2 {
     text-align: center;
@@ -691,11 +687,56 @@ p {
     gap: 2rem;
 }
 
-/* Linux Features Section */
-.linux-features {
-    background: #f9fafb;
+/* Steps grid: balanced layout 3/2/1 across breakpoints */
+.steps-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
 }
 
+@media (max-width: 1024px) {
+    .steps-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 640px) {
+    .steps-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Distro tiles */
+.distro-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+}
+
+.distro-tile {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 1.25rem;
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.distro-tile:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 20px rgba(5,150,105,0.12);
+}
+
+.distro-tile__img {
+    width: 72px;
+    height: 72px;
+    object-fit: contain;
+    margin-bottom: 0.75rem;
+}
+
+/* Linux Features Section */
+
 .linux-features h2 {
     text-align: center;
     margin-bottom: 1rem;
@@ -832,6 +873,15 @@ h2 a {
     color: inherit;
 }
 
+/* Ensure card titles with links look identical to non-linked titles */
+.card h3 a,
+.card h3 a:visited,
+.card h3 a:hover,
+.card h3 a:active {
+    text-decoration: none;
+    color: inherit;
+}
+
 /* Reusable link wrapper to make whole cards clickable */
 .card-link {
     text-decoration: none;
@@ -970,9 +1020,6 @@ h2 a {
     min-height: 120px;
 }
 
-.contact-cta {
-    background: #f0fdf4;
-}
 
 .contact-cta h2 {
     text-align: center;
@@ -986,6 +1033,60 @@ h2 a {
     gap: 2rem;
 }
 
+/* Pricing/Tarieven benefit cards */
+.cta-benefit {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 1.5rem;
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.cta-benefit:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 20px rgba(5,150,105,0.12);
+}
+
+.benefit-icon {
+    width: 56px;
+    height: 56px;
+    border-radius: 9999px;
+    background: #ecfdf5;
+    border: 2px solid #bbf7d0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 0.75rem auto;
+}
+
+.benefit-icon__glyph {
+    font-weight: 700;
+    color: #047857;
+    font-size: 1.25rem;
+    line-height: 1;
+}
+
+/* Collapsible disclaimer styles */
+details.disclaimer {
+    margin-top: 0.5rem;
+}
+
+details.disclaimer summary {
+    cursor: pointer;
+    color: #047857;
+    font-weight: 600;
+}
+
+details.disclaimer .disclaimer-body {
+    background: #f9fafb;
+    border-left: 4px solid #059669;
+    padding: 1rem 1rem 1rem 1.25rem;
+    border-radius: 6px;
+    margin-top: 0.75rem;
+}
+
 /* Footer */
 footer {
     background: #f9fafb;