diff --git a/src/config/sections.js b/src/config/sections.js
index 96f8446..7698808 100644
--- a/src/config/sections.js
+++ b/src/config/sections.js
@@ -8,21 +8,21 @@ export const sections = {
 		id: "css",
 		title: "CSS",
 		description: "Styling, layout, and animations",
-		color: "#7b68a6",
+		color: "#8b6bc4",
 		order: 1
 	},
 	html: {
 		id: "html",
 		title: "HTML",
 		description: "Semantic markup and native elements",
-		color: "#c75b7a",
+		color: "#d4637b",
 		order: 2
 	},
 	tailwind: {
 		id: "tailwind",
 		title: "Tailwind CSS",
 		description: "Utility-first CSS framework",
-		color: "#4a9ea8",
+		color: "#26a69a",
 		order: 3
 	}
 };
diff --git a/src/index.html b/src/index.html
index 7155e6e..adfbc98 100644
--- a/src/index.html
+++ b/src/index.html
@@ -149,19 +149,19 @@
 						<h2 data-i18n="landingPathsTitle">Explore Learning Paths</h2>
 						<div class="section-cards" id="section-cards">
 							<a href="#css" class="section-card" data-section="css">
-								<div class="section-card-icon" style="background: #7b68a6">CSS</div>
+								<div class="section-card-icon" style="background: #8b6bc4">CSS</div>
 								<h3>CSS</h3>
 								<p data-i18n="landingCssDesc">Styling, layout, and animations</p>
 								<span class="section-card-progress" id="css-progress"></span>
 							</a>
 							<a href="#html" class="section-card" data-section="html">
-								<div class="section-card-icon" style="background: #c75b7a">HTML</div>
+								<div class="section-card-icon" style="background: #d4637b">HTML</div>
 								<h3>HTML</h3>
 								<p data-i18n="landingHtmlDesc">Semantic markup and native elements</p>
 								<span class="section-card-progress" id="html-progress"></span>
 							</a>
 							<a href="#tailwind" class="section-card" data-section="tailwind">
-								<div class="section-card-icon" style="background: #4a9ea8">TW</div>
+								<div class="section-card-icon" style="background: #26a69a">TW</div>
 								<h3>Tailwind CSS</h3>
 								<p data-i18n="landingTailwindDesc">Utility-first CSS framework</p>
 								<span class="section-card-progress" id="tailwind-progress"></span>
diff --git a/src/main.css b/src/main.css
index 8005460..e4e2901 100644
--- a/src/main.css
+++ b/src/main.css
@@ -2848,72 +2848,72 @@ input:checked + .toggle-slider::before {
 }
 
 /* ================= SECTION COLOR CODING ================= */
-/* CSS Section - Muted Violet */
+/* CSS Section - Balanced Violet */
 [data-section="css"] {
-	--section-color: #7b68a6;
-	--section-color-light: #9d8ec4;
-	--section-color-dark: #5a4a7a;
-	--section-color-rgb: 123, 104, 166;
+	--section-color: #8b6bc4;
+	--section-color-light: #a98cd6;
+	--section-color-dark: #6b4fa0;
+	--section-color-rgb: 139, 107, 196;
 }
 
-/* HTML Section - Muted Rose */
+/* HTML Section - Balanced Rose */
 [data-section="html"] {
-	--section-color: #c75b7a;
-	--section-color-light: #db8a9e;
-	--section-color-dark: #a34560;
-	--section-color-rgb: 199, 91, 122;
+	--section-color: #d4637b;
+	--section-color-light: #e08899;
+	--section-color-dark: #b84d63;
+	--section-color-rgb: 212, 99, 123;
 }
 
