/* ================================================================
   MindMuscles — единый styles.css
   Источники: главная (homepage) + training + nutrition
   ================================================================ */

/* ════════════════════════════════════════════════════════════════
   ЧАСТЬ 1: HOMEPAGE — страницы с классом body.page-home
   ════════════════════════════════════════════════════════════════ */
/* ============================================================
   MindMuscles — дизайн-система (токены и базовые компоненты)
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --lime:       #dcf750;
  --lime-60:    rgba(220,247,80,.6);
  --purple:     #bc5ffe;
  --dark:       #1e1e1e;
  --dark2:      #2e2e2e;
  --gray:       #4a4a4a;
  --white:      #ffffff;
  --black:      #000000;
  --off-white:  #f5f5f5;

  --page-max:   1440px;
  --pad-x:      160px;   /* Figma: x=160 inner padding */
  --content-w:  1120px;  /* Figma: 1440 - 160*2 */

  --r-pill:     50px;
  --r-card:     25px;
  --r-btn:      10px;

  --font-h:     'Exo 2', system-ui, sans-serif;
  --font-b:     'Manrope', system-ui, sans-serif;

  --section-gap: 0;      /* Sections are flush */
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; }
p { margin: 0; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Layout helper ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ── Reveal animation ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   HEADER  (Figma: 331:174  w=1440 h=150)
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

/* Top bar – lime (Figma: 331:184  h=105  fill=#dcf750) */
.header__top {
  background: var(--lime);
  height: 105px;
  display: flex;
  align-items: center;
}
.header__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.header__logo {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: var(--black);
}
.header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header__action-link {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 18px;
  color: var(--dark2);
  transition: opacity .2s;
}
.header__action-link:hover { opacity: .7; }
.header__btn {
  background: var(--white);
  color: var(--gray);
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 16px;
  padding: 16px 28px;
  border-radius: var(--r-btn);
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.header__btn:hover { background: var(--dark); color: var(--white); }
.header__btn--secondary {
  background: transparent;
  color: var(--dark2);
  border: 2px solid var(--dark2);
}
.header__btn--secondary:hover {
  background: var(--dark2);
  color: var(--white);
  border-color: var(--dark2);
}

/* Nav bar – purple (Figma: 331:175  h=45  fill=#bc5ffe) */
.header__nav {
  background: var(--purple);
  height: 45px;
  display: flex;
  align-items: center;
}
.header__nav-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.header__nav-link {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 20px;
  color: var(--white);
  transition: opacity .2s;
}
.header__nav-link:hover { opacity: .75; }

/* ============================================================
   BANNER  (Figma: 331:192  y=150  h=1110)
   ============================================================ */
.banner {
  background: var(--white);
  min-height: 820px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 56px;
}
.banner__glow {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-35%);
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(220,247,80,.4) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.banner__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 58px;
  line-height: 1.2;
  color: var(--dark);
  text-align: center;
  width: 100%;
  max-width: var(--page-max);
  padding-inline: var(--pad-x);
  margin: 0 auto 40px;
  background: transparent;
}
.banner__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 340px);
  gap: 44px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  flex: 1;
}
.banner__left {
  display: flex;
  justify-content: center;
}
.banner__img {
  width: 100%;
  max-width: 580px;
  height: auto;
  border-radius: 20px;
  object-fit: contain;
}
.banner__right {
  position: relative;
}
.banner__panel {
  background: rgba(188,95,254,.3);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(12px);
  border-radius: var(--r-card);
  padding: 26px 24px;
  width: 100%;
}
.banner__panel-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 19px;
  color: var(--black);
  line-height: 1.3;
}
.banner__panel-item:last-child { margin-bottom: 0; }
.banner__panel-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: var(--purple);
  margin-top: 6px;
  flex-shrink: 0;
}
.banner__cta {
  display: inline-block;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 40px;
  padding: 26px 80px;
  border-radius: 25px;
  transition: transform .2s, box-shadow .2s;
}
.banner__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(188,95,254,.4);
}

/* ============================================================
   PROGRAMMES  (Figma: 331:212  y=1260  h=499)
   ============================================================ */
.programs {
  background: var(--white);
  padding: 60px 0;
}
.programs__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.programs__toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.programs__toggle-wrap {
  position: relative;
  display: flex;
  background: var(--off-white);
  border-radius: var(--r-pill);
  padding: 4px;
}
.programs__toggle-btn {
  position: relative;
  z-index: 2;
  padding: 10px 36px;
  border-radius: var(--r-pill);
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 20px;
  color: var(--gray);
  transition: color .25s;
}
.programs__toggle-btn.is-active { color: var(--black); }
.programs__toggle-indicator {
  position: absolute;
  top: 4px; bottom: 4px;
  left: 4px;
  background: var(--lime);
  border-radius: var(--r-pill);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}
.programs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.programs__grid--hidden { display: none; }
.programs__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.programs__cta-wrap .banner__cta {
  font-size: 26px;
  padding: 18px 52px;
  border-radius: 20px;
}
.prog-card {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--off-white);
  position: relative;
  aspect-ratio: 280 / 297;
  cursor: pointer;
  transition: transform .2s;
}
.prog-card:hover { transform: translateY(-4px); }
.prog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prog-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
  border-radius: 0 0 var(--r-card) var(--r-card);
  padding: 10px 14px;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 22px;
  color: var(--white);
}
.prog-card__age-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(188,95,254,.6) 0%, transparent 65%);
  z-index: 1;
}
.prog-card__label { z-index: 2; }
.prog-card__bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
}

/* ============================================================
   ADVANTAGES  (Figma: 331:239  y=1759  h=975)
   ============================================================ */
.advantages {
  background: var(--white);
  padding: 80px var(--pad-x);
  max-width: var(--page-max);
  margin-inline: auto;
}
.advantages__top-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.adv-card {
  background: #fafafa;
  border-radius: var(--r-card);
  padding: 32px 28px 0;
  position: relative;
  overflow: hidden;
  min-height: 381px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(to bottom, #fafafa 0%, rgba(188,95,254,.18) 100%);
}
.adv-card__inner { flex: 1; }
.adv-card__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 24px;
  color: var(--dark2);
  margin-bottom: 16px;
  text-align: center;
}
.adv-card__text {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  color: var(--dark2);
  text-align: center;
}
.adv-card__img {
  display: block;
  margin: 20px auto 0;
  width: 180px;
  height: 180px;
  object-fit: contain;
}
.adv-card__img--2 { width: 220px; height: 220px; }
.adv-card__img--3 { width: 300px; height: 300px; }

/* Wide card (100% персонализации) */
.adv-card--wide {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 60px;
  min-height: auto;
  padding: 40px 48px;
}
.adv-card__inner--wide { flex: 1; }
.adv-card__title--wide { font-size: 28px; text-align: left; }
.adv-card__text--wide {
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}
.adv-card__img--wide {
  margin: 0;
  width: 261px;
  height: 261px;
  flex-shrink: 0;
  object-fit: contain;
}

/* ============================================================
   CTA — только главная (index): #F7F7F7, кнопки слева столбиком, текст справа
   ============================================================ */
.cta1 {
  width: 100%;
  background: #f7f7f7;
  box-sizing: border-box;
}

.cta1__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 220px;
  padding: 32px var(--pad-x);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 48px 64px;
}

.cta1__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  width: auto;
}

.cta1__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta1__title {
  margin: 0;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: var(--black);
}

.cta1__title-accent {
  color: #c9a0ff;
  margin-right: 0.25em;
}

.cta1__title-nowrap {
  white-space: nowrap;
}

.cta1__lead {
  margin: 0;
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--gray);
}

.cta1__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 300px;
  min-height: 64px;
  height: auto;
  border-radius: 18px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: #1a2c3e;
  text-decoration: none;
  text-align: center;
  padding: 14px 22px;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s;
}

.cta1__btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.cta1__btn--lime {
  background: var(--lime);
  border: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(220, 247, 80, 0.35);
}

.cta1__btn--white {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.cta1__btn--solo {
  max-width: min(100%, 400px);
  padding-inline: 28px;
}

/* ============================================================
   PLAN — Figma 331:270 (светлый фон, рамка 1119×750 #DCF750)
   ============================================================ */
.plan {
  background: #ffffff;
  padding: 56px 0 120px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
}

.plan__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.plan__title {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--dark2);
  margin: 0 0 24px;
  text-align: left;
}

/* ── Зигзаг ── */
.plan-zigzag {
  position: relative;
}

/* Text background — Figma: 1119×750, left 160, top 30, border 5px #DCF750, r 25 */
.plan-zigzag__frame {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1119px;
  margin: 30px auto 0;
  min-height: 750px;
  padding: 36px 36px 48px;
  border: 5px solid #dcf750;
  border-radius: 25px;
  background: #ffffff;
  overflow: hidden;
}

.plan-zigzag__rail {
  position: absolute;
  left: 50%;
  top: 32px;
  bottom: 120px;
  width: 4px;
  margin-left: -2px;
  background: #dcf750;
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}

.plan-zigzag__steps {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 28px;
}

.plan-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
  max-width: min(560px, calc(100% - 8px));
  padding: 22px 24px 24px 20px;
  background: #ffffff;
  border: 3px solid #dcf750;
  border-radius: 24px;
  box-sizing: border-box;
  box-shadow: 0 4px 24px rgba(179, 136, 255, 0.06);
}

.plan-card--left {
  align-self: flex-start;
  margin-right: auto;
}

.plan-card--right {
  align-self: flex-end;
  margin-left: auto;
}

.plan-card__num {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 72px;
  line-height: 0.85;
  color: #b388ff;
  letter-spacing: -0.02em;
}

.plan-card__main {
  min-width: 0;
  padding-top: 2px;
}

.plan-card__title {
  margin: 0 0 10px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: #b388ff;
}

.plan-card__text {
  margin: 0;
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #2e2e2e;
}

/* Углы рамки: половина картинки снаружи (overflow на frame), под текстом */
.plan-zigzag__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  height: auto;
}

.plan-zigzag__deco--apples {
  left: 0;
  bottom: 0;
  width: clamp(200px, 32vw, 340px);
  transform: translate(-38%, 42%);
}

.plan-zigzag__deco--athle {
  right: 0;
  bottom: 0;
  width: clamp(220px, 36vw, 380px);
  transform: translate(42%, 38%);
}

@media (max-width: 1100px) {
  .plan-zigzag__rail {
    display: none;
  }
  .plan-card--left,
  .plan-card--right {
    align-self: stretch;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
}

@media (max-width: 900px) {
  .plan {
    padding: 40px 0 100px;
  }
  .plan__title {
    font-size: 28px;
    margin-bottom: 16px;
  }
  .plan-zigzag__frame {
    margin-top: 20px;
    min-height: unset;
    padding: 24px 20px 32px;
    border-width: 4px;
  }
  .plan-card__num {
    font-size: 56px;
  }
  .plan-card__title {
    font-size: 19px;
  }
  .plan-zigzag__deco--apples {
    width: clamp(160px, 48vw, 260px);
    transform: translate(-32%, 36%);
  }
  .plan-zigzag__deco--athle {
    width: clamp(180px, 52vw, 280px);
    transform: translate(36%, 34%);
  }
}

@media (max-width: 540px) {
  .plan-zigzag__frame {
    padding: 18px 14px 28px;
    border-width: 3px;
    border-radius: 20px;
  }
  .plan-zigzag__deco--apples {
    width: min(200px, 70vw);
    transform: translate(-28%, 32%);
  }
  .plan-zigzag__deco--athle {
    width: min(210px, 75vw);
    transform: translate(30%, 30%);
  }
  .plan-card {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 14px;
  }
  .plan-card__num {
    font-size: 48px;
    line-height: 1;
  }
  .plan-card__main {
    padding-top: 0;
  }
}

/* ============================================================
   PROGRESS  (Figma: 331:294  y=3805  h=718)
   ============================================================ */
.progress-sec {
  background: #f0f0f0;
  padding: 80px 0;
}
.progress-sec__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.progress-sec__title {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 40px;
  color: var(--dark2);
  margin-bottom: 48px;
}
.progress-sec__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.prog-track-card {
  background: var(--white);
  border-radius: var(--r-card);
  border: 1px solid rgba(0,0,0,.1);
  overflow: hidden;
}
.prog-track-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(220,247,80,.8);
}
.prog-track-card__status {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 20px;
  color: var(--dark);
}
.prog-track-card__count {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 15px;
  color: var(--gray);
}
.prog-track-card__body {
  padding: 20px;
}
.prog-track-card__date {
  display: flex;
  gap: 16px;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 12px;
}
.prog-track-card__name {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 22px;
  color: var(--dark);
  margin-bottom: 4px;
}
.prog-track-card__label {
  font-family: var(--font-b);
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 4px;
}
.prog-track-card__time {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--dark);
}
.prog-track-card__duration {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 28px;
  color: var(--black);
  margin-bottom: 4px;
}
.prog-track-card__muscles {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 20px;
}
.prog-track-card__progress {}
.prog-track-card__pb-label {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 6px;
}
.prog-track-card__pb-wrap {
  background: #e0e0e0;
  border-radius: 20px;
  height: 20px;
  overflow: hidden;
  margin-bottom: 12px;
}
.prog-track-card__pb-fill {
  height: 100%;
  background: var(--lime);
  border-radius: 20px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.prog-track-card__analytics {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  padding: 12px;
  border-radius: var(--r-btn);
  margin-top: 8px;
  cursor: default;
}

/* ============================================================
   CTA 2  (Figma 331:373 — 1440×569, bg #fff, фото слева)
   index / training / nutrition
   ============================================================ */
.cta2 {
  background: #ffffff;
  overflow: hidden;
}

.cta2__inner {
  position: relative;
  height: 569px;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}

.cta2__img-area {
  position: absolute;
  left: 106px;
  top: -23px;
  width: 592px;
  height: 592px;
  overflow: hidden;
}

.cta2__wm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 30px;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.cta2__wm span {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 48px;
  line-height: 1.2;
  color: #a63df1;
  display: block;
}

.cta2__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.cta2__text-group {
  position: absolute;
  left: 720px;
  top: 337px;
  width: 563px;
  z-index: 1;
}

.cta2__heading {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 18px;
}

.cta2__tagline {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.366;
  color: #4a4a4a;
  margin: 0;
}

.cta2__btn {
  position: absolute;
  left: 730px;
  width: 455px;
  height: 80px;
  border-radius: 15px;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  color: #1a2c3e;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 1;
  transition: opacity 0.2s;
}

.cta2__btn:hover {
  opacity: 0.85;
}

.cta2__btn--ghost {
  top: 140px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.cta2__btn--lime {
  top: 239px;
  background: var(--lime);
}

/* Одна CTA вместо двух (главная / тренировки / питание) */
.cta2__btn--solo {
  top: 180px;
}

@media (max-width: 1200px) {
  .cta2__inner {
    height: auto;
    min-height: 460px;
  }
  .cta2__img-area {
    left: 20px;
    width: 380px;
    height: 380px;
    top: 40px;
  }
  .cta2__btn {
    left: 430px;
    width: 380px;
    font-size: 26px;
    height: 68px;
  }
  .cta2__btn--ghost {
    top: 60px;
  }
  .cta2__btn--lime {
    top: 148px;
  }
  .cta2__btn--solo {
    top: 104px;
  }
  .cta2__text-group {
    left: 430px;
    top: 240px;
    width: calc(100% - 490px);
  }
  .cta2__heading {
    font-size: 36px;
  }
  .cta2__tagline {
    font-size: 20px;
  }
}

@media (max-width: 900px) {
  .cta2__inner {
    min-height: 620px;
    height: auto;
  }
  .cta2__img-area {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 320px;
    height: 320px;
  }
  .cta2__btn {
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    max-width: 400px;
    font-size: 22px;
    height: 60px;
  }
  .cta2__btn--ghost {
    top: 340px;
  }
  .cta2__btn--lime {
    top: 418px;
  }
  .cta2__btn--solo {
    top: 340px;
  }
  .cta2__text-group {
    left: 50%;
    transform: translateX(-50%);
    top: 500px;
    width: 90vw;
    max-width: 420px;
    text-align: center;
  }
  .cta2__heading {
    font-size: 28px;
  }
  .cta2__tagline {
    font-size: 16px;
  }
}

@media (max-width: 540px) {
  .cta2__btn {
    font-size: 18px;
    height: 52px;
  }
  .cta2__heading {
    font-size: 24px;
  }
}

/* ============================================================
   PRICE  (Figma: 331:413  y=5092  h=1119)
   ============================================================ */
.price {
  background: var(--white);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.price::before {
  content: '';
  position: absolute;
  bottom: 50px;
  right: 200px;
  width: 737px;
  height: 737px;
  background: radial-gradient(circle, rgba(220,247,80,.3) 0%, transparent 65%);
  pointer-events: none;
}
.price__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  position: relative;
  z-index: 1;
}
.price__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 48px;
  color: var(--black);
  margin-bottom: 48px;
}
.price__grid {
  display: grid;
  grid-template-columns: repeat(3, 360px);
  gap: 20px;
  margin-bottom: 20px;
}
.price-card {
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.2);
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
  width: 360px;
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}

