/* ============================================================
   08 · Journey — learning roadmap timeline
   ============================================================ */

.journey { background: radial-gradient(800px 400px at 10% 20%, rgba(59, 130, 246, .08), transparent 60%); }
.journey-track { position: relative; display: flex; flex-direction: column; gap: 0; max-width: 860px; }
.j-line {
  position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--blue-500), var(--violet-500), var(--fuchsia));
  opacity: .5; border-radius: 2px;
}
.j-node { position: relative; padding: 0 0 46px 64px; }
.j-node:last-child { padding-bottom: 0; }
.j-dot {
  position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-950); border: 3px solid var(--violet-500);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .15), 0 0 18px rgba(139, 92, 246, .6);
}
.j-node:nth-child(odd) .j-dot { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(59, 130, 246, .15), 0 0 18px rgba(59, 130, 246, .6); }
.j-num { font-family: var(--font-mono); font-size: .68rem; color: var(--violet-400); letter-spacing: .2em; }
.j-node h3 { font-size: 1.28rem; margin: 6px 0 8px; }
.j-node p { color: var(--slate-400); max-width: 560px; margin-bottom: 14px; }
.j-tag {
  display: inline-block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(139, 92, 246, .12); border: 1px solid rgba(139, 92, 246, .3); color: var(--violet-500);
}
.j-node:nth-child(odd) .j-tag { background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .3); color: var(--blue-500); }