/* ========== Tokens ========== */
:root {
  --ink: #18181A;
  --ink-2: #222225;
  --ink-line: rgba(244, 241, 236, .16);
  --paper: #F4F1EC;
  --paper-2: #EBE6DE;
  --line: #D9D2C7;
  --text: #18181A;
  --text-2: #5E5B57;
  --text-inv: #F4F1EC;
  --text-inv-2: rgba(244, 241, 236, .66);
  --accent: #8E6A59;
  --accent-deep: #835844;
  --accent-soft: #D9C4B8;
  --glass: rgba(24, 24, 26, .62);
  --band-hover: rgba(142, 106, 89, .34);

  --font-display: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Onest', 'Helvetica Neue', Arial, sans-serif;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 64px;
  --space-2xl: 120px;

  --pad: clamp(20px, 4vw, 72px);
  --hdr-h: 72px;
  --hh: max(100svh, 620px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-x: cubic-bezier(.16, 1, .3, 1);
}

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hdr-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--space-lg);
  border: 1px solid transparent; border-radius: 3px;
  font: 500 14px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.btn--sm { min-height: 40px; padding: 0 var(--space-md); font-size: 12px; }
.btn--accent { background-color: var(--accent); color: var(--text-inv); }
.btn--accent:hover { background-color: var(--accent-deep); }
.btn--line { background-color: transparent; border-color: var(--text-inv-2); color: var(--text-inv); }
.btn--line:hover { border-color: var(--text-inv); background-color: rgba(244, 241, 236, .08); }

/* секционный заголовок: линия + капс по центру */
.title { text-align: center; max-width: 900px; margin: 0 auto var(--space-xl); }
.title::before { content: ''; display: block; width: 180px; height: 1px; background: var(--accent); margin: 0 auto var(--space-lg); }
.title h2 { font-size: clamp(26px, 3.2vw, 46px); }
.title p { margin-top: var(--space-md); color: var(--text-2); }
.title--light p { color: var(--text-inv-2); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.facts li.reveal:nth-child(2), .invest__nums > div.reveal:nth-child(2) { transition-delay: .1s; }
.facts li.reveal:nth-child(3), .invest__nums > div.reveal:nth-child(3) { transition-delay: .2s; }
.facts li.reveal:nth-child(4) { transition-delay: .3s; }

/* ========== Header ========== */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--hdr-h);
  display: flex; align-items: center; gap: var(--space-lg);
  padding: 0 var(--pad);
  color: var(--text-inv);
  background: linear-gradient(rgba(24, 24, 26, .8), rgba(24, 24, 26, .35) 70%, rgba(24, 24, 26, 0));
  border-bottom: 1px solid transparent;
  transition: background-color .35s, border-color .35s;
}
.hdr.is-solid { background: var(--ink); border-bottom-color: var(--ink-line); }
.logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.logo span { font: 400 19px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.logo .logo__l2 { font: inherit; letter-spacing: inherit; }
/* значок — фасад: стеклянный объём на опорах; замкнутая фигура, чтобы не путали с меню */
.logo svg { flex: none; height: 24px; width: auto; aspect-ratio: 32 / 24; fill: none; stroke: var(--accent-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hdr__nav { display: flex; gap: var(--space-lg); margin: 0 auto; }
.hdr__nav a { white-space: nowrap; font-size: 14px; text-decoration: none; color: rgba(244, 241, 236, .88); text-shadow: 0 1px 8px rgba(24, 24, 26, .6); transition: color .2s; }
.hdr__nav a:hover { color: var(--text-inv); }
.hdr__phone { font-size: 14px; text-decoration: none; white-space: nowrap; }

/* ========== Hero ========== */
.hero { position: relative; height: var(--hh); overflow: hidden; background: var(--ink); color: var(--text-inv); }
.cover {
  position: absolute; right: 0; top: 50%;
  width: max(82vw, calc(var(--hh) * var(--ratio)));
  height: max(var(--hh), calc(82vw / var(--ratio)));
  transform: translateY(-50%);
  transform-origin: 70% 50%;
  animation: drift 24s var(--ease) both;
}
@keyframes drift { from { scale: 1.08; } to { scale: 1; } }
.cover__img { width: 100%; height: 100%; object-fit: cover; }
.callouts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.callouts polyline {
  fill: none; stroke: var(--text-inv); stroke-width: 1.2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: draw 1.4s var(--ease) .4s forwards;
}
.callouts polyline:nth-child(2) { animation-delay: .7s; }
.callouts polyline:nth-child(3) { animation-delay: 1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pin {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--text-inv); box-shadow: 0 0 0 4px rgba(244, 241, 236, .25);
}
.pin::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--text-inv); animation: ping 2.4s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3); opacity: 0; } }
.tag {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  transform: translate(0, -50%);
  margin: 0; padding: var(--space-sm) var(--space-md);
  background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-left: 2px solid var(--accent);
  font-size: 13px; line-height: 1.35; color: var(--text-inv-2); white-space: nowrap;
  opacity: 0; animation: fade .8s var(--ease) 1.6s forwards;
}
.tag--l { transform: translate(-100%, -50%); border-left: 0; border-right: 2px solid var(--accent); text-align: right; }
.tag b { display: block; font: 400 17px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-inv); }
@keyframes fade { to { opacity: 1; } }

.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 20%, rgba(24, 24, 26, .8) 34%, rgba(24, 24, 26, 0) 52%), linear-gradient(0deg, rgba(24, 24, 26, .55), rgba(24, 24, 26, 0) 32%); }
.hero__content { position: absolute; left: var(--pad); top: 50%; transform: translateY(-46%); max-width: min(620px, 42vw); }
.hero__place { font: 400 13px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: var(--space-md); }
.hero h1 { font-weight: 300; font-size: clamp(34px, 3.5vw, 60px); line-height: 1.04; letter-spacing: .01em; }
.hero__sub { font: 300 clamp(17px, 1.5vw, 22px)/1.4 var(--font-display); margin: var(--space-md) 0 var(--space-lg); max-width: 40ch; color: var(--text-inv-2); }
.hero__badge {
  position: absolute; right: var(--pad); bottom: 11vh;
  width: 190px; padding: var(--space-md);
  border: 1px solid rgba(244, 241, 236, .4); background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-align: center;
}
.hero__badge-top { font: 400 12px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft); }
.hero__badge-v { font: 300 56px/1.1 var(--font-display); }
.hero__badge-bot { font-size: 13px; color: var(--text-inv-2); line-height: 1.4; }
.scroll-cue { position: absolute; left: 50%; bottom: var(--space-lg); width: 1px; height: 56px; background: rgba(244, 241, 236, .3); overflow: hidden; }
.scroll-cue span { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--text-inv); animation: cue 2s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }

/* ========== Anatomy ========== */
.anatomy { background: var(--ink); color: var(--text-inv); padding: var(--space-2xl) var(--pad); }
.anatomy__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; max-width: 1400px; margin: 0 auto; }
.drawing { position: relative; margin-left: 44px; }
.drawing img { width: 100%; opacity: .85; }
.bands { position: absolute; inset: 0; }
.band {
  position: absolute; padding: 0; border: 0; cursor: pointer;
  background: transparent; border-top: 1px dashed rgba(244, 241, 236, .28);
  transition: background-color .3s;
}
.band:hover, .band.is-active { background: var(--band-hover); }
.band:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.band__n {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(244, 241, 236, .4); font: 400 14px var(--font-display);
  transition: background-color .3s, border-color .3s;
}
.band.is-active .band__n { background: var(--accent); border-color: var(--accent); }
.level { min-height: 440px; }
.level > * { animation: rise .5s var(--ease) both; }
.level__n { font: 200 clamp(90px, 10vw, 160px)/.8 var(--font-display); color: var(--accent); }
.level__name { font-size: clamp(24px, 2.2vw, 32px); margin: var(--space-md) 0; }
.level__facts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.level__facts span { border: 1px solid var(--ink-line); padding: var(--space-2xs) var(--space-sm); font-size: 13px; color: var(--text-inv-2); }
.level__text { margin: var(--space-md) 0; color: var(--text-inv-2); }
.level__zones { list-style: none; padding: 0; margin: 0; }
.level__zones li { padding: var(--space-sm) 0; border-top: 1px solid var(--ink-line); font: 400 16px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }

/* ========== Rails (carousels) ========== */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--pad); scroll-padding: 0 var(--pad);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper); box-shadow: 0 6px 24px rgba(24, 24, 26, .18);
  display: grid; place-items: center; transition: opacity .25s;
}
.arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.arrow--prev { left: calc(var(--pad) / 2); }
.arrow--next { right: calc(var(--pad) / 2); }
.arrow:disabled { opacity: 0; pointer-events: none; }
.card {
  position: relative; flex: 0 0 clamp(260px, 24vw, 360px); aspect-ratio: 3 / 4; margin: 0;
  overflow: hidden; scroll-snap-align: start; background: var(--ink);
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover img { transform: scale(1.05); }
.card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 24, 26, .8) 0%, rgba(24, 24, 26, 0) 55%); }
.card--zone figcaption { display: flex; flex-direction: column; justify-content: flex-end; }
.card figcaption {
  position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); z-index: 1;
  color: var(--text-inv); font: 400 20px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; text-align: center;
}
.card figcaption small { display: block; margin-top: var(--space-xs); font: 400 13px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-inv-2); }
.card--ink { display: grid; place-items: center; background: var(--ink-2); }
.card--ink::after { display: none; }
.card__big { font: 200 clamp(72px, 7vw, 110px)/1 var(--font-display); color: var(--accent-soft); }

/* ========== CTA ========== */
.cta { position: relative; min-height: 92svh; overflow: hidden; color: var(--text-inv); display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); }
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 24, 26, .8) 0%, rgba(24, 24, 26, .45) 45%, rgba(24, 24, 26, .9) 100%); }
.cta__content { position: relative; padding: var(--space-2xl) var(--pad) 0; max-width: 820px; }
.cta h2 { font-weight: 300; font-size: clamp(34px, 4.6vw, 72px); }
/* заголовок финального экрана на компьютере — ровно в три строки */
@media (min-width: 1025px) {
  .cta h2 .h2-line { display: block; white-space: nowrap; }
  .cta__content { max-width: 1000px; }
}
.cta__content p { margin: var(--space-md) 0 var(--space-lg); color: var(--text-inv-2); font-size: 18px; max-width: 48ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.wordmark {
  position: relative; margin: var(--space-xl) 0 -.16em; padding: 0 var(--pad);
  font: 300 9vw/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap; color: var(--text-inv);
}
.foot { background: var(--ink); color: var(--text-inv-2); padding: var(--space-lg) var(--pad); font-size: 13px; display: grid; gap: var(--space-xs); border-top: 1px solid var(--ink-line); }

/* доп. токены v3 */
:root {
  --kids-bg: rgba(142, 106, 89, .09);
  --surface: #FFFFFF;
  --muted-bar: #BDB5AA;
  /* цвета зон для графика расписания */
  --z-aqua: #4F8391;
  --z-combat: #A4593F;
  --z-mma: #6E6A66;
  --z-gym: #C29555;
  --z-create: #8E6A59;
  --z-it: #5F6F92;
}

/* ========== Общие секции ========== */
.sec { padding: var(--space-2xl) var(--pad); }
.sec--ink { background: var(--ink); color: var(--text-inv); }
.sec--paper2 { background: var(--paper-2); }
.kicker { font: 400 13px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-deep); }
.sec--ink .kicker { color: var(--accent-soft); }
.muted { color: var(--text-2); font-size: 14px; }

/* ========== 1. Цифры-якоря ========== */
.anchors {
  position: absolute; right: var(--pad); bottom: 11vh; margin: 0;
  display: grid; gap: 1px; background: rgba(244, 241, 236, .25);
  border: 1px solid rgba(244, 241, 236, .3);
}
.anchors div { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: var(--space-md) var(--space-lg); min-width: 260px; }
.anchors dt { font-size: 13px; color: var(--text-inv-2); }
.anchors dd { margin: var(--space-2xs) 0 0; display: flex; align-items: baseline; gap: var(--space-xs); }
.anchors b { font: 300 44px/1 var(--font-display); }
.anchors span { font: 400 14px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); }

/* ========== 2. Что мы продаём ========== */
.sell { background: var(--ink); color: var(--text-inv); padding: var(--space-2xl) var(--pad); }
.sell .kicker { text-align: center; }
.versus { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); align-items: center; gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: var(--space-xl) auto 0; }
.vs { border: 1px solid var(--ink-line); padding: var(--space-xl); }
.vs__t { font: 400 12px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--text-inv-2); }
.vs__v { font: 300 clamp(28px, 3.4vw, 52px)/1.05 var(--font-display); text-transform: uppercase; margin: var(--space-md) 0; }
.vs__d { color: var(--text-inv-2); }
.vs--no { opacity: .55; }
.vs--no .vs__v { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--accent); }
.vs--yes { border-color: var(--accent); background: rgba(142, 106, 89, .12); }
.vs--yes .vs__t { color: var(--accent-soft); }
.vs__arrow svg { width: 100%; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.5; }

/* ========== 2а. Два сценария ========== */
.scen { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: 0 auto; align-items: end; }
.scard { padding: var(--space-xl); display: grid; gap: var(--space-md); align-content: start; }
.scard--main { background: var(--ink); color: var(--text-inv); min-height: 420px; align-content: end; }
.scard--alt { border: 1px solid var(--line); background: var(--paper-2); }
.scard__tag { font: 400 12px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-deep); }
.scard--main .scard__tag { color: var(--accent-soft); }
.scard h3 { font: 300 clamp(26px, 2.6vw, 40px)/1.05 var(--font-display); text-transform: uppercase; }
.scard--main h3 { font-size: clamp(34px, 4.4vw, 68px); }
.scard--alt h3 { font-size: clamp(22px, 2vw, 30px); }
.scard__text { color: var(--text-2); max-width: 34em; }
.scard--main .scard__text { color: var(--text-inv-2); font-size: 18px; }
.scen__base { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: var(--space-lg) auto 0; }
.scen__base div { border-top: 1px solid var(--accent); padding-top: var(--space-sm); }
.scen__base dt { font: 400 13px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); }
.scen__base dd { margin: var(--space-xs) 0 0; color: var(--text-2); }
.metaphor__note { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--ink-line); font-size: 15px; }
.title .title__lead { color: var(--text); font-weight: 500; }
@media (max-width: 1024px) {
  .scen, .scen__base { grid-template-columns: minmax(0, 1fr); }
  .scard--main { min-height: 0; }
}
@media (max-width: 480px) {
  .scard { padding: var(--space-lg) var(--space-md); }
}

/* ========== 3. Инвестиционный тезис ========== */
.theses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: 0 auto; }
.thesis { border-top: 1px solid var(--line); padding-top: var(--space-md); }
.thesis__n { font: 300 15px var(--font-display); color: var(--accent); letter-spacing: .1em; }
.thesis h3 { font-size: clamp(20px, 1.8vw, 26px); margin: var(--space-sm) 0; }
.thesis p:last-child { color: var(--text-2); }

