/* Marketer School — стили сайта. Одна страница, семь секций.
   Токены — вверху, всё остальное ссылается на них. */

:root {
  --bg: #fbfaf9;
  --bg-2: #f3f1ee;
  --ink: #1b1c1b;
  --ink-2: #4f534f;
  --ink-3: #8a8e8a;
  --line: #e6e4e1;
  --green: #22593d;
  --green-2: #3e8465;
  --green-3: #38a251;
  --green-soft: #e4f0e8;
  --green-deep: #17402b;
  --green-night: #173a29;
  --mint: #b9f0c6;
  --cream: #f3eee4;
  --yellow: #f2e14a;
  --white: #ffffff;
  --paper-ink: #1f3d2b;
  /* Чернила: тёмно-синие, как у обычной шариковой ручки, — заголовок на листе
     написан ими, а не набран краской бренда. */
  --ink-pen: #1c2c4a;

  --f-sans: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Серифного шрифта больше нет: заголовки набираются жирным Manrope.
     Акцент внутри заголовка выделяется цветом и весом, а не курсивом —
     у Manrope настоящего курсива нет, браузер наклонял бы его сам. */
  --f-hand: 'Caveat', 'Comic Sans MS', cursive;
  /* Моноширинного больше нет: в тексте сайта два шрифта. Мелкие подписи
     капсом набираются тем же Manrope, разрядка держит их отдельным голосом. */

  --wrap: 1120px;
  --gap: clamp(20px, 4vw, 56px);
  --radius: 32px;
  --dock-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading, body.menu-open, body.lead-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; }
.mono { font-family: var(--f-sans); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- заголовки и рукописные пометки ---------- */
.title {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.9vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 15em;
}
.title em { font-style: normal; font-weight: 800; color: var(--green-3); display: block; }
.title--center { margin-inline: auto; text-align: center; }
.title--left { text-align: left; margin: 0; }

.note {
  position: absolute;
  font-family: var(--f-hand);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.05;
  color: var(--ink-3);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) rotate(var(--rot, -8deg));
  transition: opacity 0.9s var(--ease) 0.35s, transform 0.9s var(--ease) 0.35s;
  z-index: 2;
}
.is-inview .note { opacity: 1; transform: translateY(0) rotate(var(--rot, -8deg)); }
.note--light { color: rgba(243, 238, 228, 0.7); }
.note__arrow { position: absolute; width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.note__arrow--up { left: calc(100% - 14px); top: -46px; }
.note__arrow--down { right: calc(100% - 10px); top: 100%; }
@media (max-width: 900px) {
  /* На телефоне пометки становятся строкой под заголовком, как у референса. */
  .note { position: relative; display: block; inset: auto !important; margin: 14px auto 0; width: max-content; opacity: 1; transform: rotate(-6deg); font-size: 1.15rem; }
  /* Подпись стоит строкой под заголовком, значит стрелка должна вести вверх, к
     нему. Прежние правила уводили её вниз-влево — она перечёркивала последнюю
     строку заголовка и показывала в пустоту. Слева от текста стрелка идёт
     вверх-вправо, справа — зеркалом вверх-влево; обе целят в заголовок. */
  .note__arrow--up { right: calc(100% + 4px); left: auto; top: -16px; width: 30px; height: 30px; }
  .note__arrow--down { left: calc(100% + 4px); right: auto; top: -16px; width: 30px; height: 30px; transform: scaleY(-1); }
  .note--scene-a { display: none; }
  .scene__head .note { margin-top: 18px; }
  /* В блоке ролей стрелка заметки стоит над её текстом и без отступа задевала заголовок. */
  .careers__head .note { margin-top: 36px; }
}

/* ---------- кнопки, чипы ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform 0.35s var(--ease), background 0.3s, color 0.3s;
}
.btn:hover { transform: translateY(-2px); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--light { background: var(--cream); color: var(--green-deep); }
.btn--light:hover { background: var(--yellow); }
.btn--green { background: var(--green-3); color: var(--white); }
.btn--ghost { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--block { width: 100%; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 0.74rem; font-weight: 600; }
.chip--green { background: var(--green-soft); color: var(--green); }

/* ---------- зерно ---------- */
.loader__grain, .menu__grain, .join__grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px; opacity: 0.32; mix-blend-mode: soft-light;
}

