.timeline{position:relative;padding-left:48px;}
.timeline::before{
  content:'';position:absolute;left:18px;top:0;bottom:0;
  width:2px;background:linear-gradient(to bottom,var(--accent),transparent);
}
.tl-step{
  position:relative;margin-bottom:28px;
}
.tl-dot{
  position:absolute;left:-41px;top:18px;
  width:22px;height:22px;border-radius:50%;
  background:var(--bg);border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;font-weight:700;color:var(--accent);
  transition:transform 0.3s,box-shadow 0.3s;
}
.tl-step.visible .tl-dot{box-shadow:0 0 14px var(--accent);}
.tl-card{padding:24px 28px;transition:transform 0.3s;}
.tl-card:hover{transform:translateX(4px);}
.tl-num{
  font-size:0.72rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:6px;
}
.tl-title{
  font-family:var(--font-display);font-size:1.2rem;font-weight:700;
  color:var(--text);margin-bottom:8px;
}
.tl-text{font-size:0.9rem;line-height:1.7;color:var(--text2);}
.tl-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;font-size:0.85rem;color:var(--accent);font-weight:500;
  transition:gap 0.2s;
}
.tl-link:hover{gap:10px;}
.tl-link i{font-size:0.75rem;}

@media(max-width:600px){
  .timeline{padding-left:40px;}
  .tl-dot{left:-31px;top:18px;width:18px;height:18px;font-size:0.72rem;}
}