diff --git a/starter_code/portfolio.html b/starter_code/portfolio.html
index 92c8a1e..19756bf 100644
--- a/starter_code/portfolio.html
+++ b/starter_code/portfolio.html
@@ -52,7 +52,7 @@
 
   <!-- Google Fonts -->
   <link
-    href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
     rel="stylesheet"
   />
 
@@ -75,8 +75,8 @@
       --color-bg-soft:    #f9fafb;
       --color-bg-hero:    #f0f2ff;
 
-      --font-display: "Sora", sans-serif;
-      --font-body:    "Inter", sans-serif;
+      --font-display: "Manrope", sans-serif;
+      --font-body:    "Manrope", sans-serif;
 
       --radius-sm: 8px;
       --radius-md: 14px;
diff --git a/static/style.css b/static/style.css
index 18d9cbf..f1cd048 100644
--- a/static/style.css
+++ b/static/style.css
@@ -20,6 +20,23 @@
   --purple-600: #7c3aed;
   --purple-100: #f3f0ff;
 
+  /* Hero and surface softening */
+  --hero-indigo-deep: #131a4b;
+  --hero-indigo-mid: #1e2860;
+  --hero-violet-muted: #4b426d;
+  --surface-soft: #f6f7fb;
+  --surface-soft-alt: #f1f3f9;
+  --page-bg: #27306f;
+  --page-bg-soft: #303b82;
+  --surface-muted: rgba(255,255,255,0.055);
+  --surface-muted-strong: rgba(255,255,255,0.085);
+  --border-muted: rgba(255,255,255,0.12);
+  --border-muted-soft: rgba(255,255,255,0.075);
+  --neon-line: rgba(126, 231, 255, 0.42);
+  --neon-line-pink: rgba(236, 72, 153, 0.24);
+  --neon-line-gold: rgba(252, 211, 77, 0.18);
+  --neon-glow: rgba(126, 231, 255, 0.12);
+
   --yellow-400: #fbbf24;
   --yellow-300: #fcd34d;
   --yellow-100: #fef9e7;
@@ -67,8 +84,8 @@
   --r-full: 9999px;
 
   /* Fonts */
-  --font-display: "Sora", sans-serif;
-  --font-body:    "Inter", sans-serif;
+  --font-display: "Manrope", sans-serif;
+  --font-body:    "Manrope", sans-serif;
   --font-mono:    "JetBrains Mono", "Courier New", monospace;
 
   /* Transition */
@@ -80,8 +97,13 @@
 html { scroll-behavior: smooth; }
 body {
   font-family: var(--font-body);
-  color: var(--gray-700);
-  background: var(--white);
+  color: rgba(255,255,255,0.72);
+  background: var(--page-bg);
+  background-image:
+    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 38%),
+    radial-gradient(circle at 18% 0%, rgba(126, 231, 255, 0.08), transparent 34%),
+    radial-gradient(circle at 86% 12%, rgba(236, 72, 153, 0.07), transparent 30%);
+  background-attachment: fixed;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
 }
@@ -90,6 +112,23 @@ a { color: var(--indigo-500); text-decoration: none; }
 a:hover { text-decoration: underline; }
 ul, ol { list-style: none; }
 
+:is(.skill-strip, .how-section, .features-section, .form-section, .results-section, .cta-section, .footer, .detail-hero, .detail-body) {
+  position: relative;
+}
+
+:is(.skill-strip, .how-section, .features-section, .form-section, .results-section, .cta-section, .footer, .detail-hero, .detail-body)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: max(32px, calc((100% - 1140px) / 2 + 32px));
+  right: max(32px, calc((100% - 1140px) / 2 + 32px));
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--neon-line-pink), var(--neon-line), var(--neon-line-gold), transparent);
+  box-shadow: 0 0 18px var(--neon-glow);
+  z-index: 1;
+  pointer-events: none;
+}
+
 /* ---- Shared utilities -------------------------------------- */
 .container {
   max-width: 1140px;
@@ -103,9 +142,10 @@ ul, ol { list-style: none; }
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--indigo-600);
-  background: var(--indigo-100);
-  border-radius: var(--r-full);
+  color: rgba(255,255,255,0.78);
+  background: var(--surface-muted-strong);
+  border: 1px solid var(--border-muted);
+  border-radius: var(--r-xs);
   padding: 4px 14px;
   margin-bottom: 16px;
 }
@@ -114,7 +154,7 @@ ul, ol { list-style: none; }
   font-family: var(--font-display);
   font-size: clamp(1.75rem, 3.5vw, 2.5rem);
   font-weight: 800;
-  color: var(--text-heading);
+  color: var(--white);
   letter-spacing: -0.035em;
   line-height: 1.15;
   margin-bottom: 12px;
@@ -122,7 +162,7 @@ ul, ol { list-style: none; }
 
 .section-sub {
   font-size: 1.02rem;
-  color: var(--text-body);
+  color: rgba(255,255,255,0.62);
   max-width: 540px;
   margin: 0 auto 56px;
   line-height: 1.75;
@@ -178,7 +218,8 @@ ul, ol { list-style: none; }
   background: rgba(10, 15, 100, 0.88);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border-bottom: 1px solid rgba(255,255,255,0.06);
+  border-bottom: 2px solid rgba(255,255,255,0.15);
+  box-shadow: 0 4px 16px rgba(255,255,255,0.08);
   transition: background var(--t);
 }
 