/* ---------- прелоадер ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--green); display: grid; place-items: center; transition: opacity 0.7s var(--ease), visibility 0.7s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__logo { width: min(52vw, 360px); opacity: 0; transform: translateY(12px) scale(0.96); animation: loaderIn 1.1s var(--ease) 0.15s forwards; }
.loader__bar { position: absolute; left: 50%; bottom: 12%; width: 120px; height: 2px; transform: translateX(-50%); background: rgba(243, 238, 228, 0.25); overflow: hidden; border-radius: 2px; }
.loader__bar i { display: block; height: 100%; width: 40%; background: var(--cream); animation: loaderBar 1.2s ease-in-out infinite; }
@keyframes loaderIn { to { opacity: 1; transform: none; } }
@keyframes loaderBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------- плавающая плашка снизу ---------- */
.dock {
  position: fixed; left: 50%; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 8px; padding: 8px;
  border-radius: 999px;
  background: rgba(236, 236, 232, 0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transform: translate(-50%, 140%);
  transition: transform 0.8s var(--ease);
}
.is-ready .dock { transform: translate(-50%, 0); }
.menu-open .dock { z-index: 70; }
.dock__orb {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, #7fd39a, var(--green) 65%, var(--green-deep));
  color: var(--cream); font-weight: 800; font-size: 0.95rem; letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.dock__cta {
  min-width: min(320px, 46vw); height: 48px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 26px; border-radius: 999px; background: var(--ink); color: var(--white);
  font-weight: 600; font-size: 1rem; transition: background 0.3s;
}
.dock__cta:hover { background: var(--green); }
.dock__burger, .dock__lang { width: 48px; height: 48px; border-radius: 50%; background: var(--white); display: grid; place-items: center; align-content: center; gap: 5px; box-shadow: inset 0 0 0 1px var(--line); }
.dock__burger span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.35s var(--ease); }
.menu-open .dock__burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-open .dock__burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.dock__lang { font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em; }

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

   Флаг — того языка, на который кнопка переключит, то есть тот же, что и
   подпись на ней. Полосы рисуются градиентом с резкими переходами: картинка
   ради двух флагов — лишний запрос, а svg в разметке пришлось бы дублировать.

   Подпись всегда попадает на среднюю полосу — у России синюю, у Узбекистана
   белую, — поэтому цвет букв задан для каждого флага свой. Считать его
   автоматически не из чего: полоса под текстом зависит от флага, а не от темы. */
html[lang='uz'] .dock__lang {
  background: linear-gradient(180deg, #ffffff 0 33.3%, #0039a6 33.3% 66.6%, #d52b1e 66.6% 100%);
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
html[lang='ru'] .dock__lang {
  background: linear-gradient(180deg, #0099b5 0 31%, #ce1126 31% 34%, #ffffff 34% 66%, #ce1126 66% 69%, #1eb53a 69% 100%);
  color: var(--ink);
}
/* Обод ярче, чем у соседних кнопок: белая полоса флага сливалась бы с плашкой. */
html[lang='uz'] .dock__lang,
html[lang='ru'] .dock__lang {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 2px 10px -4px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s var(--ease);
}
.dock__lang:hover { transform: scale(1.06); }
/* Узбекская надпись на кнопке — «Batafsil ma’lumot olish» — вдвое длиннее русской
   и на телефоне переносилась на две строки, растягивая плашку. Кнопка держит одну
   строку, кегль подобран по самому длинному варианту. */
@media (max-width: 640px) { .dock { bottom: 14px; gap: 6px; padding: 6px; } .dock__cta { min-width: 0; padding: 0 14px; font-size: 0.82rem; white-space: nowrap; } .dock__orb, .dock__burger, .dock__lang { width: 44px; height: 44px; } }

/* ---------- меню ---------- */
.menu { position: fixed; inset: 0; z-index: 55; background: var(--green); color: var(--cream); display: grid; place-items: center; padding: 40px var(--gap) calc(var(--dock-h) + 40px); overflow: auto; opacity: 0; transition: opacity 0.45s var(--ease); }
.menu:not([hidden]) { opacity: 1; }
/* Скрытое меню не должно перехватывать клики: display остаётся grid ради плавного
   появления, поэтому невидимость и отключение указателя задаются явно. */
.menu[hidden] { visibility: hidden; pointer-events: none; transition: opacity 0.45s var(--ease), visibility 0s 0.45s; }
.menu__inner { position: relative; width: min(100%, 640px); display: grid; gap: 28px; }
.menu__eyebrow { color: rgba(243, 238, 228, 0.7); }
.menu__title { font-family: var(--f-sans); font-weight: 800; font-size: clamp(1.75rem, 5.2vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; }
.menu__title em { font-style: normal; color: var(--mint); }
/* Та же строка, что и в подвале: заголовок зовёт записаться, а что делать
   руками — не говорил. */
.menu__lead { max-width: 30em; margin-top: -16px; font-size: 1rem; line-height: 1.4; color: rgba(243, 238, 228, 0.8); }
.menu__contacts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; color: rgba(243, 238, 228, 0.85); }

/* ---------- формы ---------- */
.form { display: grid; gap: 12px; }
.form label { display: block; }
/* Та же беда, что была у формы в подвале: на тёмно-зелёном поля читались как
   строчки текста, а не как места для ввода. Рамка и заливка заметнее, в фокусе
   мятное кольцо. */
.form input { width: 100%; min-height: 54px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.14); color: var(--cream); font: inherit; font-weight: 500; outline: none; caret-color: var(--mint); transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; }
.form input::placeholder { color: rgba(243, 238, 228, 0.6); }
.form input:focus { border-color: var(--mint); background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 3px rgba(185, 240, 198, 0.22); }
.form input.is-invalid { border-color: #ffb3a1; }
.form .btn { min-height: 54px; }
.form__msg { min-height: 1.4em; font-size: 0.9rem; font-weight: 600; color: var(--mint); text-align: center; }
.form__msg.is-error { color: #ffc4b5; }

/* ---------- 1. HERO ---------- */
/* Фон секции — фон страницы: при уходе сцена сжимается, и вокруг неё видна страница. */
.hero { position: relative; height: 410vh; background: var(--bg); }
.hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; transform-origin: 50% 50%; will-change: transform; }
.hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster { object-fit: cover; object-position: 50% 52%; }
.hero__canvas { opacity: 0; transition: opacity 0.5s; }
.hero__canvas.is-ready { opacity: 1; }
.hero__copy { position: absolute; pointer-events: none; opacity: 0; will-change: opacity, transform; }
/* align-content: заголовок и строка предложения должны стоять одной группой по
   центру листа. Без него сетка растягивает две строки на всю высоту экрана, и
   подпись уезжает к нижнему краю стола.
   Поворот — по листу в кадре: он лежит на столе под −11°, и текст, написанный
   на нём, должен лежать так же. Угол снят с самого кадра (assets/frames), при
   любой обрезке он не меняется, потому что кадр только масштабируется. */
/* --sheet — ширина листа на экране. Кадр 1920×1080 вписывается по большей
   стороне, лист занимает в нём 551 px, отсюда max(28.7vw, 51vh). Всё, что
   написано на листе, меряется от этой величины, иначе на одном размере окна
   надпись занимает лист целиком, а на другом теряется в его середине. */
.hero__paper { --sheet: max(28.7vw, 51vh); inset: 0; display: grid; place-items: center; align-content: center; text-align: center; padding: 0 var(--gap); }
/* Наклон — по листу в кадре: верхняя грань листа поднимается вправо, то есть
   лист повёрнут против часовой, и в CSS это отрицательный угол. Знак здесь уже
   путался: замер по «первой светлой строке» ловил белый провод наушников выше
   листа и давал плюс. Проверять глазами по кадру, а не измерением.
   Живёт на отдельной обёртке, потому что на самом блоке скрипт держит свой
   transform для появления и наезда. */
/* Смещение — потому что лист в кадре стоит не по центру экрана: его середина
   на 1,2 % левее и на 1,8 % выше центра сцены (посчитано по кадру). */
.hero__sheet { display: grid; justify-items: center; transform: translate(calc(var(--sheet) * -0.04), calc(var(--sheet) * -0.0345)) rotate(-11deg); }

/* Текст лежит на листе в кадре, а не на всём экране: ширина ограничена листом,
   иначе строки вылезают на стол по обе стороны.
   Шрифт рукописный: заголовок должен читаться как надпись чернилами на этой
   бумаге, а не как вёрстка поверх фотографии. Caveat уже стоит в проекте для
   пометок, знает кириллицу и латиницу и остаётся разборчивым — витиеватые
   прописные на четырёх строках заголовка читать невозможно. */
.hero__h1 { font-family: var(--f-hand); font-weight: 600; color: var(--ink-pen); font-size: calc(var(--sheet) * 0.098); line-height: 1.02; letter-spacing: 0; display: grid; justify-items: center; max-width: calc(var(--sheet) * 0.55); }
.hero__line { display: block; opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.is-ready .hero__line { opacity: 1; transform: none; }
.is-ready .hero__line:nth-child(2) { transition-delay: 0.12s; }
.is-ready .hero__line:nth-child(3) { transition-delay: 0.24s; }
.is-ready .hero__line:nth-child(4) { transition-delay: 0.36s; }
/* Строки заголовка переносятся сами по ширине листа. Балансировка не даёт
   последнему слову фразы повиснуть отдельной строкой. */
.hero__line { text-wrap: balance; }
.hero__accent { font-style: normal; color: var(--green); font-size: 1.14em; margin-top: 0.04em; font-weight: 700; }
/* Строка под заголовком написана той же рукой на том же листе, поэтому шрифт
   и чернила общие, только мельче и бледнее. */
.hero__solved { inset: 0; display: grid; place-items: center; text-align: center; padding: 0 var(--gap); }
/* Слова лесенкой: первое у левого края, второе по центру, третье у правого.
   Лесенка меряется шириной самой фразы (em), а не экрана: иначе на широком
   мониторе крайние слова расходились по углам, а во фразе из четырёх слов
   (узбекский) последнее уезжало за край. Группа целиком стоит по центру. */
.hero__solved p { display: inline-grid; justify-self: center; width: auto; max-width: 92vw; justify-items: center; font-family: var(--f-sans); font-weight: 800; font-size: clamp(2.4rem, 5.4vw, 5rem); line-height: 0.94; letter-spacing: -0.04em; color: var(--yellow); text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35); }
.hero__solved .w { display: block; will-change: transform; }
/* Лесенка мелкая и вокруг центра: слова должны читаться одной фразой. Раньше
   первое слово стояло у левого края, а остальные у правого, и оно выглядело
   отдельно от всего остального. Шаг в em, поэтому держится при любом кегле.
   Отсчёт идёт от середины фразы: номер слова и их число ставит скрипт. Жёсткие
   значения на позиции 1–6 были посчитаны под четыре слова, и фраза из трёх
   уезжала влево — здесь она центрируется сама. */
.hero__solved .w { justify-self: center; margin-left: calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 0.75em); }
@media (max-width: 900px) { .hero__solved p { max-width: 94vw; font-size: clamp(1.9rem, 9.6vw, 3.6rem); line-height: 0.98; } }
/* Вертикальный кадр показывает стол целиком, и лист в нём занимает четверть
   ширины — заголовок на него не встаёт. Поэтому на телефоне текст живёт не на
   листе, а ниже, на свободном дереве стола: сцена сверху, обещание под ней.
   На десктопе лист крупный, и там всё остаётся на нём. */
@media (max-width: 860px) {
  /* На телефоне текст лежит не на листе, а на дереве стола, поэтому наклон по
     бумаге здесь ни к чему — строки просто прямые. */
  .hero__paper { align-content: end; padding-bottom: 22svh; }
  .hero__sheet { transform: none; }
  .hero__h1 { max-width: min(88vw, 420px); font-size: clamp(1.5rem, 7.2vw, 2.5rem); }
}
.hero__end { inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; text-align: center; padding: 0 var(--gap) 8vh; }
/* Стол в кадре светлый, и белый текст на нём терялся. Затемнение живёт внутри
   блока с текстом: оно появляется и гаснет вместе с ним, отдельной анимации не
   нужно. Мягкий эллипс, а не сплошная плёнка, — кадр остаётся виден. */
.hero__end::before { content: ''; position: absolute; inset: -10vh -10vw; z-index: -1; pointer-events: none; background: radial-gradient(58% 46% at 50% 44%, rgba(10, 14, 11, 0.52), rgba(10, 14, 11, 0.3) 58%, rgba(10, 14, 11, 0) 100%); }
/* Третий экран — три цифры рынка. Цифра крупная и светлая, подпись под ней
   мельче: на кадре стола читается только контраст размера, не цвета. */
.hero__statspre { font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.3rem); letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px); width: min(100%, 1000px); margin-top: clamp(6px, 1.5vw, 18px); }
.hero__stats li { display: grid; gap: 8px; justify-items: center; text-align: center; }
.hero__stats b { font-weight: 800; font-size: clamp(1.5rem, 3.1vw, 2.8rem); line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; color: var(--white); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45); }
.hero__stats span { max-width: 14em; font-weight: 500; font-size: clamp(0.82rem, 1.25vw, 1.05rem); line-height: 1.3; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
/* На телефоне три колонки не помещаются — цифры встают столбиком. */
@media (max-width: 760px) {
  .hero__stats { grid-template-columns: 1fr; gap: 18px; }
  .hero__stats span { max-width: 20em; }
}
/* Перенос в заметке задан в словаре: строка «всё за 8–10 недель» рвалась
   посреди диапазона и в конце висело «8–». */
.hero__scroll { position: absolute; left: 50%; bottom: calc(var(--dock-h) + 34px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--ink); font-family: var(--f-sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none; transition: opacity 0.4s; }
.hero__scroll i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: scrollDot 1.4s ease-in-out infinite; }
@keyframes scrollDot { 0%, 100% { transform: translateY(-2px); opacity: 1; } 50% { transform: translateY(2px); opacity: 0.5; } }
/* Телефонные правки плашки живут здесь, а не в общем мобильном блоке выше:
   специфичность у них одна с базовым правилом, и всё, что стоит выше по файлу,
   проигрывает. На этом уже дважды ломались стрелки подписей. */
/* Плашка ложилась поверх подписи под заголовком и закрывала её середину: между
   нижним краем коврика и доком на телефоне полосы на обе не хватает. Плашка
   уходит ближе к доку. */
@media (max-width: 860px) { .hero__scroll { bottom: calc(var(--dock-h) + 14px); } }
/* На низком экране не хватает и так: заголовок налезал на коврик, а подпись —
   на плашку. Подсказка «листай» здесь лишняя (палец и так листает), и текст
   занимает освободившееся место. */
@media (max-height: 640px) {
  .hero__scroll { display: none; }
  .hero__paper { padding-bottom: calc(var(--dock-h) + 16px); }
}

/* ---------- 2. CAREERS ---------- */
.careers { padding: clamp(90px, 14vw, 180px) 0 clamp(70px, 10vw, 140px); }
.careers__head { position: relative; margin-bottom: clamp(36px, 5vw, 72px); }
/* Привязка к низу заголовка, а не к доле его высоты: у узбекского заголовка
   три строки вместо двух, и подпись садилась прямо на вторую строку. */
.note--careers { left: 6%; top: auto; bottom: -6px; --rot: -10deg; }
.roles { border-top: 1px solid var(--line); max-width: 800px; margin: 0 auto; }
.roles__row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: center; padding: 22px 20px; border-bottom: 1px solid var(--line); transition: background 0.35s, opacity 0.35s; }
.roles__row h3 { font-family: var(--f-sans); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -0.025em; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.roles__row h3 .tag { font-family: var(--f-sans); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-3); }
.roles__row p { color: var(--ink-3); font-size: 0.95rem; font-weight: 500; line-height: 1.45; }
.roles:hover .roles__row { opacity: 0.45; }
.roles .roles__row:hover { opacity: 1; background: var(--white); }
.roles .roles__row:hover p { color: var(--ink-2); }
/* Под списком профессий стояла мелкая серая сноска с источником. Теперь там
   ответ на заголовок — крупной строкой, а не примечанием. */
