:root{color-scheme:dark;--gold:#d3aa61;--lilac:#bda8c8;--body:#c7bdca;--line:#745026}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:#030204;color:var(--body);font:16px/1.5 var(--font-body)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #edcb88;outline-offset:5px}img{max-width:100%;display:block}.wrap{width:min(100% - 48px,1040px);margin:auto}header{min-height:80px;display:flex;align-items:center;gap:28px;position:sticky;top:0;z-index:50}.logo{width:190px}nav{display:flex;gap:22px;align-items:center;flex:1;justify-content:flex-end}nav a{font-family:var(--font-title);text-transform:uppercase;font-size:18px;white-space:nowrap;position:relative;padding:8px 2px;transition:color .35s cubic-bezier(.22,1,.36,1)}nav a:hover{color:#f1dbab}nav a::after{content:'';position:absolute;left:50%;right:50%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transition:left .35s cubic-bezier(.22,1,.36,1),right .35s cubic-bezier(.22,1,.36,1)}nav a:hover::after,nav a:focus-visible::after{left:0;right:0}.ornate{display:flex;align-items:center;justify-content:center;text-align:center;height:55px;width:330px;max-width:100%;border:0;background:transparent url('assets/plate-long.webp?v=25a99f95') center/100% 100% no-repeat;padding:0 48px;color:#e1ccb0;font-size:14px;font-weight:600;text-shadow:0 1px 2px #000c,0 0 6px #0009;transition:filter .2s,transform .2s}.ornate:hover{filter:brightness(1.35);transform:scale(1.03)}.hero{position:relative;min-height:650px;background:url('assets/hero.webp?v=68b9e2a6') center bottom/auto 100% no-repeat}.ticker{position:absolute;top:8px;left:0;right:0;white-space:nowrap;overflow:hidden;text-transform:uppercase;color:#91759f;font:20px var(--font-title);letter-spacing:1px;z-index:0}.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:650px;align-items:center}.hero-copy{grid-column:2;padding:60px 0 0 35px;max-width:365px}h1,h2,h3{font-family:var(--font-title);font-weight:400;text-transform:uppercase;line-height:1.12}h1{font-size:clamp(48px,4.5vw,60px);margin:0 0 28px;background:linear-gradient(#f1dbab,#ad7435 65%,#e5c58c);color:transparent;background-clip:text}p{margin:0 0 22px}.hero-copy p{font-size:16px;line-height:1.35;text-align:center;hyphens:manual}.hero-copy .ornate{margin-left:auto;margin-right:auto}.text-link{display:block;text-align:center;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;font:16px var(--font-title);margin:18px 0 36px}.experience{color:#9c89a8;display:flex;gap:12px;align-items:center;font-size:12px}.experience:before,.experience:after{content:'';height:1px;background:var(--line);flex:1}.skip{position:absolute;left:20px;top:-100px;z-index:9;background:#21102c;padding:12px}.skip:focus{top:10px}.divider{display:flex;align-items:center;gap:16px;text-transform:uppercase;color:var(--gold);font-size:15px;margin:42px auto 26px;letter-spacing:.5px}.divider:before{content:'✦';font-size:9px;border-top:1px solid var(--line);width:15%}.divider:after{content:'';flex:1;height:1px;background:var(--line)}.section-heading{text-align:center;margin-bottom:28px}h2{font-size:30px;color:var(--lilac);margin:0 0 12px}.section-heading p{font:18px var(--font-title)}.services{display:grid;grid-template-columns:1fr 1fr;gap:32px}.service{background:url('assets/consult.webp?v=04e220ed') center/100% 100% no-repeat;padding:35px 38px 42px;text-align:center;min-height:600px;display:flex;flex-direction:column;align-items:center}.service.game{background-image:url('assets/game.webp?v=7ca2ee70')}.eyebrow{text-transform:uppercase;font:12px/1.6 var(--font-title);letter-spacing:3px;color:#c5a67e;margin-bottom:66px}.service h3{font-size:30px;color:var(--lilac);margin:5px 0 15px}.service .intro{font-size:12px;letter-spacing:3px;text-transform:uppercase}.service p{font-size:14px;text-transform:uppercase}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;width:100%;margin:18px 0 30px}.benefits img{width:72px;margin:auto}.benefits span{display:block;font-size:12px;line-height:1.3;margin-top:8px}.service .ornate{margin-top:auto}.scene{position:relative;min-height:610px;display:flex;align-items:center;background-position:center;background-repeat:no-repeat;background-size:auto 100%}.scene .wrap{display:grid;grid-template-columns:1fr 1fr}.scene-copy{grid-column:2;padding:30px 0 30px 25px}.about{background-image:url('assets/about.webp?v=55b2e571')}.scene p{font-size:16px;line-height:1.5}.about h2{color:var(--gold);font-size:30px}.scene .ornate{margin-left:auto}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.trust{position:relative;min-height:292px;border:1px solid #765528;border-radius:20px;padding:26px 20px 20px;background:linear-gradient(145deg,#13091888,#030204)}.trust img{width:88px;height:88px;object-fit:cover;object-position:top left;float:left;margin:-15px 12px 5px -8px}.trust h3{font-size:20px;color:var(--lilac);min-height:72px;margin:7px 0 22px}.trust p{font-size:14px;line-height:1.5;margin:0;clear:both}.daily{background-image:url('assets/daily.webp?v=fd4cdb1b');min-height:740px}.daily .scene-copy{text-align:center;padding:30px 5px 40px 20px}.daily h2{font-size:30px}.daily .ornate{margin:25px auto 12px}.daily small{font-size:12px}.book{background-image:url('assets/book.webp?v=371ba7ba');min-height:610px}.book .scene-copy{grid-column:1;padding:10px 45px 10px 0}.book h2{margin-bottom:45px}.book .ornate{margin-left:0}.reviews{background:url('assets/smoke.webp?v=dbe6b566') center bottom/100% auto no-repeat;padding-bottom:35px}details{border-bottom:1px solid #75617d;padding:15px 0}summary{cursor:pointer;color:var(--lilac);font:18px var(--font-title)}details p{margin:16px 0 5px;font-size:14px}.ending{background:url('assets/smoke.webp?v=dbe6b566') center bottom/cover no-repeat;padding:70px 0 25px}.final-cta{text-align:center;padding:0 0 70px}.final-cta .ornate,.final-cta .text-link{margin-left:auto;margin-right:auto}footer{display:flex;align-items:end;justify-content:space-between;gap:24px;font:12px var(--font-title)}footer .logo{width:190px}dialog{background:#100917;color:var(--body);border:1px solid var(--gold);border-radius:18px;width:min(540px,calc(100% - 32px));padding:42px;box-shadow:0 0 80px #7c3e6855}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog h2{font-size:24px;padding-right:15px}dialog .ornate{margin:25px auto 0}.close{position:absolute;right:14px;top:8px;background:none;border:0;font-size:30px}body:has(dialog[open]){overflow:hidden}
@media(max-width:1000px){header{flex-wrap:wrap;padding:22px 0;gap:18px}header nav{order:3;width:100%;flex:0 0 100%;justify-content:center;flex-wrap:wrap}header .login{margin-left:auto}.hero{background-position:44% bottom}.hero-copy{padding-left:10px}.service{padding:30px 22px}.trust-grid{gap:14px}.trust{padding:22px 15px}.scene{background-position:46% center}.about .scene-copy{background:#08030b99;padding:24px;border-radius:16px}.daily .scene-copy{background:#08030b66;border-radius:50px}.book .scene-copy{background:#08030b77;padding:20px}.trust h3{font-size:18px}}
@media(max-width:650px){.wrap{width:calc(100% - 36px)}header{min-height:100px}.logo{width:150px}nav{gap:13px}nav a{font-size:12px}.hero{--nat:max(360px,calc(100svh - 302px));min-height:calc(100svh - 72px);background-size:auto var(--nat);background-position:calc(var(--nat) * -0.275) calc(var(--nat) * -0.069)}.ticker{top:0;font-size:14px}.hero-grid{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;min-height:calc(100svh - 72px);padding-top:290px;padding-bottom:18px}.hero-copy{padding:0;max-width:100%;text-align:center}.hero-copy p{margin-left:auto;margin-right:auto;font-size:16px}h1{font-size:48px;margin-bottom:18px}.hero .ornate,.hero .text-link,.experience{margin-left:auto;margin-right:auto}.hero .text-link{margin-bottom:22px}.divider{margin-top:34px;font-size:14px;gap:10px}.divider:before{width:7%}.section-heading{text-align:center}h2{font-size:24px}.section-heading p{font-size:16px}.services{grid-template-columns:1fr;gap:22px}.service{min-height:570px;padding:30px 32px}.eyebrow{margin-bottom:55px}.service h3{font-size:30px}.benefits span{font-size:12px}.scene{display:block;background-size:auto 380px;background-position:center top;min-height:0;padding-top:345px}.scene .wrap{display:block}.scene-copy,.about .scene-copy,.book .scene-copy,.daily .scene-copy{padding:25px 6px;background:none;text-align:left}.scene .ornate{margin-left:auto;margin-right:auto}.scene h2{font-size:24px}.about{background-position:15% top;padding-top:375px}.daily{background-size:auto 500px;background-position:16% top;padding-top:465px}.daily .scene-copy{text-align:center}.daily h2{font-size:30px}.book{background-position:78% top;padding-top:345px}.book h2{margin-bottom:20px}.trust-grid{grid-template-columns:1fr;gap:16px}.trust{min-height:0;padding:16px 13px}.trust img{float:none;margin:-5px auto 8px}.trust h3{text-align:center;font-size:18px;min-height:60px;margin:0 0 12px}.trust p{font-size:14px}.ending{padding-top:55px}footer{flex-direction:column;align-items:center;text-align:center;font-size:12px}.final-cta{padding-bottom:35px}dialog{padding:35px 24px}summary{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ornate{transition:none}.ticker-track{animation:none}}

/* Бегущая строка — как на старом сайте (🗣 Е.Г. 31.10: «задвигаем бегущую строку»): две копии
   текста подряд, лента уезжает ровно на половину своей длины и начинается заново — шва нет.
   🔴 Промежуток между копиями задаёт сам текст (« · » в конце копии), а не отступ: отступ
   на шве давал «дырку» на старом сайте (06.08).
   🔴 КОПИЙ ШЕСТЬ, а не две (🗣 Е.Г. 31.10: «на 4К не зациклена, дырки»): половина ленты обязана
   быть шире окна, иначе справа открывается пустота. Копия ≈ 1378 px (замер по шрифту) —
   половина из трёх копий ≈ 4130 перекрывает 4К (3840). Время круга 46 × 3 = 138 с — та же
   скорость, что у старого сайта. Поменял текст или кегль — пересчитай. */
.ticker-track{display:flex;width:max-content;animation:ticker-run 138s linear infinite}

/* Шапка прилипает к верху, как на старом сайте (🗣 Е.Г. 31.10): та же подложка
   rgba(5,4,12,.82) с размытием и та же черта снизу.
   🔴 Шапка — `.wrap` шириной 1040, а подложка нужна во всю ширину окна: её несёт
   `::before`, выпущенный за края на полэкрана в каждую сторону. Чтобы этот выступ
   не дал горизонтальной прокрутки, у `body` стоит `overflow-x:clip` — именно `clip`,
   не `hidden`: `hidden` сделал бы `body` прокручиваемым, и прилипание перестало бы работать.
   ⚠️ `scroll-padding-top` у `html` поднят до 96 (шапка 80 + 16), иначе переход по ссылке меню
   прятал бы заголовок раздела под шапкой. */
body{overflow-x:clip}
header::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:rgba(5,4,12,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #74502d66}
@keyframes ticker-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.service,.trust,.scene-copy{min-width:0}.service h3{overflow-wrap:anywhere} @media(max-width:380px){header .logo{width:135px}header .login{font-size:15px;padding:5px 12px}.trust-grid{grid-template-columns:1fr}.service{padding:30px 20px}.service h3{font-size:24px}.benefits{gap:8px}}

/* Заголовок первого экрана — ДВЕ строки, крупно, во всю колонку, как на образце владельца
   (🗣 Е.Г. 31.10: «большими и на всю ширину, в два столбика как на рефе»; прежде — одной
   строкой 38). Кегль считается от ширины колонки: `cqi` — сотая доля ширины `.hero-copy`.
   🔴 Каждая строка — СВОИМ кеглем, обе точно во всю колонку (🗣 31.10: «ИЗ ХАОСА короче, чем
   надо» → «В ЯСНОСТЬ надо меньше просто сделать по размеру»; разрядку не брать).
   По ширине букв в Cormorant Garamond: «ИЗ ХАОСА» 4.968 кегля → 100 / 4.968 ≈ 20.13 → 20.1cqi;
   «В ЯСНОСТЬ» 5.399 → 18.52 → 18.5cqi. Колонка 330 (ширина кнопки, как на образце) —
   ≈ 66 и 61 px, они же запасные значения для старых браузеров.
   ⚠️ Стоит последним в файле нарочно: перебивает `h1` из правил телефона. Вне ряда кеглей
   намеренно — здесь размер задаёт ширина, а не шкала. */
.hero-copy{container-type:inline-size}
.hero-copy h1{font-size:61px;font-size:18.5cqi;line-height:1;white-space:nowrap}
.hero-copy h1 .fit-1{font-size:66px;font-size:20.1cqi}
.hero-copy h1 .fit-2{font-size:61px;font-size:18.5cqi}
/* Телефон: строки заголовка плотнее, отступы над и под подписью меньше (🗣 Е.Г. 31.10, «сожми
   межстрочное чуть», «расстояние над и под текстом сожми чуть»): 18 → 8 и 22 → 12. */
@media(max-width:650px){.hero-copy h1{line-height:.82;margin-bottom:8px}.hero-copy p{line-height:1.22;margin-bottom:12px}.hero .text-link{margin:8px auto}}

/* «Выбрать карту дня» — подсветка при наведении, как у кнопок (🗣 Е.Г. 31.10): светлое золото,
   золотое свечение букв и то же лёгкое увеличение 1.03. */
.text-link{transition:color .25s,text-shadow .25s,transform .25s}
.text-link:hover{color:#f1dbab;text-shadow:0 0 8px #f2cf6399,0 0 16px #d8a94e66;transform:scale(1.03)}

/* Разделители — из игры (🗣 Е.Г. 31.10: «все разделители… возьми из игры»): нити, гаснущие
   к краям, восьмиконечная звезда (игра: `.rule` в `screens/game/slides.module.css`).
   Свет поначалу стоял игровой (3 · 7 · 145%) — владелец попросил намного слабее, ниже.
   У сайта посередине надпись, поэтому звезда — по обе стороны от неё: нить → звезда → надпись
   → звезда → нить.
   🔴 Звезда — рисунком внутри подложки нити, а не отдельным элементом с `clip-path`: свет
   на вырезанном элементе срезается вместе с ним (игра, У-102). `drop-shadow` светит по
   силуэту всей подложки — и нити, и звезды разом. */
/* Ромбы — как у главного разделителя игры (`.ruleMain`): три пары убывающей величины
   8 / 6 / 3 (сторона квадрата; на угол он занимает ×1.41), просвет 8 (🗣 Е.Г. 31.10: «надо
   добавить ромбики»). Узор: нить → мельчайший → малый → средний → звезда.
   Свет «намного меньше у звёздочек» (🗣 31.10) — два слабых прохода вместо набора игры. */
:root{--rule-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fdf3d0'/%3E%3Cstop offset='.45' stop-color='%23f2cf63'/%3E%3Cstop offset='1' stop-color='%23b8811f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon fill='url(%23d)' points='50,0 100,50 50,100 0,50'/%3E%3C/svg%3E");--rule-glow:drop-shadow(0 0 2px #f2cf6366) drop-shadow(0 0 4px #f2cf6333)}
/* 🗣 Е.Г. 31.10, следом: «оставь только самую мелкую точку, остальные убери, и звезду тоже».
   Узор теперь: нить → мельчайший ромб → надпись → мельчайший ромб → нить. */
.divider::before,.experience::before{content:'';height:18px;border:0;font-size:0;opacity:.85;filter:var(--rule-glow);background:var(--rule-diamond) right center/4.5px 4.5px no-repeat,linear-gradient(90deg,transparent,#c9a24a) left center/calc(100% - 13px) 1px no-repeat}
.divider::after,.experience::after{content:'';height:18px;opacity:.85;filter:var(--rule-glow);background:var(--rule-diamond) left center/4.5px 4.5px no-repeat,linear-gradient(90deg,#c9a24a,transparent) right center/calc(100% - 13px) 1px no-repeat}
.experience::before,.experience::after{flex:1}
/* Между пунктами меню — золотой ромбик из разделителей сайта, со светом (🗣 Е.Г. 31.10:
   «я выбирал золотые ромбики как разделители» — вариант 2 страницы вариантов). Стоит ровно
   посередине промежутка; `::after` у пункта занят чертой наведения, поэтому ромб — на `::before`.
   ⚠️ До того на минуту ставился вариант 3 «без разделителей» — я перепутал номера (У-192). */
nav a+a::before{content:'';position:absolute;top:50%;width:5px;height:5px;transform:translate(-50%,-50%);background:var(--rule-diamond) center/100% 100% no-repeat;filter:var(--rule-glow);pointer-events:none;left:-11px}
@media(max-width:650px){nav a+a::before{left:-6.5px}}

/* Заголовок и подпись под разделителем — крупнее, обе строки в одной пропорции × 1.2
   (🗣 Е.Г. 31.10: «пропорционально обе строки больше»): 30 / 18 → 36 / 22, на телефоне
   24 / 16 → 29 / 19. Вне ряда кеглей намеренно — держится пропорция.
   Расстояние между ними меньше (🗣 31.10: «уменьши вертикально везде»): отступ под
   заголовком 12 → 4, межстрочный подписи 1.2. */
.section-heading h2{font-size:36px;margin-bottom:4px}
.section-heading p{font-size:22px;line-height:1.2}
@media(max-width:650px){.section-heading h2{font-size:29px}.section-heading p{font-size:19px}}

/* Карточки «Консультации» и «Трансформационная игра» — колонка внутри уже (🗣 Е.Г. 31.10:
   «ширину колонки внутри карточек уже, значки поуже, названия чуть меньше, чтобы консистентно»).
   Колонка 330 — ширина кнопки внизу карточки, всё содержимое на одной оси с ней.
   Названия — один кегль 26 на обеих: «ТРАНСФОРМАЦИОННАЯ» в Cormorant шириной 11.9 кегля →
   ≈ 310 из 330 (замер по шрифту; при 30 было ≈ 357 и не влезало). На телефоне 24. */
.service>*{max-width:330px}
.service h3{font-size:26px}
@media(max-width:650px){.service h3{font-size:24px}}
/* «Больше, чем просто ответы» — чуть крупнее и с лёгким золотым светом (🗣 Е.Г. 31.10):
   12 → 14. Первый свет (два слабых прохода) владелец не увидел — «свечение добавь»: теперь
   три прохода золотом — ядро 4, средний 10, мягкий 22. */
.eyebrow{font-size:14px;text-shadow:0 0 4px #f2cf63aa,0 0 10px #f2cf6380,0 0 22px #d8a94e59}
/* Значки карточек — лёгкий золотой ореол по контуру (🗣 31.10: «и у иконок свечение добавь»).
   У `service-*.webp` прозрачный фон, поэтому `drop-shadow` светит по силуэту, а не квадратом. */
.benefits img{filter:drop-shadow(0 0 4px #f2cf6366) drop-shadow(0 0 10px #d8a94e40)}
/* Ряд значков — привязан к НИЗУ карточки, над кнопкой (🗣 31.10: «иконки на одной высоте,
   привязать к низу, а не к верху»). Сверху его сдвигал заголовок: «Трансформационная игра» —
   две строки, «Консультации» — одна. Подписи под значками — по месту ровно на три строки
   (12 × 1.3 × 3 = 3.9em), иначе ряд с двустрочными подписями встал бы ниже соседнего. */
.service .benefits{margin:auto 0 30px}
.service .ornate{margin-top:0}
.benefits span{min-height:3.9em}

/* «Я — Наталья Датченко»: текст по ширине, кнопка по центру под колонкой (🗣 Е.Г. 31.10).
   Без переносов по слогам — владелец их не принимает (первый экран, 31.10); колонка широкая,
   слов в строке много, разрывы малы. Последняя строка абзаца — влево, как в книге. */
.about .scene-copy p,.book .scene-copy p{text-align:justify;hyphens:manual}

/* «Слова, которым доверяют» — внутрь картины (🗣 Е.Г. 31.10: «картинку оставляем, а внутри
   картинки заголовок и далее опускаем ниже»). Дым `smoke.webp` (1980 × 742) во всю ширину
   выше блока и срезан по его верхнему краю — заголовок стоял на самом срезе. Отступ сверху
   опускает содержимое внутрь картины; сама картина остаётся, где была. Было 96 —
   🗣 «выше на половину обратно» → 48 (телефон 24). 01.11 → 20: 🗣 «разделитель „Впечатления
   и обратная связь“ вместе с верхним чуть ближе к „Слова, которым доверяют“», затем → 0:
   🗣 «расстояние такое же, как у „Почему мне доверяют“» (там подпись → заголовок 26). */
.reviews{padding-top:0}

/* Раскрытый вопрос «Возможно, вы хотите узнать» толкает низ ВНИЗ, а не уезжает вверх
   (🗣 Е.Г. 31.10: «открывашки вверх поднимаются, а должны вниз толкать»). Скрипта у раскрывашек
   нет; ВЫВОД: это «удержание прокрутки» браузера — он берёт опорой кусок страницы ниже (подвал,
   дымку) и прокручивает так, чтобы опора не сдвинулась, отчего всё выше уходит вверх.
   Удержание выключено на всей странице. */
html{overflow-anchor:none}

/* Вопросы — золотая стрелка СЛЕВА (🗣 31.10: «стрелки разворота слева, по умолчанию все закрыты»)
   вместо серого треугольника; раскрыто — стрелка вверх. Ответ отодвинут вровень с текстом вопроса.
   (🗣 Е.Г. 31.10: «стрелочку, чтобы было понятно, что можно развернуть… с анимацией»).
   Плавное раскрытие — expand.js. */
.faq-item summary{list-style:none;position:relative;padding-left:32px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'';position:absolute;left:6px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:translateY(-70%) rotate(45deg);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.faq-item[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq-item summary:hover{color:#f1dbab}
.faq-item p{padding-left:32px}

/* Подвал — только логотип по центру (🗣 Е.Г. 31.10: «в футере оставь только логотип по центру.
   Убери справа три текста»). */
footer{justify-content:center}

/* Меню: «Главная» первым пунктом (🗣 Е.Г. 31.10: «не все знают, что по логотипу надо щёлкнуть»);
   открытая страница отмечена той же золотой чертой, что при наведении — на всех страницах.
   🔴 Шестой пункт удлинил шапку: в одну строку при меню 18 нужно окно 1100 (замер по шрифту:
   меню 646 + логотип 190 + «Войти» 160 + промежутки и поля). Между 1001 и 1100 — меню 16,
   промежутки 16, логотип 170: нужно 991. Ниже 1000 меню уходит на вторую строку, как было. */
nav a[aria-current="page"]{color:#f1dbab}
nav a[aria-current="page"]::after{left:0;right:0}
/* 🔴 Семь пунктов в одну строку (31.10). Замер по шрифту (Cormorant, заглавные): меню 18 с
   промежутками больше 13 не влезает в колонку 1040 рядом с логотипом и «Войти» — пункты
   «слипались». 🗣 Е.Г. выбрал вариант 2: меню 17, промежуток 19, ромб посередине (меню ~715
   из 717). Между 1001 и 1100 — меню 15, промежуток 14, логотип 160 (~617 из 640 при окне
   1001). Ниже 1000 меню уходит на вторую строку, как было. */
@media(min-width:1001px){nav{gap:19px}nav a{font-size:17px}nav a+a::before{left:-9.5px}header .logo{width:170px}}
@media(min-width:1001px) and (max-width:1100px){nav{gap:14px}nav a{font-size:15px}nav a+a::before{left:-7px}header .logo{width:160px}}
@media(max-width:650px){.reviews{padding-top:24px}}
.about .ornate{margin-left:auto;margin-right:auto}
.about h2{text-align:center}
/* Колонка текста уже, как на образце владельца (🗣 31.10): там ≈ 44 % ширины страницы
   (280 из 638), у нас было ≈ 507 из 1040. 440 при кегле 16 — около семи слов в строке, как
   на образце; колонка по центру правой половины. */
@media(min-width:651px){.about .scene-copy{max-width:440px;justify-self:center}}

/* «Почему мне доверяют» (🗣 Е.Г. 31.10: «иконки больше, свечение, тексты justify, цифры плохие —
   мелкие и смещены»).
   • Значки: файлы `trust-icon-*.webp` были вырезаны неровно — рисунок прижат к углу, а сайт
     показывал кусок 88 × 88 от левого верхнего угла. Файлы обрезаны по контуру рисунка
     (195 × 185 и 210 × 186), здесь — целиком (`contain`), с тем же светом, что в
     карточках услуг. Сменил файл значка — обнови `?v=` у него в `index.html`.
     Размер 80 (было 120 — 🗣 «"Психологическое образование" вылезает за рамку, иконки
     меньше»): в карточке ≈ 292, «ПСИХОЛОГИЧЕСКОЕ» при 20 — 201 (замер по шрифту), значку
     с отступами остаётся ≈ 84. Заголовок — высотой ровно со значок и с той же верхней
     кромки, поэтому его середина = середина значка (🗣 «не точно по центру от иконок»).
   • Цифры: у Cormorant по умолчанию «старинные» — ростом со строчную, часть уходит ниже
     строки. Ровные (`lining-nums`) — ростом с заглавную; тот же приём в игре (мина
     в `game/DOCS/CODE_MAP.md`). Ставится на ВСЁ, что набрано Cormorant, — последним в файле,
     потому что сокращение `font:` сбрасывает это свойство. */
.trust img{width:80px;height:80px;object-fit:contain;object-position:center;margin:0 12px 6px -8px;filter:drop-shadow(0 0 4px #f2cf6366) drop-shadow(0 0 10px #d8a94e40)}
.trust h3{min-height:80px;display:flex;flex-direction:column;justify-content:center;margin-top:0}
.trust p{text-align:justify;hyphens:manual}

/* Блоки с картинами — ПОСТОЯННОЙ высоты, как первый экран (🗣 Е.Г. 31.10: «все картинки
   уменьшать горизонтально, чтобы тексты оставались на них правильно»). Рост с шириной окна
   (`max(…, NNvw)`) растягивал картину, и её рисунок — круг «Карты дня», рамка «Обо мне» —
   уезжал из-под текста. Теперь картина по высоте блока и по центру окна: на любой ширине
   шире колонки 1040 круг стоит на одном месте относительно текста.
   «Карта дня» — текст в центр круга: круг на картине ≈ 0.70 её ширины (замер по снимку
   владельца: центр круга 840 при окне 1115 и картине 1421), то есть +283 от середины окна;
   колонка текста — +260 (середина правой половины колонки 1040) → сдвиг +23; по снимку
   владельца после этого текст ещё ≈ 23 левее звезды на оси круга → итог +46, по высоте —
   середина круга. ⚠️ Пробовали выше на 48 и левее на 8 — 🗣 «сильно улетел влево вверх,
   назад»: возвращено к +46 / середине; затем «чуть выше» — на 16. Ширина 360 —
   чтобы строки не заходили на край круга (диаметр ≈ 540). */
@media(min-width:1001px){.daily .scene-copy{position:relative;left:46px;top:-16px;max-width:360px;justify-self:center;padding:30px 0 40px}}
/* «Обо мне» — текст левее на 50, на ось круга (🗣 31.10: «чуть левее, текст не попал в круг»;
   по снимку владельца середина текста на ≈ 50 правее звезды на оси круга). */
@media(min-width:1001px){.about .scene-copy{position:relative;left:-50px}}

/* Края картин — растворяются в фон страницы (🗣 31.10: «по бокам у всех фонов на всю ширину
   уводить в тёмное, чтобы растворялись до чёрного»). Картина по высоте блока и по центру,
   поэтому её ширина = высота × пропорция файла; затемнение той же ширины (`aspect-ratio`)
   ложится ровно на её края. На окне уже картины края за экраном — затемнения не видно.
   Слои: картина → затемнение → текст.
   🔴 ПЕРВЫЙ ЭКРАН — НЕ ЗАТЕМНЕНИЕМ, А ПРОЗРАЧНОСТЬЮ В ФАЙЛЕ: за Натальей идёт бегущая строка,
   и тёмная полоса поверх картины гасила и её (🗣 31.10: «затемнение затрагивает бегушку, надо
   уводить альфу в 0»). Края `hero.webp` (14 % ширины, 277 px) растворены в прозрачность прямо
   в файле; сквозь них видна строка. Исходник Натальи — в истории хранилища.
   01.11 к боковым добавлены верх и низ (вторая полоса того же затемнения, 14 % высоты) — у трёх
   картин «Давайте знакомиться», «Карта дня», «Книга» (🗣 «у этих трёх только сверху и снизу»;
   первый экран не трогать — у него своя кромка маской). */
@media(min-width:651px){
.scene::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);height:100%;pointer-events:none;background:linear-gradient(90deg,#030204,#03020400 14%,#03020400 86%,#030204),linear-gradient(180deg,#030204,#03020400 14%,#03020400 86%,#030204)}
.about::after{aspect-ratio:1980/831}
.daily::after{aspect-ratio:1980/1031}
.book::after{aspect-ratio:1980/827}
.scene .wrap{position:relative;z-index:1}
}
@media(max-width:650px){.trust img{width:96px;height:96px;margin:-5px auto 8px}.trust h3{min-height:60px;align-items:center}}
h1,h2,h3,nav a,.eyebrow,.ticker,.text-link,.section-heading p,.rv-text,.rv-who,summary{font-variant-numeric:lining-nums}

/* Слова разделителя — по центру страницы (🗣 Е.Г. 31.10): левая нить не 15 % (у Натальи),
   а такая же, как правая — обе делят остаток поровну. */
.divider::before,.divider::after{flex:1 1 0;width:auto}

/* Окно «Личный кабинет» и прочие окна-заглушки (🗣 Е.Г. 31.10: «оцентровать, подложку под
   кнопкой короче»): заголовок и текст — по центру, на одной оси с кнопкой; «Понятно» —
   обычная плашка игры (`button_plate_1`, как «Войти») в размере игры 220 × 55. */
dialog{text-align:center}
dialog h2{padding:0 24px}
dialog .ornate{width:220px;background-image:url('assets/plate.webp?v=5311dd27')}

/* Бегущая строка — ЗА Натальей (🗣 Е.Г. 31.10: «у картинки есть альфа, хочу, чтобы бегушка была
   позади картинки»; так же было на старом сайте). У `hero.webp` прозрачный верх (89 % верхней
   четверти), строка видна вокруг силуэта.
   🔴 Картина вынесена из фона `.hero` в `.hero::before`: фон блока рисуется ПОД всеми его
   детьми, и строка не могла бы уйти за него ни при каком `z-index`. Слои: строка 0 →
   картина 1 → текст 2. Положение и размер картины подложка берёт `inherit` из правил `.hero`
   (в том числе для телефона и широких экранов) — менять их по-прежнему там.
   «Картинку выше вместе с правым блоком» — весь первый экран поднят на 64 под шапку,
   строка опущена до головы (`top` 112). Только на компьютере: у телефона своя раскладка. */
.hero{isolation:isolate;background-image:none}
.hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:inherit;background-image:url('assets/hero.webp?v=68b9e2a6')}
.hero-grid{z-index:2}
/* ⚠️ `hero.webp` у Натальи был полупрозрачным ЦЕЛИКОМ: тело фигуры — прозрачность 227–228 из 255
   (≈ 89 %), и строка за ним просвечивала (🗣 31.10: «картинка с Натальей полупрозрачная вся»).
   Прозрачность поднята в файле: × 255/228, края силуэта — в той же пропорции. Исходник —
   в истории хранилища. Сменил картинку — обнови `?v=` (первые 8 знаков `sha1sum`). */
/* 🗣 31.10 следом: «Наталью чуть ниже, а бегушку чуть выше» — картина сдвинута вниз на 24
   (текст справа на месте), строка поднята на 24: 112 → 88. */
/* 🔴 БЕЗ ПОРОГА (🗣 31.10: «на 4К на ¾ ширины прыжок»). У Натальи с 1650 картины переключались
   на `100% auto` при прежней постоянной высоте блока — блок и картина прыгали, а строка на
   постоянных 88 px оказывалась над головой. Теперь картина ВСЕГДА по высоте блока
   (`auto 100%`), а высота первого экрана ПОСТОЯННАЯ — 650 (`.hero`, `.hero-grid`).
   ⚠️ Пробовали растить её с шириной (`max(650px, 49.5vw)`) — Наталья, строка и текст уезжали
   вниз при растягивании окна (🗣 31.10: «уезжает вниз, а это плохо»). На очень широком окне
   по бокам картины — тёмный фон страницы. Строка и сдвиг Натальи — в долях высоты блока
   (88/650 ≈ 13.5 %, 24/650 ≈ 3.7 %). */
@media(min-width:651px){.hero{margin-top:-64px}.ticker{top:13.5%}.hero::before{transform:translateY(3.7%)}}

/* «Войти» / имя вошедшего (`account.js`, общий вход сайта и игры, 31.10). С 31.10 — обычная
   кнопка без фирменной плашки (🗣 Е.Г.: «без фирменной подложки, и тогда всё влезет в один
   ряд»): шрифт и заглавные — как у меню, тонкая золотая рамка, при наведении — свет. Пока игра
   не ответила «кто вошёл», кнопка невидима, но место держит: шапка не прыгает и «Войти» не
   мигает в имя. Длинное имя не распирает шапку — обрезается многоточием. */
[data-account][data-pending]{visibility:hidden}

/* Место под полосу прокрутки держится всегда (Д-76, 🗣 Е.Г. 31.10: «когда нажимаю и фон в блюр
   уходит, то фон чуть сдвигается вправо»). Открытое окно запрещает странице прокрутку
   (`body:has(dialog[open]){overflow:hidden}`), полоса исчезала, страница становилась шире на
   её ширину — и всё, что стоит по центру, съезжало вправо на половину полосы. */
html{scrollbar-gutter:stable}

/* Раскрывашка «Читать подробнее» / «Прочитать больше отзывов» — строка со стрелкой и чертой
   (`expand.js`). Перенесена из `pages.css` 31.10: ею пользуется и главная (отзывы). */
.more-toggle{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:4px 2px;cursor:pointer;text-transform:uppercase;font:16px var(--font-title);color:var(--body);margin:4px 0 16px;transition:color .25s,text-shadow .25s}
.more-toggle{text-decoration:underline;text-underline-offset:4px}
.more-toggle::after{content:'';width:7px;height:7px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:translateY(-3px) rotate(45deg);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.more-toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.more-toggle:hover{color:#f1dbab;text-shadow:0 0 8px #f2cf6399,0 0 16px #d8a94e66}

/* Кнопка без фирменной плашки — шрифт и заглавные меню, тонкая золотая рамка, при наведении
   свет. «Войти» в шапке и «Оставить своё впечатление» в отзывах (🗣 Е.Г. 31.10: «без плашки
   фирменной»). У «Войти» сверху — предел ширины: длинное имя вошедшего обрезается многоточием. */
.btn-line{display:inline-flex;align-items:center;justify-content:center;font:18px var(--font-title);text-transform:uppercase;font-variant-numeric:lining-nums;color:#f1dbab;border:1px solid var(--gold);border-radius:999px;padding:6px 18px;line-height:1.2;white-space:nowrap;transition:background-color .25s,box-shadow .25s}
.btn-line:hover{background:#d3aa611f;box-shadow:0 0 12px #d3aa6155}
.login{flex:none;display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;padding:6px 16px}

/* Отзывы — СПИСОК ПЕРВЫХ СТРОК (🗣 Е.Г. 31.10: «список первых строк из впечатлений сделать как
   бы превью, а не табличку по умолчанию»; раньше — «крупнее тексты… чтобы подписи читались, кто и
   откуда», «в одну колонку»). Строка — как вопросы ниже: стрелка слева, тонкая черта снизу;
   текст 22 в одну строку с многоточием, под ним «кто • откуда» 15 золотом. Нажал — текст
   раскрывается целиком (`reviews.js`), абзацы — как написаны. Ширина — 760 по центру, как у
   формы «Контактов». Список — целиком (🗣 «ПРОЧИТАТЬ ВСЕ ОТЗЫВЫ убирай кнопку»), под ним — «Оставить своё впечатление». */
/* Небольшой разделитель под заголовком отзывов (🗣 Е.Г. 31.10: «разделитель небольшой под
   „Слова, которым доверяют“…»): короткая нить с ромбом посередине — те же ромб, золото и свет,
   что у разделителей разделов, ширина 200. */
.mini-rule{display:block;width:200px;height:18px;margin:14px auto 0;opacity:.85;filter:var(--rule-glow);background:var(--rule-diamond) center/5px 5px no-repeat,linear-gradient(90deg,transparent,#c9a24a) left center/calc(50% - 9px) 1px no-repeat,linear-gradient(90deg,#c9a24a,transparent) right center/calc(50% - 9px) 1px no-repeat}
.rv-list{max-width:760px;margin:0 auto}
/* Вопросы «Возможно, вы хотите узнать» — той же ширины, что список отзывов над ними
   (🗣 Е.Г. 31.10: «колонка под „Возможно, вы хотите узнать“ шире, чем отзывы — сделай такой же»). */
.faq-item{max-width:760px;margin-left:auto;margin-right:auto}
.rv-item{border-bottom:1px solid #75617d}
.rv-head{display:block;width:100%;text-align:left;background:none;border:0;padding:16px 0 16px 32px;position:relative;cursor:pointer;color:inherit}
.rv-head::before{content:'';position:absolute;left:6px;top:28px;width:8px;height:8px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:translateY(-50%) rotate(45deg);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.rv-item.open .rv-head::before{transform:translateY(-25%) rotate(-135deg)}
.rv-text{display:block;font:22px/1.4 var(--font-title);color:var(--lilac);white-space:pre-line}
.rv-item:not(.open) .rv-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-head:hover .rv-text{color:#e3d4ec}
.rv-who{display:block;margin-top:6px;font:15px/1.5 var(--font-title);letter-spacing:.3px;color:var(--gold)}
.review-actions{display:flex;justify-content:center;margin-top:28px}
/* «Ещё отзывы (N)» под первыми тремя (🗣 Е.Г. 02.11) — строка, а не кнопка в рамке: золотой
   текст со стрелкой, как у раскрытия отзыва; открыто — стрелка вверх. */
.rv-more{display:block;margin:18px auto 0;background:none;border:0;padding:6px 26px 6px 0;position:relative;cursor:pointer;font:17px/1.4 var(--font-title);letter-spacing:.6px;text-transform:uppercase;color:var(--gold)}
.rv-more::after{content:'';position:absolute;right:4px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:translateY(-70%) rotate(45deg);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.rv-more.open::after{transform:translateY(-20%) rotate(-135deg)}
.rv-more:hover{color:#f0d089}
@media(max-width:650px){.rv-text{font-size:19px}}

/* Свечение букв «Из хаоса в ясность» (🗣 Е.Г. 31.10: «добавь свечение у букв на главной
   вверху»). 🔴 Через `filter: drop-shadow`, а не `text-shadow`: буквы залиты переливом
   (`background-clip:text`, цвет прозрачный), и тень букв просвечивала бы сквозь них, мутя
   золото. `drop-shadow` светит от уже раскрашенных букв. Тон и сила — как у «Больше, чем просто
   ответы» (`.eyebrow`). ⚠️ `filter` делает заголовок отдельным слоем — он и так над картинкой. */
.hero-copy h1{filter:drop-shadow(0 0 4px #f2cf6366) drop-shadow(0 0 14px #d8a94e4d)}

/* ── Кнопка меню ☰ на узких экранах (Д-77, 🗣 Е.Г. 31.10: «да» на кнопку меню) ──────────────
   Шире 1000 — меню строкой, кнопки нет. Уже 1000 (там, где меню прежде переносилось на вторую
   строку): в шапке логотип, «Войти» и кнопка ☰; по нажатию меню выезжает списком под шапкой,
   на той же полупрозрачной подложке во всю ширину экрана; три полоски складываются в крестик.
   Открывает и закрывает `menu.js` (класс `nav-open` у шапки). Ромбы между пунктами в списке
   не нужны — пункты разделены строками. */
.menu-btn{display:none}
@media(max-width:1000px){
header{flex-wrap:nowrap;padding:12px 0;gap:14px;min-height:72px}
header .login{margin-left:auto}
.menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;flex:none;width:44px;height:44px;padding:0 11px;background:none;border:1px solid #d3aa6166;border-radius:12px;cursor:pointer}
.menu-btn span{display:block;height:1.5px;border-radius:2px;background:#f1dbab;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s}
header.nav-open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
header.nav-open .menu-btn span:nth-child(2){opacity:0}
header.nav-open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
header nav{position:absolute;top:100%;left:calc(50% - 50vw);right:calc(50% - 50vw);order:0;width:auto;flex:none;display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 0 18px;background:rgba(5,4,12,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #74502d66;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility 0s .25s}
header.nav-open nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
header nav a{font-size:18px;padding:12px 24px}
header nav a+a::before{display:none}
}
@media(prefers-reduced-motion:reduce){header nav,.menu-btn span{transition:none}}

/* Телефон, первый экран (Д-77, 🗣 Е.Г. 31.10: «Наталью меньше, она не влезает слева»; «всё
   далее — ТОЛЬКО для телефона»; следом «центровать не надо — она должна спиной стоять к левому
   краю, но не обрезаться, и выше подними всё, воздуха много над головой»). Правило — в общей
   строке телефона выше (≤650). Замер по картинке `hero.webp` (1980×980): спина фигуры — на 14.3%
   ширины, верх головы — на 10.6% высоты. При высоте картины 420 (ширина 849): спина в 121 от
   левого края картины → сдвиг −115 (спина в 6 от края экрана); голова в 44 от верха картины →
   сдвиг вверх −10 (голова сразу под бегущей строкой). Текст поднят на те же 55: отступ 415 → 360,
   высота блока 800 → 745. */

/* Карточки «Консультации» и «Игра» — подложки 003-1 / 003-2 со страницы выбора (Д-79 игры, 🗣 Е.Г.
   01.11 «берём № 2 в таком виде, как сейчас»). Шире телефона — высота 590, ширина из пропорций
   картинки (без растяжения: 🗣 «растянутые по горизонтали»). Телефон — подложка по ширине
   карточки, лишнее по бокам срезано (cover), углы скруглены: вытянуть 0.8 в 0.57 нельзя. */
@media(min-width:651px){.service{height:590px;min-height:0;width:auto;max-width:100%;justify-self:center;aspect-ratio:1018/1264}.service.game{aspect-ratio:943/1260}}
@media(max-width:650px){.service{background-size:cover;border-radius:24px}}
.service{text-shadow:0 1px 2px #000,0 0 8px #000d}
.service .benefits{max-width:285px}

/* Телефон: короткий разделитель над каждой подписью-разделом («Выберите свой путь», «Давайте
   знакомиться»…) — без него подпись читалась как случайная строка между разделами (🗣 Е.Г. 01.11:
   «как мусорные разделители, непонятно, к чему они»). Сначала был один ромб со светом —
   🗣 «некрасиво, свечение сверху обрезается; давай как в игре — разделитель с несколькими
   ромбами, короткий». Рисунок `assets/rule-short.svg?v=4e4158d0` (строй главного разделителя игры), свет
   внутри него. Сначала только ≤650; следом 🗣 «сделай это видимым и на основном сайте» — везде. */
/* 🗣 01.11 «весь меньше: длину линий по бокам оставляем, а ромбы и звезду соразмерно меньше» —
   рисунок 180×36 → 135×27 (¾), нити — отдельно, их концы на прежних местах: телефон ±86
   от середины, шире — ±145. Нить начинается с ±40, у края уменьшенной фигуры. */
.divider{padding-top:36px;background:url('assets/rule-short.svg?v=4e4158d0') center top/135px 27px no-repeat,linear-gradient(90deg,transparent,#c9a24a) calc(50% - 63px) 13px/46px 1px no-repeat,linear-gradient(90deg,#c9a24a,transparent) calc(50% + 63px) 13px/46px 1px no-repeat}
/* Шире телефона — нити длиннее: 🗣 «на компе линии шире от нового разделителя, но не такие
   широкие, как у разделителей под ним». Ромбы не тянутся, нити до ±145 — всего ≈ 290 против
   ≈ 1040 у подписи (сначала было ≈ 480 — 🗣 «линии уже где-то в 2 раза»). */
@media(min-width:651px){.divider{background:url('assets/rule-short.svg?v=4e4158d0') center top/135px 27px no-repeat,linear-gradient(90deg,transparent,#c9a24a) calc(50% - 92.5px) 13px/105px 1px no-repeat,linear-gradient(90deg,#c9a24a,transparent) calc(50% + 92.5px) 13px/105px 1px no-repeat}}

/* Шире телефона: нижняя кромка фото Натальи на первом экране уходит в темноту (🗣 Е.Г. 01.11:
   «снизу у фото уведи в тёмное кромку»). Картина — `.hero::before` во всю высоту блока, маской
   гаснет последняя пятая часть. На телефоне фото кончается выше низа блока — правило не нужно. */
@media(min-width:651px){.hero::before{-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}}