/* ========== 4. Бизнес-модель ========== */
.metaphor { max-width: 900px; margin: 0 auto var(--space-xl); text-align: center; color: var(--text-inv-2); font-size: 18px; }
.card--zone { flex-basis: clamp(280px, 26vw, 380px); }
.card__name { display: block; }
.card__area { display: block; font: 400 13px var(--font-display); letter-spacing: .12em; color: var(--accent-soft); margin-bottom: var(--space-2xs); }
.zones__foot { text-align: center; margin-top: var(--space-lg); color: var(--text-inv-2); }
.subblocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: var(--space-xl) auto 0; }
.sub { border: 1px solid var(--ink-line); padding: var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.sub h3 { font-size: clamp(19px, 1.7vw, 24px); }
.sub p { color: var(--text-inv-2); }
.sub b { color: var(--text-inv); font-weight: 500; }
.sub--accent { grid-column: 1 / -1; border-color: var(--accent); }

/* ========== 5. Трансформатор расписания ========== */
.transformer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-xl); align-items: center; max-width: var(--wrap, 1400px); margin: 0 auto; }
.transformer__text { display: grid; gap: var(--space-md); font-size: 18px; color: var(--text-2); }
.transformer__text b { color: var(--text); font-weight: 500; }
.transformer__chart .kicker { margin-bottom: var(--space-md); }
.hallday__track { position: relative; height: 84px; border: 1px solid var(--line); background: var(--surface, #fff); overflow: hidden; }
.slot {
  position: absolute; top: 0; bottom: 0; background: var(--c); color: var(--text-inv);
  padding: var(--space-xs) var(--space-sm); border-right: 2px solid var(--paper);
  font-size: 13px; line-height: 1.25; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
}
.slot b { font: 400 12px var(--font-display); letter-spacing: .04em; opacity: .85; }
.hallday__scale { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); font: 400 11px var(--font-display); color: var(--text-2); margin-top: var(--space-2xs); }

/* ========== 6. Рынок ========== */
.market { list-style: none; margin: 0 auto; padding: 0; max-width: var(--wrap, 1400px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.market li { border-top: 2px solid var(--accent); padding-top: var(--space-md); display: grid; gap: var(--space-xs); }
.market b { font: 300 clamp(34px, 3.4vw, 52px)/1 var(--font-display); }
.market span { color: var(--text-2); font-size: 15px; }

/* ========== 7. Детские деньги ========== */
.kids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: 0 auto; }
.kid { border-top: 1px solid var(--ink-line); padding-top: var(--space-md); }
.kid__n { font: 300 15px var(--font-display); color: var(--accent-soft); letter-spacing: .1em; }
.kid h3 { font-size: clamp(19px, 1.7vw, 25px); margin: var(--space-sm) 0 var(--space-md); }
.kid p:last-child { color: var(--text-inv-2); }

/* ========== 8. Финансовая модель ========== */
.years { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); max-width: var(--wrap, 1400px); margin: 0 auto var(--space-xl); }
.year { border: 1px solid var(--line); padding: var(--space-lg); display: grid; gap: var(--space-sm); background: #fff; }
.year--mature, .year.is-mature { border-color: var(--ink); }
.year__t { font: 400 14px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); }
.year__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); font-size: 14px; color: var(--text-2); }
.year__row b { font: 300 clamp(20px, 1.8vw, 26px) var(--font-display); color: var(--text); white-space: nowrap; }
.year__bar { height: 6px; background: var(--paper-2); }
.year__bar i { display: block; height: 100%; background: var(--accent); }
.year.is-mature .year__bar i { background: var(--ink); }

.streams { max-width: var(--wrap, 1400px); margin: 0 auto; }
.streams h3 { font-size: clamp(20px, 2vw, 28px); margin-bottom: var(--space-lg); }
.streams__list { display: grid; gap: var(--space-xs); }
.stream { display: grid; grid-template-columns: 28px minmax(0, 1.6fr) minmax(0, 1fr) 128px 56px; gap: var(--space-md); align-items: center; padding: var(--space-sm); border-bottom: 1px solid var(--line); }
.stream__n { align-self: start; font: 400 13px/1.55 var(--font-display); color: var(--text-2); font-variant-numeric: tabular-nums; }
.stream__name { align-self: start; font-size: 16px; line-height: 1.35; }
.stream__name small { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.stream__bar { align-self: start; margin-top: 5px; height: 12px; background: var(--paper-2); }
.stream__bar i { display: block; height: 100%; background: var(--muted-bar, #BDB5AA); }
.stream__v { align-self: start; text-align: right; font: 400 16px/1.35 var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stream__share { align-self: start; text-align: right; font: 400 15px/1.45 var(--font-display); color: var(--text-2); font-variant-numeric: tabular-nums; }
.stream.is-kids { background: var(--kids-bg); border-bottom-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.stream.is-kids .stream__bar i { background: var(--accent); }
.stream.is-kids .stream__name, .stream.is-kids .stream__v, .stream.is-kids .stream__share { color: var(--accent-deep); font-weight: 500; }
.streams__total { display: grid; grid-template-columns: 28px minmax(0, 1.6fr) minmax(0, 1fr) 128px 56px; gap: var(--space-md); align-items: baseline; padding: var(--space-md) var(--space-sm) 0; font: 400 15px var(--font-display); text-transform: uppercase; letter-spacing: .1em; }
.streams__total > span:first-child { grid-column: 1 / 4; }
.streams__total b { grid-column: 4; text-align: right; white-space: nowrap; }
.streams__total > span:last-child { grid-column: 5; text-align: right; }
.streams__total b { font-size: 26px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.streams__note { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line); color: var(--text-2); max-width: 90ch; }

.entry-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: var(--space-xl) auto 0; padding-top: var(--space-xl); border-top: 1px solid var(--line); }
.enum p:last-child { color: var(--text-2); font-size: 15px; margin-top: var(--space-xs); }
.enum__v { font: 300 clamp(38px, 4vw, 62px)/1 var(--font-display); white-space: nowrap; }
.enum__v small { font-size: .32em; letter-spacing: .1em; text-transform: uppercase; margin-left: var(--space-xs); color: var(--accent-deep); }
.finance__cta { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; max-width: var(--wrap, 1400px); margin: var(--space-xl) auto 0; }

/* ========== 9. Актив: паспорт ========== */
.passport { max-width: var(--wrap, 1400px); margin: var(--space-xl) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
.passport > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--ink-line); }
.passport dt { font: 400 13px/1.5 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft); }
.passport dd { margin: 0; color: var(--text-inv); }

/* ========== 10. Визуализация ========== */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: var(--wrap, 1400px); margin: 0 auto var(--space-xl); }
.shot { margin: 0; position: relative; }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.shot figcaption { position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--text-inv); font-size: 13px; padding: var(--space-xs) var(--space-md); }
.plans { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: 0 auto; align-items: start; }
.plans__tabs { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.ptab { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-sm); align-items: center; background: none; border: 0; border-left: 3px solid transparent; margin-left: -2px; padding: var(--space-sm) var(--space-md); text-align: left; cursor: pointer; font: 400 22px var(--font-display); color: var(--text-2); }
.ptab small { font: 400 13px var(--font-body); }
.ptab.is-active { border-left-color: var(--accent); color: var(--text); background: #fff; }
.plans__view { margin: 0; background: #fff; border: 1px solid var(--line); padding: var(--space-md); }
.plans__view img { width: 100%; mix-blend-mode: multiply; }
.plans__view figcaption { margin-top: var(--space-sm); font-size: 13px; color: var(--text-2); }

/* ========== 11. Команда ========== */
.team { max-width: 820px; margin: 0 auto; text-align: center; display: grid; gap: var(--space-md); }
.team__name { font: 400 clamp(26px, 2.6vw, 38px) var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.team__text { color: var(--text-2); font-size: 18px; }
.team__lead { font: 400 18px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }

/* ========== 12. Варианты входа ========== */
.entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: 0 auto; }
.ecard { border: 1px solid var(--line); padding: var(--space-xl); display: grid; gap: var(--space-md); align-content: start; background: #fff; }
.ecard--main { background: var(--ink); color: var(--text-inv); border-color: var(--ink); }
.ecard__tag { font: 400 12px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-deep); }
.ecard--main .ecard__tag { color: var(--accent-soft); }
.ecard h3 { font-size: clamp(22px, 2vw, 30px); }
.ecard__v { font: 300 clamp(36px, 3.6vw, 56px)/1 var(--font-display); }
.ecard__text { color: var(--text-2); }
.ecard--main .ecard__text { color: var(--text-inv-2); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); font-size: 15px; }
.ticks li { padding-left: var(--space-md); position: relative; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--accent); }