.careers__after { margin: clamp(44px, 6vw, 80px) auto 0; max-width: 20em; text-align: center; font-family: var(--f-sans); font-weight: 800; font-size: clamp(1.4rem, 2.7vw, 2.4rem); line-height: 1.2; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
@media (max-width: 760px) { .roles__row { grid-template-columns: 1fr; gap: 8px; padding: 22px 6px; } }

/* ---------- 3. SCENE ---------- */
.scene { position: relative; height: 500vh; background: var(--bg); }
.scene__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.scene__head { position: absolute; left: 0; right: 0; top: clamp(60px, 11vh, 120px); padding: 0 var(--gap); z-index: 1; }
/* Заголовок этого блока — целое предложение, а не короткая фраза: при общем
   кегле он занимал шесть строк и наезжал на окно с городом. */
.scene__head .title { max-width: 17em; font-size: clamp(1.5rem, 3.1vw, 2.9rem); }
/* Привязка к низу заголовка, а не к доле его высоты: число строк меняется от
   языка к языку, и стрелка то втыкалась в буквы, то висела в пустоте. */
.note--scene-a { left: 15%; top: auto; bottom: -84px; --rot: -8deg; }
.note--scene-b { right: 14%; top: 14%; --rot: 6deg; }
.scene__window { position: absolute; left: 0; top: 0; overflow: hidden; border-radius: var(--radius); background: var(--green-soft); z-index: 2; will-change: transform, width, height; box-shadow: 0 40px 100px -40px rgba(23, 64, 43, 0.4); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.scene__city { position: absolute; left: 0; top: 0; max-width: none; height: auto; will-change: transform; }
.scene__cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.scard {
  position: absolute; right: clamp(20px, 9.5vw, 136px); top: 50%;
  width: min(460px, calc(100vw - 40px)); min-height: min(560px, 70svh);
  padding: 34px 34px 30px; border-radius: 32px; background: var(--white);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.45);
  display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; align-content: start; gap: 18px; text-align: center;
  transform: translateY(120vh); will-change: transform, opacity;
}
.scard__mark { width: 64px; height: 64px; border-radius: 18px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.scard__role { font-family: var(--f-sans); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.scard__role small { display: block; margin-top: 6px; color: var(--green-3); font-size: 0.66rem; }
.scard__task { align-self: center; font-weight: 500; font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1.32; letter-spacing: -0.015em; }
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tools li { padding: 8px 14px; border-radius: 999px; background: var(--bg-2); font-size: 0.85rem; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.tools li::before { content: ''; width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--green-3), var(--green-deep)); }
@media (max-width: 640px) { .scard { right: 18px; left: 18px; width: auto; min-height: min(424px, 50svh); padding: 30px 26px 28px; gap: 14px; border-radius: 32px; } .scard__task { font-size: 1.25rem; } }

/* ---------- 4. PORTFOLIO ---------- */
.pf { position: relative; height: 380vh; background: var(--bg); }
.pf__stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 40% 60%; overflow: hidden; }
/* Содержимое въезжает снизу, пока секция прилипает: у референса панель и заголовок
   стартуют на ~320px ниже и доезжают на место к 12 % прокрутки. */
.pf__left, .pf__right { will-change: transform; }
.pf__left { position: relative; }
.pf__item { position: absolute; left: clamp(24px, 7vw, 108px); right: 24px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); }
.pf__item.is-active { opacity: 1; }
.pf__item .title { text-align: left; margin: 0; max-width: 10em; text-wrap: pretty; }
.pf__item .note { position: relative; display: inline-block; margin-top: 74px; margin-left: 12%; opacity: 1; transform: rotate(-8deg); }
/* Стрелка стоит слева от подписи и ведёт вправо-вверх, к заголовку. Зеркальная
   (как было) показывала влево-вверх — мимо заголовка, в поле. */