@@ -243,7 +284,7 @@ ul, ol { list-style: none; }
   font-weight: 600;
   color: rgba(255,255,255,0.85);
   border: 1.5px solid rgba(255,255,255,0.28);
-  border-radius: var(--r-full);
+  border-radius: var(--r-sm);
   padding: 7px 18px;
   transition: background var(--t), border-color var(--t);
 }
@@ -326,18 +367,29 @@ ul, ol { list-style: none; }
 .hero {
   position: relative;
   overflow: hidden;
-  background: linear-gradient(140deg, var(--indigo-900) 0%, var(--indigo-800) 40%, var(--purple-700) 100%);
+  background: var(--page-bg);
   padding: 130px 32px 90px;
   min-height: 92vh;
   display: flex;
   align-items: center;
 }
 
+.hero::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 130px;
+  background: linear-gradient(180deg, rgba(39, 48, 111, 0) 0%, var(--page-bg) 100%);
+  pointer-events: none;
+}
+
 /* Subtle dot-grid overlay */
 .hero-bg-grid {
   position: absolute;
   inset: 0;
-  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
+  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
   background-size: 28px 28px;
   pointer-events: none;
 }
@@ -368,7 +420,7 @@ ul, ol { list-style: none; }
   color: rgba(255,255,255,0.75);
   border: 1px solid rgba(255,255,255,0.2);
   background: rgba(255,255,255,0.07);
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
   padding: 6px 16px;
   margin-bottom: 24px;
 }
@@ -413,14 +465,14 @@ ul, ol { list-style: none; }
   font-family: var(--font-display);
   font-size: 0.95rem;
   font-weight: 700;
-  border-radius: var(--r-full);
-  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4);
+  border-radius: var(--r-md);
+  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.35), inset 0 1px 0 rgba(255,255,255,0.5);
   transition: background var(--t), transform var(--t), box-shadow var(--t);
 }
 .btn-hero-primary:hover {
   background: var(--yellow-300);
   transform: translateY(-2px);
-  box-shadow: 0 6px 28px rgba(251, 191, 36, 0.5);
+  box-shadow: 0 12px 40px rgba(251, 191, 36, 0.45), inset 0 1px 0 rgba(255,255,255,0.6);
   text-decoration: none;
 }
 
@@ -429,16 +481,17 @@ ul, ol { list-style: none; }
   align-items: center;
   gap: 8px;
   padding: 14px 28px;
-  background: rgba(255,255,255,0.1);
-  border: 1.5px solid rgba(255,255,255,0.25);
+  background: rgba(255,255,255,0.08);
+  border: 1.5px solid rgba(255,255,255,0.3);
   color: var(--white);
   font-family: var(--font-display);
   font-size: 0.95rem;
   font-weight: 600;
-  border-radius: var(--r-full);
-  transition: background var(--t);
+  border-radius: var(--r-md);
+  box-shadow: 0 8px 28px rgba(255,255,255,0.1);
+  transition: background var(--t), box-shadow var(--t);
 }
-.btn-hero-ghost:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
+.btn-hero-ghost:hover { background: rgba(255,255,255,0.14); box-shadow: 0 12px 36px rgba(255,255,255,0.16); text-decoration: none; }
 
 /* Visual column (code preview cards) */
 .hero-visual {
@@ -454,22 +507,26 @@ ul, ol { list-style: none; }
   display: flex;
   align-items: center;
   gap: 14px;
-  background: rgba(255,255,255,0.95);
+  background: rgba(255,255,255,0.07);
+  border: 1px solid rgba(255,255,255,0.08);
   border-radius: var(--r-md);
-  padding: 14px 18px;
-  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  padding: 14px 16px;
+  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
 }
 .hvc-icon {
   width: 40px; height: 40px;
   border-radius: var(--r-sm);
   display: flex; align-items: center; justify-content: center;
   flex-shrink: 0;
+  background: rgba(255,255,255,0.1);
 }
-.hvc-icon--blue { background: var(--indigo-100); color: var(--indigo-600); }
-.hvc-icon--green { background: var(--green-100); color: var(--green-500); }
+.hvc-icon--blue { color: var(--indigo-300); }
+.hvc-icon--green { color: var(--green-400); }
 .hvc-text { display: flex; flex-direction: column; gap: 2px; }
-.hvc-title { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: var(--gray-900); }
-.hvc-sub   { font-size: 0.77rem; color: var(--gray-500); }
+.hvc-title { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: rgba(255,255,255,0.9); }
+.hvc-sub   { font-size: 0.77rem; color: rgba(255,255,255,0.6); }
 
 /* Code preview card */
 .hero-visual-main {
@@ -514,17 +571,17 @@ ul, ol { list-style: none; }
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
-  filter: blur(90px);
-  opacity: 0.25;
+  filter: blur(110px);
+  opacity: 0.16;
 }
 .hero-blob-1 {
   width: 560px; height: 560px;
-  background: var(--purple-600);
+  background: #5a4f81;
   top: -180px; right: -180px;
 }
 .hero-blob-2 {
   width: 360px; height: 360px;
-  background: var(--indigo-500);
+  background: #4b5f96;
   bottom: -80px; left: -100px;
 }
 
