/* Homepage CTA — Figma MCP 84:609 (intro) → 84:863 (final).
   It is deliberately separate from the global footer CTA used by inner pages. */
.mi-home-cta {
  position: relative;
  display: grid;
  /* The native-proportion left raster ends at the contact scene's lower
     edge. Do not retain the transparent 53px strip below it. */
  min-height: calc(907px * var(--mi-s));
  overflow: hidden;
  background: #112331;
  isolation: isolate;
}

.mi-home-cta__scene,
.mi-home-cta__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mi-home-cta__wash {
  z-index: 1;
  opacity: 0;
  background: linear-gradient(180deg, #edf5fd 0%, #85b0d2 117.08%);
  transition: opacity 420ms var(--mi-ease) 2630ms;
}

.mi-home-cta__figure {
  position: absolute;
  display: block;
  max-width: none;
  /* Keep the Figma source art at its native proportion. Stretching either
     raster makes the two reaching hands lose their shared horizontal axis. */
  height: auto;
  object-position: bottom center;
  will-change: opacity, transform;
  transition: opacity 260ms linear 2480ms;
}

/* Exact 1920px Figma positions from node 84:609. */
.mi-home-cta__figure--left {
  /* Figma 84:612: fingertip sits on the shared contact axis before motion. */
  top: calc(101px * var(--mi-s));
  left: calc(50% - ((960px + 499px) * var(--mi-s)));
  width: calc(1521px * var(--mi-s));
  /* Native height: 806px at the 1521px Figma display width. */
  transform: translate3d(-5%, 0, 0);
}

.mi-home-cta__figure--right {
  /* Figma 84:611: same contact axis as the left layer. */
  top: calc(-395px * var(--mi-s));
  left: calc(50% - ((960px - 945px) * var(--mi-s)));
  width: calc(2082px * var(--mi-s));
  /* Native height: 1643px at the 2082px Figma display width. */
  transform: translate3d(5%, 0, 0);
}

.mi-home-cta__flare {
  position: absolute;
  z-index: 1;
  top: calc(294px * var(--mi-s));
  left: 50%;
  width: calc(352px * var(--mi-s));
  height: calc(352px * var(--mi-s));
  z-index: 2;
  opacity: 0;
  transform: translateX(-50%) scale(0.55);
  transition: opacity 360ms var(--mi-ease) 2370ms, transform 780ms var(--mi-ease) 2300ms;
}

/* Video "анкета 2.mp4", frames ~2.5–3.0s: a 52px centre orb expands
   until it becomes the light CTA background. */
.mi-home-cta__orb {
  position: absolute;
  z-index: 1;
  top: calc(444px * var(--mi-s));
  left: 50%;
  width: calc(52px * var(--mi-s));
  height: calc(52px * var(--mi-s));
  border-radius: 50%;
  background: #edf5fd;
  transform: translateX(-50%) scale(0);
  transform-origin: center;
  will-change: transform;
  transition: transform 780ms cubic-bezier(0.78, 0, 0.22, 1) 1860ms;
}

.mi-home-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40px * var(--mi-s));
  width: 100%;
  padding: calc(120px * var(--mi-s)) var(--mi-gutter);
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, calc(36px * var(--mi-s)), 0);
  transition: opacity 560ms var(--mi-ease) 2960ms, transform 560ms var(--mi-ease) 2960ms;
}

.mi-home-cta__copy {
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--mi-s));
  width: 100%;
}

.mi-home-cta__title,
.mi-home-cta__text {
  margin: 0;
  color: #112331;
}

.mi-home-cta__title {
  font-family: var(--mi-font);
  font-size: calc(88px * var(--mi-s));
  font-weight: 500;
  line-height: 1.1;
}

.mi-home-cta__text {
  font-size: calc(24px * var(--mi-s));
  font-weight: 500;
  line-height: 1.3;
}

.mi-home-cta.is-active .mi-home-cta__wash { opacity: 1; }
.mi-home-cta.is-active .mi-home-cta__figure { opacity: 0; }
.mi-home-cta.is-active .mi-home-cta__figure--left { animation: mi-home-cta-left 1850ms var(--mi-ease) forwards; }
.mi-home-cta.is-active .mi-home-cta__figure--right { animation: mi-home-cta-right 1850ms var(--mi-ease) forwards; }
.mi-home-cta.is-active .mi-home-cta__orb { transform: translateX(-50%) scale(46); }
.mi-home-cta.is-active .mi-home-cta__flare { opacity: 1; transform: translateX(-50%) scale(1); }
.mi-home-cta.is-active .mi-home-cta__content { opacity: 1; transform: none; }

@keyframes mi-home-cta-left {
  from { transform: translate3d(-5%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes mi-home-cta-right {
  from { transform: translate3d(5%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (max-width: 991px) {
  .mi-home-cta {
    /* The mobile CTA keeps the desktop sequence: dark figure scene,
       horizontal convergence, orb transition, then the Figma 101:765 end state. */
    --mi-home-cta-motion-s: clamp(0.833333, calc(100vw / 360px), 1.194444);
    min-height: calc(800px * var(--mi-home-cta-motion-s));
    background: #112331;
  }

  .mi-home-cta__figure--left {
    top: calc(101px * var(--mi-home-cta-motion-s));
    left: calc(50% - ((960px + 499px) * var(--mi-home-cta-motion-s)));
    width: calc(1521px * var(--mi-home-cta-motion-s));
  }

  .mi-home-cta__figure--right {
    top: calc(-395px * var(--mi-home-cta-motion-s));
    left: calc(50% - ((960px - 945px) * var(--mi-home-cta-motion-s)));
    width: calc(2082px * var(--mi-home-cta-motion-s));
  }

  .mi-home-cta__flare {
    top: calc(294px * var(--mi-home-cta-motion-s));
    width: calc(352px * var(--mi-home-cta-motion-s));
    height: calc(352px * var(--mi-home-cta-motion-s));
  }

  .mi-home-cta__orb {
    top: calc(444px * var(--mi-home-cta-motion-s));
    width: calc(52px * var(--mi-home-cta-motion-s));
    height: calc(52px * var(--mi-home-cta-motion-s));
  }

  .mi-home-cta__content {
    gap: 24px;
    padding: 120px 16px;
  }

  .mi-home-cta__copy { gap: 24px; width: 328px; }
  .mi-home-cta__title { font-size: 32px; line-height: 1.1; }
  .mi-home-cta__text { font-size: 18px; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-home-cta__wash { opacity: 1; transition: none; }
  .mi-home-cta__figure { display: none; }
  .mi-home-cta__orb { display: none; }
  .mi-home-cta__flare { opacity: 1; transform: translateX(-50%); transition: none; }
  .mi-home-cta__content { opacity: 1; transform: none; transition: none; }
}