.process-roadmap { position: relative; padding: 52px 0 44px; color: #07132e; background: linear-gradient(120deg,#fff,#fdfdff 70%,#fff); isolation: isolate; overflow: clip; }
.roadmap-container { position: relative; width: min(calc(100% - 100px),1120px); padding-left: 64px; margin-inline: auto; }
.roadmap-intro { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 66px; align-items: end; margin-bottom: 34px; }
.roadmap-eyebrow { color: #9440ed; font: 700 11px var(--heading); letter-spacing: .19em; text-transform: uppercase; }
.roadmap-intro h2 { margin: 18px 0 0; font-size: clamp(38px,4.1vw,57px); line-height: 1.04; letter-spacing: -.06em; font-weight: 800; }
.roadmap-intro h2 span { color: transparent; background: linear-gradient(105deg,#e936c7,#a148ed 54%,#326cff); background-clip: text; -webkit-background-clip: text; }
.roadmap-intro > p { margin: 0 0 18px; padding-left: 30px; border-left: 1px solid #ddbcff; color: #61739b; font-size: 16px; line-height: 1.55; }
.roadmap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.roadmap-stage { --stage-color: #c90cd1; --stage-edge: #f7d5ff; --stage-tint: #fff0fe; position: relative; scroll-margin-top: 110px; }
.roadmap-stage:nth-child(even) { --stage-color: #375bff; --stage-edge: #dbe2ff; --stage-tint: #eff2ff; }
.roadmap-stage:not(:last-child)::before { content: ''; position: absolute; z-index: -1; left: -44px; width: 1px; top: 50px; bottom: -73px; background: linear-gradient(#eebdf8,#bfceff); }
.roadmap-number { position: absolute; left: -66px; top: 27px; width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid var(--stage-edge); border-radius: 50%; background: radial-gradient(at 35% 20%,#fff,var(--stage-tint)); box-shadow: inset 0 1px 4px var(--stage-edge),0 6px 22px #ab51d811; color: #b809dd; font: 800 16px var(--heading); transition: box-shadow .3s,border-color .3s; }
.roadmap-card { position: relative; min-height: 139px; display: grid; grid-template-columns: minmax(0,1.53fr) minmax(0,1fr) minmax(0,.98fr); align-items: center; gap: 26px; padding: 23px 27px; border: 1px solid var(--stage-edge); border-radius: 16px; background: linear-gradient(130deg,#fff,#fcfcff); box-shadow: 0 10px 30px #d85ed008,inset 0 1px #fff; transition: transform .3s var(--ease),box-shadow .3s,border-color .3s; }
.roadmap-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(340px circle at var(--roadmap-light-x,50%) var(--roadmap-light-y,0%),var(--stage-tint),transparent 70%); opacity: 0; transition: opacity .3s; }
.roadmap-card > * { position: relative; z-index: 1; min-width: 0; }
.roadmap-summary { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 30px; align-items: center; }
.roadmap-icon { width: 72px; height: 72px; display: grid; place-items: center; color: var(--stage-color); border: 1px solid var(--stage-edge); border-radius: 50%; background: radial-gradient(circle at 65% 75%,#fff,var(--stage-tint) 65%); box-shadow: inset 0 2px 7px var(--stage-edge),inset 0 -2px 5px #fff; transition: transform .35s var(--ease); }
.roadmap-icon svg { width: 38px; height: 38px; }
.roadmap-stage-label { display: block; color: #7441e8; font: 700 9px/1.45 var(--heading); letter-spacing: .065em; text-transform: uppercase; }
.roadmap-copy h3 { font-size: 26px; font-weight: 800; letter-spacing: -.045em; margin: 7px 0 6px; }
.roadmap-copy p { color: #5f739e; font-size: 13px; line-height: 1.45; margin: 0; }
.roadmap-question { padding-left: 26px; border-left: 1px solid #dcd6ff; }
.roadmap-question > div { display: flex; align-items: start; gap: 12px; border-radius: 13px; padding: 17px 13px; background: linear-gradient(130deg,#f8f4ff,#f1f3ff); }
.roadmap-question svg { flex: 0 0 21px; width: 21px; height: 21px; color: #9564ff; }
.roadmap-question p { margin: 0; min-width: 0; }
.roadmap-question span { display: block; margin-bottom: 6px; font: 700 9px/1.4 var(--heading); letter-spacing: .06em; color: #8853e3; text-transform: uppercase; }
.roadmap-question strong { display: block; font-size: 12px; line-height: 1.45; font-weight: 500; color: #17284e; }
.roadmap-outcomes { padding-left: 27px; border-left: 1px solid #dcd6ff; }
.roadmap-outcomes h4 { margin: 0 0 8px; color: #657ba8; font: 700 9px/1.4 var(--heading); text-transform: uppercase; letter-spacing: .055em; }
.roadmap-outcomes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.roadmap-outcomes li { display: flex; align-items: start; gap: 10px; color: #5f739e; font-size: 12px; line-height: 1.45; }
.roadmap-outcomes svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: #ef13ce; border-radius: 50%; background: #fff0fc; }
.roadmap-decor { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.roadmap-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 75% 20%,#ffc4f9,#dac4fc 43%,#8fbcf9 78%,#d0e8ff); box-shadow: inset -10px -8px 20px #ffffff40; translate: 0 var(--roadmap-drift,0px); animation: roadmap-float 8s ease-in-out infinite alternate; }
.roadmap-orb-left { width: 235px; height: 235px; left: -118px; top: -66px; }
.roadmap-orb-right { width: 245px; height: 245px; right: -136px; bottom: 170px; animation-delay: -4s; }
.roadmap-orb-small { width: 72px; height: 72px; right: 38px; bottom: 105px; opacity: .5; background: radial-gradient(circle,#c2b6fa,#eeebff 55%,#fff); animation-delay: -2s; }
.roadmap-note { position: absolute; color: #a275ff; text-align: center; font: italic 24px/1.08 'Segoe Print','Comic Sans MS',cursive; rotate: -20deg; }
.roadmap-note::after { content: ''; display: block; height: 1px; background: currentColor; margin-top: 7px; }
.roadmap-note-left { top: 185px; left: 3.4%; }.roadmap-note-right { right: 1.8%; top: 45%; }
.roadmap-motion .roadmap-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease),transform .7s var(--ease); }
.roadmap-motion .roadmap-reveal.is-visible { opacity: 1; transform: none; }
@keyframes roadmap-float { to { transform: translateY(15px) rotate(8deg); } }
@media (hover:hover) and (pointer:fine) {
  .roadmap-card:hover { transform: perspective(1400px) translateY(-4px) rotateX(var(--roadmap-rx,0deg)) rotateY(var(--roadmap-ry,0deg)); border-color: var(--stage-color); box-shadow: 0 16px 36px #8760b918; }
  .roadmap-card:hover::after { opacity: .65; }
  .roadmap-card:hover .roadmap-icon { transform: translateY(-3px) rotate(-6deg); }
  .roadmap-stage:hover .roadmap-number { box-shadow: 0 4px 18px #a44be324; border-color: var(--stage-color); }
}
@media (max-width:1250px) {
  .roadmap-note { display: none; }
  .roadmap-container { width: calc(100% - 70px); padding-left: 54px; }
  .roadmap-intro { gap: 32px; }
  .roadmap-intro h2 { font-size: clamp(36px,4.15vw,52px); }
  .roadmap-card { padding: 22px; gap: 18px; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); }
  .roadmap-summary { grid-template-columns: 58px minmax(0,1fr); gap: 18px; }
  .roadmap-icon { width: 58px; height: 58px; }.roadmap-icon svg { width: 32px; height: 32px; }
  .roadmap-question,.roadmap-outcomes { padding-left: 18px; }
  .roadmap-number { left: -55px; width: 39px; height: 39px; }
  .roadmap-stage:not(:last-child)::before { left: -36px; }
}
@media (max-width:1000px) {
  .process-roadmap { padding: 65px 0; }
  .roadmap-intro { grid-template-columns: 1fr; gap: 24px; }
  .roadmap-intro h2 { font-size: clamp(38px,5.5vw,52px); }
  .roadmap-intro > p { max-width: 630px; margin: 0; padding-left: 20px; }
  .roadmap-card { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 22px; }
  .roadmap-summary { grid-column: 1/-1; grid-template-columns: 64px minmax(0,1fr); }
  .roadmap-icon { width: 64px; height: 64px; }
  .roadmap-question { padding-left: 0; border: 0; }
  .roadmap-copy p { font-size: 14px; }
  .roadmap-outcomes li { font-size: 13px; }
}
@media (max-width:600px) {
  .process-roadmap { padding: 50px 0; }
  .roadmap-container { width: calc(100% - 30px); padding-left: 34px; }
  .roadmap-intro { margin-left: -34px; margin-bottom: 28px; }
  .roadmap-title-break { display: none; }
  .roadmap-intro h2 { font-size: clamp(34px,8.5vw,47px); line-height: 1.09; }
  .roadmap-intro > p { font-size: 15px; }
  .roadmap-eyebrow { font-size: 10px; }
  .roadmap-list { gap: 18px; }
  .roadmap-card { grid-template-columns: minmax(0,1fr); gap: 19px; padding: 21px 18px; }
  .roadmap-number { left: -41px; top: 25px; width: 32px; height: 32px; font-size: 13px; }
  .roadmap-stage:not(:last-child)::before { left: -25px; top: 45px; bottom: -64px; }
  .roadmap-summary { grid-template-columns: 45px minmax(0,1fr); gap: 12px; align-items: start; }
  .roadmap-icon { width: 45px; height: 45px; margin-top: 4px; }.roadmap-icon svg { width: 26px; height: 26px; }
  .roadmap-copy h3 { font-size: 24px; }.roadmap-copy p { font-size: 13px; line-height: 1.55; }
  .roadmap-question strong { font-size: 13px; }
  .roadmap-outcomes { padding: 17px 0 0; border-left: 0; border-top: 1px solid #e6dfff; }
  .roadmap-outcomes h4 { font-size: 10px; }.roadmap-outcomes ul { gap: 9px; }
  .roadmap-orb-left { opacity: .3; left: -175px; }.roadmap-orb-right { opacity: .35; right: -185px; }.roadmap-orb-small { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .process-roadmap *,.process-roadmap *::before,.process-roadmap *::after { animation: none !important; transition: none !important; }
  .roadmap-motion .roadmap-reveal { opacity: 1; transform: none; }
  .roadmap-card:hover,.roadmap-card:hover .roadmap-icon { transform: none; }
  .roadmap-orb { translate: none; }
}