/* The Vision route shares the public cinematic hero and section system. */
.vision-hero .cinematic-hero-copy { max-width: 780px; }
.vision-hero .cinematic-hero-copy h1 { max-width: none; font-size: clamp(48px, 5.5vw, 76px); }
.vision-hero .cinematic-hero-copy .eyebrow { max-width: 48ch; color: #b9d7df; }
.vision-hero .cinematic-scene-heading > span:first-child { color: #d5e7eb; }
.vision-hero .cinematic-scene-heading img { filter: drop-shadow(0 0 8px #59e4eb50); }
.vision-hero .cinematic-hero-shade { background: linear-gradient(90deg, #080e16f2 0%, #080e16d9 28%, #080e1670 47%, #080e1605 78%), linear-gradient(0deg, #080e16 0%, transparent 31%, transparent 81%, #080e1670); }
.vision-principles { scroll-margin-top: 24px; }
.vision-principles .section-heading { margin-bottom: 38px; }
.vision-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.vision-card { position: relative; display: flex; min-height: 235px; flex-direction: column; padding: 24px 22px; overflow: hidden; border: 1px solid #243541; background: linear-gradient(145deg, #0f1b25, #0a1119 78%); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.vision-card::after { position: absolute; right: -38px; bottom: -68px; width: 130px; aspect-ratio: 1; border: 1px solid #55dfea18; border-radius: 50%; box-shadow: 0 0 0 17px #55dfea08, 0 0 0 35px #55dfea05; content: ""; pointer-events: none; }
.vision-card:nth-child(1) { border-color: #28515c; background: radial-gradient(ellipse at 100% 100%, #39d5e51e, transparent 44%), linear-gradient(145deg, #10212b, #0a1119 78%); }
.vision-card:nth-child(1)::after { border-color: #55dfea30; box-shadow: 0 0 0 17px #55dfea0d, 0 0 0 35px #55dfea08; }
.vision-card:nth-child(2) { border-color: #343d59; background: radial-gradient(ellipse at 0% 100%, #8b9eff1d, transparent 48%), linear-gradient(135deg, transparent 61%, #aab7ff0b 61.3%, transparent 62%), linear-gradient(145deg, #141b2a, #0a1119 78%); }
.vision-card:nth-child(2)::after { right: -8px; bottom: -30px; width: 138px; height: 112px; aspect-ratio: auto; border: 0; border-radius: 0; background: radial-gradient(circle at 13% 76%, #aebaff90 0 2px, transparent 3px), radial-gradient(circle at 38% 39%, #aebaff90 0 2px, transparent 3px), radial-gradient(circle at 61% 65%, #aebaff90 0 2px, transparent 3px), radial-gradient(circle at 85% 24%, #aebaff90 0 2px, transparent 3px), radial-gradient(circle at 91% 83%, #aebaff90 0 2px, transparent 3px), linear-gradient(132deg, transparent 49.4%, #aebaff28 50%, transparent 50.6%), linear-gradient(24deg, transparent 49.4%, #aebaff24 50%, transparent 50.6%); box-shadow: none; transform: none; }
.vision-card:nth-child(3) { border-color: #534135; background: radial-gradient(ellipse at 100% 0%, #f4a66c1c, transparent 47%), linear-gradient(145deg, #201a18, #0d1117 78%); }
.vision-card:nth-child(3)::after { right: -8px; bottom: -1px; width: 132px; height: 92px; aspect-ratio: auto; border: 0; border-radius: 0; background: linear-gradient(#ffb1773b, #ffb1773b) 18px bottom / 14px 25px no-repeat, linear-gradient(#ffb17746, #ffb17746) 45px bottom / 14px 42px no-repeat, linear-gradient(#ffb17752, #ffb17752) 72px bottom / 14px 61px no-repeat, linear-gradient(#ffb17755, #ffb17755) 8px bottom / 118px 1px no-repeat; box-shadow: none; }
.vision-card:nth-child(4) { border-color: #285047; background: radial-gradient(ellipse at 0% 100%, #50d8b81b, transparent 48%), repeating-linear-gradient(0deg, transparent 0 27px, #50d8b809 28px 29px), repeating-linear-gradient(90deg, transparent 0 27px, #50d8b808 28px 29px), linear-gradient(145deg, #10201f, #0a1119 78%); }
.vision-card:nth-child(4)::after { right: -18px; bottom: -28px; width: 148px; height: 96px; aspect-ratio: auto; border-color: #50d8b86b; border-radius: 50%; background: linear-gradient(0deg, transparent 49%, #50d8b84a 50%, transparent 51%), linear-gradient(90deg, transparent 49%, #50d8b84a 50%, transparent 51%), radial-gradient(ellipse at center, transparent 34%, #50d8b83d 35%, transparent 36%); box-shadow: none; }
.vision-card__index { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--cyan); font: 10px/1.4 var(--mono); letter-spacing: 1.2px; }
.vision-card__index > span { color: #718690; font-size: 8px; }
.vision-card h3 { max-width: 17ch; margin-block: auto 10px; font-size: 18px; letter-spacing: -.3px; }
.vision-card p { position: relative; z-index: 1; max-width: 38ch; color: var(--muted); font-size: 12px; line-height: 1.75; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vision-card:hover { transform: translateY(-4px); border-color: #55dfea; box-shadow: 0 16px 45px #0005, 0 0 25px #55dfea0c; }
}
.vision-pathway { position: relative; overflow: hidden; background: radial-gradient(ellipse at 82% 0, #12303a55, transparent 45%), #0a1119; border-top: 1px solid var(--line); }
.vision-pathway > .wrap { border-bottom: 0; }
.vision-pathway .section-heading { margin-bottom: 14px; }
.vision-pathway__note { margin: 0 0 28px; color: #8398a3; font: 10px/1.7 var(--mono); letter-spacing: .55px; }
.vision-steps { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.vision-steps::before { display: none; }
.vision-steps li { --step-color: #59e4eb; --step-next: #829cff; --step-glow: #59e4eb20; position: relative; z-index: 1; min-width: 0; padding: 0 2px 0 0; border-radius: 9px; transition: background-color .2s ease, box-shadow .2s ease; }
.vision-steps li:nth-child(1) { --step-color: #59e4eb; --step-next: #829cff; --step-glow: #59e4eb20; --step-delay: 0s; }
.vision-steps li:nth-child(2) { --step-color: #829cff; --step-next: #56d5cc; --step-glow: #829cff20; --step-delay: .1s; }
.vision-steps li:nth-child(3) { --step-color: #56d5cc; --step-next: #e2c36d; --step-glow: #56d5cc20; --step-delay: .2s; }
.vision-steps li:nth-child(4) { --step-color: #e2c36d; --step-next: #b997ec; --step-glow: #e2c36d20; --step-delay: .3s; }
.vision-steps li:nth-child(5) { --step-color: #b997ec; --step-next: #f09279; --step-glow: #b997ec20; --step-delay: .4s; }
.vision-steps li:nth-child(6) { --step-color: #f09279; --step-next: #45d9ad; --step-glow: #f0927920; --step-delay: .5s; }
.vision-steps li:nth-child(7) { --step-color: #45d9ad; --step-next: #45d9ad; --step-glow: #45d9ad24; --step-delay: .6s; padding: 10px; margin: -11px -10px; border: 1px solid #45d9ad45; background: linear-gradient(145deg, #45d9ad13, #0b141c 82%); box-shadow: 0 0 20px #45d9ad10; }
.vision-steps li::after { position: absolute; z-index: 0; top: 15px; right: -14px; left: 31px; height: 1px; background: linear-gradient(90deg, var(--step-color), var(--step-next)); box-shadow: 0 0 6px var(--step-glow); content: ""; opacity: .88; transform: scaleX(0); transform-origin: left center; animation: vision-step-trace .7s cubic-bezier(.2,.7,.2,1) var(--step-delay) both; }
.vision-steps li:nth-child(6)::after { right: -24px; }
.vision-steps li:last-child::after { display: none; }
.vision-steps li > span { position: relative; z-index: 1; display: grid; width: 31px; height: 31px; place-items: center; margin-bottom: 16px; border: 1px solid var(--step-color); border-radius: 50%; background: #0a141d; color: var(--step-color); font: 10px/1 var(--mono); box-shadow: 0 0 0 5px #0a1119; transition: transform .2s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.vision-steps h3 { margin-bottom: 7px; font-size: 14px; transition: color .2s ease, text-shadow .2s ease; }
.vision-steps p { max-width: 19ch; color: var(--muted); font-size: 11px; line-height: 1.7; transition: color .2s ease; }
.vision-steps li:nth-child(7) > span { background: #10271f; color: #a7f7d8; box-shadow: 0 0 0 5px #0a1119, 0 0 15px #45d9ad55; animation: vision-final-pulse 3s ease-in-out infinite; }
.vision-steps li:nth-child(7) h3 { color: #a7f7d8; text-shadow: 0 0 16px #45d9ad45; }
@keyframes vision-step-trace { to { opacity: 1; transform: scaleX(1); } }
@keyframes vision-final-pulse { 0%, 100% { box-shadow: 0 0 0 5px #0a1119, 0 0 13px #45d9ad35; } 50% { box-shadow: 0 0 0 6px #0a1119, 0 0 22px #45d9ad80; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vision-steps li:hover { background: linear-gradient(145deg, var(--step-glow), transparent 78%); box-shadow: 0 0 22px var(--step-glow); }
  .vision-steps li:hover > span { transform: scale(1.1); background: var(--step-color); color: #071018; box-shadow: 0 0 18px var(--step-color); }
  .vision-steps li:hover h3 { color: var(--step-color); text-shadow: 0 0 14px var(--step-glow); }
  .vision-steps li:hover p { color: #d0dce2; }
  .vision-steps li:nth-child(7):hover { border-color: #8af0c8; box-shadow: 0 0 30px #45d9ad35; }
}
.vision-outlook { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 42px; padding: 23px 26px; border: 1px solid #263e49; border-left: 2px solid var(--cyan); background: linear-gradient(110deg, #0f202a, #0b141d 75%); }
.vision-outlook > p:first-child { max-width: 740px; color: #aabac2; font-size: 13px; line-height: 1.8; }
.vision-outlook__principle { display: grid; flex: 0 0 auto; gap: 4px; text-align: right; }
.vision-outlook__principle strong { color: var(--text); font-size: 12px; letter-spacing: .35px; }
.vision-outlook__principle span { color: var(--cyan); font: 9px/1.6 var(--mono); letter-spacing: 1px; }
@media (max-width: 1000px) {
  .vision-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vision-card { min-height: 205px; }
  .vision-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; }
  .vision-steps::before { display: none; }
  .vision-steps li::after { display: none; }
  .vision-steps li { padding: 17px; border: 1px solid #243541; background: #0d1822b8; }
  .vision-steps li > span { margin-bottom: 14px; box-shadow: none; }
}
@media (max-width: 900px) {
  .vision-principles .section-heading,
  .vision-pathway .section-heading { display: block; }
  .vision-principles .section-heading > p,
  .vision-pathway .section-heading > p { max-width: 680px; margin-top: 18px; }
}
@media (max-width: 760px) {
  .vision-hero .cinematic-hero-copy { max-width: 620px; }
  .vision-hero .cinematic-hero-copy h1 { max-width: none; font-size: clamp(40px, 9.6vw, 58px); }
  .vision-hero .cinematic-hero-copy .eyebrow { max-width: 37ch; font-size: 9px; line-height: 1.7; }
  .vision-hero .cinematic-scene { --scene-x: 68%; --scene-y: 48%; }
  .vision-cards { grid-template-columns: 1fr; gap: 11px; }
  .vision-card { min-height: 175px; padding: 21px; }
  .vision-card h3 { margin-top: 28px; }
  .vision-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vision-steps li:last-child { grid-column: 1 / -1; }
  .vision-steps li { padding: 14px; }
  .vision-steps p { max-width: 23ch; }
  .vision-outlook { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 28px; padding: 19px; }
  .vision-outlook__principle { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .vision-card,
  .vision-steps li,
  .vision-steps li::after,
  .vision-steps li > span,
  .vision-steps h3,
  .vision-steps p { animation: none; transition: none; }
  .vision-steps li::after { transform: none; }
}