/* Title area */
.price-card__title-wrap {
  background: #f7f7f7;
  border-radius: 17px;
  margin: 18px 18px 0;
  padding: 10px 20px;
}
.price-card__title-wrap--white {
  background: var(--white);
}
.price-card__title {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 48px;
  color: var(--gray);
}

/* Price body */
.price-card__body {
  padding: 16px 30px 24px;
  flex: 1;
}
.price-card__price-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;       /* badge не уходит за край при узкой карточке */
  gap: 8px 16px;
  margin-bottom: 4px;
}
.price-card__current {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 96px;
  line-height: 1.2;
  color: var(--purple);
}
.price-card__current--white { color: var(--white); }
.price-card__badge {
  background: rgba(0,0,0,.12);
  border-radius: 30px;
  padding: 8px 16px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 40px;
  color: var(--gray);
  align-self: flex-start;
  margin-top: 12px;
}
.price-card__badge--light {
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
}
.price-card__old {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 48px;
  color: var(--gray);
  margin-bottom: 8px;
  text-decoration: line-through;
}
.price-card__old--dark { color: #323232; }

/* Button */
.price-card__footer {
  padding: 20px 18px 18px;
}
.price-card__btn {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--dark2);
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 35px;
  text-align: left;
  padding: 28px 38px;
  border-radius: 25px;
  border: 1px solid rgba(0,0,0,.2);
  transition: background .2s, color .2s;
}
.price-card__btn:hover { background: rgba(0,0,0,.04); }
.price-card__btn--lime {
  background: var(--lime);
  color: var(--dark2);
  border: none;
  font-weight: 700;
  font-size: 48px;
}
.price-card__btn--lime:hover { background: #c8e043; }

/* Forever row (bottom) */
.price__forever-row {
  display: grid;
  grid-template-columns: 504px 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 0;
}
.price-card--forever {
  width: 504px;
  background: var(--purple);
  border-color: transparent;
  border-radius: 22px;
}
.price-card--forever .price-card__title {
  color: var(--gray);
}
.price-card--forever .price-card__footer {
  padding: 0 18px 18px;
}

/* Forever text column */
.price__forever-text {}
.price__forever-title {
  font-family: var(--font-b);
  font-weight: 800;
  font-size: 36px;
  color: var(--black);
  line-height: 1.35;
  margin-bottom: 24px;
}
.price__forever-sub {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 36px;
  color: #4a4a4a;
  line-height: 1.35;
}
.price__forever-sub .price-lime,
.tr-prices__sub2 .price-lime {
  color: var(--lime);
}

/* ============================================================
   STEPS  (Figma: 387:23 — 1440 × 436 px, bg #ffffff)
   Белый фон, лаймовый градиент на карточке шагов, кружки #bc5ffe
   ============================================================ */
.steps {
  background: #ffffff;
  padding: 72px 0;
}
.steps__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.steps__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 48px;
  color: #000000;
  margin-bottom: 40px;
}

/* ── Контейнер шагов: лаймовый градиент снизу-справа → прозрачный сверху-слева ── */
.steps__row {
  display: flex;
  align-items: flex-start;
  background: linear-gradient(225deg, rgba(220,247,80,.8) 0%, rgba(220,247,80,0) 55%);
  border-radius: 40px;
  padding: 30px;
  gap: 0;
}

/* Каждый шаг — равная ширина */
.steps__row .step {
  flex: 1 1 0px;   /* все стартуют с 0, растут одинаково */
  min-width: 0;    /* текст не раздувает колонку */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 28px;
  box-sizing: border-box;
}
.steps__row .step:first-child { padding-left: 4px; }
.steps__row .step:last-child  { padding-right: 4px; }
.steps__row .step + .step {
  border-left: 1px solid #4a4a4a;
}

/* Badge: кружок + слово «Шаг» */
.steps__row .step__badge {
  position: static;
  display: flex;
  align-items: center;
  gap: 20px;
}
.steps__row .step__circle {
  width: 73px;
  height: 73px;
  border-radius: 50%;
  border: 6px solid #bc5ffe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.steps__row .step__num {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: #bc5ffe;
}
.steps__row .step__word {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  color: #bc5ffe;
}

/* Текст описания шага */
.step__desc {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.37;
  color: #000000;
  margin: 0;
}

/* ── Адаптив ── */
@media (max-width: 900px) {
  .steps__row { flex-direction: column; border-radius: 24px; padding: 20px; }
  .steps__row .step { padding: 16px 0; }
  .steps__row .step + .step { border-left: none; border-top: 1px solid #4a4a4a; }
  .steps__row .step:first-child { padding-top: 0; }
}

/* ============================================================
   REVIEWS — unified (all pages, Figma: 387:172)
   ============================================================ */
.reviews {
  background: #ffffff;
  min-height: 524px;
  overflow: hidden;
}
.reviews__wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  min-height: 524px;
  display: grid;
  grid-template-columns: 265px 1fr;
  column-gap: 20px;
  position: relative;
  align-items: start;
}
.reviews__left {
  position: relative;
  min-height: 455px;
}
.reviews__title {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.reviews__bigq {
  position: absolute; left: 0; top: 54px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 128px;
  line-height: 1.2;
  color: rgba(220,247,80,0.3);
  pointer-events: none;
  user-select: none;
}
.reviews__sub {
  position: absolute; left: 0; top: 182px;
  width: 265px;
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.37;
  color: #000;
  margin: 0;
}
.reviews__nav {
  position: absolute; left: 0; top: 355px;
  display: flex;
  gap: 30px;
}
.reviews__nav-btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #bc5ffe;
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.15s;
}
.reviews__nav-btn:hover:not(:disabled)  { opacity: 0.85; transform: scale(1.05); }
.reviews__nav-btn:active:not(:disabled) { transform: scale(0.95); }
.reviews__nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.reviews__nav-btn svg   { pointer-events: none; }

/* Carousel viewport */
.reviews__viewport {
  overflow: hidden;
  height: 397px;
  margin-top: 58px;
}
.reviews__track {
  display: flex;
  gap: 50px;
  height: 397px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── Review cards ──────────────────────────────────────────── */
.rev-card {
  flex: 0 0 378px;
  width: 378px;
  height: 397px;
  border-radius: 25px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rev-card--dark {
  background: var(--g-review-dark);
}
.rev-card--light {
  background: var(--g-review-light);
  border: var(--border-gray);
}

/* Card body */
.rev-card__inner {
  flex: 1;
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Title with decorative quotes */
.rev-card__head {
  position: relative;
  padding: 0 20px;
  margin-bottom: 10px;
  min-height: 76px;
}
.rev-card__ql {
  position: absolute; left: 0; top: -8px;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  color: rgba(220,247,80,0.3);
  pointer-events: none; user-select: none;
}
.rev-card--light .rev-card__ql { color: #dcf750; }
.rev-card__qr {
  position: absolute; right: 0; bottom: -8px;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  color: rgba(220,247,80,0.3);
  pointer-events: none; user-select: none;
}
.rev-card--light .rev-card__qr { color: #dcf750; }
.rev-card__title {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  color: #ffffff;
  margin: 0;
}
.rev-card--light .rev-card__title { color: #000000; }

/* Card text */
.rev-card__text {
  flex: 1;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.37;
  color: rgba(255,255,255,0.8);
  overflow: hidden;
  margin: 0;
}
.rev-card--light .rev-card__text { color: #4a4a4a; }

/* Name footer bar */
.rev-card__foot {
  flex-shrink: 0;
  height: 45px;
  background: #2e2e2e;
  border-radius: 0 0 15px 15px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: #ffffff;
}
.rev-card__foot--light { color: #ffffff; }

/* ── Reviews responsive ──────────────────────────────────────── */
@media (max-width: 1200px) {
  .reviews__wrap { padding: 40px 60px; min-height: auto; }
  .reviews__left { min-height: 420px; }
}
@media (max-width: 900px) {
  .reviews__wrap {
    grid-template-columns: 1fr;
    padding: 40px 30px;
    min-height: auto;
    row-gap: 30px;
  }
  .reviews__left    { min-height: 180px; }
  .reviews__title   { position: static; display: block; font-size: 36px; }
  .reviews__bigq    { display: none; }
  .reviews__sub     { position: static; display: block; font-size: 22px; margin-top: 12px; }
  .reviews__nav     { position: static; margin-top: 20px; }
  .reviews__nav-btn { width: 70px; height: 70px; }
  .reviews__viewport { margin-top: 0; }
  .rev-card         { flex: 0 0 300px; width: 300px; }
}
@media (max-width: 540px) {
  .reviews__wrap  { padding: 30px 20px; }
  .rev-card       { flex: 0 0 260px; width: 260px; }
  .reviews__nav-btn { width: 60px; height: 60px; }
  .reviews__nav-btn svg { width: 24px; height: 24px; }
}

/* ============================================================
   ABOUT  (Figma: 331:553  y=7171  h=2606)
   ============================================================ */
/* ============================================================
   ABOUT  (Figma: 331:553)
   ============================================================ */
.about {
  width: 100%;
}

/* ── Часть 1: тёмный герой ── */
.about__hero {
  background: #111111;
  padding: 80px 0 0;
  position: relative;
  width: 100%;
  clip-path: none;
  overflow: clip;
}
.about__glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.about__glow--tr {
  background: radial-gradient(circle, rgba(220,247,80,.6) 0%, transparent 70%);
  top: -200px;
  right: -100px;
}
.about__glow--tl {
  background: radial-gradient(circle, rgba(220,247,80,.5) 0%, transparent 70%);
  top: -80px;
  left: -250px;
}
.about__hero-inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: 60px;
  align-items: start;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.about__hero-text {
  padding-top: 20px;
}
.about__tag {
  display: block;
  font-family: var(--font-h);
  font-weight: 400;
  font-size: 36px;
  color: #2e2e2e;
  margin-bottom: 20px;
}
.about__h1 {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 16px;
}
.about__subtitle {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 24px;
  color: rgba(74,74,74,.85);
  margin-bottom: 28px;
}
.about__intro {
  background: rgba(0,0,0,.004);
  border-radius: 20px;
  padding: 28px 32px;
}
.about__intro p {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(74,74,74,.85);
}
.about__hero-img {
  width: 100%;
  border-radius: 20px 20px 0 0;
  object-fit: cover;
  max-height: 640px;
  display: block;
  margin-top: 40px;
}

/* ── Часть 2: зигзаг «Как мы реализуем» ── */
.about__how {
  background: linear-gradient(135deg, #6B21A8 0%, #9333EA 55%, #A855F7 100%);
  padding: 80px 0;
  position: relative;
  width: 100%;
}
.about__how-inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  position: relative;
  z-index: 1;
}
.about__how-title {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 40px;
  color: var(--white);
  text-align: center;
  margin-bottom: 12px;
}
.about__how-sub {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 18px;
  color: rgba(255,255,255,.7);
  text-align: center;
  max-width: 860px;
  margin: 0 auto 60px;
}

/* Зигзаг-контейнер */
.about__zz-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  padding-bottom: 20px;
}
.about__zz-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.about__zz-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 12px;
}
.about__zz-step--high {
  padding-top: 0;
  padding-bottom: 120px;
}
.about__zz-step--low {
  padding-top: 120px;
  padding-bottom: 0;
}
.about__zz-circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 48px;
  color: var(--black);
  margin-bottom: 20px;
  flex-shrink: 0;
}
.about__zz-text {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
}

/* ── Часть 3: белый фон — текстовые блоки ── */
.about__content {
  background: var(--white);
}

.about__block {
  padding: 72px 0;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.about__block-title {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--white);
  background: #111111;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 12px;
  margin-bottom: 28px;
}
.about__block-title--right {
  float: right;
  text-align: right;
}
.about__block-body {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(0,0,0,.8);
  clear: both;
}
.about__block-body--right {
  text-align: right;
}
.about__block--right .about__block-body {
  text-align: right;
}

/* Серые полосы */
.about__band {
  background: rgba(217,217,217,.2);
  padding: 72px 0;
}
.about__band .about__block {
  padding-top: 0;
  padding-bottom: 0;
}

/* CTA внутри about */
.about__cta-block {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  text-align: right;
}
.about__cta-title {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 40px;
  color: var(--lime);
  margin-bottom: 16px;
}
.about__cta-text {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 18px;
  color: rgba(0,0,0,.8);
  line-height: 1.6;
  max-width: 700px;
  margin-left: auto;
  margin-bottom: 16px;
}
.about__brand {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 22px;
  color: var(--dark2);
}

/* ============================================================
   BLOG  (Figma: 331:608  y=9777  h=560)
   ============================================================ */
.blog {
  background: linear-gradient(180deg, rgba(220,247,80,.1) 0%, rgba(220,247,80,0) 100%);
  padding: 80px 0;
}
.blog__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.blog__title {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 40px;
  color: var(--black);
  margin-bottom: 40px;
}
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 288 / 369;
  cursor: pointer;
  transition: transform .2s;
}
.blog-card:hover { transform: translateY(-4px); }
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(0.78) brightness(0.94) saturate(0);
  transition: filter .3s;
}
.blog-card:hover .blog-card__img {
  filter: contrast(0.85) brightness(0.96) saturate(0.25);
}
.blog-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(106, 55, 149, 0.82);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
/* Нижняя полоса карточки: компактное «стекло» под текст */
.blog-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  min-height: 22%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 22px 18px;
  box-sizing: border-box;
  border-radius: 0 0 20px 20px;
  /* Градиент сжат к низу: больше фото, меньше «тумана» вверх */
  background: linear-gradient(
    180deg,
    rgba(106, 55, 149, 0) 0%,
    rgba(106, 55, 149, 0) 42%,
    rgba(106, 55, 149, 0.38) 72%,
    rgba(72, 28, 102, 0.9) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.blog-card__name {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.blog-card__desc {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

.blog-card--home-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Страница блога: на карточке только заголовок — полоса ещё ниже */
.page-blog .blog-card__overlay {
  min-height: 18%;
  padding: 12px 22px 16px;
}
.page-blog .blog-card__overlay .blog-card__name {
  margin-bottom: 0;
}

/* ── Страница блога (blog.html): карточки + модальное окно статьи ── */
.page-blog {
  background: #fff;
}
body.blog-modal-open {
  overflow: hidden;
}
.blog-page-main {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 48px var(--pad-x) 80px;
}
.blog-page-intro {
  margin-bottom: 40px;
  max-width: 720px;
}
.blog-page-intro__title {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 40px;
  color: var(--black);
  margin-bottom: 16px;
}
.blog-page-intro__lead {
  font-family: var(--font-b);
  font-size: 18px;
  line-height: 1.55;
  color: var(--dark2);
  margin: 0;
}
.blog-page-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.blog-card--expand {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.blog-card--expand:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}
.blog-page-item__body {
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.65;
  color: var(--dark2);
}
.blog-page-item__body p {
  margin: 0 0 12px;
}
.blog-page-item__body p:last-child {
  margin-bottom: 0;
}

.blog-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--pad-x);
  box-sizing: border-box;
}
.blog-modal[hidden] {
  display: none !important;
}
.blog-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 20, 0.55);
  backdrop-filter: blur(4px);
}
.blog-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: min(85vh, 900px);
  overflow: auto;
  padding: 0;
  margin: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
  -webkit-overflow-scrolling: touch;
}
.blog-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  font-size: 28px;
  line-height: 1;
  color: var(--black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.blog-modal__close:hover {
  background: #fff;
}
.blog-modal__close:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.blog-modal__masthead {
  width: 100%;
}
.blog-modal__title--masthead {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  color: var(--black);
  margin: 0;
  padding: 24px 56px 16px 24px;
  box-sizing: border-box;
}
.blog-modal__cover {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(42vh, 320px);
  object-fit: cover;
}
.blog-modal__cover[hidden] {
  display: none !important;
}
.blog-modal__content {
  padding: 20px 28px 28px;
  box-sizing: border-box;
}
.blog-modal__body {
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.65;
  color: var(--dark2);
}
.blog-modal__body p {
  margin: 0 0 12px;
}
.blog-modal__body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 540px) {
  .blog-modal__dialog {
    max-height: 88vh;
    border-radius: 16px;
  }
  .blog-modal__title--masthead {
    font-size: 22px;
    padding: 22px 52px 14px 20px;
  }
  .blog-modal__content {
    padding: 16px 20px 24px;
  }
}

/* ============================================================
   FAQ  (Figma: 331:637)
   ============================================================ */
.faq {
  background: #fff;
  padding: 80px 0 100px;
}
.faq__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 160px;
  box-sizing: border-box;
}
.faq__title {
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: #000;
  margin: 0 0 64px;
}
.faq__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.faq__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.faq-item {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 25px;
  padding: 20px 28px 24px 77px;
  box-sizing: border-box;
}
.faq-item__icon {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 37px;
  height: 37px;
  background: #A020F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.faq-item__q {
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: #2e2e2e;
  margin: 0 0 14px;
}
.faq-item__a {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.72;
  color: #000;
  margin: 0;
}
@media (max-width: 900px) {
  .faq__inner { padding: 0 20px; }
  .faq__cols { grid-template-columns: 1fr; }
  .faq-item { padding-left: 60px; padding-top: 16px; }
  .faq-item__icon { left: 12px; top: 16px; width: 32px; height: 32px; font-size: 20px; }
}
@media (max-width: 540px) {
  .faq__inner { padding: 0 16px; }
}

