.timeline{--line-y:70px;--line-thickness:3px;--line-color:#cbd5e1;--dot-color:#334155;position:relative;margin:30px 0 10px;height:150px}.timeline-line{position:absolute;left:4%;right:4%;top:var(--line-y);height:var(--line-thickness);background:var(--line-color);border-radius:999px;z-index:1}.timeline-items{position:relative;z-index:2;display:flex;justify-content:space-between;gap:10px;height:100%;text-align:center}.timeline-item{position:relative;flex:1;min-width:0}.timeline-date{position:absolute;top:calc(var(--line-y) - 38px);left:50%;transform:translateX(-50%);font-weight:600;color:#334155;white-space:nowrap}.timeline-item .circle{position:absolute;top:var(--line-y);left:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:#fff;border:3px solid var(--dot-color);border-radius:50%;box-shadow:0 0 0 3px #fff}.timeline-text{position:absolute;top:calc(var(--line-y) + 18px);left:50%;transform:translateX(-50%);color:#334155;font-size:15px;text-align:center;max-width:140px}.timeline-title{font-weight:600;margin-bottom:6px}.timeline-desc{font-size:13px;color:#64748b;line-height:1.4}@media (max-width:640px){.timeline-text{position:static;transform:none;margin-top:6px;max-width:100%}}@media (max-width:640px){.timeline{height:auto;padding:10px 0 0}.timeline-line{left:50%;right:auto;top:0;bottom:0;width:3px;height:auto}.timeline-items{flex-direction:column;align-items:center;gap:28px}.timeline-item{min-height:88px}.timeline-date,.timeline-text{position:static;transform:none}.timeline-item .circle{position:relative;left:0;transform:none;margin:8px 0}}