/* Bold brand-color surfaces on white; no value-section content changes. */
#value { padding: 96px 0 104px; background: #fff; }
#value .section-head > p:last-child { color: #607087; }
#value .value-map {
  isolation: isolate;
  overflow: visible;
  max-width: 1240px;
  margin: 46px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#value .value-map::before { content: none; }
#value .value-outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}
#value .value-outcome-grid::before { content: none; }
#value .value-outcome-grid::after { content: none; }
#value .value-outcome,
#value .value-outcome:hover {
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  padding: 38px 36px 34px;
  border: 0;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(140deg, #205ee2 0%, #1b57ce 57%, #1746b2 100%);
  box-shadow: 0 18px 34px rgba(21, 67, 157, .12);
  transform: none;
  transition: none;
}
#value .value-outcome-chosen,
#value .value-outcome-chosen:hover {
  background: linear-gradient(140deg, #007765 0%, #087463 55%, #086252 100%);
  box-shadow: 0 18px 34px rgba(7, 97, 77, .12);
}
#value .value-outcome::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  width: auto;
  background: linear-gradient(90deg, rgba(158, 208, 255, .5), transparent);
}
#value .value-outcome-chosen::before { background: linear-gradient(90deg, rgba(161, 249, 213, .5), transparent); }
#value .value-outcome::after,
#value .value-outcome-chosen::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -180px;
  right: -135px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 40px rgba(255, 255, 255, .035), 0 0 0 80px rgba(255, 255, 255, .025);
  pointer-events: none;
}
#value .value-outcome header { position: relative; align-items: flex-start; gap: 12px; }
#value .value-outcome header > div { position: relative; z-index: 1; }
#value .value-outcome header span {
  color: #edf4ff;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .14em;
}
#value .value-outcome-chosen header span { color: #e5fff4; }
#value .value-outcome header h3 {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(44px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.045em;
}
#value .value-outcome header em,
#value .value-outcome-chosen header em {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, .13);
  background: none;
  font-size: 94px;
  line-height: 1;
  letter-spacing: -.065em;
  font-style: normal;
  font-weight: 800;
  opacity: 1;
}
#value .value-outcome-lead {
  max-width: 500px;
  min-height: 58px;
  margin: 22px 0 28px;
  color: #f0f6ff;
  font-size: 15px;
  line-height: 1.85;
}
#value .value-outcome-chosen .value-outcome-lead { color: #edfff6; }
#value .value-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#value .value-feature,
#value .value-feature:hover {
  gap: 10px;
  min-height: 104px;
  padding: 17px 15px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transform: none;
  transition: none;
}
#value .value-outcome-chosen .value-feature,
#value .value-outcome-chosen .value-feature:hover {
  border-color: rgba(223, 255, 243, .18);
  background: rgba(225, 255, 242, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
#value .value-feature > span,
#value .value-outcome-chosen .value-feature > span {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: rgba(0, 20, 60, .1);
  font-size: 10px;
  line-height: 25px;
  font-weight: 700;
}
#value .value-feature b { color: #fff; font-size: 17px; line-height: 1.5; }
#value .value-feature small { margin-top: 7px; color: #fff; font-size: 13px; line-height: 1.65; }
#value .value-outcome-chosen .value-feature small { color: #fff; }
#value .value-power-lines { display: block; height: 78px; margin: 0; opacity: 1; pointer-events: none; }
#value .value-power-lines svg { display: block; }
#value .value-power-lines::before,
#value .value-power-lines::after { content: none; }
#value .value-power-track { stroke: url(#valuePowerGradient); stroke-width: 2; opacity: .7; }
#value .value-power-energy {
  display: block;
  stroke: #26d4df;
  stroke-width: 4;
  stroke-dasharray: 2 21;
  filter: drop-shadow(0 0 4px rgba(0, 200, 219, .5));
  animation: valuePowerRise 1.8s linear infinite;
}
#value .value-power-energy.energy-right { animation-delay: -.9s; }
#value .value-power-lines marker path { fill: #22cbd9; }
#value .value-power-lines circle { fill: #10b981; stroke: #e9fbf5; stroke-width: 4; animation: valuePowerPulse 1.8s ease-in-out infinite; }
#value .value-base {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 30px 32px;
  border: 1px solid rgba(70, 120, 149, .14);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(112deg, #102a4b 0%, #123b53 53%, #0d4945 100%);
  box-shadow: 0 14px 30px rgba(16, 45, 68, .1);
}
#value .value-base::before { content: none; }
#value .value-base-head { display: block; margin: 0; }
#value .value-base-head span { color: #a9d6ed; font-size: 10px; letter-spacing: .16em; }
#value .value-base-head h3 { margin: 8px 0 0; color: #fff; font-size: 25px; }
#value .value-base-head p { max-width: none; margin: 12px 0 0; color: #c0d4df; font-size: 12px; line-height: 1.8; text-align: left; }
#value .value-base-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 17px; }
#value .value-base-flow li,
#value .value-base-flow li:hover {
  display: block;
  min-height: 100px;
  padding: 15px 11px;
  border: 1px solid rgba(188, 221, 235, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .055);
  box-shadow: none;
  transform: none;
  transition: none;
}
#value .value-base-flow i { color: #b2d8ec; font-size: 10px; font-style: normal; }
#value .value-base-flow b { margin: 7px 0 0; color: #fff; font-size: 16px; line-height: 1.5; white-space: normal; }
#value .value-base-flow span { margin-top: 5px; color: #c1d8e2; font-size: 12px; }
#value .value-base-flow li:not(:last-child)::after {
  display: block;
  top: 50%;
  right: -9px;
  color: #8fc4d0;
  font-size: 15px;
  font-weight: 400;
}
#value .value-base-flow .is-feedback { grid-column: auto; border-color: rgba(117, 230, 190, .35); background: rgba(39, 172, 132, .14); }
#value .value-base-flow .is-feedback i { color: #a6f0d1; }
#value .value-base-flow .is-feedback b { color: #f1fff9; }
#value .value-base-flow .is-feedback span { color: #bfebdc; }

