SEO Tweaks

src/lib/styles/sections.css

@@ -1,8 +1,17 @@
+/* Featured sections — more breathing room */
 #promise,
-#services,
+#services {
+  padding: 96px 0;
+}
+
+/* Supporting sections */
 #values,
 #testimonials,
-#info,
+#info {
+  padding: 72px 0;
+}
+
+/* Booking / lead form — neutral */
 #newlead {
   padding: 80px 0;
 }
@@ -15,6 +24,18 @@
   align-items: center;
   min-height: 500px;
   overflow: hidden;
+  position: relative;
+}
+
+/* Gradient blends the hero image's bottom edge into the green background */
+#hero::after {
+  content: '';
+  position: absolute;
+  inset: auto 0 0 42%;
+  height: 120px;
+  background: linear-gradient(to top, var(--gw-green) 0%, transparent 100%);
+  pointer-events: none;
+  z-index: 1;
 }
 
 .hero-inner {
@@ -337,6 +358,7 @@
   border-radius: 28px;
   padding: 40px 32px;
   text-align: center;
+  box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
   transition:
     transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
     box-shadow 0.22s ease;
@@ -356,7 +378,7 @@
 }
 
 .service-icon-bubble {
-  background: linear-gradient(180deg, #ffe173 0%, #ffd54a 100%);
+  background: linear-gradient(135deg, #ffd54a, var(--yellow-soft));
   transform: translateY(0) rotate(0deg) scale(1);
   transition:
     transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
@@ -365,8 +387,11 @@
 
 @media (hover: hover) {
   .service-card:hover {
-    transform: translateY(-6px) scale(1.012);
-    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+    box-shadow:
+      inset 0 0 0 1px rgba(17, 20, 24, 0.06),
+      0 8px 40px rgba(0, 0, 0, 0.08);
+    filter: brightness(1.02);
   }
 }
 
@@ -493,10 +518,12 @@ footer {
 }
 
 .testimonial-card {
-  background: #fff;
+  background: linear-gradient(180deg, #ffffff 0%, var(--off-white) 100%);
   border-radius: 28px;
   padding: 36px 32px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    inset 0 0 0 1px rgba(17, 20, 24, 0.06),
+    0 4px 24px rgba(0, 0, 0, 0.06);
   transition:
     transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
     box-shadow 0.22s ease;
@@ -504,8 +531,11 @@ footer {
 
 @media (hover: hover) {
   .testimonial-card:hover {
-    transform: translateY(-6px) scale(1.012);
-    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.09);
+    transform: translateY(-2px);
+    box-shadow:
+      inset 0 0 0 1px rgba(17, 20, 24, 0.06),
+      0 8px 40px rgba(0, 0, 0, 0.08);
+    filter: brightness(1.01);
   }
 }