-/* Tailwind Section - Muted Teal */
+/* Tailwind Section - Balanced Teal */
 [data-section="tailwind"] {
-	--section-color: #4a9ea8;
-	--section-color-light: #6fbac3;
-	--section-color-dark: #3a7d85;
-	--section-color-rgb: 74, 158, 168;
+	--section-color: #26a69a;
+	--section-color-light: #4db6ac;
+	--section-color-dark: #00897b;
+	--section-color-rgb: 38, 166, 154;
 }
 
 /* Apply section colors to nav links */
 .nav-link[data-section="css"] {
-	color: #7b68a6;
+	color: #8b6bc4;
 }
 
 .nav-link[data-section="html"] {
-	color: #c75b7a;
+	color: #d4637b;
 }
 
 .nav-link[data-section="tailwind"] {
-	color: #4a9ea8;
+	color: #26a69a;
 }
 
 .nav-link[data-section="css"]:hover,
 .nav-link[data-section="css"].active {
-	background: rgba(123, 104, 166, 0.1);
-	color: #5a4a7a;
+	background: rgba(139, 107, 196, 0.1);
+	color: #6b4fa0;
 }
 
 .nav-link[data-section="html"]:hover,
 .nav-link[data-section="html"].active {
-	background: rgba(199, 91, 122, 0.1);
-	color: #a34560;
+	background: rgba(212, 99, 123, 0.1);
+	color: #b84d63;
 }
 
 .nav-link[data-section="tailwind"]:hover,
 .nav-link[data-section="tailwind"].active {
-	background: rgba(74, 158, 168, 0.1);
-	color: #3a7d85;
+	background: rgba(38, 166, 154, 0.1);
+	color: #00897b;
 }
 
 /* Logo color coding based on section */
 [data-section="css"] .code-text {
-	color: #7b68a6;
+	color: #8b6bc4;
 }
 
 [data-section="html"] .code-text {
-	color: #c75b7a;
+	color: #d4637b;
 }
 
 [data-section="tailwind"] .code-text {
-	color: #4a9ea8;
+	color: #26a69a;
 }
 
 /* Reference nav link colors */