@media (max-width: 1100px) {
  #value .value-outcome { padding: 32px 27px 28px; }
  #value .value-feature { gap: 8px; padding: 15px 12px; }
  #value .value-feature b { font-size: 16px; }
  #value .value-base { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  #value .value-base-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  #value .value-base-head p { max-width: 460px; margin: 0; }
}
@media (max-width: 900px) {
  #value { padding: 76px 0; }
  #value .value-map { max-width: 680px; margin-top: 34px; }
  #value .value-outcome-grid { grid-template-columns: 1fr; gap: 18px; }
  #value .value-outcome-grid::after { content: none; }
  #value .value-outcome { padding: 32px; }
  #value .value-outcome header h3 { font-size: 52px; }
  #value .value-outcome-lead { min-height: 0; max-width: none; margin: 20px 0 26px; }
  #value .value-feature { min-height: 98px; }
  #value .value-power-lines { height: 52px; }
  #value .value-power-lines svg { display: none; }
  #value .value-power-lines::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(to top, #10b981 0 9px, #83eee6 9px 14px, #10b981 14px 23px);
    background-size: 100% 23px;
    box-shadow: 0 0 6px rgba(0, 200, 219, .25);
    animation: valuePowerMobileUp 1.2s linear infinite;
  }
  #value .value-power-lines::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    border-left: 3px solid #22cbd9;
    border-top: 3px solid #22cbd9;
  }
  #value .value-base { margin-top: 0; padding: 28px 32px; }
  #value .value-base-head { display: block; }
  #value .value-base-head p { max-width: none; margin-top: 12px; }
  #value .value-base-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  #value .value-base-flow li:not(:last-child)::after { content: none; }
}

@keyframes valuePowerMobileUp { from { background-position: 0 0; } to { background-position: 0 -23px; } }
@media (prefers-reduced-motion: reduce) {
  #value .value-power-energy,
  #value .value-power-lines circle,
  #value .value-power-lines::before { animation: none; }
}
@media (max-width: 560px) {
  #value { padding: 64px 0; }
  #value .value-outcome { padding: 28px 22px 24px; border-radius: 22px; }
  #value .value-outcome header span { font-size: 9px; letter-spacing: .1em; }
  #value .value-outcome header h3 { margin-top: 14px; font-size: 46px; }
  #value .value-outcome header em { top: 3px; font-size: 74px; }
  #value .value-outcome-lead { margin: 18px 0 22px; font-size: 14px; }
  #value .value-feature-grid { grid-template-columns: 1fr; gap: 9px; }
  #value .value-feature { min-height: 0; gap: 12px; padding: 14px; }
  #value .value-feature b { font-size: 16px; }
  #value .value-feature small { margin-top: 4px; font-size: 12px; }
  #value .value-base { gap: 20px; padding: 25px 22px 22px; border-radius: 22px; }
  #value .value-base-head h3 { font-size: 24px; }
  #value .value-base-flow { grid-template-columns: 1fr; gap: 0; }
  #value .value-base-flow li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; min-height: 0; padding: 15px 0; border: 0; border-top: 1px solid rgba(188, 221, 235, .17); border-radius: 0; background: transparent; }
  #value .value-base-flow b, #value .value-base-flow span { margin: 0; }
  #value .value-base-flow .is-feedback { border-color: rgba(117, 230, 190, .3); background: transparent; }
}