.pf__item .note__arrow--up { left: auto; right: calc(100% + 6px); top: -48px; }
.pf__right { position: relative; }
.pf__strip { position: absolute; left: 20px; top: 20px; width: min(824px, calc(100% - 40px)); will-change: transform; }
.panel { position: relative; width: 100%; aspect-ratio: 824 / 836; max-height: calc(100svh - 40px); border-radius: 40px; overflow: hidden; margin-bottom: 20px; isolation: isolate; background: var(--bg-2); }
.panel__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(0.9) brightness(1.05); }
.panel__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%); }
.mock { position: absolute; background: var(--white); border-radius: 24px; box-shadow: 0 30px 60px -24px rgba(23, 64, 43, 0.4); }
.mock--doc { left: 6%; top: 10%; width: 46%; height: 62%; background: #1e2422; padding: 18px; display: grid; gap: 10px; align-content: start; }
.mock__bar { display: flex; gap: 6px; }
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.mock__line { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); width: 70%; }
.mock__line--w { width: 90%; } .mock__line--s { width: 45%; }
.mock__thumb { margin-top: auto; align-self: end; width: 100%; aspect-ratio: 16/9; border-radius: 14px; background: linear-gradient(135deg, #2f7550, #17402b); display: grid; place-items: center; color: var(--cream); font-weight: 800; font-size: 1.6rem; }
.mock--list { right: 5%; top: 8%; width: 54%; padding: 20px; display: grid; gap: 12px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 1rem; }
.card__list { display: grid; gap: 7px; }
.card__list li { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); padding: 8px 10px; border-radius: 12px; background: var(--bg); }
.card__list li::before { content: ''; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--green-soft), #cfe6d6); flex: none; box-shadow: inset 0 0 0 2px var(--green-2); }
.card__more { font-size: 0.85rem; font-weight: 700; color: var(--green); }
.pill { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--white); box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.4); font-size: 0.95rem; font-weight: 600; color: var(--ink-2); z-index: 2; }
.pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--green-3); }
.bubble { position: absolute; width: 96px; height: 96px; border-radius: 50%; background: var(--white); display: grid; place-items: center; font-weight: 800; color: var(--green); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4); z-index: 1; }
.bubble--a { left: 6%; top: 48%; } .bubble--b { right: 4%; top: 56%; }
/* Второй экран ленты: две колонки вместо карточки профиля. Слева — обычный
   кандидат на ту же вакансию, справа — выпускник; строки стоят парами, поэтому
   сравнение читается по горизонтали. */
