:root{
  --bg:#0b0a14; --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.11);
  --txt:#f2f0ff; --muted:#9a95b8; --acc:#ffd166; --acc2:#ff6b6b; --acc3:#7c5cff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);background:var(--bg);
  padding:60px 16px 80px;overflow-x:hidden}
.bg-glow{position:fixed;inset:0;background:
  radial-gradient(700px 400px at 88% 6%, rgba(255,209,102,.2), transparent 65%),
  radial-gradient(700px 400px at 6% 94%, rgba(255,107,107,.2), transparent 65%);
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.15) translate(-24px,18px)}}

.wrap{position:relative;width:min(920px,100%);margin:0 auto}
.head{text-align:center;margin-bottom:44px}
.pill{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);
  border:1px solid var(--line);padding:7px 15px;border-radius:99px;background:var(--card)}
h1{font-size:clamp(32px,6.5vw,52px);margin:16px 0 8px;letter-spacing:-.02em}
h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{color:var(--muted);font-size:15px}

.timeline{position:relative;padding:10px 0}
.line{position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);border-radius:99px;
  background:rgba(255,255,255,.08);overflow:hidden}
.line i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:99px;
  background:linear-gradient(to bottom,var(--acc),var(--acc2),var(--acc3));
  box-shadow:0 0 18px rgba(255,209,102,.6);transition:height .15s linear}

.item{position:relative;width:50%;padding:22px 46px 22px 0;display:flex;justify-content:flex-end;
  opacity:0;transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.item.left{left:0;transform:translateX(-46px);text-align:right}
.item.right{left:50%;transform:translateX(46px);flex-direction:row-reverse;padding:22px 0 22px 46px;text-align:left}
.item.in{opacity:1;transform:translateX(0)}

.node{position:absolute;top:34px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:14px;color:#150e05;z-index:2;
  background:linear-gradient(135deg,var(--acc),var(--acc2));border:4px solid var(--bg);
  box-shadow:0 10px 26px rgba(255,209,102,.4);transform:scale(0);transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.item.in .node{transform:scale(1)}
.item.left .node{right:-22px}
.item.right .node{left:-22px}
.node::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,209,102,.5);
  opacity:0;animation:ping 2.4s infinite}
.item.in .node::after{opacity:1}
@keyframes ping{0%{transform:scale(.7);opacity:.8}70%,100%{transform:scale(1.5);opacity:0}}

.glass{background:var(--card);border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(16px);
  box-shadow:0 26px 60px rgba(0,0,0,.5)}
.card{padding:22px;max-width:390px;transition:transform .4s, border-color .4s, box-shadow .4s}
.card:hover{transform:translateY(-6px);border-color:var(--acc);
  box-shadow:0 30px 66px rgba(255,107,107,.25)}
.date{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.card h3{font-size:20px;margin:9px 0 8px}
.card p{color:var(--muted);font-size:14.3px;line-height:1.65}
.tag{display:inline-block;margin-top:14px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 13px;border-radius:99px;background:rgba(124,92,255,.2);border:1px solid rgba(124,92,255,.45);
  color:#cdbcff}
.tag.ok{background:rgba(46,242,160,.16);border-color:rgba(46,242,160,.5);color:#2ef2a0}
.card.done{border-color:rgba(46,242,160,.4)}

.progress{display:flex;align-items:center;gap:16px;padding:18px 22px;margin-top:34px}
.progress span{font-weight:700;font-variant-numeric:tabular-nums;color:var(--acc);min-width:56px}
.bar{flex:1;height:9px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .2s linear;
  background:linear-gradient(90deg,var(--acc),var(--acc2),var(--acc3))}

@media (max-width:760px){
  .line{left:20px}
  .item,.item.right{width:100%;left:0;padding:16px 0 16px 56px;flex-direction:row;text-align:left;transform:translateY(30px)}
  .item.left{transform:translateY(30px)}
  .item.in{transform:none}
  .item.left .node,.item.right .node{left:-2px;right:auto}
  .card{max-width:none}
  .progress{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .item{opacity:1!important;transform:none!important}.node{transform:scale(1)!important}}