/* ========== 13. Контакты ========== */
.contacts { margin: var(--space-xl) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-xl); max-width: 720px; }
.contacts div { border-top: 1px solid var(--ink-line); padding-top: var(--space-xs); }
.contacts dt { font-size: 13px; color: var(--text-inv-2); }
.contacts dd { margin: var(--space-2xs) 0 0; font: 400 19px var(--font-display); }
.contacts a { text-decoration: none; }
.contacts a:hover { color: var(--accent-soft); }
.foot a { color: var(--text-inv); }

/* ========== Появление ========== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ========== Адаптив ========== */
@media (max-width: 1480px) {
  .hdr__phone { display: none; }
  .hdr__nav { gap: var(--space-md); }
}
@media (max-width: 1200px) {
  .hdr__nav { display: none; }
  .hdr__cta { margin-left: auto; }
  .stream { grid-template-columns: 24px minmax(0, 1.6fr) minmax(0, 1fr) 112px 48px; gap: var(--space-sm); }
}
@media (max-width: 1024px) {
  :root { --space-2xl: 88px; --space-xl: 48px; }
  .hero__shade { background: linear-gradient(0deg, rgba(24, 24, 26, .96) 0%, rgba(24, 24, 26, .8) 40%, rgba(24, 24, 26, .3) 75%, rgba(24, 24, 26, .2) 100%); }
  .cover { right: auto; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; width: max(100vw, calc(var(--hh) * var(--ratio))); height: max(var(--hh), calc(100vw / var(--ratio))); }
  .hero__content { top: calc(var(--hdr-h) + 4vh); bottom: auto; transform: none; max-width: none; right: var(--pad); }
  .hero h1 { font-size: clamp(30px, 5.4vw, 48px); }
  .hero__sub { font-size: 18px; }
  .anchors { position: static; margin: 0 var(--pad) var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .anchors div { min-width: 0; padding: var(--space-sm) var(--space-md); }
  .anchors b { font-size: 30px; }
  .anchors span { font-size: 12px; }
  .theses, .kids, .years, .market, .entry-nums, .gallery, .entry, .subblocks, .transformer, .anatomy__grid, .plans, .passport { grid-template-columns: minmax(0, 1fr); }
  .plans__tabs { flex-direction: row; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--line); }
  .ptab { border-left: 0; border-bottom: 3px solid transparent; margin: 0 0 -1px; }
  .ptab.is-active { border-bottom-color: var(--accent); }
  .drawing { margin-left: 44px; }
  .level { min-height: 0; }
}
@media (max-width: 768px) {
  :root { --hdr-h: 60px; --space-2xl: 64px; }
  .hdr { gap: var(--space-sm); }
  .logo span { font-size: 15px; letter-spacing: .1em; }
  .hero { height: auto; min-height: 0; padding-bottom: var(--space-lg); }
  .hero__content { position: static; padding: calc(var(--hdr-h) + 48vh) var(--pad) var(--space-lg); }
  .cover, .hero__shade { height: calc(var(--hdr-h) + 46vh); top: 0; transform: none; left: 0; width: 100%; }
  .cover { transform-origin: 50% 50%; }
  .cover__img { object-position: 50% 40%; }
  .hero__shade { background: linear-gradient(0deg, var(--ink) 4%, rgba(24, 24, 26, .55) 45%, rgba(24, 24, 26, .3) 100%); }
  .hero { background: var(--ink); }
  .anchors { grid-template-columns: minmax(0, 1fr); margin-inline: var(--pad); }
  .arrow { display: none; }
  .stream { grid-template-columns: minmax(0, 1fr) 96px; gap: var(--space-xs) var(--space-sm); }
  .stream__n { display: none; }
  .stream__bar { grid-column: 1 / -1; grid-row: 2; }
  .stream__share { grid-column: 2; grid-row: 3; }
  .stream__v { grid-row: 3; grid-column: 1; text-align: left; }
  .passport > div, .contacts { grid-template-columns: minmax(0, 1fr); }
  .streams__total { grid-template-columns: minmax(0, 1fr) auto auto; padding-inline: var(--space-sm); }
  .streams__total > span:first-child { grid-column: 1; }
  .streams__total b { grid-column: 2; }
  .streams__total > span:last-child { grid-column: 3; }
  .finance__cta { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
  body { font-size: 15px; }
  /* на телефоне надпись не прячем: одни полоски принимали за меню */
  .logo > span { font-size: 12px; letter-spacing: .1em; line-height: 1.15; }
  .logo__l2 { display: block; }
  .hdr__cta { padding: 0 var(--space-sm); font-size: 11px; letter-spacing: .04em; }
  .hero h1 { font-size: 28px; }
  .hero__sub { font-size: 16px; }
  .hero__actions .btn, .cta__actions .btn, .finance__cta .btn { width: 100%; }
  .sell__big { font-size: 22px; }
  .title::before { width: 120px; margin-bottom: var(--space-md); }
  .card { flex-basis: 78vw; }
  .card--zone { flex-basis: 80vw; }
  .sub { padding: var(--space-md); }
  .slot { font-size: 11px; padding: var(--space-2xs) var(--space-xs); }
}
@media (max-width: 360px) {
  :root { --pad: 16px; }
  .hero h1 { font-size: 25px; }
  .hdr__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ========== Full HD и шире ========== */
@media (min-width: 1680px) {
  :root { --pad: 96px; --hdr-h: 88px; --space-xl: 80px; --space-2xl: 150px; --wrap: 1720px; }
  body { font-size: 18px; }
  .hdr__nav { gap: 44px; }
  .hdr__nav a, .hdr__phone { font-size: 16px; }
  .logo span { font-size: 22px; }
  .btn { min-height: 60px; font-size: 16px; padding: 0 40px; }
  .btn--sm { min-height: 46px; font-size: 13px; padding: 0 var(--space-lg); }
  .title { max-width: 1100px; }
  .title h2 { font-size: 56px; }
  .title p { font-size: 19px; }
  .hero h1 { font-size: 76px; }
  .hero__sub { font-size: 26px; }
  .anchors div { min-width: 320px; padding: var(--space-lg); }
  .anchors b { font-size: 60px; }
  .sell__big { font-size: 50px; }
  .market b { font-size: 60px; }
  .stream__name { font-size: 18px; }
  .stream__v { font-size: 19px; }
  .enum__v { font-size: 72px; }
  .card { flex-basis: calc((100vw - 2 * var(--pad) - 4 * 16px) / 5); }
  .card--zone { flex-basis: calc((100vw - 2 * var(--pad) - 3 * 16px) / 4); }
  .card figcaption { font-size: 24px; }
  .card figcaption small { font-size: 15px; }
  .arrow { width: 60px; height: 60px; }
  .level__name { font-size: 38px; }
  .cta h2 { font-size: 80px; }
  .contacts dd { font-size: 22px; }
}

/* ========== Графика блока 4 ========== */
.sub__note { font: 400 13px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); margin-top: var(--space-md); }
.packs { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.pack { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); align-items: center; padding: var(--space-sm) 0; border-top: 1px solid var(--ink-line); }
.pack__n { font: 400 16px var(--font-display); letter-spacing: .04em; }
.pack__hint { grid-row: 2; font-size: 13px; color: var(--text-inv-2); }
.pack__chips { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; justify-content: flex-end; }
.pack__chips span { border: 1px solid var(--accent); color: var(--accent-soft); padding: 3px var(--space-sm); font-size: 13px; white-space: nowrap; }
.pack__chips i { color: var(--text-inv-2); font-style: normal; font-size: 13px; }

.contours { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 2px; }
.contours li { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: var(--space-md); align-items: baseline; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; background: linear-gradient(90deg, var(--c) 0 6px, rgba(244, 241, 236, .04) 6px); }
.contours b { grid-column: 2; font: 400 16px var(--font-display); letter-spacing: .04em; }
.contours span { grid-column: 2; font-size: 14px; color: var(--text-inv-2); }
.family { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.family li { border: 1px solid var(--ink-line); padding: var(--space-sm); display: grid; gap: 2px; }
.family b { font-size: 13px; color: var(--accent-soft); font-weight: 400; }
.family span { font: 400 15px var(--font-display); }

.daystrip { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; counter-reset: d; }
.daystrip li { position: relative; padding: var(--space-md) var(--space-sm) var(--space-sm); background: rgba(244, 241, 236, .05); border-top: 2px solid var(--accent); display: grid; gap: var(--space-2xs); align-content: start; }
.daystrip b { font: 400 20px var(--font-display); }
.daystrip span { font-size: 13px; color: var(--text-inv-2); }
.chain { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: center; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--ink-line); }
.chain ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-xs); }
.chain li { font: 400 15px var(--font-display); letter-spacing: .06em; text-transform: uppercase; padding: var(--space-xs) var(--space-md); border: 1px solid var(--accent); white-space: nowrap; }
.chain p { color: var(--text-inv-2); font-size: 15px; }

