diff --git a/README.md b/README.md
index ce9bcce..64f929c 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,9 @@ This is a modern, responsive website prototype featuring:
 
 ## Files
 
-- `index.html` - Main website file
+- `index.html` - Main HTML structure
+- `css/styles.css` - All styles and responsive design
+- `js/main.js` - Tab switching, mobile menu, and smooth scroll
 - `radiance-wellness-analysis.md` - Comprehensive design analysis
 - `prototype-guide.md` - Technical implementation guide
 
@@ -72,7 +74,7 @@ python -m http.server 8000
 ## Performance
 
 - Minimal dependencies (only Google Fonts)
-- Self-contained single-file design
+- Separate CSS and JS files for better caching
 - Mobile-optimized
 
 ## Future Enhancements
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..cafc977
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,833 @@
+/* ===== CSS VARIABLES ===== */
+:root {
+    /* Brand Colors */
+    --primary-dark: #3e2d24;
+    --secondary-taupe: #73634e;
+    --accent-beige: #dcb89e;
+    --accent-gold: #d4a574;
+    --accent-sage: #9ca986;
+    --success-green: #7a9b76;
+
+    /* Backgrounds */
+    --bg-cream: #faf8f5;
+    --bg-white: #ffffff;
+    --bg-light: #f8f5f1;
+
+    /* Text */
+    --text-dark: #2a1f19;
+    --text-mid: #5c4d42;
+    --text-light: #73634e;
+
+    /* Typography */
+    --font-heading: 'Alegreya', serif;
+    --font-body: 'Montserrat', sans-serif;
+
+    /* Spacing */
+    --spacing-xs: 0.5rem;
+    --spacing-sm: 1rem;
+    --spacing-md: 2rem;
+    --spacing-lg: 4rem;
+    --spacing-xl: 6rem;
+
+    /* Borders */
+    --border-radius: 8px;
+    --border-radius-lg: 16px;
+}
+
+/* ===== RESET & BASE STYLES ===== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--font-body);
+    color: var(--text-dark);
+    background-color: var(--bg-cream);
+    line-height: 1.6;
+    font-size: 16px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+    font-weight: 500;
+    line-height: 1.2;
+    margin-bottom: var(--spacing-sm);
+}
+
+h1 { font-size: 3.2em; }
+h2 { font-size: 2.4em; }
+h3 { font-size: 1.8em; }
+
+p {
+    margin-bottom: var(--spacing-sm);
+    color: var(--text-mid);
+}
+
+a {
+    color: var(--primary-dark);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: var(--accent-gold);
+}
+
+a:focus-visible,
+.btn:focus-visible,
+.tab-btn:focus-visible,
+button:focus-visible {
+    outline: 3px solid var(--accent-gold);
+    outline-offset: 2px;
+}
+
+/* Skip to content link */
+.skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: var(--primary-dark);
+    color: var(--bg-white);
+    padding: 8px 16px;
+    z-index: 9999;
+    transition: top 0.3s;
+    text-decoration: none;
+}
+
+.skip-link:focus {
+    top: 0;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* ===== UTILITY CLASSES ===== */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-md);
+}
+
+.section {
+    padding: var(--spacing-xl) 0;
+}
+
+.section-title {
+    text-align: center;
+    margin-bottom: var(--spacing-lg);
+    color: var(--primary-dark);
+}
+
+.section-subtitle {
+    text-align: center;
+    color: var(--text-light);
+    font-size: 1.1em;
+    margin-top: -1rem;
+    margin-bottom: var(--spacing-lg);
+}
+
+.btn {
+    display: inline-block;
+    padding: 1rem 2rem;
+    border-radius: var(--border-radius);
+    font-weight: 600;
+    font-family: var(--font-body);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border: none;
+    font-size: 0.9em;
+}
+
+.btn-primary {
+    background-color: var(--accent-gold);
+    color: var(--bg-white);
+    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
+}
+
+.btn-primary:hover {
+    background-color: #c69663;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(212, 165, 116, 0.4);
+}
+
+.btn-secondary {
+    background-color: transparent;
+    color: var(--primary-dark);
+    border: 2px solid var(--primary-dark);
+}
+
+.btn-secondary:hover {
+    background-color: var(--primary-dark);
+    color: var(--bg-white);
+}
+
+/* ===== HEADER (STICKY NAVIGATION) ===== */
+.header {
+    position: sticky;
+    top: 0;
+    background-color: var(--bg-white);
+    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+    z-index: 1000;
+    padding: 1rem 0;
+}
+
+.nav-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-family: var(--font-heading);
+    font-size: 1.8em;
+    font-weight: 700;
+    color: var(--primary-dark);
+}
+
+.nav-menu {
+    display: flex;
+    gap: var(--spacing-md);
+    align-items: center;
+    list-style: none;
+}
+
+.nav-link {
+    font-weight: 500;
+    font-size: 0.95em;
+    transition: color 0.3s ease;
+}
+
+.nav-link:hover {
+    color: var(--accent-sage);
+}
+
+.mobile-menu-toggle {
+    display: none;
+    flex-direction: column;
+    gap: 4px;
+    cursor: pointer;
+}
+
+.mobile-menu-toggle span {
+    width: 25px;
+    height: 3px;
+    background-color: var(--primary-dark);
+    transition: all 0.3s ease;
+}
+
+.header-cta {
+    display: flex;
+    gap: var(--spacing-sm);
+    align-items: center;
+}
+
+.phone-number {
+    font-weight: 600;
+    color: var(--primary-dark);
+    margin-right: var(--spacing-sm);
+}
+
+/* ===== HERO SECTION ===== */
+.hero {
+    position: relative;
+    height: 100vh;
+    min-height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: var(--bg-white);
+    overflow: hidden;
+}
+
+.hero-video-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -2;
+    background: linear-gradient(135deg, #9ca986, #dcb89e);
+}
+
+.hero-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(62, 45, 36, 0.7), rgba(156, 169, 134, 0.5));
+    z-index: -1;
+}
+
+.hero-content {
+    max-width: 800px;
+    padding: var(--spacing-md);
+    animation: fadeInUp 1s ease-out;
+}
+
+.hero h1 {
+    font-size: 3.5em;
+    margin-bottom: var(--spacing-md);
+    text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
+}
+
+.hero-subtitle {
+    font-size: 1.3em;
+    margin-bottom: var(--spacing-lg);
+    font-weight: 300;
+    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
+}
+
+.hero-cta-group {
+    display: flex;
+    gap: var(--spacing-sm);
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ===== TRUST BAR ===== */
+.trust-bar {
+    background-color: var(--bg-white);
+    padding: var(--spacing-md) 0;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+}
+
+.trust-items {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-md);
+}
+
+.trust-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    color: var(--text-mid);
+    font-weight: 500;
+}
+
+.trust-icon {
+    font-size: 1.5em;
+    color: var(--accent-sage);
+}
+
+/* ===== TESTIMONIALS SECTION ===== */
+.testimonials-section {
+    background-color: var(--bg-light);
+}
+
+.testimonials-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+}
+
+.testimonial-card {
+    background-color: var(--bg-white);
+    padding: var(--spacing-md);
+    border-radius: var(--border-radius-lg);
+    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.testimonial-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+}
+
+.testimonial-stars {
+    color: #fbbf24;
+    font-size: 1.1em;
+    margin-bottom: var(--spacing-xs);
+    letter-spacing: 2px;
+}
+
+.testimonial-text {
+    color: var(--text-mid);
+    line-height: 1.6;
+    margin-bottom: var(--spacing-sm);
+    font-style: italic;
+}
+
+.testimonial-author {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding-top: var(--spacing-sm);
+    border-top: 1px solid var(--accent-beige);
+}
+
+.author-photo {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--accent-sage), var(--accent-gold));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: var(--bg-white);
+}
+
+.author-info {
+    flex: 1;
+}
+
+.author-name {
+    font-weight: 600;
+    color: var(--primary-dark);
+    margin-bottom: 2px;
+}
+
+.author-location {
+    font-size: 0.85em;
+    color: var(--text-light);
+}
+
+/* ===== HOLISTIC APPROACH SECTION ===== */
+.holistic-section {
+    background-color: var(--bg-white);
+}
+
+.holistic-diagram {
+    max-width: 600px;
+    margin: 0 auto var(--spacing-lg);
+    position: relative;
+}
+
+.circle-container {
+    position: relative;
+    width: 400px;
+    height: 400px;
+    margin: 0 auto;
+}
+
+.center-circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 160px;
+    height: 160px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--accent-sage), var(--accent-gold));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--bg-white);
+    font-weight: 700;
+    font-size: 1.2em;
+    text-align: center;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+    z-index: 2;
+}
+
+.pillar {
+    position: absolute;
+    width: 140px;
+    padding: var(--spacing-sm);
+    background-color: var(--bg-cream);
+    border-radius: var(--border-radius);
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.pillar:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+}
+
+.pillar-icon {
+    font-size: 2em;
+    margin-bottom: var(--spacing-xs);
+}
+
+.pillar-title {
+    font-weight: 700;
+    color: var(--primary-dark);
+    margin-bottom: 4px;
+}
+
+.pillar-text {
+    font-size: 0.85em;
+    color: var(--text-mid);
+}
+
+.pillar-mind {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.pillar-body {
+    bottom: 0;
+    left: 0;
+}
+
+.pillar-spirit {
+    bottom: 0;
+    right: 0;
+}
+
+/* ===== SERVICES BY GOAL ===== */
+.services-section {
+    background-color: var(--bg-cream);
+}
+
+.service-tabs {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-lg);
+    flex-wrap: wrap;
+}
+
+.tab-btn {
+    padding: 1rem 2rem;
+    background-color: var(--bg-white);
+    border: 2px solid var(--accent-beige);
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 600;
+    color: var(--text-mid);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+}
+
+.tab-btn.active {
+    background-color: var(--accent-sage);
+    border-color: var(--accent-sage);
+    color: var(--bg-white);
+}
+
+.tab-btn:hover:not(.active) {
+    border-color: var(--accent-gold);
+}
+
+.tab-icon {
+    font-size: 1.5em;
+}
+
+.tab-label {
+    font-size: 0.9em;
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--spacing-md);
+}
+
+.service-card {
+    background-color: var(--bg-white);
+    border-radius: var(--border-radius-lg);
+    overflow: hidden;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.service-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+}
+
+.service-image {
+    width: 100%;
+    height: 200px;
+    background: linear-gradient(135deg, var(--accent-beige), var(--accent-sage));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3em;
+}
+
+.service-content {
+    padding: var(--spacing-md);
+}
+
+.service-title {
+    font-size: 1.4em;
+    margin-bottom: var(--spacing-xs);
+    color: var(--primary-dark);
+}
+
+.service-benefits {
+    list-style: none;
+    margin-bottom: var(--spacing-sm);
+}
+
+.service-benefits li {
+    padding-left: 1.5rem;
+    position: relative;
+    margin-bottom: var(--spacing-xs);
+    color: var(--text-mid);
+}
+
+.service-benefits li::before {
+    content: "✓";
+    position: absolute;
+    left: 0;
+    color: var(--success-green);
+    font-weight: 700;
+}
+
+.service-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: var(--spacing-sm);
+    border-top: 1px solid var(--accent-beige);
+}
+
+.service-duration {
+    color: var(--text-light);
+    font-size: 0.9em;
+}
+
+.service-price {
+    font-size: 1.3em;
+    font-weight: 700;
+    color: var(--accent-gold);
+}
+
+/* ===== TEAM SECTION ===== */
+.team-section {
+    background-color: var(--bg-white);
+}
+
+.team-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-md);
+}
+
+.team-member {
+    text-align: center;
+    padding: var(--spacing-md);
+    background-color: var(--bg-cream);
+    border-radius: var(--border-radius-lg);
+    transition: transform 0.3s ease;
+}
+
+.team-member:hover {
+    transform: translateY(-4px);
+}
+
+.member-photo {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    margin: 0 auto var(--spacing-sm);
+    background: linear-gradient(135deg, var(--accent-gold), var(--accent-sage));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3em;
+    color: var(--bg-white);
+}
+
+.member-name {
+    font-size: 1.3em;
+    color: var(--primary-dark);
+    margin-bottom: 4px;
+}
+
+.member-title {
+    color: var(--accent-gold);
+    font-weight: 600;
+    margin-bottom: var(--spacing-xs);
+}
+
+.member-credentials {
+    font-size: 0.85em;
+    color: var(--text-light);
+    margin-bottom: var(--spacing-sm);
+}
+
+.member-specialties {
+    font-size: 0.9em;
+    color: var(--text-mid);
+}
+
+/* ===== FINAL CTA SECTION ===== */
+.final-cta {
+    background: linear-gradient(135deg, var(--accent-sage), var(--accent-gold));
+    color: var(--bg-white);
+    text-align: center;
+    padding: var(--spacing-xl) 0;
+}
+
+.final-cta h2 {
+    color: var(--bg-white);
+    font-size: 2.5em;
+    margin-bottom: var(--spacing-sm);
+}
+
+.final-cta p {
+    color: var(--bg-white);
+    font-size: 1.2em;
+    margin-bottom: var(--spacing-lg);
+    opacity: 0.95;
+}
+
+.btn-white {
+    background-color: var(--bg-white);
+    color: var(--primary-dark);
+    font-size: 1.1em;
+    padding: 1.2rem 3rem;
+}
+
+.btn-white:hover {
+    background-color: var(--bg-cream);
+    transform: translateY(-2px);
+}
+
+/* ===== FOOTER ===== */
+.footer {
+    background-color: var(--primary-dark);
+    color: var(--bg-cream);
+    padding: var(--spacing-lg) 0 var(--spacing-md);
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-md);
+}
+
+.footer-section h3 {
+    color: var(--accent-gold);
+    margin-bottom: var(--spacing-sm);
+}
+
+.footer-section p,
+.footer-section a {
+    color: var(--bg-cream);
+    margin-bottom: var(--spacing-xs);
+}
+
+.footer-section a:hover {
+    color: var(--accent-gold);
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: var(--spacing-md);
+    border-top: 1px solid rgba(255,255,255,0.1);
+    color: var(--accent-beige);
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+@media (max-width: 768px) {
+    .nav-menu {
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: var(--bg-white);
+        padding: var(--spacing-md);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        z-index: 999;
+    }
+
+    .nav-menu.active {
+        display: flex;
+    }
+
+    .mobile-menu-toggle {
+        display: flex;
+    }
+
+    .hero h1 {
+        font-size: 2.5em;
+    }
+
+    .trust-items {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .review-card {
+        min-width: 280px;
+    }
+
+    .circle-container {
+        width: 300px;
+        height: 300px;
+    }
+
+    .center-circle {
+        width: 120px;
+        height: 120px;
+        font-size: 1em;
+    }
+
+    .pillar {
+        width: 100px;
+        font-size: 0.85em;
+    }
+
+    .service-tabs {
+        flex-direction: column;
+    }
+
+    .tab-btn {
+        width: 100%;
+    }
+}
+
+/* ===== UTILITY ADDITIONS ===== */
+
+/* Full-width block button (used for service card CTAs) */
+.btn-block {
+    margin-top: 1rem;
+    width: 100%;
+    display: block;
+    text-align: center;
+}
+
+/* Holistic section description */
+.holistic-description {
+    text-align: center;
+    margin-top: 3rem;
+}
+
+.holistic-description-text {
+    max-width: 700px;
+    margin: 0 auto;
+    font-size: 1.1em;
+}
diff --git a/index.html b/index.html
index 02f9672..32926dd 100644
--- a/index.html
+++ b/index.html
@@ -15,818 +15,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
-    <style>
-        /* ===== CSS VARIABLES ===== */
-        :root {
-            /* Brand Colors */
-            --primary-dark: #3e2d24;
-            --secondary-taupe: #73634e;
-            --accent-beige: #dcb89e;
-            --accent-gold: #d4a574;
-            --accent-sage: #9ca986;
-            --success-green: #7a9b76;
-
-            /* Backgrounds */
-            --bg-cream: #faf8f5;
-            --bg-white: #ffffff;
-            --bg-light: #f8f5f1;
-
-            /* Text */
-            --text-dark: #2a1f19;
-            --text-mid: #5c4d42;
-            --text-light: #73634e;
-
-            /* Typography */
-            --font-heading: 'Alegreya', serif;
-            --font-body: 'Montserrat', sans-serif;
-
-            /* Spacing */
-            --spacing-xs: 0.5rem;
-            --spacing-sm: 1rem;
-            --spacing-md: 2rem;
-            --spacing-lg: 4rem;
-            --spacing-xl: 6rem;
-
-            /* Borders */
-            --border-radius: 8px;
-            --border-radius-lg: 16px;
-        }
-
-        /* ===== RESET & BASE STYLES ===== */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: var(--font-body);
-            color: var(--text-dark);
-            background-color: var(--bg-cream);
-            line-height: 1.6;
-            font-size: 16px;
-        }
-
-        h1, h2, h3, h4, h5, h6 {
-            font-family: var(--font-heading);
-            font-weight: 500;
-            line-height: 1.2;
-            margin-bottom: var(--spacing-sm);
-        }
-
-        h1 { font-size: 3.2em; }
-        h2 { font-size: 2.4em; }
-        h3 { font-size: 1.8em; }
-
-        p {
-            margin-bottom: var(--spacing-sm);
-            color: var(--text-mid);
-        }
-
-        a {
-            color: var(--primary-dark);
-            text-decoration: none;
-            transition: color 0.3s ease;
-        }
-
-        a:hover {
-            color: var(--accent-gold);
-        }
-
-        a:focus-visible,
-        .btn:focus-visible,
-        .tab-btn:focus-visible,
-        button:focus-visible {
-            outline: 3px solid var(--accent-gold);
-            outline-offset: 2px;
-        }
-
-        /* Skip to content link */
-        .skip-link {
-            position: absolute;
-            top: -40px;
-            left: 0;
-            background: var(--primary-dark);
-            color: var(--bg-white);
-            padding: 8px 16px;
-            z-index: 9999;
-            transition: top 0.3s;
-            text-decoration: none;
-        }
-
-        .skip-link:focus {
-            top: 0;
-        }
-
-        img {
-            max-width: 100%;
-            height: auto;
-            display: block;
-        }
-
-        /* ===== UTILITY CLASSES ===== */
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 var(--spacing-md);
-        }
-
-        .section {
-            padding: var(--spacing-xl) 0;
-        }
-
-        .section-title {
-            text-align: center;
-            margin-bottom: var(--spacing-lg);
-            color: var(--primary-dark);
-        }
-
-        .section-subtitle {
-            text-align: center;
-            color: var(--text-light);
-            font-size: 1.1em;
-            margin-top: -1rem;
-            margin-bottom: var(--spacing-lg);
-        }
-
-        .btn {
-            display: inline-block;
-            padding: 1rem 2rem;
-            border-radius: var(--border-radius);
-            font-weight: 600;
-            font-family: var(--font-body);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border: none;
-            font-size: 0.9em;
-        }
-
-        .btn-primary {
-            background-color: var(--accent-gold);
-            color: var(--bg-white);
-            box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
-        }
-
-        .btn-primary:hover {
-            background-color: #c69663;
-            transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(212, 165, 116, 0.4);
-        }
-
-        .btn-secondary {
-            background-color: transparent;
-            color: var(--primary-dark);
-            border: 2px solid var(--primary-dark);
-        }
-
-        .btn-secondary:hover {
-            background-color: var(--primary-dark);
-            color: var(--bg-white);
-        }
-
-        /* ===== HEADER (STICKY NAVIGATION) ===== */
-        .header {
-            position: sticky;
-            top: 0;
-            background-color: var(--bg-white);
-            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-            z-index: 1000;
-            padding: 1rem 0;
-        }
-
-        .nav-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .logo {
-            font-family: var(--font-heading);
-            font-size: 1.8em;
-            font-weight: 700;
-            color: var(--primary-dark);
-        }
-
-        .nav-menu {
-            display: flex;
-            gap: var(--spacing-md);
-            align-items: center;
-            list-style: none;
-        }
-
-        .nav-link {
-            font-weight: 500;
-            font-size: 0.95em;
-            transition: color 0.3s ease;
-        }
-
-        .nav-link:hover {
-            color: var(--accent-sage);
-        }
-
-        .mobile-menu-toggle {
-            display: none;
-            flex-direction: column;
-            gap: 4px;
-            cursor: pointer;
-        }
-
-        .mobile-menu-toggle span {
-            width: 25px;
-            height: 3px;
-            background-color: var(--primary-dark);
-            transition: all 0.3s ease;
-        }
-
-        .header-cta {
-            display: flex;
-            gap: var(--spacing-sm);
-            align-items: center;
-        }
-
-        .phone-number {
-            font-weight: 600;
-            color: var(--primary-dark);
-            margin-right: var(--spacing-sm);
-        }
-
-        /* ===== HERO SECTION ===== */
-        .hero {
-            position: relative;
-            height: 100vh;
-            min-height: 600px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            color: var(--bg-white);
-            overflow: hidden;
-        }
-
-        .hero-video-bg {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            z-index: -2;
-        }
-
-        .hero-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, rgba(62, 45, 36, 0.7), rgba(156, 169, 134, 0.5));
-            z-index: -1;
-        }
-
-        .hero-content {
-            max-width: 800px;
-            padding: var(--spacing-md);
-            animation: fadeInUp 1s ease-out;
-        }
-
-        .hero h1 {
-            font-size: 3.5em;
-            margin-bottom: var(--spacing-md);
-            text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
-        }
-
-        .hero-subtitle {
-            font-size: 1.3em;
-            margin-bottom: var(--spacing-lg);
-            font-weight: 300;
-            text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-        }
-
-        .hero-cta-group {
-            display: flex;
-            gap: var(--spacing-sm);
-            justify-content: center;
-            flex-wrap: wrap;
-        }
-
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* ===== TRUST BAR ===== */
-        .trust-bar {
-            background-color: var(--bg-white);
-            padding: var(--spacing-md) 0;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-        }
-
-        .trust-items {
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: var(--spacing-md);
-        }
-
-        .trust-item {
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-xs);
-            color: var(--text-mid);
-            font-weight: 500;
-        }
-
-        .trust-icon {
-            font-size: 1.5em;
-            color: var(--accent-sage);
-        }
-
-        /* ===== TESTIMONIALS SECTION ===== */
-        .testimonials-section {
-            background-color: var(--bg-light);
-        }
-
-        .testimonials-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: var(--spacing-md);
-            margin-bottom: var(--spacing-md);
-        }
-
-        .testimonial-card {
-            background-color: var(--bg-white);
-            padding: var(--spacing-md);
-            border-radius: var(--border-radius-lg);
-            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
-
-        .testimonial-card:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
-        }
-
-        .testimonial-stars {
-            color: #fbbf24;
-            font-size: 1.1em;
-            margin-bottom: var(--spacing-xs);
-            letter-spacing: 2px;
-        }
-
-        .testimonial-text {
-            color: var(--text-mid);
-            line-height: 1.6;
-            margin-bottom: var(--spacing-sm);
-            font-style: italic;
-        }
-
-        .testimonial-author {
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-sm);
-            padding-top: var(--spacing-sm);
-            border-top: 1px solid var(--accent-beige);
-        }
-
-        .author-photo {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--accent-sage), var(--accent-gold));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 700;
-            color: var(--bg-white);
-        }
-
-        .author-info {
-            flex: 1;
-        }
-
-        .author-name {
-            font-weight: 600;
-            color: var(--primary-dark);
-            margin-bottom: 2px;
-        }
-
-        .author-location {
-            font-size: 0.85em;
-            color: var(--text-light);
-        }
-
-        /* ===== HOLISTIC APPROACH SECTION ===== */
-        .holistic-section {
-            background-color: var(--bg-white);
-        }
-
-        .holistic-diagram {
-            max-width: 600px;
-            margin: 0 auto var(--spacing-lg);
-            position: relative;
-        }
-
-        .circle-container {
-            position: relative;
-            width: 400px;
-            height: 400px;
-            margin: 0 auto;
-        }
-
-        .center-circle {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 160px;
-            height: 160px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--accent-sage), var(--accent-gold));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--bg-white);
-            font-weight: 700;
-            font-size: 1.2em;
-            text-align: center;
-            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
-            z-index: 2;
-        }
-
-        .pillar {
-            position: absolute;
-            width: 140px;
-            padding: var(--spacing-sm);
-            background-color: var(--bg-cream);
-            border-radius: var(--border-radius);
-            text-align: center;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
-
-        .pillar:hover {
-            transform: scale(1.05);
-            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
-        }
-
-        .pillar-icon {
-            font-size: 2em;
-            margin-bottom: var(--spacing-xs);
-        }
-
-        .pillar-title {
-            font-weight: 700;
-            color: var(--primary-dark);
-            margin-bottom: 4px;
-        }
-
-        .pillar-text {
-            font-size: 0.85em;
-            color: var(--text-mid);
-        }
-
-        .pillar-mind {
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-
-        .pillar-body {
-            bottom: 0;
-            left: 0;
-        }
-
-        .pillar-spirit {
-            bottom: 0;
-            right: 0;
-        }
-
-        /* ===== SERVICES BY GOAL ===== */
-        .services-section {
-            background-color: var(--bg-cream);
-        }
-
-        .service-tabs {
-            display: flex;
-            justify-content: center;
-            gap: var(--spacing-sm);
-            margin-bottom: var(--spacing-lg);
-            flex-wrap: wrap;
-        }
-
-        .tab-btn {
-            padding: 1rem 2rem;
-            background-color: var(--bg-white);
-            border: 2px solid var(--accent-beige);
-            border-radius: var(--border-radius);
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: 600;
-            color: var(--text-mid);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .tab-btn.active {
-            background-color: var(--accent-sage);
-            border-color: var(--accent-sage);
-            color: var(--bg-white);
-        }
-
-        .tab-btn:hover:not(.active) {
-            border-color: var(--accent-gold);
-        }
-
-        .tab-icon {
-            font-size: 1.5em;
-        }
-
-        .tab-label {
-            font-size: 0.9em;
-        }
-
-        .tab-content {
-            display: none;
-        }
-
-        .tab-content.active {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: var(--spacing-md);
-        }
-
-        .service-card {
-            background-color: var(--bg-white);
-            border-radius: var(--border-radius-lg);
-            overflow: hidden;
-            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
-
-        .service-card:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
-        }
-
-        .service-image {
-            width: 100%;
-            height: 200px;
-            background: linear-gradient(135deg, var(--accent-beige), var(--accent-sage));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 3em;
-        }
-
-        .service-content {
-            padding: var(--spacing-md);
-        }
-
-        .service-title {
-            font-size: 1.4em;
-            margin-bottom: var(--spacing-xs);
-            color: var(--primary-dark);
-        }
-
-        .service-benefits {
-            list-style: none;
-            margin-bottom: var(--spacing-sm);
-        }
-
-        .service-benefits li {
-            padding-left: 1.5rem;
-            position: relative;
-            margin-bottom: var(--spacing-xs);
-            color: var(--text-mid);
-        }
-
-        .service-benefits li::before {
-            content: "✓";
-            position: absolute;
-            left: 0;
-            color: var(--success-green);
-            font-weight: 700;
-        }
-
-        .service-meta {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding-top: var(--spacing-sm);
-            border-top: 1px solid var(--accent-beige);
-        }
-
-        .service-duration {
-            color: var(--text-light);
-            font-size: 0.9em;
-        }
-
-        .service-price {
-            font-size: 1.3em;
-            font-weight: 700;
-            color: var(--accent-gold);
-        }
-
-        /* ===== TEAM SECTION ===== */
-        .team-section {
-            background-color: var(--bg-white);
-        }
-
-        .team-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: var(--spacing-md);
-        }
-
-        .team-member {
-            text-align: center;
-            padding: var(--spacing-md);
-            background-color: var(--bg-cream);
-            border-radius: var(--border-radius-lg);
-            transition: transform 0.3s ease;
-        }
-
-        .team-member:hover {
-            transform: translateY(-4px);
-        }
-
-        .member-photo {
-            width: 150px;
-            height: 150px;
-            border-radius: 50%;
-            margin: 0 auto var(--spacing-sm);
-            background: linear-gradient(135deg, var(--accent-gold), var(--accent-sage));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 3em;
-            color: var(--bg-white);
-        }
-
-        .member-name {
-            font-size: 1.3em;
-            color: var(--primary-dark);
-            margin-bottom: 4px;
-        }
-
-        .member-title {
-            color: var(--accent-gold);
-            font-weight: 600;
-            margin-bottom: var(--spacing-xs);
-        }
-
-        .member-credentials {
-            font-size: 0.85em;
-            color: var(--text-light);
-            margin-bottom: var(--spacing-sm);
-        }
-
-        .member-specialties {
-            font-size: 0.9em;
-            color: var(--text-mid);
-        }
-
-        /* ===== FINAL CTA SECTION ===== */
-        .final-cta {
-            background: linear-gradient(135deg, var(--accent-sage), var(--accent-gold));
-            color: var(--bg-white);
-            text-align: center;
-            padding: var(--spacing-xl) 0;
-        }
-
-        .final-cta h2 {
-            color: var(--bg-white);
-            font-size: 2.5em;
-            margin-bottom: var(--spacing-sm);
-        }
-
-        .final-cta p {
-            color: var(--bg-white);
-            font-size: 1.2em;
-            margin-bottom: var(--spacing-lg);
-            opacity: 0.95;
-        }
-
-        .btn-white {
-            background-color: var(--bg-white);
-            color: var(--primary-dark);
-            font-size: 1.1em;
-            padding: 1.2rem 3rem;
-        }
-
-        .btn-white:hover {
-            background-color: var(--bg-cream);
-            transform: translateY(-2px);
-        }
-
-        /* ===== FOOTER ===== */
-        .footer {
-            background-color: var(--primary-dark);
-            color: var(--bg-cream);
-            padding: var(--spacing-lg) 0 var(--spacing-md);
-        }
-
-        .footer-content {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: var(--spacing-lg);
-            margin-bottom: var(--spacing-md);
-        }
-
-        .footer-section h3 {
-            color: var(--accent-gold);
-            margin-bottom: var(--spacing-sm);
-        }
-
-        .footer-section p,
-        .footer-section a {
-            color: var(--bg-cream);
-            margin-bottom: var(--spacing-xs);
-        }
-
-        .footer-section a:hover {
-            color: var(--accent-gold);
-        }
-
-        .footer-bottom {
-            text-align: center;
-            padding-top: var(--spacing-md);
-            border-top: 1px solid rgba(255,255,255,0.1);
-            color: var(--accent-beige);
-        }
-
-        /* ===== RESPONSIVE DESIGN ===== */
-        @media (max-width: 768px) {
-            .nav-menu {
-                display: none;
-                flex-direction: column;
-                position: absolute;
-                top: 100%;
-                left: 0;
-                right: 0;
-                background: var(--bg-white);
-                padding: var(--spacing-md);
-                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-                z-index: 999;
-            }
-
-            .nav-menu.active {
-                display: flex;
-            }
-
-            .mobile-menu-toggle {
-                display: flex;
-            }
-
-            .hero h1 {
-                font-size: 2.5em;
-            }
-
-            .trust-items {
-                flex-direction: column;
-                text-align: center;
-            }
-
-            .review-card {
-                min-width: 280px;
-            }
-
-            .circle-container {
-                width: 300px;
-                height: 300px;
-            }
-
-            .center-circle {
-                width: 120px;
-                height: 120px;
-                font-size: 1em;
-            }
-
-            .pillar {
-                width: 100px;
-                font-size: 0.85em;
-            }
-
-            .service-tabs {
-                flex-direction: column;
-            }
-
-            .tab-btn {
-                width: 100%;
-            }
-        }
-    </style>
+    <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
     <!-- Skip to main content link -->
@@ -865,7 +54,7 @@
         <!-- HERO SECTION -->
         <section class="hero" id="home">
         <!-- Video background placeholder (would be actual video in production) -->
-        <div class="hero-video-bg" style="background: linear-gradient(135deg, #9ca986, #dcb89e);"></div>
+        <div class="hero-video-bg"></div>
         <div class="hero-overlay"></div>
 
         <div class="hero-content">
@@ -1032,8 +221,8 @@
                 </div>
             </div>
 
-            <div style="text-align: center; margin-top: 3rem;">
-                <p style="max-width: 700px; margin: 0 auto; font-size: 1.1em;">
+            <div class="holistic-description">
+                <p class="holistic-description-text">
                     At Radiance Wellness, we believe true health emerges when these three elements work in harmony.
                     Our personalized treatments address your unique constitution using ancient Ayurvedic wisdom
                     combined with modern therapeutic techniques.
@@ -1083,7 +272,7 @@
                             <span class="service-duration">60-90 min</span>
                             <span class="service-price">From $95</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
 
@@ -1100,7 +289,7 @@
                             <span class="service-duration">60 min</span>
                             <span class="service-price">$110</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
 
@@ -1117,7 +306,7 @@
                             <span class="service-duration">90 min</span>
                             <span class="service-price">$135</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
             </div>
@@ -1137,7 +326,7 @@
                             <span class="service-duration">60 min</span>
                             <span class="service-price">$85</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
 
@@ -1154,7 +343,7 @@
                             <span class="service-duration">45 min</span>
                             <span class="service-price">$120</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
 
@@ -1171,7 +360,7 @@
                             <span class="service-duration">60 min</span>
                             <span class="service-price">$130</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
             </div>
@@ -1191,7 +380,7 @@
                             <span class="service-duration">90 min</span>
                             <span class="service-price">$150</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
 
@@ -1208,7 +397,7 @@
                             <span class="service-duration">60 min</span>
                             <span class="service-price">$95</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
 
@@ -1225,7 +414,7 @@
                             <span class="service-duration">120 min</span>
                             <span class="service-price">$180</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
             </div>
@@ -1245,7 +434,7 @@
                             <span class="service-duration">45 min</span>
                             <span class="service-price">$175</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
 
@@ -1262,7 +451,7 @@
                             <span class="service-duration">60 min</span>
                             <span class="service-price">$105</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
 
@@ -1279,7 +468,7 @@
                             <span class="service-duration">Half day</span>
                             <span class="service-price">$350</span>
                         </div>
-                        <a href="#book" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Book Now</a>
+                        <a href="#book" class="btn btn-primary btn-block">Book Now</a>
                     </div>
                 </div>
             </div>
@@ -1381,58 +570,7 @@
         </div>
     </footer>
 
-    <script>
-        // ===== TAB SWITCHING =====
-        const tabButtons = document.querySelectorAll('.tab-btn');
-        const tabContents = document.querySelectorAll('.tab-content');
-
-        tabButtons.forEach(button => {
-            button.addEventListener('click', () => {
-                // Remove active class from all buttons and contents
-                tabButtons.forEach(btn => btn.classList.remove('active'));
-                tabContents.forEach(content => content.classList.remove('active'));
-
-                // Add active class to clicked button
-                button.classList.add('active');
-
-                // Show corresponding content
-                const tabId = button.getAttribute('data-tab');
-                document.getElementById(tabId).classList.add('active');
-            });
-        });
-
-        // ===== MOBILE MENU TOGGLE =====
-        const mobileToggle = document.querySelector('.mobile-menu-toggle');
-        const navMenu = document.querySelector('.nav-menu');
-
-        mobileToggle.addEventListener('click', () => {
-            const isExpanded = mobileToggle.getAttribute('aria-expanded') === 'true';
-            mobileToggle.setAttribute('aria-expanded', !isExpanded);
-            navMenu.classList.toggle('active');
-        });
-
-        // Close mobile menu when clicking a link
-        document.querySelectorAll('.nav-link').forEach(link => {
-            link.addEventListener('click', () => {
-                navMenu.classList.remove('active');
-                mobileToggle.setAttribute('aria-expanded', 'false');
-            });
-        });
-
-        // ===== SMOOTH SCROLL =====
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    target.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start'
-                    });
-                }
-            });
-        });
-    </script>
+    <script src="js/main.js"></script>
 
 </body>
 </html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..7d7a351
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,52 @@
+// ===== TAB SWITCHING =====
+const tabButtons = document.querySelectorAll('.tab-btn');
+const tabContents = document.querySelectorAll('.tab-content');
+
+tabButtons.forEach(button => {
+    button.addEventListener('click', () => {
+        // Remove active class from all buttons and contents
+        tabButtons.forEach(btn => btn.classList.remove('active'));
+        tabContents.forEach(content => content.classList.remove('active'));
+
+        // Add active class to clicked button
+        button.classList.add('active');
+
+        // Show corresponding content
+        const tabId = button.getAttribute('data-tab');
+        document.getElementById(tabId).classList.add('active');
+    });
+});
+
+// ===== MOBILE MENU TOGGLE =====
+const mobileToggle = document.querySelector('.mobile-menu-toggle');
+const navMenu = document.querySelector('.nav-menu');
+
+mobileToggle.addEventListener('click', () => {
+    const isExpanded = mobileToggle.getAttribute('aria-expanded') === 'true';
+    mobileToggle.setAttribute('aria-expanded', !isExpanded);
+    navMenu.classList.toggle('active');
+});
+
+// Close mobile menu when clicking a link
+document.querySelectorAll('.nav-link').forEach(link => {
+    link.addEventListener('click', () => {
+        navMenu.classList.remove('active');
+        mobileToggle.setAttribute('aria-expanded', 'false');
+    });
+});
+
+// ===== SMOOTH SCROLL =====
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        const href = this.getAttribute('href');
+        if (!href || href === '#') return;
+        e.preventDefault();
+        const target = document.querySelector(href);
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});
diff --git a/prototype-guide.md b/prototype-guide.md
index 7f72869..9db9b37 100644
--- a/prototype-guide.md
+++ b/prototype-guide.md
@@ -6,15 +6,15 @@ This guide explains the wellness-focused redesign prototype and how to view it.
 ## Viewing the Prototype
 
 ### Option 1: Direct Browser Open
-1. Navigate to `/home/philip/Work/radiance/`
-2. Open `prototype.html` in any modern web browser
-3. The page is fully self-contained (no external dependencies except Google Fonts)
+1. Navigate to the project directory
+2. Open `index.html` in any modern web browser
+3. The page loads CSS from `css/styles.css` and JS from `js/main.js`
 
 ### Option 2: Local Server (Recommended for best experience)
 ```bash
-cd /home/philip/Work/radiance
+cd /path/to/radiance
 python -m http.server 8000
-# Then open http://localhost:8000/prototype.html
+# Then open http://localhost:8000
 ```
 
 ---
@@ -434,12 +434,9 @@ fetch(`https://maps.googleapis.com/maps/api/place/details/json?place_id=YOUR_PLA
 radiance-wellness/
 ├── index.html
 ├── css/
-│   ├── main.css (compiled from SCSS)
-│   └── critical.css (above-the-fold)
+│   └── styles.css (main stylesheet)
 ├── js/
-│   ├── main.js
-│   ├── carousel.js
-│   └── tabs.js
+│   └── main.js (tab switching, mobile menu, smooth scroll)
 ├── images/
 │   ├── hero-video.mp4
 │   ├── services/