/* ============================================================
   index2.css
   Второй экран главной: Тренер + Подопечный.

   Все классы имеют префикс index2, поэтому стили документов,
   удаления аккаунта и первого экрана не затрагиваются.
   ============================================================ */

.index2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(34px, 4vw, 58px) 0 clamp(82px, 10vw, 144px);
  background:
    radial-gradient(circle at 10% 48%, rgba(0, 161, 255, 0.08), transparent 30%),
    radial-gradient(circle at 90% 45%, rgba(122, 255, 36, 0.085), transparent 30%),
    linear-gradient(180deg, #03101a 0%, #04131f 46%, #03101a 100%);
}

.index2-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.index2-glow {
  position: absolute;
  width: min(48vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.15;
}

.index2-glow-blue {
  left: -22vw;
  top: 18%;
  background: #00bfff;
}

.index2-glow-green {
  right: -22vw;
  top: 18%;
  background: #8dff22;
}

.index2-line {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 44%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(72, 224, 255, 0.32),
    rgba(147, 255, 48, 0.28),
    transparent
  );
  box-shadow:
    0 0 22px rgba(0, 219, 255, 0.16),
    0 0 36px rgba(139, 255, 36, 0.10);
  transform-origin: center;
}

.index2-line-one {
  top: -8%;
  transform: rotate(31deg);
}

.index2-line-two {
  bottom: -10%;
  transform: rotate(-31deg);
}

.index2-shell {
  position: relative;
  z-index: 2;
}









.index2-stage {
  position: relative;
  width: min(100%, 1500px);
  margin-inline: auto;
  border: 1px solid rgba(131, 210, 255, 0.12);
  border-radius: clamp(22px, 2.6vw, 38px);
  background:
    linear-gradient(145deg, rgba(8, 27, 41, 0.72), rgba(5, 19, 29, 0.52));
  box-shadow:
    0 45px 90px rgba(0, 0, 0, 0.30),
    0 0 80px rgba(0, 198, 255, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
  backdrop-filter: blur(18px);
}

.index2-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(0, 205, 255, 0.05), transparent 28%),
    linear-gradient(295deg, rgba(150, 255, 34, 0.05), transparent 30%);
}

.index2-stage-glow {
  position: absolute;
  inset: 7% 8%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 26% 48%, rgba(0, 181, 255, 0.20), transparent 34%),
    radial-gradient(circle at 74% 48%, rgba(135, 255, 35, 0.18), transparent 34%);
  filter: blur(42px);
  opacity: 0.9;
}

.index2-picture {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform;
}

.index2-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: translateZ(18px);
  filter:
    saturate(1.02)
    contrast(1.02)
    drop-shadow(0 26px 45px rgba(0, 0, 0, 0.18));
}

.index2-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 1240px);
  margin: 26px auto 0;
}

.index2-card {
  position: relative;
  min-height: 154px;
  padding: 22px 22px 20px;
  border: 1px solid rgba(152, 218, 255, 0.10);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(12, 34, 48, 0.72), rgba(5, 20, 30, 0.56));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 46px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  backdrop-filter: blur(14px);
}

.index2-card::after {
  content: "";
  position: absolute;
  inset: auto -18% -55% -18%;
  height: 100px;
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0.12;
}

.index2-card-trainer::after {
  background: #00bfff;
}

.index2-card-client::after {
  background: #8cff25;
}

.index2-card-sync::after {
  background: #47f2c3;
}

.index2-card-label {
  display: inline-block;
  margin-bottom: 12px;
  color: rgba(209, 230, 241, 0.60);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.index2-card-trainer .index2-card-label {
  color: #32d5ff;
}

.index2-card-client .index2-card-label {
  color: #a0ff36;
}

.index2-card h3 {
  margin: 0;
  color: #f3f9fc;
  font-size: 18px;
  line-height: 1.25;
}

.index2-card p {
  margin: 10px 0 0;
  color: rgba(201, 220, 231, 0.60);
  font-size: 14px;
  line-height: 1.55;
}

.index2-card-sync {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.index2-sync-dot {
  width: 11px;
  height: 11px;
  margin: 0 auto 13px;
  border-radius: 50%;
  background: #55f4bb;
  box-shadow:
    0 0 0 7px rgba(85, 244, 187, 0.07),
    0 0 24px rgba(85, 244, 187, 0.62);
  animation: index2Pulse 2.2s ease-in-out infinite;
}

/* Плавное появление элементов */
.index2 [data-index2-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 760ms cubic-bezier(.2,.72,.2,1),
    transform 760ms cubic-bezier(.2,.72,.2,1);
}

.index2 [data-index2-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes index2Pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .index2 {
    padding-top: 72px;
  }

  .index2-summary {
    grid-template-columns: 1fr 1fr;
  }

  .index2-card-sync {
    grid-column: 1 / -1;
    min-height: 132px;
  }
}

@media (max-width: 700px) {
  .index2 {
    padding: 26px 0 78px;
  }
.index2-stage {
    border-radius: 20px;
  }

  .index2-summary {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
  }

  .index2-card-sync {
    grid-column: auto;
  }

  .index2-card {
    min-height: auto;
    padding: 18px;
  }
}

@media (max-width: 460px) {
.index2-stage {
    width: calc(100% + 20px);
    margin-left: -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .index2 *,
  .index2 *::before,
  .index2 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ============================================================
   Экран 2: ширина как у горизонтального экрана 4
   Картинка, карточки и SEO-блок используют один широкий контейнер.
   ============================================================ */

.index2 > .site-shell,
.index2 .index2-shell {
  width: min(1520px, calc(100% - 48px));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.index2 .index2-stage {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.index2 .index2-picture,
.index2 .index2-image {
  width: 100%;
  max-width: none;
}

.index2 .index2-summary {
  width: 100%;
  max-width: none;
}

@media (max-width: 1100px) {
  .index2 > .site-shell,
  .index2 .index2-shell {
    width: min(100%, calc(100% - 32px));
  }
}

@media (max-width: 700px) {
  .index2 > .site-shell,
  .index2 .index2-shell {
    width: min(100%, calc(100% - 24px));
  }
}

@media (max-width: 460px) {
  .index2 .index2-stage {
    width: 100%;
    margin-left: 0;
  }
}