/* ============================================================
   index5.css
   Экран 5: упражнения, группы мышц и карта восстановления.
   ============================================================ */

.index5 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(72px, 7vw, 116px) 0 clamp(76px, 8vw, 120px);
  background:
    radial-gradient(circle at 18% 30%, rgba(0, 198, 255, .08), transparent 30%),
    radial-gradient(circle at 84% 46%, rgba(126, 255, 41, .08), transparent 32%),
    linear-gradient(150deg, #03101a 0%, #051722 52%, #031019 100%);
}

.index5-bg { position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.index5-glow { position:absolute; width:40vw; aspect-ratio:1; border-radius:50%; filter:blur(110px); opacity:.14; }
.index5-glow-cyan { left:-15vw; top:12%; background:#00dfff; }
.index5-glow-lime { right:-15vw; top:22%; background:#92ff2f; }
.index5-line { position:absolute; width:72vw; height:1px; left:14%; background:linear-gradient(90deg, transparent, rgba(38,214,255,.22), rgba(142,255,57,.16), transparent); box-shadow:0 0 26px rgba(0,215,255,.08); }
.index5-line-one { top:26%; transform:rotate(-10deg); }
.index5-line-two { bottom:18%; transform:rotate(8deg); }

.index5-shell { display:grid; grid-template-columns:minmax(360px,.78fr) minmax(620px,1.22fr); align-items:center; gap:clamp(28px,4vw,72px); }
.index5-copy { position:relative; z-index:4; max-width:620px; }
.index5-kicker { display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border:1px solid rgba(102,231,255,.16); border-radius:999px; background:rgba(7,30,42,.60); color:#58e9ff; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; backdrop-filter:blur(14px); }
.index5-kicker span { color:#a4ff39; text-shadow:0 0 16px rgba(164,255,57,.55); }
.index5-title { margin:22px 0 0; color:#f6fbff; font-size:clamp(44px,5.2vw,78px); line-height:1; letter-spacing:-.047em; text-wrap:balance; }
.index5-title span { display:block; margin-top:8px; background:linear-gradient(93deg,#25d9f7 8%,#a0ff35 78%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.index5-lead { margin:24px 0 0; color:rgba(216,233,242,.70); font-size:clamp(16px,1.3vw,20px); line-height:1.62; }

.index5-points { display:grid; gap:10px; margin-top:28px; }
.index5-point { padding:15px 16px; border:1px solid rgba(145,216,248,.10); border-radius:18px; background:linear-gradient(145deg,rgba(13,37,50,.68),rgba(7,23,33,.52)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 34px rgba(0,0,0,.12); backdrop-filter:blur(13px); }
.index5-point strong { display:block; color:#f4f9fc; font-size:15px; }
.index5-point span { display:block; margin-top:5px; color:rgba(196,217,229,.58); font-size:13px; line-height:1.5; }

.index5-stage { position:relative; z-index:2; min-height:760px; transform-style:preserve-3d; will-change:transform; }
.index5-stage-glow { position:absolute; inset:18% 12%; border-radius:50%; background:radial-gradient(circle at 38% 40%,rgba(0,220,255,.20),transparent 44%),radial-gradient(circle at 72% 58%,rgba(148,255,45,.16),transparent 48%); filter:blur(44px); }
.index5-main,.index5-panel,.index5-sticker { position:absolute; display:block; height:auto; object-fit:contain; pointer-events:none; user-select:none; filter:drop-shadow(0 28px 50px rgba(0,0,0,.28)); }
.index5-main-groups { z-index:4; width:min(48%,520px); left:2%; top:7%; transform:rotate(-4deg) translateZ(24px); }
.index5-main-map { z-index:5; width:min(47%,520px); right:8%; top:1%; transform:rotate(4deg) translateZ(34px); }
.index5-panel { z-index:6; width:min(33%,350px); right:0; bottom:6%; transform:rotate(5deg) translateZ(42px); }
.index5-sticker { z-index:7; filter:drop-shadow(0 16px 26px rgba(0,0,0,.24)) drop-shadow(0 0 20px rgba(0,220,255,.08)); }
.index5-sticker-1300 { width:24%; left:-1%; top:3%; transform:rotate(-7deg); }
.index5-sticker-last { width:26%; left:-4%; bottom:16%; transform:rotate(3deg); }
.index5-sticker-pick { width:25%; right:-2%; top:20%; transform:rotate(5deg); }
.index5-sticker-smart { width:24%; right:7%; bottom:-1%; transform:rotate(-4deg); }
.index5-sticker-visual { width:25%; left:31%; bottom:0; transform:rotate(-2deg); }

.index5-bottom { position:relative; z-index:4; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:30px; }
.index5-feature { display:grid; grid-template-columns:54px 1fr; gap:12px; padding:18px; border:1px solid rgba(128,215,255,.12); border-radius:20px; background:linear-gradient(145deg,rgba(13,36,49,.72),rgba(6,22,32,.56)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 44px rgba(0,0,0,.13); backdrop-filter:blur(14px); }
.index5-feature-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; background:rgba(8,43,57,.74); color:#6eeeff; font-size:15px; font-weight:900; box-shadow:inset 0 0 0 1px rgba(74,229,255,.14); }
.index5-feature:nth-child(3) .index5-feature-icon,.index5-feature:nth-child(4) .index5-feature-icon { color:#a4ff43; box-shadow:inset 0 0 0 1px rgba(164,255,67,.14); }
.index5-feature h3 { margin:1px 0 0; color:#f4f9fc; font-size:16px; line-height:1.3; }
.index5-feature p { margin:6px 0 0; color:rgba(196,217,229,.58); font-size:13px; line-height:1.5; }

.index5-seo { margin-top:20px; padding:18px 20px; border:1px solid rgba(118,255,92,.16); border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),rgba(4,19,31,.30); }
.index5-seo h3 { margin:0 0 8px; color:#f6fbff; font-size:clamp(17px,1.4vw,21px); }
.index5-seo p { margin:0; color:rgba(220,235,244,.72); font-size:14px; line-height:1.65; }

.index5 [data-index5-reveal] { opacity:0; transform:translateY(24px); transition:opacity 760ms cubic-bezier(.2,.72,.2,1),transform 760ms cubic-bezier(.2,.72,.2,1); }
.index5 [data-index5-reveal].is-visible { opacity:1; transform:translateY(0); }

@media (max-width:1180px) {
  .index5-shell { grid-template-columns:minmax(330px,.8fr) minmax(540px,1.2fr); gap:24px; }
  .index5-stage { min-height:680px; }
  .index5-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px) {
  .index5 { padding:68px 0 82px; }
  .index5-shell { grid-template-columns:1fr; }
  .index5-copy { max-width:760px; margin-inline:auto; text-align:center; }
  .index5-lead { margin-inline:auto; }
  .index5-points { max-width:720px; margin-inline:auto; margin-top:26px; text-align:left; }
  .index5-stage { min-height:680px; width:min(100%,760px); margin:12px auto 0; }
}

@media (max-width:620px) {
  .index5 { padding:56px 0 68px; }
  .index5-title { font-size:clamp(38px,11vw,52px); }
  .index5-lead { font-size:15px; }
  .index5-stage { min-height:520px; }
  .index5-main-groups { width:54%; left:-2%; top:8%; }
  .index5-main-map { width:54%; right:-3%; top:6%; }
  .index5-panel { width:38%; right:2%; bottom:6%; }
  .index5-sticker-1300 { width:29%; left:0; }
  .index5-sticker-last { width:31%; left:0; bottom:13%; }
  .index5-sticker-pick { width:30%; right:0; top:25%; }
  .index5-sticker-smart { width:31%; right:4%; }
  .index5-sticker-visual { width:31%; left:29%; }
  .index5-bottom { grid-template-columns:1fr; gap:10px; }
}

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


/* ===== update: only phone images, remove all badges/panels ===== */
.index5-panel,
.index5-sticker {
  display: none !important;
}

.index5-stage {
  min-height: 700px;
}

.index5-main-groups {
  z-index: 5;
  width: min(46%, 470px);
  left: 12%;
  top: 11%;
  transform: rotate(-5deg) translateZ(28px);
}

.index5-main-map {
  z-index: 6;
  width: min(46%, 470px);
  right: 12%;
  top: 5%;
  transform: rotate(5deg) translateZ(34px);
}

.index5-stage-glow {
  inset: 15% 10%;
  background:
    radial-gradient(circle at 36% 44%, rgba(0, 220, 255, .18), transparent 42%),
    radial-gradient(circle at 67% 54%, rgba(148, 255, 45, .15), transparent 46%);
  filter: blur(54px);
}

@media (max-width: 1180px) {
  .index5-stage {
    min-height: 620px;
  }

  .index5-main-groups {
    width: min(47%, 430px);
    left: 10%;
    top: 13%;
  }

  .index5-main-map {
    width: min(47%, 430px);
    right: 10%;
    top: 7%;
  }
}

@media (max-width: 900px) {
  .index5-stage {
    min-height: 600px;
  }

  .index5-main-groups {
    width: 48%;
    left: 8%;
    top: 16%;
  }

  .index5-main-map {
    width: 48%;
    right: 8%;
    top: 9%;
  }
}

@media (max-width: 620px) {
  .index5-stage {
    min-height: 430px;
  }

  .index5-main-groups {
    width: 49%;
    left: 4%;
    top: 18%;
    transform: rotate(-4deg);
  }

  .index5-main-map {
    width: 49%;
    right: 4%;
    top: 12%;
    transform: rotate(4deg);
  }
}