/* Новая главная (скрытый адрес /new). Цвета — только цвета сайта: лайм, чёрный, белый, светло-серый.
   Шрифты — ровно как на Тильде (assets/site.css): Days One (объявлен жирным) и Raleway 400/600.
   От руки — только svg «Sokolov Dance Theatre» на первом экране, как на Тильде. */
@font-face { font-family: 'DaysOneDenistina'; src: url('/fonts/DaysOne-Regular.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/fonts/Raleway-cyrillic.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Raleway'; src: url('/fonts/Raleway-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --lime: #bfd900; --black: #000; --white: #fff; --gray: #f6f6fa; --line: #ececf2; --muted: #5c5c66;
  --wrap: 1200px; --gut: 32px;
  --r-lg: 28px; --r-md: 20px; --r-sm: 14px;
  --shadow: 0 18px 44px rgba(22,24,32,.13), 0 3px 10px rgba(22,24,32,.06);
  --shadow-sm: 0 8px 22px rgba(22,24,32,.09), 0 2px 6px rgba(22,24,32,.05);
  --star: #fc0; /* звёзды — жёлтые, как у Яндекса (решение владельца) */
  --fh: 'DaysOneDenistina', Arial, sans-serif; --ft: 'Raleway', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; font-family: var(--ft); color: var(--black); background: var(--gray); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
p { margin: 0; }

.wrap { max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.dis { font-family: var(--fh); font-weight: 700; }
.h2 { font-family: var(--fh); font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; margin: 0; }
.lead { font-size: 18px; font-weight: 400; margin-top: 10px; color: #222; }
.head { margin-bottom: 32px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--lime); font-family: var(--fh); font-weight: 700; font-size: 14px; letter-spacing: .01em; text-transform: uppercase; padding: 16px 28px; border-radius: 40px; transition: transform .2s, box-shadow .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(191,217,0,.45); }
.btn.lg { font-size: 16px; padding: 20px 36px; }
.btn.ghost { background: var(--card, var(--white)); }
.btn.ghost:hover { box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.ulink { font-weight: 600; border-bottom: 2px solid var(--lime); padding-bottom: 1px; }

/* ─── Шапка — как на Тильде: плашка во всю сетку, растёт с шириной окна ─── */
.hdr { --u: calc(100vw / 1200); position: fixed; z-index: 50; top: calc(var(--u) * 5); left: calc(var(--u) * 20); right: calc(var(--u) * 20); height: calc(var(--u) * 40); display: flex; align-items: center; gap: calc(var(--u) * 20); border-radius: calc(var(--u) * 20); background: rgba(246,246,250,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.hlog { display: flex; align-items: center; gap: calc(var(--u) * 12); margin-left: calc(var(--u) * 24); }
.hlog img { height: calc(var(--u) * 34); width: auto; }
.hlog span { font-family: var(--fh); font-weight: 700; text-transform: uppercase; font-size: calc(var(--u) * 17); }
.hdr nav { display: flex; gap: calc(var(--u) * 34); margin-left: auto; font-weight: 500; font-size: calc(var(--u) * 13); white-space: nowrap; }
.hdr nav a, .hdr nav button { font: inherit; color: inherit; background: none; padding: 0; }
.hdr nav a:hover, .hdr nav button:hover { color: #6a7700; }
/* Телефон в шапке: «позвонить прямо сейчас» — частый сценарий у тех, кто пришёл с карт */
.htel { font-weight: 600; font-size: calc(var(--u) * 14); white-space: nowrap; }
.htel:hover { color: #6a7700; }
@media (max-width: 1100px) { .htel { display: none; } }
.hbtn { height: 100%; padding: 0 calc(var(--u) * 30); border-radius: calc(var(--u) * 20); background: var(--lime); font-family: var(--fh); font-weight: 700; text-transform: uppercase; font-size: calc(var(--u) * 14); margin-left: calc(var(--u) * 40); transition: box-shadow .2s; }
.hbtn:hover { box-shadow: 0 8px 20px rgba(191,217,0,.5); }
/* на внутренних страницах «Записаться» — ссылка на главную, а не кнопка окна */
a.hbtn { display: inline-flex; align-items: center; }

/* ─── Секции: волна Тильды на стыке + свой градиент у каждого блока ───
   Верх блока вырезан маской по форме волны с первого экрана; блок заходит на предыдущий
   на высоту волны. Фоны — мягкие градиенты в оттенках сайта, без пятен и разводов. */
.sec { --wh: 7.6vw; position: relative; --card: var(--white); --bg: #f3f4f7; padding: calc(var(--wh) + 70px) 0 calc(var(--wh) + 90px); margin-top: calc(-1 * var(--wh));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 1H559C559 1 626 -3 647 73C668 150 757 148 757 148H1040C1040 148 1151 156 1171 73C1191 -9 1305 1 1305 1H1705V148H0Z'/%3E%3C/svg%3E") top center / 142% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 1H559C559 1 626 -3 647 73C668 150 757 148 757 148H1040C1040 148 1151 156 1171 73C1191 -9 1305 1 1305 1H1705V148H0Z'/%3E%3C/svg%3E") top center / 142% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; }
#age { margin-top: 0; padding-top: 60px; padding-bottom: calc(var(--wh) + 70px); -webkit-mask: none; mask: none; background: linear-gradient(180deg, #f6f6fa 0%, #ffffff 35%, #ffffff 100%); }
#family { background: linear-gradient(160deg, #e3e4ea 0%, #eeeff3 45%, #f7f7fa 100%); }
#reviews { background: linear-gradient(180deg, #ffffff 0%, #fbfbf7 55%, #f3f5e6 100%); }
#quiz { background: linear-gradient(165deg, #c9cad1 0%, #dcdde2 40%, #eeeef2 100%); --bg: #f3f4f7; }
#team { background: linear-gradient(180deg, #ffffff 0%, #f8f8fb 100%); }
#news { background: linear-gradient(160deg, #eef0e0 0%, #f5f6ee 50%, #fafafa 100%); }
#faq { background: linear-gradient(200deg, #e6e7ec 0%, #f1f2f5 55%, #f8f8fb 100%); }
/* Форма входа у каждого блока своя — одно семейство: мягкие кривые, глубина 5–9vw.
   Выбор формы под содержимое блока. */
/* арка: в центре блока пусто (слева фото, справа текст) — подъём ничего не задевает */
#family { --wh: 7.4vw; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 140H240C440 140 560 4 760 4H980C1180 4 1280 140 1480 140H1705H1705V148H0Z'/%3E%3C/svg%3E") top center / 142% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 140H240C440 140 560 4 760 4H980C1180 4 1280 140 1480 140H1705H1705V148H0Z'/%3E%3C/svg%3E") top center / 142% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; }
/* ступень: слева заголовок и карточка идут выше, справа виджет отзывов уходит ниже */
#reviews { --wh: 7.2vw; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 2H740C850 2 870 132 980 132H1705H1705V148H0Z'/%3E%3C/svg%3E") top center / 118% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 2H740C850 2 870 132 980 132H1705H1705V148H0Z'/%3E%3C/svg%3E") top center / 118% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; }
/* язык по центру — как на первом экране, ровно над карточкой игры */
#quiz { --wh: 5.6vw; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 2H560C620 2 620 140 680 140H1020C1080 140 1080 2 1140 2H1705H1705V148H0Z'/%3E%3C/svg%3E") top center / 142% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 2H560C620 2 620 140 680 140H1020C1080 140 1080 2 1140 2H1705H1705V148H0Z'/%3E%3C/svg%3E") top center / 142% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; }
/* диагональ: слева заголовок выше, справа над сеткой преподавателей больше воздуха */
#team { --wh: 8.2vw; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 4H180C420 4 1260 140 1500 140H1705H1705V148H0Z'/%3E%3C/svg%3E") top center / 120% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 4H180C420 4 1260 140 1500 140H1705H1705V148H0Z'/%3E%3C/svg%3E") top center / 120% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; }
/* язык у правого края ленты новостей */
#news { --wh: 6vw; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cg transform='translate(1705,0) scale(-1,1)'%3E%3Cpath d='M0 2H560C620 2 620 140 680 140H1020C1080 140 1080 2 1140 2H1705H1705V148H0Z'/%3E%3C/g%3E%3C/svg%3E") top right 10% / 142% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cg transform='translate(1705,0) scale(-1,1)'%3E%3Cpath d='M0 2H560C620 2 620 140 680 140H1020C1080 140 1080 2 1140 2H1705H1705V148H0Z'/%3E%3C/g%3E%3C/svg%3E") top right 10% / 142% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; }
/* язык у края: выступ над списком вопросов справа, заголовок слева не задет */
#faq { --wh: 7vw; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 2H1180C1234 2 1236 140 1290 140H1560C1614 140 1596 2 1650 2H1705H1705V148H0Z'/%3E%3C/svg%3E") top center / 142% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cpath d='M0 2H1180C1234 2 1236 140 1290 140H1560C1614 140 1596 2 1650 2H1705H1705V148H0Z'/%3E%3C/svg%3E") top center / 142% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; }
/* диагональ в обратную сторону — к концу страницы линия успокаивается */
#contacts { --wh: 6.4vw; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cg transform='translate(1705,0) scale(-1,1)'%3E%3Cpath d='M0 4H180C420 4 1260 140 1500 140H1705H1705V148H0Z'/%3E%3C/g%3E%3C/svg%3E") top center / 120% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1705 148' preserveAspectRatio='none'%3E%3Cg transform='translate(1705,0) scale(-1,1)'%3E%3Cpath d='M0 4H180C420 4 1260 140 1500 140H1705H1705V148H0Z'/%3E%3C/g%3E%3C/svg%3E") top center / 120% var(--wh) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat; }
#contacts { background: linear-gradient(180deg, #ffffff 0%, #fafafc 100%); }
.rise { opacity: 0; transform: translateY(56px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .08s; } .rise.d2 { transition-delay: .16s; } .rise.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ─── Возраст ─── */
.ages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.age { text-align: left; background: var(--card); border-radius: var(--r-lg); overflow: hidden; border: 3px solid transparent; transition: transform .25s, box-shadow .25s, border-color .25s; }
.age:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.age.on { border-color: var(--lime); box-shadow: var(--shadow); }
.age .ph { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #ddd; transition: aspect-ratio .4s; }
.ages.picked .age .ph { aspect-ratio: 16 / 7; }
.age .b { padding: 16px 18px 18px; }
.age .n { font-family: var(--fh); font-weight: 700; font-size: 26px; line-height: 1; margin-bottom: 8px; }
.age .w { font-size: 14px; line-height: 1.4; color: #222; min-height: 40px; }
.common { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 600; font-size: 15px; }
.common i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.groups { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.groups.open { grid-template-rows: 1fr; }
.groups > div { overflow: hidden; }
.gpanel { margin-top: 18px; background: var(--card); border-radius: var(--r-lg); padding: 22px 26px; border: 3px solid var(--lime);  box-shadow: var(--shadow-sm); }
.gpanel h3 { font-family: var(--fh); font-weight: 700; font-size: 20px; margin: 0 0 8px; }
.grow { display: grid; grid-template-columns: 1fr 1.3fr 1.6fr 1.3fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.grow:first-of-type { border-top: 0; }
.grow b { font-family: var(--fh); font-weight: 700; font-size: 16px; }
.grow .soft { color: var(--muted); }
.grow .nx { white-space: nowrap; }
.grow .btn { padding: 12px 18px; font-size: 12px; }
.gfoot { display: flex; gap: 22px; align-items: center; margin-top: 12px; font-weight: 600; font-size: 15px; flex-wrap: wrap; }
.gmsg { padding: 10px 0; color: var(--muted); }

/* ─── Основатели ─── */
.fam { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.fam .photo { position: relative; aspect-ratio: 4 / 5; max-height: 620px; border-radius: 32px; overflow: hidden; background: #ddd center 30%/cover no-repeat; box-shadow: var(--shadow); }
.play { display: inline-flex; align-items: center; gap: 12px; background: var(--white); border-radius: 40px; padding: 7px 18px 7px 7px; font-weight: 600; font-size: 15px; }
.play i { width: 40px; height: 40px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; font-style: normal; font-size: 14px; }
.fam .photo .play { position: absolute; left: 20px; bottom: 20px; }
.fam .h2 { font-size: clamp(30px, 3vw, 40px); }
.fam .names { font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; margin-top: 8px; }
.fam .story { font-size: 17px; margin: 14px 0 22px; max-width: 600px; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.person { background: var(--card); border-radius: var(--r-md); padding: 18px 20px; display: flex; flex-direction: column;  box-shadow: var(--shadow-sm); }
.person .nm { font-family: var(--fh); font-weight: 700; font-size: 19px; }
.person .rl { font-size: 14px; font-weight: 600; margin: 4px 0 8px; }
.person .ab { font-size: 14px; margin-bottom: 10px; }
/* Карточка основателя: короткое превью + «Подробнее» раскрывает продолжение прямо на месте */
.person .bio { font-size: 14px; line-height: 1.5; color: var(--muted); }
.person .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.person .more > div { overflow: hidden; }
.person .more p { font-size: 14px; line-height: 1.5; color: var(--muted); padding-top: 8px; }
.person.open .more { grid-template-rows: 1fr; }
.morebtn { align-self: flex-start; margin: 10px 0 12px; padding: 0; background: none; font-size: 13px;
  font-weight: 600; color: var(--ink); border-bottom: 1px solid currentColor; line-height: 1.2; }
.morebtn::after { content: ' ↓'; }
.person.open .morebtn::after { content: ' ↑'; }
.morebtn:hover { color: #6a7700; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
/* Низ карточки: кнопка видео слева, ссылка на личный сайт — в свободное место справа */
.pfoot { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pfoot .vbtn { margin-top: 0; }
.pfoot .tags { margin: 0 0 0 auto; }
.tags span { background: var(--bg, var(--gray)); border-radius: 20px; padding: 5px 11px; font-size: 13px; font-weight: 600; }
.vbtn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; background: var(--lime); border-radius: 30px; padding: 5px 15px 5px 5px; font-weight: 600; font-size: 13px; }
.vbtn i { width: 28px; height: 28px; border-radius: 50%; background: var(--white); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.nums { display: flex; gap: 40px; }
.nums b { display: block; font-family: var(--fh); font-weight: 700; font-size: 30px; line-height: 1; }
.nums span { font-size: 14px; font-weight: 600; }

/* ─── Отзывы ─── */
.rev { display: grid; grid-template-columns: 1fr 760px; gap: 24px; }
.score { background: var(--card); border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column;  box-shadow: var(--shadow-sm); }
.stars { font-size: 28px; letter-spacing: 3px; display: flex; gap: 3px; }
.stars i { font-style: normal; color: #d9dae0; }
@keyframes starpop {
  0% { color: #d9dae0; transform: scale(.85); text-shadow: none }
  35% { color: #fff3b0; transform: scale(1.45); text-shadow: 0 0 22px rgba(255,204,0,.95), 0 0 8px rgba(255,204,0,.8) }
  60% { color: var(--star); transform: scale(1.1); text-shadow: 0 0 12px rgba(255,204,0,.55) }
  100% { color: var(--star); transform: scale(1); text-shadow: none }
}
.stars.on i { color: var(--star); animation: starpop .75s cubic-bezier(.2,.8,.3,1) both; }
.stars.on i:nth-child(1) { animation-delay: .05s } .stars.on i:nth-child(2) { animation-delay: .38s }
.stars.on i:nth-child(3) { animation-delay: .71s } .stars.on i:nth-child(4) { animation-delay: 1.04s }
.stars.on i:nth-child(5) { animation-delay: 1.37s }
.score .t { font-family: var(--fh); font-weight: 700; font-size: 21px; line-height: 1.2; margin: 14px 0 18px; }
.motives { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.motives span { background: var(--bg, var(--gray)); border-radius: 30px; padding: 9px 16px; font-size: 15px; font-weight: 600; }
.score .btn { margin-top: auto; }
.score .small { text-align: center; font-size: 14px; font-weight: 600; margin-top: 12px; }
.widget { background: var(--white); border-radius: var(--r-lg); overflow: hidden; height: 560px; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.widget iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Знак «Хорошее место» Яндекс Карт — рядом со звёздами, как продолжение рейтинга */
.award { display: flex; align-items: center; gap: 14px; margin: 10px 0 16px; }
.award img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 6px 18px rgba(20,22,32,.18); }
.award .an { font-family: var(--fh); font-weight: 700; font-size: 18px; line-height: 1.1; }
.award .ad { font-size: 14px; color: var(--muted); margin-top: 3px; line-height: 1.35; }

/* ─── Игра ─── */
.quiz { background: var(--card); border-radius: 36px; padding: 30px 40px 34px; --field: var(--gray);  box-shadow: var(--shadow-sm); }
.qtop { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; min-height: 22px; }
.qtop .back { visibility: hidden; }
.qtop .back.show { visibility: visible; }
.dots { display: flex; gap: 6px; }
.dots i { width: 28px; height: 7px; border-radius: 4px; background: var(--bg, var(--gray)); transition: background .3s; }
.dots i.on { background: var(--lime); }
.quiz .qfade { text-align: center; }
.quiz .qfade .answers, .quiz .qfade .qt { text-align: center; }
.qt { font-family: var(--fh); font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.15; text-align: center; max-width: 820px; margin: 0 auto 28px; }
.answers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.answers.n3 { grid-template-columns: repeat(3, 1fr); max-width: 820px; margin: 0 auto; }
.ans { background: var(--bg, var(--gray)); border: 3px solid transparent; border-radius: 24px; padding: 22px 16px 20px; text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s; }
.ans:hover { transform: translateY(-5px); border-color: var(--lime); background: var(--white); box-shadow: var(--shadow); }
.ans .em { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: var(--white); display: grid; place-items: center; font-size: 42px; transition: background .2s; }
.ans:hover .em { background: var(--lime); }
.ans b { display: block; font-size: 16px; line-height: 1.3; }
.qhint { text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 22px; }
.qfade { animation: qin .45s cubic-bezier(.2,.7,.2,1); }
@keyframes qin { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.res { display: grid; grid-template-columns: 380px 1fr; gap: 44px; align-items: center; }
.badge { width: 300px; height: 300px; margin: 0 auto; border-radius: 50%; background: var(--lime); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.badge .em { font-size: 96px; line-height: 1; }
.badge .dis { font-size: 26px; margin-top: 10px; }
.again { display: block; margin: 16px auto 0; font-weight: 600; font-size: 14px; }
.res .k { font-weight: 600; }
.res .tn { font-family: var(--fh); font-weight: 700; font-size: 32px; line-height: 1.1; margin: 4px 0 10px; }
.res .tx { font-size: 17px; margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chips span { background: var(--bg, var(--gray)); border-radius: 30px; padding: 8px 14px; font-weight: 600; font-size: 14px; }

/* ─── Формы ─── */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inp { height: 54px; border-radius: 30px; border: 2px solid transparent; background: var(--field, var(--white)); padding: 0 20px; font: inherit; font-size: 16px; width: 100%; outline: none; }
.inp:focus { border-color: var(--lime); }
.form .btn { grid-column: 1 / -1; height: 56px; }
.cons { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; margin-top: 12px; cursor: pointer; }
.cons input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #000; flex: 0 0 auto; }
.cons a { border-bottom: 1px solid #000; }
.fmsg { font-size: 14px; font-weight: 600; margin-top: 10px; min-height: 20px; }
.fmsg.err { color: #d23b2a; }
.done { font-family: var(--fh); font-weight: 700; font-size: 22px; padding: 10px 0; }

/* ─── Команда и цены ─── */
.team { display: grid; grid-template-columns: repeat(auto-fill, 220px); gap: 18px; }
.tm { background: var(--card); border-radius: var(--r-md); padding: 14px 14px 18px; text-align: center; transition: transform .25s, box-shadow .25s; }
.tm:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.tm .ph { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--r-sm); background: #e4e4ea; display: grid; place-items: center; font-family: var(--fh); font-weight: 700; font-size: 36px; color: #fff; margin-bottom: 12px; }
.tm .nm { font-family: var(--fh); font-weight: 700; font-size: 16px; }
.tm .rl { font-size: 13px; font-weight: 600; margin-top: 3px; color: #333; }
.sep { height: 96px; }
.tabs { display: inline-flex; background: var(--card); border-radius: 40px; padding: 5px; gap: 4px; margin-bottom: 22px; flex-wrap: wrap; }
.tab { padding: 12px 22px; border-radius: 30px; font-weight: 600; font-size: 15px; transition: background .2s; }
.tab:hover { background: rgba(191,217,0,.25); }
.tab.on { background: var(--lime); }
.tab .c { opacity: .45; margin-left: 5px; }
.prices { display: grid; grid-template-columns: repeat(auto-fill, 280px); gap: 16px; }
.pr { background: var(--card); border-radius: var(--r-md); padding: 20px; display: flex; flex-direction: column; border: 3px solid transparent;  box-shadow: var(--shadow-sm); }
.pr.main { border-color: var(--lime); }
.pr .pn { font-family: var(--fh); font-weight: 700; font-size: 17px; line-height: 1.2; }
.pr .pp { font-family: var(--fh); font-weight: 700; font-size: 30px; line-height: 1; margin: 14px 0 8px; }
.pr .pp small { font-size: 16px; }
.pr .pd { font-size: 14px; margin-bottom: 16px; color: #222; }
.pr .btn { margin-top: auto; padding: 12px; font-size: 12px; }
.pr:not(.main) .btn { background: var(--bg, var(--gray)); }
.ind { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tg { background: var(--card); border-radius: var(--r-md); padding: 16px 20px 8px;  box-shadow: var(--shadow-sm); }
.tg .th { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.tg .th i { position: relative; overflow: hidden; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #e4e4ea; display: grid; place-items: center; font-style: normal; font-family: var(--fh); font-weight: 700; font-size: 14px; color: #fff; }
.tg .th b { font-family: var(--fh); font-weight: 700; font-size: 17px; }
.irow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.irow b { font-weight: 600; }
.irow small { display: block; font-size: 13px; color: var(--muted); }
.irow .p { font-family: var(--fh); font-weight: 700; font-size: 16px; }
.pane { animation: qin .4s cubic-bezier(.2,.7,.2,1); }

/* ─── Новости ─── */
.news { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start; }
.news .side { position: sticky; top: 110px; }
.news .side .btn { margin-top: 24px; }
.chan { background: #e9e9ef; border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; height: 600px;  box-shadow: var(--shadow-sm); }
.chan .top { background: var(--white); display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.chan .ava { width: 42px; height: 42px; border-radius: 50%; background: #000; color: var(--lime); display: grid; place-items: center; font-family: var(--fh); font-weight: 700; font-size: 13px; }
.chan .hn { font-family: var(--fh); font-weight: 700; font-size: 16px; }
.chan .hs { font-size: 12px; font-weight: 600; color: var(--muted); }
.chan .pin { background: var(--white); display: flex; gap: 12px; padding: 9px 22px; border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
.chan .pin i { width: 3px; background: var(--lime); border-radius: 2px; }
.chan .pin b { display: block; font-size: 12px; color: #6a7700; }
.chan .pin span { font-size: 14px; }
.feed { flex: 1; overflow-y: auto; overscroll-behavior: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.day { align-self: center; background: rgba(0,0,0,.28); color: #fff; font-size: 12px; font-weight: 600; border-radius: 14px; padding: 3px 11px; }
.msg { align-self: flex-start; max-width: 600px; background: var(--white); border-radius: 18px 18px 18px 6px; padding: 12px 16px 9px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.msg.imp { border: 2px solid #e74c3c; }
.msg.flash { animation: flash 1.2s; }
@keyframes flash { 0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,.08); } 30% { box-shadow: 0 0 0 5px var(--lime); } }
.msg .tg2 { display: flex; gap: 6px; margin-bottom: 6px; }
.msg .tag { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 8px; }
.msg .mt { font-weight: 600; font-size: 16px; margin-bottom: 3px; }
.msg .mb { font-size: 15px; line-height: 1.5; }
.msg .mf { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 8px; }
.msg .rp { display: inline-flex; gap: 4px; background: #f2f2f2; border-radius: 12px; padding: 2px 9px; font-size: 13px; font-weight: 600; color: #555; margin-right: 5px; }
.msg .meta { font-size: 12px; color: #8a8a92; font-weight: 600; }

/* ─── Вопросы ─── */
.faq { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start; }
.faq .side { position: sticky; top: 110px; }
.ask { background: var(--card); border-radius: var(--r-md); padding: 22px; margin-top: 24px;  box-shadow: var(--shadow-sm); }
.ask p { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.ask .btn { width: 100%; }
.qlist { background: var(--card); border-radius: var(--r-lg); padding: 4px 28px;  box-shadow: var(--shadow-sm); }
.q { border-top: 1px solid var(--line); }
.q:first-child { border-top: 0; }
.q .qh { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 0; text-align: left; font-family: var(--fh); font-weight: 700; font-size: 17px; line-height: 1.25; }
.q .qh i { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--bg, var(--gray)); display: grid; place-items: center; font-style: normal; font-family: var(--ft); font-size: 20px; font-weight: 600; transition: background .2s, transform .3s; }
.q.on .qh i { background: var(--lime); transform: rotate(45deg); }
.q .qa { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s; }
.q.on .qa { grid-template-rows: 1fr; }
.q .qa > div { overflow: hidden; }
.q .qa p { font-size: 15px; padding: 0 50px 18px 0; }

/* ─── Как добраться ─── */
.where { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.map { position: relative; min-height: 380px; border-radius: var(--r-lg); overflow: hidden; background: #e9e9ef center/cover no-repeat;  box-shadow: var(--shadow-sm); }
.map .mbtn { position: absolute; left: 18px; bottom: 18px; background: var(--white); border-radius: 30px; padding: 12px 20px; font-weight: 600; font-size: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.15); transition: transform .2s; }
.map:hover .mbtn { transform: translateY(-3px); }
.info { background: var(--card); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 10px;  box-shadow: var(--shadow-sm); }
.info .addr { font-family: var(--fh); font-weight: 700; font-size: 22px; line-height: 1.2; }
.info .metro { font-size: 15px; font-weight: 600; }
.info .warn { background: var(--bg, var(--gray)); border-radius: var(--r-sm); padding: 12px 16px; font-size: 14px; margin-top: 8px; }
.info .ct { margin-top: auto; display: flex; gap: 20px; flex-wrap: wrap; font-weight: 600; font-size: 16px; padding-top: 14px; }
.first { margin-top: 18px; display: grid; grid-template-columns: 300px 1fr auto; align-items: center; gap: 28px; background: var(--card); border-radius: var(--r-lg); overflow: hidden; padding-right: 28px;  box-shadow: var(--shadow-sm); }
.first .ph { height: 150px; background: #ddd; position: relative; overflow: hidden; }
.first .ph i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; font-style: normal; font-size: 16px; }
.first .t { font-family: var(--fh); font-weight: 700; font-size: 20px; line-height: 1.2; margin-bottom: 6px; }
.first p { font-size: 15px; }

/* ─── Подвал: тонкая полоса, как на Тильде ─── */
.foot { position: relative; background: #eeeff3; padding: 22px 0 18px; }
.fline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; font-size: 13px; }
.fline .docs { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fline .docs a { border-bottom: 1px solid #000; }
.fhands { width: 360px; height: 96px; object-fit: cover; object-position: center 48%; }
.fline .copy { text-align: right; line-height: 1.5; }
.fline .copy small { font-size: 11px; color: var(--muted); }
/* Упоминание авторов набора значков — обязательное условие их лицензии. Держим
   самой мелкой строкой в самом низу: нужное есть, глаз не цепляет. */
.foot .attr { margin: 10px 0 0; text-align: center; font-size: 9px; line-height: 1; color: #b9bcc6; }
.foot .attr a { color: inherit; }
.foot .attr a:hover { color: var(--muted); }

/* ─── Окно записи ─── */
.ov { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.ov.open { opacity: 1; pointer-events: auto; }
.modal { position: relative; width: 100%; max-width: 520px; background: var(--gray); --field: var(--white); border-radius: 30px; padding: 32px; transform: translateY(20px) scale(.98); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.ov.open .modal { transform: none; }
.modal .x { position: absolute; right: 16px; top: 14px; width: 38px; height: 38px; border-radius: 50%; background: var(--white); font-size: 22px; line-height: 1; }
.modal h3 { font-family: var(--fh); font-weight: 700; font-size: 24px; margin: 0 0 6px; padding-right: 40px; }
.modal .s { font-size: 15px; margin-bottom: 18px; }
.modal .form { grid-template-columns: 1fr; }

/* ─── Уже экраны: всё в столбик (мобильную доводим отдельно) ─── */
@media (max-width: 1100px) {
  .ages, .team, .prices { grid-template-columns: repeat(2, 1fr); }
  .rev, .news, .faq, .where, .fam { grid-template-columns: 1fr; }
  .widget { max-width: 760px; }
  .news .side, .faq .side { position: static; }
  .fline { grid-template-columns: 1fr; justify-items: center; text-align: center; } .fline .docs { align-items: center; } .fline .copy { text-align: center; }
  .grow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  :root { --gut: 16px; }
  .hero .wrap, .res, .first { grid-template-columns: 1fr; }
  .stack { height: 380px; }
  .answers, .answers.n3, .ind, .people { grid-template-columns: 1fr 1fr; }
  .form { grid-template-columns: 1fr; }
  .fbot { flex-direction: column; }
}

/* ─── Загрузка данных из приложения ─── */
.skel { background: linear-gradient(90deg, var(--card) 0%, #ececf2 50%, var(--card) 100%); background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: var(--r-md); min-height: 240px; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.msg .mb p { margin: 0 0 6px; } .msg .mb p:last-child { margin: 0; }
.msg .mb ul, .msg .mb ol { margin: 4px 0; padding-left: 20px; }
.msg .mb a { border-bottom: 1px solid currentColor; }
.empty { color: var(--muted); padding: 10px 0; }

/* ─── Отзывы: видно три отзыва ─── */
.widget { height: 900px; }
.rev { align-items: start; }
.score { position: sticky; top: 100px; }

/* ─── Возраст: закрытая группа ─── */
.grow .closed { display: inline-block; margin-left: 8px; font-family: var(--ft); font-weight: 600; font-size: 12px; background: var(--gray); border-radius: 12px; padding: 2px 9px; vertical-align: 2px; }
.grow .btn.soft2 { background: var(--white); }

/* ─── Контакты: соцсети ─── */
.info .soc { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 12px; }
.info .soc a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.info .soc img, .info .soc .appic { width: 32px; height: 32px; border-radius: 50%; }
.info .soc .appic { display: grid; place-items: center; background: var(--black); color: var(--lime); font-family: var(--fh); font-weight: 700; font-size: 9px; }

/* ─── Окно расписания ─── */
.modal.wide { max-width: 1100px; max-height: calc(100vh - 40px); overflow: auto; }
.wk { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; font-weight: 600; }
.wkb { width: 38px; height: 38px; border-radius: 50%; background: var(--white); font-size: 20px; }
.wkb:hover { background: var(--lime); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.wd { background: var(--white); border-radius: 16px; padding: 10px; min-height: 120px; }
.wd.today { box-shadow: inset 0 0 0 2px var(--lime); }
.wd h4 { margin: 0 0 8px; font-family: var(--fh); font-weight: 700; font-size: 13px; text-transform: uppercase; }
.wd h4 span { font-family: var(--ft); font-weight: 400; color: var(--muted); text-transform: none; }
.ls { border-left: 3px solid var(--g, var(--lime)); background: var(--gray); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 12px; line-height: 1.3; }
.ls b { display: block; font-size: 12px; }
.ls .t { color: var(--muted); }
.wempty { color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .week { grid-template-columns: 1fr; } }

/* ─── Первый экран — раскладка Тильды: сетка 1200, единица --u растёт с шириной окна ─── */
.hero { --u: calc(100vw / 1200); position: relative; z-index: 2; overflow-x: clip; background: var(--gray); }
.hlayers { position: absolute; inset: 0; overflow: hidden; }
.hstage { position: relative; width: 100%; height: calc(var(--u) * 560); }
.hbg { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 560); background: linear-gradient(180deg, rgba(150,152,160,0) 45%, rgba(150,152,160,.55) 100%), #b4b4b8 url('/img/hero-studio-bg.webp') 50% 35% / cover no-repeat; }
.hwave { position: absolute; top: calc(var(--u) * 377); left: calc(var(--u) * -250); width: calc(var(--u) * 1705); height: calc(var(--u) * 368); }
/* Первый экран: где студия — первый вопрос человека, пришедшего с Яндекс Карт */
.h-where { position: absolute; z-index: 3; left: calc(var(--u) * 20); top: calc(var(--u) * 496); font-size: calc(var(--u) * 14); color: var(--muted); }
.h-where a { border-bottom: 1px solid #c9ccd6; }
.h-where a:hover { color: var(--ink); }
.hero .h-kicker, .hero .h-t1, .hero .h-t2, .hero .h-script, .hero .h-sub, .hero .h-btns { position: absolute; z-index: 3; margin: 0; }
/* Заголовок целиком лежит в h1 (для поиска), а строки по-прежнему стоят по сетке Тильды:
   сам h1 не создаёт своей системы координат — позиционируются span'ы. */
.h-title { position: static; margin: 0; font: inherit; }
.h-kicker { display: block; top: calc(var(--u) * 78); left: calc(var(--u) * 20); color: var(--white); font-weight: 500; font-size: calc(var(--u) * 30); line-height: 1.55; }
.h-t1, .h-t2 { font-family: var(--fh); font-weight: 700; text-transform: uppercase; font-size: calc(var(--u) * 45); line-height: 1; white-space: nowrap; }
.h-t1 { top: calc(var(--u) * 130); left: calc(var(--u) * 20); }
.h-t2 { top: calc(var(--u) * 175); left: calc(var(--u) * 210); }
.h-script { top: calc(var(--u) * 207); left: calc(var(--u) * 20); width: calc(var(--u) * 284); }
.h-sub { top: calc(var(--u) * 270); left: calc(var(--u) * 20); width: calc(var(--u) * 488); font-weight: 500; font-size: calc(var(--u) * 18); line-height: 1.4; }
/* Карточки стоят поверх фона и волны и выходят за край — как девочка на Тильде */
.hcards { position: absolute; z-index: 2; top: calc(var(--u) * 120); left: calc(var(--u) * 640); width: calc(var(--u) * 520); height: calc(var(--u) * 395); }
/* Живые кадры в карточках: видео ведёт себя ровно как фотография — заполняет блок целиком */
.pv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Фотографии вставляются настоящими картинками с подписью (см. putImg в new.js): поисковик
   видит, что на снимке, а при сбое загрузки человек читает подпись вместо пустого места. */
/* ⛔ у блока-рамки обязателен position: relative, иначе картинка растянется на всю секцию */
.ph, .photo, .pc, .mapbox, .vph { position: relative; overflow: hidden; }
.bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
/* у карточек преподавателей кадр был поднят (раньше это делал background-position) */
.tm .ph .bgimg { object-position: 50% 20%; }
/* Кадр у основателей вертикальный, а блок почти квадратный: показываем верхнюю часть,
   иначе срезает головы */
#family .pv { object-position: 50% 10%; }
.hcards .pc { position: absolute; border-radius: calc(var(--u) * 26); overflow: hidden; border: calc(var(--u) * 6) solid var(--white); background: #ddd center/cover no-repeat;
  box-shadow: 0 calc(var(--u) * 40) calc(var(--u) * 60) rgba(0,0,0,.28), 0 calc(var(--u) * 8) calc(var(--u) * 16) rgba(0,0,0,.12); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.hcards .c1 { width: 35%; height: 76%; left: 2%; top: 20%; transform: perspective(900px) rotateY(18deg) rotate(-4deg); }
.hcards .c3 { width: 35%; height: 76%; right: 2%; top: 20%; transform: perspective(900px) rotateY(-18deg) rotate(4deg); }
.hcards .c2 { width: 42%; height: 96%; left: 29%; top: 0; z-index: 2; transform: perspective(900px) translateZ(20px); }
.hcards:hover .c1 { transform: perspective(900px) rotateY(12deg) rotate(-6deg) translateX(-8px); }
.hcards:hover .c3 { transform: perspective(900px) rotateY(-12deg) rotate(6deg) translateX(8px); }

/* ─── Метка над заголовком (вместо надписей от руки) ─── */
.kick { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #555; margin-bottom: 12px; }
.kick::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.quiz .kick { display: flex; justify-content: center; margin: 18px 0 8px; }

/* ─── Преподаватели — ячейки 2 в ряд рядом с заголовком ─── */
.teamwrap { display: grid; grid-template-columns: 450px 1fr; gap: 30px; align-items: start; }
.teamwrap .head { position: sticky; top: 110px; }
.team { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
.team .skel { min-height: 200px; }
.tm { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; text-align: left; padding: 14px; }
.tm .ph { margin: 0; aspect-ratio: 1; font-size: 40px; }
.tm .nm { font-size: 20px; }
.tm .rl { font-size: 15px; margin-top: 6px; }
@media (max-width: 1100px) { .teamwrap { grid-template-columns: 1fr; } .teamwrap .head { position: static; } }

/* Кнопки первого экрана — на месте тильдовских «Запишитесь…/Записаться» */
.h-btns { top: calc(var(--u) * 424); left: calc(var(--u) * 20); display: flex; align-items: center; gap: calc(var(--u) * 12); }
.h-btns .btn { font-size: calc(var(--u) * 15); padding: calc(var(--u) * 18) calc(var(--u) * 34); border-radius: calc(var(--u) * 30); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(22,24,32,.18); }
.h-btns .btn.second { background: rgba(255,255,255,.92); }
.h-btns .btn.second:hover { box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 28) rgba(22,24,32,.22); }


/* Новости: карточка канала, пока ни одна новость не отмечена «На сайт» */
.feed.empty-feed { display: grid; place-items: center; background: var(--white); }
.chan .pin[hidden] { display: none; }
.nofeed { max-width: 560px; text-align: center; padding: 20px; }
.nofeed .t { font-family: var(--fh); font-weight: 700; font-size: 22px; margin-bottom: 10px; }
.nofeed .x { font-size: 15px; color: #333; margin-bottom: 20px; }
.nofeed .b { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nofeed .btn { padding: 15px 22px; font-size: 13px; }
.nofeed .btn.ghost { background: var(--gray); }
.news .side .btn { margin-top: 22px; }
.chan { min-height: 420px; }

/* Манифест студии — широкой полосой под основателями */
.manifest { margin-top: 56px; display: grid; gap: 16px; max-width: 1000px; }
.manifest .big { font-family: var(--fh); font-weight: 700; text-transform: uppercase; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.25; }
.manifest .big + .big { padding-left: 8%; }
.manifest .small { font-size: 17px; line-height: 1.5; max-width: 760px; margin-top: 4px; }
@media (max-width: 800px) { .manifest .big + .big { padding-left: 0; } }

/* ─── Живость: один раз при появлении, ничего не мигает постоянно ─── */
/* 1. Карточки первого экрана «здороваются» при загрузке */
@keyframes hi-left  { 0%,100% { transform: perspective(900px) rotateY(18deg) rotate(-4deg) } 55% { transform: perspective(900px) rotateY(12deg) rotate(-7deg) translateX(-16px) } }
@keyframes hi-right { 0%,100% { transform: perspective(900px) rotateY(-18deg) rotate(4deg) } 55% { transform: perspective(900px) rotateY(-12deg) rotate(7deg) translateX(16px) } }
@keyframes hi-mid   { 0%,100% { transform: perspective(900px) translateZ(20px) } 55% { transform: perspective(900px) translateZ(20px) translateY(-14px) } }
.hcards.hi .c1 { animation: hi-left 1.5s cubic-bezier(.4,0,.2,1) .5s 1 }
.hcards.hi .c3 { animation: hi-right 1.5s cubic-bezier(.4,0,.2,1) .5s 1 }
.hcards.hi .c2 { animation: hi-mid 1.5s cubic-bezier(.4,0,.2,1) .62s 1 }

/* 2. Кнопки видео: мягкое кольцо-намёк вокруг «играть» */
/* Подсвечивается вся кнопка целиком, а не иконка внутри */
.play, .vbtn { position: relative; }
.play::after, .vbtn::after { content: ''; position: absolute; inset: -5px; border-radius: 44px; border: 2px solid var(--lime); opacity: 0; transition: opacity .3s; pointer-events: none; }
.vbtn::after { border-color: var(--black); inset: -4px; border-radius: 34px; }
.play:hover::after, .vbtn:hover::after { opacity: .55; }
@keyframes ring { 0%, 100% { opacity: 0 } 45% { opacity: .95 } }
.ring-hint::after { animation: ring 1.5s ease-in-out 2; }
.play, .vbtn { cursor: pointer; transition: transform .2s; }
.play:hover, .vbtn:hover { transform: translateY(-2px); }

/* 4. Карточки преподавателей подсвечиваются по очереди */
.tm { border: 2px solid transparent; }
@keyframes tmflash { 0% { border-color: transparent } 35% { border-color: var(--lime); box-shadow: var(--shadow) } 100% { border-color: transparent } }
.tm.flash { animation: tmflash 1.5s ease-out 1; }

/* 5. Реакции летят в углу окна новостей, как на стриме */
.chan { position: relative; }
.stream { position: absolute; right: 0; bottom: 0; width: 260px; height: 100%; pointer-events: none; overflow: hidden; z-index: 2; }
.stream b { position: absolute; bottom: -10px; right: 40px; line-height: 1; will-change: transform, opacity;
  animation: fly 2.6s cubic-bezier(.25,.6,.35,1) forwards; }
/* гаснет мягко: первую половину пути летит в полную силу, потом тает */
@keyframes fly {
  0% { transform: translate(0, 20px) scale(.4) rotate(0deg); opacity: 0 }
  8% { opacity: 1 }
  50% { opacity: .95 }
  100% { transform: translate(var(--dx, 0px), var(--dy, -320px)) scale(var(--sc, 1)) rotate(var(--rot, 0deg)); opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .hcards.hi .c1, .hcards.hi .c2, .hcards.hi .c3, .ring-hint i::after, .tm.flash, .stream b { animation: none !important; }
  .stars i { transition: none; }
}

/* Кнопка «Записаться» один раз подмигивает, когда человек долистал до цен */
@keyframes hbtn-pulse { 0%, 100% { transform: none; box-shadow: none } 30% { transform: scale(1.06); box-shadow: 0 10px 26px rgba(191,217,0,.6) } 65% { transform: scale(1.02) } }
.hbtn.pulse { animation: hbtn-pulse 1.1s ease-in-out 2; }
/* Бегунок цифр не должен дёргать раскладку */
.nums b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .hbtn.pulse, .stars.on i { animation: none !important; } }

/* Кнопка реакции — в источнике фонтана, посетитель запускает его сам */
.reactbtn { position: absolute; right: 18px; bottom: 16px; z-index: 3; width: 54px; height: 54px; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-sm); display: grid; place-items: center; font-size: 26px; line-height: 1;
  transition: transform .18s cubic-bezier(.2,1.6,.4,1), box-shadow .2s; }
.reactbtn:hover { transform: scale(1.08); box-shadow: var(--shadow); }
.reactbtn:active { transform: scale(.92); }
.reactbtn span { display: block; transition: transform .18s ease; }
.reactbtn.tap span { animation: facepop .32s ease-out; }
@keyframes facepop { 0% { transform: scale(1) } 40% { transform: scale(1.35) rotate(-8deg) } 100% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .reactbtn.tap span { animation: none } }

/* ─── Образы аватарчика в игре ───
   Фон у картинок не вырезан (белая футболка и кроссовки того же тона, что фон), поэтому под
   каждой лежит её собственный цвет фона, а края растворяются маской — стыка не видно. */
.artbig, .anspic { overflow: hidden; display: grid; place-items: center; }
.artbig { -webkit-mask: radial-gradient(75% 68% at 50% 46%, #000 55%, transparent 92%);
          mask: radial-gradient(75% 68% at 50% 46%, #000 55%, transparent 92%); }
.artbig { width: 100%; max-width: 360px; margin: 0 auto; }
.artbig img { width: 100%; height: auto; display: block; }
.arttitle { text-align: center; font-size: 24px; margin-top: 6px; }
.anspic { width: 168px; height: 168px; margin: 0 auto 16px; border-radius: 50%; }
.anspic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.answers.art { max-width: 640px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); }
.answers.art .ans { padding: 22px 16px 24px; }
@media (max-width: 800px) { .artbig { max-width: 260px; } }

/* ─── Проводник по сайту ───
   Стоит справа внизу и едет вместе с экраном. Меняется только надпись в облачке.
   ⛔ Нажатия не ловит, лежит ниже окон заявки и расписания, на узких окнах скрыт. */
.guide { position: fixed; z-index: 40; bottom: 0; right: 40px; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .6s; }
.guide.on { opacity: 1; visibility: visible; }
.guide .gimg { height: 210px; width: auto; display: block; filter: drop-shadow(0 10px 16px rgba(20,22,32,.16)); }
/* Мягкое «дыхание» на месте */
@keyframes gidle { 0%, 100% { transform: translateY(0) rotate(0deg) } 50% { transform: translateY(-4px) rotate(-.8deg) } }
.guide .gimg { animation: gidle 3.6s ease-in-out infinite; }
/* Облачко всегда НАД головой: персонаж его не перекрывает */
.gsay { position: absolute; bottom: 214px; right: 0; width: max-content; max-width: 190px;
  background: var(--white); color: var(--black); border-radius: 16px; padding: 9px 13px;
  font-size: 14px; font-weight: 600; line-height: 1.3; box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 80% 100%;
  transition: opacity .3s, transform .3s; }
.gsay::after { content: ''; position: absolute; top: 100%; right: 26px; border: 7px solid transparent; border-top-color: var(--white); }
.gsay.show { opacity: 1; transform: none; }
/* На первом экране фон под облачком светло-серый, и белое облачко с лёгкой тенью
   на нём терялось: здесь даём плотную тень и контур. */
.gsay.onhero { box-shadow: 0 10px 26px rgba(20,22,32,.22); border: 1px solid #e1e3ec; }
body.noguide .guide { opacity: 0 !important; }
/* ⛔ Узкое окно и телефон: полей у страницы нет, проводник лёг бы на текст */
@media (max-width: 1399px) { .guide { display: none; } }

/* ─── Образы аватарчика в игре ───
   Фон у картинок не вырезан (белая футболка и кроссовки того же тона, что фон), поэтому под
   каждой лежит её собственный цвет фона, а края растворяются маской — стыка не видно. */
.artbig, .anspic { overflow: hidden; display: grid; place-items: center; }
.artbig { -webkit-mask: radial-gradient(75% 68% at 50% 46%, #000 55%, transparent 92%);
          mask: radial-gradient(75% 68% at 50% 46%, #000 55%, transparent 92%); }
.artbig { width: 100%; max-width: 360px; margin: 0 auto; }
.artbig img { width: 100%; height: auto; display: block; }
.arttitle { text-align: center; font-size: 24px; margin-top: 6px; }
.anspic { width: 168px; height: 168px; margin: 0 auto 16px; border-radius: 50%; }
.anspic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.answers.art { max-width: 640px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); }
.answers.art .ans { padding: 22px 16px 24px; }
@media (max-width: 800px) { .artbig { max-width: 260px; } }

@media (prefers-reduced-motion: reduce) { .guide { display: none; } }

/* ─── Правки текстов 20.09.2026 ─── */
/* Заголовок игры — в том же стиле, что заголовки блоков */
.quiz .qhead { text-align: center; margin: 14px 0 6px; }
/* Заголовок игры: буквы подскакивают по очереди слева направо, кубик подкидывается
   с оборотом. Прогон запускается заново, пока блок игры на экране (см. once() в new.js).
   ⛔ Класс именно jump, не play: .play i — это кружок-треугольник на кнопках видео. */
.qhead i { display: inline-block; font-style: normal; }
.qhead .dice { display: inline-block; }
.qhead.jump i { animation: letterjump .62s cubic-bezier(.3,.8,.35,1) both; }
.qhead.jump .dice { animation: dicetoss .85s cubic-bezier(.3,.7,.4,1) .5s both; }
@keyframes letterjump {
  0% { transform: none }
  35% { transform: translateY(-13px) }
  62% { transform: translateY(0) }
  78% { transform: translateY(-4px) }
  100% { transform: translateY(0) }
}
@keyframes dicetoss {
  0% { transform: none }
  45% { transform: translateY(-26px) rotate(200deg) }
  100% { transform: translateY(0) rotate(360deg) }
}
@media (prefers-reduced-motion: reduce) {
  .qhead.jump i, .qhead.jump .dice { animation: none !important; }
}
.quiz .qsub { text-align: center; font-size: 18px; font-weight: 600; color: #333; margin-bottom: 22px; }
/* Соцсети в блоке новостей */
.socbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.socbtns .btn { padding: 14px 20px; font-size: 13px; }
.socbtns .btn img { width: 20px; height: 20px; }
.socbtns .btn.second { background: var(--card); }
/* Светлая иконка канала и приложения */
.chan .ava { background: var(--white); box-shadow: inset 0 0 0 2px var(--lime); display: grid; place-items: center; }
.chan .ava img { width: 26px; height: auto; }
.info .soc .appic { background: var(--white); box-shadow: inset 0 0 0 2px var(--lime); display: grid; place-items: center; }
.info .soc .appic img { width: 20px; height: auto; }
/* Ссылка на личный сайт в карточке основателя */
.person .tags a { background: var(--bg, var(--gray)); border-radius: 20px; padding: 5px 11px; font-size: 13px; font-weight: 600; border-bottom: 2px solid var(--lime); }

/* ─── Где выступают наши дети ─── */
#stage { --wh: 6.6vw; background: linear-gradient(170deg, #eceef2 0%, #f5f6f8 55%, #fbfbfd 100%); }
.showwrap { position: relative; }
.shows { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: none; }
.shows::-webkit-scrollbar { display: none; }
.shows .show { scroll-snap-align: start; text-align: left; background: var(--card); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.shows .show:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.shows .show .ph { display: block; aspect-ratio: 16 / 10; background: #ddd; position: relative; overflow: hidden; }
.shows .show .play-ic { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: var(--lime); display: grid; place-items: center; font-style: normal; font-size: 18px;
  box-shadow: 0 8px 20px rgba(20,22,32,.25); }
.shows .show:hover .play-ic { transform: scale(1.08); }
.shows .show .t { display: block; padding: 16px 18px 20px; font-weight: 600; font-size: 16px; line-height: 1.35; }
.shownav { position: absolute; top: 38%; width: 46px; height: 46px; border-radius: 50%; background: var(--white);
  box-shadow: var(--shadow-sm); font-size: 22px; line-height: 1; z-index: 2; transition: opacity .2s, transform .2s; }
.shownav.prev { left: -14px; } .shownav.next { right: -14px; }
.shownav:hover { transform: scale(1.08); }
.shownav:disabled { opacity: .25; cursor: default; transform: none; }
.vwrap { position: relative; padding-top: 56.25%; border-radius: 18px; overflow: hidden; background: #000; }
.vwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal:has(.vwrap) { max-width: 860px; }
@media (max-width: 800px) { .shows { grid-auto-columns: 86%; } .shownav { display: none; } }

/* ─── Иконки вместо эмодзи (набор OpenMoji, файлы в /img/ic) ───
   Внутри строки — по размеру буквы; в кружке ответа игры, в кнопке реакции и в фонтане
   размер задаёт сам блок через font-size, поэтому везде считаем от em. */
.emj { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -.22em; }
.ans .em .emj { width: 54px; height: 54px; vertical-align: 0; }
.reactbtn .emj { width: 26px; height: 26px; vertical-align: -.2em; }
.stream b .emj { width: 1em; height: 1em; vertical-align: 0; }
.msg .tag .emj { width: 1em; height: 1em; vertical-align: -.15em; }
.msg .rp .emj { width: 1.05em; height: 1.05em; vertical-align: -.2em; }
.gsay .emj { width: 1.05em; height: 1.05em; }
.qtop .back .emj, .res .again .emj, .mbtn .emj { width: 1em; height: 1em; vertical-align: -.12em; }

/* ─── Плашка «Скопировано» ─── */
.toast { position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 16px); z-index: 120;
  background: rgba(21,22,28,.94); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 15px;
  font-weight: 600; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.ct a { cursor: pointer; }


/* ─── Внутренние страницы (как найти, спасибо, 404, документы) ─── */
.page { padding: 120px 0 70px; }
.page h1 { font-family: var(--fh); font-weight: 700; text-transform: uppercase; font-size: clamp(32px, 4vw, 52px); line-height: 1.02; }
.page .lead { font-size: 18px; color: var(--muted); margin-top: 14px; max-width: 640px; }

/* проводник на внутренних страницах: одна реплика, без смены по блокам */
.pguide { position: fixed; right: 40px; bottom: 0; z-index: 40; pointer-events: none; }
.pguide img { height: 210px; display: block; filter: drop-shadow(0 10px 16px rgba(20,22,32,.16)); animation: gidle 3.6s ease-in-out infinite; }
.pgsay { position: absolute; bottom: 214px; right: 0; width: max-content; max-width: 210px; background: var(--white);
  border-radius: 16px; padding: 9px 13px; font-size: 14px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 10px 26px rgba(20,22,32,.22); border: 1px solid #e1e3ec; }
.pgsay::after { content: ''; position: absolute; top: 100%; right: 26px; border: 7px solid transparent; border-top-color: var(--white); }
@media (max-width: 1399px) { .pguide { display: none } }
@media (prefers-reduced-motion: reduce) { .pguide img { animation: none } }

/* Как нас найти */
.rtabs { display: inline-flex; gap: 4px; background: var(--card); border-radius: 40px; padding: 5px; margin: 30px 0 22px; box-shadow: var(--shadow-sm); }
.rtabs button { padding: 11px 22px; border-radius: 30px; font-weight: 600; font-size: 15px; background: none; transition: background .2s; }
.rtabs button.on { background: var(--lime); }
.route { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: start; }
/* ⛔ обязательно: display:grid перебивает атрибут hidden, и неактивный маршрут остаётся на экране */
.route[hidden], .vids[hidden], [hidden] { display: none !important; }
.route .card { background: var(--card); border-radius: var(--r-lg); padding: 26px 28px; box-shadow: var(--shadow-sm); }
.route .step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.route .step:last-child { border-bottom: 0; }
.route .n { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--lime); font-weight: 700;
  display: grid; place-items: center; font-size: 14px; }
.route .st { font-weight: 600; font-size: 16px; }
.route .sd { font-size: 14px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.warnbox { background: #fff6e5; border-radius: 16px; padding: 14px 18px; margin-top: 18px; font-size: 14px; line-height: 1.45; }
.mapbox { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); position: relative; min-height: 340px; background: #e9e9ef; display: block; }
.mapbox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mapbox .mbtn { position: absolute; left: 18px; bottom: 18px; background: var(--white); border-radius: 30px; padding: 11px 18px;
  font-weight: 600; font-size: 14px; box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 8px; }
.vhead { font-family: var(--fh); font-weight: 700; font-size: 20px; margin-top: 40px; }
.vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.vids.one { grid-template-columns: minmax(0, 640px); }
.vcard { background: var(--card); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-align: left;
  transition: transform .25s, box-shadow .25s; }
.vcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.vcard .vph { aspect-ratio: 16/9; background: #2a2b33 center/cover no-repeat; display: grid; place-items: center; }
.vcard .vpl { width: 60px; height: 60px; border-radius: 50%; background: var(--lime); display: grid; place-items: center;
  font-size: 20px; font-style: normal; }
.vcard .vt { display: block; padding: 15px 18px 18px; font-weight: 600; font-size: 16px; }

/* Приложение тёмной плашкой — на «как найти» и «спасибо» */
.appbox { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; background: #15161c; color: #fff;
  border-radius: var(--r-lg); padding: 26px 30px; margin-top: 46px; text-align: left; }
.appbox .qr { width: 116px; height: 116px; background: #fff; border-radius: 18px; padding: 8px; }
.appbox h3 { font-family: var(--fh); font-size: 24px; text-transform: uppercase; }
.appbox p { color: #c9cbd6; font-size: 15px; margin-top: 8px; max-width: 470px; }
.appbox .btn { background: var(--lime); border-radius: 40px; padding: 16px 30px; font-weight: 700; white-space: nowrap; }

/* Спасибо за заявку */
.okwrap { text-align: center; max-width: 780px; margin: 50px auto 0; }
.okwrap .okic { width: 96px; height: 96px; margin: 0 auto 26px; display: block; }
.okwrap h1 { font-size: clamp(30px, 3.4vw, 46px); }
.okwrap .lead { margin: 18px auto 0; font-size: 19px; }
.backlink { display: inline-block; margin-top: 30px; font-weight: 600; border-bottom: 1px solid currentColor; }

/* 404 */
.e404 { text-align: center; max-width: 780px; margin: 0 auto; }
.e404 .big { font-family: var(--fh); font-weight: 700; font-size: clamp(90px, 16vw, 190px); line-height: .9; }
.e404 .big span { color: var(--lime); }
.e404 h1 { font-size: clamp(24px, 2.6vw, 34px); margin-top: 8px; }
.e404 .lead { margin: 14px auto 0; }
.e404 .btns { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.e404 .btn { border-radius: 40px; padding: 16px 32px; font-weight: 700; background: var(--lime); }
.e404 .btn.second { background: var(--white); box-shadow: var(--shadow-sm); }

/* Документы: оферта, согласия, политика */
.doc { display: grid; grid-template-columns: 250px 1fr; gap: 46px; align-items: start; margin-top: 34px; }
.doc .side { position: sticky; top: 110px; }
.doc .side p { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.doc .side a { display: block; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); line-height: 1.3; }
.doc .side a:hover { color: #6a7700; }
.doc .body { background: var(--card); border-radius: var(--r-lg); padding: 38px 42px; box-shadow: var(--shadow-sm); max-width: 840px; }
.doc .body h2 { font-family: var(--fh); font-size: 21px; margin: 32px 0 12px; scroll-margin-top: 110px; }
.doc .body h2:first-child { margin-top: 0; }
.doc .body p, .doc .body li { font-size: 15px; line-height: 1.65; color: #26272e; }
.doc .body p { margin-bottom: 12px; }
.doc .body ul, .doc .body ol { margin: 0 0 12px 20px; }
.doc .body li { margin-bottom: 6px; }
.doc .body a { text-decoration: underline; }
.docmeta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.docmeta span { background: var(--card); border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); }

@media (max-width: 900px) {
  .route, .doc { grid-template-columns: 1fr; }
  .vids, .vids.one { grid-template-columns: 1fr; }
  .appbox { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .doc .side { position: static; }
}

/* ═══ Телефон (до 760 px) ═══════════════════════════════════════════════════════════════
   Компьютерная раскладка на телефоне не уменьшается, а перестраивается: шапка — плашка с лого
   и круглой кнопкой меню, первый экран — как мобильная Тильда (заголовок в три строки, под ним
   кнопки и карточки), блоки — в одну колонку, «Записаться» липнет к низу экрана.
   ⛔ Размеры здесь в px, не в --u: единица --u на телефоне даёт текст в 4–6 px. */
.hmenu, .nmob, .mcta { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  body { font-size: 16px; }

  /* ─── Шапка ─── */
  .hdr { top: 8px; left: 10px; right: 10px; height: 56px; gap: 8px; padding: 0 6px 0 12px; border-radius: 28px;
    background: rgba(246,246,250,.9); }
  .hlog { margin-left: 0; gap: 9px; min-width: 0; }
  .hlog img { height: 38px; }
  .hlog span { font-size: 11px; line-height: 1.15; }
  .hdr .htel, .hdr .hbtn { display: none; }
  .hmenu { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
  .hmenu i, .hmenu i::before, .hmenu i::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--black); transition: transform .25s, background .2s; }
  .hmenu i { position: relative; }
  .hmenu i::before, .hmenu i::after { content: ''; position: absolute; left: 0; }
  .hmenu i::before { top: -6px; } .hmenu i::after { top: 6px; }
  .hdr.open .hmenu i { background: transparent; }
  .hdr.open .hmenu i::before { transform: translateY(6px) rotate(45deg); }
  .hdr.open .hmenu i::after { transform: translateY(-6px) rotate(-45deg); }
  .hdr nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; flex-direction: column; gap: 0;
    background: var(--white); border-radius: 24px; padding: 8px; box-shadow: var(--shadow); font-size: 17px; font-weight: 600;
    opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s; }
  .hdr.open nav { opacity: 1; transform: none; pointer-events: auto; }
  .hdr nav a, .hdr nav button { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; }
  .hdr nav a:active, .hdr nav button:active { background: var(--gray); }
  .hdr nav .nmob { display: block; }
  .hdr nav .ntel { border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 16px; }
  .hdr nav .ncta { background: var(--lime); text-align: center; font-family: var(--fh); font-size: 15px; text-transform: uppercase; margin-top: 6px; border-radius: 40px; padding: 16px; }

  /* ─── Плавающая «Записаться» ─── */
  .mcta { display: block; position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 56px; border-radius: 30px;
    background: var(--lime); font-family: var(--fh); font-weight: 700; font-size: 15px; text-transform: uppercase;
    box-shadow: 0 10px 28px rgba(22,24,32,.25); transform: translateY(140%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .mcta.on { transform: none; }

  /* ─── Блоки: меньше воздуха между ними ─── */
  .sec { padding: calc(var(--wh) + 40px) 0 calc(var(--wh) + 48px); }
  #age { padding-top: 34px; }
  .head { margin-bottom: 20px; }
  .h2 { font-size: min(8vw, 32px); }
  .lead { font-size: 16px; }

  /* Возраст: карточки 2×2, группы — карточкой в столбик */
  .ages { gap: 12px; }
  .age { border-radius: 22px; }
  .age .b { padding: 12px 14px 14px; }
  .age .n { font-size: 21px; margin-bottom: 0; }
  .gpanel { padding: 18px 16px; border-radius: 22px; }
  .gpanel h3 { font-size: 18px; }
  .grow { grid-template-columns: 1fr; gap: 3px; padding: 14px 0; }
  .grow .btn { justify-self: start; margin-top: 8px; padding: 13px 22px; font-size: 13px; }
  .grow .nx { white-space: normal; }
  .gfoot { gap: 18px; }

  /* Основатели */
  .fam { gap: 26px; }
  .fam .photo { border-radius: 26px; aspect-ratio: 4 / 4.6; }
  .fam .photo .play { left: 14px; bottom: 14px; }
  .fam .story { font-size: 16px; }
  .people { grid-template-columns: 1fr; gap: 12px; }
  .person .bio, .person .more p, .person .ab { font-size: 15px; }
  .morebtn { font-size: 14px; padding: 6px 0; }
  .vbtn { padding: 6px 16px 6px 6px; font-size: 14px; }
  .vbtn i { width: 32px; height: 32px; }
  .person .tags a { padding: 8px 12px; font-size: 14px; }
  .manifest { margin-top: 34px; }
  .manifest .small { font-size: 16px; }

  /* Сцена */
  .shows { grid-auto-columns: 84%; gap: 12px; }

  /* Отзывы: карточка рейтинга не липнет — иначе виджет уезжает под неё */
  .score { position: static; padding: 22px 20px; }
  .award img { width: 62px; height: 62px; }
  .motives span { font-size: 14px; padding: 8px 13px; }
  .widget { height: 680px; }

  /* Преподаватели: по двое в ряд, фото сверху */
  .team { gap: 12px; }
  .tm { grid-template-columns: 1fr; gap: 10px; text-align: center; padding: 10px 10px 14px; }
  .tm .nm { font-size: 15px; line-height: 1.2; }
  .tm .rl { font-size: 13px; margin-top: 3px; }
  .sep { height: 56px; }

  /* Цены: вкладки в одну строку, карточки во всю ширину */
  .tabs { display: flex; width: 100%; flex-wrap: nowrap; }
  .tab { flex: 1 1 auto; padding: 12px 8px; font-size: 14px; white-space: nowrap; text-align: center; }
  .tab .c { margin-left: 3px; }
  .prices, .ind { grid-template-columns: 1fr; gap: 12px; }
  .pr .btn { padding: 15px; font-size: 13px; }
  .irow { font-size: 15px; }

  /* Игра */
  .quiz { padding: 18px 14px 22px; border-radius: 28px; }
  .qtop { gap: 10px; font-size: 13px; }
  .qtop .back { white-space: nowrap; padding: 8px 0; }
  .qtop > span { white-space: nowrap; }
  .dots { flex: 1; gap: 4px; max-width: 170px; }
  .dots i { flex: 1; width: auto; height: 6px; }
  .quiz .qsub { font-size: 16px; margin-bottom: 14px; }
  .qt { font-size: 21px; margin-bottom: 18px; }
  .answers, .answers.n3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ans { padding: 16px 8px 14px; border-radius: 20px; }
  .ans .em { width: 64px; height: 64px; margin-bottom: 10px; }
  .ans .em .emj { width: 40px; height: 40px; }
  .ans b { font-size: 14.5px; }
  .anspic { width: 120px; height: 120px; }
  .answers.art .ans { padding: 14px 8px 16px; }
  .qhint { font-size: 13px; margin-top: 16px; }
  .res { gap: 18px; }
  .res .tn { font-size: 28px; }
  .res .tx { font-size: 16px; }

  /* Новости */
  .news { gap: 22px; }
  .socbtns .btn { flex: 1 1 auto; }
  .chan { height: 560px; border-radius: 24px; }
  .feed { padding: 14px 12px 20px; }
  .chan .top { padding: 12px 16px; }
  .reactbtn { right: 12px; bottom: 12px; width: 50px; height: 50px; }

  /* Вопросы */
  .faq { gap: 20px; }
  .ask { padding: 18px; margin-top: 18px; }
  .qlist { padding: 2px 18px; border-radius: 24px; }
  .q .qh { font-size: 16px; padding: 16px 0; gap: 12px; }
  .q .qa p { padding: 0 0 16px; font-size: 15px; }

  /* Как добраться */
  .map { min-height: 260px; }
  .map .mbtn { left: 12px; bottom: 12px; font-size: 14px; }
  .info { padding: 22px 20px; }
  .info .addr { font-size: 20px; }
  .info .ct { gap: 10px 18px; }
  .info .ct a { padding: 4px 0; }
  .info .soc a { padding: 4px 0; }
  .first { gap: 16px; padding: 0 0 22px; }
  .first .ph { height: 180px; }
  .first > div:not(.ph), .first .btn { margin: 0 20px; }

  /* Подвал: место под плавающую кнопку */
  .foot { padding: 26px 0 24px; }
  .fline { gap: 16px; font-size: 14px; }
  .fline .docs { gap: 10px; }
  .fhands { width: 240px; height: 64px; }

  /* Окна */
  .ov { padding: 10px; align-items: flex-end; }
  .modal { padding: 24px 18px 20px; border-radius: 26px; max-height: calc(100dvh - 20px); overflow: auto; }
  .modal h3 { font-size: 21px; }
  .modal .x { right: 12px; top: 12px; width: 40px; height: 40px; }
  .cons { font-size: 13px; }
  .cons input { width: 22px; height: 22px; }
  .toast { bottom: 90px; }

  /* ─── Внутренние страницы ─── */
  .page { padding: 96px 0 50px; }
  .page .lead { font-size: 16px; }
  .rtabs { display: flex; width: 100%; }
  .rtabs button { flex: 1 1 0; padding: 11px 10px; font-size: 14px; line-height: 1.25; }
  .route .card { padding: 20px 18px; }
  .vhead { font-size: 18px; margin-top: 30px; }
  .appbox { padding: 26px 20px; margin-top: 34px; gap: 14px; }
  .appbox .qr { display: none; }
  .appbox h3 { font-size: 21px; }
  .doc { gap: 22px; margin-top: 24px; }
  .doc > * { min-width: 0; }
  .doc .body { padding: 22px 18px; border-radius: 22px; }
  .doc .body h2 { font-size: 18px; scroll-margin-top: 80px; }
  .doc .body p, .doc .body li { font-size: 15px; overflow-wrap: anywhere; }
  .doc .side a { padding: 10px 0; overflow-wrap: anywhere; }
  .okwrap { margin-top: 20px; }
  .okwrap .okic { width: 76px; height: 76px; }
}
/* Совсем узкие (Galaxy Fold, старые Android): название рядом с лого не помещается */
@media (max-width: 359px) {
  .hlog span { display: none; }
  .h-btns { flex-direction: column; align-items: stretch; }
}

/* ═══ Правки по отчётам тестеров (телефоны, планшет) ═══ */
/* Крестик окна видео на «Как нас найти» — та же круглая кнопка, что в окнах главной */
.modal .ovx { position: absolute; right: 16px; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--white); font-size: 22px; line-height: 1; z-index: 2; }
.modal:has(.ovx) h3 { padding-right: 48px; }
/* Значок в кнопке карты: правило .mapbox img растягивало и его на всю карту */
.mapbox .mbtn img { position: static; width: 1em; height: 1em; }
/* Галочка согласия — внутри формы над кнопкой */
.form .cons { grid-column: 1 / -1; margin: 2px 0 4px; }
/* «Спасибо»: что дальше */
.okbtns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.okbtns .btn.second { background: var(--white); box-shadow: var(--shadow-sm); }
/* Согласие на обработку ПД: цели и данные — парами, а не вперемешку */
.ptab { display: grid; gap: 10px; margin: 6px 0 16px; }
.prow { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; background: var(--gray); border-radius: 16px; padding: 14px 16px; }
.prow p { margin: 0 !important; }
.prow b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }

/* Планшет и узкий ноутбук: шапка — как на телефоне (уменьшенная компьютерная не читается) */
@media (max-width: 1024px) {
  .hdr { top: 8px; left: 10px; right: 10px; height: 56px; gap: 8px; padding: 0 6px 0 12px; border-radius: 28px; background: rgba(246,246,250,.9); }
  .hlog { margin-left: 0; gap: 9px; min-width: 0; }
  .hlog img { height: 38px; }
  .hlog span { font-size: 12px; line-height: 1.15; }
  .hdr .htel { display: inline; margin-left: auto; font-size: 15px; }
  .hdr .hbtn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 24px; font-size: 13px; margin-left: 4px; }
  .hmenu { display: grid; place-items: center; margin-left: 4px; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
  .hmenu i, .hmenu i::before, .hmenu i::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--black); transition: transform .25s, background .2s; }
  .hmenu i { position: relative; }
  .hmenu i::before, .hmenu i::after { content: ''; position: absolute; left: 0; }
  .hmenu i::before { top: -6px; } .hmenu i::after { top: 6px; }
  .hdr.open .hmenu i { background: transparent; }
  .hdr.open .hmenu i::before { transform: translateY(6px) rotate(45deg); }
  .hdr.open .hmenu i::after { transform: translateY(-6px) rotate(-45deg); }
  .hdr nav { position: absolute; top: calc(100% + 8px); right: 0; left: auto; width: min(360px, 100%); margin: 0; flex-direction: column; gap: 0;
    background: var(--white); border-radius: 24px; padding: 8px; box-shadow: var(--shadow); font-size: 17px; font-weight: 600;
    opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s; }
  .hdr.open nav { opacity: 1; transform: none; pointer-events: auto; }
  .hdr nav a, .hdr nav button { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; }
  .hdr nav a:active, .hdr nav button:active { background: var(--gray); }
  .hdr nav .nmob { display: block; }
  .hdr nav .ntel { border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 16px; }
  .hdr nav .ncta { background: var(--lime); text-align: center; font-family: var(--fh); font-size: 15px; text-transform: uppercase; margin-top: 6px; border-radius: 40px; padding: 16px; }
  html { scroll-padding-top: 76px; }
  /* карточка рейтинга не липнет поверх виджета отзывов */
  .score { position: static; }
  .sec { padding: calc(var(--wh) + 52px) 0 calc(var(--wh) + 60px); }
}
/* Первый экран на планшете и телефоне — раскладка мобильной Тильды: на ширине до 900 сетка
   1200 даёт подзаголовок в 11 px */
@media (max-width: 900px) {
  .hstage { height: auto; display: flex; flex-direction: column; padding: 84px 16px 22px; }
  .hero .h-kicker, .hero .h-t1, .hero .h-t2, .hero .h-script, .hero .h-sub, .hero .h-btns, .h-where, .hcards { position: relative; top: auto; left: auto; }
  .h-kicker { font-size: 20px; line-height: 1.3; }
  .h-title { display: block; margin-top: 0; }
  .hero .h-t1 { margin-top: 6px; }
  .h-t1, .h-t2 { display: block; font-size: min(10.2vw, 46px); line-height: 1.02; white-space: normal; }
  .h-t2 { text-align: right; }
  .h-script { width: 62%; margin-top: 2px; }
  .h-sub { width: auto; font-size: 16px; line-height: 1.45; margin-top: 12px !important; }
  .h-btns { gap: 10px; margin-top: 20px !important; }
  .h-btns .btn { flex: 1 1 0; min-width: 0; font-size: 13px; padding: 17px 8px; border-radius: 30px; box-shadow: 0 8px 20px rgba(22,24,32,.16); }
  .h-where { font-size: 14px; margin-top: 14px; text-align: center; }
  .hcards { width: 100%; height: min(112vw, 470px); margin-top: 22px; }
  .hcards .pc { border-radius: 20px; border-width: 4px; box-shadow: 0 18px 34px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.1); }
  .hcards .c1, .hcards .c3 { width: 38%; height: 72%; top: 18%; }
  .hcards .c1 { left: 0; } .hcards .c3 { right: 0; }
  .hcards .c2 { width: 48%; height: 94%; left: 26%; }
  /* фон студии — под текстом и верхом карточек, ниже волна уходит в светлый */
  .hbg { height: 72%; }
  .hwave { top: calc(72% - 26vw); left: -40vw; width: 180vw; height: 60vw; }

}
@media (min-width: 761px) and (max-width: 900px) {
  .hstage { padding: 96px 32px 30px; }
  .h-t1, .h-t2 { font-size: 56px; }
  .h-sub { max-width: 560px; font-size: 18px; }
  .h-btns { max-width: 560px; }
  .h-where { text-align: left; }
  .hcards { height: 460px; max-width: 640px; align-self: center; }
}
/* Планшет: основатели — фото и текст рядом, без пустой трети экрана */
@media (min-width: 761px) and (max-width: 1100px) {
  .fam { grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: start; }
  .people { grid-template-columns: 1fr; }
  .rev { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 800px) {
  .first { gap: 16px; padding: 0 0 22px; }
  .first .ph { height: 200px; }
  .first > div:not(.ph), .first .btn { margin: 0 24px; }
}

@media (max-width: 760px) {
  /* ничто не расширяет страницу вбок */
  html, body { overflow-x: clip; }
  .hdr .htel, .hdr .hbtn { display: none; }
  .hdr nav { left: 0; width: auto; }
  .hmenu { margin-left: auto; }
  /* вкладки цен сжимаются, а не вылезают за край */
  .tab { flex: 1 1 auto; min-width: 0; padding: 12px 6px; font-size: 14px; }
  /* первый экран: «Студия танцев» и адрес читаются на сером */
  .h-kicker { text-shadow: 0 1px 10px rgba(0,0,0,.35); }
  /* адрес — мельче и от левого края, под лаймовой кнопкой: черта не заезжает на белую волну */
  .h-where { font-size: 13px; color: #26272e; text-align: left; margin-top: 2px; }
  .h-where a { display: inline-block; padding: 8px 0 4px; border-bottom: 0;
    text-decoration: underline 1px #8d909c; text-underline-offset: 3px; }
  /* белая волна по бокам начинается чуть ниже — под строкой адреса, а не поперёк неё */
  .hwave { top: calc(72% - 26vw + 28px); }
  /* ссылки — под палец */
  .info .ct a { padding: 8px 0; }
  .morebtn { padding: 8px 0; margin: 6px 0 8px; }
  .fline .docs a { padding: 4px 0; }
  .score .small { padding: 10px 0; margin-top: 4px; }
  .fline .copy small { font-size: 12px; }
  .day { background: rgba(0,0,0,.45); font-size: 13px; }
  /* заголовки документов — не на пол-экрана */
  .page h1:has(~ .doc), .page h1:has(~ .docmeta) { font-size: 22px; line-height: 1.15; }
  .okbtns .btn { flex: 1 1 100%; }
}
/* Узкие (до 400): кнопки первого экрана — друг под другом, вкладки цен без счётчиков */
@media (max-width: 400px) {
  .h-btns { flex-direction: column; align-items: stretch; }
  .h-btns .btn { flex: none; font-size: 14px; padding: 17px 12px; }
  .tab .c { display: none; }
}
/* Низкие экраны (старые и маленькие телефоны): плавающая кнопка ниже */
@media (max-width: 760px) and (max-height: 700px) {
  .mcta { height: 46px; font-size: 14px; bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ─── Окно расписания: занятие группы — кнопка записи ─── */
button.ls { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background .2s; }
button.ls:hover { background: #eef2cf; }
.ls .lgo { display: block; margin-top: 4px; font-weight: 700; font-size: 11px; color: #5f6b00; }
.wkb:disabled { opacity: .3; cursor: default; background: var(--white); }
@media (max-width: 760px) {
  /* крестик и переключатель недель не уезжают при прокрутке окна */
  .modal.wide { padding-top: 0; }
  .modal.wide .x { position: sticky; top: 12px; float: right; margin: 12px -4px 0 0; z-index: 3; box-shadow: var(--shadow-sm); }
  .modal.wide h3 { padding-top: 22px; }
  .modal.wide .wk { position: sticky; top: 0; z-index: 2; background: var(--gray); margin: 0 0 10px; padding: 10px 0; }
  .wd { min-height: 0; scroll-margin-top: 64px; }
  .ls { font-size: 14px; padding: 9px 10px; }
  .ls b { font-size: 14px; }
  .ls .lgo { font-size: 13px; }
  /* новости: без прокрутки внутри ленты — палец не «застревает»; фонтан реакций только у края */
  .chan { height: auto; max-height: 900px; }
  .feed { flex: 1 1 auto; }
  .stream { width: 76px; }
}

/* ─── Новости: карусель на телефоне (на компьютере — лента-канал, как было) ─── */
.mmore, .mall, .ncount { display: none; }
.newsfull .msg { max-width: none; box-shadow: none; padding: 0; background: none; }
.newsfull .msg .mb { font-size: 16px; }
@media (max-width: 760px) {
  .chan { height: auto; max-height: none; background: #ecedf2; }
  .chan .pin { display: none !important; }
  .ncount { display: block; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .feed { flex-direction: row; align-items: stretch; gap: 12px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; padding: 14px 16px 76px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .feed::-webkit-scrollbar { display: none; }
  .feed .day { display: none; }
  .feed .msg { flex: 0 0 84%; max-width: none; scroll-snap-align: center; display: flex; flex-direction: column; border-radius: 18px; padding: 14px 16px 12px; }
  .feed .msg .mb { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
  .feed .msg .mf { margin-top: auto; padding-top: 10px; }
  .feed .msg.long .mmore { display: block; align-self: flex-start; margin-top: 8px; padding: 6px 0; font-weight: 700; font-size: 14px; border-bottom: 2px solid var(--lime); }
  .feed .msg.long .mf { order: 2; }
  .feed .mall { display: flex; flex: 0 0 60%; scroll-snap-align: center; flex-direction: column; justify-content: center; gap: 6px;
    background: var(--lime); border-radius: 18px; padding: 18px; }
  .feed .mall b { font-family: var(--fh); font-size: 19px; line-height: 1.15; }
  .feed .mall span { font-weight: 600; }
  .reactbtn { bottom: 14px; }
  .stream { height: 280px; top: auto; }
}
@media (max-width: 760px) {
  .prow { grid-template-columns: 1fr; gap: 8px; }
  .page:has(.doc) h1 { font-size: 22px; line-height: 1.15; }
  .e404 .btns { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
}
/* планшет: QR не нужен (человек и так с устройства), одиночная карточка цены — не на пол-экрана */
@media (max-width: 1024px) {
  .appbox .qr { display: none; }
  .appbox { grid-template-columns: 1fr auto; }
  .morebtn { padding: 8px 0; }
}
@media (max-width: 900px) { .appbox { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .prices:has(> .pr:only-child) { grid-template-columns: minmax(0, 440px); } }
.prow p { hyphens: auto; -webkit-hyphens: auto; }
.qcall { font-size: 20px; margin-bottom: 12px; }
.qnote { font-size: 14px; margin-top: 8px; }

/* ═══ Телефон, второй заход (замечания владельца 24.09.2026): компактнее ═══════════════════
   Заголовки меньше, первый экран аккуратнее, отзывы / итог игры / контакты — примерно в экран. */
@media (max-width: 760px) {
  /* заголовки блоков — как в хороших мобильных сайтах, а не на пол-экрана */
  .h2, .fam .h2 { font-size: min(6.4vw, 26px); line-height: 1.08; }
  .head { margin-bottom: 16px; }
  .lead { font-size: 15px; margin-top: 8px; }
  .sec { padding: calc(var(--wh) + 30px) 0 calc(var(--wh) + 38px); }
  .fam .names { font-size: 17px; }
  .quiz .qhead { font-size: 24px; margin: 8px 0 2px; }
  .qt { font-size: 18px; }

  /* первый экран: заголовок скромнее, веер — маленький и ровный */
  .hstage { padding: 80px 16px 18px; }
  .h-kicker { font-size: 17px; }
  .h-t1, .h-t2 { font-size: min(8.2vw, 36px); }
  .h-script { width: 54%; }
  .h-sub { font-size: 15px; }
  .hcards { width: 88%; max-width: 340px; align-self: center; height: min(66vw, 280px); margin-top: 20px; }
  .hcards .pc { border-width: 3px; border-radius: 16px; box-shadow: 0 12px 24px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.08); }
  .hcards .c1, .hcards .c3 { width: 34%; height: 80%; top: 12%; }
  .hcards .c1 { left: 2%; transform: rotate(-7deg); }
  .hcards .c3 { right: 2%; transform: rotate(7deg); }
  .hcards .c2 { width: 40%; height: 100%; left: 30%; transform: none; }
  .hcards.hi .c1, .hcards.hi .c2, .hcards.hi .c3 { animation: none; }
  .hbg { height: 78%; }

  /* отзывы — в один экран: рейтинг плашкой, темы одной лентой, виджет пониже */
  .score { padding: 16px 16px 14px; border-radius: 22px; }
  .stars { font-size: 22px; }
  .award { margin: 6px 0 8px; gap: 10px; }
  .award img { width: 46px; height: 46px; }
  .award .an { font-size: 15px; }
  .award .ad { font-size: 13px; }
  .score .t { font-size: 15px; margin: 6px 0 8px; }
  .motives { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; scrollbar-width: none; }
  .motives::-webkit-scrollbar { display: none; }
  .motives span { flex: 0 0 auto; font-size: 13px; padding: 7px 12px; }
  .score .btn { padding: 14px; font-size: 13px; }
  .score .small { font-size: 13px; }
  .rev { gap: 12px; }
  .widget { height: 430px; border-radius: 22px; }

  /* итог игры: картинка рядом с «Ваша дочь — …», без повтора названия */
  .res { grid-template-columns: 104px 1fr; column-gap: 14px; row-gap: 0; align-items: center; }
  .res > div { display: contents; }
  .res .artbig { grid-column: 1; grid-row: 1 / span 2; max-width: 104px; }
  .res .arttitle { display: none; }
  .res .k { grid-column: 2; grid-row: 1; align-self: end; font-size: 14px; }
  .res .tn { grid-column: 2; grid-row: 2; align-self: start; font-size: 24px; margin: 2px 0 0; }
  .res .tx, .res .chips, .res .qcall, .res #qform, .res .qnote { grid-column: 1 / -1; }
  .res .tx { font-size: 15px; margin: 12px 0 10px; }
  .res .chips { margin-bottom: 14px; gap: 6px; }
  .res .chips span { font-size: 13px; padding: 6px 11px; }
  .res .qcall { font-size: 16px; margin-bottom: 10px; }
  .res .again { grid-column: 1 / -1; order: 10; margin-top: 10px; padding: 8px 0; }
  .res .qnote { font-size: 13px; }

  /* как добраться: карта ниже, контакты плотнее, «впервые?» — строкой */
  .map { min-height: 190px; }
  .info { padding: 18px 18px 16px; gap: 6px; }
  .info .addr { font-size: 17px; }
  .info .metro { font-size: 14px; }
  .info .warn { font-size: 13px; padding: 10px 12px; margin-top: 4px; }
  .info .ct { padding-top: 6px; font-size: 15px; }
  .info .soc { gap: 8px 16px; padding-top: 2px; }
  .info .soc img, .info .soc .appic { width: 28px; height: 28px; }
  .first { grid-template-columns: 92px 1fr; gap: 12px; padding: 12px; align-items: center; }
  .first .ph { height: 92px; border-radius: 14px; }
  .first .ph i { width: 34px; height: 34px; margin: -17px 0 0 -17px; font-size: 12px; }
  .first > div:not(.ph) { margin: 0; }
  .first .t { font-size: 15px; margin-bottom: 2px; }
  .first p { font-size: 13px; }
  .first .btn { grid-column: 1 / -1; margin: 0; padding: 14px; font-size: 13px; }
}
@media (max-width: 760px) {
  .rev > * { min-width: 0; }
  .quiz .qfade.res, .quiz .res .chips { text-align: left; justify-content: flex-start; }
}
@media (max-width: 760px) {
  /* первый экран: вариант «В» (выбор владельца 24.09.2026) — маленькие «таблетки» в ряд,
     лаймовая и с тонкой обводкой; на всех ширинах телефона, включая узкие */
  .h-btns { flex-direction: row !important; gap: 8px; align-items: center; }
  .h-btns .btn { flex: 0 0 auto; padding: 12px 18px; font-size: 12px; }
  .h-btns .btn:not(.second) { box-shadow: 0 4px 12px rgba(191,217,0,.45); }
  .h-btns .btn.second { background: transparent; box-shadow: inset 0 0 0 1.5px #1a1a1a; }
  /* под веером — сразу следующий блок, а не белая полоса: блок возраста виден без «выплывания» */
  .hstage { padding-bottom: 6px; }
  #age { padding-top: 22px; }
  #age .rise { opacity: 1; transform: none; transition: none; }
  .rise { transform: translateY(24px); }
}
@media (max-width: 359px) { .h-btns .btn { padding: 11px 13px; font-size: 11.5px; } }
@media (max-width: 760px) {
  /* отзывы: сами тексты людей — сразу под заголовком, плашка с наградой и темами — после */
  .rev .widget { order: -1; height: 640px; }
  .score .stars { display: none; }
  .award { margin-top: 0; }
}

/* ─── Значок «играть»: рисованный треугольник вместо символа ▶ ───
   Айфон подменяет ▶ своим цветным эмодзи — на сайте появлялась чужая иконка. */
.play i, .vbtn i, .first .ph i, .play-ic, .vcard .vpl { font-size: 0 !important; }
.play i::before, .vbtn i::before, .first .ph i::before, .play-ic::before, .vcard .vpl::before {
  content: ''; display: block; width: 34%; height: 38%; margin-left: 9%; background: #111;
  clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* реакции: частые нажатия — это реакции, а не «двойное касание для увеличения» */
.reactbtn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Телефон: фонтан без невидимого потолка — летит вверх и чуть выше окна новостей, гаснет сам */
@media (max-width: 760px) {
  .chan { overflow: visible; min-width: 0; }
  .chan .top { border-radius: 24px 24px 0 0; }
  .stream { width: 150px; height: 560px; overflow: visible; }
}
/* Телефон: окна расписания нет (решение владельца 24.09.2026) — группы с днями и временем
   уже в блоке возраста */
@media (max-width: 760px) { [data-schedule] { display: none !important; } .gfoot .ulink[href="#prices"] { margin-right: 0; } }
@media (max-width: 760px) { .hdr nav a[href="/?schedule=1"] { display: none !important; } }

/* ═══ Замечания владельца с живого iPhone, 24.09.2026 ═══ */
@media (max-width: 760px) {
  /* Все окна — одинаковой шторкой снизу */
  .ov { padding: 0; align-items: flex-end; }
  .modal, .modal.wide { width: 100%; max-width: none; max-height: 88vh; overflow: auto; -webkit-overflow-scrolling: touch;
    border-radius: 26px 26px 0 0; padding: 26px 18px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
  .ov.open .modal { transform: none; }
  .modal::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #cfd1d9; }
  .modal .x, .modal .ovx { z-index: 5; touch-action: manipulation; }
  /* «Все цены» под группами на телефоне не нужна */
  .gfoot .ulink[href="#prices"] { display: none; }
  .gfoot:not(:has(.btn)) { display: none; }
  /* Блок, который ещё подтягивается, виден бледной заготовкой, а не пустым местом */
  .rise { opacity: .18; transform: translateY(22px); transition: opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .rise.in { opacity: 1; transform: none; }
  .rise.d1, .rise.d2, .rise.d3 { transition-delay: 0s; }
}
/* Реакции: отклик на каждый тап — короткий, без задержки */
.reactbtn { transition: transform .08s ease; }
.reactbtn.tap span { animation-duration: .16s; }
@media (hover: none) { .reactbtn:hover { transform: none; box-shadow: var(--shadow-sm); } .reactbtn:active { transform: scale(.9); } }

/* ─── Аватарчик-проводник на телефоне: маленький в правом нижнем углу, как на компьютере ───
   Нажатия не ловит (палец проходит сквозь), прячется при открытом окне и открытом меню. */
@media (max-width: 760px) {
  .guide { display: block; right: 6px; bottom: env(safe-area-inset-bottom); }
  .guide .gimg { height: 96px; }
  .gsay { bottom: 98px; right: 4px; max-width: 176px; font-size: 13px; padding: 7px 11px; border-radius: 14px; }
  .gsay::after { right: 22px; border-width: 6px; }
  body:has(.hdr.open) .guide { opacity: 0 !important; }
  .pguide { display: block; right: 6px; }
  .pguide img { height: 96px; }
  .pgsay { bottom: 98px; max-width: 176px; font-size: 13px; padding: 7px 11px; }
}
@media (prefers-reduced-motion: reduce) { .guide, .pguide { display: none !important; } }
.pgsay { transition: opacity .4s; }
/* аватарчик на телефоне — на 5% крупнее (просьба владельца 24.09.2026) */
@media (max-width: 760px) {
  .guide .gimg, .pguide img { height: 101px; }
  .gsay, .pgsay { bottom: 103px; }
}

/* ─── Окно с роликом RuTube на сенсорных экранах ───
   Айфон не рисует видео из вставленного плеера, если вокруг него есть обрезка скруглёнными
   углами, прокрутка или анимация сдвига/прозрачности — видна только подсветка плеера.
   Поэтому окно с роликом: без выезда и затухания, без прокрутки, рамка плеера без обрезки. */
@media (hover: none) {
  .ov:has(.vwrap) { transition: none; }
  .ov:has(.vwrap) .modal { transform: none !important; transition: none; overflow: visible; max-height: none; }
  .vwrap { border-radius: 0; overflow: visible; }
}

/* ─── Страницы под поиск «Танцы для детей N лет» (собирает site/tools/seo_pages.mjs) ─── */
.aphero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.apcta { display: flex; gap: 26px; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.apfacts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; font-size: 15px; }
.apfacts li { display: flex; gap: 10px; align-items: center; }
.apfacts .emj { width: 22px; height: 22px; }
.apphoto { aspect-ratio: 4 / 5; max-height: 520px; width: 100%; border-radius: var(--r-lg); background-size: cover; box-shadow: var(--shadow-sm); }
.apsec { margin-top: 72px; }
.apsec .h2 { margin-bottom: 18px; }
.apnote { color: var(--muted); margin: -6px 0 16px; }
.apcard { background: var(--card); border-radius: var(--r-lg); padding: 8px 28px; box-shadow: var(--shadow-sm); }
.apother { display: flex; gap: 26px; flex-wrap: wrap; font-size: 17px; }
.grow .gage { display: inline-block; margin-left: 8px; font-family: var(--ft); font-weight: 600; font-size: 12px; background: var(--lime); border-radius: 12px; padding: 2px 9px; vertical-align: 2px; }
.aptext { max-width: 760px; display: grid; gap: 12px; font-size: 17px; }
.apsteps { counter-reset: st; }
.apsteps .step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.apsteps .step:last-child { border-bottom: 0; }
.apsteps .n { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--lime); font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.apsteps .n::before { counter-increment: st; content: counter(st); }
.apsteps .st, .apfounders .st { font-weight: 600; font-size: 16px; }
.apsteps .sd, .apfounders .sd { font-size: 14px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.apfactsbox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.apfactsbox > div { background: var(--card); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); display: grid; gap: 4px; }
.apfactsbox b { font-family: var(--fh); font-weight: 700; font-size: 22px; line-height: 1.15; }
.apfactsbox span { color: var(--muted); font-size: 14px; }
.apfounders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.apfounders .apcard { padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.apfounders .apcard p:last-child { font-size: 15px; }
.apfactsbox + .apnote { margin-top: 14px; }
.aph3 { font-family: var(--fh); font-weight: 700; font-size: 20px; margin: 8px 0 14px; }
.aph3 ~ .aph3 { margin-top: 30px; }
.seolinks { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #dcdde4; font-size: 13px; }
.seolinks a { color: var(--muted); }
.seolinks a:hover { color: #000; }
@media (max-width: 760px) {
  .aphero { grid-template-columns: 1fr; gap: 24px; }
  .apphoto { aspect-ratio: 4 / 3; order: -1; }
  .apsec { margin-top: 48px; }
  .apcard { padding: 4px 18px; }
  .apother { flex-direction: column; gap: 14px; }
  .apfactsbox, .apfounders { grid-template-columns: 1fr; }
  .seolinks { gap: 10px 16px; }
  .agepage .gfoot { display: none; } /* на телефоне окна расписания нет — решение владельца */
}

/* ─── Страницы под поиск: название группы и плашки — плашки всегда строкой ниже ─── */
.grow .gt { display: grid; gap: 5px; justify-items: start; }
.grow .gtags { display: flex; flex-wrap: wrap; gap: 6px; }
.grow .gtags .gage, .grow .gtags .closed { margin-left: 0; vertical-align: 0; }

/* ─── Кнопка «на главную» на внутренних страницах (вставляет site/tools/seo_pages.mjs) ─── */
.tohome { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 8px 16px 8px 12px; border-radius: 30px;
  background: var(--card, #fff); box-shadow: var(--shadow-sm); font-weight: 600; font-size: 14px; line-height: 1.2; transition: background .2s; }
.tohome:hover { background: var(--lime); }
.aproutes .rrow { display: grid; grid-template-columns: 220px 1fr auto; gap: 8px 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.aproutes .rrow:first-child { border-top: 0; }
/* Воздух на страницах под поиск (владелец 25.09.2026: «не лепи»): заголовок → подпись → карточка → подпись/ссылки */
.apsec .h2 { margin-bottom: 22px; }
.apsec .h2 + .apnote { margin: -10px 0 22px; }
.apsec .apcard + .apnote, .apsec .apfactsbox + .apnote, .apsec .aproutes + .apnote { margin: 18px 0 0; }
.agepage .apsec .gfoot { margin-top: 20px; }
.apsec .vids { margin-top: 0; }
.apsec .aptext + .apfounders { margin-top: 24px; }
.apsec .aptext p + p a { display: inline-block; margin-top: 6px; }
#aprices + .apcta { margin-top: 32px; }
.aproutes .rst { display: grid; gap: 2px; }
.aproutes .rst b { font-family: var(--fh); font-weight: 700; font-size: 16px; }
.aproutes .rmin { font-weight: 700; font-size: 15px; }
.aproutes .sd { font-size: 14px; color: var(--muted); line-height: 1.45; }
.aproutes .ulink { font-size: 14px; white-space: nowrap; }
@media (max-width: 760px) { .aproutes .rrow { grid-template-columns: 1fr; gap: 4px; } .aproutes .ulink { justify-self: start; margin-top: 4px; } }
.apstyles { display: flex; flex-wrap: wrap; gap: 10px; }
.apstyles span { background: var(--card, #fff); border-radius: 30px; padding: 10px 18px; font-weight: 600; font-size: 15px; box-shadow: var(--shadow-sm); }
.apstyles span:first-child { background: var(--lime); }
.tohome i { font-style: normal; font-size: 16px; }
@media (max-width: 760px) { .tohome { margin-bottom: 16px; } }