diff --git a/index.html b/index.html
index d3e8a24..053a303 100644
--- a/index.html
+++ b/index.html
@@ -247,8 +247,83 @@
             </div>
         </section>
         
+        <!-- Process Section -->
+        <section id="process" class="section-padding section-alt">
+            <div class="container">
+                <h2>Our Brewing Process</h2>
+                <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3">
+                    <!-- Phase 1 -->
+                    <div class="col">
+                        <div class="process-card">
+                            <span class="process-number">01</span>
+                            <div class="process-icon-wrapper">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+                            </div>
+                            <h3 class="process-title">Discovery (The Roast)</h3>
+                            <p class="process-desc">We start by selecting the finest beans—gathering your requirements, understanding your goals, and defining the scope of the project.</p>
+                        </div>
+                    </div>
+                    <!-- Phase 2 -->
+                    <div class="col">
+                        <div class="process-card">
+                            <span class="process-number">02</span>
+                            <div class="process-icon-wrapper">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg>
+                            </div>
+                            <h3 class="process-title">Design (The Grind)</h3>
+                            <p class="process-desc">We prepare the perfect grind consistency. This involves creating wireframes, designing the UI/UX, and prototyping the visual experience.</p>
+                        </div>
+                    </div>
+                    <!-- Phase 3 -->
+                    <div class="col">
+                        <div class="process-card">
+                            <span class="process-number">03</span>
+                            <div class="process-icon-wrapper">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                            </div>
+                            <h3 class="process-title">Development (The Brew)</h3>
+                            <p class="process-desc">The magic happens here. We write clean, efficient code to bring the designs to life, ensuring everything functions perfectly.</p>
+                        </div>
+                    </div>
+                    <!-- Phase 4 -->
+                    <div class="col">
+                        <div class="process-card">
+                            <span class="process-number">04</span>
+                            <div class="process-icon-wrapper">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
+                            </div>
+                            <h3 class="process-title">Testing (The Taste Test)</h3>
+                            <p class="process-desc">Quality assurance is key. We rigorously test for bugs, performance issues, and responsiveness across all devices and browsers.</p>
+                        </div>
+                    </div>
+                    <!-- Phase 5 -->
+                    <div class="col">
+                        <div class="process-card">
+                            <span class="process-number">05</span>
+                            <div class="process-icon-wrapper">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
+                            </div>
+                            <h3 class="process-title">Launch (The Pour)</h3>
+                            <p class="process-desc">It's serving time. We handle the deployment, DNS settings, and final checks to ensure a smooth go-live experience.</p>
+                        </div>
+                    </div>
+                    <!-- Phase 6 -->
+                    <div class="col">
+                        <div class="process-card">
+                            <span class="process-number">06</span>
+                            <div class="process-icon-wrapper">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
+                            </div>
+                            <h3 class="process-title">Support (The Refill)</h3>
+                            <p class="process-desc">We don't just leave you with the cup. We offer ongoing maintenance, updates, and support to keep your site fresh.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
         <!-- Portfolio Section -->
-        <section id="portfolio" class="section-padding section-alt">
+        <section id="portfolio" class="section-padding">
             <div class="container">
                 <h2>Portfolio</h2>
                 <div class="row g-4">
@@ -376,7 +451,7 @@
         </section>
         
         <!-- Testimonials Section -->
-        <section id="testimonials" class="section-padding">
+        <section id="testimonials" class="section-padding section-alt">
             <div class="container">
                 <h2>Testimonials</h2>
                 <div class="row g-4">
@@ -408,7 +483,7 @@
         </section>
 
         <!-- Contact Section -->
-        <section id="contact" class="section-padding section-alt">
+        <section id="contact" class="section-padding">
             <div class="container">
                 <h2>Contact Us</h2>
                 <div class="row justify-content-center">
diff --git a/styles.css b/styles.css
index dc2ba20..a17cca6 100644
--- a/styles.css
+++ b/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 {