/* ========== Графика блока 7 ========== */
.kid { display: grid; align-content: start; gap: var(--space-sm); }
.kid__lead { color: var(--text-inv-2); }
.kid__ct { margin-top: var(--space-sm); font: 400 12px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); }
.kid__tail { font-size: 14px; color: var(--text-inv-2); border-top: 1px solid var(--ink-line); padding-top: var(--space-sm); }

.growth { display: grid; gap: var(--space-sm); }
.growth__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs) var(--space-md); font-size: 14px; }
.growth__row i { grid-row: 2; grid-column: 1 / -1; height: 10px; background: var(--accent); max-width: 100%; }
.growth__row b { grid-row: 1; grid-column: 2; font: 400 20px var(--font-display); color: var(--accent-soft); }
.cuts { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.cuts li { font-size: 13px; padding: 3px var(--space-sm); border: 1px solid var(--ink-line); color: var(--text-inv-2); }
.cuts .is-cut { text-decoration: line-through; opacity: .6; }
.cuts .is-keep { border-color: var(--accent); color: var(--text-inv); }

.retention { display: grid; gap: var(--space-sm); }
.retention__row span { display: block; font-size: 14px; color: var(--text-inv-2); margin-bottom: var(--space-2xs); }
.retention__row i { display: block; height: 26px; background: rgba(142, 106, 89, .35); border-left: 2px solid var(--accent); display: flex; align-items: center; }
.retention__row b { font: 400 14px var(--font-display); padding-left: var(--space-sm); white-space: nowrap; }

.switch { display: grid; gap: var(--space-sm); }
.switch__row { border: 1px solid var(--ink-line); padding: var(--space-sm) var(--space-md); display: grid; gap: var(--space-xs); }
.switch__row.is-bad { opacity: .6; }
.switch__l { font-size: 13px; color: var(--text-inv-2); }
.switch__flow { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.switch__flow span { font-size: 13px; padding: 3px var(--space-sm); border: 1px solid var(--accent); white-space: nowrap; }
.switch__flow i { width: 14px; height: 1px; background: var(--accent-soft); }
.switch__row.is-bad .switch__flow span:last-child { border-color: var(--text-inv-2); color: var(--text-inv-2); }
.switch__r { font: 400 17px var(--font-display); letter-spacing: .04em; }
.switch__row:not(.is-bad) .switch__r { color: var(--accent-soft); }

@media (max-width: 1024px) {
  .versus { grid-template-columns: minmax(0, 1fr); }
  .vs__arrow { transform: rotate(90deg); margin: 0 auto; width: 60px; }
  .daystrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}
@media (max-width: 480px) {
  .vs { padding: var(--space-md); }
  .daystrip { grid-template-columns: minmax(0, 1fr); }
  .pack { grid-template-columns: minmax(0, 1fr); }
  .pack__chips { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .chain ul { flex-wrap: wrap; }
}

/* ========== Выравнивание и анимации ========== */
.thesis, .kid, .year, .ecard, .market li, .sub, .enum { align-content: start; }

/* цепочка школа → комплекс → дом: стрелки снаружи рамок */
.chain ul { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.chain .arrowlink { color: var(--accent-soft); font: 400 18px/1 var(--font-display); }

/* расписание зала */
.hallday__track { height: 96px; background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, transparent 6px 12px); }
.slot { font-size: 12px; line-height: 1.3; padding: var(--space-xs); }
.slot span { overflow-wrap: break-word; hyphens: auto; }
.slot b { font-size: 11px; }
.gapslot { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; font: 400 11px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }

/* ---- анимации ---- */
.btn, .card img, .thesis, .kid, .year, .ecard, .pack, .contours li, .family li, .daystrip li, .switch__row, .ptab, .band, .arrow, .hdr__nav a, .stream {
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s var(--ease);
}
.hdr__nav a { position: relative; }
.hdr__nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--accent); transition: right .35s var(--ease); }
.hdr__nav a:hover::after { right: 0; }
.thesis:hover, .kid:hover { transform: translateY(-3px); }
.year:hover, .ecard:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(24, 24, 26, .1); }
.ecard--main:hover { box-shadow: 0 12px 40px rgba(24, 24, 26, .4); }
.pack:hover .pack__chips span, .switch__row:not(.is-bad):hover .switch__flow span { background: rgba(142, 106, 89, .18); }
.contours li:hover, .family li:hover, .daystrip li:hover { transform: translateX(4px); }
.stream:hover { background: rgba(142, 106, 89, .06); }
.market li b, .enum__v, .anchors b { transition: color .3s var(--ease); }
.market li:hover b { color: var(--accent-deep); }
.shot img, .plans__view img { transition: transform .6s var(--ease), opacity .4s var(--ease); }
.shot:hover img { transform: scale(1.03); }
.plans__view img.is-swap { opacity: 0; }
.level > * { animation: rise .45s var(--ease) both; }
.level > :nth-child(2) { animation-delay: .04s; }
.level > :nth-child(3) { animation-delay: .08s; }
.level > :nth-child(4) { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* полосы диаграмм выезжают при появлении блока */
.year__bar i, .stream__bar i, .growth__row i, .retention__row i {
  width: 0 !important;
  transition: width 1.1s var(--ease);
}
.in .year__bar i, .in .stream__bar i, .in .growth__row i, .in .retention__row i,
.year.in .year__bar i { width: var(--w) !important; }

@media (prefers-reduced-motion: reduce) {
  .year__bar i, .stream__bar i, .growth__row i, .retention__row i { width: var(--w) !important; transition: none; }
  .thesis:hover, .kid:hover, .year:hover, .ecard:hover, .contours li:hover, .family li:hover, .daystrip li:hover { transform: none; }
}

/* расписание зала на узких экранах — вертикально */
@media (max-width: 680px) {
  .hallday__track { position: static; height: auto; display: grid; gap: 4px; border: 0; background: none; }
  .slot { position: static !important; width: auto !important; left: auto !important; flex-direction: row; align-items: baseline; gap: var(--space-sm); padding: var(--space-sm); border-right: 0; }
  .slot b { white-space: nowrap; }
  .gapslot { position: static; padding: var(--space-xs); border: 1px dashed var(--line); }
  .hallday__scale { display: none; }
}

/* денежные значения не переносятся */
.stream__v, .streams__total b, .enum__v, .year__row b, .anchors dd, .market li b { white-space: nowrap; }
.ecard { grid-template-columns: minmax(0, 1fr); }
.ecard__v { overflow-wrap: break-word; }

/* цена варианта входа — в одну строку на узких экранах */
@media (max-width: 520px) {
  .ecard { padding: var(--space-md); }
  .ecard__v { font-size: clamp(22px, 6.4vw, 30px); white-space: nowrap; }
}

/* ========== Финмодель: годы, расходы, доходность, чувствительность ========== */
.years { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.year { padding: var(--space-md); gap: var(--space-sm); }
.year__bars { display: grid; gap: 4px; }
.year__bar { height: 8px; background: var(--paper-2); }
.year__bar i { display: block; height: 100%; background: var(--muted-bar); }
.year__bar--profit i { background: var(--accent); }
.year.is-mature .year__bar i { background: var(--ink-3, #3A3A3F); }
.year.is-mature .year__bar--profit i { background: var(--accent-deep); }
.year__rows { margin: 0; display: grid; gap: var(--space-xs); }
.year__rows > div { display: grid; gap: 1px; }
.year__rows dt { font-size: 12px; color: var(--text-2); }
.year__rows dd { margin: 0; font: 400 17px var(--font-display); white-space: nowrap; }
.years__note { max-width: var(--wrap, 1400px); margin: var(--space-md) auto var(--space-xl); font-size: 14px; color: var(--text-2); }

.opex { max-width: var(--wrap, 1400px); margin: var(--space-xl) auto 0; padding-top: var(--space-xl); border-top: 1px solid var(--line); }
.opex__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.opex__total { font: 300 44px/1 var(--font-display); display: flex; align-items: baseline; gap: var(--space-xs); }
.opex__total span { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.opex__list { display: grid; gap: var(--space-xs); }
.ox { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 116px; gap: var(--space-md); align-items: center; padding: var(--space-xs) 0; border-bottom: 1px solid var(--line); }
.ox__name { font-size: 15px; }
.ox__bar { height: 10px; background: var(--paper-2); }
.ox__bar i { display: block; height: 100%; width: 0; background: var(--muted-bar); transition: width 1s var(--ease); }
.in .ox__bar i { width: var(--w); }
.ox__v { text-align: right; font: 400 15px var(--font-display); white-space: nowrap; }
.opex__staff { margin-top: var(--space-md); font-size: 14px; color: var(--text-2); max-width: 90ch; }

.returns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: var(--space-lg) auto 0; }
.ret p:last-child { color: var(--text-2); font-size: 15px; margin-top: var(--space-xs); }
.ret__v { font: 300 clamp(32px, 3.4vw, 52px)/1 var(--font-display); white-space: nowrap; }
.ret__v small { font-size: .32em; letter-spacing: .1em; text-transform: uppercase; margin-left: var(--space-xs); color: var(--accent-deep); }

.sens { max-width: var(--wrap, 1400px); margin: var(--space-xl) auto 0; padding-top: var(--space-xl); border-top: 1px solid var(--line); }
.sens__lead { color: var(--text-2); margin: var(--space-xs) 0 var(--space-lg); }
.sens__table { width: 100%; border-collapse: collapse; min-width: 640px; }
.sens__table th, .sens__table td { padding: var(--space-sm) var(--space-md); border: 1px solid var(--line); text-align: left; }
.sens__table thead th { font: 400 13px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); background: var(--paper-2); }
.sens__row { background: var(--paper-2); }
.sens__row b { display: block; font: 400 20px var(--font-display); }
.sens__row small { font-size: 12px; color: var(--text-2); }
.sens__table td { font-size: 15px; }
.sens__table td.is-base { background: var(--kids-bg); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 500; }
.sens__note { margin-top: var(--space-md); font-size: 14px; color: var(--text-2); max-width: 90ch; }

@media (max-width: 1024px) {
  .years { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .returns { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}
@media (max-width: 768px) {
  .years { grid-template-columns: minmax(0, 1fr); }
  .ox { grid-template-columns: minmax(0, 1fr) 104px; }
  .ox__bar { grid-column: 1 / -1; grid-row: 2; }
  .opex__total { font-size: 34px; }
}

/* горизонтальная прокрутка для широких таблиц */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sens { min-width: 0; }

/* кнопки первого экрана не слипаются на больших экранах */
.hero__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-md); margin-top: var(--space-md); }
@media (min-width: 1680px) {
  .hero__content { max-width: min(760px, 44vw); }
  .hero__actions { gap: 20px; }
}

/* подписи карточек зон читаются и на светлых кадрах */
.card--zone::after { background: linear-gradient(0deg, rgba(24,24,26,.92) 0%, rgba(24,24,26,.65) 38%, rgba(24,24,26,0) 68%); }
.card--zone figcaption { text-shadow: 0 1px 10px rgba(24,24,26,.6); }
.card__area { color: var(--accent-soft); }

/* ========== Баннер cookie ========== */
.cookie {
  position: fixed; left: var(--pad); right: var(--pad); bottom: var(--space-md); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg);
  background: var(--ink); color: var(--text-inv-2); border: 1px solid var(--ink-line);
  box-shadow: 0 16px 48px rgba(24, 24, 26, .28);
  animation: cookie-in .35s var(--ease) both;
}
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cookie--out { opacity: 0; transform: translateY(16px); transition: opacity .25s, transform .25s; }
.cookie__text { font-size: 14px; max-width: 86ch; }
.cookie__text a { color: var(--accent-soft); }
.cookie__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
@media (max-width: 768px) {
  .cookie { left: 0; right: 0; bottom: 0; border-inline: 0; padding: var(--space-md) var(--pad); }
  .cookie__actions { width: 100%; }
  .cookie__actions .btn { flex: 1; }
}

/* ========== Что входит в сделку ========== */
.deal { max-width: var(--wrap, 1400px); margin: var(--space-xl) auto 0; padding-top: var(--space-xl); border-top: 1px solid var(--ink-line); }
.deal h3 { font-size: clamp(20px, 2vw, 28px); margin-bottom: var(--space-lg); }
.deal__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-xl); }
.deal__list li { position: relative; padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--ink-line); color: var(--text-inv); }
.deal__list li::before { content: ''; position: absolute; left: 0; top: 1.4em; width: 10px; height: 1px; background: var(--accent); }