/* ============================================================
   PRE-FOOTER CTA (блог, база знаний, страницы программ питания)
   ============================================================ */
.prefooter-cta {
  background: #f7f7f7;
  padding: 56px 0;
}
.prefooter-cta__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  gap: 48px 64px;
}
.prefooter-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 28px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 18px;
  color: var(--black);
  background: #d4ff3b;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s, transform 0.15s;
}
.prefooter-cta__btn:hover {
  opacity: 0.9;
}
.prefooter-cta__copy {
  flex: 1;
  min-width: 0;
}
.prefooter-cta__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.2;
  color: var(--black);
  margin: 0 0 12px;
}
.prefooter-cta__title-accent {
  color: #b39ddb;
  font-weight: 700;
}
.prefooter-cta__sub {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #4a4a4a;
  margin: 0;
  max-width: 42em;
}
@media (max-width: 900px) {
  .prefooter-cta__inner {
    padding-inline: 24px;
  }
}
@media (max-width: 768px) {
  .prefooter-cta {
    padding: 40px 0;
  }
  .prefooter-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .prefooter-cta__btn {
    width: 100%;
    max-width: 320px;
  }
}
@media (max-width: 540px) {
  .prefooter-cta__inner {
    padding-inline: 16px;
  }
  .prefooter-cta__btn {
    font-size: 16px;
    min-height: 52px;
  }
}

/* ============================================================
   FOOTER  (Figma: 331:699  y=12245  h=563  fill=#dcf750)
   ============================================================ */