@@ -2921,7 +2921,7 @@ input:checked + .toggle-slider::before {
 .ref-nav-link[data-ref="selectors"],
 .ref-nav-link[data-ref="flexbox"],
 .ref-nav-link[data-ref="grid"] {
-	color: #7b68a6;
+	color: #8b6bc4;
 }
 
 .ref-nav-link[data-ref="css"]:hover,
@@ -2932,114 +2932,114 @@ input:checked + .toggle-slider::before {
 .ref-nav-link[data-ref="flexbox"].active,
 .ref-nav-link[data-ref="grid"]:hover,
 .ref-nav-link[data-ref="grid"].active {
-	background: rgba(123, 104, 166, 0.15);
-	color: #5a4a7a;
+	background: rgba(139, 107, 196, 0.15);
+	color: #6b4fa0;
 }
 
 .ref-nav-link[data-ref="html"] {
-	color: #c75b7a;
+	color: #d4637b;
 }
 
 .ref-nav-link[data-ref="html"]:hover,
 .ref-nav-link[data-ref="html"].active {
-	background: rgba(199, 91, 122, 0.15);
-	color: #a34560;
+	background: rgba(212, 99, 123, 0.15);
+	color: #b84d63;
 }
 
 /* CodeMirror section color overrides */
 body[data-section="css"] .cm-editor .cm-content {
-	caret-color: #7b68a6 !important;
+	caret-color: #8b6bc4 !important;
 }
 
 body[data-section="css"] .cm-editor .cm-cursor,
 body[data-section="css"] .cm-editor .cm-dropCursor {
-	border-left-color: #7b68a6 !important;
+	border-left-color: #8b6bc4 !important;
 }
 
 body[data-section="css"] .cm-editor .cm-selectionBackground,
 body[data-section="css"] .cm-editor .cm-content ::selection {
-	background-color: rgba(123, 104, 166, 0.25) !important;
+	background-color: rgba(139, 107, 196, 0.25) !important;
 }
 
 body[data-section="css"] .cm-editor .cm-activeLine {
-	background-color: rgba(123, 104, 166, 0.08) !important;
+	background-color: rgba(139, 107, 196, 0.08) !important;
 }
 
 body[data-section="html"] .cm-editor .cm-content {
-	caret-color: #c75b7a !important;
+	caret-color: #d4637b !important;
 }
 
 body[data-section="html"] .cm-editor .cm-cursor,
 body[data-section="html"] .cm-editor .cm-dropCursor {
-	border-left-color: #c75b7a !important;
+	border-left-color: #d4637b !important;
 }
 
 body[data-section="html"] .cm-editor .cm-selectionBackground,
 body[data-section="html"] .cm-editor .cm-content ::selection {
-	background-color: rgba(199, 91, 122, 0.25) !important;
+	background-color: rgba(212, 99, 123, 0.25) !important;
 }
 
 body[data-section="html"] .cm-editor .cm-activeLine {
-	background-color: rgba(199, 91, 122, 0.08) !important;
+	background-color: rgba(212, 99, 123, 0.08) !important;
 }
 
 body[data-section="tailwind"] .cm-editor .cm-content {
-	caret-color: #4a9ea8 !important;
+	caret-color: #26a69a !important;
 }
 
 body[data-section="tailwind"] .cm-editor .cm-cursor,
 body[data-section="tailwind"] .cm-editor .cm-dropCursor {
-	border-left-color: #4a9ea8 !important;
+	border-left-color: #26a69a !important;
 }
 
 body[data-section="tailwind"] .cm-editor .cm-selectionBackground,
 body[data-section="tailwind"] .cm-editor .cm-content ::selection {
-	background-color: rgba(74, 158, 168, 0.25) !important;
+	background-color: rgba(38, 166, 154, 0.25) !important;
 }
 
 body[data-section="tailwind"] .cm-editor .cm-activeLine {
-	background-color: rgba(74, 158, 168, 0.08) !important;
+	background-color: rgba(38, 166, 154, 0.08) !important;
 }
 
 /* Module pill section colors */
 body[data-section="css"] .module-pill {
-	background: rgba(123, 104, 166, 0.1);
-	color: #7b68a6;
+	background: rgba(139, 107, 196, 0.1);
+	color: #8b6bc4;
 }
 
 body[data-section="css"] .module-pill .level-indicator {
-	color: #5a4a7a;
+	color: #6b4fa0;
 }
 
 body[data-section="html"] .module-pill {
-	background: rgba(199, 91, 122, 0.1);
-	color: #c75b7a;
+	background: rgba(212, 99, 123, 0.1);
+	color: #d4637b;
 }
 
 body[data-section="html"] .module-pill .level-indicator {
-	color: #a34560;
+	color: #b84d63;
 }
 
 body[data-section="tailwind"] .module-pill {
-	background: rgba(74, 158, 168, 0.1);
-	color: #4a9ea8;
+	background: rgba(38, 166, 154, 0.1);
+	color: #26a69a;
 }
 
 body[data-section="tailwind"] .module-pill .level-indicator {
-	color: #3a7d85;
+	color: #00897b;
 }
 
 /* Code block border section colors */
 body[data-section="css"] .code-block {
-	border-color: rgba(123, 104, 166, 0.4);
+	border-color: rgba(139, 107, 196, 0.4);
 }
 
 body[data-section="html"] .code-block {
-	border-color: rgba(199, 91, 122, 0.4);
+	border-color: rgba(212, 99, 123, 0.4);
 }
 
 body[data-section="tailwind"] .code-block {
-	border-color: rgba(74, 158, 168, 0.4);
+	border-color: rgba(38, 166, 154, 0.4);
 }
 
 /* Section code block CodeMirror syntax highlighting overrides */
@@ -3057,41 +3057,41 @@ body[data-section="tailwind"] .code-block .cm-editor .cm-line {
 
 /* Task instruction bubble section colors */
 [data-section="css"] .task-instruction {
-	background: rgba(123, 104, 166, 0.92);
+	background: rgba(139, 107, 196, 0.92);
 }
 
 [data-section="html"] .task-instruction {
-	background: rgba(199, 91, 122, 0.92);
+	background: rgba(212, 99, 123, 0.92);
 }
 
 [data-section="tailwind"] .task-instruction {
-	background: rgba(74, 158, 168, 0.92);
+	background: rgba(38, 166, 154, 0.92);
 }
 
 /* Section page progress bar colors */
 body[data-section="css"] .section-progress-bar .progress-fill {
-	background: #7b68a6;
+	background: #8b6bc4;
 }
 
 body[data-section="html"] .section-progress-bar .progress-fill {
-	background: #c75b7a;
+	background: #d4637b;
 }
 
 body[data-section="tailwind"] .section-progress-bar .progress-fill {
-	background: #4a9ea8;
+	background: #26a69a;
 }
 
 /* Section page header colors */
 [data-section="css"] .section-hero h1 {
-	color: #7b68a6;
+	color: #8b6bc4;
 }
 
 [data-section="html"] .section-hero h1 {
-	color: #c75b7a;
+	color: #d4637b;
 }
 
 [data-section="tailwind"] .section-hero h1 {
-	color: #4a9ea8;
+	color: #26a69a;
 }
 
 /* Reference footer */