/* ========== Кому подходит ========== */
.fits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); max-width: var(--wrap, 1400px); margin: 0 auto; }
.fit { border-top: 2px solid var(--accent); padding-top: var(--space-md); }
.fit h3 { font-size: clamp(18px, 1.7vw, 24px); margin-bottom: var(--space-xs); }
.fit p { color: var(--text-2); }

/* ========== Что нужно сделать покупателю ========== */
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: var(--wrap, 1400px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.step { display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.step__n { font: 300 15px var(--font-display); color: var(--accent); letter-spacing: .1em; }
.step__t { font: 400 clamp(17px, 1.5vw, 21px)/1.25 var(--font-display); }
.step__d { font-size: 14px; color: var(--text-2); }

/* ========== Как поможем после сделки ========== */
.after { max-width: 1000px; margin: 0 auto; }
.after__lead { font: 300 clamp(20px, 2.2vw, 30px)/1.3 var(--font-display); margin-bottom: var(--space-lg); }
.after__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.after__list li { position: relative; padding-left: var(--space-lg); color: var(--text-inv-2); font-size: 17px; }
.after__list li::before { content: ''; position: absolute; left: 0; top: .8em; width: 10px; height: 1px; background: var(--accent-soft); }

/* вводная в подблоке и приписка к структуре выручки */
.sub__intro { color: var(--text-inv-2); }
.streams__hint { margin-top: var(--space-sm); font-size: 14px; color: var(--text-2); }

/* ========== Первый экран: выделенный срок ввода ========== */
.hero__place { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border: 1px solid var(--accent); color: var(--text-inv); background: rgba(142, 106, 89, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero__place b { font-weight: 400; color: var(--accent-soft); }

@media (max-width: 1024px) {
  .deal__list, .fits, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* рендер на телефоне светлее: затемняем только под текстом */
  .hero__shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(24, 24, 26, .92) 34%, rgba(24, 24, 26, .35) 58%, rgba(24, 24, 26, .12) 100%); }
  .cover__img { filter: none; }
}
@media (max-width: 768px) {
  .deal__list, .fits, .steps { grid-template-columns: minmax(0, 1fr); }
  .hero__shade { background: linear-gradient(0deg, var(--ink) 6%, rgba(24, 24, 26, .55) 42%, rgba(24, 24, 26, .15) 70%, rgba(24, 24, 26, .05) 100%); }
}
.plans__badge { display: block; margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-left: 2px solid var(--accent); background: var(--paper-2); color: var(--text); font-size: 13px; }

/* ========== Телефон: облегчённая версия ========== */
@media (max-width: 768px) {
  :root { --space-2xl: 52px; --space-xl: 36px; }
  .title { margin-bottom: var(--space-lg); }
  .title::before { margin-bottom: var(--space-sm); }

  /* повторяющиеся карточки — свайпом, а не столбиком */
  .gallery, .theses, .kids, .daystrip {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) var(--space-sm);
    scroll-padding: 0 var(--pad); scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar, .theses::-webkit-scrollbar, .kids::-webkit-scrollbar, .daystrip::-webkit-scrollbar { display: none; }
  .gallery > *, .theses > *, .kids > * { flex: 0 0 84%; scroll-snap-align: start; }
  .daystrip > * { flex: 0 0 46%; scroll-snap-align: start; }
  .thesis, .kid { border: 1px solid var(--line); padding: var(--space-md); }
  .kid { border-color: var(--ink-line); }
  .gallery { margin-bottom: var(--space-lg); }

  /* подсказка, что ряд листается */
  .swipe-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-sm); font: 400 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
  .sec--ink .swipe-hint { color: var(--text-inv-2); }
  .swipe-hint::after { content: '→'; font-size: 15px; }

  /* годы — компактной таблицей */
  .years { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .year { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none !important; transform: none !important; }
  .year__t { font-size: 12px; }
  .year__bars { display: none; }
  .year__rows { display: contents; }
  .year__rows > div { display: grid; gap: 0; }
  .year__rows > div:nth-child(3) { display: none; }
  .year__rows dt { font-size: 11px; }
  .year__rows dd { font-size: 15px; }

  /* выручка: без пояснений, по одной строке */
  .stream__name small { display: none; }
  .stream { padding: 8px var(--space-sm); }

  /* крупные цифры — в две колонки */
  .entry-nums, .returns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .enum__v, .ret__v { font-size: 34px; }
  .enum p:last-child, .ret p:last-child { font-size: 13px; }
  .returns > :last-child { grid-column: 1 / -1; }

  /* паспорт здания — свёрнут */
  .passport.is-collapsed > div:nth-child(n+6) { display: none; }
  .passport-toggle { display: block; width: 100%; margin-top: var(--space-md); }
}
@media (min-width: 769px) { .swipe-hint, .passport-toggle { display: none; } }

/* ========== Просмотр изображений ========== */
.is-zoomable .shot, .is-zoomable .card, .plans__view.is-zoomable img { cursor: zoom-in; }
.gapslot b { display: none; }
.lvl-tabs, .drawing__open { display: none; }
.lb-open, .lb-open body { overflow: hidden; }
.lb[hidden] { display: none; }
.lb { position: fixed; inset: 0; z-index: 60; background: var(--ink); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lb__stage { overflow: hidden; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + var(--space-2xl) * .5) var(--space-sm) var(--space-sm); }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.lb__cap { margin: 0; padding: var(--space-sm) var(--pad) calc(env(safe-area-inset-bottom, 0px) + var(--space-md)); color: var(--text-inv-2); font-size: 14px; text-align: center; }
.lb.is-zoom .lb__stage { overflow: auto; place-items: start; padding: 0; -webkit-overflow-scrolling: touch; }
.lb.is-zoom .lb__img { max-width: none; max-height: none; width: 240%; cursor: zoom-out; }
.lb__btn { position: absolute; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ink-line); border-radius: 50%; background: rgba(24, 24, 26, .7); color: var(--text-inv); cursor: pointer; }
.lb__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lb__btn:hover { border-color: var(--accent-soft); }
.lb__close { top: calc(env(safe-area-inset-top, 0px) + var(--space-sm)); right: var(--space-sm); }
.lb__prev, .lb__next { top: 50%; transform: translateY(-50%); }
.lb__prev { left: var(--space-sm); }
.lb__next { right: var(--space-sm); }
.lb.is-single .lb__prev, .lb.is-single .lb__next, .lb.is-zoom .lb__prev, .lb.is-zoom .lb__next { display: none; }

/* ========== Телефон: правки 02.10 ========== */
@media (max-width: 768px) {
  /* свайп-ряды листаются только вбок */
  .gallery, .theses, .kids, .daystrip, .rail, .table-wrap { overflow-y: hidden; overscroll-behavior-x: contain; }

  /* планы: переключатель этажей под картинкой */
  .plans { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .plans__view { order: 1; padding: var(--space-sm); }
  .plans__tabs { order: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); border: 0; }
  .ptab { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); margin: 0; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--line); font-size: 18px; }
  .ptab small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ptab.is-active { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

  /* актив: разрез во всю ширину, уровни кнопками под ним */
  .anatomy__grid { gap: var(--space-md); }
  .drawing { margin-left: 0; }
  .band__n { display: none; }
  .band.is-active { box-shadow: inset 2px 0 0 var(--accent-soft); }
  .drawing__open { display: grid; place-items: center; position: absolute; right: 0; bottom: 0; z-index: 2; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ink-line); border-radius: 50%; background: rgba(24, 24, 26, .75); color: var(--text-inv); cursor: pointer; }
  .drawing__open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .lvl-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2xs); }
  .lvl-tab { min-height: 44px; padding: 0; border: 1px solid var(--ink-line); background: none; color: var(--text-inv); font: 400 16px var(--font-display); cursor: pointer; }
  .lvl-tab.is-active { background: var(--accent); border-color: var(--accent); }
  .level__n { display: none; }
  .level__name { margin: 0 0 var(--space-sm); }
  .level__facts { margin-bottom: var(--space-md); }
  .passport > div { gap: var(--space-2xs); }

  /* продлёнка: цепочка в одну строку */
  .chain ul { gap: var(--space-2xs); flex-wrap: nowrap; }
  .chain li { font-size: 13px; padding: var(--space-2xs) var(--space-xs); }
  .chain .arrowlink { font-size: 15px; }

  /* расписание зала: перерыв на своём месте и по форме как остальные строки */
  .gapslot { position: static; width: auto !important; left: auto !important; display: flex; align-items: baseline; gap: var(--space-sm); padding: var(--space-sm); border: 1px dashed var(--line); text-align: left; }
  .gapslot b { display: inline; font: 400 11px var(--font-display); letter-spacing: .04em; white-space: nowrap; }

  /* финальный экран */
  .cta__actions .btn { text-align: center; padding-inline: var(--space-md); line-height: 1.3; }
  .wordmark { font-size: calc((100vw - var(--pad) * 2) / 10.4); }
}