.footer {
  background: var(--lime);
  padding: 40px 0 0;
}
.footer__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 40px;
}
.footer__logo {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 48px;
  color: var(--black);
  line-height: 1;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
}
.footer__cols--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}
.footer__contacts {
  margin-top: 24px;
  font-family: var(--font-b);
  font-size: 16px;
  color: var(--gray);
  line-height: 1.7;
}
.footer__contact-link {
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.footer__contact-link:hover {
  opacity: .75;
}
.footer__copy-line {
  margin-top: 16px;
  font-family: var(--font-b);
  font-size: 18px;
  color: var(--gray);
}
.footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__col-link {
  font-family: var(--font-b);
  font-size: 18px;
  color: var(--black);
  transition: opacity .2s;
}
.footer__col-link:hover { opacity: .65; }
.footer__bottom-area {
  border-top: 1px solid rgba(0,0,0,.15);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer__btns {
  display: flex;
  gap: 12px;
}
.footer__order-btn {
  background: var(--white);
  color: var(--gray);
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 15px;
  padding: 18px 28px;
  border-radius: var(--r-btn);
  transition: background .2s;
}
.footer__order-btn:hover { background: var(--dark); color: var(--white); }
.footer__tg-btn {
  width: 58px;
  height: 58px;
  background: var(--white);
  border-radius: var(--r-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: background .2s;
}
.footer__tg-btn:hover { background: var(--dark); }
.footer__copy {
  font-family: var(--font-b);
  font-size: 18px;
  color: var(--gray);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  :root { --pad-x: 60px; }
  .banner { min-height: 620px; padding-block: 44px; }
  .banner__glow { transform: translateX(-50%); width: 600px; height: 600px; }
  .banner__title { font-size: 48px; margin-bottom: 32px; }
  .banner__inner { grid-template-columns: 1fr; gap: 32px; justify-content: stretch; }
  .banner__img { max-width: 540px; max-height: 400px; margin-inline: auto; display: block; }
  .banner__panel { display: none; }
  .price-card--forever { grid-template-columns: 1fr; }
  .price-card--forever .price-card__footer { grid-column: 1; }
  /* About: переходим в 1 колонку */
  .about__hero-inner { grid-template-columns: 1fr; }
  .about__hero-img { max-height: 420px; border-radius: 20px; margin-top: 0; }
  .about__zz-track { grid-template-columns: repeat(2, 1fr); }
  .about__zz-step--high,
  .about__zz-step--low { padding-top: 0; padding-bottom: 0; }
  .about__zz-lines { display: none; }
  .about__block-title--right { float: none; }
  .about__block-body--right { text-align: left; }
  .about__block--right .about__block-body { text-align: left; }
  .about__cta-block { text-align: left; }
  .about__cta-text { margin-left: 0; }
  /* Old about section inner (если осталось) */
  .about__section-inner { grid-template-columns: 1fr; }
  .about__how-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --pad-x: 20px; }
  .header__top { height: auto; padding-block: 14px; }
  .header__nav { height: auto; min-height: 45px; padding-block: 10px; }
  .header__nav-inner { gap: 16px 24px; overflow-x: visible; flex-wrap: wrap; justify-content: center; }
  .header__nav-link { font-size: 16px; white-space: nowrap; }
  .banner { min-height: unset; padding-block: 36px; }
  .banner__inner { grid-template-columns: 1fr; text-align: center; justify-content: stretch; }
  .banner__right { display: flex; justify-content: center; }
  .banner__title { font-size: 38px; margin-bottom: 28px; }
  .banner__img { max-height: 320px; }
  .banner__subtitle { font-size: 22px; }
  .programs__grid { grid-template-columns: 1fr; }
  .advantages__top-row { display: flex; flex-direction: column; }
  .header__top-inner { flex-direction: column; align-items: center; gap: 16px; }
  .header__actions { justify-content: center; flex-wrap: nowrap; gap: 12px; width: 100%; max-width: 400px; }
  .header__action-link { font-size: 14px; white-space: nowrap; }
  .header__btn { font-size: 14px; padding: 12px 16px; white-space: nowrap; flex: 1; text-align: center; }
  .about__top { display: flex; flex-direction: column; align-items: center; padding-inline: 20px; height: auto; min-height: unset; padding-bottom: 40px; }
  .about__header { padding: 0; width: 100%; }
  .about__header-text { margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .about__tag { text-align: center; margin-bottom: 12px; }
  .about__title { text-align: center; margin-bottom: 16px; }
  .about__text-card { margin: 0 auto; }
  .about__photo { position: static; width: 100%; height: auto; max-width: 500px; margin-top: 24px; border-radius: 20px; }
  .advantages__grid { grid-template-columns: 1fr; }
  .adv-card--wide { grid-column: span 1; grid-template-columns: 1fr; }
  .cta1__inner {
    flex-direction: column;
    text-align: center;
    min-height: unset;
    padding-block: 40px;
    gap: 28px;
  }
  .cta1__copy {
    order: -1;
  }
  .cta1__actions {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    align-items: stretch;
  }
  .cta1__title {
    font-size: 28px;
  }
  .cta1__lead {
    font-size: 17px;
  }
  .cta1__btn {
    font-size: 20px;
    max-width: none;
    width: 100%;
  }

  .price__grid { grid-template-columns: 1fr; }
  .price-card--forever { grid-template-columns: 1fr; }
  .steps__grid { grid-template-columns: 1fr; }
  .reviews__inner { grid-template-columns: 1fr; }
  .reviews__cards { grid-template-columns: 1fr; }
  .blog__grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
  .faq__cols { grid-template-columns: 1fr; }
  .faq-item { padding-left: 60px; padding-top: 16px; }
  .faq-item__icon { left: 12px; top: 16px; width: 32px; height: 32px; font-size: 20px; }
  .footer__top { flex-direction: column; }
  .footer__cols,
  .footer__cols--two { grid-template-columns: 1fr; gap: 8px; }
  .progress-sec__grid { grid-template-columns: 1fr; }
  /* About 900px */
  .about__how-inner,
  .about__how-title,
  .about__how-sub { padding-inline: 0; }
  .about__zz-track { grid-template-columns: 1fr 1fr; }
  .about__block-title { font-size: 28px; }
  .about__h1 { font-size: 40px; }
  .about__how-title { font-size: 32px; }
}

@media (max-width: 540px) {
  .banner__title { font-size: 30px; }
  .cta1__title { font-size: 24px; }
  .cta1__title-nowrap {
    white-space: normal;
  }
  .cta1__lead { font-size: 16px; }
  .cta1__btn {
    font-size: 17px;
    min-height: 52px;
    padding: 12px 18px;
  }
  .cta2__heading { font-size: 24px; }
  .about__h1 { font-size: 32px; }
  .reviews__quote { font-size: 120px; }
  .price-card--forever .price-card__head { border-radius: var(--r-card) var(--r-card) 0 0; }
  .about__zz-track { grid-template-columns: 1fr; }
  .faq__cols { grid-template-columns: 1fr; }
  .faq-item { padding-left: 60px; padding-top: 16px; }
  .faq-item__icon { left: 12px; top: 16px; width: 32px; height: 32px; font-size: 20px; }
}


/* ════════════════════════════════════════════════════════════════
   ЧАСТЬ 2: TRAINING — страница training.html
   Все конфликтующие классы переименованы с префиксом tr-
   ════════════════════════════════════════════════════════════════ */
/* ================================================================
   MindMuscles — блок стилей страницы «Тренировки»
   Pixel-perfect CSS с CSS-переменными, flex/grid и комментариями.
   ================================================================ */

/* ================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ================================================================ */
:root {
  /* ── Colors ───────────────────────────────────────────────── */
  --c-white:       #FFFFFF;   /* fill_Z7MVW3 */
  --c-black:       #000000;   /* fill_DB26DQ */
  --c-purple:      #BC5FFE;   /* fill_EV7Y8E — основной акцент */
  --c-purple-deep: #A63DF1;   /* fill_XMPBXN */
  --c-lime:        #DCF750;   /* fill_5FSPE3 — лайм / CTA */
  --c-dark:        #1E1E1E;   /* fill_QYI72N — тёмный текст */
  --c-body:        #2E2E2E;   /* fill_ZU28S4 — основной текст */
  --c-muted:       #4A4A4A;   /* fill_V7GNGJ — приглушённый */
  --c-navy:        #1A2C3E;   /* fill_GHUEYH — тёмно-синий */
  --c-gray-bg:     #F7F7F7;   /* fill_WE8I9R — светло-серый фон */
  --c-near-black:  #1A1A1A;   /* fill_414NDH */
  --c-dark-gray:   #323232;   /* fill_CEA6EQ */
  --c-semi-dark:   rgba(74,74,74,0.8);    /* fill_5YXWDI */
  --c-white-70:    rgba(255,255,255,0.7); /* fill_KU34HL */
  --c-white-80:    rgba(255,255,255,0.8); /* fill_3L536P */
  --c-lime-30:     rgba(220,247,80,0.3);  /* fill_RI2AB8 */
  --c-border:      rgba(0,0,0,0.2);       /* stroke_YIFZ9C */

  /* ── Gradients ────────────────────────────────────────────── */
  /* fill_PWLIAG — Banner glow */
  --g-banner-glow: radial-gradient(circle at 100% 50%,
    rgba(220,247,80,1) 0%, rgba(220,247,80,0) 100%);
  /* fill_3GAESL — Prices glow */
  --g-prices-glow: radial-gradient(circle at 100% 100%,
    rgba(220,247,80,1) 0%, rgba(220,247,80,0) 100%);
  /* fill_1H9LSQ — Types BG */
  --g-lime-linear: linear-gradient(-90deg,
    rgba(220,247,80,0.3) 0%, rgba(220,247,80,0) 100%);
  /* fill_F3W5N8 — About lime decor */
  --g-lime-270: linear-gradient(270deg,
    rgba(220,247,80,1) 0%, rgba(220,247,80,0) 100%);
  /* fill_YK9FBL — About corners */
  --g-lime-radial-tr: radial-gradient(circle at 100% 0%,
    rgba(220,247,80,0.6) 0%, rgba(220,247,80,0) 100%);
  /* fill_HRGJEV — Advantage card bg */
  --g-adv-card:
    linear-gradient(180deg, rgba(188,95,254,0) 0%, rgba(188,95,254,1) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
  /* fill_JZRXV6 — Types overlay (woman) */
  --g-overlay-bottom:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%),
    rgba(0,0,0,0.2);
  /* fill_URG2RE — Types overlay (man) */
  --g-overlay-top:
    linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
    rgba(0,0,0,0.2);
  /* fill_QP65AP — Review dark card */
  --g-review-dark:
    linear-gradient(-45deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%),
    #2E2E2E;
  /* fill_KGMK4V — Review light card */
  --g-review-light:
    linear-gradient(-45deg, rgba(220,247,80,1) 0%, rgba(220,247,80,0) 100%),
    #FFFFFF;

  /* ── Effects ──────────────────────────────────────────────── */
  --shadow-purple:  0px 0px 200px 0px rgba(188,95,254,0.4); /* effect_MJW6D5 */
  --shadow-card:    0px 0px 17.7px 0px rgba(0,0,0,0.25);    /* effect_9HLAFG */
  --shadow-card2:  -4px 4px 16.5px 0px rgba(0,0,0,0.25);   /* effect_M3W45N */

  /* ── Borders ──────────────────────────────────────────────── */
  --border-gray:   1px solid rgba(0,0,0,0.2); /* stroke_YIFZ9C */
  --border-purple: 6px solid #BC5FFE;          /* stroke_UREBBT */

  /* ── Typography ───────────────────────────────────────────── */
  --ff-heading: "Exo 2", Arial, sans-serif;
  --ff-body:    "Manrope", Arial, sans-serif;

  /* ── Layout ───────────────────────────────────────────────── */
  --page-width: 1440px;
  --content-l:  160px;  /* left offset for content (from Figma x positions) */
  --content-w:  1120px; /* max content width (160…1280) */
  --gap-cards:  20px;   /* gap between program / price cards (540-160-360=20) */
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-heading);
  background: var(--c-white);
  color: var(--c-dark);
  overflow-x: hidden;
}
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── Section base ─────────────────────────────────────────────
   Все секции: 1440px по центру, относительное позиционирование,
   overflow:hidden для декоративных элементов
─────────────────────────────────────────────────────────────── */
.tr-banner, .tr-advantages, .tr-types, .tr-programs, .tr-steps,
.tr-prices, .about, .tr-reviews, .cta2, .tr-faq {
  position: relative;
  width: var(--page-width);
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}


/* ================================================================
   BANNER — текст слева, фото справа (как в исходном макете)
   ================================================================ */
.tr-banner {
  height: 974px;
  background: var(--c-white);
}

.tr-banner__glow {
  position: absolute;
  left: 468px;
  top: 0;
  width: 974px;
  height: 974px;
  background: var(--g-banner-glow);
  pointer-events: none;
  z-index: 0;
}

.tr-banner__text {
  position: absolute;
  left: 146px;
  top: 50px;
  width: 1005px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.tr-banner__title {
  width: auto;
  max-width: 700px;
  margin: 0;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 70px;
  line-height: 1.2em;
  color: var(--c-dark);
  padding-left: 14px;
}

/* Как на странице питания: связный абзац, колонка 620px */
.tr-banner__subtitle {
  width: auto;
  max-width: 600px;
  margin: 0;
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.45;
  color: #2e2e2e;
  padding-left: 14px;
}

.tr-banner__woman {
  position: absolute;
  left: 526px;
  top: 109px;
  width: 865px;
  height: 865px;
  object-fit: cover;
  z-index: 1;
}

.tr-banner__btn {
  position: relative;
  margin-top: 30px;
  margin-left: 14px;
  width: 354px;
  height: 100px;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  font-size: 30px;
  border: none;
  cursor: pointer;
  background: var(--c-purple);
  border-radius: 25px;
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.2em;
  color: var(--c-white);
  box-shadow: var(--shadow-purple);
  z-index: 2;
  transition: opacity .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  align-self: flex-start;
}
.tr-banner__btn:hover { opacity: .88; }


/* ================================================================
   УРОВЕНЬ 1: ADVANTAGES — layout_NVXA9W: 1440 × 913
   ================================================================ */
.tr-advantages {
  height: 913px;
  background: var(--c-white);
}

/* ── УРОВЕНЬ 2: Top row — 3 cards at top:18
   Абсолютное позиционирование (разная высота карточек) ──────── */
.tr-advantages__top-row {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
}

/* ── УРОВЕНЬ 3: Base card ─────────────────────────────────────── */
.tr-adv-card {
  position: absolute;
  width: 357px;
  border-radius: 25px;
  overflow: hidden;
  /* fill_HRGJEV */
  background: var(--g-adv-card);
}
.tr-adv-card--1 { left: 160px; top: 18px; height: 487px; }
.tr-adv-card--2 { left: 544px; top: 18px; height: 470px; }
.tr-adv-card--3 { left: 923px; top: 18px; height: 544px; }

/* ── УРОВЕНЬ 3: Wide card — layout_98RSSY: left:160 top:427 w:1120 h:458 ── */
.tr-adv-card--wide {
  position: absolute;
  left: 160px; top: 427px;
  width: 1120px; height: 458px;
}

/* ── УРОВЕНЬ 4: Card content wrapper ── */
.tr-adv-card__inner {
  position: relative; z-index: 1;
  padding: 27px 27px 0;
}
.tr-adv-card__inner--wide { padding: 27px 0 0 106px; }

/* ── УРОВЕНЬ 4: Card title
   style_M4U00Y: Exo2 700 24px lh:1.2 center #2E2E2E ────────── */
.tr-adv-card__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2em;
  color: var(--c-body);
  text-align: center;
  margin-bottom: 10px;
}
.tr-adv-card__title--wide { text-align: left; }

/* ── УРОВЕНЬ 4: Card text
   style_JFEVXG: Manrope 500 15px lh:1.366 center #2E2E2E ───── */
.tr-adv-card__text {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.366em;
  color: var(--c-body);
  text-align: center;
}
.tr-adv-card__text--wide { text-align: left; }

/* ── УРОВЕНЬ 4: Card images (absolutely positioned within card) ── */
.tr-adv-card__img {
  position: absolute; z-index: 0;
  object-fit: contain;
}
/* layout_YX8YKP: w:185 h:185 at left:87 top:302 */
.tr-adv-card--1  .tr-adv-card__img { width: 185px; height: 185px; left: 87px;  top: 302px; }
/* layout_SF14UG: w:222 h:222 at left:65 top:248 */
.tr-adv-card__img--2              { width: 222px; height: 222px; left: 65px;  top: 248px; }
/* layout_B680EH: w:298 h:298 at left:27 top:246 */
.tr-adv-card__img--3              { width: 298px; height: 298px; left: 27px;  top: 246px; }
/* layout_OO72CJ: w:261 h:261 at left:426 top:197 */
.tr-adv-card__img--wide           { width: 261px; height: 261px; left: 426px; top: 197px; }


/* ================================================================
   УРОВЕНЬ 1: TYPES — layout_VSQ0MO: 1440 × 620
   ================================================================ */
.tr-types {
  height: 620px;
  background: var(--c-white);
}

/* ── УРОВЕНЬ 3: BG glow circles — fill_1H9LSQ ── */
.tr-types__bg {
  position: absolute; top: 0;
  width: 621px; height: 621px;
  pointer-events: none; z-index: 0;
}
/* layout_HPMMSE: left:0 top:-1 */
.tr-types__bg--left  { left: 0; top: -1px; background: var(--g-lime-linear); }
/* layout_57NEO5: left:819 top:0 */
.tr-types__bg--right { left: 819px; background: var(--g-lime-linear); }

/* ── УРОВЕНЬ 2: Toggle — layout_74KEEG: left:457 top:30 w:525 h:40
   bg:#000 | br:60px ──────────────────────────────────────────── */
.tr-types__toggle {
  position: absolute; left: 457px; top: 30px;
  width: 525px; height: 40px;
  background: var(--c-black);
  border-radius: 60px;
  z-index: 2;
}

/* ── УРОВЕНЬ 3: Active knob — left:0 + translate; «Дома» = 264px вправо ── */
.tr-types__knob {
  position: absolute; left: 0; top: 0;
  width: 261px; height: 40px;
  background: var(--c-purple);
  border-radius: 50px;
  z-index: 0;
  transform: translateX(264px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tr-types--gym .tr-types__knob {
  transform: translateX(0);
}

/* ── УРОВЕНЬ 3: Toggle labels — style_URJ2XO: Exo2 600 24px white ── */
.tr-types__label {
  position: absolute; top: 8px;
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2em;
  color: var(--c-white);
  z-index: 1;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.tr-types__label:focus-visible {
  outline: 2px solid var(--c-lime);
  outline-offset: 2px;
  border-radius: 4px;
}
/* layout_6M2Z7M: left:98 top:5 w:74 h:24 */
.tr-types__label--left  { left: 98px; }
/* layout_Q8KUVF: left:362 top:5 w:65 h:24 */
.tr-types__label--right { left: 362px; }

/* ── УРОВЕНЬ 2: Cards row — centered between x:334 and x:1106 ── */
.tr-types__cards {
  position: absolute; left: 334px; top: 136px;
  display: flex; gap: 50px;
  z-index: 1;
}

/* ── УРОВЕНЬ 3: Card — layout_OIT19F/Q0R3VP: 361×429 ─────────── */
.tr-types__card {
  position: relative;
  width: 361px; height: 429px;
  border-radius: 25px;
  overflow: hidden;
  flex-shrink: 0;
}

/* layout_434Q74: img 361×361 */
.tr-types__card-img {
  width: 361px; height: 361px;
  object-fit: cover; display: block;
}

/* ── УРОВЕНЬ 4: Overlay — layout_ECK15Y: left:0 top:200 w:361 h:229
   br:25px ──────────────────────────────────────────────────── */
.tr-types__overlay {
  position: absolute; left: 0; top: 200px;
  width: 361px; height: 229px;
  border-radius: 25px;
  /* fill_JZRXV6 */
  background: var(--g-overlay-bottom);
}
/* fill_URG2RE */
.tr-types__overlay--man {
  background: var(--g-overlay-top);
}

/* ── УРОВЕНЬ 4: Card title — layout_3FYOHO: left:63 top:15 w:235 h:48
   style_7SNJMO: Exo2 700 20px lh:1.2 center white ─────────── */
.tr-types__card-title {
  position: absolute; left: 63px; top: 15px; width: 235px;
  font-family: var(--ff-heading);
  font-weight: 700; font-size: 20px; line-height: 1.2em;
  color: var(--c-white); text-align: center;
}

/* ── УРОВЕНЬ 4: Card text — layout_084L54: left:34 top:69 w:293 h:140
   style_H2E4HA: Manrope 600 15px lh:1.366 center white ──────── */
.tr-types__card-text {
  position: absolute; left: 34px; top: 69px; width: 293px;
  font-family: var(--ff-body);
  font-weight: 600; font-size: 15px; line-height: 1.366em;
  color: var(--c-white); text-align: center;
}


/* ================================================================
   УРОВЕНЬ 1: PROGRAMS — layout_G7Q1KC: 1440 × 662
   ================================================================ */
.tr-programs {
  height: 662px;
  background: var(--c-white);
}

/* ── УРОВЕНЬ 2: Title — layout_OJDM75: left:160 top:33 w:925 h:58
   style_AX2QE9: Exo2 700 48px lh:1.2 center #000 ────────────── */
.tr-programs__title {
  position: absolute;
  left: 0; right: 0; top: 33px; width: 100%;
  margin: 0 auto;
  font-family: var(--ff-heading);
  font-weight: 700; font-size: 48px; line-height: 1.2em;
  color: var(--c-black); text-align: center;
}

/* ── УРОВЕНЬ 2: Grid — 3 columns × 2 rows
   left:160, top:128; gap:20px horizontal; row gap:128px (385-128-237=20) ── */
.tr-programs__grid {
  position: absolute;
  left: 160px; top: 128px;
  display: grid;
  grid-template-columns: repeat(3, 360px);
  grid-template-rows: 237px 237px;
  gap: 20px;
}

/* ── УРОВЕНЬ 3: Card — 360×237 ──────────────────────────────── */
.tr-prog-card {
  position: relative;
  width: 360px; height: 237px;
  overflow: hidden;
}

/* Border-radius corners: Figma design shows rounded outer corners */
.tr-prog-card--tl { border-radius: 40px 0 0 0; }
.tr-prog-card--tr { border-radius: 0 40px 0 0; }
.tr-prog-card--bl { border-radius: 0 0 0 40px; }
.tr-prog-card--br { border-radius: 0 0 0 0; }
/* Центральная колонка: полностью прямоугольные карточки (без скруглений слева и справа) */
.tr-prog-card--mid-top,
.tr-prog-card--mid-bottom {
  border-radius: 0;
}
.tr-prog-card--mid-top .tr-prog-card__img,
.tr-prog-card--mid-bottom .tr-prog-card__img {
  border-radius: 0;
}
.tr-prog-card--mid-top .tr-prog-card__label,
.tr-prog-card--mid-bottom .tr-prog-card__label {
  border-radius: 0;
  padding-left: 40px;
}

/* ── УРОВЕНЬ 4: Image — layout_E6QE93: 360×187 ────────────────── */
.tr-prog-card__img {
  width: 360px; height: 187px;
  object-fit: cover; display: block;
}

/* ── УРОВЕНЬ 4: Label — layout_WRIHNB: 360×50 at top:187
   fill_EV7Y8E | br: 0 0 0 300px (left) ──────────────────────── */
.tr-prog-card__label {
  position: absolute; left: 0; top: 187px;
  width: 360px; height: 50px;
  background: var(--c-purple);
  border-radius: 0 0 0 300px;
  display: flex; align-items: center;
  padding-left: 40px;
}
/* Right variant: br 0 0 100px 0 */
.tr-prog-card__label--right {
  border-radius: 0 0 100px 0;
  padding-left: 20px;
}

/* style_XH6RF7: Exo2 600 24px white */
.tr-prog-card__label span {
  font-family: var(--ff-heading);
  font-weight: 600; font-size: 24px; line-height: 1.2em;
  color: var(--c-white);
}


/* ================================================================
   УРОВЕНЬ 1: STEPS — layout_PV8IW1: 1440 × 436
   ================================================================ */
.tr-steps {
  height: 436px;
  background: var(--c-white);
}

/* ── УРОВЕНЬ 2: Title — layout_V565RP: left:160 top:40 w:874 h:58
   style_Y6CD4D: Exo2 700 48px #000 ──────────────────────────── */
.tr-steps__title {
  position: absolute;
  left: 160px; top: 40px; width: 874px;
  font-family: var(--ff-heading);
  font-weight: 700; font-size: 48px; line-height: 1.2em;
  color: var(--c-black);
}

/* ── УРОВЕНЬ 2: Row — layout_LSIIIK: left:160 top:138 w:1120 h:215
   3 шага в ряд + лаймовый градиент фон ──────────────────────── */
.tr-steps__row {
  position: absolute;
  left: 160px; top: 138px;
  width: 1120px; height: 215px;
  display: flex; gap: 28px;
  align-items: flex-start;
  background: linear-gradient(225deg, rgba(220,247,80,.8) 0%, rgba(220,247,80,0) 55%);
  border-radius: 40px;
  box-sizing: border-box;
}

/* ── УРОВЕНЬ 3: Step — layout_FK1RAT: w:341 h:155 (step1/2), w:310 (step3) ── */
.step {
  position: relative;
  flex: 0 0 341px;
  height: 155px;
}
.step:last-child { flex-basis: 310px; }

/* Разделители между шагами */
.tr-steps__row .step + .step::before {
  content: '';
  position: absolute;
  left: -14px;   /* середина gap=28px */
  top: 0;
  width: 1px;
  height: 155px;
  background: #4a4a4a;
}

/* ── УРОВЕНЬ 4: Badge (circle + word) ───────────────────────── */
.step__badge {
  position: absolute; left: 0; top: 30px;
  display: flex; align-items: center;
  gap: 20px;
}

/* layout_72OU4R: w:73 h:73 | var(--border-purple) | br:100% */
.step__circle {
  width: 73px; height: 73px;
  border-radius: 50%;
  border: var(--border-purple);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* style_Y6CD4D: Exo2 700 48px fill_EV7Y8E */
.step__num {
  font-family: var(--ff-heading);
  font-weight: 700; font-size: 48px; line-height: 1em;
  color: var(--c-purple);
}

/* layout_VPGQHI: w:81 h:48 — style_KLBZHC: Exo2 700 40px fill_EV7Y8E */
.step__word {
  font-family: var(--ff-heading);
  font-weight: 700; font-size: 40px; line-height: 1.2em;
  color: var(--c-purple);
}

/* layout_Y8BWQB: left:10 top:89 w:331 h:66
   style_I3NHUL: Manrope 700 24px lh:1.366 #000 */
.step__text {
  position: absolute; left: 10px; top: 119px; width: 331px;
  font-family: var(--ff-body);
  font-weight: 700; font-size: 24px; line-height: 1.366em;
  color: var(--c-black);
}


/* ================================================================
   УРОВЕНЬ 1: PRICES — layout_XHCRMJ: 1440 × 1119
   ================================================================ */
.tr-prices {
  height: 1119px;
  background: var(--c-white);
}

/* ── УРОВЕНЬ 3: Radial glow — layout_8XOQ41: left:703 top:382 w:737 h:737
   fill_3GAESL ──────────────────────────────────────────────── */
.tr-prices__glow {
  position: absolute;
  left: 703px; top: 382px;
  width: 737px; height: 737px;
  background: var(--g-prices-glow);
  pointer-events: none; z-index: 0;
}

/* ── УРОВЕНЬ 2: Title — layout_XDCFRF: left:160 top:40 w:364 h:58
   style_Y6CD4D: Exo2 700 48px #000 ──────────────────────────── */
.tr-prices__title {
  position: absolute;
  left: 160px; top: 40px; width: 364px;
  font-family: var(--ff-heading);
  font-weight: 700; font-size: 48px; line-height: 1.2em;
  color: var(--c-black); z-index: 1;
}

/* ── УРОВЕНЬ 2: Top row — 3 cards at top:118
   layout_PXP2YN:left:160 | layout_J2XWA0:left:540 | layout_8WHO76:left:920 ── */
.tr-prices__top-row {
  position: absolute;
  left: 160px; top: 118px;
  display: flex; gap: var(--gap-cards);
  z-index: 1;
}

/* ── УРОВЕНЬ 2: Featured row — left:159 top:597 ── */
.tr-prices__featured {
  position: absolute;
  left: 159px; top: 597px;
  display: flex; gap: 67px;
  z-index: 1;
  align-items: flex-start;
}

/* ── УРОВЕНЬ 3: Price card base — 360×459 ────────────────────── */
.tr-price-card {
  position: relative;
  width: 360px;
  height: auto;          /* убрали фикс. высоту — карточка растёт под контент */
  flex-shrink: 0;
}

/* ── УРОВЕНЬ 4: Card body — layout_BLBEE5: 360×340 br:22px ────── */
.tr-price-card__body {
  width: 360px;
  height: auto;          /* без фикс. высоты — badge не обрезается */
  border-radius: 22px;
  border: var(--border-gray);
  background: var(--c-white);
  overflow: hidden;
}

/* ── УРОВЕНЬ 4: Head bg — fill_WE8I9R #F7F7F7 | br:17px 17px 0 0 ── */
.tr-price-card__head {
  height: 94px;
  background: var(--c-gray-bg);
  border-radius: 17px 17px 0 0;
  display: flex; align-items: center; justify-content: center;
}

/* style_FBA7GM: Exo2 600 48px lh:1.2 #4A4A4A */
.tr-price-card__plan {
  font-family: var(--ff-heading);
  font-weight: 600; font-size: 48px; line-height: 1.2em;
  color: var(--c-muted);
}

/* ── УРОВЕНЬ 4: Pricing area ─────────────────────────────────── */
.tr-price-card__pricing {
  height: auto;          /* убрали фикс. высоту */
  display: flex; flex-direction: column;
  align-items: flex-start;
  padding: 16px 20px 20px;
  gap: 8px;
}

/* style_QQK6X1: Exo2 700 96px lh:1.2 fill_EV7Y8E */
.tr-price-card__price {
  font-family: var(--ff-heading);
  font-weight: 700; font-size: 96px; line-height: 1em;
  color: var(--c-purple);
  display: block;
}

/* fill_5R86MH rgba(217,217,217,0.2) | br:30px
   style_KLBZHC: Exo2 700 40px lh:1.2 #4A4A4A */
.tr-price-card__badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 14px; border-radius: 30px;
  background: rgba(217,217,217,0.2);
  font-family: var(--ff-heading);
  font-weight: 700; font-size: 40px; line-height: 1.2em;
  color: var(--c-muted);
}

/* style_F9CWLN: Exo2 500 48px lh:1.2 #4A4A4A */
.tr-price-card__old {
  font-family: var(--ff-heading);
  font-weight: 500; font-size: 48px; line-height: 1em;
  color: var(--c-muted);
  text-decoration: line-through;    /* зачёркивание на самом элементе */
}
.tr-price-card__old s { text-decoration: line-through; }

/* ── УРОВЕНЬ 4: CTA Button — layout_N90TRH: 360×100 br:25px
   style_58FH0S: Exo2 600 35px lh:1.2 #2E2E2E ───────────────── */
.tr-price-card__btn {
  display: block;
  width: 360px; height: 100px; margin-top: 19px;
  border-radius: 25px;
  font-family: var(--ff-heading);
  font-weight: 600; font-size: 35px; line-height: 1.2em;
  color: var(--c-body);
  border: var(--border-gray);
  background: transparent;
  transition: opacity .2s;
  cursor: pointer;
}
.tr-price-card__btn:hover { opacity: .85; }

/* ── Featured card overrides — layout_UZ3HTZ: 504×437 ────────── */
.tr-price-card--featured { width: 504px; height: auto; }

/* fill_EV7Y8E purple bg | br:22px */
.tr-price-card__body--feat {
  width: 504px; height: auto;
  border: none;
  background: var(--c-purple);
}

/* fill_Z7MVW3 white | br:17px */
.tr-price-card__head--feat {
  background: rgba(255,255,255,0.95);
}

/* white price */
.tr-price-card__price--feat { color: var(--c-white); }

/* fill_3L536P rgba(255,255,255,0.8) badge */
.tr-price-card__badge--feat {
  background: rgba(255,255,255,0.8);
  color: var(--c-muted);
}

/* fill_CEA6EQ #323232 */
.tr-price-card__old--feat { color: var(--c-dark-gray); }

/* fill_5FSPE3 lime button — layout_93I5CK: w:504 h:99
   style_Y6CD4D: Exo2 700 48px #2E2E2E */
.tr-price-card__btn--lime {
  width: 504px; height: 99px; margin-top: 0;
  background: var(--c-lime); border: none;
  font-size: 48px; font-weight: 700; color: var(--c-body);
}

/* ── Featured texts ─────────────────────────────────────────── */
.tr-prices__featured-text {
  display: flex; flex-direction: column; gap: 24px;
  padding-top: 20px; max-width: 550px;
}

/* layout_JLO8JN: w:550 h:147 — style_U30G31: Manrope 800 36px lh:1.366 #000 */
.tr-prices__sub1 {
  font-family: var(--ff-body);
  font-weight: 800; font-size: 36px; line-height: 1.366em;
  color: var(--c-black);
}

/* layout_QZDGTL: w:550 h:98 — style_YUE7RE: Manrope 500 36px lh:1.366 #4A4A4A */
.tr-prices__sub2 {
  font-family: var(--ff-body);
  font-weight: 500; font-size: 36px; line-height: 1.366em;
  color: #4a4a4a;
}


/* ================================================================
   УРОВЕНЬ 1: ABOUT — layout_VDNTRP: 1440 × 1204
   ================================================================ */
/* ── ЕДИНЫЙ БЛОК ABOUT (для всех страниц) ─────────────────────── */
.about {
  position: relative;
  background: var(--c-white);
  overflow: hidden;
}

/* Обёртка белой части */
.about__top {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 783px;
  overflow: hidden;
  padding-bottom: 60px;
}

/* Декоративные лаймовые уголки */
.about__decor {
  position: absolute;
  width: 672px; height: 672px;
  pointer-events: none; z-index: 0;
}
.about__decor--tl {
  left: 0; top: 0;
  background: var(--g-lime-radial-tr);
}
.about__decor--br {
  right: 0; bottom: 0;
  background: var(--g-lime-radial-tr);
  transform: rotate(180deg);
}

/* Хедер: нормальный поток; Title в Figma 387:131 — ширина 1120px над фото */
.about__header {
  padding: 21px 160px 0 160px;
  position: relative;
  z-index: 2;
}

.about__header-text {
  max-width: 1120px;
}

/* style_UEAYBA: Exo2 400 36px center #2E2E2E */
.about__tag {
  font-family: var(--ff-heading);
  font-weight: 400; font-size: 36px; line-height: 1.2em;
  color: #2e2e2e; text-align: left;
  margin-bottom: 16px;
}

/* style_VDQ38M: Exo2 600 64px #1A1A1A */
.about__title {
  font-family: var(--ff-heading);
  font-weight: 600; font-size: 64px; line-height: 1.2em;
  color: var(--c-near-black);
  margin-bottom: 16px;
}
.about__lime {
  color: #1a1a1a;
}

/* style_DVNY96: Manrope 500 27px #4A4A4A; в Figma ширина ~879px */
.about__subtitle {
  font-family: var(--ff-body);
  font-weight: 500; font-size: 27px; line-height: 1.366em;
  color: var(--c-muted);
  max-width: 879px;
}

/* Фото: абсолютное, точные координаты из Figma */
.about__photo {
  position: absolute;
  right: 0; top: 142px;
  width: 610px; height: 641px;
  object-fit: cover; border-radius: 20px; z-index: 1;
}

/* Текстовая карточка: нормальный поток под заголовком */
.about__text-card {
  position: relative;
  margin: 24px 0 0 0;
  max-width: 600px;
  background: rgba(0,0,0,0.03);
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 20px 38px 24px;
  z-index: 2;
}

/* style_URJ2XO: Exo2 600 24px lh:1.2 rgba(74,74,74,0.8) */
.about__text-body {
  font-family: var(--ff-heading);
  font-weight: 600; font-size: 24px; line-height: 1.2em;
  color: rgba(74, 74, 74, 0.8);
}


/* ================================================================
   УРОВЕНЬ 1: REVIEWS — layout_KT1CKN: 1440 × 524
   ================================================================ */
.tr-reviews {
  height: 524px;
  background: var(--c-white);
}

/* ── УРОВЕНЬ 2: Aside — layout_CZ96IV: left:160 top:0 w:265 h:314 ── */
.tr-reviews__aside {
  position: absolute;
  left: 160px; top: 0; width: 265px; height: 314px;
  z-index: 1;
}

/* layout_IIPWKU: w:186 h:58 — style_Y6CD4D: Exo2 700 48px #000 */
.tr-reviews__heading {
  position: absolute; left: 0; top: 0;
  font-family: var(--ff-heading);
  font-weight: 700; font-size: 48px; line-height: 1.2em;
  color: var(--c-black);
}

/* layout_J4AUZD: left:0 top:54 w:53 h:154
   style_FDQP46: Exo2 800 128px lh:1.2 fill_RI2AB8 */
.tr-reviews__quote {
  position: absolute; left: 0; top: 54px;
  font-family: var(--ff-heading);
  font-weight: 800; font-size: 128px; line-height: 1em;
  color: var(--c-lime-30);
}

/* layout_4BUHTT: left:0 top:182 w:265 h:132
   style_DUGZ3T: Manrope 400 32px lh:1.366 #000 */
.tr-reviews__sub {
  position: absolute; left: 0; top: 182px; width: 265px;
  font-family: var(--ff-body);
  font-weight: 400; font-size: 32px; line-height: 1.366em;
  color: var(--c-black);
}

/* ── УРОВЕНЬ 2: Cards row — layout_V1EB0D: left:445 top:58 w:1274 h:397 ── */
.tr-reviews__row {
  position: absolute;
  left: 445px; top: 58px;
  display: flex; gap: 50px;
  height: 397px; width: 995px;
}

/* ── УРОВЕНЬ 3: Review card base ────────────────────────────── */
.tr-review-card {
  position: relative;
  flex: 0 0 378px;
  height: 397px;
  border-radius: 25px;
  overflow: hidden;
}
/* Review 3 wider: layout_QN1WQS: 418×397 */
.tr-review-card--wide { flex-basis: 418px; }

/* fill_QP65AP: gradient + #2E2E2E */
.tr-review-card--dark {
  background: var(--g-review-dark);
}

/* fill_KGMK4V: gradient lime + white | border */
.tr-review-card--light {
  background: var(--g-review-light);
  border: var(--border-gray);
}

/* layout_2QINXD: left:26 top:7 w:326 h:112
   style_O4TIKZ: Exo2 600 20px lh:1.2 center white */
.tr-review-card__title {
  position: absolute;
  left: 26px; top: 7px; width: 326px;
  font-family: var(--ff-heading);
  font-weight: 600; font-size: 20px; line-height: 1.2em;
  color: var(--c-white); text-align: center;
}
.tr-review-card__title--dark { color: var(--c-black); }

/* layout_I6HMB6: left:20 top:101 w:338 h:221
   style_6CK19I: Manrope 600 12px lh:1.366 rgba(255,255,255,0.8) */
.tr-review-card__text {
  position: absolute;
  left: 20px; top: 101px; width: 338px; height: 221px;
  font-family: var(--ff-body);
  font-weight: 600; font-size: 12px; line-height: 1.366em;
  color: rgba(255,255,255,0.8);
  overflow: hidden;
}
.tr-review-card__text--dark { color: var(--c-muted); }

/* layout_89HTFG: left:70 top:365 w:237 h:19
   style_V8ELFX: Exo2 600 16px lh:1.2 white */
.tr-review-card__name {
  position: absolute;
  left: 70px; top: 365px;
  font-family: var(--ff-heading);
  font-weight: 600; font-size: 16px; line-height: 1.2em;
  color: var(--c-white); white-space: nowrap;
}
.tr-review-card__name--dark { color: var(--c-dark-gray); }


/* ================================================================
   УРОВЕНЬ 1: FAQ — layout_8GM077 (высота по контенту, без «пустого хвоста»)
   ================================================================ */
.tr-faq {
  height: auto;
  padding-inline: var(--pad-x);
  padding-bottom: 40px;
  background: var(--c-white);
}

/* ── УРОВЕНЬ 2: Title — layout_HUEMM8: Exo2 600 40px #000 ───── */
.tr-faq__title {
  position: static;
  width: 100%;
  max-width: 644px;
  margin-bottom: 40px;
  font-family: var(--ff-heading);
  font-weight: 600; font-size: 40px; line-height: 1.2em;
  color: var(--c-black);
}

/* ── УРОВЕНЬ 2: Grid — 2 columns, gap как в макете ───────────── */
.tr-faq__grid {
  position: static;
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 57px 38px;
}

/* ── УРОВЕНЬ 3: FAQ item — br:25px | border rgba(0,0,0,0.2) ── */
.tr-faq-item {
  position: relative;
  background: var(--c-white);
  border-radius: 25px;
  border: var(--border-gray);
  /* Q1/Q2: h:312 | Q3–Q8: h:236 */
  min-height: 236px;
  padding: 20px 20px 20px 77px;
}
/* First two items (Q1, Q2) are taller */
.tr-faq-item:nth-child(-n+2) { min-height: 312px; }

/* ── УРОВЕНЬ 4: + Icon — layout_A63YGP: left:20 top:20 w:37 h:37
   fill_EV7Y8E | br:50% ─────────────────────────────────────── */
.tr-faq-item__icon {
  position: absolute; left: 20px; top: 20px;
  width: 37px; height: 37px;
  background: var(--c-purple); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-heading); font-weight: 700; font-size: 24px;
  color: var(--c-white); cursor: pointer;
  line-height: 1;
}

/* ── УРОВЕНЬ 4: Question — layout_KKT18C: left:77 top:20 w:444 h:83
   style_OBU9SD: Exo2 600 20px lh:1.2 #2E2E2E ─────────────── */
.tr-faq-item__q {
  font-family: var(--ff-heading);
  font-weight: 600; font-size: 20px; line-height: 1.2em;
  color: var(--c-body);
  margin-bottom: 12px;
}

/* ── УРОВЕНЬ 4: Answer — layout_BDG14B: left:77 top:103 w:437
   style_3NJLNW: Manrope 400 14px lh:1.366 #000 ──────────────── */
.tr-faq-item__a {
  font-family: var(--ff-body);
  font-weight: 400; font-size: 14px; line-height: 1.366em;
  color: var(--c-black);
}


/* ================================================================
   RESPONSIVE — Tablet ≤ 1460px (edge clipping fix)
   ================================================================ */
@media (max-width: 1460px) {
  .tr-banner, .tr-advantages, .tr-types, .tr-programs, .tr-steps,
  .tr-prices, .about, .tr-reviews, .cta2, .tr-faq {
    width: 100%;
  }
}

/* ================================================================
   RESPONSIVE — Mobile ≤ 900px (fluid layout)
   ================================================================ */
@media (max-width: 900px) {
  :root {
    --content-l: 16px;
    --content-w: calc(100% - 32px);
  }

  /* All sections: auto height, scroll flow */
  .tr-banner, .tr-advantages, .tr-types, .tr-programs, .tr-steps,
  .tr-prices, .about, .tr-reviews, .cta2, .tr-faq {
    height: auto !important;
    overflow: visible;
    padding: 40px 16px;
  }

  /* ── BANNER ──────────────────────────────────── */
  .tr-banner__glow { display: none; }
  .tr-banner__woman {
    position: static; display: block;
    width: 100%; height: 280px; object-fit: cover;
    object-position: top center; border-radius: 16px;
    margin-bottom: 24px;
  }
  .tr-banner__text {
    position: static;
    width: 100%;
    height: auto;
    max-width: none;
    left: auto;
    right: auto;
    top: auto;
    margin-bottom: 0;
    display: block;
  }
  .tr-banner__title {
    position: static;
    width: 100%;
    font-size: 32px;
    margin: 0 0 20px;
    left: auto;
    top: auto;
    text-align: center;
    padding-left: 0;
  }
  .tr-banner__subtitle {
    position: static;
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 24px;
    left: auto;
    top: auto;
    text-align: center;
    padding-left: 0;
  }
  .tr-banner__btn {
    position: static;
    width: 100%;
    height: 64px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-left: 0;
    left: auto;
    top: auto;
    align-self: stretch;
  }

  /* ── ADVANTAGES ──────────────────────────────── */
  .tr-advantages__top-row { position: static; }
  .tr-adv-card, .tr-adv-card--1, .tr-adv-card--2, .tr-adv-card--3 {
    position: static !important;
    width: 100% !important; height: auto !important;
    min-height: 220px;
    margin-bottom: 16px;
    padding-bottom: 20px;
  }
  .tr-adv-card--wide { position: static !important; width: 100% !important; height: auto !important; }
  .tr-adv-card__inner { position: static; padding: 20px 16px 0; }
  .tr-adv-card__inner--wide { padding: 20px 16px 0; }
  .tr-adv-card__img {
    position: static !important;
    width: 80px !important; height: 80px !important;
    margin: 12px auto 0;
  }
  .tr-adv-card__title { font-size: 18px; }
  .tr-adv-card__text { font-size: 13px; }

  /* ── TYPES ───────────────────────────────────── */
  .tr-types__bg { display: none; }
  .tr-types__toggle { display: none; }
  .tr-types__cards {
    position: static; flex-direction: column;
    align-items: center; gap: 16px;
  }
  .tr-types__card { position: static; width: 100% !important; height: auto; }
  .tr-types__card-img { width: 100% !important; height: 240px; }
  .tr-types__overlay { position: static; width: 100%; height: auto; padding: 16px; border-radius: 0 0 16px 16px; top: auto; }
  .tr-types__card-title, .tr-types__card-text { position: static; width: 100%; }
  .tr-types__card-title { font-size: 18px; margin-bottom: 8px; }
  .tr-types__card-text { font-size: 13px; }

  /* ── PROGRAMS ────────────────────────────────── */
  .tr-programs__title { position: static; width: 100%; font-size: 24px; text-align: center; margin-bottom: 20px; }
  .tr-programs__grid {
    position: static;
    display: flex; flex-direction: column;
    gap: 12px; width: 100%;
  }
  .tr-prog-card, .tr-prog-card--tl, .tr-prog-card--tr, .tr-prog-card--br, .tr-prog-card--mid-top, .tr-prog-card--mid-bottom {
    width: 100% !important; height: auto; border-radius: 0;
  }
  .tr-prog-card__img { width: 100% !important; height: 160px; border-radius: 0 !important; }
  .tr-prog-card__label, .tr-prog-card__label--right {
    position: static; width: 100%; border-radius: 0;
    padding-left: 16px;
  }
  .tr-prog-card__label span { font-size: 16px; }

  /* ── STEPS ───────────────────────────────────── */
  .tr-steps__title { position: static; font-size: 24px; width: 100%; margin-bottom: 24px; }
  .tr-steps__row {
    position: static; flex-direction: column;
    width: 100%; height: auto; gap: 40px;
  }
  .step { flex-basis: auto; height: auto; }
  .step__badge { position: static; margin-bottom: 12px; }
  .step__num { font-size: 36px; }
  .step__word { font-size: 30px; }
  .step__text { position: static; width: 100% !important; font-size: 18px; }

  /* ── PRICES ──────────────────────────────────── */
  .tr-prices__glow { display: none; }
  .tr-prices__title { position: static; font-size: 28px; width: 100%; margin-bottom: 24px; }
  .tr-prices__top-row {
    position: static; flex-direction: column;
    align-items: center; width: 100%;
  }
  .tr-price-card { position: static; width: 100% !important; height: auto !important; margin-bottom: 20px; }
  .tr-price-card__body { width: 100% !important; height: auto; }
  .tr-price-card__head { height: 70px; }
  .tr-price-card__plan { font-size: 32px; }
  .tr-price-card__pricing { height: auto; }
  .tr-price-card__price { font-size: 64px; }
  .tr-price-card__badge { font-size: 28px; }
  .tr-price-card__old { font-size: 32px; }
  .tr-price-card__btn { width: 100% !important; font-size: 22px; height: 64px; margin-top: 12px; display: block; }
  .tr-prices__featured { position: static; flex-direction: column; width: 100%; gap: 20px; }
  .tr-price-card--featured { width: 100% !important; height: auto !important; }
  .tr-price-card__body--feat { width: 100% !important; height: auto; }
  .tr-price-card__btn--lime { width: 100% !important; font-size: 28px; height: 70px; }
  .tr-prices__featured-text { max-width: 100%; padding-top: 0; }
  .tr-prices__sub1, .tr-prices__sub2 { font-size: 22px; }

  /* ── ABOUT ───────────────────────────────────── */
  .about__decor { display: none; }
  .about__photo {
    position: static; width: 100%; height: 240px;
    margin-bottom: 20px; left: auto; top: auto;
  }
  .about__header { position: static; width: 100%; }
  .about__header-text { width: 100%; }
  .about__tag { font-size: 24px; }
  .about__title { font-size: 30px; }
  .about__subtitle { font-size: 18px; }
  .about__text-card { position: static; width: 100%; margin: 20px 0 0 0; }
  .about__text-body { font-size: 16px; }
  .about__info { position: static; width: 100%; height: auto; padding: 24px 20px; border-radius: 24px; margin-top: 24px; }
  .about__info-h3 { font-size: 24px; }
  .about__info-sub { font-size: 15px; }
  .about__points { grid-template-columns: 1fr; }
  .about__points li { font-size: 16px; }

  /* ── REVIEWS ─────────────────────────────────── */
  .tr-reviews__aside { position: static; width: 100%; height: auto; margin-bottom: 20px; }
  .tr-reviews__heading { position: static; font-size: 32px; }
  .tr-reviews__quote { display: none; }
  .tr-reviews__sub { position: static; font-size: 20px; width: 100%; margin-top: 8px; }
  .tr-reviews__row {
    position: static; height: auto;
    flex-direction: column; gap: 16px; width: 100%;
  }
  .tr-review-card {
    flex: none; width: 100% !important; height: auto !important;
    padding: 20px; position: static;
  }
  .tr-review-card__title, .tr-review-card__text, .tr-review-card__name {
    position: static; width: 100%;
  }
  .tr-review-card__title { font-size: 16px; margin-bottom: 12px; }
  .tr-review-card__text { font-size: 12px; margin-bottom: 12px; height: auto; }
  .tr-review-card__name { margin-top: 12px; white-space: normal; }

  /* ── FAQ ─────────────────────────────────────── */
  .tr-faq__title { position: static; font-size: 28px; width: 100%; margin-bottom: 36px; }
  .tr-faq__grid {
    position: static; display: flex; flex-direction: column;
    gap: 16px; width: 100%;
  }
  .tr-faq-item {
    position: relative; min-height: unset;
    padding: 16px 16px 16px 64px;
  }
  .tr-faq-item:nth-child(-n+2) { min-height: unset; }
  .tr-faq-item__icon { left: 14px; top: 16px; }
  .tr-faq-item__q { font-size: 16px; }
  .tr-faq-item__a { font-size: 13px; }
}

/* ================================================================
   RESPONSIVE — Small Mobile ≤ 480px
   ================================================================ */
@media (max-width: 480px) {
  .tr-banner__title { font-size: 24px; }
  .tr-programs__title { font-size: 20px; }
  .tr-steps__title { font-size: 20px; }
  .tr-prices__title { font-size: 24px; }
  .about__title { font-size: 24px; }
  .tr-faq__title { font-size: 24px; }
  .tr-reviews__heading { font-size: 28px; }
  .cta2__heading { font-size: 24px; }
}


/* ════════════════════════════════════════════════════════════════
   ЧАСТЬ 3: NUTRITION — nutrition.html и nutrition/index.html
   Изначально inline CSS, перенесён в общий файл
   ════════════════════════════════════════════════════════════════ */

    /* ── CSS ПЕРЕМЕННЫЕ ── */
    :root {
      --color-white:      #FFFFFF;
      --color-black:      #000000;
      --color-purple:     #BC5FFE;
      --color-dark-text:  #2E2E2E;
      --color-gray-text:  #4A4A4A;
      --color-navy:       #1A2C3E;
      --color-lime:       #DCF750;
      --color-stroke:     rgba(0, 0, 0, 0.2);
      --color-white-80:   rgba(255, 255, 255, 0.8);
      --color-lime-30:    rgba(220, 247, 80, 0.3);
      --color-lime-40:    rgba(220, 247, 80, 0.4);
      --color-lime-80:    rgba(220, 247, 80, 0.8);

      --font-main:  'Exo 2', sans-serif;
      --font-body:  'Manrope', sans-serif;
    }

    /* ── СБРОС ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--color-white); font-family: var(--font-main); overflow-x: hidden; }

    /* ── ОБЁРТКА СТРАНИЦЫ ── */
    .page-wrapper {
      width: 1440px;
      margin: 0 auto;
    }

    /* ══════════════════════════════════════
       СЕКЦИЯ: Banner | nodeId: 371:6810
    ══════════════════════════════════════ */
    .section-banner {
      position: relative;
      width: 1440px;
      height: 724px;
      background: #FFFFFF;
      overflow: hidden;
    }

    /* Фоновое изображение героя — nodeId: 371:6811 */
    .section-banner__bg-img {
      position: absolute;
      left: 735px;
      top: 218px;
      width: 832px;
      height: 832px;
      object-fit: cover;
      box-shadow: 0px 0px 200px 0px rgba(220, 247, 80, 0.5);
      /* Плавное растворение: слева, сверху и снизу */
      -webkit-mask-image:
        linear-gradient(to right,  transparent 0%,  black 22%,  black 78%,  transparent 100%),
        linear-gradient(to bottom, transparent 0%,  black 18%,  black 82%,  transparent 100%);
      -webkit-mask-composite: destination-in;
      mask-image:
        linear-gradient(to right,  transparent 0%,  black 22%,  black 78%,  transparent 100%),
        linear-gradient(to bottom, transparent 0%,  black 18%,  black 82%,  transparent 100%);
      mask-composite: intersect;
    }

    /* Заголовок — nodeId: 371:6812 */
    .section-banner__title {
      position: absolute;
      left: 160px;
      top: 50px;
      width: 991px;
      font-family: var(--font-main);
      font-weight: 700;
      font-size: 70px;
      line-height: 1.2;
      color: var(--color-black);
    }
    /* Подзаголовок (связный текст) — nodeId: 371:6813 */
    .section-banner__subtitle {
      position: absolute;
      left: 146px;
      top: 258px;
      width: 620px;
      margin: 0;
      font-family: var(--font-main);
      font-weight: 500;
      font-size: 24px;
      line-height: 1.45;
      color: #2E2E2E;
    }

    /* Кнопка — nodeId: 371:6814 */
    .section-banner__button {
      position: absolute;
      left: 160px;
      top: 574px;
      width: 354px;
      height: 100px;
      border-radius: 25px;
      background: var(--color-purple);
      box-shadow: 0px 0px 100px 0px rgba(188, 95, 254, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      transition: opacity 0.2s;
    }
    .section-banner__button:hover {
      opacity: 0.88;
    }
    /* Текст кнопки — nodeId: 371:6816 */
    .section-banner__button-text {
      font-family: var(--font-main);
      font-weight: 600;
      font-size: 36px;
      line-height: 1.2;
      color: var(--color-white);
    }

    /* ══════════════════════════════════════
       СЕКЦИЯ: Programs | nodeId: 371:6817
    ══════════════════════════════════════ */
    .section-programs {
      position: relative;
      width: 1440px;
      height: 1400px;
      background: var(--color-white);
      overflow: hidden;
    }

    /* Радиальный фон — nodeId: 371:6818 */
    .section-programs__bg {
      position: absolute;
      left: 361px;
      top: 321px;
      width: 1079px;
      height: 1079px;
      background: radial-gradient(circle at 100% 100%, rgba(220, 247, 80, 0.4) 0%, rgba(220, 247, 80, 0) 100%);
      pointer-events: none;
    }

    /* Заголовок — nodeId: 371:6819 */
    .section-programs__title {
      position: absolute;
      left: 160px;
      top: 42px;
      width: 401px;
      height: 48px;
      font-family: var(--font-main);
      font-weight: 600;
      font-size: 40px;
      line-height: 1.2;
      color: var(--color-black);
    }

    /* Карточка программы */
    .program-card {
      position: absolute;
      width: 550px;
      height: 225px;
      border-radius: 25px;
      overflow: hidden;
    }
    .program-card__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Знак / иконка пола — nodeId: 371:6825 etc. */
    .program-card__sign {
      position: absolute;
      right: 25px;
      top: 25px;
      width: 59px;
      height: 59px;
      background: var(--color-purple);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: #fff;
      line-height: 1;
      box-shadow: 0 2px 8px rgba(188, 95, 254, 0.5);
    }

    /* Текстовый блок поверх карточки — nodeId: 371:6822 etc. */
    .program-card__text-overlay {
      position: absolute;
      left: 0;
      top: 109px;
      width: 100%;
      height: 116px;
      background: rgba(188, 95, 254, 0.88);
      display: flex;
      align-items: center;
      padding: 12px 18px;
    }
    .program-card__label {
      font-family: var(--font-main);
      font-weight: 600;
      font-size: 18px;
      line-height: 1.3;
      color: #fff;
    }

    /* Позиции карточек */
    .program-card--1  { left: 160px; top: 143px; }
    .program-card--2  { left: 730px; top: 143px; }
    .program-card--3  { left: 730px; top: 388px; }
    .program-card--4  { left: 160px; top: 388px; }
    .program-card--5  { left: 730px; top: 633px; }
    .program-card--6  { left: 160px; top: 633px; }
    .program-card--7  { left: 160px; top: 878px; }
    .program-card--8  { left: 730px; top: 878px; }
    .program-card--9  { left: 730px; top: 1123px; }
    .program-card--10 { left: 160px; top: 1123px; }

    a.program-card {
      display: block;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    a.program-card:hover {
      transform: scale(1.02);
      box-shadow: 0 16px 48px rgba(188, 95, 254, 0.45);
      z-index: 5;
    }
    a.program-card:hover .program-card__text-overlay {
      background: rgba(188, 95, 254, 0.96);
    }
    a.program-card:focus-visible {
      outline: 3px solid var(--color-lime);
      outline-offset: 4px;
      z-index: 6;
    }

    /* ══════════════════════════════════════
       СЕКЦИЯ: Challenge | nodeId: 371:6946
    ══════════════════════════════════════ */
    .section-challenge {
      position: relative;
      width: 1440px;
      min-height: 1385px;
      height: auto;
      background: var(--color-white);
      overflow: visible;
      z-index: 1;
    }

    /* Радиальные градиенты #dcf750cc → прозрачный (Figma 371:6947, 371:6948) */
    .section-challenge__bg2 {
      position: absolute;
      left: 634px;
      top: 2px;
      width: 780px;
      height: 780px;
      background: radial-gradient(circle at 50% 50%, rgba(220, 247, 80, 0.8) 0%, rgba(220, 247, 80, 0) 70%);
      pointer-events: none;
      z-index: 0;
    }

    .section-challenge__bg1 {
      position: absolute;
      left: 42px;
      top: 572px;
      width: 780px;
      height: 780px;
      background: radial-gradient(circle at 50% 50%, rgba(220, 247, 80, 0.8) 0%, rgba(220, 247, 80, 0) 70%);
      pointer-events: none;
      z-index: 0;
    }

    /* Яблоко слева (кнопка вынесена — на линии с .challenge-point--4) */
    .section-challenge__apple-wrap {
      position: absolute;
      left: 40px;
      top: 560px;
      width: 720px;
      z-index: 2;
      pointer-events: none;
    }

    /* Яблоко: лёгкий наклон (nodeId: 371:6949) */
    .section-challenge__apple {
      display: block;
      width: 100%;
      max-width: 720px;
      max-height: 680px;
      height: auto;
      object-fit: contain;
      object-position: center bottom;
      pointer-events: none;
      filter: drop-shadow(0 12px 40px rgba(220, 247, 80, 0.35));
      transform: rotate(7deg);
    }

    /* Та же левая грань, что у .challenge-card__btn (160 + 62 = 222px от секции) */
    .section-challenge__apple-cta {
      position: absolute;
      left: 222px;
      top: 1191px;
      transform: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      margin: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      z-index: 4;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

    /* Заголовок «Испытание» — nodeId: 371:6950 */
    .section-challenge__title {
      position: absolute;
      left: 163px;
      top: 82px;
      z-index: 4;
      font-family: var(--font-main);
      font-weight: 600;
      font-size: 48px;
      line-height: 1.2;
      color: var(--color-black);
    }

    /* Заголовок «Что вы получаете» — nodeId: 371:6951 */
    .section-challenge__title2 {
      position: absolute;
      left: 872px;
      top: 703px;
      width: 408px;
      z-index: 3;
      font-family: var(--font-main);
      font-weight: 600;
      font-size: 48px;
      line-height: 1.2;
      color: var(--color-black);
    }

    /* ── Challenge-карточка ──
       Группа (371:6952): left=160, top=-198 относ. секции.
       Внутри группы card bg (371:6953): left=0, top=383.
       Позиция bg относительно секции: left=160, top=185.
    */
    .challenge-card {
      position: absolute;
      left: 160px;
      top: -198px;
      width: 1428px;
      overflow: visible;
      z-index: 1;
    }

    /* Лавандовый фон карточки — под текстом и шоколадом слева */
    .challenge-card__bg {
      position: absolute;
      left: 0;
      top: 383px;
      width: 864px;
      height: 459px;
      background: #bc5ffe;
      border-radius: 35px;
      z-index: 1;
      box-shadow: 0 16px 48px rgba(188, 95, 254, 0.35);
    }

    /* Белый блок 80% — 709×138, left=32, top=415 (Figma 371:6954) */
    .challenge-card__header {
      position: absolute;
      left: 32px;
      top: 415px;
      z-index: 2;
      width: 709px;
      height: 138px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 25px;
      padding: 20px 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      box-sizing: border-box;
    }
    .challenge-card__name {
      font-family: var(--font-main);
      font-weight: 700;
      font-size: 36px;
      line-height: 1.2;
      color: #000000;
    }
    .challenge-card__days {
      font-family: var(--font-main);
      font-weight: 500;
      font-size: 32px;
      line-height: 1.2;
      color: #4a4a4a;
    }

    /* Текст на лавандовом фоне — белый, 32px semibold (Figma 371:6956) */
    .challenge-card__desc {
      position: absolute;
      left: 65px;
      top: 590px;
      width: 520px;
      font-family: var(--font-main);
      font-weight: 600;
      font-size: 32px;
      line-height: 1.2;
      color: #ffffff;
      margin: 0;
      z-index: 2;
    }

    /* «19,2 тысяч участников» — #d9d9d9, 24px medium (Figma 371:6957) */
    .challenge-card__count {
      position: absolute;
      left: 65px;
      top: 680px;
      font-family: var(--font-main);
      font-weight: 500;
      font-size: 24px;
      line-height: 1.2;
      color: #d9d9d9;
      margin: 0;
      z-index: 2;
    }

    /* «Начать»: чёрная капсула + отдельный круг со стрелкой */
    .challenge-card__btn {
      position: absolute;
      left: 62px;
      top: 742px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      margin: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      z-index: 4;
      transition: transform 0.2s ease, filter 0.2s ease;
    }
    .challenge-card__btn-pill {
      height: 60px;
      padding: 0 36px;
      background: #000000;
      color: #ffffff;
      border-radius: 30px;
      font-family: var(--font-main);
      font-weight: 600;
      font-size: 30px;
      line-height: 60px;
      white-space: nowrap;
      transition: box-shadow 0.2s ease;
    }
    .challenge-card__btn-disc {
      width: 60px;
      height: 60px;
      flex-shrink: 0;
      border-radius: 50%;
      background: #000000;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
      transition: box-shadow 0.2s ease;
    }
    /* Hover: фон остаётся чёрным — обводка + тень + лёгкое увеличение блока */
    .challenge-card__btn:hover .challenge-card__btn-pill,
    .challenge-card__btn:hover .challenge-card__btn-disc,
    .section-challenge__apple-cta:hover .challenge-card__btn-pill,
    .section-challenge__apple-cta:hover .challenge-card__btn-disc {
      background: #000000;
      box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.92),
        0 10px 28px rgba(0, 0, 0, 0.4);
    }
    .challenge-card__btn:hover,
    .section-challenge__apple-cta:hover {
      transform: scale(1.04);
      filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.35));
    }
    .challenge-card__btn:focus-visible,
    .section-challenge__apple-cta:focus-visible {
      outline: 3px solid var(--color-lime);
      outline-offset: 4px;
      border-radius: 4px;
    }

    .challenge-card__btn-arrow {
      display: block;
      flex-shrink: 0;
    }
    /* Шоколад (Figma: 408/-198 от секции, 855.85px, 32.24°) */
    .challenge-card__image {
      position: absolute;
      left: 360px;
      top: 112px;
      width: 855.85px;
      height: 855.85px;
      object-fit: contain;
      object-position: center center;
      pointer-events: none;
      z-index: 3;
      transform: rotate(32.24deg);
      filter: drop-shadow(0 20px 50px rgba(220, 247, 80, 0.25));
    }

    /* Пункты «Что вы получаете» */
    .challenge-point {
      position: absolute;
      z-index: 3;
      width: 550px;
      height: 100px;
      border-radius: 25px;
    }
    .challenge-point__bg {
      position: absolute;
      inset: 0;
      background: #bc5ffe;
      border-radius: 25px;
    }
    .challenge-point__title {
      position: absolute;
      left: 25px;
      top: 10px;
      font-family: var(--font-main);
      font-weight: 600;
      font-size: 32px;
      line-height: 1.2;
      color: var(--color-white);
    }
    .challenge-point__text {
      position: absolute;
      left: 25px;
      top: 53px;
      font-family: var(--font-main);
      font-weight: 500;
      font-size: 24px;
      line-height: 1.2;
      color: rgba(255, 255, 255, 0.8);
    }
    .challenge-point--1 { left: 730px; top: 796px; }
    .challenge-point--2 { left: 730px; top: 921px; }
    .challenge-point--3 { left: 730px; top: 1046px; }
    .challenge-point--4 { left: 730px; top: 1171px; }

    /* ══════════════════════════════════════
       СЕКЦИЯ: Reviews | nodeId: 387:360
    ══════════════════════════════════════ */
    .section-reviews {
      position: relative;
      width: 1440px;
      height: 524px;
      background: var(--color-white);
      border-radius: 0px 0px 0px 50px;
      overflow: hidden;
    }

    /* Группа заголовка — nodeId: 387:361 */
    .section-reviews__title-group {
      position: absolute;
      left: 160px;
      top: 0;
      width: 265px;
      height: 314px;
    }
    /* «Отзывы» — nodeId: 387:362 */
    .section-reviews__title {
      position: absolute;
      left: 0;
      top: 0;
      font-family: var(--font-main);
      font-weight: 700;
      font-size: 48px;
      line-height: 1.2;
      color: var(--color-black);
    }
    /* Декоративная кавычка — nodeId: 387:363 */
    .section-reviews__quote {
      position: absolute;
      left: 0;
      top: 54px;
      font-family: var(--font-main);
      font-weight: 800;
      font-size: 128px;
      line-height: 1.2;
      color: rgba(220, 247, 80, 0.3);
    }
    /* «Посмотрите что говорят...» — nodeId: 387:364 */
    .section-reviews__subtitle {
      position: absolute;
      left: 0;
      top: 182px;
      width: 265px;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 32px;
      line-height: 1.366;
      color: var(--color-black);
    }

    /* Контейнер карточек — nodeId: 387:365 */
    .section-reviews__cards {
      position: absolute;
      left: 445px;
      top: 58px;
      width: 1274px;
      height: 397px;
      display: flex;
      gap: 50px;
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Отдельная карточка отзыва */
    .nut-review-card {
      flex-shrink: 0;
      height: 397px;
      background: var(--color-white);
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 25px;
      padding: 24px 26px 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .nut-review-card--1 { width: 378px; }
    .nut-review-card--2 { width: 378px; }
    .nut-review-card--3 { width: 418px; }

    /* Декоративная кавычка карточки */
    .nut-review-card__quote {
      font-family: var(--font-main);
      font-weight: 800;
      font-size: 52px;
      line-height: 0.75;
      color: rgba(220, 247, 80, 0.55);
      flex-shrink: 0;
      margin-bottom: 2px;
    }
    /* Заголовок отзыва */
    .nut-review-card__title {
      font-family: var(--font-main);
      font-weight: 700;
      font-size: 14px;
      line-height: 1.35;
      color: var(--color-navy);
      background: rgba(188, 95, 254, 0.08);
      border-left: 3px solid var(--color-purple);
      border-radius: 0 10px 10px 0;
      padding: 8px 12px;
      flex-shrink: 0;
      margin-bottom: 10px;
    }
    /* Основной текст отзыва */
    .nut-review-card__text {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 12px;
      line-height: 1.55;
      color: #444;
      flex-grow: 1;
      overflow: hidden;
      margin-bottom: 10px;
    }
    /* Имя автора */
    .nut-review-card__name {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 13px;
      line-height: 1.3;
      color: var(--color-navy);
      padding-top: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.12);
      flex-shrink: 0;
    }

    /* Кнопки навигации — nodeId: 387:399 */
    .section-reviews__nav {
      position: absolute;
      left: 160px;
      top: 355px;
      width: 230px;
      height: 100px;
      display: flex;
      gap: 30px;
    }
    .section-reviews__nav-btn {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.2);
      background: var(--color-white);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      color: var(--color-navy);
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .section-reviews__nav-btn:hover:not(:disabled) {
      background: var(--color-purple);
      color: #fff;
      border-color: var(--color-purple);
    }
    .section-reviews__nav-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    /* ══════════════════════════════════════
       СЕКЦИЯ: FAQ | nodeId: 387:406
    ══════════════════════════════════════ */
    .section-faq {
      position: relative;
      width: 1440px;
      height: 1908px;
      background: var(--color-white);
    }

    /* Заголовок FAQ — nodeId: 387:407 */
    .section-faq__title {
      position: absolute;
      left: 160px;
      top: 0;
      width: 644px;
      font-family: var(--font-main);
      font-weight: 600;
      font-size: 40px;
      line-height: 1.2;
      color: var(--color-black);
    }

    /* FAQ карточка — базовый стиль */
    .faq-card {
      position: absolute;
      border-radius: 25px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      background: var(--color-white);
    }
    /* Иконка (фиолетовый кружок) */
    .faq-card__icon {
      position: absolute;
      left: 20px;
      top: 20px;
      width: 37px;
      height: 37px;
      background: var(--color-purple);
      border-radius: 50%;
    }
    /* Вопрос */
    .faq-card__title {
      position: absolute;
      left: 77px;
      top: 20px;
      width: 444px;
      font-family: var(--font-main);
      font-weight: 600;
      font-size: 20px;
      line-height: 1.2;
      color: var(--color-dark-text);
    }
    /* Ответ */
    .faq-card__text {
      position: absolute;
      left: 77px;
      width: 437px;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 14px;
      line-height: 1.366;
      color: var(--color-black);
    }

    /* Позиции и размеры всех FAQ карточек */
    .faq-card--1  { left: 160px; top: 107px;  width: 541px; height: 312px; }
    .faq-card--1  .faq-card__text { top: 103px; }

    .faq-card--2  { left: 739px; top: 107px;  width: 541px; height: 312px; }
    .faq-card--2  .faq-card__text { top: 84px; }

    .faq-card--3  { left: 739px; top: 457px;  width: 541px; height: 236px; }
    .faq-card--3  .faq-card__text { top: 103px; }

    .faq-card--4  { left: 160px; top: 457px;  width: 541px; height: 236px; }
    .faq-card--4  .faq-card__text { top: 80px; }

    .faq-card--5  { left: 160px; top: 731px;  width: 541px; height: 236px; }
    .faq-card--5  .faq-card__text { top: 103px; }

    .faq-card--6  { left: 160px; top: 1005px; width: 541px; height: 274px; }
    .faq-card--6  .faq-card__text { top: 103px; }

    .faq-card--7  { left: 739px; top: 1294px; width: 541px; height: 251px; }
    .faq-card--7  .faq-card__text { top: 84px; }

    .faq-card--8  { left: 160px; top: 1317px; width: 541px; height: 213px; }
    .faq-card--8  .faq-card__text { top: 84px; }

    .faq-card--9  { left: 739px; top: 731px;  width: 541px; height: 255px; }
    .faq-card--9  .faq-card__text { top: 103px; }

    .faq-card--10 { left: 739px; top: 1024px; width: 541px; height: 232px; }
    .faq-card--10 .faq-card__text { top: 80px; }

    .faq-card--11 { left: 739px; top: 1583px; width: 541px; height: 218px; }
    .faq-card--11 .faq-card__text { top: 57px; }

    .faq-card--12 { left: 160px; top: 1583px; width: 541px; height: 218px; }
    .faq-card--12 .faq-card__text { top: 57px; }
  

/* ── Page nutrition wrapper ─────────────────────── */
.page-nutrition-wrapper {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   ЧАСТЬ 4: ОБЩИЕ ПРАВИЛА ДЛЯ ТРЕНИРОВОК И ПИТАНИЯ
   (header/footer общий с главной — те же классы шапки/подвала)
   Правила уже есть в Части 1. Здесь только переопределения
   для страниц .page-training и .page-nutrition
   ════════════════════════════════════════════════════════════════ */

/* Активный пункт навигации */
.page-training .header__nav-link[href="training.html"],
.page-nutrition .header__nav-link[href="nutrition.html"],
.page-nutrition .header__nav-link[href="index.html"],
.page-knowledge .header__nav-link[href="knowledge.html"] {
  color: var(--lime, #DCF750);
  font-weight: 700;
}

/* Страница «База знаний» */
.page-knowledge .knowledge-main {
  background: var(--white);
}
.knowledge-intro {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 40px var(--pad-x) 8px;
  box-sizing: border-box;
}
.knowledge-intro__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.2;
  color: var(--black);
  margin: 0 0 20px;
}
.knowledge-intro__lead {
  font-family: var(--font-b);
  font-size: 18px;
  line-height: 1.65;
  color: var(--gray);
  margin: 0;
  max-width: 52em;
}
.page-knowledge .knowledge-faq .tr-faq__title {
  margin-top: 8px;
}

/* Отступ под шапкой для training/nutrition страниц */
.page-training main,
.page-nutrition .page-nutrition-wrapper {
  margin-top: 0;
}

/* :root для nutrition — при необходимости alias переменных с главной */
.page-nutrition {
  --lime: #DCF750;
  --purple: #BC5FFE;
}

/* Страница отдельной программы питания (nutrition-program-N.html) */
.page-nutrition-program .nutrition-program-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 24px 80px;
  box-sizing: border-box;
}
.page-nutrition-program .nutrition-program-toolbar {
  margin: 0;
  padding: 0 0 16px;
  box-sizing: border-box;
}
.page-nutrition-program .nutrition-program-back {
  display: inline-block;
  font-family: var(--font-b, 'Manrope', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
}
.page-nutrition-program .nutrition-program-back:hover {
  text-decoration: underline;
}
.page-nutrition-program .nutrition-program-hero {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.page-nutrition-program .nutrition-program-hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 480px);
  object-fit: cover;
  object-position: center;
}
.page-nutrition-program .nutrition-program-copy {
  margin: 0;
  padding: 28px 0 0;
  box-sizing: border-box;
}
.page-nutrition-program .nutrition-program-copy h1 {
  font-family: var(--font-h, 'Exo 2', sans-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--black);
}
.page-nutrition-program .nutrition-program-lead {
  font-family: var(--font-b, 'Manrope', sans-serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--gray);
  margin: 0;
}

/* Страница контактов (contacts.html) */
.page-contacts {
  background: #fff;
}
.contacts-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px var(--pad-x, 24px) 72px;
  box-sizing: border-box;
}
.contacts-page__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media (min-width: 768px) {
  .contacts-page__inner {
    flex-direction: row;
    align-items: center;
  }
}
.contacts-page__content {
  flex: 1;
  max-width: 600px;
}
.contacts-page__image-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contacts-page__image {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
}
.contacts-page__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 44px);
  color: var(--black);
  margin: 0 0 16px;
}
.contacts-page__lead {
  font-family: var(--font-b);
  font-size: 18px;
  line-height: 1.6;
  color: var(--dark2);
  margin: 0 0 40px;
}
.contacts-page__section {
  margin-bottom: 36px;
}
.contacts-page__section:last-child {
  margin-bottom: 0;
}
.contacts-page__h2 {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 22px;
  color: var(--black);
  margin: 0 0 16px;
}
.contacts-page__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contacts-page__item {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contacts-page__item:last-child {
  margin-bottom: 0;
}
.contacts-page__label {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 13px;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.contacts-page__link {
  font-family: var(--font-b);
  font-size: 18px;
  color: var(--purple);
  text-decoration: none;
  font-weight: 600;
}
.contacts-page__link:hover {
  text-decoration: underline;
}
.contacts-page__legal {
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray);
}
.contacts-page__legal p {
  margin: 0 0 8px;
}
.contacts-page__legal p:last-child {
  margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE: MOBILE FOR NUTRITION PAGE (.page-nutrition-wrapper)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .page-nutrition-wrapper {
    padding: 0 16px;
    width: 100%;
  }

  /* ── BANNER ── */
  .section-banner { width: 100%; height: auto; padding: 40px 0; }
  .section-banner__bg-img {
    position: static; width: 100%; height: 280px; left: auto; top: auto;
    mask-image: none; -webkit-mask-image: none;
    border-radius: 20px; margin-bottom: 24px; box-shadow: none;
  }
  .section-banner__title {
    position: static; width: 100%; left: auto; top: auto;
    font-size: 32px; margin-bottom: 20px;
    text-align: center;
  }
  .section-banner__subtitle {
    position: static; width: 100%; left: auto; top: auto;
    font-size: 16px; margin-bottom: 24px;
    text-align: center;
  }
  .section-banner__button {
    position: static; width: 100%; left: auto; top: auto;
    height: 64px; box-shadow: none;
  }
  .section-banner__button-text { font-size: 22px; }

  /* ── PROGRAMS ── */
  .section-programs { width: 100%; height: auto; padding: 40px 0; display: flex; flex-direction: column; gap: 16px; }
  .section-programs__bg { display: none; }
  .section-programs__title { position: static; width: 100%; left: auto; top: auto; font-size: 28px; text-align: center; margin-bottom: 8px; height: auto; }
  .program-card {
    position: relative !important; width: 100% !important; left: auto !important; top: auto !important;
    height: 120px; border-radius: 16px; display: flex; overflow: hidden;
  }
  .program-card__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
  .program-card__sign { display: none; } /* hide the male/female sign on mobile to save space */
  .program-card__text-overlay {
    position: absolute; left: 0; bottom: 0; top: auto; width: 100%; height: auto;
    padding: 12px; z-index: 2; border-radius: 0;
  }
  .program-card__label { font-size: 14px; }

  /* ── CHALLENGE ── */
  .section-challenge { width: 100%; height: auto; min-height: unset; padding: 40px 0; position: relative; overflow: hidden; display: flex; flex-direction: column; }
  .section-challenge__bg, .section-challenge__bg1, .section-challenge__bg2 { display: none; }
  .section-challenge__apple-wrap { display: none; }
  .section-challenge__title { position: static; width: 100%; left: auto; top: auto; font-size: 28px; margin-bottom: 24px; text-align: left; order: 1; }
  .section-challenge__title2 { position: static; width: 100%; left: auto; top: auto; font-size: 24px; margin: 0 0 16px; text-align: left; order: 3; }
  .challenge-card {
    position: static; width: 100% !important; left: auto !important; top: auto !important; height: auto !important;
    background: #BC5FFE; border-radius: 10px; padding: 20px 16px;
    display: flex; flex-direction: column; gap: 12px; box-sizing: border-box;
    order: 2; margin-bottom: 32px;
  }
  .challenge-card__image { display: none; }
  .challenge-card__bg { display: none; }
  .challenge-card__header {
    position: static; width: 100%; height: auto; box-sizing: border-box;
    background: rgba(255,255,255,0.8); border-radius: 11px;
    padding: 12px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  }
  .challenge-card__name { position: static; font-size: 20px; text-align: left; }
  .challenge-card__days { position: static; font-size: 16px; color: #4A4A4A; text-align: left; }
  .challenge-card__desc { position: static; font-size: 16px; color: #FFF; width: 100%; line-height: 1.2; margin: 8px 0 0; font-weight: 600; box-sizing: border-box; }
  .challenge-card__count { position: static; font-size: 12px; color: #D9D9D9; width: 100%; margin: 0; box-sizing: border-box; }
  .challenge-card__btn {
    position: static; display: inline-flex; align-items: center; justify-content: center;
    background: #000; border-radius: 30px; height: 44px; padding: 0 24px;
    margin-top: 12px; align-self: flex-start; box-sizing: border-box;
  }
  .challenge-card__btn-pill { position: static; font-size: 20px; background: transparent; padding: 0; height: auto; }
  .challenge-card__btn-disc { display: none; }
  
  .challenge-point {
    position: static; width: 100%; height: auto; box-sizing: border-box;
    background: #BC5FFE; border-radius: 25px; padding: 24px 20px;
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; order: 4;
  }
  .challenge-point__bg { display: none; }
  .challenge-point__title { position: static; width: 100%; font-size: 20px; color: #FFF; }
  .challenge-point__text { position: static; width: 100%; font-size: 15px; color: #D9D9D9; }
  .section-challenge__button { order: 5; margin-top: 24px; }

  /* ── REVIEWS ── */
  .section-reviews { width: 100%; height: auto; padding: 40px 0; }
  .section-reviews__quote { display: none; }
  .section-reviews__title { position: static; width: 100%; left: auto; top: auto; font-size: 28px; text-align: center; margin-bottom: 12px; height: auto; }
  .section-reviews__subtitle { position: static; width: 100%; left: auto; top: auto; font-size: 16px; text-align: center; margin-bottom: 24px; height: auto; }
  .section-reviews__nav { display: none; }
  .section-reviews__cards { position: static; width: 100%; left: auto; top: auto; display: flex; flex-direction: column; gap: 16px; height: auto; }
  .nut-review-card { width: 100% !important; height: auto; padding: 20px; }
  .nut-review-card__quote { display: none; }
  .nut-review-card__title { font-size: 16px; }
  .nut-review-card__text { font-size: 12px; height: auto; }
  .nut-review-card__name { font-size: 14px; }

  /* ── FAQ ── */
  .section-faq { width: 100%; height: auto; padding: 40px 0; }
  .section-faq__title { position: static; width: 100%; left: auto; top: auto; font-size: 28px; margin-bottom: 24px; height: auto; }
  .faq-card { position: static; width: 100% !important; left: auto !important; top: auto !important; height: auto !important; padding: 16px 16px 16px 64px; margin-bottom: 16px; }
  .faq-card__icon { left: 14px; top: 16px; }
  .faq-card__title { position: static; width: 100%; left: auto; top: auto; font-size: 16px; margin-bottom: 8px; }
  .faq-card__text { position: static; width: 100%; left: auto; top: auto; padding-top: 0; }
}

@media (max-width: 480px) {
  .section-banner__title { font-size: 28px; }
  .section-programs__title { font-size: 24px; }
  .section-challenge__title { font-size: 24px; }
  .section-reviews__title { font-size: 24px; }
  .section-faq__title { font-size: 24px; }
}

@media (max-width: 900px) {
  .adv-card__title--wide, .adv-card__text--wide {
    text-align: center !important;
  }
  .tr-adv-card__title--wide, .tr-adv-card__text--wide {
    text-align: center !important;
  }
}

@media (max-width: 900px) {
  /* Make 4th wide card on index look like the other 3 cards */
  .adv-card--wide {
    display: flex !important;
    flex-direction: column !important;
    padding: 32px 28px 0 !important;
    min-height: 381px !important;
    gap: 0 !important;
  }
  .adv-card__inner--wide {
    margin-bottom: 24px !important;
  }
  .adv-card__img--wide {
    width: 100% !important;
    height: 172px !important;
    margin-top: auto !important;
    object-fit: contain !important;
  }
  .adv-card__title--wide {
    font-size: 24px !important;
  }
  .adv-card__text--wide {
    font-size: 15px !important;
  }

  /* Make 4th wide card on training/nutrition look like the other 3 cards */
  .tr-adv-card--wide {
    display: block !important;
    min-height: 220px !important;
    margin-bottom: 16px !important;
    padding-bottom: 20px !important;
  }
  .tr-adv-card__img--wide {
    width: 80px !important;
    height: 80px !important;
    margin: 12px auto 0 !important;
    display: block !important;
  }
}

/* Fix icon alignment and sizes on desktop (Final V14) */
@media (min-width: 901px) {
  /* BASE STYLES FOR ABSOLUTE BOTTOM ALIGNMENT */
  .adv-card:not(.adv-card--wide), .tr-adv-card:not(.tr-adv-card--wide) {
    padding-bottom: 240px !important; 
    position: relative !important;
    min-height: 480px !important;
  }
  
  /* ALL ICONS BASE STYLES - DO NOT AFFECT WIDE CARD */
  .adv-card__img:not(.adv-card__img--wide),
  .tr-adv-card__img:not(.tr-adv-card__img--wide) {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    top: auto !important;
  }

  /* 1. МОНЕТКА (Первая иконка) */
  .adv-card__img:not(.adv-card__img--2):not(.adv-card__img--3):not(.adv-card__img--wide),
  .tr-adv-card--1 .tr-adv-card__img,
  .tr-adv-card__img:not(.tr-adv-card__img--2):not(.tr-adv-card__img--3):not(.tr-adv-card__img--wide) {
    height: 155px !important;
    bottom: 40px !important;
  }

  /* 2. ЗАМОК (Вторая иконка) */
  .adv-card__img--2, .tr-adv-card__img--2 {
    height: 180px !important;
    bottom: 15px !important;
  }
  
  /* 3. ТЕЛЕФОН (Третья иконка) */
  .adv-card__img--3, .tr-adv-card__img--3 {
    height: 195px !important;
    bottom: 5px !important;
  }

  /* WIDE CARD STYLES (Сердечко) */
  .adv-card--wide {
    padding-bottom: 40px !important;
    grid-column: span 1; 
  }
  .adv-card__img--wide {
    position: static !important;
    height: 240px !important; /* Уменьшили сердечко до 240px */
    width: 240px !important;
    object-fit: contain !important;
    transform: none !important;
    left: auto !important;
  }
  
  .tr-adv-card--wide {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 380px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 40px 60px !important;
    box-sizing: border-box !important;
    padding-bottom: 40px !important;
  }
  .tr-adv-card__img--wide {
    position: static !important;
    width: 240px !important; /* Уменьшили сердечко до 240px */
    height: 240px !important;
    object-fit: contain !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transform: none !important;
    left: auto !important;
  }
}