@@ -628,10 +685,13 @@ ul, ol { list-style: none; }
 
 /* ---- Skill Strip ------------------------------------------ */
 .skill-strip {
-  background: var(--gray-50);
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
+  background: var(--page-bg);
+  border-top: none;
+  border-bottom: 1px solid var(--border-muted-soft);
   padding: 18px 32px;
+  margin-top: -22px;
+  position: relative;
+  z-index: 3;
 }
 .skill-strip-inner {
   max-width: 1140px;
@@ -644,7 +704,7 @@ ul, ol { list-style: none; }
 .skill-strip-label {
   font-size: 0.8rem;
   font-weight: 600;
-  color: var(--gray-500);
+  color: rgba(255,255,255,0.46);
   letter-spacing: 0.04em;
   text-transform: uppercase;
   white-space: nowrap;
@@ -658,152 +718,245 @@ ul, ol { list-style: none; }
 .ss-item {
   font-size: 0.88rem;
   font-weight: 600;
-  color: var(--gray-700);
+  color: rgba(255,255,255,0.72);
   padding: 0 16px;
 }
 .ss-sep {
   width: 1px;
   height: 16px;
-  background: var(--gray-300);
+  background: var(--border-muted);
   flex-shrink: 0;
 }
 
 /* ---- How It Works ----------------------------------------- */
 .how-section {
   padding: 96px 0;
-  background: var(--white);
+  background: var(--page-bg);
   text-align: center;
+  border-top: 1px solid var(--border-muted-soft);
 }
 
 .steps-grid {
-  display: flex;
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: center;
-  justify-content: center;
-  gap: 0;
-  margin-top: 16px;
+  gap: 28px;
+  margin-top: 20px;
+}
+
+.steps-grid::before {
+  content: "";
+  position: absolute;
+  left: 15%;
+  right: 15%;
+  top: 34px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(126, 231, 255, 0.18), rgba(236, 72, 153, 0.16), rgba(252, 211, 77, 0.2), transparent);
+  box-shadow: 0 0 14px rgba(126, 231, 255, 0.08);
+  pointer-events: none;
+}
+
+.steps-grid::after {
+  content: "";
+  position: absolute;
+  left: 49.8%;
+  top: 34px;
+  width: 1px;
+  height: 42px;
+  background: linear-gradient(180deg, rgba(126, 231, 255, 0.2), transparent);
+  opacity: 0.45;
+  pointer-events: none;
 }
 
 .step-card {
-  flex: 1;
-  max-width: 300px;
-  background: var(--white);
-  border: 1.5px solid var(--border);
-  border-radius: var(--r-md);
-  padding: 36px 28px;
+  position: relative;
+  z-index: 1;
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
+  border-radius: var(--r-sm);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  padding: 24px 22px;
   text-align: left;
-  box-shadow: var(--shadow-sm);
-  transition: box-shadow var(--t), transform var(--t);
+  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
+  transition: border-color var(--t), background var(--t), box-shadow var(--t), transform var(--t);
+}
+.step-card:nth-child(2) {
+  background: rgba(255,255,255,0.065);
+}
+.step-card:last-child {
+  background: rgba(255,255,255,0.078);
+  border-color: rgba(126, 231, 255, 0.28);
+  box-shadow: 0 0 0 1px rgba(126, 231, 255, 0.03), 0 10px 30px rgba(18, 24, 64, 0.18);
+}
+.step-card:hover {
+  border-color: rgba(126, 231, 255, 0.22);
+  box-shadow: 0 2px 14px rgba(0,0,0,0.1);
+  transform: translateY(-1px);
 }
-.step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
 
 .step-num {
-  font-family: var(--font-display);
-  font-size: 0.75rem;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  color: var(--indigo-600);
-  background: var(--indigo-100);
-  display: inline-block;
-  padding: 4px 12px;
-  border-radius: var(--r-full);
-  margin-bottom: 20px;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  color: rgba(255,255,255,0.5);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 18px;
+  text-transform: uppercase;
+}
+.step-num::after {
+  content: "";
+  width: 34px;
+  height: 1px;
+  background: rgba(126, 231, 255, 0.22);
+}
+.step-card:last-child .step-num {
+  color: rgba(199, 243, 255, 0.82);
+}
+.step-card:last-child .step-num::after {
+  background: rgba(126, 231, 255, 0.48);
 }
 
 .step-card h3 {
   font-family: var(--font-display);
-  font-size: 1.05rem;
+  font-size: 1.02rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
   margin-bottom: 10px;
 }
-.step-card p { font-size: 0.9rem; color: var(--text-body); line-height: 1.65; }
-
-.step-connector {
-  color: var(--gray-300);
-  padding: 0 8px;
-  flex-shrink: 0;
-  margin-bottom: 20px;
-}
+.step-card p { font-size: 0.9rem; color: rgba(255,255,255,0.65); line-height: 1.65; }
 
 /* ---- Features Section ------------------------------------- */
 .features-section {
   padding: 96px 0;
-  background: var(--gray-50);
+  background: var(--page-bg);
   text-align: center;
+  border-top: 1px solid var(--border-muted-soft);
 }
 
 .features-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
+  gap: 28px;
   text-align: left;
   margin-top: 16px;
 }
 
-/* Feature cards with distinct colour backgrounds (Eduvo style) */
 .feature-card {
-  border-radius: var(--r-lg);
-  padding: 38px 32px;
+  background: rgba(16, 22, 58, 0.26);
+  border: 1px solid rgba(255,255,255,0.095);
+  border-radius: var(--r-sm);
+  padding: 18px;
   position: relative;
   overflow: hidden;
-  transition: transform var(--t), box-shadow var(--t);
+  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
+}
+.feature-card:hover {
+  background: rgba(16, 22, 58, 0.32);
+  border-color: rgba(126, 231, 255, 0.18);
+  transform: translateY(-2px);
+  box-shadow: 0 14px 34px rgba(18, 24, 64, 0.18);
 }
