Add hero and CTA section styles

Add responsive hero section with background image and centered text
Include CTA section with gradient background and centered content

content/styles.css

@@ -0,0 +1,43 @@
+.hero {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 1rem 0.4rem;
+    /*background-color: #cecece;*/
+    background-image: url(hero-bg.webp);
+    background-size: cover;
+    background-position: 30% 80%;
+    min-height: 40vh;
+    text-wrap: balance;
+    .textbox {
+        max-width: 42rem;
+        margin: 0 auto;
+        h1 {
+            background-color: white;
+            width: clamp(75%, 60vw, 80%);
+            display: inline;
+            font-size: clamp(2.2rem, 6vw, 3rem);
+            padding: 0 0.5rem;
+            line-height: 1.5;
+            box-decoration-break: clone;
+            -webkit-box-decoration-break: clone;
+        }
+    }
+}
+
+.cta-section {
+    background: linear-gradient(135deg, var(--color-green), var(--color-blue));
+    padding: 1rem 1rem 2rem 1rem;
+    margin-top: 3rem;
+    text-align: center;
+
+    .cta-content {
+        margin: 0 auto;
+
+        p {
+            color: white;
+            font-size: clamp(1.1rem, 3vw, 1.3rem);
+            line-height: 1.5;
+        }
+    }
+}