.timeline {
  list-style: none; max-width: 1100px; margin: clamp(30px, 4vh, 50px) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); position: relative;
}

.timeline::before {
  content: ""; position: absolute; top: 26px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(123, 150, 230, 0.4), transparent);
}
.tl-step {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: relative;
  opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease;
}
.tl-step.show { opacity: 1; transform: none; }
.tl-dot {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  background: rgba(10, 14, 30, 0.8); border: 1px solid var(--border);
  box-shadow: 0 0 22px rgba(37, 147, 255, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tl-dot iconify-icon { font-size: 24px; color: var(--blue); }
.tl-step:hover .tl-dot { transform: translateY(-3px); box-shadow: 0 0 30px rgba(37, 147, 255, 0.5); }
.tl-step h3 { font-family: "Sora", sans-serif; font-weight: 600; font-size: 16px; color: #eaf0ff; }
.tl-step p { color: var(--muted); font-size: 13px; line-height: 1.45; max-width: 24ch; }

@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 36px); max-width: 340px; }
  .timeline::before { display: none; }
  .tl-step p { max-width: 30ch; }
}