diff --git a/css/style.css b/css/style.css
index cae3f64..4a49f89 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,612 +4,1664 @@
 
 /* === CSS Custom Properties === */
 :root {
-    --bg-primary: #0a0a1a;
-    --bg-secondary: #111128;
-    --bg-tertiary: #1a1a3e;
-    --bg-card: #16163a;
-    --bg-glass: rgba(22, 22, 58, 0.7);
-    --bg-hover: #222255;
-    --text-primary: #e8e8ff;
-    --text-secondary: #a0a0cc;
-    --text-muted: #6a6a99;
-    --accent: #7c5cfc;
-    --accent-hover: #9a7aff;
-    --accent-glow: rgba(124, 92, 252, 0.3);
-    --gradient-1: #7c5cfc;
-    --gradient-2: #ff6b9d;
-    --gradient-3: #00d4ff;
-    --border: rgba(124, 92, 252, 0.2);
-    --border-hover: rgba(124, 92, 252, 0.4);
-    --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.4);
-    --radius: 12px;
-    --radius-lg: 20px;
-    --radius-sm: 8px;
-    --transition: 0.3s ease;
-    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
-    --font-mono: 'Fira Code', 'Cascadia Code', monospace;
-    --cat-fundamentals: #7c5cfc;
-    --cat-intermediate: #00d4ff;
-    --cat-advanced: #ff6b9d;
-    --cat-tools: #ffc107;
-    --navbar-height: 64px;
+  --bg-primary: #0a0a1a;
+  --bg-secondary: #111128;
+  --bg-tertiary: #1a1a3e;
+  --bg-card: #16163a;
+  --bg-glass: rgba(22, 22, 58, 0.7);
+  --bg-hover: #222255;
+  --text-primary: #e8e8ff;
+  --text-secondary: #a0a0cc;
+  --text-muted: #6a6a99;
+  --accent: #7c5cfc;
+  --accent-hover: #9a7aff;
+  --accent-glow: rgba(124, 92, 252, 0.3);
+  --gradient-1: #7c5cfc;
+  --gradient-2: #ff6b9d;
+  --gradient-3: #00d4ff;
+  --border: rgba(124, 92, 252, 0.2);
+  --border-hover: rgba(124, 92, 252, 0.4);
+  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.4);
+  --radius: 12px;
+  --radius-lg: 20px;
+  --radius-sm: 8px;
+  --transition: 0.3s ease;
+  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
+  --font-mono: "Fira Code", "Cascadia Code", monospace;
+  --cat-fundamentals: #7c5cfc;
+  --cat-intermediate: #00d4ff;
+  --cat-advanced: #ff6b9d;
+  --cat-tools: #ffc107;
+  --navbar-height: 64px;
 }
 
 [data-theme="light"] {
-    --bg-primary: #f5f5ff;
-    --bg-secondary: #eeeef8;
-    --bg-tertiary: #e0e0f0;
-    --bg-card: #ffffff;
-    --bg-glass: rgba(255, 255, 255, 0.7);
-    --bg-hover: #d8d8f0;
-    --text-primary: #1a1a3e;
-    --text-secondary: #444466;
-    --text-muted: #888899;
-    --border: rgba(124, 92, 252, 0.15);
-    --border-hover: rgba(124, 92, 252, 0.3);
-    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
-    --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.12);
+  --bg-primary: #f5f5ff;
+  --bg-secondary: #eeeef8;
+  --bg-tertiary: #e0e0f0;
+  --bg-card: #ffffff;
+  --bg-glass: rgba(255, 255, 255, 0.7);
+  --bg-hover: #d8d8f0;
+  --text-primary: #1a1a3e;
+  --text-secondary: #444466;
+  --text-muted: #888899;
+  --border: rgba(124, 92, 252, 0.15);
+  --border-hover: rgba(124, 92, 252, 0.3);
+  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.12);
 }
 
 /* === Reset & Base === */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html { scroll-behavior: smooth; font-size: 16px; }
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html {
+  scroll-behavior: smooth;
+  font-size: 16px;
+}
 body {
-    font-family: var(--font);
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    line-height: 1.6;
-    min-height: 100vh;
-    overflow-x: hidden;
-    transition: background var(--transition), color var(--transition);
+  font-family: var(--font);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+  transition:
+    background var(--transition),
+    color var(--transition);
 }
 
 /* === Scrollbar === */
-::-webkit-scrollbar { width: 8px; }
-::-webkit-scrollbar-track { background: var(--bg-secondary); }
-::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--accent);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-hover);
+}
 
 /* === Typography === */
-h1 { font-size: 3rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
-h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; }
-h3 { font-size: 1.5rem; font-weight: 600; }
-h4 { font-size: 1.125rem; font-weight: 600; }
-p { color: var(--text-secondary); }
-a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
-a:hover { color: var(--accent-hover); }
+h1 {
+  font-size: 3rem;
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+h2 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+h4 {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+p {
+  color: var(--text-secondary);
+}
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color var(--transition);
+}
+a:hover {
+  color: var(--accent-hover);
+}
 
 /* === Layout === */
-.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
-.section { padding: 80px 0; }
-.section-alt { background: var(--bg-secondary); }
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+.section {
+  padding: 80px 0;
+}
+.section-alt {
+  background: var(--bg-secondary);
+}
 
 /* === Navbar === */
 .navbar {
-    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
-    background: var(--bg-glass);
-    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border);
-    height: var(--navbar-height);
-    transition: background var(--transition);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: var(--bg-glass);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  height: var(--navbar-height);
+  transition: background var(--transition);
 }
 .nav-container {
-    max-width: 1200px; margin: 0 auto; padding: 0 24px;
-    display: flex; align-items: center; justify-content: space-between;
-    height: 100%;
-}
-.nav-logo { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
-.nav-logo:hover { color: var(--text-primary); }
-.nav-links { display: flex; gap: 24px; align-items: center; }
-.nav-links a { color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; }
-.nav-links a:hover { color: var(--text-primary); }
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+}
+.nav-logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.nav-logo:hover {
+  color: var(--text-primary);
+}
+.nav-links {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+.nav-links a {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+.nav-links a:hover {
+  color: var(--text-primary);
+}
 .nav-cta {
-    background: var(--accent) !important; color: #fff !important;
-    padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600 !important;
+  background: var(--accent) !important;
+  color: #fff !important;
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  font-weight: 600 !important;
+}
+.nav-cta:hover {
+  background: var(--accent-hover) !important;
+}
+.hamburger {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  flex-direction: column;
+  gap: 5px;
+}
+.hamburger span {
+  display: block;
+  width: 24px;
+  height: 2px;
+  background: var(--text-primary);
+  transition: var(--transition);
+  border-radius: 2px;
 }
-.nav-cta:hover { background: var(--accent-hover) !important; }
-.hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; }
-.hamburger span { display: block; width: 24px; height: 2px; background: var(--text-primary); transition: var(--transition); border-radius: 2px; }
 
 /* === Hero === */
 .hero {
-    min-height: 100vh; display: flex; align-items: center; justify-content: center;
-    padding: 120px 24px 80px; text-align: center; position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 120px 24px 80px;
+  text-align: center;
+  position: relative;
+}
+.hero-content {
+  max-width: 800px;
+  z-index: 1;
 }
-.hero-content { max-width: 800px; z-index: 1; }
 .hero-badge {
-    display: inline-block; padding: 6px 16px; border-radius: 50px;
-    background: var(--bg-glass); border: 1px solid var(--border);
-    font-size: 0.85rem; font-weight: 500; color: var(--accent);
-    backdrop-filter: blur(10px); margin-bottom: 24px;
+  display: inline-block;
+  padding: 6px 16px;
+  border-radius: 50px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--accent);
+  backdrop-filter: blur(10px);
+  margin-bottom: 24px;
+}
+.hero-title {
+  margin-bottom: 24px;
+}
+.hero-subtitle {
+  color: var(--text-secondary);
+  font-weight: 400;
+  font-size: 0.7em;
 }
-.hero-title { margin-bottom: 24px; }
-.hero-subtitle { color: var(--text-secondary); font-weight: 400; font-size: 0.7em; }
 .gradient-text {
-    background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
-    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-    background-clip: text;
-    background-size: 200% 200%;
-    animation: gradientShift 4s ease infinite;
+  background: linear-gradient(
+    135deg,
+    var(--gradient-1),
+    var(--gradient-2),
+    var(--gradient-3)
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  background-size: 200% 200%;
+  animation: gradientShift 4s ease infinite;
+}
+@keyframes gradientShift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+.hero-desc {
+  font-size: 1.15rem;
+  margin-bottom: 32px;
+  max-width: 600px;
+  margin-inline: auto;
+}
+.hero-buttons {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 48px;
 }
-@keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
-.hero-desc { font-size: 1.15rem; margin-bottom: 32px; max-width: 600px; margin-inline: auto; }
-.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
 
 /* === Buttons === */
 .btn {
-    display: inline-flex; align-items: center; gap: 8px;
-    padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 600;
-    font-size: 0.95rem; border: none; cursor: pointer; transition: all var(--transition);
-    text-decoration: none;
-}
-.btn-primary { background: var(--accent); color: #fff; }
-.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-glow); color: #fff; }
-.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
-.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-hover); color: var(--text-primary); }
-.btn-sm { padding: 8px 16px; font-size: 0.8rem; border-radius: var(--radius-sm); background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); }
-.btn-sm:hover { background: var(--bg-hover); color: var(--text-primary); }
-.btn-lg { padding: 16px 32px; font-size: 1.1rem; }
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  font-size: 0.95rem;
+  border: none;
+  cursor: pointer;
+  transition: all var(--transition);
+  text-decoration: none;
+}
+.btn-primary {
+  background: var(--accent);
+  color: #fff;
+}
+.btn-primary:hover {
+  background: var(--accent-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px var(--accent-glow);
+  color: #fff;
+}
+.btn-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+.btn-secondary:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-hover);
+  color: var(--text-primary);
+}
+.btn-sm {
+  padding: 8px 16px;
+  font-size: 0.8rem;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+.btn-sm:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.btn-lg {
+  padding: 16px 32px;
+  font-size: 1.1rem;
+}
 
 /* === Stats === */
-.hero-stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
-.stat-item { text-align: center; }
-.stat-number { display: block; font-size: 2rem; font-weight: 800; color: var(--accent); }
-.stat-suffix { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
-.stat-label { font-size: 0.85rem; color: var(--text-muted); }
+.hero-stats {
+  display: flex;
+  gap: 32px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.stat-item {
+  text-align: center;
+}
+.stat-number {
+  display: block;
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--accent);
+}
+.stat-suffix {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--accent);
+}
+.stat-label {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
 
 /* === Section Title === */
-.section-title { text-align: center; margin-bottom: 16px; }
-.section-subtitle { text-align: center; color: var(--text-muted); margin-bottom: 48px; font-size: 1.1rem; }
+.section-title {
+  text-align: center;
+  margin-bottom: 16px;
+}
+.section-subtitle {
+  text-align: center;
+  color: var(--text-muted);
+  margin-bottom: 48px;
+  font-size: 1.1rem;
+}
 
 /* === Roadmaps Grid === */
 .roadmaps-grid {
-    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 24px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 24px;
 }
 .roadmap-card {
-    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
-    padding: 32px; cursor: pointer; transition: all var(--transition); position: relative; overflow: hidden;
-    text-decoration: none; color: inherit; display: block;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  cursor: pointer;
+  transition: all var(--transition);
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  display: block;
 }
 .roadmap-card::before {
-    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
-    background: linear-gradient(90deg, var(--gradient-1), var(--gradient-2));
-    opacity: 0; transition: opacity var(--transition);
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--gradient-1), var(--gradient-2));
+  opacity: 0;
+  transition: opacity var(--transition);
 }
 .roadmap-card:hover {
-    transform: translateY(-4px); border-color: var(--border-hover);
-    box-shadow: var(--shadow-lg);
+  transform: translateY(-4px);
+  border-color: var(--border-hover);
+  box-shadow: var(--shadow-lg);
+}
+.roadmap-card:hover::before {
+  opacity: 1;
+}
+.roadmap-card:hover .roadmap-card-icon {
+  transform: scale(1.1);
+}
+.roadmap-card-icon {
+  font-size: 2.5rem;
+  margin-bottom: 16px;
+  display: block;
+  transition: transform var(--transition);
+}
+.roadmap-card h3 {
+  margin-bottom: 8px;
+  font-size: 1.25rem;
+}
+.roadmap-card p {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  margin-bottom: 16px;
+}
+.roadmap-card-meta {
+  display: flex;
+  gap: 16px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.roadmap-card-meta span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
-.roadmap-card:hover::before { opacity: 1; }
-.roadmap-card:hover .roadmap-card-icon { transform: scale(1.1); }
-.roadmap-card-icon { font-size: 2.5rem; margin-bottom: 16px; display: block; transition: transform var(--transition); }
-.roadmap-card h3 { margin-bottom: 8px; font-size: 1.25rem; }
-.roadmap-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 16px; }
-.roadmap-card-meta { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-muted); }
-.roadmap-card-meta span { display: flex; align-items: center; gap: 4px; }
 
 /* === Features Grid === */
-.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 24px;
+}
 .feature-card {
-    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 24px; transition: all var(--transition);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
+  transition: all var(--transition);
+}
+.feature-card:hover {
+  border-color: var(--border-hover);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
+}
+.feature-icon {
+  font-size: 2rem;
+  margin-bottom: 12px;
+}
+.feature-card h3 {
+  margin-bottom: 8px;
+  font-size: 1.1rem;
+}
+.feature-card p {
+  font-size: 0.9rem;
+  color: var(--text-muted);
 }
-.feature-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow); }
-.feature-icon { font-size: 2rem; margin-bottom: 12px; }
-.feature-card h3 { margin-bottom: 8px; font-size: 1.1rem; }
-.feature-card p { font-size: 0.9rem; color: var(--text-muted); }
 
 /* === Testimonials === */
-.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
+.testimonials-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+}
 .testimonial-card {
-    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 32px; transition: all var(--transition);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 32px;
+  transition: all var(--transition);
+}
+.testimonial-card:hover {
+  border-color: var(--border-hover);
+}
+.testimonial-text {
+  font-size: 1rem;
+  line-height: 1.7;
+  margin-bottom: 20px;
+  font-style: italic;
+  color: var(--text-secondary);
+}
+.testimonial-author {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
-.testimonial-card:hover { border-color: var(--border-hover); }
-.testimonial-text { font-size: 1rem; line-height: 1.7; margin-bottom: 20px; font-style: italic; color: var(--text-secondary); }
-.testimonial-author { display: flex; align-items: center; gap: 12px; }
 .author-avatar {
-    width: 40px; height: 40px; border-radius: 50%; background: var(--accent);
-    display: flex; align-items: center; justify-content: center; color: #fff;
-    font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 0.8rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.testimonial-author div {
+  font-size: 0.85rem;
+}
+.testimonial-author strong {
+  color: var(--text-primary);
 }
-.testimonial-author div { font-size: 0.85rem; }
-.testimonial-author strong { color: var(--text-primary); }
 
 /* === FAQ === */
-.faq-list { max-width: 700px; margin: 0 auto; }
-.faq-item { border-bottom: 1px solid var(--border); }
+.faq-list {
+  max-width: 700px;
+  margin: 0 auto;
+}
+.faq-item {
+  border-bottom: 1px solid var(--border);
+}
 .faq-question {
-    width: 100%; background: none; border: none; padding: 20px 0;
-    font-size: 1rem; font-weight: 600; color: var(--text-primary); cursor: pointer;
-    display: flex; justify-content: space-between; align-items: center;
-    text-align: left; font-family: var(--font); transition: color var(--transition);
-}
-.faq-question:hover { color: var(--accent); }
-.faq-question span { font-size: 1.5rem; color: var(--accent); transition: transform var(--transition); }
-.faq-item.active .faq-question span { transform: rotate(45deg); }
-.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
-.faq-item.active .faq-answer { max-height: 200px; }
-.faq-answer p { padding-bottom: 20px; font-size: 0.95rem; }
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 20px 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  font-family: var(--font);
+  transition: color var(--transition);
+}
+.faq-question:hover {
+  color: var(--accent);
+}
+.faq-question span {
+  font-size: 1.5rem;
+  color: var(--accent);
+  transition: transform var(--transition);
+}
+.faq-item.active .faq-question span {
+  transform: rotate(45deg);
+}
+.faq-answer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+}
+.faq-item.active .faq-answer {
+  max-height: 200px;
+}
+.faq-answer p {
+  padding-bottom: 20px;
+  font-size: 0.95rem;
+}
 
 /* === CTA === */
-.cta-section { padding: 80px 0; }
+.cta-section {
+  padding: 80px 0;
+}
 .cta-card {
-    background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
-    border-radius: var(--radius-lg); padding: 64px 32px; text-align: center;
+  background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+  border-radius: var(--radius-lg);
+  padding: 64px 32px;
+  text-align: center;
+}
+.cta-card h2 {
+  color: #fff;
+  margin-bottom: 12px;
+  font-size: 2rem;
+}
+.cta-card p {
+  color: rgba(255, 255, 255, 0.85);
+  margin-bottom: 32px;
+  font-size: 1.1rem;
+}
+.cta-card .btn-primary {
+  background: #fff;
+  color: var(--gradient-1);
+}
+.cta-card .btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
 }
