/* fonts:start */
/* Manrope лежит у нас, а не на fonts.googleapis.com: сторонний
   домен в критическом пути отрисовки — это лишние DNS, TLS
   и риск, что текст не покажется вовсе. Правила собирает
   tools/build-fonts.py, руками не править. */
/* cyrillic-ext */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/manrope-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/manrope-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/manrope-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/manrope-400-latin.woff2) format('woff2'); 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;}
/* cyrillic-ext */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/manrope-500-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/manrope-500-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/manrope-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/manrope-500-latin.woff2) format('woff2'); 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;}
/* cyrillic-ext */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/manrope-600-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/manrope-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/manrope-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/manrope-600-latin.woff2) format('woff2'); 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;}
/* cyrillic-ext */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/manrope-700-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/manrope-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/manrope-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/manrope-700-latin.woff2) format('woff2'); 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;}
/* cyrillic-ext */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/manrope-800-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/manrope-800-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/manrope-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/manrope-800-latin.woff2) format('woff2'); 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;}
/* fonts:end */

:root{
  --paper:#F1F7F3;
  --card:#FFFFFF;
  --ink:#1C4A3E;
  --ink2:#2B4A40;
  --muted:#41605A;
  --line:#DCE8E2;
  --accent:#BC5227;
  --accent-ink:#963A14;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mark-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 32 32'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 28 V21'/%3E%3Cpath d='M16 21 L9.5 15'/%3E%3Cpath d='M13 18.2 L11.8 11.8'/%3E%3Cpath d='M9.5 15 L5.4 11.2'/%3E%3Cpath d='M16 21 L22.5 15'/%3E%3Cpath d='M19 18.2 L20.2 11.8'/%3E%3Cpath d='M22.5 15 L26.6 11.2'/%3E%3C/g%3E%3C/svg%3E");
  --accent-soft:#FBEADF;
  --teal:#1F6B57;
  --teal-soft:#E0F2E9;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Тема только светлая. Без этого мобильные браузеры (Chrome на Android,
   оболочки вроде Mi Browser) сами инвертируют страницу в «тёмный режим»,
   и палитра сайта превращается в грязно-зелёный негатив. */
html{scroll-behavior:smooth;color-scheme:light}
body{background:var(--paper);color:var(--ink);font-family:'Manrope',system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Базовая колонка шире прежней: страница должна читаться крупно,
   а не жаться в узкий столбец посреди экрана. */
.wrap{max-width:1520px;margin:0 auto;padding:0 clamp(24px,3.4vw,64px);position:relative;z-index:1}
/* Один Manrope на всё, характер задаётся весами и посадкой.
   Геометричный рисунок с широкими просветами читается как
   современный и лёгкий; антиква до этого тянула в «издательство». */
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.035em}
a{color:inherit}
.muted{color:var(--muted)}

/* Знак перед надзаголовком: маленькая фирменная метка, с которой
   начинается каждый блок. Фоном, а не разметкой — чтобы не плодить
   одинаковые SVG в каждой секции. */
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.kicker::before{content:"";flex:none;width:17px;height:17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 32 32'%3E%3Cg fill='none' stroke='%23BC5227' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M16 28 V21'/%3E%3Cpath d='M16 21 L9.5 15'/%3E%3Cpath d='M13 18.2 L11.8 11.8'/%3E%3Cpath d='M9.5 15 L5.4 11.2'/%3E%3Cpath d='M16 21 L22.5 15'/%3E%3Cpath d='M19 18.2 L20.2 11.8'/%3E%3Cpath d='M22.5 15 L26.6 11.2'/%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;background:var(--ink);color:#fff;
  text-decoration:none;font-weight:600;font-size:17px;padding:18px 32px;border-radius:14px;border:1px solid var(--ink);
  transition:.16s}
