/* TTC Timeline — fresh build */
.ttc-timeline{
  --rail-w: 3px;
  --accent: #7ec1ff;
  --rail-color: rgba(255,255,255,0);
  --dot-size: 14px;
  --dot-color: #fff;
  --card-bg: rgba(14,21,64,.35);
  --card-border: rgba(255,255,255,.12);
  --card-shadow: 0 8px 28px rgba(0,0,0,.25);
  --rail-shift: 0px;
  position: relative;
  padding: 64px 0 120px;
  isolation: isolate;
}
.ttc-heading{ font-size: clamp(24px, 3.6vw, 48px); font-weight: 700; color:#9cc8ff; margin-bottom: 40px;}
.ttc-heading__emph{ color:#4ea1ff; }

.ttc-rail{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.ttc-rail::before{
  content:""; position:absolute; left: calc(50% + var(--rail-shift)); top:0; width: var(--rail-w); height:100%;
  background: var(--rail-color); transform: translateX(-50%); border-radius:2px;
}
.ttc-dot{
  position:absolute; left: calc(50% + var(--rail-shift));
  width: var(--dot-size); height: var(--dot-size);
  background: var(--dot-color); border-radius:50%;
  transform: translate(-50%, var(--dot-y, 0px));
  box-shadow: 0 0 12px rgba(126,193,255,.75), 0 6px 24px rgba(0,0,0,.35);
  z-index:3;
}
/* Progress fill along the rail from the top to the dot */
.ttc-glow{
  position:absolute;
  left: calc(50% + var(--rail-shift));
  top: 0;                                   /* start at the top of the rail */
  width: 8px;
  height: calc(var(--dot-y, 0px));          /* fill down to the dot */
  transform: translateX(-50%);              /* center on the rail */
  background: linear-gradient(
    to bottom,
    rgba(126,193,255,.90) 0%,
    rgba(126,193,255,.65) 60%,
    rgba(126,193,255,.35) 85%,
    rgba(126,193,255,0) 100%
  );
  border-radius: 8px;
  filter: drop-shadow(0 10px 18px rgba(78,161,255,.45));
  z-index: 2;
}
.ttc-rail::after{
  content:""; position:absolute; left: calc(50% + var(--rail-shift));
  width: 120px; height: 120px; transform: translate(-50%, var(--dot-y, 0px));
  background: radial-gradient(circle, rgba(83,160,255,.28), rgba(83,160,255,0) 70%);
  pointer-events:none; z-index:1;
}

/* Float label on the LEFT side of the rail */
.ttc-label-float{
  position:absolute;
  top:0;
  left: calc(50% + var(--rail-shift) - 28px); /* anchor point 28px left of the rail */
  transform: translate(-100%, var(--dot-y, 0px)); /* shift element so its RIGHT edge hits the anchor */
  pointer-events:none;
  z-index:3;
  text-align:right; /* keep text away from the rail */
}

/* Tighter spacing on phones */
@media (max-width: 767px){
  .ttc-label-float{ left: calc(50% + var(--rail-shift) - 16px); }
}

.ttc-label__word{ color:#fff; font-weight:800; font-size: clamp(14px, 1.3vw, 18px); text-shadow: 0 1px 2px rgba(0,0,0,.4);}

.ttc-stage-ghost{ position:absolute; left: 5vw; top: 0; transform: translateY(calc(var(--dot-y, 0px) - 44px)); pointer-events:none; z-index:0; }
.ttc-stage-ghost > span{ font-weight: 800; font-size: clamp(40px, 14vw, 180px); line-height: .8; letter-spacing: .01em; color: rgba(126,193,255,.18); text-shadow: 0 6px 30px rgba(78,161,255,.22); }

.ttc-items{ display:grid; gap:72px; position:relative; z-index:2; }
.ttc-item{
  max-width: 560px; margin-left: calc(50% + 60px + var(--rail-shift));
  color:#e9f2ff; background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 16px; box-shadow: var(--card-shadow); padding: 28px;
  backdrop-filter: blur(4px);
}
.ttc-item__badge{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color:#7ec1ff; opacity:.9; margin-bottom:10px; }
.ttc-item__title{ font-size: clamp(18px, 2.2vw, 28px); margin:0 0 10px; color:#ffffff; }
.ttc-item__body{ opacity:.95; line-height:1.7; color:#dbe7ff; }

@media (max-width: 980px){
  .ttc-item{ margin-left: min(7vw, 40px + 50%); }
}
@media (max-width: 767px){
  .ttc-label-float{ left: calc(50% + 16px + var(--rail-shift)); }
  .ttc-item{ margin-left: 20px; margin-right: 20px; }
  .ttc-stage-ghost{ left: 4vw; }
}