-.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
 
-.feature-card--pink   { background: var(--pink-100); }
-.feature-card--yellow { background: var(--yellow-100); }
-.feature-card--purple { background: var(--purple-100); }
+.feature-card--pink,
+.feature-card--yellow { background: rgba(16, 22, 58, 0.26); }
+.feature-card--purple {
+  background: rgba(16, 22, 58, 0.34);
+  border-color: rgba(126, 231, 255, 0.22);
+}
 
-.feature-card-icon {
-  width: 52px; height: 52px;
-  background: rgba(255,255,255,0.7);
-  border-radius: var(--r-sm);
-  display: flex; align-items: center; justify-content: center;
-  margin-bottom: 22px;
-  box-shadow: var(--shadow-xs);
+.feature-terminal-bar {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 36px;
+  margin: -4px -4px 20px;
+  padding: 8px 12px;
+  background: rgba(6, 12, 32, 0.24);
+  border: 1px solid rgba(255,255,255,0.075);
+  border-radius: var(--r-xs);
+}
+.ft-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  opacity: 0.72;
+}
+.ft-dot--red { background: #fca5a5; }
+.ft-dot--amber { background: #fcd34d; }
+.ft-dot--green { background: #86efac; }
+.ft-command {
+  margin-left: 6px;
+  font-family: var(--font-mono);
+  font-size: 0.76rem;
+  font-weight: 500;
+  color: rgba(218, 241, 255, 0.78);
+  letter-spacing: 0.01em;
+}
+.feature-meta,
+.feature-status {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  color: rgba(252, 211, 77, 0.74);
+  margin-bottom: 10px;
+}
+.feature-status {
+  color: rgba(134, 239, 172, 0.78);
+  margin: 0 0 18px;
 }
-.feature-card--pink   .feature-card-icon { color: var(--pink-500); }
-.feature-card--yellow .feature-card-icon { color: var(--orange-500); }
-.feature-card--purple .feature-card-icon { color: var(--purple-600); }
 
 .feature-card h3 {
-  font-family: var(--font-display);
-  font-size: 1.08rem;
-  font-weight: 700;
-  color: var(--text-heading);
-  margin-bottom: 12px;
+  font-family: var(--font-body);
+  font-size: 0.98rem;
+  font-weight: 600;
+  color: rgba(255,255,255,0.86);
+  margin-bottom: 8px;
 }
 .feature-card p {
-  font-size: 0.91rem;
-  color: var(--gray-600);
+  font-size: 0.9rem;
+  color: rgba(255,255,255,0.62);
   line-height: 1.7;
-  margin-bottom: 22px;
+  margin-bottom: 18px;
 }
 
 .feature-card-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: 0.84rem;
-  font-weight: 700;
-  color: var(--indigo-700);
-  border: 1.5px solid var(--indigo-200, #c7d2fe);
-  background: rgba(255,255,255,0.6);
-  padding: 7px 16px;
-  border-radius: var(--r-full);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: rgba(218, 241, 255, 0.82);
+  border: 1px solid rgba(126, 231, 255, 0.16);
+  background: rgba(126, 231, 255, 0.055);
+  padding: 7px 12px;
+  border-radius: var(--r-xs);
   transition: background var(--t), border-color var(--t);
 }
+.feature-card-link::before {
+  content: "$";
+  color: rgba(134, 239, 172, 0.68);
+}
 .feature-card-link:hover {
-  background: var(--white);
-  border-color: var(--indigo-500);
+  background: rgba(126, 231, 255, 0.09);
+  border-color: rgba(126, 231, 255, 0.28);
   text-decoration: none;
 }
 
 /* ---- Form Section ----------------------------------------- */
 .form-section {
   padding: 96px 0;
-  background: var(--white);
+  background: var(--page-bg);
   text-align: center;
+  border-top: 1px solid var(--border-muted-soft);
 }
 
 .form-card-outer {
@@ -812,11 +965,13 @@ ul, ol { list-style: none; }
 }
 
 .form-card {
-  background: var(--white);
-  border: 1.5px solid var(--border);
-  border-radius: var(--r-xl);
-  padding: 44px 44px 40px;
-  box-shadow: var(--shadow-lg);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
+  border-radius: var(--r-lg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  padding: 36px 36px 32px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
   text-align: left;
 }
 
@@ -833,7 +988,7 @@ label {
   display: block;
   font-size: 0.84rem;
   font-weight: 600;
-  color: var(--gray-700);
+  color: rgba(255,255,255,0.8);
   margin-bottom: 8px;
   letter-spacing: 0.01em;
 }
@@ -841,9 +996,9 @@ label {
 /* Skill input wrap */
 .skill-input-wrap {
   position: relative;
-  border: 1.5px solid var(--border);
+  border: 1px solid rgba(255,255,255,0.1);
   border-radius: var(--r-sm);
-  background: var(--gray-50);
+  background: rgba(255,255,255,0.03);
   min-height: 48px;
   padding: 6px 10px;
   display: flex;
@@ -851,12 +1006,12 @@ label {
   align-items: center;
   gap: 6px;
   cursor: text;
-  transition: border-color var(--t), box-shadow var(--t);
+  transition: border-color var(--t), box-shadow var(--t), background var(--t);
 }
 .skill-input-wrap:focus-within {
-  border-color: var(--indigo-500);
-  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.12);
-  background: var(--white);
+  border-color: var(--indigo-400);
+  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.2);
+  background: rgba(255,255,255,0.06);
 }
 
 /* An added skill chip inside the wrap */
@@ -876,7 +1031,7 @@ label {
   color: var(--indigo-700);
   background: var(--indigo-100);
   border: 1px solid rgba(79, 110, 247, 0.2);
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
   padding: 3px 10px 3px 12px;
 }
 .skill-chip-remove {
@@ -903,12 +1058,15 @@ label {
   box-shadow: none;
   font-family: var(--font-body);
   font-size: 0.93rem;
-  color: var(--gray-900);
+  color: rgba(255,255,255,0.85);
 }
 .skill-input-wrap input[type="text"]:focus {
   outline: none;
   box-shadow: none;
 }
+.skill-input-wrap input[type="text"]::placeholder {
+  color: rgba(255,255,255,0.4);
+}
 
 /*suggestions dropdown*/
 .skills-suggestions {
@@ -981,7 +1139,7 @@ label {
   color: var(--gray-600);
   background: var(--white);
   border: 1.5px solid var(--gray-300);
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
   padding: 5px 14px;
   cursor: pointer;
   transition: background var(--t), border-color var(--t), color var(--t);
@@ -1009,40 +1167,43 @@ label {
 select, input[type="text"]:not(.skill-input-wrap input) {
   width: 100%;
   padding: 11px 14px;
-  border: 1.5px solid var(--border);
+  border: 1px solid rgba(255,255,255,0.1);
   border-radius: var(--r-xs);
   font-family: var(--font-body);
   font-size: 0.93rem;
-  color: var(--gray-900);
-  background: var(--gray-50);
+  color: rgba(255,255,255,0.85);
+  background: rgba(255,255,255,0.03);
   appearance: none;
   -webkit-appearance: none;
   transition: border-color var(--t), box-shadow var(--t);
 }
+select::placeholder, input[type="text"]:not(.skill-input-wrap input)::placeholder {
+  color: rgba(255,255,255,0.4);
+}
 select:focus {
   outline: none;
-  border-color: var(--indigo-500);
-  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.12);
-  background: var(--white);
+  border-color: var(--indigo-400);
+  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.2);
+  background: rgba(255,255,255,0.06);
 }
 
 /* Form hints and error messages */
 .form-hint {
   display: block;
   font-size: 0.77rem;
-  color: var(--gray-400);
+  color: rgba(255,255,255,0.45);
   margin-top: 5px;
 }
 .form-error-msg {
   font-size: 0.81rem;
-  color: var(--red-500);
+  color: #fca5a5;
   margin-top: 5px;
   min-height: 18px;
   font-weight: 500;
 }
 .form-error-general {
   font-size: 0.84rem;
-  color: var(--red-500);
+  color: #fca5a5;
   margin-bottom: 12px;
   min-height: 20px;
   font-weight: 500;
@@ -1075,13 +1236,14 @@ select:focus {
 /* ---- Results Section -------------------------------------- */
 .results-section {
   padding: 80px 0 108px;
-  background: var(--indigo-50);
+  background: var(--page-bg);
   text-align: center;
+  border-top: 1px solid var(--border-muted-soft);
 }
 
 .loading-box {
   padding: 56px 0;
-  color: var(--text-body);
+  color: rgba(255,255,255,0.64);
 }
 .loading-dots {
   display: flex;
@@ -1111,16 +1273,16 @@ select:focus {
   font-family: var(--font-display);
   font-size: 1.3rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
   margin-bottom: 10px;
 }
-.empty-state p { color: var(--text-body); margin-bottom: 24px; }
+.empty-state p { color: rgba(255,255,255,0.64); margin-bottom: 24px; }
 .btn-try-again {
   padding: 11px 24px;
   background: var(--indigo-100);
   color: var(--indigo-700);
   border: 1.5px solid rgba(79, 110, 247, 0.25);
-  border-radius: var(--r-full);
+  border-radius: var(--r-sm);
   font-family: var(--font-body);
   font-size: 0.9rem;
   font-weight: 600;
@@ -1133,39 +1295,41 @@ select:focus {
 .results-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 26px;
+  gap: 30px;
   text-align: left;
   margin-top: 16px;
 }
 
 /* Project card */
 .project-card {
-  background: var(--white);
-  border: 1.5px solid var(--border);
-  border-radius: var(--r-lg);
-  padding: 30px 28px;
-  box-shadow: var(--shadow-sm);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
+  border-radius: var(--r-md);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  padding: 26px 24px;
+  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
   display: flex;
   flex-direction: column;
   gap: 16px;
   transition: box-shadow var(--t), transform var(--t), border-color var(--t);
 }
 .project-card:hover {
-  box-shadow: var(--shadow-lg);
-  transform: translateY(-5px);
-  border-color: rgba(79, 110, 247, 0.3);
+  box-shadow: 0 3px 14px rgba(0,0,0,0.1);
+  transform: translateY(-2px);
+  border-color: rgba(255,255,255,0.1);
 }
 
 .project-card-title {
   font-family: var(--font-display);
   font-size: 1.08rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
 }
 .project-card-desc {
   font-size: 0.88rem;
-  color: var(--text-body);
-  line-height: 1.7;
+  color: rgba(255,255,255,0.65);
+  line-height: 1.72;
   flex: 1;
 }
 
@@ -1178,7 +1342,7 @@ select:focus {
   font-size: 0.74rem;
   font-weight: 600;
   padding: 3px 11px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
 }
 .project-tag--skill        { background: var(--indigo-100); color: var(--indigo-700); }
 .project-tag--time         { background: var(--gray-100);   color: var(--gray-600);  }
@@ -1188,15 +1352,15 @@ select:focus {
 
 .project-card-footer {
   padding-top: 8px;
-  border-top: 1px solid var(--gray-100);
+  border-top: 1px solid var(--border-muted-soft);
 }
 .btn-details {
   display: block;
   width: 100%;
   padding: 11px 18px;
   background: transparent;
-  border: 1.5px solid var(--indigo-500);
-  color: var(--indigo-600);
+  border: 1.5px solid var(--border-muted);
+  color: rgba(255,255,255,0.82);
   border-radius: var(--r-xs);
   font-family: var(--font-body);
   font-size: 0.88rem;
@@ -1207,7 +1371,7 @@ select:focus {
   text-decoration: none;
 }
 .btn-details:hover {
-  background: var(--indigo-600);
+  background: rgba(255,255,255,0.1);
   color: var(--white);
   text-decoration: none;
 }
@@ -1215,9 +1379,23 @@ select:focus {
 /* ---- CTA Banner ------------------------------------------- */
 .cta-section {
   padding: 96px 32px;
-  background: linear-gradient(135deg, var(--indigo-800) 0%, var(--purple-700) 100%);
-  text-align: center;
+  background: var(--page-bg);
+  border-top: 1px solid var(--border-muted-soft);
+  position: relative;
+}
+.cta-section::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
+  z-index: 0;
+  pointer-events: none;
 }
+.cta-section > * {
+  position: relative;
+  z-index: 2;
+}
+.cta-inner { text-align: center; }
 .cta-inner h2 {
   font-family: var(--font-display);
   font-size: clamp(2rem, 4vw, 3rem);
@@ -1226,12 +1404,14 @@ select:focus {
   letter-spacing: -0.04em;
   line-height: 1.2;
   margin-bottom: 14px;
+  text-align: center;
 }
 .cta-accent { color: var(--yellow-300); }
 .cta-inner p {
   font-size: 1.05rem;
   color: rgba(255,255,255,0.72);
   margin-bottom: 36px;
+  text-align: center;
 }
 .btn-cta {
   display: inline-flex;
@@ -1243,19 +1423,20 @@ select:focus {
   font-family: var(--font-display);
   font-size: 1rem;
   font-weight: 700;
-  border-radius: var(--r-full);
-  box-shadow: 0 6px 24px rgba(251, 191, 36, 0.45);
-  transition: background var(--t), transform var(--t);
+  border-radius: var(--r-md);
+  box-shadow: 0 10px 36px rgba(251, 191, 36, 0.4), inset 0 1px 0 rgba(255,255,255,0.5);
+  transition: background var(--t), transform var(--t), box-shadow var(--t);
 }
 .btn-cta:hover {
   background: var(--yellow-300);
   transform: translateY(-2px);
+  box-shadow: 0 14px 44px rgba(251, 191, 36, 0.5), inset 0 1px 0 rgba(255,255,255,0.6);
   text-decoration: none;
 }
 
 /* ---- Footer ----------------------------------------------- */
 .footer {
-  background: var(--indigo-900);
+  background: var(--page-bg);
   padding: 64px 32px 0;
 }
 .footer-inner {
@@ -1310,10 +1491,10 @@ select:focus {
 .footer-bottom-links a:hover { color: rgba(255,255,255,0.7); text-decoration: none; }
 
 /* ---- Detail Page ------------------------------------------ */
-.detail-page { background: var(--gray-50); }
+.detail-page { background: var(--page-bg); }
 
 .detail-hero {
-  background: linear-gradient(135deg, var(--indigo-900) 0%, var(--indigo-800) 50%, var(--purple-700) 100%);
+  background: var(--page-bg);
   padding: 108px 0 60px;
   position: relative;
   overflow: hidden;
@@ -1358,7 +1539,7 @@ select:focus {
   letter-spacing: 0.04em;
   text-transform: uppercase;
   padding: 4px 13px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
 }
 .detail-tag--level    { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
 .detail-tag--interest { background: rgba(6, 182, 212, 0.18); color: #a7f3f9; }
@@ -1423,7 +1604,11 @@ select:focus {
 .btn-view-code:hover { background: rgba(255,255,255,0.16); }
 
 /* Detail body */
-.detail-body { padding: 56px 0 96px; }
+.detail-body {
+  padding: 56px 0 96px;
+  background: var(--page-bg);
+  border-top: 1px solid var(--border-muted-soft);
+}
 .detail-grid {
   display: grid;
   grid-template-columns: 1fr 310px;
@@ -1432,11 +1617,13 @@ select:focus {
 }
 
 .detail-section {
-  background: var(--white);
-  border: 1px solid var(--border);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-md);
-  padding: 36px;
-  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  padding: 30px;
+  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
   margin-bottom: 24px;
 }
 .detail-section-header {
@@ -1457,11 +1644,11 @@ select:focus {
   font-family: var(--font-display);
   font-size: 1.1rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
 }
 .detail-section-sub {
   font-size: 0.87rem;
-  color: var(--text-body);
+  color: rgba(255,255,255,0.6);
   margin-bottom: 28px;
   margin-top: -14px;
 }
@@ -1473,7 +1660,7 @@ select:focus {
   align-items: flex-start;
   gap: 12px;
   font-size: 0.92rem;
-  color: var(--text-body);
+  color: rgba(255,255,255,0.66);
   line-height: 1.65;
 }
 .feature-check {
@@ -1511,8 +1698,8 @@ select:focus {
 }
 .roadmap-line {
   flex: 1;
-  width: 0;
-  border-left:2px dashed var(--border);
+  width: 2px;
+  background: var(--border-muted);
   margin: 4px 0;
 }
 .roadmap-step:last-child .roadmap-line { display: none; }
@@ -1524,11 +1711,11 @@ select:focus {
   color: var(--indigo-600);
   background: var(--indigo-100);
   padding: 2px 10px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
   letter-spacing: 0.04em;
   margin-bottom: 6px;
 }
-.roadmap-step-text { font-size: 0.92rem; color: var(--text-body); line-height: 1.65; }
+.roadmap-step-text { font-size: 0.92rem; color: rgba(255,255,255,0.66); line-height: 1.65; }
 
 /* Resources list */
 .resource-list { display: flex; flex-direction: column; gap: 10px; }
@@ -1538,38 +1725,42 @@ select:focus {
   align-items: center;
   gap: 8px;
   font-size: 0.9rem;
-  color: var(--indigo-600);
+  color: rgba(255,255,255,0.78);
   font-weight: 500;
   padding: 9px 14px;
-  background: var(--gray-50);
-  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-xs);
   width: 100%;
   transition: background var(--t), border-color var(--t);
 }
-.resource-link:hover { background: var(--indigo-100); border-color: rgba(79, 110, 247, 0.3); text-decoration: none; }
+.resource-link:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); text-decoration: none; }
 .resource-link span { flex: 1; }
-.resource-plain { font-size: 0.9rem; color: var(--text-body); padding: 8px 0; }
+.resource-plain { font-size: 0.9rem; color: rgba(255,255,255,0.66); padding: 8px 0; }
 
 /* Sidebar */
 .detail-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; }
 .sidebar-card {
-  background: var(--white);
-  border: 1px solid var(--border);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-md);
-  padding: 24px;
-  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  padding: 20px;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
 }
 .sidebar-card--code {
-  background: linear-gradient(135deg, var(--indigo-50) 0%, var(--purple-100) 100%);
-  border-color: rgba(79, 110, 247, 0.18);
+  background: rgba(79, 110, 247, 0.08);
+  border-color: rgba(79, 110, 247, 0.15);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
 .sidebar-card-title {
   display: flex; align-items: center; gap: 8px;
   font-family: var(--font-display);
   font-size: 0.82rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.85);
   margin-bottom: 16px;
   text-transform: uppercase;
   letter-spacing: 0.07em;
@@ -1578,20 +1769,20 @@ select:focus {
 .tech-tag {
   font-size: 0.8rem;
   font-weight: 500;
-  color: var(--gray-700);
-  background: var(--gray-100);
-  border: 1px solid var(--border);
+  color: rgba(255,255,255,0.7);
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.1);
   padding: 4px 12px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
 }
 .stats-list { display: flex; flex-direction: column; gap: 12px; }
 .stats-list li { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; }
-.stats-label { color: var(--text-body); }
-.stats-value { font-weight: 600; color: var(--text-heading); font-size: 0.85rem; }
-.stats-value--beginner     { color: #065f46; }
-.stats-value--intermediate { color: #78350f; }
-.stats-value--advanced     { color: #7f1d1d; }
-.sidebar-card-desc { font-size: 0.85rem; color: var(--text-body); line-height: 1.65; margin-bottom: 16px; }
+.stats-label { color: rgba(255,255,255,0.6); }
+.stats-value { font-weight: 600; color: rgba(255,255,255,0.85); font-size: 0.85rem; }
+.stats-value--beginner     { color: #86efac; }
+.stats-value--intermediate { color: #fde68a; }
+.stats-value--advanced     { color: #fca5a5; }
+.sidebar-card-desc { font-size: 0.85rem; color: rgba(255,255,255,0.65); line-height: 1.65; margin-bottom: 16px; }
 .sidebar-code-actions { display: flex; gap: 10px; }
 .btn-view-code-sm {
   flex: 1;
@@ -1664,7 +1855,7 @@ select:focus {
   color: var(--yellow-400);
   padding: 5px 14px;
   border: 1px solid rgba(251,191,36,0.3);
-  border-radius: var(--r-full);
+  border-radius: var(--r-sm);
   transition: background var(--t);
 }
 .code-panel-download:hover { background: rgba(251,191,36,0.1); text-decoration: none; }
@@ -1722,7 +1913,7 @@ select:focus {
   font-size: 0.88rem;
   font-weight: 600;
   padding: 10px 20px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-sm);
   box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45);
   z-index: 500;
   opacity: 0;
@@ -1765,10 +1956,10 @@ select:focus {
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
   margin-bottom: 12px;
 }
-.error-page-inner p { color: var(--text-body); margin-bottom: 32px; }
+.error-page-inner p { color: rgba(255,255,255,0.64); margin-bottom: 32px; }
 
 /* Primary button (used in error pages) */
 .btn-primary {
@@ -1800,9 +1991,20 @@ select:focus {
 
 @media (max-width: 860px) {
   .features-grid { grid-template-columns: 1fr; }
-  .steps-grid { flex-direction: column; align-items: stretch; }
-  .step-connector { display: none; }
-  .step-card { max-width: 100%; }
+  .steps-grid {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+  .steps-grid::before {
+    left: 28px;
+    right: auto;
+    top: 34px;
+    bottom: 34px;
+    width: 1px;
+    height: auto;
+    background: linear-gradient(180deg, transparent, rgba(126, 231, 255, 0.2), rgba(252, 211, 77, 0.18), transparent);
+  }
+  .steps-grid::after { display: none; }
 }
 
 @media (max-width: 640px) {
diff --git a/templates/index.html b/templates/index.html
index 49556f7..275b7ec 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,9 +9,7 @@
   <title>DevPath — Find Projects Based On Your Skills</title>
   <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
   <link rel="stylesheet" href="/static/style.css" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap"
-    rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
 </head>
 
 <body>
@@ -243,23 +241,11 @@ <h2 class="section-title">From Your Skills to Your<br>Next Project in Minutes</h
           <h3>Enter Your Skills</h3>
           <p>Type your programming skills or click quick-select chips. Add as many as you like.</p>
         </div>
-        <div class="step-connector">
-          <svg width="32" height="16" viewBox="0 0 32 16">
-            <path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none"
-              stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-        </div>
         <div class="step-card">
           <div class="step-num">02</div>
           <h3>Set Your Preferences</h3>
           <p>Select your experience level, area of interest, and how much time you can commit.</p>
         </div>
-        <div class="step-connector">
-          <svg width="32" height="16" viewBox="0 0 32 16">
-            <path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none"
-              stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-        </div>
         <div class="step-card">
           <div class="step-num">03</div>
           <h3>Get Matched Projects</h3>
@@ -281,44 +267,45 @@ <h2 class="section-title">Everything You Need to Start Building</h2>
       <div class="features-grid">
 
         <div class="feature-card feature-card--pink">
-          <div class="feature-card-icon">
-            <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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-              <circle cx="9" cy="7" r="4" />
-              <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-              <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-            </svg>
+          <div class="feature-terminal-bar">
+            <span class="ft-dot ft-dot--red"></span>
+            <span class="ft-dot ft-dot--amber"></span>
+            <span class="ft-dot ft-dot--green"></span>
+            <span class="ft-command">&gt; personalized_matches</span>
           </div>
-          <h3>Personalized Matches</h3>
+          <span class="feature-meta">[INFO]</span>
+          <h3>Projects matched against:</h3>
           <p>Projects are scored against your exact skills, level, and interest — not pulled from a generic list.</p>
-          <a href="#find-project" class="feature-card-link">Try it now</a>
+          <div class="feature-status">STATUS: READY</div>
+          <a href="#find-project" class="feature-card-link">run match</a>
         </div>
 
         <div class="feature-card feature-card--yellow">
-          <div class="feature-card-icon">
-            <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="22 12 18 12 15 21 9 3 6 12 2 12" />
-            </svg>
+          <div class="feature-terminal-bar">
+            <span class="ft-dot ft-dot--red"></span>
+            <span class="ft-dot ft-dot--amber"></span>
+            <span class="ft-dot ft-dot--green"></span>
+            <span class="ft-command">&gt; roadmap.generate()</span>
           </div>
-          <h3>Step-by-Step Roadmaps</h3>
+          <span class="feature-meta">[OUTPUT]</span>
+          <h3>Build path returned:</h3>
           <p>Each project includes a numbered roadmap so you always know what to build next, without guessing.</p>
-          <a href="#find-project" class="feature-card-link">Explore roadmaps</a>
+          <div class="feature-status">STATUS: ORDERED</div>
+          <a href="#find-project" class="feature-card-link">view roadmap</a>
         </div>
 
         <div class="feature-card feature-card--purple">
-          <div class="feature-card-icon">
-            <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 points="8 6 2 12 8 18" />
-            </svg>
+          <div class="feature-terminal-bar">
+            <span class="ft-dot ft-dot--red"></span>
+            <span class="ft-dot ft-dot--amber"></span>
+            <span class="ft-dot ft-dot--green"></span>
+            <span class="ft-command">&gt; starter_code --init</span>
           </div>
-          <h3>Starter Code Included</h3>
-          <p>Download a working template for every project. Skip the blank-page problem and start building immediately.
-          </p>
-          <a href="#find-project" class="feature-card-link">Get starter code</a>
+          <span class="feature-meta">[READY]</span>
+          <h3>Boilerplate included:</h3>
+          <p>Download a working template for every project. Skip the blank-page problem and start building immediately.</p>
+          <div class="feature-status">STATUS: BUILDABLE</div>
+          <a href="#find-project" class="feature-card-link">initialize project</a>
         </div>
 
       </div>
diff --git a/templates/project.html b/templates/project.html
index 21e3ae6..8feff43 100644
--- a/templates/project.html
+++ b/templates/project.html
@@ -7,7 +7,7 @@
   <title>{{ project.title }} — DevPath</title>
   <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
   <link rel="stylesheet" href="/static/style.css" />
-  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
 </head>
 <body class="detail-page">