-.cta-card h2 { color: #fff; margin-bottom: 12px; font-size: 2rem; }
-.cta-card p { color: rgba(255,255,255,0.85); margin-bottom: 32px; font-size: 1.1rem; }
-.cta-card .btn-primary { background: #fff; color: var(--gradient-1); }
-.cta-card .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
 
 /* === Footer === */
-.footer { padding: 48px 0; border-top: 1px solid var(--border); }
-.footer-content { text-align: center; }
-.footer-brand { margin-bottom: 24px; }
-.footer-brand p { font-size: 0.9rem; margin-top: 8px; }
-.footer-links { display: flex; gap: 24px; justify-content: center; margin-bottom: 24px; }
-.footer-links a { color: var(--text-muted); font-size: 0.9rem; }
-.footer-bottom { font-size: 0.8rem; color: var(--text-muted); }
+.footer {
+  padding: 48px 0;
+  border-top: 1px solid var(--border);
+}
+.footer-content {
+  text-align: center;
+}
+.footer-brand {
+  margin-bottom: 24px;
+}
+.footer-brand p {
+  font-size: 0.9rem;
+  margin-top: 8px;
+}
+.footer-links {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+.footer-links a {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+.footer-bottom {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
 
 /* === Back to Top === */
 .back-to-top {
-    position: fixed; bottom: 24px; right: 24px; z-index: 999;
-    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
-    background: var(--bg-glass); backdrop-filter: blur(10px);
-    color: var(--text-primary); font-size: 1.2rem; cursor: pointer;
-    transition: all var(--transition); opacity: 0; transform: translateY(20px); pointer-events: none;
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 999;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--bg-glass);
+  backdrop-filter: blur(10px);
+  color: var(--text-primary);
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: all var(--transition);
+  opacity: 0;
+  transform: translateY(20px);
+  pointer-events: none;
+}
+.back-to-top.visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.back-to-top:hover {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
 }
-.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
-.back-to-top:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
 
 /* === Theme Toggle === */
 .theme-toggle {
-    position: fixed; bottom: 24px; left: 24px; z-index: 999;
-    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
-    background: var(--bg-glass); backdrop-filter: blur(10px);
-    font-size: 1.2rem; cursor: pointer; transition: all var(--transition);
+  position: fixed;
+  bottom: 24px;
+  left: 24px;
+  z-index: 999;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--bg-glass);
+  backdrop-filter: blur(10px);
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.theme-toggle:hover {
+  background: var(--bg-hover);
 }
-.theme-toggle:hover { background: var(--bg-hover); }
 
 /* === Particles Canvas === */
 #particles {
-    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-    z-index: -1; pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: none;
 }
 
 /* === Roadmap Page === */
-.roadmap-page .hero { min-height: auto; padding: 100px 24px 32px; }
-.back-link { display: inline-flex; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 16px; }
-.back-link:hover { color: var(--accent); }
-.roadmap-header { background: var(--bg-glass); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
-.roadmap-title-area { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
-.roadmap-icon { font-size: 2.5rem; }
-.roadmap-header h1 { font-size: 2rem; }
-.roadmap-desc { color: var(--text-muted); margin-bottom: 24px; }
-
-.roadmap-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
-.search-box { flex: 1; min-width: 200px; }
+.roadmap-page .hero {
+  min-height: auto;
+  padding: 100px 24px 32px;
+}
+.back-link {
+  display: inline-flex;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 16px;
+}
+.back-link:hover {
+  color: var(--accent);
+}
+.roadmap-header {
+  background: var(--bg-glass);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+}
+.roadmap-title-area {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+.roadmap-icon {
+  font-size: 2.5rem;
+}
+.roadmap-header h1 {
+  font-size: 2rem;
+}
+.roadmap-desc {
+  color: var(--text-muted);
+  margin-bottom: 24px;
+}
+
+.roadmap-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.search-box {
+  flex: 1;
+  min-width: 200px;
+}
 .search-box input {
-    width: 100%; padding: 10px 16px; border-radius: var(--radius-sm);
-    border: 1px solid var(--border); background: var(--bg-primary);
-    color: var(--text-primary); font-family: var(--font); font-size: 0.9rem;
-    transition: border-color var(--transition);
+  width: 100%;
+  padding: 10px 16px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: var(--font);
+  font-size: 0.9rem;
+  transition: border-color var(--transition);
+}
+.search-box input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.filter-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
 }
-.search-box input:focus { outline: none; border-color: var(--accent); }
-.filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
 .filter-btn {
-    padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
-    background: transparent; color: var(--text-muted); font-size: 0.8rem;
-    cursor: pointer; transition: all var(--transition); font-family: var(--font);
+  padding: 8px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all var(--transition);
+  font-family: var(--font);
+}
+.filter-btn:hover {
+  border-color: var(--border-hover);
+  color: var(--text-primary);
+}
+.filter-btn.active {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+.action-buttons {
+  display: flex;
+  gap: 8px;
 }
-.filter-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
-.filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
-.action-buttons { display: flex; gap: 8px; }
 
 /* === Progress Bar === */
-.progress-bar-container { display: flex; align-items: center; gap: 12px; }
-.progress-bar { flex: 1; height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
-.progress-fill { height: 100%; background: linear-gradient(90deg, var(--gradient-1), var(--gradient-2)); border-radius: 3px; transition: width 0.5s ease; width: 0%; }
-.progress-text { font-size: 0.85rem; font-weight: 600; color: var(--accent); min-width: 40px; }
+.progress-bar-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.progress-bar {
+  flex: 1;
+  height: 6px;
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--gradient-1), var(--gradient-2));
+  border-radius: 3px;
+  transition: width 0.5s ease;
+  width: 0%;
+}
+.progress-text {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--accent);
+  min-width: 40px;
+}
 
 /* === Roadmap Layout === */
-.roadmap-main { padding: 40px 0 80px; }
-.roadmap-layout { display: flex; gap: 24px; }
+.roadmap-main {
+  padding: 40px 0 80px;
+}
+.roadmap-layout {
+  display: flex;
+  gap: 24px;
+}
 
 /* === Minimap === */
 .minimap {
-    position: sticky; top: 80px; width: 200px; min-width: 200px; height: fit-content;
-    max-height: calc(100vh - 100px); overflow-y: auto;
-    background: var(--bg-card); border: 1px solid var(--border);
-    border-radius: var(--radius); padding: 16px;
+  position: sticky;
+  top: 80px;
+  width: 200px;
+  min-width: 200px;
+  height: fit-content;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+}
+.minimap-title {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 12px;
 }
-.minimap-title { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
 .minimap-node {
-    font-size: 0.75rem; padding: 4px 8px; border-radius: 4px;
-    color: var(--text-muted); cursor: pointer; transition: all var(--transition);
-    margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all var(--transition);
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.minimap-node:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.minimap-node.completed {
+  color: var(--cat-fundamentals);
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+.minimap-node.active {
+  background: var(--accent);
+  color: #fff;
 }
-.minimap-node:hover { background: var(--bg-hover); color: var(--text-primary); }
-.minimap-node.completed { color: var(--cat-fundamentals); text-decoration: line-through; opacity: 0.6; }
-.minimap-node.active { background: var(--accent); color: #fff; }
 
 /* === Roadmap Nodes === */
-.roadmap-nodes { flex: 1; max-width: 100%; }
+.roadmap-nodes {
+  flex: 1;
+  max-width: 100%;
+}
 .node {
-    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
-    margin-bottom: 12px; transition: all var(--transition); position: relative;
-    border-left: 3px solid var(--cat-fundamentals);
-}
-.node[data-category="intermediate"] { border-left-color: var(--cat-intermediate); }
-.node[data-category="advanced"] { border-left-color: var(--cat-advanced); }
-.node[data-category="tools"] { border-left-color: var(--cat-tools); }
-.node:hover { border-color: var(--border-hover); box-shadow: var(--shadow); }
-.node.completed { opacity: 0.7; }
-.node.completed .node-title { text-decoration: line-through; }
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 12px;
+  transition: all var(--transition);
+  position: relative;
+  border-left: 3px solid var(--cat-fundamentals);
+}
+.node[data-category="intermediate"] {
+  border-left-color: var(--cat-intermediate);
+}
+.node[data-category="advanced"] {
+  border-left-color: var(--cat-advanced);
+}
+.node[data-category="tools"] {
+  border-left-color: var(--cat-tools);
+}
+.node:hover {
+  border-color: var(--border-hover);
+  box-shadow: var(--shadow);
+}
+.node.completed {
+  opacity: 0.7;
+}
+.node.completed .node-title {
+  text-decoration: line-through;
+}
 .node.completed::after {
-    content: '✓'; position: absolute; top: 12px; right: 12px;
-    color: #4caf50; font-weight: 700; font-size: 1.2rem;
+  content: "✓";
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  color: #4caf50;
+  font-weight: 700;
+  font-size: 1.2rem;
 }
 
 .node-header {
-    padding: 16px 20px; cursor: pointer; display: flex; align-items: center;
-    gap: 12px; user-select: none;
+  padding: 16px 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  user-select: none;
+}
+.node-icon {
+  font-size: 1.3rem;
+  flex-shrink: 0;
+}
+.node-title {
+  font-weight: 600;
+  font-size: 1rem;
+  flex: 1;
 }
-.node-icon { font-size: 1.3rem; flex-shrink: 0; }
-.node-title { font-weight: 600; font-size: 1rem; flex: 1; }
 .node-badge {
-    font-size: 0.7rem; padding: 2px 8px; border-radius: 50px;
-    font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border-radius: 50px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.badge-fundamentals {
+  background: rgba(124, 92, 252, 0.15);
+  color: var(--cat-fundamentals);
+}
+.badge-intermediate {
+  background: rgba(0, 212, 255, 0.15);
+  color: var(--cat-intermediate);
+}
+.badge-advanced {
+  background: rgba(255, 107, 157, 0.15);
+  color: var(--cat-advanced);
+}
+.badge-tools {
+  background: rgba(255, 193, 7, 0.15);
+  color: var(--cat-tools);
 }
-.badge-fundamentals { background: rgba(124,92,252,0.15); color: var(--cat-fundamentals); }
-.badge-intermediate { background: rgba(0,212,255,0.15); color: var(--cat-intermediate); }
-.badge-advanced { background: rgba(255,107,157,0.15); color: var(--cat-advanced); }
-.badge-tools { background: rgba(255,193,7,0.15); color: var(--cat-tools); }
 
 .node-body {
-    max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+}
+.node.expanded .node-body {
+  max-height: 600px;
+}
+.node-expand-icon {
+  color: var(--text-muted);
+  transition: transform var(--transition);
+  font-size: 0.8rem;
+}
+.node.expanded .node-expand-icon {
+  transform: rotate(90deg);
 }
-.node.expanded .node-body { max-height: 600px; }
-.node-expand-icon { color: var(--text-muted); transition: transform var(--transition); font-size: 0.8rem; }
-.node.expanded .node-expand-icon { transform: rotate(90deg); }
 
-.node-content { padding: 0 20px 20px; }
-.node-desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 16px; }
-.node-resources { display: flex; flex-direction: column; gap: 8px; }
+.node-content {
+  padding: 0 20px 20px;
+}
+.node-desc {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  margin-bottom: 16px;
+}
+.node-resources {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 .resource-link {
-    display: flex; align-items: center; gap: 8px;
-    padding: 8px 12px; border-radius: var(--radius-sm);
-    background: var(--bg-secondary); border: 1px solid var(--border);
-    font-size: 0.85rem; color: var(--text-secondary); transition: all var(--transition);
-    text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  transition: all var(--transition);
+  text-decoration: none;
+}
+.resource-link:hover {
+  background: var(--bg-hover);
+  color: var(--accent);
+  border-color: var(--border-hover);
+}
+.resource-type {
+  font-size: 0.75rem;
 }
-.resource-link:hover { background: var(--bg-hover); color: var(--accent); border-color: var(--border-hover); }
-.resource-type { font-size: 0.75rem; }
 
 /* === Connection Lines === */
 .node-connector {
-    width: 3px; height: 12px; margin-left: 32px;
-    background: var(--border); border-radius: 2px;
+  width: 3px;
+  height: 12px;
+  margin-left: 32px;
+  background: var(--border);
+  border-radius: 2px;
 }
 
 /* === Animations === */
 [data-animate] {
-    opacity: 0; transform: translateY(20px);
-    transition: opacity 0.6s ease, transform 0.6s ease;
+  opacity: 0;
+  transform: translateY(20px);
+  transition:
+    opacity 0.6s ease,
+    transform 0.6s ease;
+}
+[data-animate].visible {
+  opacity: 1;
+  transform: translateY(0);
 }
-[data-animate].visible { opacity: 1; transform: translateY(0); }
 
 /* === Print === */
 @media print {
-    .navbar, .back-to-top, .theme-toggle, .roadmap-controls, .minimap, #particles, .action-buttons, .hamburger { display: none !important; }
-    body { background: #fff; color: #000; }
-    .roadmap-header { position: static; background: #fff; }
-    .node { break-inside: avoid; border: 1px solid #ddd; background: #fff; }
-    .node.expanded .node-body { max-height: none; }
-    .roadmap-layout { display: block; }
-    .section { padding: 32px 0; }
+  .navbar,
+  .back-to-top,
+  .theme-toggle,
+  .roadmap-controls,
+  .minimap,
+  #particles,
+  .action-buttons,
+  .hamburger {
+    display: none !important;
+  }
+  body {
+    background: #fff;
+    color: #000;
+  }
+  .roadmap-header {
+    position: static;
+    background: #fff;
+  }
+  .node {
+    break-inside: avoid;
+    border: 1px solid #ddd;
+    background: #fff;
+  }
+  .node.expanded .node-body {
+    max-height: none;
+  }
+  .roadmap-layout {
+    display: block;
+  }
+  .section {
+    padding: 32px 0;
+  }
 }
 
 /* === Responsive === */
 @media (max-width: 768px) {
-    h1 { font-size: 2rem; }
-    h2 { font-size: 1.5rem; }
-    .nav-links { display: none; position: absolute; top: var(--navbar-height); left: 0; right: 0;
-        background: var(--bg-glass); backdrop-filter: blur(20px); flex-direction: column;
-        padding: 16px 24px; border-bottom: 1px solid var(--border); gap: 12px; }
-    .nav-links.open { display: flex; }
-    .hamburger { display: flex; }
-    .hero { padding: 100px 16px 60px; min-height: auto; }
-    .hero-stats { gap: 20px; }
-    .stat-number { font-size: 1.5rem; }
-    .roadmap-layout { flex-direction: column; }
-    .minimap { display: none; }
-    .roadmap-controls { flex-direction: column; }
-    .filter-buttons { overflow-x: auto; flex-wrap: nowrap; }
-    .section { padding: 48px 0; }
-    .container { padding: 0 16px; }
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.5rem;
+  }
+  .nav-links {
+    display: none;
+    position: absolute;
+    top: var(--navbar-height);
+    left: 0;
+    right: 0;
+    background: var(--bg-glass);
+    backdrop-filter: blur(20px);
+    flex-direction: column;
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--border);
+    gap: 12px;
+  }
+  .nav-links.open {
+    display: flex;
+  }
+  .hamburger {
+    display: flex;
+  }
+  .hero {
+    padding: 100px 16px 60px;
+    min-height: auto;
+  }
+  .hero-stats {
+    gap: 20px;
+  }
+  .stat-number {
+    font-size: 1.5rem;
+  }
+  .roadmap-layout {
+    flex-direction: column;
+  }
+  .minimap {
+    display: none;
+  }
+  .roadmap-controls {
+    flex-direction: column;
+  }
+  .filter-buttons {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+  }
+  .section {
+    padding: 48px 0;
+  }
+  .container {
+    padding: 0 16px;
+  }
 }
 
 @media (max-width: 480px) {
-    h1 { font-size: 1.75rem; }
-    .hero-buttons { flex-direction: column; align-items: center; }
-    .roadmaps-grid { grid-template-columns: 1fr; }
-    .features-grid { grid-template-columns: 1fr; }
-    .testimonials-grid { grid-template-columns: 1fr; }
+  h1 {
+    font-size: 1.75rem;
+  }
+  .hero-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  .roadmaps-grid {
+    grid-template-columns: 1fr;
+  }
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+  .testimonials-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* === Nav Badges === */
 .nav-badge {
-    background: var(--glass);
-    padding: 6px 12px;
-    border-radius: 20px;
-    font-size: 0.85rem;
-    cursor: pointer;
-    color: var(--text);
-    border: 1px solid var(--border);
-    backdrop-filter: blur(10px);
-    white-space: nowrap;
-}
-.nav-badge:hover { background: var(--accent); color: #fff; }
+  background: var(--glass);
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  color: var(--text);
+  border: 1px solid var(--border);
+  backdrop-filter: blur(10px);
+  white-space: nowrap;
+}
+.nav-badge:hover {
+  background: var(--accent);
+  color: #fff;
+}
 
 /* === Bookmark Panel === */
 .bookmark-panel {
-    position: fixed;
-    top: 70px;
-    right: -400px;
-    width: 380px;
-    max-height: 80vh;
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    box-shadow: var(--shadow);
-    z-index: 1000;
-    overflow-y: auto;
-    transition: right 0.3s ease;
-    padding: 20px;
-}
-.bookmark-panel.open { right: 20px; }
-.bookmark-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
-.bookmark-panel-header h3 { margin: 0; }
+  position: fixed;
+  top: 70px;
+  right: -400px;
+  width: 380px;
+  max-height: 80vh;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  z-index: 1000;
+  overflow-y: auto;
+  transition: right 0.3s ease;
+  padding: 20px;
+}
+.bookmark-panel.open {
+  right: 20px;
+}
+.bookmark-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.bookmark-panel-header h3 {
+  margin: 0;
+}
 .bookmark-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid var(--border);
+}
+.bookmark-item:last-child {
+  border-bottom: none;
 }
-.bookmark-item:last-child { border-bottom: none; }
 
 /* === Bookmark Button on Nodes === */
 .bookmark-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1.1rem;
-    padding: 2px 6px;
-    border-radius: 6px;
-    transition: transform 0.2s;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.1rem;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: transform 0.2s;
+}
+.bookmark-btn:hover {
+  transform: scale(1.3);
 }
-.bookmark-btn:hover { transform: scale(1.3); }
 
 /* === Achievement Cards === */
 .achievement-card {
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 24px;
-    text-align: center;
-    opacity: 0.5;
-    filter: grayscale(1);
-    transition: all 0.3s;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 24px;
+  text-align: center;
+  opacity: 0.5;
+  filter: grayscale(1);
+  transition: all 0.3s;
 }
 .achievement-card.unlocked {
-    opacity: 1;
-    filter: none;
-    border-color: var(--accent);
-    box-shadow: 0 0 20px rgba(124,92,252,0.15);
+  opacity: 1;
+  filter: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 20px rgba(124, 92, 252, 0.15);
+}
+.achievement-icon {
+  font-size: 2rem;
+  display: block;
+  margin-bottom: 8px;
 }
-.achievement-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
 .achievement-badge {
-    display: inline-block;
-    margin-top: 8px;
-    padding: 2px 10px;
-    border-radius: 12px;
-    font-size: 0.75rem;
-    background: var(--accent);
-    color: #fff;
+  display: inline-block;
+  margin-top: 8px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  background: var(--accent);
+  color: #fff;
 }
 .achievement-badge.locked {
-    background: var(--glass);
-    color: var(--text-muted);
+  background: var(--glass);
+  color: var(--text-muted);
 }
 
 /* === Timer Display === */
 #timerDisplay {
-    font-family: monospace;
-    font-size: 1.1rem;
-    font-weight: bold;
+  font-family: monospace;
+  font-size: 1.1rem;
+  font-weight: bold;
 }
 
 /* === Learning Path Cards === */
-.learning-path-card { cursor: default; }
-.learning-path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
+.learning-path-card {
+  cursor: default;
+}
+.learning-path-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow);
+}
 
 @media (max-width: 768px) {
-    .bookmark-panel { width: 300px; right: -320px; }
-    .bookmark-panel.open { right: 10px; }
-    .nav-badge { font-size: 0.75rem; padding: 4px 8px; }
+  .bookmark-panel {
+    width: 300px;
+    right: -320px;
+  }
+  .bookmark-panel.open {
+    right: 10px;
+  }
+  .nav-badge {
+    font-size: 0.75rem;
+    padding: 4px 8px;
+  }
 }
 
 /* === Theme Transition === */
-html { transition: background-color 0.3s ease, color 0.3s ease; }
-body, .navbar, .hero, .section, .node, .feature-card, .roadmap-card, .faq-item, .testimonial-card, .newsletter-card, .cta-card, footer { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
+html {
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+body,
+.navbar,
+.hero,
+.section,
+.node,
+.feature-card,
+.roadmap-card,
+.faq-item,
+.testimonial-card,
+.newsletter-card,
+.cta-card,
+footer {
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease,
+    border-color 0.3s ease;
+}
 
 /* === Resource Rating Stars === */
-.resource-rating { color: #ffc107; font-size: 12px; margin-left: auto; white-space: nowrap; letter-spacing: 1px; }
-.resource-link { align-items: center; gap: 6px; }
-.resource-link[data-type] { display: flex; }
+.resource-rating {
+  color: #ffc107;
+  font-size: 12px;
+  margin-left: auto;
+  white-space: nowrap;
+  letter-spacing: 1px;
+}
+.resource-link {
+  align-items: center;
+  gap: 6px;
+}
+.resource-link[data-type] {
+  display: flex;
+}
 
 /* === Community Tips Section === */
-.community-tips-section { margin-top: 16px; padding: 16px; border-radius: var(--radius-sm); background: var(--bg-tertiary); border: 1px solid var(--border); }
-.tips-title { margin: 0 0 12px; font-size: 14px; }
-.tips-count { color: var(--text-muted); font-weight: 400; }
-.tip-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
-.tip-item:last-of-type { border-bottom: none; }
-.tip-date { font-size: 11px; color: var(--text-muted); }
-.tip-form { display: flex; gap: 8px; margin-top: 12px; }
-.tip-input { flex: 1; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font-size: 13px; outline: none; }
-.tip-input:focus { border-color: var(--accent); }
+.community-tips-section {
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+}
+.tips-title {
+  margin: 0 0 12px;
+  font-size: 14px;
+}
+.tips-count {
+  color: var(--text-muted);
+  font-weight: 400;
+}
+.tip-item {
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+.tip-item:last-of-type {
+  border-bottom: none;
+}
+.tip-date {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.tip-form {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+.tip-input {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-primary);
+  font-size: 13px;
+  outline: none;
+}
+.tip-input:focus {
+  border-color: var(--accent);
+}
 
 /* === Learner Count === */
-.learner-count-display { opacity: 0.8; }
+.learner-count-display {
+  opacity: 0.8;
+}
 
 /* === Certifications === */
-.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; }
-.cert-card { background: rgba(255,255,255,0.06); border-radius: 16px; padding: 24px; backdrop-filter: blur(10px); transition: transform 0.2s; }
-.cert-card:hover { transform: translateY(-2px); }
-.cert-card.tracking { box-shadow: 0 0 20px rgba(108,99,255,0.15); }
-.cert-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
-.cert-icon { font-size: 2rem; }
-.cert-header h3 { font-size: 1rem; margin: 0; color: #e2e8f0; }
-.cert-provider { font-size: 0.75rem; color: #94a3b8; }
-.cert-bar { height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
-.cert-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s; }
-.cert-stats { display: flex; justify-content: space-between; font-size: 0.8rem; color: #94a3b8; margin-bottom: 12px; }
-.cert-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
-.cert-topic { background: rgba(108,99,255,0.15); color: #a78bfa; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; }
-.cert-btn { border: none; color: white; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; width: 100%; }
-.cert-btn:hover { opacity: 0.9; }
+.cert-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+.cert-card {
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 16px;
+  padding: 24px;
+  backdrop-filter: blur(10px);
+  transition: transform 0.2s;
+}
+.cert-card:hover {
+  transform: translateY(-2px);
+}
+.cert-card.tracking {
+  box-shadow: 0 0 20px rgba(108, 99, 255, 0.15);
+}
+.cert-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.cert-icon {
+  font-size: 2rem;
+}
+.cert-header h3 {
+  font-size: 1rem;
+  margin: 0;
+  color: #e2e8f0;
+}
+.cert-provider {
+  font-size: 0.75rem;
+  color: #94a3b8;
+}
+.cert-bar {
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+.cert-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s;
+}
+.cert-stats {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  color: #94a3b8;
+  margin-bottom: 12px;
+}
+.cert-topics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+.cert-topic {
+  background: rgba(108, 99, 255, 0.15);
+  color: #a78bfa;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+}
+.cert-btn {
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  width: 100%;
+}
+.cert-btn:hover {
+  opacity: 0.9;
+}
 
 /* === Community Forum === */
-.forum-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
-.forum-filters { display: flex; gap: 8px; flex-wrap: wrap; }
-.forum-filter { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #94a3b8; padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 0.85rem; }
-.forum-filter.active { background: rgba(108,99,255,0.2); border-color: #6c63ff; color: #a78bfa; }
-.forum-new-post { background: #6c63ff; border: none; color: white; padding: 8px 16px; border-radius: 8px; cursor: pointer; }
-.new-post-form { background: rgba(255,255,255,0.06); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
-.new-post-form select, .new-post-form input, .new-post-form textarea { width: 100%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #e2e8f0; padding: 10px; border-radius: 8px; margin-bottom: 10px; font-size: 0.9rem; box-sizing: border-box; }
-.new-post-form textarea { resize: vertical; min-height: 80px; }
-.form-actions { display: flex; gap: 10px; }
-.form-actions button { padding: 8px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
-.form-actions button:first-child { background: #6c63ff; color: white; }
-.form-actions button:last-child { background: rgba(255,255,255,0.1); color: #94a3b8; }
-.forum-posts { display: flex; flex-direction: column; gap: 12px; }
-.forum-post { display: flex; gap: 14px; background: rgba(255,255,255,0.04); border-radius: 12px; padding: 18px; transition: background 0.2s; }
-.forum-post:hover { background: rgba(255,255,255,0.07); }
-.post-avatar img { width: 44px; height: 44px; border-radius: 50%; background: rgba(108,99,255,0.2); }
-.post-content { flex: 1; min-width: 0; }
-.post-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
-.post-category-tag { background: rgba(108,99,255,0.15); color: #a78bfa; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; }
-.post-author-name { color: #6c63ff; font-size: 0.85rem; font-weight: 600; }
-.post-time { color: #64748b; font-size: 0.75rem; }
-.post-title { font-size: 1rem; margin: 0 0 6px 0; color: #e2e8f0; }
-.post-message { color: #94a3b8; font-size: 0.9rem; line-height: 1.5; margin: 0 0 10px 0; }
-.post-actions { display: flex; gap: 16px; }
-.post-actions button { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 0.85rem; padding: 2px 8px; border-radius: 6px; }
-.post-actions button:hover { background: rgba(255,255,255,0.06); }
-.post-actions span { color: #94a3b8; font-size: 0.85rem; }
-.forum-note { text-align: center; color: #64748b; font-size: 0.85rem; margin-top: 20px; font-style: italic; }
+.forum-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.forum-filters {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.forum-filter {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #94a3b8;
+  padding: 6px 14px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.forum-filter.active {
+  background: rgba(108, 99, 255, 0.2);
+  border-color: #6c63ff;
+  color: #a78bfa;
+}
+.forum-new-post {
+  background: #6c63ff;
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.new-post-form {
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+.new-post-form select,
+.new-post-form input,
+.new-post-form textarea {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #e2e8f0;
+  padding: 10px;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  font-size: 0.9rem;
+  box-sizing: border-box;
+}
+.new-post-form textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+.form-actions {
+  display: flex;
+  gap: 10px;
+}
+.form-actions button {
+  padding: 8px 20px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.form-actions button:first-child {
+  background: #6c63ff;
+  color: white;
+}
+.form-actions button:last-child {
+  background: rgba(255, 255, 255, 0.1);
+  color: #94a3b8;
+}
+.forum-posts {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.forum-post {
+  display: flex;
+  gap: 14px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 12px;
+  padding: 18px;
+  transition: background 0.2s;
+}
+.forum-post:hover {
+  background: rgba(255, 255, 255, 0.07);
+}
+.post-avatar img {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(108, 99, 255, 0.2);
+}
+.post-content {
+  flex: 1;
+  min-width: 0;
+}
+.post-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  flex-wrap: wrap;
+}
+.post-category-tag {
+  background: rgba(108, 99, 255, 0.15);
+  color: #a78bfa;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 0.7rem;
+}
+.post-author-name {
+  color: #6c63ff;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+.post-time {
+  color: #64748b;
+  font-size: 0.75rem;
+}
+.post-title {
+  font-size: 1rem;
+  margin: 0 0 6px 0;
+  color: #e2e8f0;
+}
+.post-message {
+  color: #94a3b8;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin: 0 0 10px 0;
+}
+.post-actions {
+  display: flex;
+  gap: 16px;
+}
+.post-actions button {
+  background: none;
+  border: none;
+  color: #94a3b8;
+  cursor: pointer;
+  font-size: 0.85rem;
+  padding: 2px 8px;
+  border-radius: 6px;
+}
+.post-actions button:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+.post-actions span {
+  color: #94a3b8;
+  font-size: 0.85rem;
+}
+.forum-note {
+  text-align: center;
+  color: #64748b;
+  font-size: 0.85rem;
+  margin-top: 20px;
+  font-style: italic;
+}
+
+/* Fix for the theme toggle alignment */
+#theme-toggle {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+/* Optional: Make the roadmap cards look smoother on theme switch */
+.json-card {
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease,
+    border-color 0.3s ease;
+}
+
+/* Force the hidden class to work regardless of other styles */
+.hidden {
+  display: none !important;
+}
+
+#theme-toggle-sun-icon,
+#theme-toggle-moon-icon {
+  line-height: 1;
+  font-size: 14px; /* Adjust size if needed */
+}
+
+#theme-toggle span {
+  line-height: 1; /* Prevents icons from making the button taller */
+}
+
+.nav-theme-btn {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  background: white;
+  cursor: pointer;
+  font-size: 1.2rem;
+  transition: all 0.2s;
+}
+
+/* Dark mode button look */
+.dark .nav-theme-btn {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+.nav-theme-btn:hover {
+  background-color: #f1f5f9;
+}
+
+.dark .nav-theme-btn:hover {
+  background-color: #334155;
+}
diff --git a/index.html b/index.html
index ca9e85b..afd5692 100644
--- a/index.html
+++ b/index.html
@@ -1,527 +1,867 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" data-theme="dark">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DevRoadmaps — Free Developer Roadmaps with 800+ Topics | Learn Programming, AI, DevOps & More</title>
-    <meta name="description" content="Free open-source developer roadmaps for 17 tech paths including Frontend, Backend, DevOps, AI/ML, Cybersecurity and more. 800+ curated topics with 1700+ free resources.">
-    <meta name="keywords" content="developer roadmap, learn programming, frontend roadmap, backend roadmap, full stack roadmap, devops roadmap, AI ML roadmap, cybersecurity roadmap, free resources, open source, roadmap.sh alternative">
-    <link rel="canonical" href="https://rudra496.github.io/devroadmaps/">
-    <meta property="og:title" content="DevRoadmaps — Free Developer Roadmaps with 800+ Topics">
-    <meta property="og:description" content="Free open-source developer roadmaps for 17 tech paths. 800+ curated topics with 1700+ free resources.">
-    <meta property="og:url" content="https://rudra496.github.io/devroadmaps/">
-    <meta property="og:type" content="website">
-    <meta property="og:image" content="https://rudra496.github.io/devroadmaps/og-image.png">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="DevRoadmaps — Free Developer Roadmaps with 800+ Topics">
-    <meta name="twitter:description" content="Free open-source developer roadmaps for 17 tech paths. 800+ curated topics with 1700+ free resources.">
-    <meta name="twitter:creator" content="@rudra496">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      DevRoadmaps — Free Developer Roadmaps with 800+ Topics | Learn
+      Programming, AI, DevOps & More
+    </title>
+    <meta
+      name="description"
+      content="Free open-source developer roadmaps for 17 tech paths including Frontend, Backend, DevOps, AI/ML, Cybersecurity and more. 800+ curated topics with 1700+ free resources."
+    />
+    <meta
+      name="keywords"
+      content="developer roadmap, learn programming, frontend roadmap, backend roadmap, full stack roadmap, devops roadmap, AI ML roadmap, cybersecurity roadmap, free resources, open source, roadmap.sh alternative"
+    />
+    <link rel="canonical" href="https://rudra496.github.io/devroadmaps/" />
+    <meta
+      property="og:title"
+      content="DevRoadmaps — Free Developer Roadmaps with 800+ Topics"
+    />
+    <meta
+      property="og:description"
+      content="Free open-source developer roadmaps for 17 tech paths. 800+ curated topics with 1700+ free resources."
+    />
+    <meta property="og:url" content="https://rudra496.github.io/devroadmaps/" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:image"
+      content="https://rudra496.github.io/devroadmaps/og-image.png"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:title"
+      content="DevRoadmaps — Free Developer Roadmaps with 800+ Topics"
+    />
+    <meta
+      name="twitter:description"
+      content="Free open-source developer roadmaps for 17 tech paths. 800+ curated topics with 1700+ free resources."
+    />
+    <meta name="twitter:creator" content="@rudra496" />
     <script type="application/ld+json">
-    {
+      {
         "@context": "https://schema.org",
         "@type": "WebSite",
         "name": "DevRoadmaps",
         "url": "https://rudra496.github.io/devroadmaps/",
         "description": "Free open-source developer roadmaps for 17 tech paths including Frontend, Backend, DevOps, AI/ML, Cybersecurity and more. 800+ curated topics with 1700+ free resources.",
         "potentialAction": {
-            "@type": "SearchAction",
-            "target": "https://rudra496.github.io/devroadmaps/?q={search_term_string}",
-            "query-input": "required name=search_term_string"
+          "@type": "SearchAction",
+          "target": "https://rudra496.github.io/devroadmaps/?q={search_term_string}",
+          "query-input": "required name=search_term_string"
         }
-    }
+      }
     </script>
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🗺️</text></svg>">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
-</head>
-<body>
+
+    <link rel="stylesheet" href="css/style.css" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🗺️</text></svg>"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <script>
+      // Check local storage or system preference
+      if (
+        localStorage.getItem("color-theme") === "dark" ||
+        (!("color-theme" in localStorage) &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches)
+      ) {
+        document.documentElement.classList.add("dark");
+        document.documentElement.setAttribute("data-theme", "dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+        document.documentElement.setAttribute("data-theme", "light");
+      }
+    </script>
+  </head>
+  <body>
     <!-- Particle Canvas -->
     <canvas id="particles"></canvas>
 
     <!-- Floating Geometric Shapes -->
     <div class="floating-shapes" aria-hidden="true">
-        <div class="shape shape-1"></div>
-        <div class="shape shape-2"></div>
-        <div class="shape shape-3"></div>
-        <div class="shape shape-4"></div>
-        <div class="shape shape-5"></div>
-        <div class="shape shape-6"></div>
+      <div class="shape shape-1"></div>
+      <div class="shape shape-2"></div>
+      <div class="shape shape-3"></div>
+      <div class="shape shape-4"></div>
+      <div class="shape shape-5"></div>
+      <div class="shape shape-6"></div>
     </div>
 
     <!-- Navigation -->
     <nav class="navbar" id="navbar">
-        <div class="nav-container">
-            <a href="index.html" class="nav-logo">🗺️ <span class="logo-text">DevRoadmaps</span></a>
-            <div class="nav-links" id="navLinks">
-                <a href="#roadmaps">Roadmaps</a>
-                <a href="#features">Features</a>
-                <a href="#testimonials">Testimonials</a>
-                <a href="#certifications">Certifications</a>
-                <a href="#community">Community</a>
-                <a href="#faq">FAQ</a>
-                <a href="https://github.com/rudra496/devroadmaps" target="_blank" rel="noopener" class="nav-cta">⭐ Star on GitHub</a>
-                <span class="nav-badge" id="bookmarkToggle" title="Bookmarks">📌 <span class="bookmark-count">0</span></span>
-                <span class="nav-badge" title="Total Study Time">⏱️ <span class="total-study-time">0m 0s</span></span>
-            </div>
-            <button class="hamburger" id="hamburger" aria-label="Toggle menu">
-                <span></span><span></span><span></span>
-            </button>
+      <div class="nav-container">
+        <a href="index.html" class="nav-logo"
+          >🗺️ <span class="logo-text">DevRoadmaps</span></a
+        >
+        <div class="nav-links" id="navLinks">
+          <a href="#roadmaps">Roadmaps</a>
+          <a href="#features">Features</a>
+          <a href="#testimonials">Testimonials</a>
+          <a href="#certifications">Certifications</a>
+          <a href="#community">Community</a>
+          <a href="#faq">FAQ</a>
+          <a
+            href="https://github.com/rudra496/devroadmaps"
+            target="_blank"
+            rel="noopener"
+            class="nav-cta"
+            >⭐ Star on GitHub</a
+          >
+          <span class="nav-badge" id="bookmarkToggle" title="Bookmarks"
+            >📌 <span class="bookmark-count">0</span></span
+          >
+          <span class="nav-badge" title="Total Study Time"
+            >⏱️ <span class="total-study-time">0m 0s</span></span
+          >
+          <button
+            id="theme-toggle"
+            type="button"
+            class="flex items-center justify-center w-10 h-10 ml-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300"
+          >
+            <span id="theme-toggle-dark-icon" class="hidden text-xl">🌙</span>
+            <span id="theme-toggle-light-icon" class="hidden text-xl">☀️</span>
+          </button>
         </div>
+        <button class="hamburger" id="hamburger" aria-label="Toggle menu">
+          <span></span><span></span><span></span>
+        </button>
+      </div>
     </nav>
 
     <!-- Hero Section -->
     <header class="hero" id="hero">
-        <div class="hero-bg-mesh" aria-hidden="true"></div>
-        <div class="hero-content">
-            <div class="hero-badge animate-on-scroll">🎓 Free & Open Source</div>
-            <h1 class="hero-title animate-on-scroll">
-                <span class="gradient-text">Developer Roadmaps</span>
-            </h1>
-            <p class="hero-typing animate-on-scroll" id="typingTarget"></p>
-            <p class="hero-desc animate-on-scroll">850+ curated topics with 3,000+ free resources across 17 roadmaps. Interactive learning paths, bookmarks, community tips, resource ratings, study timer, and achievement badges to guide your journey.</p>
-            <div class="hero-buttons animate-on-scroll">
-                <a href="#roadmaps" class="btn btn-primary btn-glow">Explore Roadmaps →</a>
-                <a href="https://github.com/rudra496/devroadmaps" target="_blank" class="btn btn-secondary">View on GitHub ⭐</a>
-            </div>
-            <div class="hero-stats animate-on-scroll">
-                <div class="stat-item">
-                    <span class="stat-number" data-target="17">0</span>
-                    <span class="stat-label">Roadmaps</span>
-                </div>
-                <div class="stat-divider"></div>
-                <div class="stat-item">
-                    <span class="stat-number" data-target="850">0</span><span class="stat-suffix">+</span>
-                    <span class="stat-label">Topics</span>
-                </div>
-                <div class="stat-divider"></div>
-                <div class="stat-item">
-                    <span class="stat-number" data-target="3000">0</span><span class="stat-suffix">+</span>
-                    <span class="stat-label">Resources</span>
-                </div>
-                <div class="stat-divider"></div>
-                <div class="stat-item">
-                    <span class="stat-number" data-target="100">0</span><span class="stat-suffix">%</span>
-                    <span class="stat-label">Free</span>
-                </div>
-            </div>
+      <div class="hero-bg-mesh" aria-hidden="true"></div>
+      <div class="hero-content">
+        <div class="hero-badge animate-on-scroll">🎓 Free & Open Source</div>
+        <h1 class="hero-title animate-on-scroll">
+          <span class="gradient-text">Developer Roadmaps</span>
+        </h1>
+        <p class="hero-typing animate-on-scroll" id="typingTarget"></p>
+        <p class="hero-desc animate-on-scroll">
+          850+ curated topics with 3,000+ free resources across 17 roadmaps.
+          Interactive learning paths, bookmarks, community tips, resource
+          ratings, study timer, and achievement badges to guide your journey.
+        </p>
+        <div class="hero-buttons animate-on-scroll">
+          <a href="#roadmaps" class="btn btn-primary btn-glow"
+            >Explore Roadmaps →</a
+          >
+          <a
+            href="https://github.com/rudra496/devroadmaps"
+            target="_blank"
+            class="btn btn-secondary"
+            >View on GitHub ⭐</a
+          >
         </div>
-        <div class="hero-scroll-indicator" aria-hidden="true">
-            <div class="scroll-arrow"></div>
+        <div class="hero-stats animate-on-scroll">
+          <div class="stat-item">
+            <span class="stat-number" data-target="17">0</span>
+            <span class="stat-label">Roadmaps</span>
+          </div>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-number" data-target="850">0</span
+            ><span class="stat-suffix">+</span>
+            <span class="stat-label">Topics</span>
+          </div>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-number" data-target="3000">0</span
+            ><span class="stat-suffix">+</span>
+            <span class="stat-label">Resources</span>
+          </div>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-number" data-target="100">0</span
+            ><span class="stat-suffix">%</span>
+            <span class="stat-label">Free</span>
+          </div>
         </div>
+      </div>
+      <div class="hero-scroll-indicator" aria-hidden="true">
+        <div class="scroll-arrow"></div>
+      </div>
     </header>
 
     <!-- Roadmaps Grid -->
     <section class="section" id="roadmaps">
-        <div class="container">
-            <div class="section-header animate-on-scroll">
-                <span class="section-tag">🗺️ Roadmaps</span>
-                <h2 class="section-title">Choose Your Path</h2>
-                <p class="section-subtitle">17 comprehensive roadmaps covering every major tech discipline</p>
-            </div>
-            <!-- Search & Filter -->
-            <div class="roadmap-filters animate-on-scroll">
-                <div class="search-box-hero">
-                    <span class="search-icon">🔍</span>
-                    <input type="text" id="roadmapSearch" placeholder="Search roadmaps..." autocomplete="off">
-                </div>
-                <div class="filter-pills" id="difficultyFilters">
-                    <button class="pill active" data-diff="all">All</button>
-                    <button class="pill" data-diff="beginner">Beginner</button>
-                    <button class="pill" data-diff="intermediate">Intermediate</button>
-                    <button class="pill" data-diff="advanced">Advanced</button>
-                </div>
-            </div>
-            <div class="roadmaps-grid" id="roadmapsGrid">
-                <!-- Populated by JS -->
-            </div>
+      <div class="container">
+        <div class="section-header animate-on-scroll">
+          <span class="section-tag">🗺️ Roadmaps</span>
+          <h2 class="section-title">Choose Your Path</h2>
+          <p class="section-subtitle">
+            17 comprehensive roadmaps covering every major tech discipline
+          </p>
+        </div>
+        <!-- Search & Filter -->
+        <div class="roadmap-filters animate-on-scroll">
+          <div class="search-box-hero">
+            <span class="search-icon">🔍</span>
+            <input
+              type="text"
+              id="roadmapSearch"
+              placeholder="Search roadmaps..."
+              autocomplete="off"
+            />
+          </div>
+          <div class="filter-pills" id="difficultyFilters">
+            <button class="pill active" data-diff="all">All</button>
+            <button class="pill" data-diff="beginner">Beginner</button>
+            <button class="pill" data-diff="intermediate">Intermediate</button>
+            <button class="pill" data-diff="advanced">Advanced</button>
+          </div>
         </div>
+        <div class="roadmaps-grid" id="roadmapsGrid">
+          <!-- Populated by JS -->
+        </div>
+      </div>
     </section>
 
     <!-- Features -->
     <section class="section section-alt" id="features">
-        <div class="container">
-            <div class="section-header animate-on-scroll">
-                <span class="section-tag">✨ Features</span>
-                <h2 class="section-title">Why DevRoadmaps?</h2>
-                <p class="section-subtitle">Everything you need to master your craft, completely free</p>
-            </div>
-            <div class="features-grid">
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon-wrap">
-                        <span>🎯</span>
-                    </div>
-                    <h3>Interactive Nodes</h3>
-                    <p>Click any topic to expand details, mark as complete, and track your progress visually.</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon-wrap">
-                        <span>🔗</span>
-                    </div>
-                    <h3>2,000+ Free Resources</h3>
-                    <p>Curated links to MDN, freeCodeCamp, official docs, YouTube tutorials, and more.</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon-wrap">
-                        <span>📊</span>
-                    </div>
-                    <h3>Track Progress</h3>
-                    <p>Your progress is saved locally. Come back anytime and pick up where you left off.</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon-wrap">
-                        <span>🔍</span>
-                    </div>
-                    <h3>Search & Filter</h3>
-                    <p>Search within roadmaps and filter by category — fundamentals, intermediate, advanced, tools.</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon-wrap">
-                        <span>🖨️</span>
-                    </div>
-                    <h3>Print as Poster</h3>
-                    <p>Print any roadmap as a beautiful poster for your wall. Perfect for study planning.</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon-wrap">
-                        <span>⌨️</span>
-                    </div>
-                    <h3>Keyboard Navigation</h3>
-                    <p>Navigate with arrow keys, press Enter to expand, Space to mark complete.</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon-wrap">
-                        <span>🌙</span>
-                    </div>
-                    <h3>Dark & Light Mode</h3>
-                    <p>Beautiful in both themes. Your preference is remembered across visits.</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon-wrap">
-                        <span>📱</span>
-                    </div>
-                    <h3>Fully Responsive</h3>
-                    <p>Works perfectly on desktop, tablet, and mobile. Learn anywhere.</p>
-                </div>
+      <div class="container">
+        <div class="section-header animate-on-scroll">
+          <span class="section-tag">✨ Features</span>
+          <h2 class="section-title">Why DevRoadmaps?</h2>
+          <p class="section-subtitle">
+            Everything you need to master your craft, completely free
+          </p>
+        </div>
+        <div class="features-grid">
+          <div class="feature-card animate-on-scroll">
+            <div class="feature-icon-wrap">
+              <span>🎯</span>
             </div>
+            <h3>Interactive Nodes</h3>
+            <p>
+              Click any topic to expand details, mark as complete, and track
+              your progress visually.
+            </p>
+          </div>
+          <div class="feature-card animate-on-scroll">
+            <div class="feature-icon-wrap">
+              <span>🔗</span>
+            </div>
+            <h3>2,000+ Free Resources</h3>
+            <p>
+              Curated links to MDN, freeCodeCamp, official docs, YouTube
+              tutorials, and more.
+            </p>
+          </div>
+          <div class="feature-card animate-on-scroll">
+            <div class="feature-icon-wrap">
+              <span>📊</span>
+            </div>
+            <h3>Track Progress</h3>
+            <p>
+              Your progress is saved locally. Come back anytime and pick up
+              where you left off.
+            </p>
+          </div>
+          <div class="feature-card animate-on-scroll">
+            <div class="feature-icon-wrap">
+              <span>🔍</span>
+            </div>
+            <h3>Search & Filter</h3>
+            <p>
+              Search within roadmaps and filter by category — fundamentals,
+              intermediate, advanced, tools.
+            </p>
+          </div>
+          <div class="feature-card animate-on-scroll">
+            <div class="feature-icon-wrap">
+              <span>🖨️</span>
+            </div>
+            <h3>Print as Poster</h3>
+            <p>
+              Print any roadmap as a beautiful poster for your wall. Perfect for
+              study planning.
+            </p>
+          </div>
+          <div class="feature-card animate-on-scroll">
+            <div class="feature-icon-wrap">
+              <span>⌨️</span>
+            </div>
+            <h3>Keyboard Navigation</h3>
+            <p>
+              Navigate with arrow keys, press Enter to expand, Space to mark
+              complete.
+            </p>
+          </div>
+          <div class="feature-card animate-on-scroll">
+            <div class="feature-icon-wrap">
+              <span>🌙</span>
+            </div>
+            <h3>Dark & Light Mode</h3>
+            <p>
+              Beautiful in both themes. Your preference is remembered across
+              visits.
+            </p>
+          </div>
+          <div class="feature-card animate-on-scroll">
+            <div class="feature-icon-wrap">
+              <span>📱</span>
+            </div>
+            <h3>Fully Responsive</h3>
+            <p>
+              Works perfectly on desktop, tablet, and mobile. Learn anywhere.
+            </p>
+          </div>
         </div>
+      </div>
     </section>
 
     <!-- Testimonials -->
     <section class="section" id="testimonials">
-        <div class="container">
-            <div class="section-header animate-on-scroll">
-                <span class="section-tag">💬 Testimonials</span>
-                <h2 class="section-title">Loved by Developers</h2>
-                <p class="section-subtitle">Join thousands of developers who use DevRoadmaps daily</p>
-            </div>
-            <div class="testimonials-grid">
-                <div class="testimonial-card animate-on-scroll">
-                    <div class="testimonial-stars">★★★★★</div>
-                    <div class="testimonial-text">"This replaced roadmap.sh for me. More topics, more resources, and it's actually free. The progress tracking is a game changer."</div>
-                    <div class="testimonial-author">
-                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=sarah" alt="Sarah" class="author-avatar" loading="lazy">
-                        <div>
-                            <strong>Sarah K.</strong>
-                            <span>Frontend Developer at Vercel</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="testimonial-card animate-on-scroll">
-                    <div class="testimonial-stars">★★★★★</div>
-                    <div class="testimonial-text">"I printed the DevOps roadmap and put it on my wall. It's beautiful and incredibly useful for tracking my learning path."</div>
-                    <div class="testimonial-author">
-                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=marcus" alt="Marcus" class="author-avatar" loading="lazy">
-                        <div>
-                            <strong>Marcus R.</strong>
-                            <span>DevOps Engineer at AWS</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="testimonial-card animate-on-scroll">
-                    <div class="testimonial-stars">★★★★★</div>
-                    <div class="testimonial-text">"600+ topics with real free resources? This is the most comprehensive roadmap collection I've found. Absolutely love it."</div>
-                    <div class="testimonial-author">
-                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=priya" alt="Priya" class="author-avatar" loading="lazy">
-                        <div>
-                            <strong>Priya L.</strong>
-                            <span>ML Engineer at Google DeepMind</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="testimonial-card animate-on-scroll">
-                    <div class="testimonial-stars">★★★★★</div>
-                    <div class="testimonial-text">"The interactive roadmap viewer is genius. I can mark topics as I learn them and track my entire journey. No sign-up needed!"</div>
-                    <div class="testimonial-author">
-                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=james" alt="James" class="author-avatar" loading="lazy">
-                        <div>
-                            <strong>James T.</strong>
-                            <span>Full Stack Developer at Stripe</span>
-                        </div>
-                    </div>
-                </div>
+      <div class="container">
+        <div class="section-header animate-on-scroll">
+          <span class="section-tag">💬 Testimonials</span>
+          <h2 class="section-title">Loved by Developers</h2>
+          <p class="section-subtitle">
+            Join thousands of developers who use DevRoadmaps daily
+          </p>
+        </div>
+        <div class="testimonials-grid">
+          <div class="testimonial-card animate-on-scroll">
+            <div class="testimonial-stars">★★★★★</div>
+            <div class="testimonial-text">
+              "This replaced roadmap.sh for me. More topics, more resources, and
+              it's actually free. The progress tracking is a game changer."
             </div>
+            <div class="testimonial-author">
+              <img
+                src="https://api.dicebear.com/7.x/avataaars/svg?seed=sarah"
+                alt="Sarah"
+                class="author-avatar"
+                loading="lazy"
+              />
+              <div>
+                <strong>Sarah K.</strong>
+                <span>Frontend Developer at Vercel</span>
+              </div>
+            </div>
+          </div>
+          <div class="testimonial-card animate-on-scroll">
+            <div class="testimonial-stars">★★★★★</div>
+            <div class="testimonial-text">
+              "I printed the DevOps roadmap and put it on my wall. It's
+              beautiful and incredibly useful for tracking my learning path."
+            </div>
+            <div class="testimonial-author">
+              <img
+                src="https://api.dicebear.com/7.x/avataaars/svg?seed=marcus"
+                alt="Marcus"
+                class="author-avatar"
+                loading="lazy"
+              />
+              <div>
+                <strong>Marcus R.</strong>
+                <span>DevOps Engineer at AWS</span>
+              </div>
+            </div>
+          </div>
+          <div class="testimonial-card animate-on-scroll">
+            <div class="testimonial-stars">★★★★★</div>
+            <div class="testimonial-text">
+              "600+ topics with real free resources? This is the most
+              comprehensive roadmap collection I've found. Absolutely love it."
+            </div>
+            <div class="testimonial-author">
+              <img
+                src="https://api.dicebear.com/7.x/avataaars/svg?seed=priya"
+                alt="Priya"
+                class="author-avatar"
+                loading="lazy"
+              />
+              <div>
+                <strong>Priya L.</strong>
+                <span>ML Engineer at Google DeepMind</span>
+              </div>
+            </div>
+          </div>
+          <div class="testimonial-card animate-on-scroll">
+            <div class="testimonial-stars">★★★★★</div>
+            <div class="testimonial-text">
+              "The interactive roadmap viewer is genius. I can mark topics as I
+              learn them and track my entire journey. No sign-up needed!"
+            </div>
+            <div class="testimonial-author">
+              <img
+                src="https://api.dicebear.com/7.x/avataaars/svg?seed=james"
+                alt="James"
+                class="author-avatar"
+                loading="lazy"
+              />
+              <div>
+                <strong>James T.</strong>
+                <span>Full Stack Developer at Stripe</span>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
     </section>
 
     <!-- Community -->
     <section class="section section-alt" id="community">
-        <div class="container">
-            <div class="section-header animate-on-scroll">
-                <span class="section-tag">🤝 Community</span>
-                <h2 class="section-title">Built by the Community</h2>
-                <p class="section-subtitle">Open source, community driven, and collaborative</p>
-            </div>
-            <div class="community-grid animate-on-scroll">
-                <div class="community-stat">
-                    <div class="community-icon">⭐</div>
-                    <div class="community-number">2.4k+</div>
-                    <div class="community-label">GitHub Stars</div>
-                </div>
-                <div class="community-stat">
-                    <div class="community-icon">🍴</div>
-                    <div class="community-number">380+</div>
-                    <div class="community-label">Forks</div>
-                </div>
-                <div class="community-stat">
-                    <div class="community-icon">👥</div>
-                    <div class="community-number">150+</div>
-                    <div class="community-label">Contributors</div>
-                </div>
-                <div class="community-stat">
-                    <div class="community-icon">💬</div>
-                    <div class="community-number"><a href="#" style="color:inherit;text-decoration:none">Join Discord</a></div>
-                    <div class="community-label">Community Chat</div>
-                </div>
-                <div class="community-stat">
-                    <div class="community-icon">📝</div>
-                    <div class="community-number">Share Tips</div>
-                    <div class="community-label">Community Tips</div>
-                </div>
-                <div class="community-stat">
-                    <div class="community-icon">⭐</div>
-                    <div class="community-number">Rate</div>
-                    <div class="community-label">Resources</div>
-                </div>
-                <div class="community-stat">
-                    <div class="community-icon">📜</div>
-                    <div class="community-number">MIT</div>
-                    <div class="community-label">License</div>
-                </div>
+      <div class="container">
+        <div class="section-header animate-on-scroll">
+          <span class="section-tag">🤝 Community</span>
+          <h2 class="section-title">Built by the Community</h2>
+          <p class="section-subtitle">
+            Open source, community driven, and collaborative
+          </p>
+        </div>
+        <div class="community-grid animate-on-scroll">
+          <div class="community-stat">
+            <div class="community-icon">⭐</div>
+            <div class="community-number">2.4k+</div>
+            <div class="community-label">GitHub Stars</div>
+          </div>
+          <div class="community-stat">
+            <div class="community-icon">🍴</div>
+            <div class="community-number">380+</div>
+            <div class="community-label">Forks</div>
+          </div>
+          <div class="community-stat">
+            <div class="community-icon">👥</div>
+            <div class="community-number">150+</div>
+            <div class="community-label">Contributors</div>
+          </div>
+          <div class="community-stat">
+            <div class="community-icon">💬</div>
+            <div class="community-number">
+              <a href="#" style="color: inherit; text-decoration: none"
+                >Join Discord</a
+              >
             </div>
+            <div class="community-label">Community Chat</div>
+          </div>
+          <div class="community-stat">
+            <div class="community-icon">📝</div>
+            <div class="community-number">Share Tips</div>
+            <div class="community-label">Community Tips</div>
+          </div>
+          <div class="community-stat">
+            <div class="community-icon">⭐</div>
+            <div class="community-number">Rate</div>
+            <div class="community-label">Resources</div>
+          </div>
+          <div class="community-stat">
+            <div class="community-icon">📜</div>
+            <div class="community-number">MIT</div>
+            <div class="community-label">License</div>
+          </div>
         </div>
+      </div>
     </section>
 
     <!-- Newsletter -->
     <section class="section newsletter-section">
-        <div class="container">
-            <div class="newsletter-card animate-on-scroll">
-                <div class="newsletter-content">
-                    <h2>📬 Stay Updated</h2>
-                    <p>Get notified when we add new roadmaps, resources, and features. No spam, ever.</p>
-                </div>
-                <form class="newsletter-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='✅ Subscribed!'; this.querySelector('button').disabled=true;">
-                    <input type="email" placeholder="your@email.com" required>
-                    <button type="submit" class="btn btn-primary">Subscribe</button>
-                </form>
-            </div>
+      <div class="container">
+        <div class="newsletter-card animate-on-scroll">
+          <div class="newsletter-content">
+            <h2>📬 Stay Updated</h2>
+            <p>
+              Get notified when we add new roadmaps, resources, and features. No
+              spam, ever.
+            </p>
+          </div>
+          <form
+            class="newsletter-form"
+            onsubmit="
+              event.preventDefault();
+              this.querySelector('button').textContent = '✅ Subscribed!';
+              this.querySelector('button').disabled = true;
+            "
+          >
+            <input type="email" placeholder="your@email.com" required />
+            <button type="submit" class="btn btn-primary">Subscribe</button>
+          </form>
         </div>
+      </div>
     </section>
 
     <!-- FAQ -->
     <section class="section section-alt" id="faq">
-        <div class="container">
-            <div class="section-header animate-on-scroll">
-                <span class="section-tag">❓ FAQ</span>
-                <h2 class="section-title">Frequently Asked Questions</h2>
-            </div>
-            <div class="faq-list">
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">Is this really free? <span>+</span></button>
-                    <div class="faq-answer"><p>Yes! 100% free and open source. Every resource linked is free. No hidden paywalls, no premium tier. We believe education should be accessible to everyone.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">How is my progress saved? <span>+</span></button>
-                    <div class="faq-answer"><p>Progress is saved in your browser's localStorage. No account needed, no data sent to any server. Clear your browser data to reset progress.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">How is this different from roadmap.sh? <span>+</span></button>
-                    <div class="faq-answer"><p>We offer 17 complete roadmaps with 850+ nodes, community tips, resource ratings, resource type filtering, interactive progress tracking, search/filter, print-as-poster, keyboard navigation, and everything is free with zero dependencies.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">Can I contribute? <span>+</span></button>
-                    <div class="faq-answer"><p>Absolutely! Check out our CONTRIBUTING.md for guidelines. You can add nodes, fix resources, or suggest new roadmaps via pull request.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">Are the resource links verified? <span>+</span></button>
-                    <div class="faq-answer"><p>We use stable, well-known resources (MDN, freeCodeCamp, official docs, popular YouTube channels). Links are periodically verified and PRs welcome to fix any broken ones.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">Do I need to create an account? <span>+</span></button>
-                    <div class="faq-answer"><p>Nope! Everything works without an account. Progress is stored in your browser. Just open the page and start learning.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">Can I use this offline? <span>+</span></button>
-                    <div class="faq-answer"><p>The roadmap viewer and progress tracking work offline once loaded. Resource links require internet, but you can print roadmaps for offline reference.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">Which roadmaps are available? <span>+</span></button>
-                    <div class="faq-answer"><p>Frontend, Backend, Full Stack, ML/AI, DevOps/Cloud, Mobile, Cybersecurity, Data Engineering, Blockchain/Web3, Game Dev, Embedded/IoT, Product Management, DevSecOps, QA Engineer, Technical Writer, Low-Code/No-Code, and Cloud Architect.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">How long does it take to complete a roadmap? <span>+</span></button>
-                    <div class="faq-answer"><p>It varies! A beginner roadmap might take 3-6 months studying part-time. Advanced roadmaps could take 6-12 months. The key is consistency.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">Is this suitable for absolute beginners? <span>+</span></button>
-                    <div class="faq-answer"><p>Yes! Each roadmap starts from fundamentals and progresses to advanced topics. The difficulty badges help you know where to start.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">Can I print the roadmaps? <span>+</span></button>
-                    <div class="faq-answer"><p>Yes! Click the Print button on any roadmap page. It generates a clean, print-friendly layout. Great for wall posters or study notes.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">What tech stack is this built with? <span>+</span></button>
-                    <div class="faq-answer"><p>Vanilla HTML, CSS, and JavaScript. No frameworks, no build tools, no dependencies. Just open index.html in any browser.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">How do I switch between dark and light mode? <span>+</span></button>
-                    <div class="faq-answer"><p>Click the theme icon in the bottom-left corner to cycle through Dark → Light → Auto (follows system preference). Your choice is saved and persisted across visits.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">Can I suggest a new roadmap? <span>+</span></button>
-                    <div class="faq-answer"><p>Absolutely! Open an issue on GitHub with your suggestion. If there's enough interest, we'll add it. You can also submit a PR with the JSON data.</p></div>
-                </div>
-                <div class="faq-item animate-on-scroll">
-                    <button class="faq-question">Is my data private? <span>+</span></button>
-                    <div class="faq-answer"><p>Completely. All data stays in your browser. We don't use cookies, analytics, or any tracking. Your learning is your business.</p></div>
-                </div>
+      <div class="container">
+        <div class="section-header animate-on-scroll">
+          <span class="section-tag">❓ FAQ</span>
+          <h2 class="section-title">Frequently Asked Questions</h2>
+        </div>
+        <div class="faq-list">
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              Is this really free? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Yes! 100% free and open source. Every resource linked is free.
+                No hidden paywalls, no premium tier. We believe education should
+                be accessible to everyone.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              How is my progress saved? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Progress is saved in your browser's localStorage. No account
+                needed, no data sent to any server. Clear your browser data to
+                reset progress.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              How is this different from roadmap.sh? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                We offer 17 complete roadmaps with 850+ nodes, community tips,
+                resource ratings, resource type filtering, interactive progress
+                tracking, search/filter, print-as-poster, keyboard navigation,
+                and everything is free with zero dependencies.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              Can I contribute? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Absolutely! Check out our CONTRIBUTING.md for guidelines. You
+                can add nodes, fix resources, or suggest new roadmaps via pull
+                request.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              Are the resource links verified? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                We use stable, well-known resources (MDN, freeCodeCamp, official
+                docs, popular YouTube channels). Links are periodically verified
+                and PRs welcome to fix any broken ones.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              Do I need to create an account? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Nope! Everything works without an account. Progress is stored in
+                your browser. Just open the page and start learning.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              Can I use this offline? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                The roadmap viewer and progress tracking work offline once
+                loaded. Resource links require internet, but you can print
+                roadmaps for offline reference.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              Which roadmaps are available? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Frontend, Backend, Full Stack, ML/AI, DevOps/Cloud, Mobile,
+                Cybersecurity, Data Engineering, Blockchain/Web3, Game Dev,
+                Embedded/IoT, Product Management, DevSecOps, QA Engineer,
+                Technical Writer, Low-Code/No-Code, and Cloud Architect.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              How long does it take to complete a roadmap? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                It varies! A beginner roadmap might take 3-6 months studying
+                part-time. Advanced roadmaps could take 6-12 months. The key is
+                consistency.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              Is this suitable for absolute beginners? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Yes! Each roadmap starts from fundamentals and progresses to
+                advanced topics. The difficulty badges help you know where to
+                start.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              Can I print the roadmaps? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Yes! Click the Print button on any roadmap page. It generates a
+                clean, print-friendly layout. Great for wall posters or study
+                notes.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              What tech stack is this built with? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Vanilla HTML, CSS, and JavaScript. No frameworks, no build
+                tools, no dependencies. Just open index.html in any browser.
+              </p>
             </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              How do I switch between dark and light mode? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Click the theme icon in the bottom-left corner to cycle through
+                Dark → Light → Auto (follows system preference). Your choice is
+                saved and persisted across visits.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              Can I suggest a new roadmap? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Absolutely! Open an issue on GitHub with your suggestion. If
+                there's enough interest, we'll add it. You can also submit a PR
+                with the JSON data.
+              </p>
+            </div>
+          </div>
+          <div class="faq-item animate-on-scroll">
+            <button class="faq-question">
+              Is my data private? <span>+</span>
+            </button>
+            <div class="faq-answer">
+              <p>
+                Completely. All data stays in your browser. We don't use
+                cookies, analytics, or any tracking. Your learning is your
+                business.
+              </p>
+            </div>
+          </div>
         </div>
+      </div>
     </section>
 
     <!-- Bookmark Panel -->
     <div class="bookmark-panel" id="bookmarkPanel">
-        <div class="bookmark-panel-header">
-            <h3>📌 Bookmarks</h3>
-            <button onclick="exportBookmarks()" class="btn btn-sm">Export Study Plan 📥</button>
-        </div>
-        <div id="bookmarkList"></div>
+      <div class="bookmark-panel-header">
+        <h3>📌 Bookmarks</h3>
+        <button onclick="exportBookmarks()" class="btn btn-sm">
+          Export Study Plan 📥
+        </button>
+      </div>
+      <div id="bookmarkList"></div>
     </div>
 
     <!-- Learning Paths -->
     <section class="section" id="learning-paths">
-        <div class="container">
-            <div class="section-header animate-on-scroll">
-                <span class="section-tag">🎯 Learning Paths</span>
-                <h2 class="section-title">Curated Paths</h2>
-                <p class="section-subtitle">Pre-built paths combining nodes from multiple roadmaps</p>
-            </div>
-            <div class="roadmaps-grid" id="learningPathsGrid"></div>
+      <div class="container">
+        <div class="section-header animate-on-scroll">
+          <span class="section-tag">🎯 Learning Paths</span>
+          <h2 class="section-title">Curated Paths</h2>
+          <p class="section-subtitle">
+            Pre-built paths combining nodes from multiple roadmaps
+          </p>
         </div>
+        <div class="roadmaps-grid" id="learningPathsGrid"></div>
+      </div>
     </section>
 
     <!-- Achievements -->
     <section class="section section-alt" id="achievements">
-        <div class="container">
-            <div class="section-header animate-on-scroll">
-                <span class="section-tag">🏆 Achievements</span>
-                <h2 class="section-title">Your Badges</h2>
-                <p class="section-subtitle">Unlock achievements as you learn</p>
-            </div>
-            <div class="roadmaps-grid" id="achievementsGrid"></div>
+      <div class="container">
+        <div class="section-header animate-on-scroll">
+          <span class="section-tag">🏆 Achievements</span>
+          <h2 class="section-title">Your Badges</h2>
+          <p class="section-subtitle">Unlock achievements as you learn</p>
         </div>
+        <div class="roadmaps-grid" id="achievementsGrid"></div>
+      </div>
     </section>
 
     <!-- CTA -->
     <section class="section cta-section">
-        <div class="container">
-            <div class="cta-card animate-on-scroll">
-                <div class="cta-glow" aria-hidden="true"></div>
-                <h2>🚀 Start Learning Today</h2>
-                <p>Pick a roadmap and begin your journey. No sign-up required.</p>
-                <a href="#roadmaps" class="btn btn-primary btn-lg">Get Started →</a>
-            </div>
+      <div class="container">
+        <div class="cta-card animate-on-scroll">
+          <div class="cta-glow" aria-hidden="true"></div>
+          <h2>🚀 Start Learning Today</h2>
+          <p>Pick a roadmap and begin your journey. No sign-up required.</p>
+          <a href="#roadmaps" class="btn btn-primary btn-lg">Get Started →</a>
         </div>
+      </div>
     </section>
 
     <!-- Certifications -->
     <section id="certifications" class="section">
-        <div class="container">
-            <h2 class="section-title">🏆 Certifications</h2>
-            <p class="section-subtitle">Track your progress toward industry certifications — roadmap nodes map to real exam topics</p>
-            <div id="certifications"></div>
-        </div>
+      <div class="container">
+        <h2 class="section-title">🏆 Certifications</h2>
+        <p class="section-subtitle">
+          Track your progress toward industry certifications — roadmap nodes map
+          to real exam topics
+        </p>
+        <div id="certifications"></div>
+      </div>
     </section>
 
     <!-- Community Forum -->
     <section id="community-forum-section" class="section">
-        <div class="container">
-            <h2 class="section-title">💬 Community</h2>
-            <p class="section-subtitle">Connect with fellow learners, ask questions, share your progress</p>
-            <div id="community-forum"></div>
-        </div>
+      <div class="container">
+        <h2 class="section-title">💬 Community</h2>
+        <p class="section-subtitle">
+          Connect with fellow learners, ask questions, share your progress
+        </p>
+        <div id="community-forum"></div>
+      </div>
     </section>
 
     <!-- Footer -->
     <footer class="footer">
-        <div class="container">
-            <div class="footer-grid">
-                <div class="footer-brand">
-                    <span class="nav-logo">🗺️ <span class="logo-text">DevRoadmaps</span></span>
-                    <p>The free, open-source roadmap.sh alternative.<br>Learn any tech path with curated, free resources.</p>
-                    <div class="footer-social">
-                        <a href="https://github.com/rudra496" target="_blank" rel="noopener" aria-label="GitHub">GitHub</a>
-                        <a href="https://www.linkedin.com/in/rudrasarker" target="_blank" rel="noopener" aria-label="LinkedIn">LinkedIn</a>
-                        <a href="https://x.com/Rudra496" target="_blank" rel="noopener" aria-label="X/Twitter">X/Twitter</a>
-                        <a href="https://www.facebook.com/rudrasarker130" target="_blank" rel="noopener" aria-label="Facebook">Facebook</a>
-                        <a href="https://youtube.com/@rudrasarker9732" target="_blank" rel="noopener" aria-label="YouTube">YouTube</a>
-                        <a href="https://dev.to/rudra_sarker" target="_blank" rel="noopener" aria-label="Dev.to">Dev.to</a>
-                        <a href="https://www.researchgate.net/profile/Rudra-Sarker-3" target="_blank" rel="noopener" aria-label="ResearchGate">ResearchGate</a>
-                    </div>
-                </div>
-                <div class="footer-col">
-                    <h4>Roadmaps</h4>
-                    <a href="roadmap.html?roadmap=frontend">Frontend</a>
-                    <a href="roadmap.html?roadmap=backend">Backend</a>
-                    <a href="roadmap.html?roadmap=fullstack">Full Stack</a>
-                    <a href="roadmap.html?roadmap=ml-ai">ML/AI</a>
-                    <a href="roadmap.html?roadmap=devops">DevOps</a>
-                    <a href="roadmap.html?roadmap=mobile">Mobile</a>
-                </div>
-                <div class="footer-col">
-                    <h4>More</h4>
-                    <a href="roadmap.html?roadmap=cybersecurity">Cybersecurity</a>
-                    <a href="roadmap.html?roadmap=data-engineer">Data Engineering</a>
-                    <a href="roadmap.html?roadmap=blockchain">Blockchain</a>
-                    <a href="roadmap.html?roadmap=game-dev">Game Dev</a>
-                    <a href="roadmap.html?roadmap=embedded-iot">IoT</a>
-                    <a href="roadmap.html?roadmap=product-manager">Product Manager</a>
-                    <a href="roadmap.html?roadmap=devsecops">DevSecOps</a>
-                    <a href="roadmap.html?roadmap=qa-engineer">QA Engineer</a>
-                    <a href="roadmap.html?roadmap=technical-writer">Technical Writer</a>
-                    <a href="roadmap.html?roadmap=low-code-no-code">Low-Code/No-Code</a>
-                    <a href="roadmap.html?roadmap=cloud-architect">Cloud Architect</a>
-                </div>
-                <div class="footer-col">
-                    <h4>Project</h4>
-                    <a href="https://github.com/rudra496/devroadmaps" target="_blank">GitHub</a>
-                    <a href="#features">Features</a>
-                    <a href="#faq">FAQ</a>
-                    <a href="#testimonials">Testimonials</a>
-                </div>
-            </div>
-            <div class="footer-bottom">
-                <p>MIT License • Made with ❤️ for developers everywhere</p>
+      <div class="container">
+        <div class="footer-grid">
+          <div class="footer-brand">
+            <span class="nav-logo"
+              >🗺️ <span class="logo-text">DevRoadmaps</span></span
+            >
+            <p>
+              The free, open-source roadmap.sh alternative.<br />Learn any tech
+              path with curated, free resources.
+            </p>
+            <div class="footer-social">
+              <a
+                href="https://github.com/rudra496"
+                target="_blank"
+                rel="noopener"
+                aria-label="GitHub"
+                >GitHub</a
+              >
+              <a
+                href="https://www.linkedin.com/in/rudrasarker"
+                target="_blank"
+                rel="noopener"
+                aria-label="LinkedIn"
+                >LinkedIn</a
+              >
+              <a
+                href="https://x.com/Rudra496"
+                target="_blank"
+                rel="noopener"
+                aria-label="X/Twitter"
+                >X/Twitter</a
+              >
+              <a
+                href="https://www.facebook.com/rudrasarker130"
+                target="_blank"
+                rel="noopener"
+                aria-label="Facebook"
+                >Facebook</a
+              >
+              <a
+                href="https://youtube.com/@rudrasarker9732"
+                target="_blank"
+                rel="noopener"
+                aria-label="YouTube"
+                >YouTube</a
+              >
+              <a
+                href="https://dev.to/rudra_sarker"
+                target="_blank"
+                rel="noopener"
+                aria-label="Dev.to"
+                >Dev.to</a
+              >
+              <a
+                href="https://www.researchgate.net/profile/Rudra-Sarker-3"
+                target="_blank"
+                rel="noopener"
+                aria-label="ResearchGate"
+                >ResearchGate</a
+              >
             </div>
+          </div>
+          <div class="footer-col">
+            <h4>Roadmaps</h4>
+            <a href="roadmap.html?roadmap=frontend">Frontend</a>
+            <a href="roadmap.html?roadmap=backend">Backend</a>
+            <a href="roadmap.html?roadmap=fullstack">Full Stack</a>
+            <a href="roadmap.html?roadmap=ml-ai">ML/AI</a>
+            <a href="roadmap.html?roadmap=devops">DevOps</a>
+            <a href="roadmap.html?roadmap=mobile">Mobile</a>
+          </div>
+          <div class="footer-col">
+            <h4>More</h4>
+            <a href="roadmap.html?roadmap=cybersecurity">Cybersecurity</a>
+            <a href="roadmap.html?roadmap=data-engineer">Data Engineering</a>
+            <a href="roadmap.html?roadmap=blockchain">Blockchain</a>
+            <a href="roadmap.html?roadmap=game-dev">Game Dev</a>
+            <a href="roadmap.html?roadmap=embedded-iot">IoT</a>
+            <a href="roadmap.html?roadmap=product-manager">Product Manager</a>
+            <a href="roadmap.html?roadmap=devsecops">DevSecOps</a>
+            <a href="roadmap.html?roadmap=qa-engineer">QA Engineer</a>
+            <a href="roadmap.html?roadmap=technical-writer">Technical Writer</a>
+            <a href="roadmap.html?roadmap=low-code-no-code">Low-Code/No-Code</a>
+            <a href="roadmap.html?roadmap=cloud-architect">Cloud Architect</a>
+          </div>
+          <div class="footer-col">
+            <h4>Project</h4>
+            <a href="https://github.com/rudra496/devroadmaps" target="_blank"
+              >GitHub</a
+            >
+            <a href="#features">Features</a>
+            <a href="#faq">FAQ</a>
+            <a href="#testimonials">Testimonials</a>
+          </div>
         </div>
+        <div class="footer-bottom">
+          <p>MIT License • Made with ❤️ for developers everywhere</p>
+        </div>
+      </div>
     </footer>
 
     <!-- Back to Top -->
-    <button class="back-to-top" id="backToTop" aria-label="Back to top">↑</button>
+    <button class="back-to-top" id="backToTop" aria-label="Back to top">
+      ↑
+    </button>
 
     <!-- Theme Toggle -->
-    <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">☀️</button>
 
     <script src="js/main.js"></script>
     <script src="js/community.js"></script>
@@ -529,16 +869,15 @@ <h4>Project</h4>
     <script src="js/timer.js"></script>
     <script src="js/certifications.js"></script>
     <script src="js/community-forum.js"></script>
-    <script src="js/certifications.js"></script>
-    <script src="js/community-forum.js"></script>
+
     <script>
-    document.addEventListener('DOMContentLoaded', () => {
+      document.addEventListener("DOMContentLoaded", () => {
         initLearningPaths();
         initBookmarkPanel();
         initTimerWidget();
         updateBookmarkCounters();
         initAchievements();
-    });
+      });
     </script>
-</body>
+  </body>
 </html>
diff --git a/js/main.js b/js/main.js
index 30d2392..48ea67f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -3,220 +3,262 @@
    ======================================== */
 
 const ROADMAPS = [
-    { id: "frontend", slug: "frontend", icon: "🎨", title: "Frontend Developer" },
-    { id: "backend", slug: "backend", icon: "⚙️", title: "Backend Developer" },
-    { id: "fullstack", slug: "fullstack", icon: "🌐", title: "Full Stack Developer" },
-    { id: "ml-ai", slug: "ml-ai", icon: "🧠", title: "ML / AI Engineer" },
-    { id: "devops", slug: "devops", icon: "☁️", title: "DevOps / Cloud Engineer" },
-    { id: "mobile", slug: "mobile", icon: "📱", title: "Mobile Developer" },
-    { id: "cybersecurity", slug: "cybersecurity", icon: "🔒", title: "Cybersecurity" },
-    { id: "data-engineer", slug: "data-engineer", icon: "🗃️", title: "Data Engineer" },
-    { id: "blockchain", slug: "blockchain", icon: "⛓️", title: "Blockchain / Web3" },
-    { id: "game-dev", slug: "game-dev", icon: "🎮", title: "Game Developer" },
-    { id: "embedded-iot", slug: "embedded-iot", icon: "🔌", title: "Embedded / IoT" },
-    { id: "product-manager", slug: "product-manager", icon: "📋", title: "Product Manager" },
-    { id: "devsecops", slug: "devsecops", icon: "🛡️", title: "DevSecOps Engineer" },
-    { id: "qa-engineer", slug: "qa-engineer", icon: "🧪", title: "QA / Test Engineer" },
-    { id: "technical-writer", slug: "technical-writer", icon: "✍️", title: "Technical Writer" },
-    { id: "low-code-no-code", slug: "low-code-no-code", icon: "⚡", title: "Low-Code / No-Code" },
-    { id: "cloud-architect", slug: "cloud-architect", icon: "🏗️", title: "Cloud Architect" },
+  { id: "frontend", slug: "frontend", icon: "🎨", title: "Frontend Developer" },
+  { id: "backend", slug: "backend", icon: "⚙️", title: "Backend Developer" },
+  {
+    id: "fullstack",
+    slug: "fullstack",
+    icon: "🌐",
+    title: "Full Stack Developer",
+  },
+  { id: "ml-ai", slug: "ml-ai", icon: "🧠", title: "ML / AI Engineer" },
+  {
+    id: "devops",
+    slug: "devops",
+    icon: "☁️",
+    title: "DevOps / Cloud Engineer",
+  },
+  { id: "mobile", slug: "mobile", icon: "📱", title: "Mobile Developer" },
+  {
+    id: "cybersecurity",
+    slug: "cybersecurity",
+    icon: "🔒",
+    title: "Cybersecurity",
+  },
+  {
+    id: "data-engineer",
+    slug: "data-engineer",
+    icon: "🗃️",
+    title: "Data Engineer",
+  },
+  {
+    id: "blockchain",
+    slug: "blockchain",
+    icon: "⛓️",
+    title: "Blockchain / Web3",
+  },
+  { id: "game-dev", slug: "game-dev", icon: "🎮", title: "Game Developer" },
+  {
+    id: "embedded-iot",
+    slug: "embedded-iot",
+    icon: "🔌",
+    title: "Embedded / IoT",
+  },
+  {
+    id: "product-manager",
+    slug: "product-manager",
+    icon: "📋",
+    title: "Product Manager",
+  },
+  {
+    id: "devsecops",
+    slug: "devsecops",
+    icon: "🛡️",
+    title: "DevSecOps Engineer",
+  },
+  {
+    id: "qa-engineer",
+    slug: "qa-engineer",
+    icon: "🧪",
+    title: "QA / Test Engineer",
+  },
+  {
+    id: "technical-writer",
+    slug: "technical-writer",
+    icon: "✍️",
+    title: "Technical Writer",
+  },
+  {
+    id: "low-code-no-code",
+    slug: "low-code-no-code",
+    icon: "⚡",
+    title: "Low-Code / No-Code",
+  },
+  {
+    id: "cloud-architect",
+    slug: "cloud-architect",
+    icon: "🏗️",
+    title: "Cloud Architect",
+  },
 ];
 
 // === Particle System ===
 function initParticles() {
-    const canvas = document.getElementById('particles');
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    let particles = [];
-    let w, h;
-
-    function resize() {
-        w = canvas.width = window.innerWidth;
-        h = canvas.height = window.innerHeight;
-    }
-    resize();
-    window.addEventListener('resize', resize);
-
-    for (let i = 0; i < 60; i++) {
-        particles.push({
-            x: Math.random() * w, y: Math.random() * h,
-            vx: (Math.random() - 0.5) * 0.3, vy: (Math.random() - 0.5) * 0.3,
-            r: Math.random() * 2 + 0.5,
-        });
-    }
-
-    function draw() {
-        ctx.clearRect(0, 0, w, h);
-        const isDark = document.documentElement.getAttribute('data-theme') !== 'light';
-        const color = isDark ? '124,92,252' : '124,92,252';
-
-        particles.forEach(p => {
-            p.x += p.vx; p.y += p.vy;
-            if (p.x < 0) p.x = w; if (p.x > w) p.x = 0;
-            if (p.y < 0) p.y = h; if (p.y > h) p.y = 0;
-
-            ctx.beginPath();
-            ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
-            ctx.fillStyle = `rgba(${color},0.3)`;
-            ctx.fill();
-        });
-
-        // Draw connections
-        for (let i = 0; i < particles.length; i++) {
-            for (let j = i + 1; j < particles.length; j++) {
-                const dx = particles[i].x - particles[j].x;
-                const dy = particles[i].y - particles[j].y;
-                const dist = Math.sqrt(dx * dx + dy * dy);
-                if (dist < 150) {
-                    ctx.beginPath();
-                    ctx.moveTo(particles[i].x, particles[i].y);
-                    ctx.lineTo(particles[j].x, particles[j].y);
-                    ctx.strokeStyle = `rgba(${color},${0.08 * (1 - dist / 150)})`;
-                    ctx.stroke();
-                }
-            }
-        }
-        requestAnimationFrame(draw);
-    }
-    draw();
-}
-
-// === Theme Toggle ===
-function initTheme() {
-    const toggle = document.getElementById('themeToggle');
-    if (!toggle) return;
-    const saved = localStorage.getItem('devroadmaps-theme');
-    if (saved === 'auto' || !saved) {
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
-    } else {
-        document.documentElement.setAttribute('data-theme', saved);
-    }
-    updateThemeIcon();
-
-    // Listen for system theme changes when in auto mode
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-        const current = localStorage.getItem('devroadmaps-theme');
-        if (current === 'auto' || !current) {
-            document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
-            updateThemeIcon();
-        }
+  const canvas = document.getElementById("particles");
+  if (!canvas) return;
+  const ctx = canvas.getContext("2d");
+  let particles = [];
+  let w, h;
+
+  function resize() {
+    w = canvas.width = window.innerWidth;
+    h = canvas.height = window.innerHeight;
+  }
+  resize();
+  window.addEventListener("resize", resize);
+
+  for (let i = 0; i < 60; i++) {
+    particles.push({
+      x: Math.random() * w,
+      y: Math.random() * h,
+      vx: (Math.random() - 0.5) * 0.3,
+      vy: (Math.random() - 0.5) * 0.3,
+      r: Math.random() * 2 + 0.5,
     });
-
-    // Cycle: dark → light → auto → dark...
-    const themes = ['dark', 'light', 'auto'];
-    toggle.addEventListener('click', () => {
-        const current = localStorage.getItem('devroadmaps-theme') || 'auto';
-        const idx = themes.indexOf(current);
-        const next = themes[(idx + 1) % themes.length];
-        localStorage.setItem('devroadmaps-theme', next);
-        if (next === 'auto') {
-            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
-        } else {
-            document.documentElement.setAttribute('data-theme', next);
-        }
-        updateThemeIcon();
+  }
+
+  function draw() {
+    ctx.clearRect(0, 0, w, h);
+    const isDark =
+      document.documentElement.getAttribute("data-theme") !== "light";
+    const color = isDark ? "124,92,252" : "124,92,252";
+
+    particles.forEach((p) => {
+      p.x += p.vx;
+      p.y += p.vy;
+      if (p.x < 0) p.x = w;
+      if (p.x > w) p.x = 0;
+      if (p.y < 0) p.y = h;
+      if (p.y > h) p.y = 0;
+
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(${color},0.3)`;
+      ctx.fill();
     });
 
-    function updateThemeIcon() {
-        const stored = localStorage.getItem('devroadmaps-theme') || 'auto';
-        const isDark = document.documentElement.getAttribute('data-theme') !== 'light';
-        if (toggle) {
-            if (stored === 'auto') toggle.textContent = '🔄';
-            else toggle.textContent = isDark ? '☀️' : '🌙';
+    // Draw connections
+    for (let i = 0; i < particles.length; i++) {
+      for (let j = i + 1; j < particles.length; j++) {
+        const dx = particles[i].x - particles[j].x;
+        const dy = particles[i].y - particles[j].y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < 150) {
+          ctx.beginPath();
+          ctx.moveTo(particles[i].x, particles[i].y);
+          ctx.lineTo(particles[j].x, particles[j].y);
+          ctx.strokeStyle = `rgba(${color},${0.08 * (1 - dist / 150)})`;
+          ctx.stroke();
         }
+      }
     }
+    requestAnimationFrame(draw);
+  }
+  draw();
 }
 
 // === Hamburger Menu ===
 function initHamburger() {
-    const btn = document.getElementById('hamburger');
-    const links = document.getElementById('navLinks');
-    if (!btn || !links) return;
-    btn.addEventListener('click', () => links.classList.toggle('open'));
-    links.querySelectorAll('a').forEach(a => a.addEventListener('click', () => links.classList.remove('open')));
+  const btn = document.getElementById("hamburger");
+  const links = document.getElementById("navLinks");
+  if (!btn || !links) return;
+  btn.addEventListener("click", () => links.classList.toggle("open"));
+  links
+    .querySelectorAll("a")
+    .forEach((a) =>
+      a.addEventListener("click", () => links.classList.remove("open")),
+    );
 }
 
 // === Back to Top ===
 function initBackToTop() {
-    const btn = document.getElementById('backToTop');
-    if (!btn) return;
-    window.addEventListener('scroll', () => {
-        btn.classList.toggle('visible', window.scrollY > 400);
-    });
-    btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+  const btn = document.getElementById("backToTop");
+  if (!btn) return;
+  window.addEventListener("scroll", () => {
+    btn.classList.toggle("visible", window.scrollY > 400);
+  });
+  btn.addEventListener("click", () =>
+    window.scrollTo({ top: 0, behavior: "smooth" }),
+  );
 }
 
 // === Scroll Animations ===
 function initScrollAnimations() {
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); }});
-    }, { threshold: 0.1 });
-    document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el));
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add("visible");
+          observer.unobserve(e.target);
+        }
+      });
+    },
+    { threshold: 0.1 },
+  );
+  document
+    .querySelectorAll("[data-animate]")
+    .forEach((el) => observer.observe(el));
 }
 
 // === Animated Counters ===
 function initCounters() {
-    const counters = document.querySelectorAll('.stat-number[data-target]');
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(e => {
-            if (e.isIntersecting) {
-                animateCounter(e.target);
-                observer.unobserve(e.target);
-            }
-        });
-    }, { threshold: 0.5 });
-    counters.forEach(c => observer.observe(c));
+  const counters = document.querySelectorAll(".stat-number[data-target]");
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          animateCounter(e.target);
+          observer.unobserve(e.target);
+        }
+      });
+    },
+    { threshold: 0.5 },
+  );
+  counters.forEach((c) => observer.observe(c));
 }
 
 function animateCounter(el) {
-    const target = parseInt(el.dataset.target);
-    const duration = 2000;
-    const start = performance.now();
-    function update(now) {
-        const elapsed = now - start;
-        const progress = Math.min(elapsed / duration, 1);
-        const eased = 1 - Math.pow(1 - progress, 3);
-        el.textContent = Math.floor(target * eased);
-        if (progress < 1) requestAnimationFrame(update);
-        else el.textContent = target;
-    }
-    requestAnimationFrame(update);
+  const target = parseInt(el.dataset.target);
+  const duration = 2000;
+  const start = performance.now();
+  function update(now) {
+    const elapsed = now - start;
+    const progress = Math.min(elapsed / duration, 1);
+    const eased = 1 - Math.pow(1 - progress, 3);
+    el.textContent = Math.floor(target * eased);
+    if (progress < 1) requestAnimationFrame(update);
+    else el.textContent = target;
+  }
+  requestAnimationFrame(update);
 }
 
 // === FAQ Accordion ===
 function initFAQ() {
-    document.querySelectorAll('.faq-question').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const item = btn.parentElement;
-            const wasActive = item.classList.contains('active');
-            document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('active'));
-            if (!wasActive) item.classList.add('active');
-        });
+  document.querySelectorAll(".faq-question").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const item = btn.parentElement;
+      const wasActive = item.classList.contains("active");
+      document
+        .querySelectorAll(".faq-item")
+        .forEach((i) => i.classList.remove("active"));
+      if (!wasActive) item.classList.add("active");
     });
+  });
 }
 
 // === Landing Page: Roadmaps Grid ===
 async function initLandingRoadmaps() {
-    const grid = document.getElementById('roadmapsGrid');
-    if (!grid) return;
-
-    for (const rm of ROADMAPS) {
-        let nodeCount = 0;
-        let resourceCount = 0;
-        try {
-            const resp = await fetch(`roadmaps/${rm.slug}.json`);
-            const data = await resp.json();
-            nodeCount = data.nodes.length;
-            resourceCount = data.nodes.reduce((sum, n) => sum + n.resources.length, 0);
-        } catch (e) {}
-
-        const card = document.createElement('a');
-        card.href = `roadmap.html?roadmap=${rm.slug}`;
-        card.className = 'roadmap-card';
-        card.setAttribute('data-animate', '');
-        card.innerHTML = `
+  const grid = document.getElementById("roadmapsGrid");
+  if (!grid) return;
+
+  for (const rm of ROADMAPS) {
+    let nodeCount = 0;
+    let resourceCount = 0;
+    try {
+      const resp = await fetch(`roadmaps/${rm.slug}.json`);
+      const data = await resp.json();
+      nodeCount = data.nodes.length;
+      resourceCount = data.nodes.reduce(
+        (sum, n) => sum + n.resources.length,
+        0,
+      );
+    } catch (e) {}
+
+    const card = document.createElement("a");
+    card.href = `roadmap.html?roadmap=${rm.slug}`;
+    card.className = "roadmap-card";
+    card.setAttribute("data-animate", "");
+    card.innerHTML = `
             <span class="roadmap-card-icon">${rm.icon}</span>
             <h3>${rm.title}</h3>
             <p>${nodeCount} topics • ${resourceCount} free resources</p>
@@ -225,275 +267,397 @@ async function initLandingRoadmaps() {
                 <span>📊 ${nodeCount} nodes</span>
             </div>
         `;
-        grid.appendChild(card);
-    }
-    initScrollAnimations();
+    grid.appendChild(card);
+  }
+  initScrollAnimations();
 }
 
 // === Roadmap Viewer ===
 async function initRoadmapViewer() {
-    const params = new URLSearchParams(window.location.search);
-    const slug = params.get('roadmap');
-    if (!slug) { window.location.href = 'index.html'; return; }
-
-    let data;
-    try {
-        const resp = await fetch(`roadmaps/${slug}.json`);
-        data = await resp.json();
-    } catch (e) { window.location.href = 'index.html'; return; }
-
-    document.title = `${data.title} — DevRoadmaps`;
-    document.getElementById('roadmapIcon').textContent = data.icon || '';
-    document.getElementById('roadmapTitle').textContent = data.title;
-    document.getElementById('roadmapDesc').textContent = data.description || '';
-
-    // Community features
-    const ratingMgr = typeof initRatings === 'function' ? initRatings(slug) : null;
-    function getRating(nodeId, resIdx) { return ratingMgr ? ratingMgr.getRating(nodeId, resIdx) : 0; }
-
-    // Learner count
-    const learnerKey = `learner-count-${slug}`;
-    let learnerCount = parseInt(localStorage.getItem(learnerKey) || '0');
-    function updateLearnerCount(done, total) {
-        const pct = total > 0 ? done / total : 0;
-        if (!learnerCount) {
-            learnerCount = Math.max(Math.floor(pct * 47 + 20), 1);
-            localStorage.setItem(learnerKey, learnerCount.toString());
-        }
-        const el = document.getElementById('learnerCount');
-        if (el) el.textContent = `${learnerCount} learners`;
+  const params = new URLSearchParams(window.location.search);
+  const slug = params.get("roadmap");
+  if (!slug) {
+    window.location.href = "index.html";
+    return;
+  }
+
+  let data;
+  try {
+    const resp = await fetch(`roadmaps/${slug}.json`);
+    data = await resp.json();
+  } catch (e) {
+    window.location.href = "index.html";
+    return;
+  }
+
+  document.title = `${data.title} — DevRoadmaps`;
+  document.getElementById("roadmapIcon").textContent = data.icon || "";
+  document.getElementById("roadmapTitle").textContent = data.title;
+  document.getElementById("roadmapDesc").textContent = data.description || "";
+
+  // Community features
+  const ratingMgr =
+    typeof initRatings === "function" ? initRatings(slug) : null;
+  function getRating(nodeId, resIdx) {
+    return ratingMgr ? ratingMgr.getRating(nodeId, resIdx) : 0;
+  }
+
+  // Learner count
+  const learnerKey = `learner-count-${slug}`;
+  let learnerCount = parseInt(localStorage.getItem(learnerKey) || "0");
+  function updateLearnerCount(done, total) {
+    const pct = total > 0 ? done / total : 0;
+    if (!learnerCount) {
+      learnerCount = Math.max(Math.floor(pct * 47 + 20), 1);
+      localStorage.setItem(learnerKey, learnerCount.toString());
     }
-
-    const progressKey = `progress-${slug}`;
-    let completed = JSON.parse(localStorage.getItem(progressKey) || '{}');
-
-    function saveProgress() {
-        localStorage.setItem(progressKey, JSON.stringify(completed));
-        updateProgress();
-    }
-
-    function updateProgress() {
-        const total = data.nodes.length;
-        const done = Object.keys(completed).filter(k => completed[k]).length;
-        const pct = total > 0 ? Math.round(done / total * 100) : 0;
-        document.getElementById('progressFill').style.width = pct + '%';
-        document.getElementById('progressText').textContent = pct + '%';
-        updateLearnerCount(done, total);
-    }
-
-    function renderNodes(nodes) {
-        const container = document.getElementById('roadmapNodes');
-        container.innerHTML = '';
-
-        nodes.forEach((node, idx) => {
-            // Connector
-            if (idx > 0) {
-                const conn = document.createElement('div');
-                conn.className = 'node-connector';
-                container.appendChild(conn);
-            }
-
-            const el = document.createElement('div');
-            el.className = 'node' + (completed[node.id] ? ' completed' : '');
-            el.dataset.category = node.category;
-            el.dataset.id = node.id;
-
-            const badgeClass = `badge-${node.category}`;
-            const diff = node.difficulty || 'Beginner';
-
-            let resourcesHtml = '';
-            const typeIcons = { docs: '📖', video: '🎥', course: '🎯', tool: '🔧', tutorial: '🛠️' };
-            node.resources.forEach((res, ri) => {
-                const icon = typeIcons[res.type] || '📖';
-                const rating = typeof getRating === 'function' ? getRating(node.id, ri) : 0;
-                let starsHtml = '';
-                if (rating > 0) {
-                    starsHtml = '<span class="resource-rating">' + '★'.repeat(rating) + '☆'.repeat(5 - rating) + '</span>';
-                }
-                resourcesHtml += `<a href="${res.url}" target="_blank" rel="noopener" class="resource-link" data-type="${res.type}">
+    const el = document.getElementById("learnerCount");
+    if (el) el.textContent = `${learnerCount} learners`;
+  }
+
+  const progressKey = `progress-${slug}`;
+  let completed = JSON.parse(localStorage.getItem(progressKey) || "{}");
+
+  function saveProgress() {
+    localStorage.setItem(progressKey, JSON.stringify(completed));
+    updateProgress();
+  }
+
+  function updateProgress() {
+    const total = data.nodes.length;
+    const done = Object.keys(completed).filter((k) => completed[k]).length;
+    const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+    document.getElementById("progressFill").style.width = pct + "%";
+    document.getElementById("progressText").textContent = pct + "%";
+    updateLearnerCount(done, total);
+  }
+
+  function renderNodes(nodes) {
+    const container = document.getElementById("roadmapNodes");
+    container.innerHTML = "";
+
+    nodes.forEach((node, idx) => {
+      // Connector
+      if (idx > 0) {
+        const conn = document.createElement("div");
+        conn.className = "node-connector";
+        container.appendChild(conn);
+      }
+
+      const el = document.createElement("div");
+      el.className = "node" + (completed[node.id] ? " completed" : "");
+      el.dataset.category = node.category;
+      el.dataset.id = node.id;
+
+      const badgeClass = `badge-${node.category}`;
+      const diff = node.difficulty || "Beginner";
+
+      let resourcesHtml = "";
+      const typeIcons = {
+        docs: "📖",
+        video: "🎥",
+        course: "🎯",
+        tool: "🔧",
+        tutorial: "🛠️",
+      };
+      node.resources.forEach((res, ri) => {
+        const icon = typeIcons[res.type] || "📖";
+        const rating =
+          typeof getRating === "function" ? getRating(node.id, ri) : 0;
+        let starsHtml = "";
+        if (rating > 0) {
+          starsHtml =
+            '<span class="resource-rating">' +
+            "★".repeat(rating) +
+            "☆".repeat(5 - rating) +
+            "</span>";
+        }
+        resourcesHtml += `<a href="${res.url}" target="_blank" rel="noopener" class="resource-link" data-type="${res.type}">
                     <span>${icon}</span>
                     <span>${res.title}</span>
                     <span class="resource-type">${res.type}</span>
                     ${starsHtml}
                 </a>`;
-            });
+      });
 
-            el.innerHTML = `
+      el.innerHTML = `
                 <div class="node-header">
                     <span class="node-icon">${node.icon}</span>
                     <span class="node-title">${node.title}</span>
                     <span class="node-badge ${badgeClass}">${node.category}</span>
                     <span class="node-expand-icon">▶</span>
-                    <button class="bookmark-btn" data-node-id="${node.id}" title="Bookmark">${isBookmarked(node.id, slug) ? '⭐' : '☆'}</button>
+                    <button class="bookmark-btn" data-node-id="${node.id}" title="Bookmark">${isBookmarked(node.id, slug) ? "⭐" : "☆"}</button>
                 </div>
                 <div class="node-body">
                     <div class="node-content">
                         <p class="node-desc">${node.description}</p>
                         <div class="node-resources">${resourcesHtml}</div>
                         <button class="btn btn-sm mark-complete" style="margin-top:12px">
-                            ${completed[node.id] ? '✅ Completed' : '☐ Mark Complete'}
+                            ${completed[node.id] ? "✅ Completed" : "☐ Mark Complete"}
                         </button>
                     </div>
                 </div>
             `;
 
-            // Expand on header click
-            el.querySelector('.node-header').addEventListener('click', (e) => {
-                if (e.target.closest('.mark-complete')) return;
-                el.classList.toggle('expanded');
-            });
-
-            // Mark complete
-            el.querySelector('.mark-complete').addEventListener('click', () => {
-                completed[node.id] = !completed[node.id];
-                el.classList.toggle('completed', completed[node.id]);
-                el.querySelector('.mark-complete').textContent = completed[node.id] ? '✅ Completed' : '☐ Mark Complete';
-                saveProgress();
-                updateMinimap();
-            });
-
-            // Bookmark
-            const bookmarkBtn = el.querySelector('.bookmark-btn');
-            if (bookmarkBtn) {
-                bookmarkBtn.addEventListener('click', () => {
-                    const bookmarked = toggleBookmark(node.id, slug);
-                    bookmarkBtn.textContent = bookmarked ? '⭐' : '☆';
-                });
-            }
-
-            container.appendChild(el);
+      // Expand on header click
+      el.querySelector(".node-header").addEventListener("click", (e) => {
+        if (e.target.closest(".mark-complete")) return;
+        el.classList.toggle("expanded");
+      });
+
+      // Mark complete
+      el.querySelector(".mark-complete").addEventListener("click", () => {
+        completed[node.id] = !completed[node.id];
+        el.classList.toggle("completed", completed[node.id]);
+        el.querySelector(".mark-complete").textContent = completed[node.id]
+          ? "✅ Completed"
+          : "☐ Mark Complete";
+        saveProgress();
+        updateMinimap();
+      });
+
+      // Bookmark
+      const bookmarkBtn = el.querySelector(".bookmark-btn");
+      if (bookmarkBtn) {
+        bookmarkBtn.addEventListener("click", () => {
+          const bookmarked = toggleBookmark(node.id, slug);
+          bookmarkBtn.textContent = bookmarked ? "⭐" : "☆";
         });
+      }
 
-        updateProgress();
-    }
+      container.appendChild(el);
+    });
 
-    // Minimap
-    function renderMinimap(nodes) {
-        const container = document.getElementById('minimapContent');
-        container.innerHTML = '<div class="minimap-title">Topics</div>';
-        nodes.forEach(node => {
-            const el = document.createElement('div');
-            el.className = 'minimap-node' + (completed[node.id] ? ' completed' : '');
-            el.textContent = `${node.icon} ${node.title}`;
-            el.addEventListener('click', () => {
-                document.querySelector(`.node[data-id="${node.id}"]`)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            });
-            container.appendChild(el);
-        });
-    }
+    updateProgress();
+  }
+
+  // Minimap
+  function renderMinimap(nodes) {
+    const container = document.getElementById("minimapContent");
+    container.innerHTML = '<div class="minimap-title">Topics</div>';
+    nodes.forEach((node) => {
+      const el = document.createElement("div");
+      el.className = "minimap-node" + (completed[node.id] ? " completed" : "");
+      el.textContent = `${node.icon} ${node.title}`;
+      el.addEventListener("click", () => {
+        document
+          .querySelector(`.node[data-id="${node.id}"]`)
+          ?.scrollIntoView({ behavior: "smooth", block: "center" });
+      });
+      container.appendChild(el);
+    });
+  }
 
-    function updateMinimap() {
-        document.querySelectorAll('.minimap-node').forEach((el, i) => {
-            if (data.nodes[i]) {
-                el.classList.toggle('completed', !!completed[data.nodes[i].id]);
+  function updateMinimap() {
+    document.querySelectorAll(".minimap-node").forEach((el, i) => {
+      if (data.nodes[i]) {
+        el.classList.toggle("completed", !!completed[data.nodes[i].id]);
+      }
+    });
+  }
+
+  // Active minimap node on scroll
+  function initMinimapScroll() {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            document
+              .querySelectorAll(".minimap-node")
+              .forEach((n) => n.classList.remove("active"));
+            const idx = data.nodes.findIndex(
+              (n) => n.id === e.target.dataset.id,
+            );
+            if (
+              idx >= 0 &&
+              document.querySelectorAll(".minimap-node")[idx + 1]
+            ) {
+              document
+                .querySelectorAll(".minimap-node")
+                [idx + 1].classList.add("active");
             }
+          }
         });
+      },
+      { threshold: 0.5 },
+    );
+    document.querySelectorAll(".node").forEach((n) => observer.observe(n));
+  }
+
+  renderNodes(data.nodes);
+  renderMinimap(data.nodes);
+  setTimeout(initMinimapScroll, 100);
+
+  // Search
+  document.getElementById("searchInput").addEventListener("input", (e) => {
+    const q = e.target.value.toLowerCase();
+    const filtered = data.nodes.filter(
+      (n) =>
+        n.title.toLowerCase().includes(q) ||
+        n.description.toLowerCase().includes(q),
+    );
+    renderNodes(filtered);
+    renderMinimap(filtered);
+  });
+
+  // Filter
+  document.querySelectorAll(".filter-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      document
+        .querySelectorAll(".filter-btn")
+        .forEach((b) => b.classList.remove("active"));
+      btn.classList.add("active");
+      const filter = btn.dataset.filter;
+      const filtered =
+        filter === "all"
+          ? data.nodes
+          : data.nodes.filter((n) => n.category === filter);
+      renderNodes(filtered);
+      renderMinimap(filtered);
+    });
+  });
+
+  // Reset
+  document.getElementById("resetBtn").addEventListener("click", () => {
+    if (confirm("Reset all progress for this roadmap?")) {
+      completed = {};
+      saveProgress();
+      renderNodes(data.nodes);
+      renderMinimap(data.nodes);
     }
-
-    // Active minimap node on scroll
-    function initMinimapScroll() {
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(e => {
-                if (e.isIntersecting) {
-                    document.querySelectorAll('.minimap-node').forEach(n => n.classList.remove('active'));
-                    const idx = data.nodes.findIndex(n => n.id === e.target.dataset.id);
-                    if (idx >= 0 && document.querySelectorAll('.minimap-node')[idx + 1]) {
-                        document.querySelectorAll('.minimap-node')[idx + 1].classList.add('active');
-                    }
-                }
-            });
-        }, { threshold: 0.5 });
-        document.querySelectorAll('.node').forEach(n => observer.observe(n));
+  });
+
+  // Print
+  document.getElementById("printBtn").addEventListener("click", () => {
+    document
+      .querySelectorAll(".node")
+      .forEach((n) => n.classList.add("expanded"));
+    setTimeout(() => window.print(), 300);
+  });
+
+  // Expand All
+  let allExpanded = false;
+  document.getElementById("expandAllBtn").addEventListener("click", () => {
+    allExpanded = !allExpanded;
+    document
+      .querySelectorAll(".node")
+      .forEach((n) => n.classList.toggle("expanded", allExpanded));
+    document.getElementById("expandAllBtn").textContent = allExpanded
+      ? "Collapse All"
+      : "Expand All";
+  });
+
+  // Keyboard navigation
+  let currentIdx = -1;
+  document.addEventListener("keydown", (e) => {
+    const nodes = document.querySelectorAll(".node");
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      currentIdx = Math.min(currentIdx + 1, nodes.length - 1);
+      nodes[currentIdx]?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      currentIdx = Math.max(currentIdx - 1, 0);
+      nodes[currentIdx]?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    } else if (e.key === "Enter" && currentIdx >= 0) {
+      nodes[currentIdx]?.classList.toggle("expanded");
+    } else if (e.key === " " && currentIdx >= 0) {
+      e.preventDefault();
+      const btn = nodes[currentIdx]?.querySelector(".mark-complete");
+      if (btn) btn.click();
     }
+  });
+}
 
-    renderNodes(data.nodes);
-    renderMinimap(data.nodes);
-    setTimeout(initMinimapScroll, 100);
-
-    // Search
-    document.getElementById('searchInput').addEventListener('input', (e) => {
-        const q = e.target.value.toLowerCase();
-        const filtered = data.nodes.filter(n =>
-            n.title.toLowerCase().includes(q) || n.description.toLowerCase().includes(q)
-        );
-        renderNodes(filtered);
-        renderMinimap(filtered);
-    });
-
-    // Filter
-    document.querySelectorAll('.filter-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
-            const filter = btn.dataset.filter;
-            const filtered = filter === 'all' ? data.nodes : data.nodes.filter(n => n.category === filter);
-            renderNodes(filtered);
-            renderMinimap(filtered);
-        });
-    });
+// === Init ===
+document.addEventListener("DOMContentLoaded", () => {
+  initParticles();
+  initTheme();
+  initHamburger();
+  initBackToTop();
+  initFAQ();
+
+  const isRoadmapPage = document.querySelector(".roadmap-page");
+  if (isRoadmapPage) {
+    initRoadmapViewer();
+  } else {
+    initCounters();
+    initLandingRoadmaps();
+  }
+
+  // Scroll animations (for non-roadmap elements)
+  initScrollAnimations();
+});
 
-    // Reset
-    document.getElementById('resetBtn').addEventListener('click', () => {
-        if (confirm('Reset all progress for this roadmap?')) {
-            completed = {};
-            saveProgress();
-            renderNodes(data.nodes);
-            renderMinimap(data.nodes);
-        }
-    });
+// toggle button logic
+const initTheme = () => {
+  const themeToggleBtn = document.getElementById("theme-toggle");
 
-    // Print
-    document.getElementById('printBtn').addEventListener('click', () => {
-        document.querySelectorAll('.node').forEach(n => n.classList.add('expanded'));
-        setTimeout(() => window.print(), 300);
-    });
+  const setTheme = (isDark) => {
+    // Select icons INSIDE the function to ensure they are captured
+    const darkIcon = document.getElementById("theme-toggle-dark-icon");
+    const lightIcon = document.getElementById("theme-toggle-light-icon");
 
-    // Expand All
-    let allExpanded = false;
-    document.getElementById('expandAllBtn').addEventListener('click', () => {
-        allExpanded = !allExpanded;
-        document.querySelectorAll('.node').forEach(n => n.classList.toggle('expanded', allExpanded));
-        document.getElementById('expandAllBtn').textContent = allExpanded ? 'Collapse All' : 'Expand All';
-    });
+    if (isDark) {
+      document.documentElement.classList.add("dark");
+      document.documentElement.setAttribute("data-theme", "dark");
 
-    // Keyboard navigation
-    let currentIdx = -1;
-    document.addEventListener('keydown', (e) => {
-        const nodes = document.querySelectorAll('.node');
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            currentIdx = Math.min(currentIdx + 1, nodes.length - 1);
-            nodes[currentIdx]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        } else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            currentIdx = Math.max(currentIdx - 1, 0);
-            nodes[currentIdx]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        } else if (e.key === 'Enter' && currentIdx >= 0) {
-            nodes[currentIdx]?.classList.toggle('expanded');
-        } else if (e.key === ' ' && currentIdx >= 0) {
-            e.preventDefault();
-            const btn = nodes[currentIdx]?.querySelector('.mark-complete');
-            if (btn) btn.click();
-        }
-    });
-}
+      // If DARK mode is active, we show the SUN (to switch to light)
+      if (darkIcon) darkIcon.classList.add("hidden");
+      if (lightIcon) lightIcon.classList.remove("hidden");
 
-// === Init ===
-document.addEventListener('DOMContentLoaded', () => {
-    initParticles();
-    initTheme();
-    initHamburger();
-    initBackToTop();
-    initFAQ();
-
-    const isRoadmapPage = document.querySelector('.roadmap-page');
-    if (isRoadmapPage) {
-        initRoadmapViewer();
+      localStorage.setItem("color-theme", "dark");
     } else {
-        initCounters();
-        initLandingRoadmaps();
-    }
+      document.documentElement.classList.remove("dark");
+      document.documentElement.setAttribute("data-theme", "light");
 
-    // Scroll animations (for non-roadmap elements)
-    initScrollAnimations();
+      // If LIGHT mode is active, we show the MOON (to switch to dark)
+      if (lightIcon) lightIcon.classList.add("hidden");
+      if (darkIcon) darkIcon.classList.remove("hidden");
+
+      localStorage.setItem("color-theme", "light");
+    }
+  };
+
+  const savedTheme = localStorage.getItem("color-theme");
+  const systemPrefersDark = window.matchMedia(
+    "(prefers-color-scheme: dark)",
+  ).matches;
+
+  // Logic: Use saved preference, otherwise fallback to system default
+  const isCurrentlyDark =
+    savedTheme === "dark" || (!savedTheme && systemPrefersDark);
+
+  setTheme(isCurrentlyDark);
+
+  if (themeToggleBtn) {
+    themeToggleBtn.onclick = () => {
+      const isDarkNow = document.documentElement.classList.contains("dark");
+      setTheme(!isDarkNow);
+    };
+  }
+};
+// 2. THE INITIALIZATION BLOCK
+document.addEventListener("DOMContentLoaded", () => {
+  initParticles();
+  initTheme(); // This calls the function above
+  initHamburger();
+  initBackToTop();
+  initFAQ();
+
+  const isRoadmapPage = document.querySelector(".roadmap-page");
+  if (isRoadmapPage) {
+    initRoadmapViewer();
+  } else {
+    initCounters();
+    initLandingRoadmaps(); // THIS is what builds your cards!
+  }
+
+  initScrollAnimations();
 });
diff --git a/roadmap.html b/roadmap.html
index 5edae60..c2f8b96 100644
--- a/roadmap.html
+++ b/roadmap.html
@@ -1,142 +1,241 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" data-theme="dark">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Roadmap — DevRoadmaps</title>
-    <meta name="description" content="Interactive developer roadmap with progress tracking, community tips, and free curated resources on DevRoadmaps.">
-    <meta property="og:title" content="Roadmap — DevRoadmaps">
-    <meta property="og:description" content="Interactive developer roadmap with progress tracking, community tips, and free curated resources.">
-    <meta property="og:url" content="https://rudra496.github.io/devroadmaps/roadmap.html">
-    <meta property="og:type" content="website">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="Roadmap — DevRoadmaps">
-    <meta name="twitter:creator" content="@rudra496">
-    <link rel="canonical" href="https://rudra496.github.io/devroadmaps/roadmap.html">
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🗺️</text></svg>">
-</head>
-<body class="roadmap-page">
+    <meta
+      name="description"
+      content="Interactive developer roadmap with progress tracking, community tips, and free curated resources on DevRoadmaps."
+    />
+    <meta property="og:title" content="Roadmap — DevRoadmaps" />
+    <meta
+      property="og:description"
+      content="Interactive developer roadmap with progress tracking, community tips, and free curated resources."
+    />
+    <meta
+      property="og:url"
+      content="https://rudra496.github.io/devroadmaps/roadmap.html"
+    />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Roadmap — DevRoadmaps" />
+    <meta name="twitter:creator" content="@rudra496" />
+    <link
+      rel="canonical"
+      href="https://rudra496.github.io/devroadmaps/roadmap.html"
+    />
+    <link rel="stylesheet" href="css/style.css" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🗺️</text></svg>"
+    />
+  </head>
+  <body class="roadmap-page">
     <canvas id="particles"></canvas>
 
     <nav class="navbar" id="navbar">
-        <div class="nav-container">
-            <a href="index.html" class="nav-logo">🗺️ DevRoadmaps</a>
-            <div class="nav-links" id="navLinks">
-                <a href="index.html#roadmaps">All Roadmaps</a>
-                <a href="index.html#features">Features</a>
-            </div>
-            <button class="hamburger" id="hamburger" aria-label="Toggle menu">
-                <span></span><span></span><span></span>
-            </button>
+      <div
+        class="nav-container"
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+        "
+      >
+        <a href="index.html" class="nav-logo">🗺️ DevRoadmaps</a>
+
+        <div style="display: flex; align-items: center; gap: 25px">
+          <div class="nav-links" id="navLinks" style="display: flex; gap: 20px">
+            <a href="index.html#roadmaps">All Roadmaps</a>
+            <a href="index.html#features">Features</a>
+          </div>
+
+          <button
+            id="theme-toggle"
+            type="button"
+            class="flex items-center justify-center w-10 h-10 ml-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300"
+          >
+            <span id="theme-toggle-dark-icon" class="hidden text-xl">🌙</span>
+            <span id="theme-toggle-light-icon" class="hidden text-xl">☀️</span>
+          </button>
+
+          <button class="hamburger" id="hamburger" aria-label="Toggle menu">
+            <span></span><span></span><span></span>
+          </button>
         </div>
+      </div>
     </nav>
 
     <header class="roadmap-header" id="roadmapHeader">
-        <div class="container">
-            <a href="index.html#roadmaps" class="back-link">← All Roadmaps</a>
-            <div class="roadmap-title-area">
-                <span class="roadmap-icon" id="roadmapIcon"></span>
-                <h1 id="roadmapTitle">Loading...</h1>
-            </div>
-            <p class="roadmap-desc" id="roadmapDesc"></p>
-            <div class="roadmap-controls">
-                <div class="search-box">
-                    <input type="text" id="searchInput" placeholder="Search topics..." autocomplete="off">
-                </div>
-                <div class="filter-buttons" id="filterButtons">
-                    <button class="filter-btn active" data-filter="all">All</button>
-                    <button class="filter-btn" data-filter="fundamentals">📖 Fundamentals</button>
-                    <button class="filter-btn" data-filter="intermediate">📘 Intermediate</button>
-                    <button class="filter-btn" data-filter="advanced">📕 Advanced</button>
-                    <button class="filter-btn" data-filter="tools">🔧 Tools</button>
-                </div>
-                <div class="filter-buttons" id="resourceTypeFilters" style="margin-top:8px">
-                    <button class="filter-btn active" data-rtype="all">📋 All Resources</button>
-                    <button class="filter-btn" data-rtype="docs">📖 Docs</button>
-                    <button class="filter-btn" data-rtype="video">🎥 Video</button>
-                    <button class="filter-btn" data-rtype="course">🎯 Course</button>
-                    <button class="filter-btn" data-rtype="tutorial">🛠️ Tutorial</button>
-                    <button class="filter-btn" data-rtype="tool">🔧 Tool</button>
-                </div>
-                <div class="action-buttons">
-                    <button class="btn btn-sm" id="resetBtn">Reset Progress</button>
-                    <button class="btn btn-sm" id="printBtn">🖨️ Print</button>
-                    <button class="btn btn-sm" id="printChecklistBtn">✅ Print Checklist</button>
-                    <button class="btn btn-sm" id="printBookmarksBtn">📌 Print Bookmarks</button>
-                    <button class="btn btn-sm" id="expandAllBtn">Expand All</button>
-                    <button class="btn btn-sm" onclick="toggleTimer(currentRoadmap)" id="timerToggle">▶ Start Timer</button>
-                    <span class="nav-badge" title="Study Timer"><span id="timerDisplay">25:00</span> <span id="timerLabel">🍅 Focus</span></span>
-                    <span class="nav-badge" title="Total Study Time">⏱️ <span class="total-study-time">0m 0s</span></span>
-                </div>
-            </div>
-            <div class="progress-bar-container">
-                <div class="progress-bar" id="progressBar"><div class="progress-fill" id="progressFill"></div></div>
-                <span class="progress-text" id="progressText">0%</span>
-            </div>
-            <div class="learner-count-display" style="text-align:center;margin-top:8px;font-size:13px;color:var(--text-muted)">
-                <span id="learnerCount"></span>
-            </div>
+      <div class="container">
+        <a href="index.html#roadmaps" class="back-link">← All Roadmaps</a>
+        <div class="roadmap-title-area">
+          <span class="roadmap-icon" id="roadmapIcon"></span>
+          <h1 id="roadmapTitle">Loading...</h1>
         </div>
+        <p class="roadmap-desc" id="roadmapDesc"></p>
+        <div class="roadmap-controls">
+          <div class="search-box">
+            <input
+              type="text"
+              id="searchInput"
+              placeholder="Search topics..."
+              autocomplete="off"
+            />
+          </div>
+          <div class="filter-buttons" id="filterButtons">
+            <button class="filter-btn active" data-filter="all">All</button>
+            <button class="filter-btn" data-filter="fundamentals">
+              📖 Fundamentals
+            </button>
+            <button class="filter-btn" data-filter="intermediate">
+              📘 Intermediate
+            </button>
+            <button class="filter-btn" data-filter="advanced">
+              📕 Advanced
+            </button>
+            <button class="filter-btn" data-filter="tools">🔧 Tools</button>
+          </div>
+          <div
+            class="filter-buttons"
+            id="resourceTypeFilters"
+            style="margin-top: 8px"
+          >
+            <button class="filter-btn active" data-rtype="all">
+              📋 All Resources
+            </button>
+            <button class="filter-btn" data-rtype="docs">📖 Docs</button>
+            <button class="filter-btn" data-rtype="video">🎥 Video</button>
+            <button class="filter-btn" data-rtype="course">🎯 Course</button>
+            <button class="filter-btn" data-rtype="tutorial">
+              🛠️ Tutorial
+            </button>
+            <button class="filter-btn" data-rtype="tool">🔧 Tool</button>
+          </div>
+          <div class="action-buttons">
+            <button class="btn btn-sm" id="resetBtn">Reset Progress</button>
+            <button class="btn btn-sm" id="printBtn">🖨️ Print</button>
+            <button class="btn btn-sm" id="printChecklistBtn">
+              ✅ Print Checklist
+            </button>
+            <button class="btn btn-sm" id="printBookmarksBtn">
+              📌 Print Bookmarks
+            </button>
+            <button class="btn btn-sm" id="expandAllBtn">Expand All</button>
+            <button
+              class="btn btn-sm"
+              onclick="toggleTimer(currentRoadmap)"
+              id="timerToggle"
+            >
+              ▶ Start Timer
+            </button>
+            <span class="nav-badge" title="Study Timer"
+              ><span id="timerDisplay">25:00</span>
+              <span id="timerLabel">🍅 Focus</span></span
+            >
+            <span class="nav-badge" title="Total Study Time"
+              >⏱️ <span class="total-study-time">0m 0s</span></span
+            >
+          </div>
+        </div>
+        <div class="progress-bar-container">
+          <div class="progress-bar" id="progressBar">
+            <div class="progress-fill" id="progressFill"></div>
+          </div>
+          <span class="progress-text" id="progressText">0%</span>
+        </div>
+        <div
+          class="learner-count-display"
+          style="
+            text-align: center;
+            margin-top: 8px;
+            font-size: 13px;
+            color: var(--text-muted);
+          "
+        >
+          <span id="learnerCount"></span>
+        </div>
+      </div>
     </header>
 
     <main class="roadmap-main">
-        <div class="container">
-            <div class="roadmap-layout">
-                <!-- Minimap -->
-                <aside class="minimap" id="minimap">
-                    <div class="minimap-content" id="minimapContent"></div>
-                </aside>
+      <div class="container">
+        <div class="roadmap-layout">
+          <!-- Minimap -->
+          <aside class="minimap" id="minimap">
+            <div class="minimap-content" id="minimapContent"></div>
+          </aside>
 
-                <!-- Roadmap Nodes -->
-                <div class="roadmap-nodes" id="roadmapNodes">
-                    <!-- Populated by JS -->
-                </div>
-            </div>
+          <!-- Roadmap Nodes -->
+          <div class="roadmap-nodes" id="roadmapNodes">
+            <!-- Populated by JS -->
+          </div>
         </div>
+      </div>
     </main>
 
-    <button class="back-to-top" id="backToTop" aria-label="Back to top">↑</button>
-    <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">🌙</button>
+    <button class="back-to-top" id="backToTop" aria-label="Back to top">
+      ↑
+    </button>
+    <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+      🌙
+    </button>
 
     <script src="js/main.js"></script>
     <script src="js/community.js"></script>
     <script src="js/learning-paths.js"></script>
     <script src="js/timer.js"></script>
     <script>
-    const params = new URLSearchParams(window.location.search);
-    const currentRoadmap = params.get('roadmap') || '';
-    initTimerWidget();
+      const params = new URLSearchParams(window.location.search);
+      const currentRoadmap = params.get("roadmap") || "";
+      initTimerWidget();
 
-    // Wire up print buttons
-    document.getElementById('printChecklistBtn')?.addEventListener('click', () => {
-        const progressKey = `progress-${currentRoadmap}`;
-        const completed = JSON.parse(localStorage.getItem(progressKey) || '{}');
-        fetch(`roadmaps/${currentRoadmap}.json`).then(r => r.json()).then(data => {
-            printChecklist(data.nodes, completed);
+      // Wire up print buttons
+      document
+        .getElementById("printChecklistBtn")
+        ?.addEventListener("click", () => {
+          const progressKey = `progress-${currentRoadmap}`;
+          const completed = JSON.parse(
+            localStorage.getItem(progressKey) || "{}",
+          );
+          fetch(`roadmaps/${currentRoadmap}.json`)
+            .then((r) => r.json())
+            .then((data) => {
+              printChecklist(data.nodes, completed);
+            });
+        });
+      document
+        .getElementById("printBookmarksBtn")
+        ?.addEventListener("click", () => {
+          const bookmarks = JSON.parse(
+            localStorage.getItem("devroadmaps-bookmarks") || "[]",
+          );
+          printBookmarksSummary(bookmarks);
         });
-    });
-    document.getElementById('printBookmarksBtn')?.addEventListener('click', () => {
-        const bookmarks = JSON.parse(localStorage.getItem('devroadmaps-bookmarks') || '[]');
-        printBookmarksSummary(bookmarks);
-    });
 
-    // Resource type filter
-    let activeResourceType = 'all';
-    document.querySelectorAll('#resourceTypeFilters .filter-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            document.querySelectorAll('#resourceTypeFilters .filter-btn').forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
+      // Resource type filter
+      let activeResourceType = "all";
+      document
+        .querySelectorAll("#resourceTypeFilters .filter-btn")
+        .forEach((btn) => {
+          btn.addEventListener("click", () => {
+            document
+              .querySelectorAll("#resourceTypeFilters .filter-btn")
+              .forEach((b) => b.classList.remove("active"));
+            btn.classList.add("active");
             activeResourceType = btn.dataset.rtype;
-            document.querySelectorAll('.resource-link').forEach(link => {
-                if (activeResourceType === 'all') {
-                    link.style.display = '';
-                } else {
-                    link.style.display = link.dataset.type === activeResourceType ? '' : 'none';
-                }
+            document.querySelectorAll(".resource-link").forEach((link) => {
+              if (activeResourceType === "all") {
+                link.style.display = "";
+              } else {
+                link.style.display =
+                  link.dataset.type === activeResourceType ? "" : "none";
+              }
             });
+          });
         });
-    });
     </script>
-</body>
+  </body>
 </html>
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..fb57ccd
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+