.btn:hover{background:#14382E;transform:translateY(-1px)}
/* Рамка была цвета разделителей — кнопка не читалась как кнопка.
   Берём цвет текста с прозрачностью: видно, но не спорит с основной. */
.btn--ghost{background:rgba(255,255,255,.6);color:var(--ink);border-color:rgba(28,74,62,.28);font-weight:600}
.btn--ghost:hover{background:#fff;border-color:var(--ink);transform:translateY(-1px)}
.btn--accent{background:var(--accent);border-color:var(--accent)}
.btn--accent:hover{background:#A8431A;border-color:#A8431A}

/* ── nav ── */
/* Только шапка. Раньше правило висело на теге nav и цеплялось
   к любому <nav> на странице — постраничная навигация в блоге
   получала прилипание, фон и нижнюю границу, которая шла прямо
   сквозь кнопки. */
.topbar{position:sticky;top:0;z-index:70;background:rgba(241,247,243,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;text-decoration:none;color:inherit;transition:opacity .16s}
.brand:hover{opacity:.75}
.brand__mark{flex:none;display:flex;align-items:center}
.brand__n{font-weight:700;font-size:17px;letter-spacing:-.03em;line-height:1.15;display:block}
.brand__d{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-top:2px}
@media(max-width:520px){.brand__d{display:none}}
.nlinks{display:flex;gap:20px;font-size:14.5px;color:var(--ink2)}
.nlinks a{text-decoration:none}
.nlinks a:hover{color:var(--accent-ink)}
.nav .btn{padding:12px 22px;font-size:15px}
@media(max-width:1200px){.nlinks{display:none}}

/* ══════════════════════════════════════════════
   Мобильная навигация: бургер и панель меню.

   До этого ниже 1200px меню не было вообще — правило
   `@media(max-width:1200px){.nlinks{display:none}}` прячет ссылки,
   и на планшете с телефоном в шапке оставались только логотип,
   телефон и кнопка. Разделы сайта с телефона было не открыть никак.
   Порог у бургера тот же 1200px: он появляется ровно там, где
   пропадают ссылки, и наоборот.
   ══════════════════════════════════════════════ */
.burger{display:none;flex:none;width:46px;height:46px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;border-radius:13px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  transition:border-color .16s,background .16s}
.burger:hover{border-color:var(--teal);background:var(--teal-soft)}
@media(max-width:1200px){.burger{display:inline-flex}}
/* Без JS панель открыть нечем — тогда и кнопки быть не должно.
   Класс .js ставит main.js первой же строкой. */
html:not(.js) .burger{display:none}

.burger__i{display:block;width:20px}
.burger__i i{display:block;height:2px;border-radius:2px;background:currentColor}
.burger__i i+i{margin-top:5px}
/* Открытая панель перекрывает шапку целиком, поэтому бургер
   в крестик не превращается: крестик стоит в самой панели. */

/* ── Лестница сжатия шапки ────────────────────────────────────
   Селекторы здесь одинаковой специфичности, поэтому применяется
   ПОСЛЕДНИЙ подошедший — блоки обязаны идти по убыванию ширины.
   Раньше правило под 440px стояло ниже правила под 380px и задавало
   кнопку КРУПНЕЕ: сжатие под узкие экраны не работало вовсе, кнопка
   оставалась 174px, и на 320–360px страницу распирало вбок
   (scrollWidth 377 при clientWidth 320). Не переставлять местами. */
@media(max-width:560px){
  .brand__mark svg{width:28px;height:28px}
  .brand__n{font-size:15px}
  .nav .btn{padding:11px 16px;font-size:14px}
  .burger{width:42px;height:42px}
}
@media(max-width:440px){
  .nav{gap:12px}
  /* правая группа обязана уметь ужиматься, иначе выталкивает кнопку */
  .navside{flex:0 1 auto;min-width:0;gap:8px}
  .nav .btn{padding:10px 14px;font-size:13.5px}
  .burger{width:40px;height:40px;border-radius:12px}
}
@media(max-width:390px){
  /* 38px ставили, пока имя стояло в одну строку и каждый пиксель
     шёл на неё. С переносом имени место освободилось — возвращаем
     кнопке нормальный размер под палец. */
  .burger{width:42px;height:42px}
  .burger__i{width:18px}
  .nav .btn{padding:9px 12px;font-size:12.5px}
  /* на самых узких отступ контейнера съедает шестую часть строки */
  .topbar .wrap{padding-left:16px;padding-right:16px}
  /* min-width:0 и перенос имени — ниже, в правиле под 480px:
     обрезать многоточием больше нечего, имя переносится по словам */
}

/* Правая группа шапки: телефон с часами, кнопка, аватар. */
.navside{display:flex;align-items:center;gap:clamp(12px,1.2vw,18px);flex:none}
/* Воздух между кнопкой и бургером: с базовыми 12px бургер читался
   продолжением кнопки, а не отдельным элементом. Ширины на это хватает —
   с 390px имя в шапке уже скрыто.

   Правило стоит ПОСЛЕ базового .navside и намеренно не уехало в
   «лестницу сжатия» выше: у медиазапроса та же специфичность, что
   у обычного селектора, и побеждает тот, кто в файле ниже. По этой же
   причине gap и flex, заданные для .navside внутри лестницы, до сюда
   не доживают — их перекрывает строка выше. */
@media(max-width:1200px){.navside{gap:16px}}
@media(max-width:440px){.navside{gap:14px}}

/* Имя рядом с кнопкой и бургером в ОДНУ строку не помещается. Считаем
   по самому широкому состоянию этой полосы (кнопка ещё крупная,
   до ступени 440px): 24 + знак с именем 163 + 12 + правая группа 223
   + 24 = 446px. Всё, что уже, распирало шапку вбок: на 404px строка
   вылезала за правый отступ на 13px, а имя обрезалось многоточием.

   Поэтому с 480px имя переносится: «Александр» над «Лосев». Колонке
   тогда хватает ширины самого длинного слова — 78px вместо 116,
   и в строку встаёт всё: знак, имя, кнопка и бургер. Высота шапки
   не меняется — две строки по 14px это 32px из семидесяти.

   nowrap снимаем именно здесь: он стоит на .brand целиком, чтобы
   не рвалась подпись «профориентация и поступление» (её на этих
   ширинах уже нет — прячется с 520px). */
@media(max-width:480px){
  .brand__n{white-space:normal;line-height:1.15}
  .brand{min-width:0}
  /* min-content = ширина самого длинного слова. Без него флекс жмёт
     колонку и ниже: на 320px имя ужималось до 48px и «Александр»
     вылезал на кнопку. */
  .brand > span:last-child{min-width:min-content}
}
.navinfo{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.navtel{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;white-space:nowrap;transition:color .16s}
.navtel:hover{color:var(--accent-ink)}
.navhours{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:13px;color:var(--muted);white-space:nowrap}
.navhours__i{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.navava{flex:none;display:block;width:46px;height:46px;border-radius:50%;overflow:hidden;
  border:2px solid var(--card);box-shadow:0 6px 18px -8px rgba(20,50,42,.55)}
.navava img{width:100%;height:100%;object-fit:cover;display:block}
/* Пока ссылки на месте, телефону с часами места уже не остаётся. */
@media(min-width:1201px) and (max-width:1360px){.navinfo{display:none}}
@media(max-width:860px){.navinfo{display:none}}
@media(max-width:600px){.navava{display:none}}
/* Сжатие правой группы переехало в лестницу выше — здесь оно стояло
   после правил для более узких экранов и молча их перебивало. */


/* ── hero ── */
.hero{padding:44px 0 68px;position:relative;overflow:hidden}
/* Первый экран живёт в более широком контейнере, чем остальной сайт:
   так крупный заголовок помещается в строку и не лезет под фото. */
.hero > .wrap{max-width:1720px;padding-left:clamp(24px,3.4vw,56px);padding-right:clamp(24px,3.4vw,56px)}
/* ══ Фон первого экрана ═══════════════════════════════════════
   Крупные цветовые пятна медленно дрейфуют, поверх — зерно.
   Читаемых форм нет: фон не спорит с заголовком, но и не выглядит
   плоской заливкой. Размеры в vmax — на вытянутых мобильных
   экранах пятна не съёживаются в точки где-то наверху. */

.hero-aurora{position:absolute;inset:-12%;z-index:0;pointer-events:none;overflow:hidden;
  will-change:transform;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.hero-aurora .au{position:absolute;display:block;border-radius:50%}

.au--1{width:56vmax;height:56vmax;left:46%;top:-22%;
  background:radial-gradient(circle at 50% 50%,rgba(31,107,87,.28),rgba(31,107,87,.09) 45%,transparent 70%);
  animation:drift1 26s ease-in-out infinite alternate}
.au--2{width:44vmax;height:44vmax;left:-12%;top:-6%;
  background:radial-gradient(circle at 50% 50%,rgba(188,82,39,.20),rgba(188,82,39,.06) 46%,transparent 70%);
  animation:drift2 31s ease-in-out infinite alternate}
.au--3{width:52vmax;height:52vmax;left:28%;top:38%;
  background:radial-gradient(circle at 50% 50%,rgba(143,216,184,.32),rgba(143,216,184,.09) 48%,transparent 72%);
  animation:drift3 23s ease-in-out infinite alternate}

@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}
                  to{transform:translate3d(-6%,5%,0) scale(1.12)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.06)}
                  to{transform:translate3d(7%,-4%,0) scale(1)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(1)}
                  to{transform:translate3d(-5%,-6%,0) scale(1.1)}}

/* Волновая текстура — не сплошным полотном, а пятнами:
   каждый островок замаскирован радиально, поэтому узор проступает
   местами и читается как фактура, а не как сетка поверх экрана.
   Шаг узора задан в пикселях, так что он не растягивается. */
.hero-waves{position:absolute;inset:0;z-index:0;pointer-events:none;
  will-change:transform;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.wv{position:absolute;display:block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='34'%3E%3Cpath d='M0 24 q 25 -18 50 0 t 50 0 t 50 0 t 50 0' fill='none' stroke='%231F6B57' stroke-width='2' stroke-opacity='.5'/%3E%3C/svg%3E");
  background-size:200px 34px;background-repeat:repeat;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 22%,transparent 68%);
  mask-image:radial-gradient(circle at 50% 50%,#000 22%,transparent 68%)}
.wv--1{width:52vmax;height:40vmax;left:36%;top:-4%;opacity:.5;transform:rotate(-4deg)}
.wv--2{width:42vmax;height:32vmax;left:-8%;top:46%;opacity:.38;transform:rotate(3deg)}

/* зерно снимает «пластиковость» и полосы на переходах градиента */
.hero-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  -webkit-mask-image:radial-gradient(130% 100% at 60% 34%,#000 40%,transparent 88%);
  mask-image:radial-gradient(130% 100% at 60% 34%,#000 40%,transparent 88%)}

@media(max-width:900px){.hero-aurora{opacity:.72}.hero-grain{opacity:.04}.hero-waves{opacity:.55}}
@media (prefers-reduced-motion:reduce){.au{animation:none}}

.hcols{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(330px,.72fr);gap:clamp(40px,4.4vw,92px);align-items:center}
/* Рубрика над заголовком. Без плашки и пульсирующей точки —
   этот приём стал приметой типовых лендингов. */
.hero__kicker{display:flex;align-items:center;gap:13px;font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.hero__kicker::before{content:"";width:30px;height:1px;background:var(--accent);flex:none}
/* Возраст — главное в рубрике, поэтому крупнее и без капса. */
.hero__kicker{flex-wrap:wrap;row-gap:6px}
.hero__age{font-size:17px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.hero h1{font-size:clamp(31px,3.9vw,57px);margin-bottom:22px;letter-spacing:-.04em;line-height:1.06;max-width:24ch}
/* Две ступени заголовка. Услуга — на шаг крупнее обещания: из пяти
   строк одного кегля не было понятно, с чего начинать читать.
   Обещание кегль не меняет, поэтому у .h1-tail размера нет — он
   берётся у h1 и тянется тем же clamp.

   Нижняя граница ровно 33px, и это не «на глаз»: на 375px при 36px
   «Профориентация для подростков онлайн» ломается на три строки
   вместо двух и тянет первый экран на 1331px. Разница со второй
   ступенью на телефоне поэтому маленькая, 33 против 31, — лишняя
   строка хуже, чем неявная ступень. Поднимать только с проверкой
   числа строк на 360–390px. */
.hero h1 .h1-lead{display:block;font-size:clamp(33px,4.25vw,62px);line-height:1.04;
  margin-bottom:.18em}
.hero h1 .h1-tail{display:block}
.hero h1 u{text-decoration:none;color:var(--accent)}
.hero__sub{font-size:clamp(17.5px,1.5vw,22px);color:var(--ink2);max-width:54ch;margin-bottom:30px;line-height:1.55}
.hero__btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero__note{font-size:15.5px;color:var(--muted);margin-top:18px}
.hero__media{position:relative;padding:12px 34px 34px 10px;max-width:560px;margin-left:auto}
.stack{position:absolute;top:10px;left:8px;right:28px;bottom:28px;border-radius:20px;z-index:0}
.stack--a{border:1px solid var(--accent);opacity:.28;transform:rotate(-3.2deg)}
.stack--b{border:1px solid var(--teal);opacity:.22;transform:rotate(2.4deg)}
.photo{display:block;aspect-ratio:4/5;border-radius:18px;border:1px solid var(--line);overflow:hidden;position:relative;z-index:1;background:#E4EDE8;box-shadow:0 30px 60px -40px rgba(20,50,42,.55)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Портрет в блоке «О Лосеве» тянется на всю высоту текстовой
   колонки: квадрат занимал две трети и колонки выглядели
   несогласованно. Кадр вертикальный, кроп по фигуре. */
/* Высота тянется под текстовую колонку, поэтому пропорцию не задаём:
   вместе с height:100% она разгоняла ширину, и снимок вылезал
   из своей колонки, наезжая на текст. Кадрирует уже сам img. */
.photo--tall{aspect-ratio:auto;height:100%;width:100%;min-height:420px}
.photo--tall img{height:100%;object-fit:cover;object-position:50% 22%}
/* Знак поверх портрета — в нижнем левом углу: там трава, на ней белое
   читается, тогда как сверху небо и он бы потерялся. Без подложки,
   только тень, иначе получается наклейка. Снизу лёгкое затемнение,
   чтобы знак держался и на светлом кадре. */
.photo--tall::before{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;
  background:linear-gradient(to top,rgba(18,44,36,.42),transparent);pointer-events:none;z-index:2}
.photo--tall::after{content:"";position:absolute;left:clamp(14px,1.4vw,20px);bottom:clamp(14px,1.4vw,20px);
  width:clamp(40px,3.6vw,54px);height:clamp(40px,3.6vw,54px);z-index:3;pointer-events:none;
  background-image:var(--mark-w);background-size:contain;background-repeat:no-repeat;background-position:center;
  opacity:.92;filter:drop-shadow(0 2px 6px rgba(12,32,26,.55))}
/* Знак на портрете первого экрана — в правом нижнем углу: слева внизу
   стоит карточка с именем, а справа кресло и брюки, там белое читается. */
.hero .photo::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;
  background:linear-gradient(to top,rgba(18,44,36,.34),transparent);pointer-events:none;z-index:2}
.hero .photo::after{content:"";position:absolute;right:clamp(14px,1.4vw,20px);bottom:clamp(14px,1.4vw,20px);
  width:clamp(38px,3.4vw,52px);height:clamp(38px,3.4vw,52px);z-index:3;pointer-events:none;
  background-image:var(--mark-w);background-size:contain;background-repeat:no-repeat;background-position:center;
  opacity:.92;filter:drop-shadow(0 2px 6px rgba(12,32,26,.55))}

/* На узких карточка с именем ложится на весь низ снимка и перекрывает
   знак — там он только мусорит затемнением. */
@media(max-width:900px){.hero .photo::before,.hero .photo::after{display:none}}

.hcard{position:absolute;left:-14px;bottom:-20px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 18px;box-shadow:0 18px 40px -26px rgba(20,50,42,.5);max-width:250px;z-index:3}
.hcard b{display:block;font-size:16.5px;margin-bottom:3px}
.hcard span{font-size:14px;color:var(--muted);line-height:1.4;display:block}
.chip-tag{position:absolute;top:-16px;right:-12px;z-index:2;display:flex;align-items:center;gap:9px;
  background:var(--card);border:1.5px dashed var(--accent);border-radius:14px;padding:10px 16px;
  box-shadow:0 18px 40px -26px rgba(20,50,42,.5);transform:rotate(4deg)}
.chip-tag span{font-size:13px;font-weight:600;line-height:1.25;color:var(--ink)}
@media(max-width:900px){
  .hcols{grid-template-columns:1fr;gap:36px}
  /* На одной колонке фото центрируется и занимает почти всю ширину:
     потолок в 360px оставлял справа пустое поле, потому что
     margin-left:auto с десктопа прижимал его к краю. */
  /* Внутренний отступ был асимметричным — он держал декоративные
     рамки за фото. На узком экране рамки не показываем, отступ
     обнуляем, иначе снимок уезжает влево. */
  .hero__media{max-width:min(430px,100%);margin:0 auto;padding:0;width:100%}
  .stack{display:none}
}
@media(max-width:560px){
  .chip-tag{display:none}.stack--b{display:none}
  .hcard{left:0;right:0;bottom:-14px;max-width:none;margin:0 8px}
}


/* ══ Первый экран фотографией ═════════════════════════════════
   Раскладка журнального разворота: снимок занимает экран целиком,
   текст стоит на его светлой половине. Правой колонки с фото
   в рамке, стопкой рамок и плашкой имени больше нет — их работу
   делает сама фотография.

   Правила идут ПОСЛЕ .hcols и .hero__media: у медиазапросов та же
   специфичность, побеждает тот, кто ниже в файле. */
.hero--shot{padding:0;background:var(--paper)}

/* Снимок занимает правые 58 процентов, а не весь экран, и причина
   не в композиции, а в резкости. Исходник 1672px по ширине: под фон
   во всю ширину на экране с двойной плотностью нужно около 2880px,
   и картинка расползалась в мыло. На 1440px правая панель — это
   835 CSS-пикселей, то есть ровно 1670 физических. Файл ложится
   один в один. Ширину панели менять только вместе с исходником. */
.hero__shot{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0}
.hero__shot picture{display:block;height:100%}
/* object-position правее центра: человек на снимке сидит справа,
   и при кропе под узкую панель он обязан остаться в кадре. */
.hero__shot img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;display:block}
/* Растушёвка левого края панели: без неё снимок обрывается
   вертикальной линией посреди экрана. */
.hero__scrim{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
    var(--paper) 0%, rgba(241,247,243,.72) 9%, rgba(241,247,243,0) 26%)}

/* Пятна, волны и зерно лежат в разметке ПОСЛЕ снимка и с тем же
   z-index, то есть рисуются поверх него: на фотографии проступала
   волнистая сетка. На десктопе фон теперь — сама фотография,
   поэтому слои выключаем; ниже 900px снимок уходит под текст
   отдельным блоком, и они включаются обратно. */
.hero--shot > .hero-aurora,
.hero--shot > .hero-waves,
.hero--shot > .hero-grain{display:none}

/* Колонка одна, ширину держим сами: на 1720px контейнера текст
   без ограничения уехал бы на фотографию.
   Вертикальные поля задаём отдельными свойствами — сокращённое
   padding обнуляло горизонтальные, и строка липла к краю экрана. */
.hero--shot .hcols{grid-template-columns:minmax(0,1fr);
  min-height:min(72vh,720px);align-items:center;
  padding-top:clamp(36px,3.8vw,60px);padding-bottom:clamp(36px,3.8vw,60px)}
.hero--shot .hcols > div{max-width:min(640px,47%)}
/* Зазор между фактами меньше обычного: колонок три, а ширины —
   половина экрана, и на 44px «Одна специальность» ломалось на две
   строки, когда соседи стояли в одну. */
.hero--shot .hfacts{max-width:640px;gap:clamp(16px,1.6vw,26px)}

/* Кегли на ступень ниже прежних: на всю ширину экрана заголовок
   читался плакатом, а не страницей. */
.hero--shot h1 .h1-lead{font-size:clamp(31px,3.55vw,50px)}
.hero--shot h1{font-size:clamp(28px,3.05vw,42px)}
.hero--shot .hero__sub{font-size:clamp(16.5px,1.25vw,18.5px);margin-bottom:26px}

/* ── первый экран фотографией на планшете и телефоне ──────────
   Ниже 900px светлой половины на снимке не остаётся: текст
   в одну колонку занимает всю ширину и лёг бы человеку на лицо.
   Поэтому фотография перестаёт быть фоном и встаёт отдельным
   блоком под текстом — тем же файлом, без второй загрузки. */
@media(max-width:900px){
  /* Флекс-колонка нужна ради order: в разметке снимок идёт первым
     (на десктопе он фон), а на телефоне обязан встать под текст. */
  .hero--shot{padding:44px 0 68px;background:var(--paper);
    display:flex;flex-direction:column}
  .hero--shot > .hero-aurora,
  .hero--shot > .hero-waves,
  .hero--shot > .hero-grain{display:block}
  /* padding-top/bottom, а не сокращённое padding:0 — оно обнуляет
     и боковые отступы контейнера, и весь текст первого экрана
     прилипал к краям экрана. Второй раз в этом же блоке: в шапке
     .wrap боковые поля приходят снаружи, трогать их сокращённой
     записью нельзя. */
  .hero--shot .hcols{min-height:0;padding-top:0;padding-bottom:0;gap:30px;order:1}
  .hero--shot .hcols > div{max-width:none}
  .hero__scrim{display:none}
  .hero__shot{position:static;width:auto;order:2;margin:30px clamp(24px,3.4vw,56px) 0;
    border-radius:18px;overflow:hidden;border:1px solid var(--line);
    box-shadow:0 30px 60px -40px rgba(20,50,42,.55)}
  .hero__shot img{aspect-ratio:16/10;height:auto;object-position:72% 50%}
}


/* ══ Живые кривые на фоне ═════════════════════════════════════
   Тонкие линии свободной формы, проходящие через секцию насквозь.
   Прочерчиваются, когда блок доходит до кадра, поэтому фон
   не выглядит статичной подложкой. slice — чтобы не растягивались. */
.curves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 45%,#000 34%,transparent 86%);
  mask-image:radial-gradient(130% 100% at 50% 45%,#000 34%,transparent 86%)}
.curves path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.curves .c1{stroke:var(--teal);stroke-opacity:.22;stroke-width:1.6}
.curves .c2{stroke:var(--accent);stroke-opacity:.16;stroke-width:1.4}
.curves .c3{stroke:var(--teal);stroke-opacity:.13;stroke-width:1.2}
.js .curves path{stroke-dasharray:3000;stroke-dashoffset:3000}
.js .is-in > .curves path,.js .is-in .curves path{
  animation:curveDraw 3.4s cubic-bezier(.33,0,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes curveDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.js .curves path{stroke-dashoffset:0;animation:none}}

/* ── sections ── */
/* Воздуха по вертикали заметно больше: блоки должны разделяться
   паузой, а не линией. */
section{padding:clamp(88px,9.5vw,164px) 0}
.shead{max-width:64ch;margin-bottom:clamp(44px,4.5vw,72px)}
.shead h2{font-size:clamp(30px,4.3vw,58px);margin-bottom:20px;letter-spacing:-.038em;line-height:1.04}
.shead p{color:var(--ink2);font-size:clamp(17px,1.45vw,20px);line-height:1.55}
/* Подзаголовок между h2 и вводным абзацем. Нужен там, где H2 занят
   поисковой фразой («Как проходит профориентация подростка онлайн»),
   а человеку нужна короткая суть блока. */
.shead__sub{margin:-8px 0 14px;font-size:clamp(19px,1.8vw,24px);font-weight:700;
  letter-spacing:-.028em;color:var(--ink2)}
.honest .shead__sub{color:rgba(228,240,234,.94)}

/* ── honest block ── */
.honest{position:relative;overflow:hidden;background:var(--ink);color:#E4F0EA}

/* Боковые волновые потоки. Узор вертикальный, плотный у краёв
   и растворяющийся к центру — маской, а не прозрачностью самого
   рисунка: так текст в середине остаётся на чистом фоне.
   Шаг задан в пикселях, поэтому узор не тянется на широких экранах. */
.honest-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Ширина в vw, а не в процентах секции: поля по бокам от текстовой
   колонки узкие, и слой в 34% залезал прямо под заголовок. */
.hw{position:absolute;top:-220px;bottom:-220px;width:clamp(84px,13vw,215px);display:block;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='220'%3E%3Cpath d='M28 0 q -20 27.5 0 55 t 0 55 t 0 55 t 0 55' fill='none' stroke='%238FD8B8' stroke-width='2' stroke-opacity='.5'/%3E%3C/svg%3E");
  background-size:38px 220px;background-repeat:repeat}
.hw--l{left:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.45) 38%,transparent 92%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.45) 38%,transparent 92%)}
.hw--r{right:0;transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.45) 38%,transparent 92%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.45) 38%,transparent 92%)}
/* противоход: левый поток вниз, правый вверх */
.hw--l{animation:hwDown 34s linear infinite}
.hw--r{animation:hwUp 34s linear infinite}
@keyframes hwDown{to{background-position:0 220px}}
@keyframes hwUp{to{background-position:0 -220px}}

@media(max-width:900px){.hw{width:clamp(70px,22vw,150px);opacity:.3}}
@media (prefers-reduced-motion:reduce){.hw--l,.hw--r{animation:none}}

.honest .shead h2{color:#fff}
.honest .shead p{color:rgba(228,240,234,.9)}
.honest .kicker{color:#8FD8B8}
.honest .kicker::before,.formsec .kicker::before{filter:brightness(0) saturate(100%) invert(84%) sepia(18%) saturate(524%) hue-rotate(96deg) brightness(94%) contrast(88%)}
/* Что уже пробовали и почему не сработало. Строками, а не карточками:
   одинаковые плитки с повтором читаются монотонно.

   Зачёркивания здесь нет намеренно. Раньше заголовок каждого пункта
   перечёркивался волной — приём заметный, но на странице он теперь
   оставлен единственному месту, старой цене. Два разных смысла под
   одним оформлением спорят друг с другом. */
/* Сравнение в две колонки. Слева — способ и что он даёт, справа —
   чего не хватает; между ними вертикальная линия, строки разделены
   горизонтальными. Ни карточек, ни теней: на тёмном фоне они дают
   грязь, а линии держат таблицу сами. */
.gaps{list-style:none;border-top:1px solid rgba(228,240,234,.18)}
.gap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  align-items:stretch;border-bottom:1px solid rgba(228,240,234,.18);
  transition:background .2s}
.gap:hover{background:rgba(228,240,234,.03)}

.gap__side{display:flex;align-items:center;gap:clamp(14px,1.4vw,20px);
  padding:clamp(24px,2.4vw,34px) 0}
/* Разделитель — граница правой половины, а не отдельный элемент:
   так он тянется на всю высоту строки, какой бы она ни выросла. */
.gap__side--no{border-left:1px solid rgba(228,240,234,.18);
  padding-left:clamp(24px,3vw,56px)}
.gap__side--has{padding-right:clamp(20px,2.4vw,40px)}

.gap__ic{flex:none;width:26px;height:26px}
.gap__ic--yes{color:#8FD8B8}
.gap__ic--no{color:#E0A45C}

.gap__t{font-weight:800;font-size:clamp(19px,1.7vw,24px);line-height:1.25;
  letter-spacing:-.028em;color:#fff}
/* Что способ действительно даёт. Мелко и приглушённо: это уточнение,
   а не второй заголовок. */
.gap__s{display:block;margin-top:6px;font-size:16px;line-height:1.4;
  color:rgba(228,240,234,.86)}
.gap__p{font-size:17.5px;line-height:1.55;color:rgba(228,240,234,.9)}

/* Вывод блока: он должен звучать после всех четырёх пунктов,
   поэтому набран крупнее их текста и белым. */
.gaps__note{margin-top:clamp(28px,3vw,46px);max-width:62ch;font-weight:600;
  font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:#fff}
@media(max-width:860px){
  /* На узком экране колонки встают друг под друга, и вертикальный
     разделитель превращается в левую линию у нижней половины —
     связь «способ → чего не хватает» остаётся видимой. */
  .gap{grid-template-columns:1fr}
  .gap__side{padding:0}
  .gap__side--has{padding:22px 0 12px}
  /* Линия уезжает из середины строки под левый край нижней половины
     и встаёт ровно под центром галочки — связь «способ → чего
     не хватает» остаётся видимой и в одну колонку. */
  .gap__side--no{margin-left:13px;padding:0 0 24px clamp(18px,5vw,26px)}
}

/* ── с чем ко мне приходят ── */
/* Реплики родителей карточками. Блок стоит вторым и работает как
   зеркало: человек должен найти здесь свою фразу раньше, чем начнёт
   разбираться, что ему предлагают. Поэтому карточки крупные,
   а текст в них — прямая речь, набранная полужирным. */
.cases{position:relative;overflow:hidden}
.cases-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.cs-blob{position:absolute;display:block;border-radius:50%}
.cs-blob--1{left:-12%;top:-22%;width:36vmax;height:36vmax;
  background:radial-gradient(circle at 50% 50%,rgba(188,82,39,.12),transparent 68%)}
.cs-blob--2{right:-14%;bottom:-26%;width:40vmax;height:40vmax;
  background:radial-gradient(circle at 50% 50%,rgba(143,216,184,.26),transparent 68%)}
.cs-dots{position:absolute;right:2%;top:10%;width:22%;height:40%;
  background-image:radial-gradient(circle,var(--teal) 1.4px,transparent 1.6px);
  background-size:22px 22px;opacity:.18;
  -webkit-mask-image:radial-gradient(circle at 60% 40%,#000 12%,transparent 66%);
  mask-image:radial-gradient(circle at 60% 40%,#000 12%,transparent 66%)}

/* Реплики выложены перепиской: нечётные прижаты влево, чётные
   уходят вправо. Сетка из карточек читалась перечнем услуг, а блок
   про узнавание — про чужую прямую речь.

   Ширина пузыря ограничена 58% колонки: во всю ширину строка
   перестаёт быть репликой и становится абзацем. */
.cases__list{list-style:none;display:flex;flex-direction:column;
  gap:clamp(16px,1.7vw,26px);max-width:1180px}
.case{display:flex;align-items:flex-start;gap:14px;max-width:min(640px,58%)}
.case:nth-child(even){margin-left:auto}

/* Портрет собеседника. Люди на снимках не существуют — это
   оформление, и под заголовком блока об этом сказано прямо.
   alt пустой намеренно: скринридеру портрет ничего не сообщает,
   а имени у реплики нет. */
.case__ava{flex:none;display:block;width:48px;height:48px;border-radius:50%;
  margin-top:4px;overflow:hidden;background:var(--line);
  border:1px solid rgba(28,74,62,.08)}
.case__ava img{width:100%;height:100%;display:block;object-fit:cover}

/* Пузырь. Скругление одинаковое со всех сторон, кроме верхнего
   левого — там хвостик к аватару. */
.case__b{position:relative;background:var(--card);
  border:1px solid var(--line);border-radius:20px 20px 20px 20px;
  border-top-left-radius:6px;
  padding:clamp(16px,1.5vw,22px) clamp(18px,1.7vw,26px);
  font-size:clamp(16px,1.25vw,18px);font-weight:600;line-height:1.5;
  letter-spacing:-.015em;color:var(--ink);
  box-shadow:0 2px 0 rgba(20,50,42,.03),0 22px 44px -40px rgba(20,50,42,.5);
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s}
.case:hover .case__b{transform:translateY(-2px);
  box-shadow:0 2px 0 rgba(20,50,42,.04),0 30px 56px -38px rgba(20,50,42,.55)}
.case__b::before{content:"«"}
.case__b::after{content:"»"}

/* Одна реплика заливкой: без неё пять одинаковых белых пузырей
   складываются в ровную стопку и лесенка перестаёт читаться. */
.case:nth-child(2) .case__b{background:var(--accent-soft);border-color:#F0D6C4}

/* Оговорка под подзаголовком: мельче текста блока и приглушённая —
   это сноска, а не ещё одно утверждение. */
.shead__note{margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}
.shead__note a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}

.cases__cta{display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(26px,2.6vw,40px);padding-bottom:4px;
  font-size:17px;font-weight:700;text-decoration:none;color:var(--accent-ink);
  border-bottom:1.5px solid rgba(188,82,39,.32);transition:color .16s,border-color .16s}
.cases__cta:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cases__cta svg{flex:none;width:16px;height:16px;transition:transform .18s}
.cases__cta:hover svg{transform:translateX(3px)}

@media(max-width:1100px){.case{max-width:78%}}
@media(max-width:680px){
  /* Лесенка остаётся и на телефоне, только мельче: чётные реплики
     уходят вправо и зеркалятся — портрет справа от пузыря, хвостик
     тоже справа. Ради этого пузырь отдаёт 12% ширины: без сдвига
     пять одинаковых блоков читались перечнем, а не разговором. */
  .case{max-width:88%}
  .case:nth-child(even){margin-left:auto;flex-direction:row-reverse}
  .case:nth-child(even) .case__b{border-top-left-radius:20px;border-top-right-radius:6px}
}

/* ── что на выходе ── */
/* Самая широкая секция сайта: результат — главный аргумент,
   ему нужно больше воздуха, чем тексту в остальных блоках. */
#deliv{position:relative;overflow:hidden;padding-top:78px}

/* Фон блока: диагональный поток и частицы.
   Слой лежит под .wrap (у неё z-index:1), прозрачность низкая —
   узор читается как фактура, а не как рисунок поверх текста. */
/* Слой числится среди появляющихся блоков только ради класса is-in,
   которым запускается прочерчивание. Само скрытие отменяем: иначе
   фон висел бы прозрачным до скролла, а приглушение на мобильных
   проигрывало по специфичности правилу .js .reveal. */
.js .deliv-deco.reveal{opacity:1;transform:none;transition:none}
.deliv-deco{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(130% 105% at 72% 46%,#000 30%,transparent 84%);
  mask-image:radial-gradient(130% 105% at 72% 46%,#000 30%,transparent 84%)}
.deliv-deco svg{width:100%;height:100%;display:block}

.dv-w{stroke:var(--teal);stroke-opacity:.2;stroke-width:2}
.dv-w:nth-child(2){stroke:var(--accent);stroke-opacity:.14}
.dv-w:nth-child(3){stroke-opacity:.12;stroke-width:1.5}
/* поток прочерчивается, когда блок доходит до кадра */
.js .deliv-deco .dv-w{stroke-dasharray:2200;stroke-dashoffset:2200}
.js .deliv-deco.is-in .dv-w{animation:dvDraw 2.6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d)}
@keyframes dvDraw{to{stroke-dashoffset:0}}

/* частицы едва заметно дышат — фон перестаёт быть статичным */
.dv-dot{animation:dvFloat 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes dvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media(max-width:900px){.js .deliv-deco.reveal,.deliv-deco{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .js .deliv-deco .dv-w{stroke-dashoffset:0}
  .js .deliv-deco.is-in .dv-w,.dv-dot{animation:none}
}

#deliv > .wrap{max-width:1700px;padding-left:clamp(20px,2.6vw,44px);padding-right:clamp(20px,2.6vw,44px)}
/* Две колонки: что остаётся у подростка и что — у родителя.
   Разделять их обязательно: до этого блок обещал результат вообще,
   и родитель не находил в нём себя. Колонка родителя мятная,
   а не белая, — чтобы её было видно с одного взгляда. */
/* Лист с итогом. Две карточки рядом читались как два независимых
   блока; здесь это один документ, где разделы идут друг за другом —
   так же, как в бумаге, которая остаётся у семьи после пятого занятия.

   Наклон крошечный, полградуса: больше — и лист начинает выглядеть
   стикером, меньше — пропадает ощущение положенной на стол бумаги. */
.paper{position:relative;background:#FCFDFC;border:1px solid var(--line);
  border-radius:6px;padding:clamp(26px,3vw,48px) clamp(24px,3.4vw,56px) clamp(22px,2.4vw,36px);
  transform:rotate(-1.1deg);
  box-shadow:0 1px 0 rgba(20,50,42,.04),0 40px 80px -56px rgba(20,50,42,.6)}
/* Содержимое НЕ выравниваем обратно: наклонён весь лист вместе
   с текстом — так это бумага, положенная на стол, а не карточка
   с криво стоящей рамкой. */

.paper__h{display:flex;align-items:center;gap:16px;
  padding-bottom:14px;margin-bottom:clamp(24px,2.4vw,34px);
  border-bottom:1px solid var(--line)}
.paper__h span{font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* Разделитель разделов — пунктир: сплошная линия повторяла бы шапку
   и лист распадался бы на три равных куска. */
.paper__split{height:1px;margin:clamp(22px,2.4vw,34px) 0;
  background-image:linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);
  background-size:16px 1px}

.paper__f{display:flex;align-items:center;justify-content:flex-end;gap:20px;
  margin-top:clamp(24px,2.6vw,38px);padding-top:18px;border-top:1px solid var(--line)}
/* Росчерк с печатью. Приподнят над линией подвала и чуть наезжает
   на неё — так ставят штамп на настоящей бумаге, а не выравнивают
   по сетке. */
.paper__stamp{flex:none;display:block;width:clamp(210px,22vw,300px);
  margin:-26px -6px -10px 0}
.paper__stamp img{width:100%;height:auto;display:block}

.oc{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.oc--you{background:none;border:0;box-shadow:none}
.oc__t{font-size:clamp(20px,1.9vw,27px);letter-spacing:-.03em}
.oc__t::after{content:"";display:block;width:38px;height:3px;border-radius:2px;
  background:var(--accent);margin-top:14px}
.oc--you .oc__t::after{background:var(--teal)}
.oc__l{list-style:none;display:grid;gap:16px;margin-top:22px}
.oc__l li{position:relative;padding-left:30px;font-size:17.5px;line-height:1.55;color:var(--ink2)}
.oc__l li::before{content:"";position:absolute;left:0;top:calc(.775em - 8px);width:16px;height:16px;
  border-radius:50%;background:var(--accent-soft)}
.oc__l li::after{content:"";position:absolute;left:5px;top:calc(.775em - 3px);width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.oc--you .oc__l li::before{background:rgba(31,107,87,.14)}
.oc--you .oc__l li::after{background:var(--teal)}
.oc__l b{font-weight:700;color:var(--ink)}
/* На телефоне лист теряет наклон и поля: под руку он должен читаться
   как обычный блок, а не как бумага, положенная под углом. */
@media(max-width:900px){
  .paper{transform:none;padding:26px 20px 22px}
  .paper__f{gap:14px}
  .paper__stamp{margin:0;align-self:flex-end;width:min(240px,64%)}
}

/* ── как проходит ── */
.steps > .wrap{max-width:1400px;padding-left:clamp(22px,3vw,48px);padding-right:clamp(22px,3vw,48px)}
.steps{position:relative;overflow:hidden;background:#F7FBF8}
.steps-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.st-blob{position:absolute;right:-10%;top:-14%;width:46vmax;height:46vmax;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(143,216,184,.24),transparent 66%)}
.st-dots{position:absolute;left:-2%;top:8%;width:24%;height:44%;
  background-image:radial-gradient(circle,var(--teal) 1.4px,transparent 1.6px);
  background-size:22px 22px;opacity:.2;
  -webkit-mask-image:radial-gradient(circle at 30% 40%,#000 12%,transparent 66%);
  mask-image:radial-gradient(circle at 30% 40%,#000 12%,transparent 66%)}
.st-wave{position:absolute;right:-4%;bottom:2%;width:46%;height:34%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='34'%3E%3Cpath d='M0 24 q 25 -18 50 0 t 50 0 t 50 0 t 50 0' fill='none' stroke='%231F6B57' stroke-width='2' stroke-opacity='.4'/%3E%3C/svg%3E");
  background-size:200px 34px;opacity:.3;
  -webkit-mask-image:radial-gradient(circle at 60% 55%,#000 14%,transparent 64%);
  mask-image:radial-gradient(circle at 60% 55%,#000 14%,transparent 64%)}
/* второе пятно и волны — по диагонали к первым, чтобы фон не был
   заполнен только с одной стороны */
.st-blob2{position:absolute;left:-14%;bottom:-6%;width:38vmax;height:38vmax;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(143,216,184,.16),transparent 68%)}
.st-wave2{position:absolute;left:-3%;top:30%;width:34%;height:26%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='34'%3E%3Cpath d='M0 24 q 25 -18 50 0 t 50 0 t 50 0 t 50 0' fill='none' stroke='%231F6B57' stroke-width='2' stroke-opacity='.4'/%3E%3C/svg%3E");
  background-size:200px 34px;opacity:.22;
  -webkit-mask-image:radial-gradient(circle at 40% 50%,#000 10%,transparent 62%);
  mask-image:radial-gradient(circle at 40% 50%,#000 10%,transparent 62%)}

/* знак слева, примерно на середине пути */
.st-mark{position:absolute;left:2%;top:46%;width:clamp(120px,15vw,230px);height:auto;
  color:var(--teal);opacity:.09;transform:rotate(-8deg)}
.st-mark2{left:auto;right:1%;top:auto;bottom:6%;opacity:.07;transform:rotate(11deg)}
@media(max-width:900px){.st-mark{width:110px;left:-3%;opacity:.07}
  .st-mark2{right:-4%;width:100px}}

/* ══ путь-змейка ══ */
.road{position:relative;padding:20px 0 10px}
/* Линия лежит на всей секции, а не только на списке карточек:
   она должна начинаться у заголовка, в левом верхнем углу. */
.road__line{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
/* Система координат SVG равна пикселям блока (её задаёт main.js),
   поэтому толщина указывается напрямую — non-scaling-stroke не нужен.
   Он же и мешал: вместе с pathLength Firefox считал штрих по реальной
   длине пути, а не по нормированной, и линия прочерчивалась на доли
   процента, пока Chrome показывал всё правильно. */
.road__track{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.road__progress{fill:none;stroke:url(#roadGrad);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
/* До первого расчёта прячем линию заведомо большим штрихом: точную
   длину знает только JS. Без JS линия остаётся сплошной — обрубок
   выглядел бы ошибкой. */
.js .road__progress{stroke-dasharray:99999;stroke-dashoffset:99999}

.road__list{list-style:none;position:relative;z-index:1;display:grid;gap:clamp(26px,3vw,54px)}
.road__i{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px)}
.road__i--l .rcard{grid-column:1}
.road__i--r .rcard{grid-column:2}

.rcard{position:relative;overflow:hidden;background:var(--card);border-radius:24px;
  padding:0 0 clamp(26px,2.4vw,38px);
  box-shadow:0 2px 0 rgba(20,50,42,.04),0 34px 64px -46px rgba(20,50,42,.55);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.rcard:hover{transform:translateY(-5px);box-shadow:0 2px 0 rgba(20,50,42,.05),0 44px 76px -44px rgba(20,50,42,.6)}
/* Обложка вместо иконки: смысл этапа считывается с фотографии
   раньше, чем человек начнёт читать текст. */
/* Знак в углу снимка — тем же приёмом, что на портретах: лёгкое
   затемнение кромки, чтобы белое держалось на любом кадре. */
.rcard__pic{position:relative}
.rcard__pic::before{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;
  background:linear-gradient(to top,rgba(18,44,36,.34),transparent);pointer-events:none;z-index:1}
.rcard__pic::after{content:"";position:absolute;z-index:2;pointer-events:none;
  right:clamp(12px,1.1vw,18px);bottom:clamp(12px,1.1vw,18px);
  width:clamp(30px,2.6vw,42px);height:clamp(30px,2.6vw,42px);
  background-image:var(--mark-w);background-size:contain;background-repeat:no-repeat;
  background-position:center;opacity:.9;filter:drop-shadow(0 2px 6px rgba(12,32,26,.5))}

.rcard__pic{margin:0 0 clamp(20px,1.8vw,26px);overflow:hidden;background:#EDF4F0}
.rcard__pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.rcard:hover .rcard__pic img{transform:scale(1.035)}
/* Номер этапа со знаком — тем же приёмом, что и надзаголовки блоков. */
.rcard__step{display:flex;align-items:center;gap:8px;margin:0 clamp(26px,2.4vw,38px);
  font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.rcard__step::before{content:"";flex:none;width:15px;height:15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 32 32'%3E%3Cg fill='none' stroke='%231F6B57' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M16 28 V21'/%3E%3Cpath d='M16 21 L9.5 15'/%3E%3Cpath d='M13 18.2 L11.8 11.8'/%3E%3Cpath d='M9.5 15 L5.4 11.2'/%3E%3Cpath d='M16 21 L22.5 15'/%3E%3Cpath d='M19 18.2 L20.2 11.8'/%3E%3Cpath d='M22.5 15 L26.6 11.2'/%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;
  background-position:center}
.rcard--final .rcard__step{color:var(--accent-ink)}
.rcard--final .rcard__step::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 32 32'%3E%3Cg fill='none' stroke='%23A8431A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M16 28 V21'/%3E%3Cpath d='M16 21 L9.5 15'/%3E%3Cpath d='M13 18.2 L11.8 11.8'/%3E%3Cpath d='M9.5 15 L5.4 11.2'/%3E%3Cpath d='M16 21 L22.5 15'/%3E%3Cpath d='M19 18.2 L20.2 11.8'/%3E%3Cpath d='M22.5 15 L26.6 11.2'/%3E%3C/g%3E%3C/svg%3E")}
.rcard h3{font-size:clamp(20px,1.9vw,26px);margin:0 clamp(26px,2.4vw,38px) 12px;letter-spacing:-.025em}
.rcard p{font-size:17px;color:var(--ink2);line-height:1.6;margin:0 clamp(26px,2.4vw,38px)}
/* Низ карточки: слева пометка о занятиях, справа переход на страницу
   этапа. Раньше пометка стояла одна и правый угол пустовал. */
.rcard__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:18px clamp(26px,2.4vw,38px) 0;border-top:1px dashed var(--line);padding-top:14px}
.rcard__meta{display:block;font-size:14.5px;color:var(--muted)}
/* Итог этапа. Стоит отдельной строкой под описанием: человек читает
   карточки по диагонали, и ему важнее, что остаётся на руках после
   этапа, чем что на нём происходит. */
.rcard__out{margin:14px clamp(26px,2.4vw,38px) 0;padding-top:14px;
  border-top:1px dashed var(--line);font-size:15.5px;line-height:1.5;color:var(--ink2)}
.rcard__out b{font-weight:700;color:var(--teal)}
.steps__cta{display:flex;justify-content:center;margin-top:clamp(34px,4vw,62px)}
.rcard__more{flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:15px;font-weight:700;color:var(--accent-ink);text-decoration:none;
  padding:6px 12px;border:1px solid var(--accent-soft);border-radius:100px;
  background:var(--accent-soft);transition:background .16s,border-color .16s,transform .16s}
.rcard__more svg{width:14px;height:14px;transition:transform .18s}
.rcard__more:hover{background:#F7DCC9;border-color:#F1CBB0}
.rcard__more:hover svg{transform:translateX(2px)}

.about__more{margin-top:26px}

/* появление: карточка выезжает со своей стороны */
.js .road__i .rcard{opacity:0}
.js .road__i--l .rcard{transform:translateX(-28px)}
.js .road__i--r .rcard{transform:translateX(28px)}
.js .road__i.is-in .rcard{opacity:1;transform:none;
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}

@media(max-width:860px){
  .road__line{display:none}
  .road__i{grid-template-columns:1fr}
  .road__i--l .rcard,.road__i--r .rcard{grid-column:1}
  .js .road__i--l .rcard,.js .road__i--r .rcard{transform:translateY(24px)}
}
@media (prefers-reduced-motion:reduce){
  .js .road__i .rcard{opacity:1;transform:none}
  .js .road__progress{stroke-dasharray:none;stroke-dashoffset:0}
}

/* ── короткое доказательство ── */
/* Одна цитата во всю ширину, без заголовка и без оформления карточки.
   Она стоит между «как проходит» и ценой: человек уже понял механику
   и должен услышать живой голос раньше, чем увидит ценник.

   Полный блок отзывов ниже повторяет эту же цитату. Дублем не читается
   именно потому, что здесь у неё нет ни рамки, ни звёзд, ни даты. */
.proof{padding:clamp(58px,6vw,104px) 0;background:#F7FBF8;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof__q{max-width:1080px;margin:0 auto;text-align:center}
.proof__q blockquote{font-size:clamp(20px,2.5vw,34px);font-weight:600;line-height:1.35;
  letter-spacing:-.03em;color:var(--ink)}
.proof__q blockquote::before{content:"«"}
.proof__q blockquote::after{content:"»"}
.proof__q figcaption{display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(20px,2vw,30px);font-size:14.5px;color:var(--muted)}

/* ── стоимость: один пакет ── */
#plans{position:relative;overflow:hidden}
/* Цитата во всю ширину над ценой. Держит паузу между обещанием
   результата и ценником: сразу после списка «что будет к последнему
   занятию» ценник читается как счёт, а не как предложение. */
.bigquote{margin:0 0 clamp(34px,4vw,62px);padding:clamp(24px,2.6vw,40px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bigquote blockquote{text-align:center;font-weight:800;font-size:clamp(23px,3.3vw,46px);
  line-height:1.1;letter-spacing:-.04em;color:var(--ink)}
.bigquote blockquote::before{content:"«"}
.bigquote blockquote::after{content:"»"}
.plans-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.pl-blob{position:absolute;display:block;border-radius:50%}
.pl-blob--1{left:-14%;top:-24%;width:38vmax;height:38vmax;
  background:radial-gradient(circle at 50% 50%,rgba(188,82,39,.13),transparent 68%)}
.pl-blob--2{right:-12%;bottom:-30%;width:42vmax;height:42vmax;
  background:radial-gradient(circle at 50% 50%,rgba(31,107,87,.14),transparent 68%)}

.onepack{display:grid;grid-template-columns:1.36fr .64fr;gap:22px;align-items:stretch}

/* Карточка тёмная — она якорь страницы. На светлой секции
   это читается как «главное предложение», а не рядовой блок. */
.onepack__main{position:relative;background:var(--ink);color:#E4F0EA;border-radius:28px;
  padding:clamp(32px,3.2vw,56px);overflow:hidden;
  box-shadow:0 46px 84px -50px rgba(20,50,42,.75)}
.onepack__main::before{content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(143,216,184,.2),transparent 68%);z-index:0}
/* Сетка из фирменного знака по тёмной карточке. Маской гасим её к
   центру: под ценой и списком узор мешал бы читать, а по краям
   держит плоскость и не даёт карточке выглядеть пустой заливкой. */
.onepack__main::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76' viewBox='0 0 76 76'%3E%3Cg transform='translate(22.8 19.4) scale(0.95)' fill='none' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M16 28 V21'/%3E%3Cpath d='M16 21 L9.5 15'/%3E%3Cpath d='M13 18.2 L11.8 11.8'/%3E%3Cpath d='M9.5 15 L5.4 11.2'/%3E%3Cpath d='M16 21 L22.5 15'/%3E%3Cpath d='M19 18.2 L20.2 11.8'/%3E%3Cpath d='M22.5 15 L26.6 11.2'/%3E%3C/g%3E%3C/svg%3E");background-size:76px 76px;
  -webkit-mask-image:radial-gradient(112% 96% at 50% 48%,transparent 38%,#000 96%);
  mask-image:radial-gradient(112% 96% at 50% 48%,transparent 38%,#000 96%)}
/* содержимое поверх узора */
.onepack__main > *{position:relative;z-index:1}

/* ══ Акцентные таблетки с огоньком ═══════════════════════════
   Ставятся в ключевых точках: бесплатная встреча, главный результат,
   скидка. Лёгкий наклон и покачивание — приём заметный, поэтому
   таблеток на странице ровно три, иначе акцент перестаёт работать. */
/* Наклона у таблеток нет намеренно: под углом текст рендерится
   через композитинг, буквы перестают попадать в пиксельную сетку
   и выглядят пляшущими. Наклон оставлен только на картинке. */
.pill-fire{display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#FFF3E6,#FBE3D2);
  border:1.5px solid rgba(188,82,39,.35);border-radius:100px;
  padding:8px 16px 8px 12px;font-size:13.5px;font-weight:600;color:var(--accent-ink);
  box-shadow:0 12px 26px -16px rgba(188,82,39,.6);white-space:nowrap}
.pill-fire b{font-weight:800;letter-spacing:.02em}
/* Огонёк в собственном боксе фиксированного размера: пока он
   анимировался прямо в потоке, рост и поворот меняли метрику
   строки и соседний текст подрагивал. */
.pill-fire i{font-style:normal;font-size:15px;line-height:1;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;transform-origin:center;will-change:transform;
  animation:fireFlicker 2.6s ease-in-out infinite}
@keyframes fireFlicker{0%,100%{transform:scale(1)}
                       40%{transform:scale(1.16)}
                       70%{transform:scale(1.04)}}

.pill-fire--tilt{margin-bottom:16px}
/* Таблетка сама стоит на месте надзаголовка, отбивка слева не нужна. */
.shead .pill-fire{margin-left:0}

/* на тёмной карточке цены — своя раскладка */
.onepack__promo{position:absolute;top:22px;right:22px;z-index:3;
  background:linear-gradient(135deg,#FFE9D6,#F9D4BC);border-color:rgba(188,82,39,.5)}
@media(max-width:760px){
  .onepack__promo{position:static;margin-bottom:18px}
}

.onepack__badge{position:relative;display:inline-block;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#8FD8B8;
  border:1px solid rgba(143,216,184,.4);border-radius:100px;padding:6px 14px;margin-bottom:22px}
.onepack__top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;flex-wrap:wrap;padding-bottom:24px;
  border-bottom:1px solid rgba(228,240,234,.18);margin-bottom:24px}
.onepack__main h3{font-weight:800;font-size:clamp(22px,2vw,29px);margin-bottom:6px;color:#fff}
.onepack__meta{font-size:16.5px;color:rgba(228,240,234,.86)}
.onepack__price{text-align:right}
.onepack__price s{display:block;font-size:clamp(16px,1.5vw,20px);font-weight:600;
  color:rgba(228,240,234,.86);text-decoration-color:#E8784A;
  text-decoration-thickness:2px;text-decoration-skip-ink:none;margin-bottom:6px}
.onepack__price b{display:block;font-size:clamp(34px,3.8vw,52px);font-weight:800;letter-spacing:-.045em;line-height:1;color:#fff}
.onepack__price span{display:block;font-size:14.5px;color:rgba(228,240,234,.86);margin-top:8px}
.onepack__list{position:relative;list-style:none;display:grid;gap:13px;margin-bottom:28px}
.onepack__list li{padding-left:32px;position:relative;font-size:17px;
  color:rgba(228,240,234,.94);line-height:1.5}
/* Маркеры стоят по центру первой строки: середина строки — половина
   межстрочного (1.5 / 2 = .75em), минус половина кружка. В пикселях
   они съезжали вниз при каждой смене кегля. */
.onepack__list li::before{content:"";position:absolute;left:0;top:calc(.75em - 8px);width:16px;height:16px;
  border-radius:50%;background:rgba(143,216,184,.16)}
.onepack__list li::after{content:"";position:absolute;left:5px;top:calc(.75em - 3px);width:6px;height:6px;
  border-radius:50%;background:#8FD8B8}
.onepack__cta{position:relative;width:100%;font-size:17px;padding:18px}
/* Количество занятий стоит вплотную к цене за занятие: состав покупки
   должен читаться с одного взгляда. Общей суммы на странице нет —
   её Александр называет на бесплатной встрече, до оплаты. */
.onepack__whole{position:relative;font-size:16.5px;color:rgba(228,240,234,.9);
  margin:-6px 0 26px}
.onepack__lt{position:relative;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#8FD8B8;margin-bottom:14px}
.onepack__lt--no{color:rgba(228,240,234,.86)}
.onepack__no{position:relative;font-size:17px;line-height:1.5;
  color:rgba(228,240,234,.9);margin-bottom:28px}
.onepack__note{position:relative;font-size:15px;color:rgba(228,240,234,.86);
  margin-top:16px;text-align:center}

.onepack__side{position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column}
/* Та же сетка знаков, что на тёмной карточке, только в зелёном и тише:
   на белом фоне узор набирает контраст быстрее. Маской уводим её от
   середины, где стоят подпись и цитата. */
.onepack__side::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76' viewBox='0 0 76 76'%3E%3Cg transform='translate(22.8 19.4) scale(0.95)' fill='none' stroke='%231F6B57' stroke-opacity='0.9' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M16 28 V21'/%3E%3Cpath d='M16 21 L9.5 15'/%3E%3Cpath d='M13 18.2 L11.8 11.8'/%3E%3Cpath d='M9.5 15 L5.4 11.2'/%3E%3Cpath d='M16 21 L22.5 15'/%3E%3Cpath d='M19 18.2 L20.2 11.8'/%3E%3Cpath d='M22.5 15 L26.6 11.2'/%3E%3C/g%3E%3C/svg%3E");background-size:76px 76px;
  -webkit-mask-image:radial-gradient(112% 96% at 50% 46%,transparent 32%,#000 92%);
  mask-image:radial-gradient(112% 96% at 50% 46%,transparent 32%,#000 92%)}
.onepack__side > *{position:relative;z-index:1}
.onepack__sidettl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
.onepack__side p{font-size:15.5px;color:var(--ink2);line-height:1.55}

/* Половина карточки пустовала. Заполняем фирменным знаком с подписью,
   а внизу — словом автора: рядом с ценой это работает лучше пустоты. */
.sidemark{margin:auto 0;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(20px,2.4vw,34px) 0}
.sidemark__i{width:clamp(96px,10vw,150px);height:auto;color:var(--ink);opacity:.92;margin-bottom:18px}
.sidemark__n{font-weight:700;font-size:17px;letter-spacing:-.03em;color:var(--ink)}
.sidemark__d{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-top:3px}

.sidequote{margin:0;padding-top:18px;border-top:1px solid var(--line)}
.sidequote blockquote{margin:0 0 14px;font-size:16.5px;line-height:1.5;color:var(--ink2)}
.sidequote blockquote::before{content:"«"}
.sidequote blockquote::after{content:"»"}
.sidequote figcaption{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  font-size:13.5px;font-weight:600;color:var(--ink)}
.sidequote__ava{flex:none;display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);order:2}
.sidequote__ava img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:900px){.onepack{grid-template-columns:1fr}}

/* Карточка цены на телефоне.
   .onepack__top — флекс «название слева, цена справа». На узком экране
   он переносит цену под заголовок, а text-align:right у неё остаётся —
   заголовок прижат влево, цена вправо, и колонка читается как рваная.
   Здесь всё выравнивается по одному краю.
   Заодно ужимаем поля: 32px на трёхсотпиксельном экране оставляли
   под текст 263px, и пункты списка ломались по три слова в строку. */
@media(max-width:560px){
  .onepack__main{padding:26px 22px 28px}
  .onepack__promo{margin-bottom:14px}
  .onepack__badge{margin-bottom:16px}
  .onepack__top{gap:14px;padding-bottom:20px;margin-bottom:20px}
  .onepack__price{text-align:left}
  .onepack__price span{margin-top:6px}
  .onepack__list{gap:12px;margin-bottom:24px}
  .onepack__list li{font-size:16px;padding-left:28px}
  .onepack__list li::before{width:14px;height:14px;top:calc(.75em - 7px)}
  .onepack__list li::after{left:4px}
  .onepack__cta{padding:17px}
  /* по центру подпись выглядела отдельным объявлением,
     хотя весь текст карточки идёт от левого края */
  .onepack__note{text-align:left}
}

/* ── приглашение ── */
/* Точка входа для тех, кто дочитал до цены и заколебался. Формы здесь
   нет намеренно: вторая форма на странице размывает, куда именно
   уходит заявка, и ломает воронку в Метрике. */
.invite{padding:clamp(58px,5.6vw,100px) 0;background:var(--teal-soft)}
.invite__in{max-width:760px;margin:0 auto;text-align:center}
.invite h2{font-size:clamp(25px,3.2vw,42px);letter-spacing:-.035em;margin-bottom:16px}
.invite p{font-size:clamp(16.5px,1.4vw,19px);line-height:1.55;color:var(--ink2);
  margin-bottom:clamp(22px,2.4vw,32px)}

/* ── родителям ── */
/* Тёмный лесной вместо тёплого персикового: тот выпадал из палитры
   и читался как чужеродная вставка. Стерильность прошлой версии
   давал не цвет, а четыре белые карточки — их и заменил список. */
.parents{position:relative;overflow:hidden;background:#EDF5F0}
.parents > .wrap{max-width:1560px}
.parents .kicker{color:var(--teal)}
.pcols{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,4vw,72px);align-items:start}
.parents h2{font-size:clamp(30px,3.9vw,52px);line-height:1.08;letter-spacing:-.035em}
.parents .lede{color:var(--ink2);font-size:clamp(17.5px,1.3vw,19px);
  margin-top:16px;line-height:1.55}

.parents-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pa-blob{position:absolute;display:block;border-radius:50%}
.pa-blob--1{width:34vmax;height:34vmax;left:-12%;bottom:-30%;
  background:radial-gradient(circle at 50% 50%,rgba(143,216,184,.34),transparent 68%)}
.pa-blob--2{width:28vmax;height:28vmax;right:-8%;top:-26%;
  background:radial-gradient(circle at 50% 50%,rgba(188,82,39,.14),transparent 70%)}
.pa-wave{position:absolute;left:-3%;top:32%;width:46%;height:58%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='34'%3E%3Cpath d='M0 24 q 25 -18 50 0 t 50 0 t 50 0 t 50 0' fill='none' stroke='%231F6B57' stroke-width='2' stroke-opacity='.3'/%3E%3C/svg%3E");
  background-size:200px 34px;opacity:.4;transform:rotate(2deg);
  -webkit-mask-image:radial-gradient(circle at 40% 50%,#000 16%,transparent 64%);
  mask-image:radial-gradient(circle at 40% 50%,#000 16%,transparent 64%)}

.plist{list-style:none;display:grid;gap:0;border-top:1px solid rgba(31,107,87,.22)}
.pit{display:grid;grid-template-columns:60px 1fr;gap:18px;align-items:start;
  padding:26px 0 28px;border-bottom:1px solid rgba(31,107,87,.22)}
.pit__n{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--teal);opacity:.85;padding-top:3px}
.pit b{display:block;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;
  margin-bottom:6px;color:var(--ink)}
.pit span{display:block;font-size:17.5px;color:var(--ink2);line-height:1.5}
@media(max-width:900px){
  .pcols{grid-template-columns:1fr;gap:28px}
  .pit{grid-template-columns:38px 1fr;gap:12px}
}

/* ── about ── */
.about{position:relative;overflow:hidden}
/* Секция шире остальных, как первый экран: портрет и факты
   получают воздух, а страница перестаёт быть одноколоночной. */
.about > .wrap{max-width:1660px;padding-left:clamp(22px,3vw,50px);padding-right:clamp(22px,3vw,50px)}
.acols{display:grid;grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr);
  gap:clamp(44px,5.2vw,96px);align-items:stretch}

/* фоновая фактура */
.about-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ab-blob{position:absolute;display:block;border-radius:50%}
.ab-blob--1{width:40vmax;height:40vmax;right:-10%;top:-28%;
  background:radial-gradient(circle at 50% 50%,rgba(143,216,184,.26),transparent 68%)}
.ab-blob--2{width:32vmax;height:32vmax;left:-14%;bottom:-26%;
  background:radial-gradient(circle at 50% 50%,rgba(188,82,39,.14),transparent 70%)}
.ab-wave{position:absolute;right:-4%;bottom:-6%;width:56%;height:70%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='34'%3E%3Cpath d='M0 24 q 25 -18 50 0 t 50 0 t 50 0 t 50 0' fill='none' stroke='%231F6B57' stroke-width='2' stroke-opacity='.42'/%3E%3C/svg%3E");
  background-size:200px 34px;opacity:.4;transform:rotate(-3deg);
  -webkit-mask-image:radial-gradient(circle at 60% 50%,#000 18%,transparent 66%);
  mask-image:radial-gradient(circle at 60% 50%,#000 18%,transparent 66%)}
@media(max-width:900px){.about-deco{opacity:.6}}
.about h2{font-size:clamp(29px,3.9vw,52px);margin-bottom:20px;letter-spacing:-.035em}
/* Подзаголовок: H2 занят именем, а работает здесь не имя, а то,
   откуда взгляд на профессии. */
.about__sub{margin:-10px 0 18px;font-size:clamp(18px,1.7vw,23px);font-weight:700;
  letter-spacing:-.025em;color:var(--accent-ink)}
.about p{color:var(--ink2);margin-bottom:15px;font-size:18px}
.about p.first{color:var(--ink);font-size:20px;font-weight:500}
.facts{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--line)}
.fct{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.fct b{color:var(--muted);font-weight:500}
@media(max-width:900px){
  .acols{grid-template-columns:1fr;gap:32px}
  .photo--tall{max-width:min(420px,100%);height:auto;margin-left:auto;margin-right:auto;width:100%}
  .fct{grid-template-columns:1fr;gap:2px}
}

/* ── отзывы ── */
/* Секции различаются не яркостью, а материалом: здесь чистый белый
   против мятного paper у соседей — переход мягкий, без полос.
   Чередование тёмного и светлого через блок делало страницу
   похожей на шаблон конструктора, поэтому тёмных осталось два
   на весь сайт, и оба смысловые. */
.reviews{position:relative;overflow:hidden;background:#fff}
.reviews > .wrap{max-width:1560px}
/* Видеозапись и лента сообщений в одном блоке. Раньше это были две
   секции подряд с двумя заголовками, и между ними висела пауза,
   хотя доказательство одно. */
.revcols{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(20px,2.4vw,44px);align-items:start}
@media(max-width:900px){
  /* minmax(0,1fr), а не 1fr: внутри правой колонки лента отзывов
     со своей горизонтальной прокруткой, и на 1fr колонка растягивалась
     до ширины ленты — 844px при экране 320. Правый край блока уезжал
     за пределы экрана и обрезался, а достать его было нечем:
     горизонтальную прокрутку страницы держит overflow-x:hidden.
     minmax(0,…) разрешает колонке быть уже содержимого. */
  .revcols{grid-template-columns:minmax(0,1fr);gap:26px}
  .revcols > .vid{max-width:min(330px,100%)}
}
.rev-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.rv-blob{position:absolute;right:-12%;top:-26%;width:38vmax;height:38vmax;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(143,216,184,.3),transparent 68%)}
.rv-dots{position:absolute;left:-2%;bottom:4%;width:24%;height:52%;
  background-image:radial-gradient(circle,var(--teal) 1.4px,transparent 1.6px);
  background-size:22px 22px;opacity:.2;
  -webkit-mask-image:radial-gradient(circle at 35% 55%,#000 12%,transparent 66%);
  mask-image:radial-gradient(circle at 35% 55%,#000 12%,transparent 66%)}

/* ── карусель отзывов ──────────────────────────────────────────
   Раскладка карточки повторяет отзыв в организации на Яндекс.Картах:
   аватар и имя строкой, под ними оценка и дата, ниже текст со свёрткой.
   Формат людям знаком, и доверия к нему больше, чем к абстрактной
   плитке цитат.

   Лента, а не сетка: отзывов будет прибавляться, а сетка на три
   колонки при четвёртом отзыве ломается на две строки с дыркой. */
.revs{position:relative;display:flex;align-items:center;gap:12px}
.revs__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:6px 2px 10px;flex:1;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none}
.revs__track::-webkit-scrollbar{display:none}
.revs__track:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:24px}

/* Стрелки прячутся сами, когда лента помещается целиком: три отзыва
   на широком экране влезают, и стрелка «дальше» вела бы в никуда.
   Скрытие делает JS через атрибут hidden, здесь только вид. */
.revs__nav{flex:none;width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px -10px rgba(20,50,42,.45);
  transition:background .18s,border-color .18s,transform .18s,opacity .18s}
/* display:flex выше перебивает атрибут hidden — без этой строки
   скрытые стрелки продолжают висеть по краям ленты */
.revs__nav[hidden]{display:none}
.revs__nav svg{width:20px;height:20px}
.revs__nav:hover{background:var(--paper);border-color:#BCD9CB;transform:scale(1.06)}
.revs__nav:disabled{opacity:.35;cursor:default;transform:none}
@media(max-width:760px){.revs__nav{display:none}}

.revc{flex:0 0 clamp(268px,78vw,344px);scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:20px 22px 22px;display:flex;flex-direction:column;
  box-shadow:0 2px 0 rgba(20,50,42,.03),0 24px 44px -40px rgba(20,50,42,.55);
  transition:box-shadow .3s,border-color .3s}
.revc:hover{border-color:#BCD9CB;box-shadow:0 2px 0 rgba(20,50,42,.03),0 30px 52px -38px rgba(20,50,42,.6)}

/* Высоту шапки держим постоянной. У отзыва без уточнения под именем
   одна строка вместо двух, и без min-height звёзды с текстом съезжают
   на несколько пикселей вверх — в ряду одна карточка выглядит сбитой.
   48px — высота блока с двумя строками (имя 24.8 + отступ 2 + строка
   уточнения ~20.8), то есть запас, а не подгон под текущий шрифт. */
.revc__h{display:flex;align-items:center;gap:12px;margin-bottom:12px;min-height:48px}
.revc__who b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.revc__meta{display:block;font-size:14.5px;color:var(--muted);margin-top:2px}

.revc__rate{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.revc__stars{display:inline-flex;gap:2px}
.revc__stars svg{width:16px;height:16px;fill:#F5A623;flex:none}
/* дата появится, когда автор пришлёт настоящие — выдумывать нельзя */
.revc__date{font-size:14.5px;color:var(--muted)}

/* Свёртка до четырёх строк. Без неё карточки в ленте разной высоты,
   а длинный отзыв читается как стена. Кнопку дорисовывает JS —
   без него текст просто виден целиком, и это рабочее состояние. */
.revc__t{font-size:16.5px;line-height:1.6;color:var(--ink2);margin:0}
.revc__t.is-clamped{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden}
.revc__more{align-self:flex-start;margin-top:8px;padding:0;border:0;background:none;
  font:inherit;font-size:15px;color:var(--accent-ink);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.revc__more:hover{color:var(--accent)}

/* аватар — фото автора отзыва, обрезанное по лицу в квадрат */
.av{width:44px;height:44px;border-radius:50%;flex:none;display:block;overflow:hidden;
  background:var(--line)}
.av img{width:100%;height:100%;display:block;object-fit:cover}

/* ── вопросы ── */
#faq{position:relative;overflow:hidden}
.faq-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.fq-blob{position:absolute;left:-14%;top:-20%;width:34vmax;height:34vmax;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(188,82,39,.11),transparent 70%)}
.fq-wave{position:absolute;right:-4%;bottom:-4%;width:44%;height:52%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='34'%3E%3Cpath d='M0 24 q 25 -18 50 0 t 50 0 t 50 0 t 50 0' fill='none' stroke='%231F6B57' stroke-width='2' stroke-opacity='.36'/%3E%3C/svg%3E");
  background-size:200px 34px;opacity:.3;
  -webkit-mask-image:radial-gradient(circle at 60% 55%,#000 14%,transparent 64%);
  mask-image:radial-gradient(circle at 60% 55%,#000 14%,transparent 64%)}
.fwrap{max-width:1000px}

.qa{background:var(--card);border:1px solid var(--line);border-radius:16px;
  margin-bottom:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.qa:hover{border-color:#C3D9CE}
.qa[open]{border-color:var(--teal);box-shadow:0 22px 44px -38px rgba(20,50,42,.6)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;
  padding:26px clamp(22px,2vw,32px);font-size:clamp(17px,1.5vw,21px);font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:1}
/* плюс, который превращается в минус */
.qa__ico{position:relative;flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--teal-soft);transition:background .2s,transform .28s cubic-bezier(.16,1,.3,1)}
.qa__ico::before,.qa__ico::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--teal);border-radius:2px;transform:translate(-50%,-50%);transition:opacity .2s}
.qa__ico::before{width:11px;height:2px}
.qa__ico::after{width:2px;height:11px}
.qa[open] .qa__ico{background:var(--accent-soft);transform:rotate(180deg)}
.qa[open] .qa__ico::before{background:var(--accent)}
.qa[open] .qa__ico::after{opacity:0}
/* Ответ раскрывается по высоте, а не появляется рывком: <details>
   переключается мгновенно, и страница дёргалась. Высоту анимирует
   main.js, здесь — сам переход и внутренняя обёртка, чтобы отступы
   не торчали в свёрнутом состоянии. */
.qa__a{overflow:hidden;transition:height .42s cubic-bezier(.16,1,.3,1)}
.qa__a > *{padding:0 clamp(22px,2vw,32px) 28px;margin:0}
.qa__a p{color:var(--ink2);font-size:17.5px;line-height:1.62;max-width:70ch}

.faq-cta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-top:26px;padding-top:26px;border-top:1px dashed var(--line)}
.faq-cta span{font-size:16.5px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.qa__a{transition:none}}

/* ── форма ── */
.formsec{position:relative;overflow:hidden;background:var(--ink);color:#E4F0EA;padding:92px 0 96px}
.form-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.fd-blob{position:absolute;display:block;border-radius:50%}
.fd-blob--1{left:-10%;top:-26%;width:40vmax;height:40vmax;
  background:radial-gradient(circle at 50% 50%,rgba(143,216,184,.17),transparent 68%)}
.fd-blob--2{right:-12%;bottom:-28%;width:36vmax;height:36vmax;
  background:radial-gradient(circle at 50% 50%,rgba(188,82,39,.16),transparent 70%)}
.fd-wave{position:absolute;left:-2%;bottom:2%;width:42%;height:56%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='34'%3E%3Cpath d='M0 24 q 25 -18 50 0 t 50 0 t 50 0 t 50 0' fill='none' stroke='%238FD8B8' stroke-width='2' stroke-opacity='.3'/%3E%3C/svg%3E");
  background-size:200px 34px;opacity:.4;
  -webkit-mask-image:radial-gradient(circle at 35% 55%,#000 14%,transparent 62%);
  mask-image:radial-gradient(circle at 35% 55%,#000 14%,transparent 62%)}

.fcols{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(36px,4vw,68px);align-items:start}
.formsec h2{color:#fff;font-size:clamp(30px,4vw,54px);margin-bottom:18px;line-height:1.08;letter-spacing:-.035em}
.formsec .kicker{color:#8FD8B8}
.formsec .lede{color:rgba(228,240,234,.9);margin-bottom:26px;max-width:42ch;line-height:1.55}
.fpoints{list-style:none;display:grid;gap:13px}
.fpoints li{font-size:15.5px;color:rgba(228,240,234,.94);padding-left:28px;position:relative;line-height:1.5}
.fpoints li::before{content:"";position:absolute;left:0;top:calc(.75em - 8px);width:16px;height:16px;
  border-radius:50%;background:rgba(143,216,184,.16)}
.fpoints li::after{content:"";position:absolute;left:5px;top:calc(.75em - 3px);width:6px;height:6px;
  border-radius:50%;background:#8FD8B8}

/* Соцсети рядом с формой: не всем удобно заполнять поля — кому-то
   проще написать в личные сообщения. Значки тёмно-зелёные, поэтому
   на тёмной секции им нужна светлая подложка, иначе диск сливается
   с фоном и в воздухе висит одно охряное кольцо. */
/* Условия встречи строкой таблеток, а не списком с точками: четыре
   коротких слова списком выглядели как перечень выгод, хотя это
   просто параметры разговора. */
.fmeta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.fmeta li{font-size:14.5px;font-weight:600;color:rgba(228,240,234,.88);
  background:rgba(143,216,184,.12);border:1px solid rgba(143,216,184,.26);
  border-radius:100px;padding:7px 14px}
.fnote{margin-top:18px;font-size:16px;color:rgba(228,240,234,.86)}

.fsoc__t{margin-top:28px;font-size:14px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#8FD8B8}
.fsoc{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.fsoc a{display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;
  border-radius:100px;text-decoration:none;
  background:rgba(143,216,184,.10);border:1px solid rgba(143,216,184,.24);
  color:rgba(228,240,234,.88);font-size:16.5px;font-weight:600;
  transition:background .18s,border-color .18s,transform .18s,color .18s}
.fsoc a:hover{background:rgba(143,216,184,.18);border-color:rgba(143,216,184,.45);
  color:#fff;transform:translateY(-2px)}
.fsoc img{display:block;border-radius:50%;width:39px;height:39px}
@media(max-width:400px){.fsoc a{font-size:16px;padding-right:16px}}

.fbox{position:relative;background:var(--card);border-radius:26px;
  padding:clamp(28px,3vw,46px);color:var(--ink);
  box-shadow:0 50px 90px -54px rgba(10,30,24,.85)}
form{display:grid;gap:18px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:block}
label.l{display:block;font-size:15px;font-weight:600;color:var(--ink2);margin-bottom:8px}

input,textarea{width:100%;background:#F5FAF7;border:1.5px solid var(--line);border-radius:12px;
  padding:14px 16px;font-family:inherit;font-size:16px;color:var(--ink);outline:0;
  transition:border-color .18s,box-shadow .18s,background .18s;resize:vertical}
input::placeholder,textarea::placeholder{color:#9AB0A6}
input:hover,textarea:hover{border-color:#C3D9CE}
input:focus,textarea:focus{border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 4px rgba(31,107,87,.13)}


/* Промокод — строка, а не поле: вводить его руками не нужно,
   значение уходит скрытым полем. */
.promo{display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent-soft);border:1px dashed rgba(188,82,39,.42);
  border-radius:100px;padding:10px 16px}
.promo__fire{font-size:16px;line-height:1;flex:none;
  display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  transform-origin:center;animation:fireFlicker 2.6s ease-in-out infinite}
.promo__text{font-size:15px;color:var(--accent-ink);font-weight:600}
.promo__text b{font-weight:800;letter-spacing:.08em}


label.l em{font-style:normal;font-weight:400;color:var(--muted)}

/* Обязательные поля. Звёздочка — привычный всем знак «без этого
   не примут», расшифровка стоит над полями, а не мелко внизу. */
.star{color:var(--accent);font-weight:800}
.freq{font-size:15px;color:var(--muted);margin-bottom:-6px}
/* Заполненное поле — зелёная рамка и галочка справа. Положение галочки
   задано заранее: иначе при появлении она «выезжает» из угла поля. */
.field input{background-repeat:no-repeat;background-position:right 14px center;background-size:20px}
.field.is-ok input{border-color:var(--teal);background-color:#fff;padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231F6B57' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Согласие. Раньше это была строка мелкого серого текста с флажком
   20px — её проскакивали глазами как юридическую сноску. Теперь это
   отдельная рамка с призывом «Поставьте галочку» и крупным флажком
   с толстой обводкой; после отметки рамка становится зелёной. */
.agree{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--ink2);
  line-height:1.45;cursor:pointer;padding:14px 16px;border-radius:14px;
  background:var(--accent-soft);border:2px dashed rgba(188,82,39,.55);
  transition:background .18s,border-color .18s}
.agree__do{display:block;font-size:16px;font-weight:800;color:var(--accent-ink);margin-bottom:2px}
.agree input{appearance:none;-webkit-appearance:none;width:28px;height:28px;flex:none;margin:0;padding:0;
  border:2.5px solid var(--accent-ink);border-radius:7px;background:#fff;cursor:pointer;
  transition:background .15s,border-color .15s}
.agree input:checked{background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/20px;
  border-color:var(--teal)}
.agree input:focus-visible{outline:3px solid rgba(31,107,87,.35);outline-offset:2px}
.agree:has(input:checked){background:var(--teal-soft);border:2px solid rgba(31,107,87,.45)}
.agree:has(input:checked) .agree__do{color:var(--teal)}
.agree a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.agree a:hover{color:var(--ink)}

/* Нажали серую кнопку — подсвечиваем, чего не хватает. */
.field.is-miss input{border-color:#C2410C;background:#FFF5F0;box-shadow:0 0 0 4px rgba(194,65,12,.14)}
.agree.is-miss{border-style:solid;border-color:#C2410C;animation:needNudge .5s ease-in-out 2}
@keyframes needNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.agree.is-miss{animation:none}}

.send{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--accent);color:#fff;border:0;border-radius:14px;padding:18px;
  font-family:inherit;font-weight:700;font-size:17px;cursor:pointer;
  box-shadow:0 18px 34px -18px rgba(188,82,39,.7);transition:.18s}
.send:hover{background:#A8431A;transform:translateY(-1px);box-shadow:0 22px 40px -18px rgba(188,82,39,.75)}
.send svg{transition:transform .2s}
.send:hover svg{transform:translateX(3px)}

/* Пока не заполнено всё — кнопка серая и заявку не отправляет.
   Не disabled: нажатие должно доходить до скрипта, чтобы показать,
   чего не хватает, а не молча ничего не делать. */
.send.is-off{background:#CBD5D1;color:#46544F;box-shadow:none;cursor:not-allowed}
.send.is-off:hover{background:#CBD5D1;transform:none;box-shadow:none}
.send.is-off:hover svg{transform:none}
.fneed{margin-top:-8px;font-size:15px;line-height:1.45;color:var(--accent-ink);font-weight:600;text-align:center}
.fneed:empty{display:none}

/* Ловушка для ботов. Не display:none и не hidden: часть спам-скриптов
   такие поля пропускает именно потому, что их не видно в разметке
   «по-настоящему». Здесь поле остаётся в потоке, но вынесено за экран. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Ошибка отправки. Заявку сервер нигде не хранит, поэтому человеку
   сразу даём второй путь — ссылку в Telegram. */
.ferr{margin-top:-6px;padding:12px 14px;border-radius:12px;
  background:var(--accent-soft);border:1px solid rgba(188,82,39,.35);
  font-size:14px;line-height:1.5;color:var(--accent-ink)}
.ferr a{color:var(--accent-ink);font-weight:700}
.send:disabled{opacity:.72;cursor:progress}

.ok{text-align:center;padding:40px 10px}
.ok__mark{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:var(--accent-soft);
  font-size:26px;margin-bottom:16px}
.ok__promo{margin-top:14px;display:inline-block;font-size:14px;color:var(--accent-ink);
  background:var(--accent-soft);border:1px dashed rgba(188,82,39,.4);
  border-radius:100px;padding:9px 16px}
.ok__promo b{font-weight:800;letter-spacing:.08em}
.ok h3{font-weight:800;font-size:26px;margin-bottom:12px}
.ok p{color:var(--ink2)}
@media(max-width:900px){.fcols{grid-template-columns:1fr;gap:34px}.fr{grid-template-columns:1fr}}

footer{padding:clamp(52px,5vw,78px) 0 52px}

/* Навигация в подвале: знак и четыре колонки ссылок. Раньше подвал
   был одной строкой с копирайтом — с появлением блога и страниц этапов
   по сайту стало нечем перемещаться снизу. */
.fnav{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:clamp(22px,2.6vw,44px);
  padding-bottom:clamp(32px,3.4vw,48px)}
@media(max-width:1080px){.fnav{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.fnav{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.fnav{grid-template-columns:1fr}}

.fbrand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  align-self:flex-start;transition:opacity .16s}
.fbrand:hover{opacity:.75}
.fbrand__mark{flex:none;display:flex;align-items:center}
.fbrand__n{display:block;font-weight:700;font-size:17px;letter-spacing:-.03em;line-height:1.15}
.fbrand__d{display:block;font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}
@media(max-width:1080px){.fbrand{grid-column:1 / -1;margin-bottom:6px}}

.fcol{display:flex;flex-direction:column;gap:9px;font-size:15.5px}
.fcol b{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin-bottom:3px}
.fcol a{color:var(--ink2);text-decoration:none;transition:color .16s}
.fcol a:hover{color:var(--accent-ink)}
.fcol__note{font-size:14.5px;color:var(--muted)}

/* Значки соцсетей в подвале. На светлой бумаге тёмный диск читается
   сам по себе, подложка не нужна — только тень при наведении. */
.soc{display:flex;gap:9px;margin-top:5px}
.soc a{display:block;line-height:0;border-radius:50%;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s}
.soc a:hover{transform:translateY(-2px);box-shadow:0 8px 18px -6px rgba(28,74,62,.45)}
.soc img{display:block;border-radius:50%}
.soc--head{margin-top:24px;gap:11px}
/* Кнопки «подписаться» — та же пилюля, что в подвале у формы, но
   в основной палитре: на «О Лосеве» блок стоит на светлой бумаге,
   а не на тёмной плашке, и подпись голым значком там не заменить —
   человек должен видеть, что это группа, а не «написать». */
.soc--btn{flex-wrap:wrap;gap:10px;margin-top:26px}
.soc--btn a{display:inline-flex;align-items:center;gap:10px;line-height:1.2;
  padding:7px 18px 7px 7px;border-radius:100px;text-decoration:none;
  background:rgba(255,255,255,.72);border:1px solid rgba(28,74,62,.16);
  color:var(--ink);font-size:15px;font-weight:600;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.soc--btn a:hover{background:#fff;border-color:rgba(28,74,62,.42);
  transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(28,74,62,.5)}
@media(max-width:400px){.soc--btn a{font-size:14px;padding-right:15px}}
.cookie-on footer{padding-bottom:132px}
.fin{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center;
  padding-top:26px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.fdom{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.fin a{color:var(--ink2)}

/* ══════════════════════════════════════════════
   Анимации появления при скролле.
   Скрываем только если JS жив (класс .js ставит main.js),
   иначе при отключённом JS страница осталась бы пустой.
   ══════════════════════════════════════════════ */
/* Плавное появление: длинная кривая с резким стартом и долгим
   затуханием — движение «доезжает», а не обрывается. */
.js .reveal{opacity:0;transform:translateY(46px);
  transition:opacity 1.5s cubic-bezier(.16,1,.3,1),transform 1.5s cubic-bezier(.16,1,.3,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* мягкое появление первого экрана без ожидания скролла */
.js .hero__kicker,.js .hero h1,.js .hero__sub,.js .hero__facts,
.js .hero__btns,.js .hero__note,.js .hero__media{
  animation:rise 1.45s cubic-bezier(.16,1,.3,1) backwards}
.js .hero h1{animation-delay:.05s}
.js .hero__sub{animation-delay:.12s}
.js .hero__facts{animation-delay:.18s}
.js .hero__btns{animation-delay:.24s}
.js .hero__note{animation-delay:.30s}
.js .hero__media{animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}

/* лёгкое «дыхание» декоративных колец */

/* Список в блоке «Родителям» намеренно без реакции на наведение:
   это перечисление, а не набор кликабельных карточек. */

/* плавное раскрытие FAQ */
details summary{transition:color .16s ease}
details[open] summary{color:var(--accent-ink)}
details[open] p{animation:fade .35s ease backwards}
@keyframes fade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* Кому анимации мешают — выключаем всё. */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .hero__kicker,.js .hero h1,.js .hero__sub,.js .hero__facts,
  .js .hero__btns,.js .hero__note,.js .hero__media,
  details[open] p{animation:none}
  html{scroll-behavior:auto}
}

/* подпись студии в футере */
/* Прижата вправо: плашка куки висит по центру нижней кромки и
   перекрывала подпись. */
.fby{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:22px 0 0;margin-top:22px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--muted)}
.fby .ow{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;
  padding:5px 11px;border:1px solid var(--line);border-radius:9px;transition:.16s;background:#fff}
.fby .ow img{display:block;border-radius:5px}
.fby .ow b{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.fby .ow:hover{border-color:var(--ink);transform:translateY(-1px)}


/* ══ Волнистый росчерк под ключевыми словами ══════════════════
   SVG-подложка растягивается на строку, поэтому строка не должна
   переноситься — иначе волна размажется на два ряда. Держим кегль
   таким, чтобы фраза влезала в колонку целиком; на узких экранах
   перенос разрешён, а волна там прячется. */
.uline{position:relative;display:inline-block;color:var(--accent)}
.uline svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.36em;overflow:visible}
.uline path{fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;opacity:.55;
  stroke-dasharray:340;stroke-dashoffset:0}
.js .uline path{stroke-dashoffset:340;animation:draw 1.1s cubic-bezier(.65,0,.35,1) .45s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media(min-width:901px){.uline{white-space:nowrap}}
@media(max-width:900px){.uline svg{display:none}}

/* ══ Траектория: от «не знаю» до зачисления ═══════════════════ */
/* Три факта о результате на первом экране. Читаются по отдельности,
   поэтому не требуют объяснения, в отличие от прежней «траектории». */
.hfacts{list-style:none;display:grid;grid-template-columns:repeat(3,auto);
  gap:clamp(20px,2.6vw,44px);justify-content:start;margin:0 0 32px;padding:26px 0 0;
  border-top:1px solid var(--line)}
.hfacts li{position:relative}
.hfacts b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;
  line-height:1.2;color:var(--ink)}
.hfacts span{display:block;font-size:15px;color:var(--muted);line-height:1.35;margin-top:4px}
@media(max-width:900px){
  .hfacts{grid-template-columns:1fr;gap:14px;padding-top:22px;margin-bottom:26px}
  .hfacts b{font-size:16px}
}

/* пульсирующая точка перед примечанием */


/* ══ Шапка: номера разделов + полоса прочитанного ═════════════ */
.nlinks a{position:relative;white-space:nowrap;padding:4px 0;transition:color .16s}
.nlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.65,0,.35,1)}
.nlinks a:hover::after,.nlinks a.is-here::after{transform:scaleX(1)}
.nlinks a.is-here{color:var(--ink);font-weight:600}
.navbar-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--teal));
  transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
.topbar{position:sticky}
.nav{position:relative}

@media (prefers-reduced-motion:reduce){
  .uline path{stroke-dashoffset:0;animation:none}
  
}


/* ══ Плашка про куки ══════════════════════════════════════════
   Слева знак, справа кнопка. Не перекрывает контент целиком
   и не блокирует страницу: согласие на аналитические куки
   не требует модального окна. */
.cookie{position:fixed;left:50%;bottom:20px;z-index:200;transform:translateX(-50%) translateY(0);
  display:flex;align-items:center;gap:16px;
  width:min(780px,calc(100% - 32px));
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:14px 16px 14px 18px;
  box-shadow:0 26px 60px -30px rgba(20,50,42,.5)}
/* Плашка не анимируется намеренно: она отдаётся видимой прямо в разметке,
   чтобы уведомление стояло на экране с первого кадра — счётчик стартует
   тогда же. Выезд снизу означал бы, что первые доли секунды его нет. */
.cookie[hidden]{display:none}

/* Без подложки: цветной квадрат под знаком делал плашку похожей
   на типовой виджет, знак сам по себе читается лучше. */
.cookie__mark{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px}
.cookie__text{flex:1;min-width:0;font-size:14px;color:var(--ink2);line-height:1.45}
.cookie__text a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.cookie__text a:hover{color:var(--ink)}
.cookie__btn{flex:none;background:var(--ink);color:#fff;border:0;border-radius:11px;
  padding:12px 26px;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;
  transition:background .16s,transform .16s}
.cookie__btn:hover{background:#14382E;transform:translateY(-1px)}

/* На телефоне плашка обязана быть однострочной. Она висит над первым
   экраном, а там на нижней трети стоит «Записаться на встречу»: прежняя
   раскладка (знак строкой, текст строкой, кнопка во всю ширину) давала
   209px и накрывала кнопку целиком. Сейчас ~70px — кнопка остаётся видна.
   Знак убран: он съедал целую строку и ничего не сообщал. */
@media(max-width:640px){
  .cookie{flex-wrap:nowrap;align-items:center;gap:10px;bottom:8px;padding:10px 12px;
    width:min(780px,calc(100% - 16px))}
  .cookie__mark{display:none}
  .cookie__text{flex:1 1 auto;font-size:12.5px;line-height:1.35}
  .cookie__btn{flex:none;padding:11px 16px;font-size:13.5px;border-radius:10px}
}


/* ══ Дипломы и квалификация ══════════════════════════════════
   Документов два, поэтому сетка в две колонки. Пропорции сканов
   не совпадают (1.57 и 1.40), а подписи должны стоять на одной
   линии — отсюда фиксированное окно и object-fit:contain. */
.docs{padding:clamp(72px,7.5vw,124px) 0;background:#F7FBF8;position:relative;overflow:hidden}
.docs .wrap{position:relative;z-index:1}
.docs__head{max-width:64ch;margin-bottom:clamp(30px,3.4vw,50px)}
.docs__head p{font-size:clamp(16px,1.4vw,19px);color:var(--ink2);line-height:1.6;margin-top:12px}
.docgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
@media(max-width:760px){.docgrid{grid-template-columns:1fr}}
.docs__note{margin-top:18px;font-size:15px;color:var(--muted)}

.doc{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s,border-color .2s;
  box-shadow:0 2px 0 rgba(20,50,42,.04),0 30px 60px -50px rgba(20,50,42,.5)}
.doc:hover{transform:translateY(-3px);border-color:#C3D9CE;
  box-shadow:0 2px 0 rgba(20,50,42,.04),0 40px 70px -46px rgba(20,50,42,.55)}
/* Окно под скан: пропорции документов разные, поэтому вписываем целиком
   на белом поле — как в паспарту. Обрезать документ нельзя. */
.doc__pic{position:relative;aspect-ratio:1.48;background:#fff;overflow:hidden;
  border-bottom:1px solid var(--line);cursor:zoom-in}
.doc__pic img{width:100%;height:100%;object-fit:contain;display:block}
.doc__zoom{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(28,74,62,.6);backdrop-filter:blur(6px);
  opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s}
.doc__zoom svg{width:18px;height:18px}
.doc:hover .doc__zoom,.doc:focus-visible .doc__zoom{opacity:1;transform:none}
@media(hover:none){.doc__zoom{opacity:1;transform:none}}
.doc__b{padding:20px clamp(18px,1.8vw,24px) 22px}
.doc__b b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.3;
  margin-bottom:6px}
.doc__b span{display:block;font-size:15.5px;color:var(--muted);line-height:1.45}

.vid{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 2px 0 rgba(20,50,42,.04),0 30px 60px -50px rgba(20,50,42,.5)}
/* Настоящая запись вертикальная: показываем целиком на тёмном поле,
   а не кропим — иначе срезается лицо. */
.vid__frame{position:relative;aspect-ratio:3/4;background:var(--ink);overflow:hidden}
.vid__frame video{width:100%;height:100%;object-fit:contain;display:block;background:var(--ink)}
.vid--real .vid__b{border-top:1px solid var(--line)}

.vid__b{padding:18px clamp(16px,1.6vw,22px) 20px}
.vid__b b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.vid__b span{display:block;font-size:15px;color:var(--muted)}


/* ══ Открытые материалы ═════════════════════════════════════════
   PDF, которые можно забрать без заявки.

   Блок компактный намеренно. Он стоит ПОСЛЕ формы и работает для тех,
   кому записываться пока рано; четыре крупные карточки с обложками
   на этом месте перетягивали внимание с заявки. Поэтому строка
   с текстом слева, кнопка справа, а сам список раскрывается по клику. */
.mats{padding:clamp(58px,5.6vw,96px) 0;position:relative;overflow:hidden;background:#F7FBF8}
.mats .wrap{position:relative;z-index:1}

.matline{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,48px);align-items:start}
.matline__t{max-width:62ch}
.matline__t h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;margin-bottom:10px}
.matline__t p{font-size:17.5px;line-height:1.55;color:var(--ink2)}
@media(max-width:860px){.matline{grid-template-columns:1fr;gap:22px}}

/* ── статьи блога в конце главной ── */
.reads{padding:0 0 clamp(58px,5.6vw,96px);background:#F7FBF8}
.reads__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line);padding-top:clamp(40px,4vw,64px);margin-bottom:22px}
.reads__head h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em}
.reads__all{flex:none;font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px}
.reads__all:hover{color:var(--accent-ink)}
.reads__list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.reads__list a{display:flex;flex-direction:column;gap:6px;height:100%;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  transition:border-color .18s,transform .18s}
.reads__list a:hover{border-color:#BCD9CB;transform:translateY(-2px)}
.reads__list span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.reads__list b{font-size:16.5px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
@media(max-width:960px){.reads__list{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .reads__list{grid-template-columns:1fr}
  .reads__head{flex-direction:column;align-items:flex-start}
}

/* Раскрывашка, а не ссылка на отдельную страницу: подборки из четырёх
   PDF на страницу не хватает, а переход уводил бы человека с сайта
   на файл в один клик мимо всего остального. */
.matopen{justify-self:end}
.matopen > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.6);border:1px solid rgba(28,74,62,.28);border-radius:14px;
  padding:16px 24px;font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap;
  transition:background .16s,border-color .16s}
.matopen > summary::-webkit-details-marker{display:none}
.matopen > summary:hover{background:#fff;border-color:var(--ink)}
.matopen__ico{flex:none;width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .24s}
.matopen[open] .matopen__ico{transform:rotate(-135deg) translate(-3px,-3px)}

.matlist{list-style:none;display:grid;gap:8px;margin-top:14px;min-width:min(430px,100%)}
.matlist a{display:block;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:14px 18px;
  transition:border-color .16s,transform .16s}
.matlist a:hover{border-color:#BCD9CB;transform:translateY(-2px)}
.matlist b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.matlist span{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:3px}
@media(max-width:860px){
  .matopen{justify-self:stretch}
  .matopen > summary{width:100%;justify-content:space-between}
  .matlist{min-width:0}
}


/* ══ Мобильная доводка ═══════════════════════════════════════════
   Собрано в один блок намеренно: это не правки отдельных компонентов,
   а один проход по тому, что ломалось именно на телефоне. Замеры
   снимались в Chromium на 320/360/390px.

   Что чинится ниже:
   · имя в шапке обрезалось многоточием на 320px;
   · микроподписи по 10–11px нечитаемы с руки;
   · «Подробнее», «Скачать» и ссылки подвала были 23–38px в высоту
     при рекомендованных 44 — попасть пальцем тяжело;
   · чипсы класса ломались на два ряда, «Выпустился» уезжал один. */

@media(max-width:360px){
  /* Кнопка и имя делят ширину строки. Имя ужималось первым и получало
     многоточие — уменьшаем оба, чтобы влезли целиком. */
  .brand__n{font-size:13.5px}
  .nav{gap:10px}
  .nav .btn{padding:9px 11px;font-size:12px}
}
@media(max-width:340px){
  /* На 320px после отступов остаётся 288px, а «Александр Лосев» с кнопкой
     просят 304 — имя обрезалось в «Александр Л…». Дососкабливаем недостающее
     с полей контейнера, зазора и боков кнопки: по высоте кнопку не трогаем,
     иначе она станет неудобной для пальца. */
  .topbar .wrap{padding-left:12px;padding-right:12px}
  .nav{gap:6px}
  .nav .btn{padding:9px 8px}
  /* Соскабливать больше нечего: бургер забрал ещё 52px вместе с зазором,
     и на 320px «Александр» наезжал на кнопку на 3px даже в две строки.
     Здесь остаётся знак. На 340px имя ещё помещается, но ступень одна
     на обе ширины, и ломать её ради 340px не стоит. */
  .brand__n{display:none}
}

@media(max-width:640px){
  /* Микроподписи: 10–11px с трекингом на бумаге читаются, с телефона нет */
  .fbrand__d,.sidemark__d{font-size:11.5px}

  /* Цели нажатия. Высоту добираем отступами, а не строкой:
     иначе поедет ритм карточек. */
  .rcard__more{padding-top:12px;padding-bottom:12px}
  .mat__dl{padding-top:20px;padding-bottom:6px}
  .brand{padding:6px 0}
  .fbrand{padding:4px 0}

  /* Ссылки подвала стояли в 9px друг от друга при высоте строки 23px —
     промах мимо соседней ссылки был делом техники. */
  .fcol{gap:2px}
  .fcol a{padding:9px 0}
  .fcol b{margin-bottom:6px}

  /* Подпись студии прижата вправо — на широком экране она так
     уравновешивает адрес слева, а в одну колонку оба ряда липли
     к правому краю и висели в воздухе. Ставим по левому краю,
     как и всё остальное в подвале. */
  .fby{justify-content:flex-start}

  /* Второй заход по целям нажатия: замер на 375px показал ещё шесть
     штук ниже сорока пикселей. Высоту добираем отступами, кегль
     и ритм строк не трогаем.

     «ещё» в отзывах — 22px, ссылка «Подробнее» в плашке куки — 17,
     «Записаться на встречу» в нижней строке подвала — 19, «ниже»
     в оговорке под заголовком — 23, подпись студии — 34. */
  .revc__more{padding:10px 0;margin-top:2px}
  .cookie__text a{display:inline-block;padding:7px 0}
  .fin a{display:inline-block;padding:10px 0}
  .shead__note a{display:inline-block;padding:8px 0}
  .fby .ow{padding:9px 12px}

  /* Флажок согласия крупный и на телефоне: под палец нужно минимум
     24px, а сама рамка кликабельна целиком (label). */
  .agree input{width:30px;height:30px}

  /* Ссылка под репликами. Надпись просит 417px при доступных 327,
     то есть на телефоне она в любом случае в две строки. Стрелка —
     отдельный флекс-элемент и по умолчанию встаёт по центру блока,
     повисая между строк; прижимаем её к нижней строке, к последнему
     слову, как и читается. */
  .cases__cta{align-items:flex-end}

  /* Рубрика и плашка «Главный результат» держатся в одну строку.
     Замер на 375px: рубрика 137px, плашка 180, зазор 14 — итого 331
     при доступных 327, и плашка срывалась на вторую строку. Ужимаем
     плашку полями и зазором, кегль не трогаем. */
  .shead .pill-fire{padding:7px 11px 7px 9px;gap:6px}
  .shead .kicker{white-space:nowrap}

  /* Надписи на кнопках перестают быть однострочными. «Записаться
     на бесплатную встречу» — 289px вместе с полями, а кнопка внутри
     карточки с ценой получает 281: текст вылезал за оранжевый
     прямоугольник с обеих сторон. Та же беда была под программой
     и в блоке «Не уверены».

     Шапку исключаем: там кнопка стоит в одну строку с именем
     и бургером, и перенос ломает высоту шапки. */
  .btn{white-space:normal;text-align:center;line-height:1.3}
  .nav .btn{white-space:nowrap}
  .onepack__cta,.steps__cta .btn,.invite .btn{width:100%;justify-content:center}
}

/* ── Читабельность с телефона ─────────────────────────────────
   Сайт читают родители, в том числе с немолодыми глазами и с руки.
   Замер на 375px: основной текст шёл кеглем 16–16.5, подписи 11.5–13,
   серые подписи и светлый текст на тёмных блоках не дотягивали
   до 5:1 по контрасту. Цвет поправлен в токенах --ink2/--muted
   и в прозрачностях тёмных блоков, здесь — кегль и воздух.

   Нижние границы на телефоне: основной текст 17px и крупнее,
   вторичный 15, подписи капсом 13. Опускать ниже — только
   с замером на 320px, а не на глаз.

   Отступы секций на телефоне были 88px сверху и снизу — на
   четырнадцать блоков это почти три пустых экрана прокрутки. */
@media(max-width:640px){
  /* Второстепенное, что на телефоне снимаем целиком: вводные абзацы,
     повторы и дубли соседних блоков. На десктопе всё на месте. */
  .m-hide{display:none!important}

  section{padding:60px 0}
  .proof,.invite,.mats{padding:46px 0}
  .docs{padding:54px 0}
  .formsec{padding:60px 0 64px}
  .bigquote{margin-bottom:26px;padding:14px 0}

  /* основной текст */
  .shead p,.lede,.parents .lede,.hero--shot .hero__sub{font-size:17.5px}
  .gap__p,.oc__l li,.qa__a p,.pit span,.matline__t p,.about p{font-size:17.5px}
  .case__b,.rcard p,.onepack__list li,.onepack__no{font-size:17px}
  .about p.first{font-size:19px}
  .revc__t{font-size:16.5px}
  .fct,.onepack__whole,.onepack__meta{font-size:16.5px}
  .hfacts b{font-size:17px}

  /* вторичный текст */
  .hfacts span,.gap__s,.doc__b span,.fnote{font-size:15.5px}
  .hero__note,.onepack__note,.docs__note,.agree,.promo__text,.freq,.fneed,
  .onepack__price span,.rcard__meta,.revc__meta,.revc__date,.fcol__note{font-size:15px}
  .rcard__more{font-size:15px}
  label.l{font-size:15px}
  .cookie__text{font-size:14px}

  /* подписи капсом */
  .kicker,.fsoc__t{font-size:13.5px}
  .hero__kicker,.onepack__badge,.onepack__lt,.fbrand__d,.sidemark__d,
  .rcard__step,.paper__h span,.reads__list a span,.fcol b{font-size:13px}

  /* Волнистая штриховка на узком экране ложится прямо под строки
     и рябит в тексте. Пятна цвета оставляем — они фон, а не узор. */
  .hero-waves,.ab-wave,.pa-wave,.fq-wave,.fd-wave,.st-wave,.st-wave2{display:none}

  /* Снимки этапов на телефоне — полоской, а не кадром 16:9:
     четыре карточки подряд давали по 190px картинки на каждую. */
  .rcard__pic img{aspect-ratio:2.4/1}
}

/* ── Первый экран на узких телефонах ──────────────────────────
   На 320–360px описание переносится на шесть-семь строк, и кнопка
   «Записаться на встречу» уезжает к самой нижней кромке экрана —
   ровно туда, где висит плашка про куки. На 390px они расходятся,
   на 320px плашка накрывала кнопку почти целиком.

   Поднимаем кнопку, снимая воздух по всей высоте блока. Кегли трогаем
   аккуратно: описание 17px — это нижняя граница, ниже читать с руки
   уже неудобно. Проверять после правок замером, а не на глаз:
   верх плашки обязан быть ниже нижней кромки кнопки. */
@media(max-width:400px){
  .hero{padding-top:26px}
  .hero h1{margin-bottom:16px}
  .hero--shot .hero__sub{font-size:17px;line-height:1.5;margin-bottom:20px}
  .hfacts{padding-top:16px;margin-bottom:20px;gap:12px}
  .hfacts span{margin-top:2px}
}

/* Панель — лист справа, а не выпадающий список. Пунктов семь плюс
   телефон и кнопка: список из-под шапки упирался бы в нижний край. */
.drawer{position:fixed;inset:0;z-index:210}
.drawer[hidden]{display:none}
.drawer__back{position:absolute;inset:0;background:rgba(18,44,36,.44);
  opacity:0;transition:opacity .22s ease}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;
  width:min(370px,86vw);display:flex;flex-direction:column;
  background:var(--paper);border-left:1px solid var(--line);
  box-shadow:-30px 0 60px -40px rgba(20,50,42,.6);
  padding:14px clamp(20px,5vw,28px) calc(22px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .26s ease}
.drawer.is-on .drawer__back{opacity:1}
.drawer.is-on .drawer__panel{transform:none}

.drawer__x{align-self:flex-end;width:44px;height:44px;margin-bottom:6px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--ink2);cursor:pointer;border-radius:12px}
.drawer__x:hover{color:var(--ink);background:var(--teal-soft)}
.drawer__x svg{width:24px;height:24px}

.drawer__links{display:flex;flex-direction:column}
.drawer__links a{padding:14px 2px;font-size:18px;font-weight:600;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.drawer__links a:active{color:var(--accent-ink)}
/* Текущий раздел подсвечивает тот же скролл-спай, что и в шапке:
   он ищет ссылки по .nlinks a, поэтому здесь класс ставится
   скриптом панели — см. main.js. */
.drawer__links a.is-here{color:var(--accent-ink)}

.drawer__foot{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;
  align-items:flex-start;gap:4px}
.drawer__tel{font-size:21px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none}
.drawer__hours{font-size:14px;color:var(--muted)}
.drawer__cta{margin-top:14px;width:100%;justify-content:center}

/* ── кнопка «наверх» ──────────────────────────────────────────
   Правый нижний угол — зона большого пальца. Показывается после
   полутора экранов прокрутки (класс is-on ставит main.js), выше
   1200px не нужна: там шапка со ссылками всегда на виду. */
.totop{position:fixed;right:16px;bottom:calc(112px + env(safe-area-inset-bottom));
  z-index:60;width:52px;height:52px;padding:0;display:none;
  align-items:center;justify-content:center;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  box-shadow:0 18px 34px -18px rgba(20,50,42,.55);cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease}
@media(max-width:1200px){.totop{display:inline-flex}}
html:not(.js) .totop{display:none}
.totop svg{width:24px;height:24px}
.totop.is-on{opacity:1;pointer-events:auto;transform:none}
/* 112px от низа, а не 18: у самой кромки экрана кнопка попадала под
   плашку про куки (её верх на ~730px из 812) и под нижнюю панель
   браузера, а большой палец до самого угла дотягивается хуже всего.
   Одно значение работает в обоих состояниях — над плашкой остаётся
   ~30px воздуха, — поэтому отдельного правила под .cookie-on нет.
   Захочется ниже или выше — правится этой одной строкой. */

@media (prefers-reduced-motion:reduce){
  .drawer__back,.drawer__panel,.totop{transition:none}
}

/* ══ Вкладки аудиторий над шапкой ═════════════════════════════
   С появлением программы для взрослых у сайта две ветки, и
   переключатель между ними — это не ещё один пункт меню, а уровень
   выше: «для кого вообще эта страница». Поэтому он стоит отдельной
   полосой над шапкой, как вкладки браузера, а не в .nlinks.

   Вторая причина — место. На 1201–1360px ссылки шапки, кнопка
   и аватар уже занимают строку впритык (замер на 1210px: свободно
   0px). Восьмой пункт в .nlinks выталкивал бы кнопку записи.

   Полоса не липкая: при прокрутке она уезжает, а шапка остаётся.
   Цвет — тот же, что theme-color в <head>: на телефоне полоса
   продолжает тёмную строку браузера, а не спорит с ней. */
.aud{position:relative;z-index:71;background:var(--ink);color:#E4F0EA}
.aud__in{display:flex;align-items:flex-end;gap:2px;height:36px}
/* Отрицательный отступ выравнивает текст первой вкладки по знаку
   в шапке, а не по краю подложки. */
.aud__t{position:relative;display:inline-flex;align-items:center;height:29px;padding:0 16px;
  border-radius:11px 11px 0 0;font-size:14px;font-weight:600;letter-spacing:-.005em;
  color:rgba(228,240,234,.8);text-decoration:none;white-space:nowrap;
  transition:color .16s,background .16s}
.aud__t:first-child{margin-left:-16px}
.aud__t:hover{color:#fff;background:rgba(228,240,234,.09)}
.aud__t:focus-visible{outline:2px solid #8FD8B8;outline-offset:-2px}
/* Активная вкладка того же цвета, что шапка под ней, и сливается
   с ней: так читается «вы здесь», без подчёркиваний и плашек.
   Скосы по бокам — вывернутые скругления, как у вкладок браузера;
   без них вкладка выглядит наклеенной на полосу кнопкой. */
.aud__t.is-on{background:var(--paper);color:var(--ink)}
.aud__t.is-on::before,.aud__t.is-on::after{content:"";position:absolute;bottom:0;width:11px;height:11px;
  pointer-events:none}
.aud__t.is-on::before{left:-11px;background:radial-gradient(circle at 0 0,transparent 10.5px,var(--paper) 11px)}
.aud__t.is-on::after{right:-11px;background:radial-gradient(circle at 100% 0,transparent 10.5px,var(--paper) 11px)}
/* Новая ветка помечена точкой, пока о ней мало кто знает. Класс
   ставится только на неактивную вкладку: у активной ::after занят
   скосом. Через месяц-другой убрать класс из разметки. */
.aud__t--new::after{content:"";position:absolute;top:7px;right:6px;width:6px;height:6px;border-radius:50%;
  background:#E8784A}

/* На телефоне полосы нет: там первый экран выверен по пикселям
   (кнопка записи обязана оставаться выше плашки про куки, см. блок
   «Первый экран на узких телефонах»), и лишние 40px сверху это
   ломают. Переключатель живёт в мобильном меню — .drawer__aud. */
@media(max-width:760px){.aud{display:none}}

/* Полоса сдвигает первый экран вниз на свои 36px, а кнопка записи
   на главной и так стоит у нижней кромки: на 1280×800 до полосы
   её низ был на 753px, с полосой стал на 789. Половину высоты
   полосы забираем из верхнего поля первого экрана — текст там
   центрируется по высоте, и 18px сверху на глаз не заметны. */
@media(min-width:901px){
  .aud ~ .hero--shot .hcols{padding-top:calc(clamp(36px,3.8vw,60px) - 18px)}
}

/* Переключатель в мобильном меню: два сегмента в одну строку,
   над ссылками разделов. Высота сегмента — 44px, под палец. */
.drawer__aud{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 12px;
  background:var(--teal-soft);border-radius:14px}
.drawer__aud a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;
  border-radius:11px;font-size:16px;font-weight:600;color:var(--ink2);text-decoration:none;
  transition:background .16s,color .16s}
.drawer__aud a.is-on{background:var(--card);color:var(--ink);
  box-shadow:0 6px 16px -10px rgba(20,50,42,.5)}