@font-face {
  font-family: 'Manrope Vision';
  src: url('assets/manrope-vision-semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
/* Vision is isolated from the Hero, chapter navigation and scroll behavior. */
.potential {
  --potential-section-padding: clamp(112px, 15svh, 160px);
  min-height: calc(127.44svh + var(--potential-extra-space, 0px));
  padding: calc(var(--potential-section-padding) + var(--potential-extra-space, 0px) / 2) max(8.8%, 72px);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  background: #000;
  isolation: isolate;
  overflow: hidden;
}
.potential-heading { position: relative; z-index: 1; text-align: center; grid-row: 1; align-self: start; padding-bottom: 24px; }
.potential-heading { translate: 0 -25%; }
.potential-capacity, .potential-efficiency { translate: 0 -25%; }
.potential-growth, .potential-technology { translate: 0 25%; }
.potential h2 {
  max-width: 1180px;
  margin: 0 auto;
  font-size: clamp(34px, 3.7vw, 62px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.048em;
  color: #edf2f8;
  text-wrap: balance;
}
.potential h2 > span { color: #c6e1fb; white-space: nowrap; background: linear-gradient(110deg, #e6f2ff, #a6cef3); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.potential-system {
  --potential-node-size: clamp(44px, 3.1vw, 58px);
  --potential-node-gap: 14px;
  position: relative;
  width: min(100%, 1600px);
  min-height: 420px;
  margin: 0 auto;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 1.3fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 24px;
}
.potential-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}
.potential-backdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  transform: translate(-50.1794%, -52.763%);
  pointer-events: none;
  z-index: -2;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 79%, transparent);
}
.potential-backdrop img { display: block; width: 100%; height: auto; }
/* Keep the original light of the R while dimming the surrounding architecture. */
.potential-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 12% 22% at 50.1794% 52.763%, transparent 80%, #0003 100%);
  pointer-events: none;
}
/* A single optical fiber per pillar. Light adds depth without extra hardware. */
.potential-route { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.potential-wire { stroke-width: 1.8; opacity: .95; stroke-dasharray: 100; filter: drop-shadow(0 0 4px #279bffb3); transition: opacity .6s ease; }
.potential-energy { opacity: var(--energy, 0); transition: opacity .24s ease-out; }
.potential-light { stroke-width: 2.6; }
.potential-aura { stroke-width: 8; opacity: .24; }
.potential-link[data-energized] .potential-wire { opacity: 1; }
/* A closed geometric contour gives each icon and its text one clear silhouette. */
.potential-envelope { opacity: 0; transition: opacity .7s ease; }
.potential-envelope.is-positioned { opacity: 1; }
.potential-envelope-contour { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: butt; stroke-linejoin: bevel; }
.potential-envelope-wire { stroke-width: 1.5; opacity: .65; filter: drop-shadow(0 0 3px #2ca8ff30); transition: opacity .7s ease; }
.potential-envelope-field { opacity: .75; filter: blur(1px); transition: opacity .8s ease; }
.potential-envelope-flow { stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 15 100; stroke-dashoffset: 15; opacity: 0; filter: drop-shadow(0 0 5px #5bccff99); }
.potential-link[data-energized] .potential-envelope-wire { opacity: .8; }
.potential-link.is-receiving .potential-envelope-flow { animation: potential-envelope-trace 1.45s .03s cubic-bezier(.22,.55,.3,1) both; }
.potential-link.is-receiving .potential-envelope-field { animation: potential-envelope-breathe 2.1s ease-in-out both; }
.potential.has-envelopes .potential-signal { visibility: hidden; }
@keyframes potential-envelope-trace {
  0% { stroke-dashoffset: 15; opacity: 0; }
  12% { opacity: .75; }
  82% { opacity: .6; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes potential-envelope-breathe { 0%, 100% { opacity: .75; } 40% { opacity: .8; } }
/* A short, fading continuation makes the icon and its text read as one unit. */
.potential-bridge, .potential-bridge-flow { vector-effect: non-scaling-stroke; stroke-linecap: round; filter: drop-shadow(0 0 4px #38b6ff80); }
.potential-bridge { stroke-width: 1.2; opacity: .8; }
.potential-bridge-flow { stroke-width: 2; opacity: 0; stroke-dasharray: 35 100; stroke-dashoffset: 35; }
.potential-link.is-receiving .potential-bridge-flow { animation: potential-text-link .75s .08s ease-out both; }
@keyframes potential-text-link {
  0% { opacity: 0; stroke-dashoffset: 35; }
  25% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -100; }
}
.potential-node {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--potential-node-size);
  height: var(--potential-node-size);
  translate: -50% -50%;
  border: 1px solid #70d0ffa3;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #13557c8c, #061b2ca3 75%);
  color: #c3e9fb;
  box-shadow: inset 0 0 14px #2c9bff24, 0 0 12px #2aaeff66, 0 0 30px #198cff38;
  opacity: 0;
  pointer-events: none;
  transition: border-color .7s ease, color .7s ease;
}
.potential-node.is-positioned { opacity: 1; }
.potential-node > svg { position: relative; display: block; width: 48%; height: 48%; filter: drop-shadow(0 0 3px #75d8ff50); }
.potential-node[data-potential-node="efficiency"] > svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* One diffuse field crosses the circle, the gap and the nearest letters. */
.potential-fusion {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -18px;
  width: calc(100% + var(--fusion-reach, 150px));
  height: 200%;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 76% 50%, #3bb9ff38, #289bff1a 35%, #258fff08 58%, #258fff00 76%);
  filter: blur(12px);
  opacity: .72;
  pointer-events: none;
}
.potential-node[data-potential-node="efficiency"] .potential-fusion,
.potential-node[data-potential-node="technology"] .potential-fusion {
  right: auto;
  left: -18px;
  background: radial-gradient(ellipse at 24% 50%, #3bb9ff38, #289bff1a 35%, #258fff08 58%, #258fff00 76%);
}
.potential-node.is-arriving .potential-fusion { animation: potential-fusion-receive 1.6s ease-in-out both; }
@keyframes potential-fusion-receive { 0%, 100% { opacity: .72; } 40% { opacity: 1; } }
.potential-node::before, .potential-node::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.potential-node::before { inset: 5px; border: 1px solid #71caff1a; }
.potential-node::after { inset: -1px; border: 1px solid #87e3ff; opacity: 0; }
.potential-node[data-energized] { border-color: #8bdcffb3; color: #d9f2ff; }
.potential-node.is-arriving { animation: potential-node-receive 1.45s ease-in-out both; }
.potential-node.is-arriving::after { animation: potential-node-ring 1.45s ease-out both; }
@keyframes potential-node-receive {
  0%, 100% { scale: 1; }
  40% { scale: 1.025; box-shadow: inset 0 0 16px #47c9ff38, 0 0 16px #65d9ff80, 0 0 38px #198cff4d; }
}
@keyframes potential-node-ring { from { opacity: .35; scale: 1; } to { opacity: 0; scale: 1.3; } }
.potential.is-revealing .potential-wire { animation: potential-connect 1.5s cubic-bezier(.22,.7,.25,1) both; animation-delay: calc(.3s + var(--link-order) * .12s); }
@keyframes potential-connect { from { stroke-dashoffset: -100; } to { stroke-dashoffset: 0; } }
.potential-pillar { --ink-direction: 90deg; --sheen-from: 0% 50%; --sheen-to: 100% 50%; position: relative; z-index: 1; align-self: center; width: 100%; max-width: 300px; min-height: 184px; padding: 12px 0; }
.potential-capacity { grid-area: 1 / 1; }
.potential-efficiency { grid-area: 1 / 3; }
.potential-growth { grid-area: 2 / 1; }
.potential-technology { grid-area: 2 / 3; }
.potential-efficiency, .potential-technology { --ink-direction: 270deg; --sheen-from: 100% 50%; --sheen-to: 0% 50%; justify-self: end; }
.potential-pillar h3 { width: fit-content; max-width: 100%; margin: 0 0 17px; color: #d4eaf8; font-size: clamp(25px, 2.15vw, 34px); font-weight: 700; line-height: 1.18; letter-spacing: -.035em; text-shadow: 0 0 12px #41b6ff15; transition: filter .75s ease, text-shadow .75s ease; }
.potential-pillar p { margin: 0; max-width: 300px; color: #f1f5fb; background: none; -webkit-text-fill-color: currentColor; opacity: 1; font-family: 'Manrope Vision', Manrope, Arial, sans-serif; font-size: clamp(14px, 1.1vw, 16px); font-weight: 600; line-height: 1.8; letter-spacing: -.005em; text-wrap: pretty; text-shadow: 0 1px 5px #000000b3; transition: filter .75s ease; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .potential-pillar h3 {
    background-image: linear-gradient(var(--sheen-direction, 90deg), #dbf4ff00 35%, #dbf4ff70 50%, #dbf4ff00 65%), linear-gradient(var(--ink-direction), #edf3fa 0%, #d4eaf8 52%, #93d7fb 100%);
    background-size: var(--sheen-size, 320% 100%), 100% 100%;
    background-position: var(--sheen-from), 0 0;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.potential-signal { display: block; position: relative; width: 32px; height: 1px; margin-bottom: 20px; background: linear-gradient(90deg, #b0d6f8, #9bc9f300); opacity: .7; transform-origin: left center; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }

.potential-core { grid-area: 1 / 2 / 3 / 3; align-self: center; justify-self: center; width: 100%; max-width: 340px; aspect-ratio: 1; pointer-events: none; }
.potential-core > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.potential.is-revealing .potential-heading { animation: potential-reveal .8s ease-out both; }
.potential.is-revealing .potential-pillar { animation: potential-reveal .8s ease-out both; animation-delay: calc(.12s + var(--pillar-order) * .09s); }
/* The same quiet emphasis works for proximity and the ambient light sequence. */
.potential-pillar[data-energized] h3 { filter: brightness(1.06); }
.potential-pillar[data-energized] .potential-signal { transform: scaleX(1.3); opacity: 1; }
.potential-pillar.is-receiving h3 { animation: potential-text-receive 1.8s .14s ease-in-out both, potential-title-sheen 1.65s .12s cubic-bezier(.2,.5,.3,1) both; }
.potential-pillar.is-receiving p { animation: potential-description-receive 1.7s .32s ease-in-out both; }
.potential-pillar.is-receiving .potential-signal { background: linear-gradient(90deg, #78d8ff, #3bafff00); filter: drop-shadow(0 0 5px #38b6ff80); }
@keyframes potential-text-receive {
  0%, 100% { text-shadow: 0 0 12px #41b6ff15; }
  40% { text-shadow: 0 0 16px #65ceff4d, 0 0 30px #249eff24; }
}
/* A single soft reflection carries the light through the word, then into the description. */
@keyframes potential-title-sheen {
  from { background-position: var(--sheen-from), 0 0; }
  to { background-position: var(--sheen-to), 0 0; }
}
@keyframes potential-description-receive {
  0%, 100% { filter: brightness(1); }
  42% { filter: brightness(1.08); }
}
@media (hover: hover) and (pointer: fine) {
  .potential-pillar:hover h3, .potential-pillar:hover p { filter: brightness(1.06); }
}
@keyframes potential-reveal { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
/* Remove the empty lower grid row while preserving the desktop content positions. */
@media (min-width: 1051px) {
  .potential {
    min-height: 0;
    grid-template-rows: minmax(min-content, calc((127.44svh - 2 * clamp(112px, 15svh, 160px) - 420px) / 2)) auto;
  }
}
@media (min-width: 701px) {
  .potential-pillar h3 { max-width: calc(100% - var(--potential-node-size) - var(--potential-node-gap)); }
  .potential-efficiency h3, .potential-technology h3 { margin-left: calc(var(--potential-node-size) + var(--potential-node-gap)); }
  .potential-capacity, .potential-efficiency { top: -8px; }
  .potential-growth, .potential-technology { top: 8px; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .potential-system { --potential-node-size: 32px; --potential-node-gap: 8px; }
  .potential { padding-left: 8.8%; padding-right: 8.8%; }
  .potential-system { grid-template-columns: minmax(0, 1fr) minmax(160px, .9fr) minmax(0, 1fr); column-gap: 18px; min-height: 390px; }
  .potential-pillar { min-height: 208px; }
  .potential-pillar h3 { font-size: 25px; }
  .potential-pillar p { font-size: 14px; }
}
@media (max-width: 700px) {
  .potential { --potential-section-padding: 110px; padding-left: 22px; padding-right: 22px; }
  .potential h2 { font-size: clamp(29px, 7.6vw, 43px); line-height: 1.2; letter-spacing: -.04em; }
  .potential-break { display: none; }
  .potential-heading { padding-bottom: 42px; }
  .potential-system { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr minmax(170px, 48vw) 1fr; column-gap: 30px; row-gap: 28px; }
  .potential-capacity { grid-area: 1 / 1; }
  .potential-efficiency { grid-area: 1 / 2; }
  .potential-core { grid-area: 2 / 1 / 3 / 3; width: min(58%, 240px); }
  .potential-growth { grid-area: 3 / 1; }
  .potential-technology { grid-area: 3 / 2; }
  .potential-pillar { align-self: start; min-height: 0; padding: 0; }
  .potential-pillar h3 { font-size: clamp(20px, 5.2vw, 26px); margin-bottom: 14px; letter-spacing: -.03em; }
  .potential-pillar p { font-size: 13px; line-height: 1.8; }
  .potential-signal { width: 23px; margin-bottom: 16px; }
  .potential-backdrop { width: max(100vw, 780px); }
  .potential-system { --potential-node-size: 36px; }
  .potential-pillar { --ink-direction: 180deg; --sheen-direction: 180deg; --sheen-size: 100% 320%; --sheen-from: 50% 0%; --sheen-to: 50% 100%; }
  .potential-growth, .potential-technology { --ink-direction: 0deg; --sheen-from: 50% 100%; --sheen-to: 50% 0%; }
  .potential-node .potential-fusion,
  .potential-node[data-potential-node="efficiency"] .potential-fusion,
  .potential-node[data-potential-node="technology"] .potential-fusion {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 72px;
    height: 150px;
    translate: -50% 0;
    background: radial-gradient(ellipse at 50% 76%, #3bb9ff30, #289bff15 35%, #258fff00 76%);
    filter: blur(10px);
  }
  .potential-node[data-potential-node="growth"] .potential-fusion,
  .potential-node[data-potential-node="technology"] .potential-fusion {
    top: 0;
    bottom: auto;
    background: radial-gradient(ellipse at 50% 24%, #3bb9ff30, #289bff15 35%, #258fff00 76%);
  }
  .potential-wire { stroke-width: 1.2; opacity: .85; }
  .potential-light { stroke-width: 1.8; }
  .potential-aura { opacity: .18; }
  .potential-envelope-wire { stroke-width: 1.25; opacity: .6; }
  .potential-envelope-flow { stroke-width: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  .potential .potential-heading, .potential .potential-pillar, .potential .potential-wire { animation: none !important; }
  .potential-pillar h3, .potential-pillar p, .potential-signal, .potential-wire, .potential-energy { transition: none; }
  .potential-energy { display: none; }
  .potential-pillar[data-energized] .potential-signal { transform: none; }
  .potential-node, .potential-node::after, .potential-fusion { animation: none !important; transition: none; }
  .potential-pillar h3, .potential-pillar p, .potential-bridge-flow { animation: none !important; }
  .potential-bridge-flow { display: none; }
  .potential-envelope, .potential-envelope-wire, .potential-envelope-field { animation: none !important; transition: none; }
  .potential-envelope-flow { display: none; }
}

/* Reduce the complete vision composition uniformly, including its occupied height. */
.potential-frame{--potential-scale:.9;position:relative;background:#000;overflow:hidden}
.potential-frame.is-scaled>.potential{transform:scale(var(--potential-scale));transform-origin:50% 0}