.mock--vs { left: 50%; top: 12%; width: 84%; transform: translateX(-50%); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; z-index: 2; }
.vs__col { padding: clamp(16px, 2vw, 26px); display: grid; gap: 14px; align-content: start; }
.vs__col--win { background: var(--green); color: var(--cream); }
.vs__head { font-weight: 700; font-size: clamp(0.82rem, 1.1vw, 1rem); letter-spacing: -0.01em; color: var(--ink-3); }
.vs__col--win .vs__head { color: var(--mint); }
.vs__list { display: grid; gap: 10px; }
.vs__list li { position: relative; padding-left: 22px; font-size: clamp(0.76rem, 0.95vw, 0.92rem); line-height: 1.35; color: var(--ink-2); }
.vs__col--win .vs__list li { color: var(--cream); }
/* Крестик и галочка рисуются рамками: своих иконок в этом блоке нет, а шрифтовые
   символы прыгают по базовой линии. */
.vs__list li::before { content: ''; position: absolute; left: 0; top: 0.36em; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.vs__col--win .vs__list li::before { box-shadow: none; width: 12px; height: 7px; border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint); border-radius: 0; transform: rotate(-45deg); top: 0.3em; }
@media (max-width: 860px) {
  /* Колонки встают друг под друга, и десять строк перестают помещаться в панель.
     Блок центрируется по ней, а отступы и промежутки ужимаются под её высоту. */
  .mock--vs { width: 92%; top: 50%; transform: translate(-50%, -50%); grid-template-columns: 1fr; }
  .vs__col { padding: 10px 14px; gap: 7px; }
  .vs__head { font-size: 0.78rem; }
  .vs__list { gap: 5px; }
  .vs__list li { padding-left: 19px; font-size: 0.73rem; line-height: 1.3; }
  .vs__list li::before { top: 0.3em; width: 9px; height: 9px; }
  .vs__col--win .vs__list li::before { width: 10px; height: 6px; }
}
.invite { position: absolute; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--white); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.35); width: 62%; z-index: 1; }
.invite--a { left: 6%; top: 7%; } .invite--b { left: 4%; bottom: 8%; }
.invite__date { width: 52px; height: 56px; border-radius: 12px; background: var(--bg-2); display: grid; place-items: center; align-content: center; font-weight: 800; font-size: 1.1rem; line-height: 1; }
.invite__date small { font-size: 0.6rem; font-weight: 600; color: var(--ink-3); }
.invite b { display: block; font-size: 0.88rem; margin-bottom: 4px; }
.mock--interview { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74%; padding: 26px; display: grid; gap: 14px; justify-items: center; text-align: center; z-index: 2; }
.interview__avatars { display: flex; align-items: center; }
.card__title { font-size: 1.25rem; letter-spacing: -0.02em; }
.card__dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.card__dl div { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: var(--bg); }
.card__dl dt { font-size: 0.66rem; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.card__dl dd { font-weight: 800; font-size: 0.95rem; }
.card__note { font-size: 0.78rem; color: var(--ink-3); }
@media (max-width: 860px) {
  .pf { height: 420vh; }
  .pf__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .pf__left { height: 36svh; }
  .pf__item { left: 20px; right: 20px; top: 50%; text-align: center; }
  .pf__item .title { font-size: clamp(1.5rem, 6.4vw, 2.2rem); max-width: none; }
  .pf__item .title { text-align: center; }
  .pf__item .note { display: block; margin: 12px auto 0; width: max-content; }
  /* Подпись встала по центру под заголовком, и прежняя стрелка (её место задано
     ниже по файлу, поэтому переопределять надо здесь) втыкалась в буквы. */
  .pf__item .note__arrow--up { right: calc(100% + 4px); left: auto; top: -14px; width: 30px; height: 30px; transform: none; }
  /* Правая колонка ровно с одну панель: следующая не выглядывает снизу. */
  .pf__right { overflow: hidden; height: min(calc((100vw - 24px) * 836 / 824), 64svh); }
  .pf__strip { left: 12px; width: calc(100% - 24px); top: 0; }
  .panel { max-height: 64svh; border-radius: 26px; margin-bottom: 12px; }
  .mock--doc { display: none; }
  .mock--list { left: 6%; right: 6%; width: auto; top: 8%; }
  .card__list li:nth-child(n+6) { display: none; }
  .mock--vs { border-radius: 18px; }
  .bubble { display: none; }
  .mock--interview { width: 90%; }
  .invite { width: 80%; }
}

/* ---------- 5. COURSES ---------- */
.courses { padding: clamp(90px, 13vw, 170px) 0; }
.courses__sub { margin: 18px auto 0; max-width: 40em; text-align: center; color: var(--ink-2); font-weight: 500; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.courses__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(32px, 5vw, 56px); }
.course { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); display: grid; gap: 18px; align-content: start; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.course:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(23, 64, 43, 0.35); }
.course--pro { background: var(--green); color: var(--cream); border-color: var(--green); }
.course__level { font-family: var(--f-sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-3); }
.course--pro .course__level { color: var(--mint); }
.course__name { font-family: var(--f-sans); font-weight: 800; font-size: clamp(1.6rem, 2.7vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.05; }
/* Одна строка о курсе — с титульного слайда презентации. Стоит под названием
   и объясняет, чем этот курс отличается, до перечня цифр. */
.course__tagline { margin-top: -8px; font-weight: 500; font-size: 1rem; line-height: 1.35; color: var(--ink-2); }
.course--pro .course__tagline { color: rgba(243, 238, 228, 0.8); }
.course__points { display: grid; gap: 10px; }
.course__points li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; font-size: 1rem; }
.course__points li::before { content: ''; flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--green-3); }
.course--pro .course__points li::before { background: var(--mint); }
/* Цена — самое частое, за чем приходят на страницу курса. Стоит между
   пунктами и кнопкой, у Pro — мятной, как остальной текст на тёмной карточке. */
