.timeline{
  position:relative;
  margin-top:10px;
  padding-left:14px;
}

.timeline::before{
  content:"";
  position:absolute;
  left:6px;
  top:6px;
  bottom:6px;
  width:2px;
  background:linear-gradient(180deg, rgba(59,130,246,.35), rgba(124,58,237,.35));
  border-radius:999px;
}

.t-item{
  position:relative;
  display:flex;
  gap:14px;
  margin:18px 0;
}

.t-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-alt));
  box-shadow:0 0 24px rgba(124,58,237,.55);
  margin-left:-1px;
  margin-top:14px;
}

.t-card{
  flex:1;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

.t-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}