.aa-roadmap {
  --aa-roadmap-dot: 36px;
  --aa-roadmap-gap: clamp(14px, 1.6vw, 22px);
  --aa-roadmap-line: var(--aa-primary-soft);
}
.aa-roadmap__head { margin-bottom: var(--aa-gap-head); }

.aa-roadmap__path {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--aa-roadmap-gap);
  counter-reset: aa-roadmap-step;
}
.aa-roadmap__stage {
  --aa-roadmap-bg: #EEF6FF;
  --aa-roadmap-ink: var(--aa-ink);
  --aa-roadmap-sub: var(--aa-body);
  --aa-roadmap-accent: var(--aa-primary);
  --aa-roadmap-tile: var(--aa-white);
  display: flex; flex-direction: column; min-width: 0;
  counter-increment: aa-roadmap-step;
}
.aa-roadmap__stage:nth-child(2) { --aa-roadmap-bg: #E7EBFF; }
.aa-roadmap__stage:nth-child(3) { --aa-roadmap-bg: #EADFFF; }
.aa-roadmap__stage:nth-child(4) {
  --aa-roadmap-bg: var(--aa-primary);
  --aa-roadmap-ink: var(--aa-white);
  --aa-roadmap-sub: rgba(255, 255, 255, .95);     
  --aa-roadmap-accent: rgba(255, 255, 255, .95);
  --aa-roadmap-tile: rgba(255, 255, 255, .16);
}


.aa-roadmap__node { position: relative; display: flex; align-items: center; min-height: var(--aa-roadmap-dot); }
.aa-roadmap__node::before {
  content: ""; position: absolute; z-index: 0; top: calc(50% - 1px); height: 2px; border-radius: 2px;
  left: calc(var(--aa-roadmap-dot) / 2);
  right: calc((var(--aa-roadmap-gap) + var(--aa-roadmap-dot) / 2) * -1);
  background: var(--aa-roadmap-line);
  transform-origin: left center;
}
.aa-roadmap__stage:last-child .aa-roadmap__node::before {
  right: 2px;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 13px);
          mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 13px);
}
.aa-roadmap__stage:last-child .aa-roadmap__node::after {
  content: ""; position: absolute; right: 1px; top: calc(50% - 5px); width: 10px; height: 10px;
  border-top: 2px solid var(--aa-roadmap-line); border-right: 2px solid var(--aa-roadmap-line);
  transform: rotate(45deg); border-radius: 1px;
}
.aa-roadmap__dot {
  position: relative; z-index: 1; display: grid; place-items: center; flex: none;
  width: var(--aa-roadmap-dot); height: var(--aa-roadmap-dot); border-radius: 50%;
  background: var(--aa-primary); box-shadow: 0 0 0 6px var(--aa-white);
  color: var(--aa-white); font-family: var(--aa-font-en); font-size: 13px; font-weight: 800; letter-spacing: 0; line-height: 1;
}
.aa-roadmap__dot::before { content: counter(aa-roadmap-step, decimal-leading-zero); }


.aa-roadmap__card {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  margin-top: 18px; padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 26px);
  border-radius: var(--aa-r-md); background: var(--aa-roadmap-bg);
}
.aa-roadmap__stage:last-child .aa-roadmap__card { box-shadow: 0 16px 34px var(--aa-key-glow); }
.aa-roadmap__icon {
  display: grid; place-items: center; width: clamp(56px, 4.6vw, 66px); height: clamp(56px, 4.6vw, 66px);
  border-radius: 18px; background: var(--aa-roadmap-tile); font-size: clamp(32px, 2.7vw, 38px);
}
.aa-roadmap__tag { margin-top: clamp(22px, 2.2vw, 30px); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--aa-roadmap-accent); }
.aa-roadmap__title { margin-top: 4px; font-size: clamp(18px, 1.45vw, 21px); font-weight: 800; line-height: 1.4; letter-spacing: -0.03em; color: var(--aa-roadmap-ink); text-wrap: balance; }
.aa-roadmap__title > span { display: block; }
.aa-roadmap__chips { display: grid; gap: 4px; margin-top: auto; padding-top: 18px; }
.aa-roadmap__chips > li { display: flex; align-items: baseline; gap: 7px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--aa-roadmap-sub); }
.aa-roadmap__chips > li::before { content: "✓" / ""; flex: none; font-weight: 800; color: var(--aa-roadmap-accent); }


@media (max-width: 860px) {
  .aa-roadmap { --aa-roadmap-gap: 12px; }
  .aa-roadmap__path {
    display: flex; gap: var(--aa-roadmap-gap);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    padding: 0 var(--aa-gutter) 18px; margin-inline: calc(var(--aa-gutter) * -1); scroll-padding-inline: var(--aa-gutter);
  }
  .aa-roadmap__path::-webkit-scrollbar { display: none; }
  .aa-roadmap__stage { flex: 0 0 min(240px, 68vw); scroll-snap-align: start; }
  .aa-roadmap__card { margin-top: 14px; border-radius: 20px; }
  .aa-roadmap__title { font-size: 18px; }
}


@media (prefers-reduced-motion: no-preference) {
  .aa-roadmap__node::before { transition: transform .9s var(--aa-ease); }
  .aa-roadmap__dot { transition: opacity .6s var(--aa-ease), transform .6s var(--aa-ease); }
  .aa-roadmap__card { transition: opacity .7s var(--aa-ease) .12s, transform .7s var(--aa-ease) .12s; }

  [data-aa-in="false"] .aa-roadmap__node::before { transform: scaleX(0); }
  [data-aa-in="false"] .aa-roadmap__dot { opacity: 0; transform: scale(.7); }
  [data-aa-in="false"] .aa-roadmap__card { opacity: 0; transform: translateY(18px); }

  .aa-roadmap__stage:nth-child(2) .aa-roadmap__node::before, .aa-roadmap__stage:nth-child(2) .aa-roadmap__dot { transition-delay: .25s; }
  .aa-roadmap__stage:nth-child(2) .aa-roadmap__card { transition-delay: .37s; }
  .aa-roadmap__stage:nth-child(3) .aa-roadmap__node::before, .aa-roadmap__stage:nth-child(3) .aa-roadmap__dot { transition-delay: .5s; }
  .aa-roadmap__stage:nth-child(3) .aa-roadmap__card { transition-delay: .62s; }
  .aa-roadmap__stage:nth-child(4) .aa-roadmap__node::before, .aa-roadmap__stage:nth-child(4) .aa-roadmap__dot { transition-delay: .75s; }
  .aa-roadmap__stage:nth-child(4) .aa-roadmap__card { transition-delay: .87s; }
}