/* плашка срока ввода на телефоне: подпись над значением */
@media (max-width: 768px) {
  .hero__place { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm); line-height: 1.3; }
  .hero__place b { font-size: 11px; letter-spacing: .16em; }
  .hero__place span { letter-spacing: .14em; }
}

/* первый экран на телефоне: плавное приближение — внутри рамки, картинка не вылезает из-под затемнения */
@media (max-width: 768px) {
  .cover { animation: none; overflow: hidden; }
  .cover__img { transform-origin: 50% 40%; animation: drift 24s var(--ease) both; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .cover__img { animation: none; }
}

/* ==========================================================================
   Движение: появление, слайдеры, вкладки, просмотр изображений
   Все стартовые «скрытые» состояния — только под .motion (ставится из JS,
   если в системе не выключена анимация)
   ========================================================================== */

/* появление по очереди внутри группы; после появления задержка снимается */
.reveal.in { transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in.done { transition-delay: 0s; }

/* заголовки секций: линия раскрывается от центра, заголовок выходит из-под маски */
.motion .title.reveal::before { transform: scaleX(0); transition: transform 1.2s var(--ease-x) .1s; }
.motion .title.reveal.in::before { transform: scaleX(1); }
.motion .title.reveal h2 { clip-path: inset(0 0 100% 0); translate: 0 .4em; transition: clip-path 1s var(--ease-x) .15s, translate 1s var(--ease-x) .15s; }
.motion .title.reveal.in h2 { clip-path: inset(-20% -5% -20% -5%); translate: 0 0; }

/* картинки: «шторка» снизу вверх и медленное отдаление кадра */
/* шторка — на самой картинке: обрезанный в ноль блок не замечает IntersectionObserver */
.motion .img-rv img { clip-path: inset(100% 0 0 0); scale: 1.14; transition: clip-path 1.2s var(--ease-x) calc(var(--i, 0) * 90ms), scale 1.8s var(--ease-x) calc(var(--i, 0) * 90ms), transform .6s var(--ease), opacity .45s var(--ease), filter .45s var(--ease); }
.motion .img-rv.in img { clip-path: inset(0 0 0 0); scale: 1; }
.motion .card.img-rv.in img { transition: clip-path 1.2s var(--ease-x), scale 1.8s var(--ease-x), transform 1.2s var(--ease); }
.motion .img-rv figcaption, .motion .drawing.img-rv .bands { opacity: 0; translate: 0 10px; transition: opacity .7s var(--ease) .5s, translate .9s var(--ease-x) .5s; }
.motion .img-rv.in figcaption, .motion .drawing.img-rv.in .bands { opacity: 1; translate: 0 0; }

/* «не продаём → продаём»: стрелка прорисовывается */
.motion .vs__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-x) .45s; }
.motion .versus.in .vs__arrow path { stroke-dashoffset: 0; }

