/* A separate cosmic process chapter. Existing hero/services stay untouched. */
.medusa-impact { --impact-visual-height: clamp(300px, 30vw, 490px); position: relative; isolation: isolate; width: 100%; min-width: 0; min-height: 110svh; padding: clamp(64px, 7vh, 110px) 3.2rem 54px; overflow: clip; color: #e0e5ef; background: radial-gradient(ellipse at 70% 42%, #3d345839, transparent 62%), linear-gradient(180deg, #101b2c 0%, #10182a 22%, #11172a 60%, #0b1220 100%); }
.medusa-impact__atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* The barely visible rim of a distant world over a faint violet glow, as in the services hero. */
.medusa-impact__arc { position: absolute; left: 50%; top: clamp(20px, 3.5vh, 56px); width: min(2200px, 168vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 1px solid #c9bdf238; box-shadow: 0 -3px 34px #9d8cf024, inset 0 3px 44px #9d8cf017; -webkit-mask-image: radial-gradient(ellipse 72% 36% at 50% 0%, #000 34%, transparent 78%); mask-image: radial-gradient(ellipse 72% 36% at 50% 0%, #000 34%, transparent 78%); }
.medusa-impact__arc::before { content: ''; position: absolute; inset: 8% 22% 58%; border-radius: 50%; background: radial-gradient(ellipse, #7657f03d, #3d34581f 50%, transparent 72%); filter: blur(34px); }
.medusa-impact__label { position: relative; display: flex; align-items: center; gap: 16px; max-width: 1760px; margin: 0 auto 28px; padding-inline: 24px; font: 300 10px/1.4 var(--_font-default); letter-spacing: .14em; color: #aab6c8; }
.medusa-impact__label span { height: 1px; width: 70px; background: #aab6c82b; }
.medusa-impact__header { position: relative; z-index: 2; text-align: center; max-width: 950px; margin: 0 auto 24px; }
.medusa-impact h2 { margin: 0 0 24px; font: 400 clamp(34px, 3.7vw, 64px)/1.03 var(--_font-default); letter-spacing: -.04em; color: #e0e5ef; }
.medusa-impact__header p { margin: 0 auto; max-width: 560px; font: 300 clamp(14px, 1.05vw, 17px)/1.4 var(--_font-default); letter-spacing: -.015em; color: #afb9cc; }
.medusa-impact__stages { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1760px; padding: 0; margin: 0 auto; list-style: none; }
/* Stages share one height; the deliverable tags line up across all four. */
.medusa-impact__stage { position: relative; min-width: 0; display: flex; flex-direction: column; }
.medusa-impact__stage::before { content: ''; position: absolute; top: var(--impact-visual-height); left: 0; right: 0; height: 1px; background: #a7b5d03d; transform-origin: left; }
.medusa-impact__stage:first-child::before { left: 50%; }
.medusa-impact__stage:last-child::before { right: 50%; }
.medusa-impact__artifact { position: relative; height: var(--impact-visual-height); pointer-events: none; }
.medusa-impact__artifact::before { content: ''; position: absolute; inset: 18% 4%; background: radial-gradient(ellipse, #8e81b81c, transparent 66%); opacity: calc(.25 + var(--stage) * .18); }
.medusa-impact__node { position: absolute; z-index: 2; top: calc(var(--impact-visual-height) - 3px); left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #b7b3ce; box-shadow: 0 0 14px #a79ac83b; }
.medusa-impact__info { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 25px 16px 0; text-align: center; }
.medusa-impact__number { font: 300 10px/1.4 var(--_font-default); letter-spacing: .14em; color: #aab6c8; }
.medusa-impact h3 { margin: 11px 0 14px; font: 400 clamp(14px, 1.15vw, 19px)/1.2 var(--_font-default); letter-spacing: -.015em; color: #e0e5ef; }
.medusa-impact__info p { max-width: 300px; margin: 0 auto; font: 300 clamp(13px, 1vw, 16px)/1.45 var(--_font-default); letter-spacing: -.015em; color: #afb9cc; }
/* Practical name of each stage, the client's gain and the deliverables. */
.medusa-impact__phase { display: block; margin: -6px 0 12px; font: 400 10px/1.4 "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: #a79ac8; }
.medusa-impact__info .medusa-impact__gain { margin-top: 12px; color: #d6dcea; }
.medusa-impact__gain strong { font-weight: 400; color: #c9b9ff; }
.medusa-impact__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: none; margin: auto auto 0; padding-top: 16px; min-height: 66px; align-content: flex-start; padding: 0; list-style: none; }
.medusa-impact__tags li { padding: 5px 8px; border: 1px solid #e0e5ef1f; border-radius: 20px; background: linear-gradient(145deg, #222c4a59, #0c122240); font: 400 10px/1.2 "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; text-transform: uppercase; color: #c9d2e2; }
/* Motion toggle: a visible glass pill above the fourth artifact. */
.medusa-impact__motion { position: absolute; z-index: 3; top: -6px; left: 50%; transform: translateX(-50%); padding: 9px 18px; border: 1px solid #e0e5ef2e; border-radius: 20px; background: linear-gradient(145deg, #222c4a8c, #0c122273); box-shadow: inset 1px 1px 0 #ffffff14, 0 10px 30px #03060e59; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 400 11px/1.2 var(--_font-default); letter-spacing: .06em; color: #e0e5ef; white-space: nowrap; cursor: pointer; transition: border-color .3s; }
.medusa-impact__motion:hover { border-color: #e0e5ef66; }
.medusa-impact__motion[hidden] { display: none; }
.medusa-impact__motion:focus-visible { outline: 2px solid #a3b8d2; outline-offset: 4px; }
/* Decorative no-WebGL representation: real content never depends on the canvas. */
.medusa-impact__fallback { position: absolute; top: 50%; left: 50%; width: 78%; height: 80%; transform: translate(-50%, -50%) scale(calc(.38 + var(--stage) * .18)); }
.medusa-impact__fallback span { position: absolute; inset: 8% 20%; background: conic-gradient(from 20deg at 42% 53%, #8396b9, #48537b 21%, #ac9bc4 42%, #696399 50%, #2e3d61 69%, #afbfda 88%, #8396b9); clip-path: polygon(44% 0, 83% 16%, 100% 52%, 73% 89%, 30% 100%, 0 66%, 12% 20%); transform: rotate(-14deg); }
.medusa-impact__stage:nth-child(2) .medusa-impact__fallback span { transform: rotate(12deg) skewY(-9deg); }
.medusa-impact__stage:nth-child(3) .medusa-impact__fallback span { inset: 12% 12%; clip-path: polygon(32% 0, 70% 9%, 87% 28%, 100% 58%, 74% 92%, 38% 100%, 5% 74%, 0 40%, 14% 17%); }
.medusa-impact__stage:nth-child(4) .medusa-impact__fallback span { inset: 1% 12%; transform: rotate(9deg); }
.medusa-impact__fallback i { position: absolute; inset: 0; border: 1px solid #b4b8d033; border-radius: 50%; transform: rotate(30deg) scaleY(.6); }
.medusa-impact__fallback i + i { transform: rotate(-55deg) scaleY(.55); }
/* Cycles turntables (media/impact) fade in over the CSS artifact. */
.medusa-impact__render { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1.2s ease; }
.medusa-impact__artifact.is-rendered .medusa-impact__render { opacity: 1; }
.medusa-impact__artifact.is-rendered .medusa-impact__fallback { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .medusa-impact.is-entered .medusa-impact__atmosphere { animation: medusa-impact-atmosphere 2.4s ease both; }
  .medusa-impact.is-entered .medusa-impact__header { animation: medusa-impact-reveal 1.5s .1s ease both; }
  .medusa-impact.is-entered .medusa-impact__stage::before { animation: medusa-impact-line 1.4s calc(.5s + var(--stage) * .22s) ease both; }
  .medusa-impact.is-entered .medusa-impact__info { animation: medusa-impact-reveal 1.4s calc(.8s + var(--stage) * .22s) ease both; }
  @keyframes medusa-impact-atmosphere { from { opacity: .3; } to { opacity: 1; } }
  @keyframes medusa-impact-reveal { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes medusa-impact-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (max-width: 1199px) {
  .medusa-impact { --impact-visual-height: 340px; min-height: 100svh; }
  .medusa-impact__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .medusa-impact__stage:nth-child(odd)::before { left: 50%; right: 0; }
  .medusa-impact__stage:nth-child(even)::before { left: 0; right: 50%; }
  .medusa-impact__arc { top: 24px; }
}
@media (max-width: 767px) {
  .medusa-impact { --impact-visual-height: 300px; padding: 54px 2.2rem 36px; }
  .medusa-impact__label { padding: 0; }
  .medusa-impact__header { margin-bottom: 32px; }
  .medusa-impact h2 { font-size: clamp(30px, 7vw, 40px); }
  .medusa-impact__header p { max-width: 330px; }
  .medusa-impact__desktop-break { display: none; }
  .medusa-impact__stages { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .medusa-impact__stage { padding-left: 24px; padding-bottom: 36px; }
  .medusa-impact__stage::before, .medusa-impact__stage:nth-child(n)::before { top: 0; bottom: 0; left: 3px; right: auto; width: 1px; height: auto; }
  .medusa-impact__stage:first-child::before { top: 30px; }
  .medusa-impact__stage:last-child::before { bottom: 36px; }
  .medusa-impact__node { top: 25px; left: 0; }
  .medusa-impact__info { padding: 0 8px; text-align: left; align-items: stretch; }
  .medusa-impact__number { position: absolute; top: calc(-1 * var(--impact-visual-height) + 22px); left: 8px; }
  .medusa-impact h3 { font-size: 17px; }
  .medusa-impact__info p { max-width: none; font-size: 14px; }
  .medusa-impact__tags { justify-content: flex-start; max-width: none; margin-left: 0; }
  .medusa-impact__motion { left: auto; right: 0; transform: none; top: 8px; }
  .medusa-impact__arc { width: 150vw; top: 14px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .medusa-impact.is-entered .medusa-impact__stage::before { animation-name: medusa-impact-line-vertical; transform-origin: top; }
  @keyframes medusa-impact-line-vertical { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}