.course__price { display: grid; justify-items: start; gap: 2px; font-family: var(--f-sans); font-weight: 800; letter-spacing: -0.035em; color: var(--green); }
.course__price s { position: relative; font-size: 1.25rem; color: var(--ink-2); text-decoration: none; }
/* Черта рисуется отдельно, чтобы быть красной при сером тексте: у line-through
   цвет всегда совпадает с текстом. */
.course__price s::after { content: ''; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; border-radius: 2px; background: #d63b2a; transform: rotate(-3deg); }
.course__price b { font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
/* Приписка к цене — тем же шрифтом и кеглем, что описание курса под названием. */
.course__price i { font-family: var(--f-sans); font-style: normal; font-weight: 500; font-size: 1rem; line-height: 1.35; color: var(--ink-2); }
.course--pro .course__price i { color: rgba(243, 238, 228, 0.8); }
.course--pro .course__price { color: var(--mint); }
.course--pro .course__price s { color: rgba(243, 238, 228, 0.7); }
.course--pro .course__price s::after { background: #ff7a66; }
.course .btn { justify-self: start; }
.courses__common { margin-top: 26px; text-align: center; }
@media (max-width: 760px) { .courses__grid { grid-template-columns: 1fr; } }

/* ---------- 6. COST ---------- */
.cost { position: relative; height: 300vh; background: var(--bg); }
.cost__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.cost__cloud { position: absolute; left: 50%; top: 50%; width: min(1200px, 96vw); height: min(800px, 80svh); transform: translate(-50%, -50%) scale(0.001); transform-origin: 50% 50%; will-change: transform, opacity; opacity: 0; }
/* Призрачной копии облака у референса нет: до появления и после ухода панелей экран чистый. Элемент оставлен в разметке на случай возврата, но скрыт. */
.cost__cloud--ghost { display: none; }
.cpanel { position: absolute; width: min(var(--wpx), 42%); padding: 16px 18px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 3px rgba(80, 180, 110, 0.22), 0 0 46px rgba(80, 180, 110, 0.35); display: grid; gap: 8px; }
.cpanel b { font-size: 0.86rem; letter-spacing: -0.01em; }
.cpanel span { font-size: 0.74rem; color: var(--ink-3); font-weight: 600; }
.cpanel i { display: block; height: 6px; border-radius: 6px; background: var(--green-soft); position: relative; overflow: hidden; }
.cpanel i::after { content: ''; position: absolute; inset: 0; width: var(--w); background: var(--green-3); border-radius: 6px; }
.cpanel u { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-items: end; text-decoration: none; height: 32px; }
.cpanel u b { display: block; height: var(--h, 20px); border-radius: 4px; background: var(--green-soft); }
.cost__center { position: relative; z-index: 2; text-align: center; padding: 0 var(--gap); display: grid; justify-items: center; gap: 6px; }
.cost__pre { font-family: var(--f-sans); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.8rem); letter-spacing: -0.035em; }
.cost__big { font-weight: 800; font-size: clamp(4rem, 12vw, 10.5rem); line-height: 1; letter-spacing: -0.05em; color: var(--green-3); }
.cost__note { font-family: var(--f-hand); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--ink-3); transform: rotate(-3deg); }

/* ---------- 7. JOIN (футер) ---------- */
/* Корень футера светлый, как страница: тёмная подложка с сеткой начинается слоем
   ниже белой полосы. Иначе на дробной границе секций просвечивала тёмная линия. */
.join { position: relative; background: var(--bg); color: var(--cream); padding: 260px 0 40px; overflow: hidden; }
.join::before { content: ''; position: absolute; left: 0; right: 0; top: 140px; bottom: 0; background: var(--green-night);
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px; }
.join__grain { top: 140px; }
/* Белая «страница» сверху заканчивается загнутым правым нижним углом (dog-ear):
   треугольный клапан с тенью, под ним проступает зелёная подложка футера. */
.join__top { position: absolute; left: 0; right: 0; top: -1px; height: 141px; background: var(--bg); z-index: 3; }
.join__curl { position: absolute; right: 0; bottom: 0; width: 120px; height: 120px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='.6' stop-color='%23f3f1ed'/><stop offset='1' stop-color='%23cfcbc3'/></linearGradient><filter id='s' x='-30%' y='-30%' width='160%' height='160%'><feGaussianBlur stdDeviation='4'/></filter></defs><path d='M120 48 L48 120 L120 120 Z' fill='%23173a29'/><path d='M114 42 L42 114 Q42 42 114 42 Z' fill='rgba(0,0,0,.38)' filter='url(%23s)'/><path d='M120 48 L48 120 Q48 48 120 48 Z' fill='url(%23g)'/></svg>") no-repeat center / 100% 100%; }
.join__inner { position: relative; z-index: 2; width: min(100% - 2 * var(--gap), 760px); margin: 0 auto; display: grid; justify-items: center; gap: 22px; text-align: center; }
.join__title { font-family: var(--f-sans); font-weight: 800; font-size: clamp(2.2rem, 4.4vw, 4rem); max-width: 14em; margin-inline: auto; line-height: 1.05; letter-spacing: -0.02em; color: var(--white); text-wrap: balance; }
.join__title em { font-style: normal; color: var(--mint); }
/* Строка между заголовком и формой: заголовок зовёт записаться, а что делать
   руками — не говорил. */
.join__lead { max-width: 30em; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.4; color: rgba(243, 238, 228, 0.8); }
.note--join-a { left: -36%; top: 76%; --rot: -8deg; }
.note--join-b { right: -34%; top: 76%; --rot: 8deg; }
/* Подпись стоит справа от формы, поэтому стрелка идёт от её левого края
   влево-вверх — к форме. Зеркало по вертикали разворачивает «вниз-влево» в
   «вверх-влево»; полный разворот, который был раньше, показывал вправо в пустоту. */
.note--join-b .note__arrow--down { right: calc(100% - 10px); left: auto; top: -46px; transform: scaleY(-1); }
/* На телефоне подписи встают строками между заголовком и формой. Правило ниже
   должно идти после десктопного: у них одинаковый вес, и решает порядок —
   в общем мобильном блоке выше по файлу оно проигрывало. Подпись «сначала
   проект» стоит прямо над формой, поэтому её стрелка единственная смотрит вниз. */
@media (max-width: 900px) {
  .note--join-b .note__arrow--down { left: calc(100% + 4px); right: auto; top: auto; bottom: -12px; width: 30px; height: 30px; transform: none; }
  .note--join-b { margin-bottom: 26px; }
}
.joinform { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 6px; width: min(100%, 640px); padding: 6px; border-radius: 999px; background: var(--white); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.5); margin-top: 12px; }
.joinform label { display: block; }
/* Поля видно как поля. Раньше они были прозрачные и без границ: на белой
   плашке подсказки «Имя» и «Телефон» читались как подпись под кнопкой, а не как
   место для ввода. Своя заливка, рамка и зелёное кольцо в фокусе — три обычных
   признака того, что сюда можно писать. */
.joinform input { width: 100%; min-height: 52px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font: inherit; font-weight: 500; color: var(--ink); outline: none; caret-color: var(--green-3); transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.joinform input::placeholder { color: var(--ink-3); }
.joinform input:hover { background: var(--white); }
.joinform input:focus { background: var(--white); border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(62, 132, 101, 0.25); }
.joinform input.is-invalid { border-color: #ff9a80; box-shadow: 0 0 0 3px rgba(255, 154, 128, 0.3); }
.joinform__btn { min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 700; white-space: nowrap; transition: background 0.3s; }
.joinform__btn:hover { background: var(--green-3); }
.join__status { color: rgba(243, 238, 228, 0.75); }
.join__disclaimer { font-size: 0.85rem; color: rgba(243, 238, 228, 0.55); max-width: 40em; }
.join__bottom { position: relative; z-index: 2; width: min(100% - 2 * var(--gap), 1320px); margin: 160px auto 0; display: grid; grid-template-columns: auto 1fr auto; gap: 16px 32px; align-items: center; font-size: 0.9rem; }
.join__pill { padding: 12px 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-weight: 600; color: var(--cream); }
.join__pill:hover { background: rgba(255, 255, 255, 0.18); }
.join__address { color: rgba(243, 238, 228, 0.55); text-align: center; }
.join__social { display: flex; gap: 22px; font-weight: 600; color: rgba(243, 238, 228, 0.85); }
.join__social a:hover { color: var(--mint); }
@media (max-width: 760px) {
  .cost__cloud { width: 150vw; height: 76svh; }
  /* У референса на телефоне скриншоты почти во всю ширину экрана и выглядывают
     из-за краёв — только шесть панелей. */
  .cpanel { padding: 10px 12px; gap: 5px; border-radius: 12px; width: min(var(--wpx), 56%); }
  .cpanel:nth-child(n+7) { display: none; }
  .cpanel b { font-size: 0.72rem; }
  .cpanel span { font-size: 0.62rem; }
  .join { padding-top: 220px; }
  .joinform { grid-template-columns: 1fr; border-radius: 28px; }
  .joinform__btn { width: 100%; }
  .join__bottom { grid-template-columns: 1fr; justify-items: center; margin-top: 90px; padding-bottom: 70px; }
  /* На узкой колонке ссылка и номер вставали в два столбца и оба ломались
     посередине — номер разрывался между цифрами. Ставим их друг под другом. */
  .join__social { flex-direction: column; align-items: center; gap: 0; text-align: center; }
  /* Строка текста высотой 19 px — цель мимо пальца. Отступы поднимают её до
     44 px, вычитая их из промежутка, чтобы список не разъехался. */
  .join__social a { white-space: nowrap; padding: 12px 10px; }
}

/* ---------- отключённая анимация ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero, .scene, .pf, .cost { height: auto; }
  .hero__stage, .scene__stage, .pf__stage, .cost__stage { position: relative; height: auto; min-height: 100svh; overflow: visible; }
  .hero__copy, .note, .pf__item, .scard { opacity: 1 !important; transform: none !important; position: relative; }
  .hero__copy { padding: 24px var(--gap); }
  .hero__scroll, .hero__canvas { display: none; }
  .hero__line { opacity: 1; transform: none; }
  .scene__head { position: relative; top: auto; padding-top: 80px; }
  .scene__window { position: relative; width: 100% !important; height: 60vh !important; transform: none !important; margin: 24px 0; }
  .scene__cards { position: relative; display: grid; gap: 12px; padding: 12px; }
  .scard { inset: auto !important; width: 100%; }
  .pf__stage { display: grid; gap: 16px; }
  .pf__item { position: relative; top: auto; margin-bottom: 24px; }
  .pf__strip { position: relative; left: 0; top: 0; transform: none !important; }
  .cost__cloud { display: none; }
  .loader { display: none; }
  .dock { transform: translate(-50%, 0); }
}

/* ---------- скриншоты в облаке стоимости ---------- */
.cpanel--img { padding: 0; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 3px rgba(80, 180, 110, 0.32), 0 0 60px rgba(80, 180, 110, 0.4); display: block; }
.cpanel--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .cpanel--img { border-radius: 10px; box-shadow: 0 0 0 2px rgba(80, 180, 110, 0.32), 0 0 30px rgba(80, 180, 110, 0.4); } }

/* ---------- ссылка на программу из меню ---------- */
/* Карточки курсов жили здесь, пока на странице их не было. Теперь программа —
   секция перед формой, а в меню от неё осталась ссылка. */
.menu__link { font-family: var(--f-sans); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: -0.035em; color: var(--cream); border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 4px; justify-self: start; transition: border-color 0.3s; }
.menu__link em { font-style: normal; color: var(--mint); }
.menu__link:hover { border-color: var(--mint); }

/* ─── Полоса с кнопкой после блока ───────────────────────────────────────────
   Стоит между секциями, а не внутри: у трёх блоков сцена прилипшая и обрезана
   по overflow, кнопка внутри срезалась бы вместе с анимацией. */
.cta { display: grid; place-items: center; gap: 14px; }
.cta--band { padding: clamp(28px, 5vw, 56px) var(--gap) clamp(40px, 7vw, 84px); background: var(--bg); }
/* Заголовок полосы: короткая строка над формой. Без неё поля посреди пустой
   полосы не объясняют, о чём заявка. */
.cta__title { font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: -0.02em; text-align: center; max-width: 18em; }

/* Форма в полосе — та же, что в подвале, но компактнее и на светлом фоне.
   В подвале плашка лежит на тёмно-зелёном и держится тяжёлой тенью; здесь фон
   кремовый, и от той же тени осталось бы грязное пятно. Поэтому тонкое кольцо
   и мягкая тень, а поля ниже на восемь пикселей: полоса стоит между блоками
   и не должна спорить с ними по высоте. */
.joinform--band {
  width: min(100%, 560px); padding: 5px; margin-top: 0; font-size: 0.95rem;
  box-shadow: 0 0 0 1px rgba(23, 64, 43, 0.07), 0 16px 34px -22px rgba(23, 64, 43, 0.55);
}
.joinform--band input { min-height: 46px; padding: 0 16px; }
.joinform--band .joinform__btn { min-height: 46px; padding: 0 20px; }
/* Ответ формы на светлом фоне: мятный цвет подвала здесь не читается. */
.cta--band .form__msg { color: var(--green-3); }
.cta--band .form__msg.is-error { color: #b8432a; }

/* ─── Попап заявки ───────────────────────────────────────────────────────────
   Один на страницу; кнопки блоков открывают его же и только подставляют
   пометку источника. */
.lead { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gap); }
.lead[hidden] { display: none; }
.lead__scrim { position: absolute; inset: 0; background: rgba(23, 58, 41, 0.62); backdrop-filter: blur(3px); animation: leadFade 0.25s var(--ease); }
.lead__box {
  position: relative; width: min(100%, 460px); max-height: 92svh; overflow-y: auto;
  padding: clamp(26px, 4vw, 38px) clamp(22px, 3.4vw, 34px) clamp(22px, 3vw, 30px);
  border-radius: 26px; background: var(--white);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
  animation: leadRise 0.32s var(--ease);
}
@keyframes leadFade { from { opacity: 0; } }
@keyframes leadRise { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.lead__x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-2); transition: background 0.2s; }
.lead__x:hover { background: var(--line); }
/* Крестик рисуется двумя линиями: значок в разметке был бы текстом,
   который пришлось бы переводить. */
.lead__x::before, .lead__x::after { content: ''; position: absolute; left: 12px; top: 19px; width: 16px; height: 2px; border-radius: 2px; background: var(--ink-2); }
.lead__x::before { transform: rotate(45deg); }
.lead__x::after { transform: rotate(-45deg); }
.lead__title { font-family: var(--f-sans); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 1.9rem); line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); max-width: 12em; }
.lead__sub { margin-top: 10px; font-size: 0.98rem; line-height: 1.4; color: var(--ink-2); }
.lead__note { margin-top: 12px; font-size: 0.82rem; line-height: 1.35; color: var(--ink-3); }
/* ⛔ Ловушка убрана с экрана через display: none, а не отъездом за левый край.
   Пока она жила в попапе, это было неважно: попап открывают руками. Теперь
   такие же формы стоят в четырёх полосах страницы, и поле с именем company,
   отъехавшее за край, — законная цель автозаполнения браузера. Заполненная
   ловушка означает «робот», и заявка живого человека молча исчезла бы. Скрытое
   через display: none поле автозаполнение пропускает, а простой робот, который
   заполняет все поля формы подряд, — нет. */
.lead__trap { display: none; }

/* Подвальная форма — горизонтальная плашка; в попапе те же поля идут столбиком. */
.joinform--modal { grid-template-columns: 1fr; gap: 10px; width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; margin-top: 18px; }
.joinform--modal .joinform__btn { width: 100%; }
.lead .form__msg { margin-top: 8px; color: var(--green); }
.lead .form__msg.is-error { color: #c0392b; }

@media (max-width: 560px) {
  .lead { padding: 12px; align-items: end; }
  .lead__box { border-radius: 22px 22px 18px 18px; padding: 26px 18px 20px; }
}