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

.journey { background: radial-gradient(800px 400px at 10% 20%, rgba(47, 102, 255, .10), 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(--royal-400), var(--cyan-500));
  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(--cyan-500);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .15), 0 0 18px rgba(34, 211, 238, .6);
}
.j-node:nth-child(odd) .j-dot { border-color: var(--royal-500); box-shadow: 0 0 0 4px rgba(47, 102, 255, .18), 0 0 18px rgba(47, 102, 255, .6); }
.j-num { font-family: var(--font-mono); font-size: .68rem; color: var(--cyan-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(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3); color: var(--cyan-300);
}
.j-node:nth-child(odd) .j-tag { background: rgba(47, 102, 255, .12); border-color: rgba(47, 102, 255, .35); color: var(--blue-300); }