feat(ui): add visual hierarchy styles, section separation, and enhanced typography

styles.css

@@ -17,6 +17,9 @@
     --border-subtle: color-mix(in srgb, var(--color-coffee-medium), transparent 85%);
     --shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-coffee-dark), transparent 90%);
     
+    /* Section Backgrounds */
+    --bg-section-alt: color-mix(in srgb, var(--color-coffee-medium), transparent 95%);
+    
     /* Typography */
     --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
     
@@ -35,6 +38,7 @@
         --bg-surface: color-mix(in srgb, var(--color-coffee-dark), black 20%);
         --border-subtle: color-mix(in srgb, var(--color-cream), transparent 85%);
         --shadow-soft: 0 4px 20px -2px black;
+        --bg-section-alt: color-mix(in srgb, var(--color-coffee-dark), white 5%);
         
         /* BS Overrides */
         --bs-body-bg: var(--bg-body);
@@ -80,11 +84,44 @@ h1 {
 }
 
 h2 {
-    font-size: clamp(1.75rem, 3vw, 2.5rem);
-    margin-top: 3rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 2px solid var(--color-secondary);
+    font-size: clamp(2rem, 4vw, 2.75rem);
+    margin-bottom: 3rem;
+    padding-bottom: 1rem;
+    position: relative;
     display: inline-block;
+    border-bottom: none;
+}
+
+h2::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 60px;
+    height: 4px;
+    background: var(--color-secondary);
+    border-radius: 2px;
+    transition: width 0.3s ease;
+}
+
+section:hover h2::after {
+    width: 100%;
+}
+
+/* Sections */
+section {
+    position: relative;
+    width: 100%;
+}
+
+.section-alt {
+    background-color: var(--bg-section-alt);
+    border-top: 1px solid var(--border-subtle);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.section-padding {
+    padding-block: clamp(4rem, 8vw, 6rem);
 }
 
 /* Header/Hero Section */