/* Modules — PC image stage + SEO/mobile HTML (Figma 4077:6118 / 4077:7480) */

.modules-section {
  /* scoped only — do not force overflow on shared .section rules */
}

.modules-section .modules-heading {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding-bottom: 0;
}

.modules-section .modules-heading h2 {
  width: min(1288px, 100%);
  max-width: 100%;
  color: #4d4d4d;
  overflow: visible;
  line-height: 1.25;
}

.modules-layout {
  position: relative;
  margin-top: 80px;
  /* Room for desktop bg bleed so heading above is not clipped */
  padding-top: 24px;
}

/* —— Desktop visual stage —— */
.modules-stage {
  position: relative;
  width: 100%;
  max-width: 1288px;
  margin: 0 auto;
  aspect-ratio: 1288 / 789;
  overflow: visible;
  z-index: 1;
}

.modules-stage__bg {
  position: absolute;
  left: 3.1056%;
  top: -12.9278%;
  width: 94.0217%;
  height: 125.7288%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
  z-index: 0;
}

.modules-stage.is-bg-visible .modules-stage__bg,
.modules-stage.is-settled .modules-stage__bg {
  opacity: 1;
}

.modules-stage__diagram {
  position: absolute;
  inset: 0;
  width: 99.1459%;
  height: 100.507%;
  pointer-events: none;
  z-index: 1;
}

.modules-stage__pieces {
  position: absolute;
  inset: 0;
}

.modules-stage__piece {
  position: absolute;
  opacity: 0;
  transform: translate(var(--gt-enter-x, 0), var(--gt-enter-y, 0)) scale(0.92);
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.modules-stage__piece img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modules-stage__piece.is-in {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.modules-stage__composite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  opacity: 0;
  transition: opacity 0.65s ease;
}

.modules-stage.is-settled .modules-stage__composite {
  opacity: 1;
}

.modules-stage.is-settled .modules-stage__pieces {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}

.modules-stage.is-settled .modules-stage__pieces .modules-stage__piece {
  display: none;
}

/* Fallback: if JS fails, still show full design */
.modules-stage:not([data-modules-bound]) .modules-stage__bg,
.modules-stage:not([data-modules-bound]) .modules-stage__composite {
  opacity: 1;
}

.modules-stage:not([data-modules-bound]) .modules-stage__pieces {
  display: none;
}

/* —— Shared content cards —— */
.modules-content {
  /* mobile stack helper (no-op on desktop SEO overlay) */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.modules-content__stack {
  display: contents;
}

.modules-content__group {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.modules-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.modules-card__icon {
  flex: 0 0 auto;
  width: 40px;
  height: auto;
  display: block;
}

.modules-card__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modules-card__body h3 {
  margin: 0;
  color: #101828;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.modules-card__points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.modules-card__points li,
.modules-card__points p {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #475467;
  font-size: 14px;
  line-height: 20px;
}

.modules-card__note {
  margin: 0;
  color: #2062ff;
  font-size: 12px;
  line-height: 16px;
}

.modules-hub {
  display: none;
}

/* Desktop: SEO text under visual stage */
@media (min-width: 769px) {
  .modules-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 1288px;
    margin: 0 auto;
    right: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
  }

  .modules-hub {
    display: block;
    position: relative;
    width: 100%;
    height: 400px;
    margin: 24px 0 40px;
    overflow: hidden;
  }

  .modules-hub__bg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1211px;
    height: 992px;
    max-width: none;
    transform: translate(-50%, -50%) rotate(-90deg) scaleY(-1);
    opacity: 0.55;
    pointer-events: none;
    object-fit: cover;
  }

  .modules-hub__orbit,
  .modules-hub__rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 420px;
    height: 420px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
  }

  .modules-hub__rings {
    width: 560px;
    height: 460px;
    object-fit: contain;
    opacity: 0.42;
    animation: gt-hub-spin 28s linear infinite;
  }

  .modules-hub__orbit {
    animation: gt-hub-spin 36s linear infinite;
  }

  .modules-hub__ring {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(32, 98, 255, 0.22);
    border-radius: 50%;
  }

  .modules-hub__ring--2 { inset: 11%; opacity: 0.9; }
  .modules-hub__ring--3 { inset: 24%; opacity: 0.75; }
  .modules-hub__ring--4 { inset: 38%; opacity: 0.6; border-style: solid; border-color: rgba(32, 98, 255, 0.12); }

  .modules-hub__dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(32, 98, 255, 0.16), 0 0 10px rgba(136, 176, 249, 0.8);
  }

  .modules-hub__dot--1 { left: 50%; top: 0; transform: translate(-50%, -50%); }
  .modules-hub__dot--2 { right: 0; top: 50%; transform: translate(50%, -50%); }
  .modules-hub__dot--3 { left: 50%; bottom: 0; transform: translate(-50%, 50%); }
  .modules-hub__dot--4 { left: 0; top: 50%; transform: translate(-50%, -50%); }
  .modules-hub__dot--5 { left: 18%; top: 18%; }
  .modules-hub__dot--6 { right: 18%; bottom: 22%; }

  .modules-hub__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 132px;
    height: 132px;
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(32, 98, 255, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  .modules-hub__core img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .modules-content__group--bottom {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modules-stage__bg,
  .modules-stage__composite,
  .modules-stage__piece {
    transition: none !important;
  }

  .modules-stage.is-ready .modules-stage__bg,
  .modules-stage.is-ready .modules-stage__composite {
    opacity: 1;
  }

  .modules-stage.is-ready .modules-stage__pieces {
    display: none !important;
  }
}