.roi-journey {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 68px;
  color: #edf4e9;
  background: radial-gradient(ellipse at 100% 5%, rgba(76, 155, 144, .32), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(155, 239, 69, .07), transparent 55%), #082e28;
}

.roi-journey.page-section {
  padding-block: clamp(32px, 3vw, 44px) !important;
}

.roi-journey__header {
  margin-bottom: 38px;
}

.roi-journey h2 {
  margin: 0;
  color: #f0f4e9;
  font: 500 clamp(36px, 4.4vw, 60px)/1.08 "Sora", sans-serif;
  letter-spacing: -.045em;
}

.roi-journey h2 span { color: #c8e0d3; }

.roi-journey__figure { position: relative; margin: 0; padding-left: 46px; }
.roi-journey__y-label {
  position: absolute;
  top: 0;
  left: 0;
  height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #a9c6b8;
  font: 700 10px/1.5 "JetBrains Mono", monospace;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
}

.roi-journey__plot {
  position: relative;
  height: 430px;
  border-left: 1px solid rgba(181, 216, 195, .17);
  border-bottom: 1px solid rgba(181, 216, 195, .26);
  background-image: linear-gradient(to right, rgba(181, 216, 195, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(181, 216, 195, .09) 1px, transparent 1px);
  background-size: calc(100% / 11) 100%, 100% 43px;
}
.roi-journey__curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.roi-journey__line { fill: none; stroke: #b7f582; stroke-width: 3; stroke-linecap: round; }
.roi-journey__glow { fill: none; stroke: #b7f582; stroke-width: 12; opacity: .42; }
.roi-journey__milestone circle:first-child { fill: #9bef45; opacity: .16; }
.roi-journey__milestone circle:last-child { fill: #c6ff8f; stroke: #e5ffc6; stroke-width: 1.5; }
.roi-journey__mobile-path { display: none; }

.roi-journey__stages { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.roi-journey__stage { position: absolute; width: 22%; }
.roi-journey__stage:nth-child(1) { left: 0; bottom: 80px; }
.roi-journey__stage:nth-child(2) { left: 27.27%; bottom: 105px; }
.roi-journey__stage:nth-child(3) { left: 54.54%; bottom: 207px; }
.roi-journey__stage:nth-child(4) { right: 0; top: 242px; }
.roi-journey__stage::after {
  content: "";
  position: absolute;
  left: 13.22%;
  top: 100%;
  height: 51px;
  border-left: 1px dashed rgba(183, 245, 130, .35);
}
.roi-journey__stage:nth-child(3)::after { height: 91px; }
.roi-journey__stage:nth-child(4)::after { left: 30.58%; top: -52px; height: 52px; }
.roi-journey__step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #99bdab;
  font: 700 10px/1 "JetBrains Mono", monospace;
  letter-spacing: .09em;
}
.roi-journey__step span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(183, 245, 130, .35); border-radius: 50%; color: #c3e6a7; background: #173e32; }
.roi-journey__card {
  position: relative;
  padding: 20px;
  border: 1px solid rgba(183, 217, 198, .25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(33, 76, 61, .98), rgba(11, 47, 39, .98));
  box-shadow: 0 12px 28px rgba(0, 15, 10, .18);
}
.roi-journey__period { margin: 0 0 8px; color: #b9e396; font: 700 11px/1.5 "JetBrains Mono", monospace; letter-spacing: .025em; }
.roi-journey__card h3 { margin: 0; color: #f1f5ea; font: 600 clamp(18px, 1.5vw, 21px)/1.2 "Sora", sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.roi-journey__card ul { display: grid; gap: 6px; margin: 15px 0 0; padding: 0; list-style: none; }
.roi-journey__card li { position: relative; padding-left: 11px; color: #c2d4ca; font-size: 14px; line-height: 1.5; }
.roi-journey__card li::before { position: absolute; left: 0; content: "·"; color: #a7db79; }
.roi-journey__card > p:last-child:not(.roi-journey__period) { margin: 14px 0 0; color: #c2d4ca; font-size: 14px; line-height: 1.5; }
.roi-journey__stage:last-child .roi-journey__card { border-color: rgba(183, 245, 130, .48); background: linear-gradient(135deg, #284c37, #143c2d); }
.roi-journey__stage:last-child .roi-journey__step { display: none; }
.roi-journey__stage:last-child .roi-journey__period { color: #d0f5a4; }

.roi-journey__months { display: flex; justify-content: space-between; padding-top: 13px; color: #a7c1b2; font: 700 10px/1.5 "JetBrains Mono", monospace; }
.roi-journey__months span { width: 20px; text-align: center; transform: translateX(-50%); }
.roi-journey__months span:last-child { transform: translateX(50%); }
.roi-journey__caption { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 19px; color: #9fbcad; font-size: 12px; }
.roi-journey__caption span:last-child { font: 700 10px/1.5 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
  .roi-journey.is-visible .roi-journey__line { animation: roi-curve-draw 1.8s cubic-bezier(.22,.61,.36,1) both; }
  .roi-journey.is-visible .roi-journey__glow { animation: roi-glow-in 1.8s ease both; }
  .roi-journey.is-visible .roi-journey__milestone { animation: roi-dot-in .5s ease both; }
  .roi-journey.is-visible .roi-journey__milestone:nth-of-type(1) { animation-delay: .1s; }
  .roi-journey.is-visible .roi-journey__milestone:nth-of-type(2) { animation-delay: .4s; }
  .roi-journey.is-visible .roi-journey__milestone:nth-of-type(3) { animation-delay: .8s; }
  .roi-journey.is-visible .roi-journey__milestone:nth-of-type(4) { animation-delay: 1.2s; }
}
@keyframes roi-curve-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes roi-glow-in { from { opacity: 0; } to { opacity: .42; } }
@keyframes roi-dot-in { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 980px) and (max-width: 1199px) {
  .roi-journey__card { padding: 16px; }
  .roi-journey__card h3 { font-size: 19px; }
  .roi-journey__stage:nth-child(3) { width: 25%; bottom: 223px; }
  .roi-journey__stage:nth-child(3)::after { left: 11.64%; height: 107px; }
  .roi-journey__card li, .roi-journey__card > p:last-child:not(.roi-journey__period) { font-size: 13px; }
}

@media (max-width: 979px) {
  .roi-journey__figure { max-width: 740px; margin-inline: auto; padding-left: 0; }
  .roi-journey__y-label, .roi-journey__curve, .roi-journey__months { display: none; }
  .roi-journey__plot { height: auto; border: 0; background: none; }
  .roi-journey__mobile-path { display: block; position: absolute; top: 26px; left: 0; width: 32px; height: calc(100% - 52px); overflow: visible; }
  .roi-journey__stages { position: relative; display: grid; gap: 24px; padding-left: 54px; }
  .roi-journey__stage:nth-child(n) { position: relative; inset: auto; width: auto; }
  .roi-journey__stage::after { display: none; }
  .roi-journey__step, .roi-journey__stage:last-child .roi-journey__step { display: block; position: absolute; left: -51px; top: 23px; margin: 0; }
  .roi-journey__step > b { display: none; }
  .roi-journey__step span { width: 26px; height: 26px; background: #173e32; }
  .roi-journey__card { padding: 24px; }
  .roi-journey__card h3 { font-size: 24px; }
  .roi-journey__caption { padding-left: 54px; }
  .roi-journey__caption span:last-child { display: none; }
}

@media (max-width: 640px) {
  .roi-journey__header { margin-bottom: 32px; }
  .roi-journey h2 { font-size: clamp(32px, 8vw, 42px); line-height: 1.12; }
  .roi-journey__stages { padding-left: 42px; gap: 20px; }
  .roi-journey__step, .roi-journey__stage:last-child .roi-journey__step { left: -39px; }
  .roi-journey__card { padding: 20px; }
  .roi-journey__card h3 { font-size: 23px; }
  .roi-journey__caption { padding-left: 42px; }
}