feat(ui): add process and approach section with coffee-themed steps

styles.css

@@ -358,6 +358,74 @@ footer {
     line-height: 1.4;
 }
 
+/* Process Section */
+.process-card {
+    background-color: var(--bg-body); /* Contrast against section-alt */
+    border: 1px solid var(--border-subtle);
+    border-radius: 12px;
+    padding: 2rem;
+    height: 100%;
+    position: relative;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    z-index: 1;
+    overflow: hidden;
+}
+
+.section-alt .process-card {
+    background-color: var(--bg-surface);
+}
+
+.process-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-soft);
+    border-color: var(--color-secondary);
+}
+
+.process-number {
+    position: absolute;
+    top: -15px;
+    right: -10px;
+    font-size: 5rem;
+    font-weight: 900;
+    color: var(--color-coffee-medium);
+    opacity: 0.08;
+    line-height: 1;
+    z-index: 0;
+    font-family: var(--font-sans);
+}
+
+.process-icon-wrapper {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background-color: color-mix(in srgb, var(--color-primary), transparent 90%);
+    color: var(--color-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    position: relative;
+    z-index: 1;
+}
+
+.process-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    color: var(--text-body);
+    position: relative;
+    z-index: 1;
+}
+
+.process-desc {
+    font-size: 0.95rem;
+    color: var(--text-body);
+    opacity: 0.85;
+    margin-bottom: 0;
+    position: relative;
+    z-index: 1;
+}
+
 /* Animations */
 @keyframes fade-in-up {
     from {