/* расписание зала: занятия встают на день по очереди */
.motion #hallTrack > * { opacity: 0; translate: -14px 0; transition: opacity .6s var(--ease-x), translate .8s var(--ease-x); transition-delay: calc(var(--i, 0) * 90ms + .1s); }
.motion #hallTrack.in > * { opacity: 1; translate: 0 0; }

/* слайдеры: соседние карточки приглушены, текущая — в фокусе */
.is-scrolling-row > * { transition: opacity .6s var(--ease), scale .7s var(--ease-x), transform .7s var(--ease-x), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease); }
.is-scrolling-row > .is-off { opacity: .45; scale: .965; }
.is-scrolling-row > .reveal:not(.in) { opacity: 0; }
.card--zone figcaption > * { transition: translate .7s var(--ease-x), opacity .6s var(--ease); }
.card--zone.is-off figcaption > * { translate: 0 12px; opacity: .55; }
.card--zone figcaption > :nth-child(2) { transition-delay: .05s; }
.card--zone figcaption > :nth-child(3) { transition-delay: .1s; }

/* полоса прогресса под слайдером */
.sprog { display: none; position: relative; height: 2px; margin: var(--space-sm) 0 0; background: var(--line); overflow: hidden; }
.sec--ink .sprog, .kids + .sprog { background: var(--ink-line); }
.rail-wrap + .sprog { margin-inline: var(--pad); }
.sprog.is-on { display: block; }
.sprog i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); transition: transform .25s linear, width .3s var(--ease); }

/* подсказка «Листайте»: стрелка подталкивает, пока ряд не трогали */
.motion .swipe-hint::after { display: inline-block; animation: nudge 1.8s var(--ease) infinite; }
.swipe-hint.is-used::after { animation: none; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(6px); } }

/* вкладки: подложка переезжает к выбранной */
.plans__tabs, .lvl-tabs { position: relative; }
.ptab, .lvl-tab { position: relative; z-index: 1; }
.tab-ind { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; box-sizing: border-box; background: #fff; border-left: 3px solid var(--accent); }
.tab-ind.is-ready { transition: transform .55s var(--ease-x), width .55s var(--ease-x), height .55s var(--ease-x); }
.ptab.is-active { background: transparent; border-left-color: transparent; }
.lvl-tabs .tab-ind { background: var(--accent); border: 0; }
.lvl-tab.is-active { background: transparent; border-color: var(--accent); }
@media (max-width: 1024px) {
  .tab-ind { background: transparent; border-left: 0; border-bottom: 3px solid var(--accent); }
  .ptab.is-active { border-bottom-color: transparent; }
}
@media (max-width: 768px) {
  .plans__tabs .tab-ind { border: 1px solid var(--accent); box-shadow: inset 0 -2px 0 var(--accent); background: #fff; }
  .ptab.is-active { border-color: var(--line); box-shadow: none; }
}

/* смена плана: старый кадр уходит в размытие, новый проявляется */
.plans__view img.is-swap { opacity: 0; scale: .985; filter: blur(6px); }
.plans__view figcaption.is-new { animation: rise .55s var(--ease-x) .2s both; }

/* паспорт на телефоне: раскрытые строки выезжают по очереди */
@media (max-width: 768px) {
  .passport.is-opening > div:nth-child(n+6) { animation: rise .55s var(--ease-x) both; animation-delay: calc((var(--i, 6) - 5) * 60ms); }
}

/* кнопки: заливка проезжает слева направо */
@media (hover: hover) {
  .btn { background-image: linear-gradient(var(--sweep, rgba(244, 241, 236, .1)), var(--sweep, rgba(244, 241, 236, .1))); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .6s var(--ease-x), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
  .btn:hover { background-size: 100% 100%; }
  .btn--accent { --sweep: var(--accent-deep); }
  .btn--accent:hover { background-color: var(--accent); }
  .btn--line:hover { background-color: transparent; }
}

/* просмотр изображений: проявление фона, кадр подъезжает, листание со сдвигом */
.lb { opacity: 0; transition: opacity .38s var(--ease); }
.lb.is-open { opacity: 1; }
.lb__img { transition: opacity .3s var(--ease), translate .5s var(--ease-x), scale .6s var(--ease-x); }
.lb:not(.is-open) .lb__img { scale: .94; }
.lb__cap { transition: opacity .3s var(--ease); }
.lb__btn { transition: border-color .3s var(--ease), background-color .3s var(--ease), opacity .4s var(--ease) .15s; }
.lb:not(.is-open) .lb__btn { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .is-scrolling-row > .is-off { opacity: 1; scale: none; }
  .card--zone.is-off figcaption > * { translate: none; opacity: 1; }
  .reveal.in { transition-delay: 0s; }
}
@media (max-width: 768px) {
  /* полоса прогресса — вплотную под рядом, отступ до следующего блока — уже под ней */
  .is-scrolling-row + .sprog { margin-top: var(--space-2xs); }
  .gallery { margin-bottom: 0; }
  .gallery + .sprog { margin-bottom: var(--space-lg); }
}

/* увеличенная до проявления картинка не должна раздвигать страницу вбок */
.motion .img-rv:not(.drawing) { overflow: clip; }
.motion .drawing.img-rv img { scale: 1; }

/* заголовок первого экрана на компьютере — ровно в три строки */
@media (min-width: 1025px) {
  .hero h1 .h1-line { display: block; white-space: nowrap; }
  /* самая длинная строка «бассейн и 15 направлений» ≈ 14,6 кегля: кегль 3,2vw укладывает её в блок 48vw */
  .hero__content { max-width: min(900px, 48vw); }
  .hero h1 { font-size: clamp(32px, 3.2vw, 60px); }
}

/* первый экран на телефоне: затемнение слабее, плотная полоса только у нижнего края — для перехода в фон под текстом */
@media (max-width: 768px) {
  .hero__shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(24, 24, 26, .55) 14%, rgba(24, 24, 26, .18) 34%, rgba(24, 24, 26, 0) 55%, rgba(24, 24, 26, 0) 82%, rgba(24, 24, 26, .3) 100%); }
}

/* заголовок первого экрана: строки-смыслы и на узких экранах, средняя переносится сама */
.hero h1 .h1-line { display: block; }