/* ====================== ТОКЕНЫ ======================
   ЦВЕТ, версия 27.08.2026. Было: тёплый фон #FAFAF9, серо-зелёные
   приглушённые секции #F1F3F1 и коричнево-золотой акцент #A16207.
   Стало: чистый белый фон и один зелёный акцент — по образцу
   muslim.study, который прислал Шариф.

   Зелёная версия прожила один день: 27.08.2026 вечером Шариф свёл палитру
   к цвету знака академии — тёмно-синему. Зелёного в файле больше нет,
   включая rgba: половинчатая смена палитры выглядит как недоделка.

   Правило при любой правке цвета: белый текст на кнопке требует
   контраста 4.5:1, у зелени рамки запас есть. У мелких деталей
   свой токен --accent, светлее знака, иначе они сливаются с текстом. */
:root{
  /* --- ЦВЕТ КНОПОК, ЛЕНТЫ И УКАЗАТЕЛЯ.
     Снят пипеткой с орнаментальной рамки Корана на photos/hero.jpg —
     решение Шарифа 27.08.2026: страница должна сочетаться с главным
     фото, а не спорить с ним. Самый частый зелёный рамки — #106040,
     он тёмный; взят тон той же гаммы, но светлее (#157A4A), иначе
     повторилась бы история с тёмно-синей кнопкой, которая читалась
     почти чёрной. Контраст с белым текстом 5,4:1.

     Меняете главное фото — пересними цвет пипеткой с него, смысл
     токена именно в этой связке.

     Знак академии в шапке остаётся тёмно-синим: он картинка, в коде
     не перекрашивается. Понадобится свести и его — нужен файл логотипа
     в зелёном либо знак на зелёной подложке.

     --brand и --accent совпадают по значению намеренно. Токена два,
     потому что роли разные: --brand — заливки кнопок, ленты и указателя,
     --accent — мелкие детали. Разводить обратно — по одному. */
  --brand:#157A4A;
  --brand-600:#0F5E39;   /* ховер кнопки — темнее основного */

  --ink:#0C1F1A;
  --primary:#0C3D28;
  --primary-700:#082D1E;
  --primary-50:#E8F3ED;
  /* Акцент мелких деталей — иконки, галочки, надзаголовки, подсветки.
     Он светлее знака намеренно: цветом знака они слились бы с текстом,
     у обоих тон почти чёрный. Контраст к белому 8,2:1. */
  --accent:#157A4A;
  --accent-600:#0F5E39;
  --accent-50:#E7F4ED;   /* светлая подложка акцента: иконки, ховеры */
  --accent-on-dark:#7FD5B2; /* акцент на тёмно-синих блоках — форма,
                            футер. Контраст к тёмно-зелёному #0C3D28 — 7,9:1 */
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --muted:#F4F8F6;       /* приглушённая секция: почти белая, с намёком
                            на синеву. Серый на белом фоне читался плитой —
                            на этом и держался «не белый» вид */
  --muted-fg:#4A5A54;
  --border:#E4EAE7;
  --white:#FFFFFF;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:999px;

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;

  --shadow-sm:0 1px 2px rgba(12,31,26,.05), 0 1px 3px rgba(12,31,26,.06);
  --shadow-md:0 8px 24px rgba(12,31,26,.07);
  --shadow-lg:0 24px 60px rgba(12,31,26,.11);

  --hdr-h:88px;   /* было 76px: подросли знак и название в шапке */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---------- ТИПОГРАФИКА: одна шкала на весь сайт ----------
     Шаг: 12 → 13 → 14 → 15 → 16 → 17 → 19 → 22 → h3 → h2 → h1.
     Дробных размеров (15.5px, 14.5px, 13.5px) нет: браузеры округляют их
     по-разному, и подписи одного смысла в соседних блоках выглядят разными.
     Ниже 12px текст не опускается. */
  --fs-micro:12px;    /* подпись под логотипом — минимальный размер */
  --fs-caption:13px;  /* надзаголовки, теги, служебные подписи */
  --fs-small:14px;    /* подсказки полей, мелкая мета, юридический текст */
  --fs-ui:15px;       /* навигация, метки, второстепенный текст */
  --fs-accent:18px;   /* +20% к --fs-ui: бейдж «первый урок», блок доверия,
                         подписи под числами. Эти три блока намеренно крупнее
                         соседних — не «нормализовать» обратно к 15px */
  --fs-md:16px;       /* текст в карточках, кнопки, поля ввода */
  --fs-body:17px;     /* базовый текст */
  --fs-lg:19px;
  --fs-xl:22px;
  --fs-lead:clamp(17px,1.4vw,19px);
  --fs-h3:clamp(19px,1.5vw,22px);
  --fs-h2:clamp(28px,3.4vw,44px);
  --fs-h1:clamp(32px,4.6vw,60px);
  /* Числа в блоке статистики. Было clamp(41,58px) — против подписи в 18px
     это разрыв больше чем втрое, и плашка читалась как две разные вещи:
     огромная цифра и мелкая строчка под ней. 27.08.2026 сведено к двойному
     разрыву — 36px против 19px. Ниже не опускать: «не мелко» — условие
     Шарифа, число здесь и есть довод. */
  --fs-num:clamp(28px,2.6vw,36px);
  --fs-price:32px;

  /* ---------- НАСЫЩЕННОСТЬ ----------
     800 — h1, h2, крупные числа и логотип (и только они);
     700 — h3, кнопки, метки полей, вопросы FAQ, заголовки карточек;
     600 — надзаголовки и подписи под числами;
     400 — весь остальной текст. */
  --fw-reg:400; --fw-semi:600; --fw-bold:700; --fw-black:800;

  --lh-tight:1.1;   /* крупные заголовки */
  --lh-head:1.3;    /* мелкие заголовки */
  --lh-snug:1.5;    /* короткие подписи */
  --lh-body:1.6;    /* абзацы */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Manrope',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-reg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
/* У каждого уровня свои размер, насыщенность и интерлиньяж.
   Один межстрочный интервал 1.14 на все уровни — ошибка: для h1 в 60px это
   норма, для h3 в 19px строки слипаются. Насыщенность 800 тоже не всем нужна:
   если ей набраны и h1, и h3, разница между уровнями пропадает. */
h1,h2,h3,h4{margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:var(--fw-black);line-height:var(--lh-tight);letter-spacing:-.022em}
h2{font-size:var(--fs-h2);font-weight:var(--fw-black);line-height:1.16;letter-spacing:-.02em}
h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-head);letter-spacing:-.01em}
h4{font-size:var(--fs-ui);font-weight:var(--fw-bold);line-height:var(--lh-head);letter-spacing:0}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.sec{padding:var(--s-7) 0}
.sec--muted{background:var(--muted)}
.sec__head{max-width:760px;margin:0 auto var(--s-6);text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s-2);
  font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
/* currentColor, а не --accent: на тёмных блоках надзаголовку задают свой
   цвет инлайном, и жёстко зелёная чёрточка там просто пропадала. */
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6}
/* Подзаголовок секции и лид-абзац делают одну работу — размер у них общий.
   Было 18px и clamp(17→19px): два размера на одну роль. */
.sec__sub,.lead{color:var(--muted-fg);font-size:var(--fs-lead);line-height:1.55;text-wrap:pretty}
.sec__sub{margin-top:var(--s-2)}

/* маркер незаполненного факта — на боевой сайт не выпускать */
.mark{
  display:inline-block;padding:1px 8px;margin:0 2px;border:1px dashed #C2410C;border-radius:6px;
  background:#FFF7ED;color:#9A3412;font-size:var(--fs-caption);font-weight:var(--fw-semi);line-height:var(--lh-snug);white-space:normal;
}

/* ====================== КНОПКИ ====================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border:1px solid transparent;border-radius:var(--r-full);
  font-weight:var(--fw-bold);font-size:var(--fs-md);line-height:1;text-align:center;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  min-height:52px;cursor:pointer;
}
.btn svg{width:19px;height:19px;flex:none}
/* Кнопка записи красится цветом знака, а не акцентом мелких деталей:
   решение Шарифа 27.08.2026 — знак, кнопка и лента одного цвета.
   Ховер светлее основного: тёмную кнопку затемнять уже некуда. */
.btn--accent{background:var(--brand);color:var(--white);box-shadow:0 6px 18px rgba(12,45,30,.26)}
.btn--accent:hover{background:var(--brand-600);transform:translateY(-2px);box-shadow:0 10px 26px rgba(12,45,30,.34)}
/* Крупная кнопка первого экрана: она там одна и должна держать экран. */
.btn--lg{padding:19px 34px;min-height:62px;font-size:var(--fs-lg)}
.btn--dark{background:var(--primary);color:var(--white)}
.btn--dark:hover{background:var(--primary-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:var(--primary);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--primary);background:rgba(12,45,30,.04)}
.btn--onDark{background:rgba(255,255,255,.1);color:var(--white);border-color:rgba(255,255,255,.28)}
.btn--onDark:hover{background:rgba(255,255,255,.18)}
.btn--sm{padding:11px 18px;min-height:44px;font-size:var(--fs-ui)}
.btn--wide{width:100%}

/* ====================== ШАПКА ====================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr-h);
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
}
.hdr.is-scrolled{border-bottom-color:var(--border);box-shadow:0 4px 20px rgba(12,31,26,.05)}
.hdr__inner{display:flex;align-items:center;gap:20px;height:var(--hdr-h);flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:14px;flex:none;white-space:nowrap}
/* Знак — растровый круглый логотип академии вместо прежнего SVG-орнамента.
   Углы у файла белые, поэтому обрезаем в круг.
   Укрупнён с 38 до 52px 27.08.2026 по просьбе Шарифа. Шапка выросла
   с 76 до 88px: знак в 52px в прежнюю высоту вставал впритык, без полей.
   Дальше не растить — на 1100px шапка сворачивается в бургер, и там
   рядом со знаком ещё телефон и кнопка. */
.logo__mark{width:52px;height:52px;flex:none;border-radius:50%;object-fit:cover}
/* Знак делает оборот и встаёт на место: при загрузке страницы и каждый раз,
   когда человек возвращается к первому экрану. Класс вешает скрипт, поэтому
   анимация не идёт по кругу, а срабатывает на событие. Небольшой перелёт
   на 340° и возврат к 360° — чтобы знак «встал», а не просто остановился. */
@keyframes logo-spin{
  0%  {transform:rotate(0)      scale(1)}
  70% {transform:rotate(340deg) scale(1.07)}
  100%{transform:rotate(360deg) scale(1)}
}
.hdr .logo__mark.is-spin{animation:logo-spin .9s var(--ease)}
.logo__txt{display:flex;flex-direction:column;line-height:1.05}
/* Название поднято со ступени --fs-body (17px) на --fs-xl (22px),
   подпись с 12 на 14px: 27.08.2026, вместе со знаком. Название набрано
   цветом знака — в шапке это одна вещь, а не две. */
/* Название набрано цветом знака, а не кнопок: в шапке оно стоит вплотную
   к тёмному кругу логотипа и должно читаться с ним как одна вещь. */
.logo__name{font-weight:var(--fw-black);font-size:var(--fs-xl);letter-spacing:-.015em;color:var(--primary)}
.logo__sub{font-size:var(--fs-small);font-weight:var(--fw-semi);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-fg)}
.nav{display:flex;align-items:center;gap:26px;margin:0 auto;white-space:nowrap}
.nav a{font-size:var(--fs-ui);font-weight:var(--fw-semi);color:var(--muted-fg);position:relative;padding:6px 0;transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.hdr__side{display:flex;align-items:center;gap:16px;flex:none;white-space:nowrap}
/* Отрицательный трекинг сжимал цифры номера — для чисел он вреден, убран. */
.hdr__phone{font-size:var(--fs-md);font-weight:var(--fw-bold);letter-spacing:0}
.hdr__phone:hover{color:var(--accent)}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);flex:none}
.burger svg{width:22px;height:22px}

.mmenu{
  position:fixed;inset:var(--hdr-h) 0 0;z-index:55;background:var(--bg);
  padding:24px;display:flex;flex-direction:column;gap:6px;
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  overflow-y:auto;
}
.mmenu.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mmenu a.mmenu__link{padding:16px 4px;font-size:var(--fs-lg);font-weight:var(--fw-bold);border-bottom:1px solid var(--border)}
.mmenu__foot{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:12px}
.mmenu__phone{font-size:var(--fs-xl);font-weight:var(--fw-black);letter-spacing:0}

/* ====================== ПЕРВЫЙ ЭКРАН ====================== */
/* Отступ от шапки был 56px сверх её высоты. Экран центрируется по вертикали,
   поэтому «придвинуть фото к шапке» решается не только этим отступом: пока
   контент ниже экрана, лишнее место уходит в верхний зазор. Второй рычаг —
   align-self:start у .hero__media ниже. */
/* Высота первого экрана — ровно на ленту меньше окна: 62px её полосы
   остаются под ним видимыми сразу при открытии. Решение Шарифа
   27.08.2026. Было min-height:100svh — экран занимал всё окно целиком,
   и лента начиналась за сгибом.
   Нижний отступ ужат с 96 до 48px по той же причине. Добавляя сюда
   что-нибудь ещё, проверять на ноутбуке 768px по высоте: контент
   первого экрана в этот просвет уже уложен впритык. */
.hero{position:relative;padding-top:calc(var(--hdr-h) + 24px);padding-bottom:var(--s-5);min-height:calc(100svh - 62px);display:flex;align-items:center;overflow:hidden}
/* Подсветка первого экрана ослаблена вдвое (было .10 и .09): на белом фоне
   прежние пятна давали серо-бежевый налёт, из-за которого экран и читался
   не белым. Оба пятна теперь зелёные — жёлтого в палитре больше нет. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(1100px 600px at 78% -8%,rgba(12,45,30,.05),transparent 62%),
             radial-gradient(760px 520px at 4% 100%,rgba(12,45,30,.05),transparent 60%);
}
.hero__pattern{position:absolute;inset:0;z-index:0;color:var(--primary);opacity:.04;pointer-events:none}
.hero .container{position:relative;z-index:1}
/* Колонки поровну, а не 1.05/0.95: ширину, которую фото потеряло при возврате
   в контейнер, добираем здесь и на промежутке между колонками (64 → 48px).
   Ниже 552px текстовая колонка ломает h1 на четыре строки — дальше не сужать. */
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:center}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 10px;margin-bottom:var(--s-3);
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-full);
  font-size:var(--fs-accent);font-weight:var(--fw-bold);box-shadow:var(--shadow-sm);
}
.hero__badge span.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 4px rgba(21,122,74,.16)}
.hero h1{margin-bottom:var(--s-3)}
.hero h1 em{font-style:normal;color:var(--primary);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.28em;background:rgba(21,122,74,.16);border-radius:4px;z-index:-1}
/* Лид первого экрана — это теперь обещание подбора, то же слово в слово,
   что стояло в белой полосе под экраном. Полосу убрали 27.08.2026:
   она вместе со старым лидом съедала около 180px, из-за чего плывущая
   строка не попадала на первый экран. Ширину не растягивать — длинная
   строка в первом экране читается хуже короткой. */
/* Обещание подбора на первом экране и подзаголовок самого подбора набраны
   жирным и основным цветом текста, а не приглушённым (правка Шарифа
   01.09.2026): это не пояснение к заголовку, а само предложение —
   ради него на странице стоит кнопка. Размер не трогаем: на первом экране
   контент уложен впритык, лишние пиксели высоты выталкивают ленту
   направлений за край на ноутбуке. */
.hero__lead{max-width:560px;margin-bottom:var(--s-4);font-weight:var(--fw-bold);color:var(--ink)}
.sec__sub--strong{font-weight:var(--fw-bold);color:var(--ink)}

/* ---------- Кнопка первого экрана с указателем ----------
   Указатель мыши у левого нижнего угла кнопки — приём с muslim.study
   (скриншот прислал Шариф 27.08.2026). Прежняя ровная стрелка сбоку
   ушла вместе с полосой.
   Обёртка inline-flex и position:relative — курсор позиционируется
   от кнопки, а не от колонки: кнопка меняет ширину от длины надписи,
   и от колонки указатель уехал бы от угла.
   overflow у первого экрана скрыт, поэтому курсор не должен вылезать
   за контейнер — держим его внутри отрицательных 10–28px. */
/* Нижний отступ держит место под указатель: он свисает под кнопку
   почти на свою высоту, а у первого экрана overflow:hidden — без запаса
   указателю срезало бы хвост. Меняете размер указателя — меняйте и это. */
.hero__cta{position:relative;display:inline-flex;margin-bottom:92px}
.hero__cursor{
  /* Указатель стоит ПО ЦЕНТРУ под кнопкой и смотрит вверх, на надпись —
     решение Шарифа 27.08.2026 после двух неудачных попыток поставить его
     наискось у угла. Наклона нет вовсе: у иконки остриё и так направлено
     вверх, любой поворот уводил его в сторону.

     Центрируем по ОСТРИЮ, а не по картинке: остриё лежит в точке (5,2)
     из 24, то есть на 15px от левого края при размере 74px. Поэтому
     left:50% плюс сдвиг на эти 15px влево — иначе по центру кнопки
     оказалась бы середина указателя, а кончик ушёл бы левее.
     Сдвиг сделан свойством translate, а не transform: transform занят
     анимацией толчка, и они бы перебили друг друга.

     Просвет между кончиком и кнопкой считается ВМЕСТЕ С АМПЛИТУДОЙ
     толчка. Прошлая версия стояла на -73px, то есть с зазором 6px,
     а толчок поднимал указатель на 13px — в верхней точке он заезжал
     на кнопку на 7px. Именно это и было видно.
     Теперь зазор в покое 18px, толчок 12px: в самой верхней точке
     остаётся 6px, кончик только подходит к кнопке и не касается её.
     Меняете амплитуду в @keyframes cursor-nudge — меняйте и это число. */
  position:absolute;left:50%;bottom:-86px;width:74px;height:74px;pointer-events:none;
  translate:-15px 0;
  /* Цвет задаётся ЗДЕСЬ, на самом <svg>, а не селектором `.hero__cursor path`.
     Внутрь <use> внешние селекторы не достают — путь копируется в теневое
     дерево, и правило по нему не срабатывает. Именно поэтому указатель
     однажды вышел чёрным: fill не применился и остался цветом по
     умолчанию. Наследуемые свойства (fill, stroke) на родителе работают.
     Заливка сплошная, цветом кнопки, без обводки. */
  fill:var(--brand);stroke:none;
  animation:cursor-nudge 1.7s var(--ease) infinite;
  filter:drop-shadow(0 4px 10px rgba(21,122,74,.3));
}
/* Толчок, а не равномерное качание: ловит взгляд именно пауза между
   рывками. Движение снимается при prefers-reduced-motion — правило
   в конце файла. */
/* Толчок строго вверх, вслед за остриём: указатель тянется к кнопке
   и возвращается. Вбок не смещать — он показывает вверх. */
@keyframes cursor-nudge{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-12px)}
  45%{transform:translateY(-5px)}
}

/* Полоса доверия — на всю ширину под сеткой, а не внутри текстовой колонки:
   иначе колонка вырастает вдвое выше фото и справа остаётся пустота. */
.hero__trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 34px;
}
/* Блок доверия вынесен из первого экрана под плывущую строку (27.08.2026).
   Верхней черты у него больше нет — её роль играет сама лента. Отступы
   меньше обычной секции: это полоса под лентой, а не отдельный раздел. */
.trust-sec{padding:var(--s-5) 0}
.trust{display:flex;align-items:flex-start;gap:14px;max-width:360px}
/* ---------- Значок пункта доверия ----------
   Квадрат с картинкой вместо голой иконки (27.08.2026, картинки прислал
   Шариф). Иконка остаётся под картинкой заглушкой: файла нет — виден
   значок на светлой подложке, и пункт выглядит целым. Тот же приём,
   что у карточек курсов.
   Размер 92px: картинка читается, но блок остаётся полосой под лентой,
   а не превращается в третий большой раздел перед подбором. */
.trust__ico{
  position:relative;flex:none;width:92px;height:92px;overflow:hidden;
  border-radius:var(--r-md);background:var(--accent-50);
  display:flex;align-items:center;justify-content:center;
}
.trust__ico svg{width:34px;height:34px;color:var(--accent)}
/* contain, а не cover: присланные картинки — значки на своём фоне,
   обрезка по краям съедала бы у них рамку. */
.trust__ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--white);z-index:1}
/* Блок доверия — то, что читают перед кнопкой. Исходно 15/14px, после
   выравнивания шкалы 16/15px, сейчас увеличен ещё на 20% — до 19/18px. */
.trust b{display:block;font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.trust span{font-size:var(--fs-accent);color:var(--muted-fg);line-height:var(--lh-snug)}

/* Фото держится в контейнере: поле слева до заголовка и поле справа до фото
   одинаковые (144px на мониторе 1440). Вынос в край экрана эту симметрию
   ломал — от него отказались.
   align-self:start вместо центрирования: фото ниже текстовой колонки, и по
   центру оно отъезжало от шапки на 81px. По верхней кромке — 46px, как было
   при выносе в край. */
.hero__media{position:relative;align-self:start}
/* Рамка кадра. Плашка «Отдельные группы» считает своё положение от неё,
   а не от всей колонки: иначе после появления карточки преподавателя
   она уехала бы вниз, на эту карточку. */
.hero__frame{position:relative}
/* ---------- Карточки учеников под кадром ----------
   Закрывают пустоту, которая осталась от того, что текстовая колонка
   выше фото: под кнопкой держится запас для указателя.
   Приём с muslim.study: маленькие кадры со значками видеозвонка поверх.
   Файлы уже обрезаны в квадрат и сжаты до 560px (были до 2 МБ) —
   это первый экран, тяжёлые картинки тут дороже всего. */
.hero__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.hero__card{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--r-md);background:var(--muted);box-shadow:var(--shadow-sm);
}
.hero__card img{width:100%;height:100%;object-fit:cover}
/* Полоса значков прижата к низу кадра. Тень под кружками обязательна:
   фотографии разные, и на светлом снимке белый кружок без неё пропадёт. */
.hero__card-bar{
  position:absolute;left:6px;right:6px;bottom:8px;z-index:1;
  display:flex;gap:6px;justify-content:center;
}
.cbtn{
  width:27px;height:27px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(12,31,26,.28);
}
.cbtn svg{width:14px;height:14px}
.cbtn--mic{background:var(--brand);color:#fff}
.cbtn--rec{background:#F8CDD2;color:#B03A46}
.cbtn--more{background:#EEF2F8;color:#4A5A54}

/* ---------- Живая звуковая дорожка на кадре ----------
   Полоски по центру фото: показывают, что урок идёт голосом прямо
   сейчас. Стоят на полупрозрачной тёмной пилюле — фотографии разной
   светлоты, и белые полоски без подложки терялись бы на светлых
   кадрах (у нас таких два из трёх).
   Высота задаётся через scaleY, а не height: transform не вызывает
   пересчёт вёрстки, и три дорожки на первом экране не грузят
   отрисовку. Отключается при prefers-reduced-motion. */
.live{
  position:absolute;left:50%;top:50%;z-index:1;translate:-50% -50%;
  display:flex;align-items:center;gap:4px;height:38px;padding:0 14px;
  border-radius:var(--r-full);background:rgba(12,31,26,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.live i{
  display:block;width:3px;height:20px;border-radius:2px;background:#fff;
  animation:live-eq 1.1s ease-in-out infinite;
}
/* Задержки разные — иначе полоски качаются синхронно и читаются одной
   деталью, а не звуком. Значения не кратны друг другу намеренно. */
.live i:nth-child(1){animation-delay:-.9s}
.live i:nth-child(2){animation-delay:-.35s}
.live i:nth-child(3){animation-delay:-.65s}
.live i:nth-child(4){animation-delay:-.15s}
.live i:nth-child(5){animation-delay:-.5s}
@keyframes live-eq{
  0%,100%{transform:scaleY(.35)}
  50%{transform:scaleY(1)}
}
/* 4:3, а не 3:2 — кадр выше и ближе по высоте к тексту слева. Исходник 16:9,
   поэтому cover подрезает его по бокам; сдвиг вправо убирает тёмный край. */
.hero__media .photo{aspect-ratio:4/3;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.hero__media .photo img{object-position:55% 50%}
/* Плашка стоит по центру кадра, над рукой — решение Шарифа 27.08.2026.
   Раньше она висела в левом нижнем углу и на 28px вылезала за фото:
   угол кадра там тёмный, а сама плашка спорила с симметрией полей.
   Рука на снимке идёт снизу по центру, и плашка ложится ровно на неё.
   Сдвиг по X здесь несёт центрирование — в ховере его обязательно
   сохранять, иначе плашка прыгнет вправо на пол-ширины. */
.hero__float{
  position:absolute;left:50%;bottom:28px;z-index:2;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow-lg);border:1px solid var(--border);
  max-width:calc(100% - 32px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
/* Плашка отзывается на курсор: приподнимается, тень становится глубже.
   Срабатывает и при наведении на само фото — цель крупнее и попасть
   проще, чем в плашку. */
.hero__media:hover .hero__float,
.hero__float:hover{
  transform:translate(-50%,-8px);
  box-shadow:0 30px 70px rgba(12,31,26,.18);
  border-color:#CDDCD4;
}
.hero__float svg{width:26px;height:26px;color:var(--accent);flex:none;transition:transform .35s var(--ease)}
.hero__media:hover .hero__float svg{transform:scale(1.08)}
.hero__float b{display:block;font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.25}
.hero__float span{font-size:var(--fs-small);color:var(--muted-fg);line-height:var(--lh-snug)}

/* ====================== ФОТО + ЗАГЛУШКА ====================== */
.photo{position:relative;overflow:hidden;background:var(--muted);border-radius:var(--r-md)}
.photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.photo__fb{
  position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:20px;text-align:center;
  background:linear-gradient(155deg,#173F35 0%,#0E2C25 55%,#0A211C 100%);
  color:rgba(255,255,255,.86);
}
.photo__fb svg.ico{width:40px;height:40px;color:rgba(255,255,255,.62)}
.photo__fb b{font-size:var(--fs-small);font-weight:var(--fw-bold);color:#fff}
.photo__fb span{font-size:var(--fs-caption);color:rgba(255,255,255,.72);max-width:230px;line-height:var(--lh-snug)}
.photo__fb .patt{position:absolute;inset:0;opacity:.12;color:#fff}

/* ====================== ПЛЫВУЩАЯ СТРОКА ======================
   Лента с направлениями под первым экраном — приём с muslim.study
   (образец прислал Шариф 27.08.2026). Работает как вывеска: человек
   за пару секунд видит, чему здесь учат, ещё не прокрутив страницу.

   Полоса низкая, около 62px, и стоит между первым экраном и подбором.
   Подбор от этого вторым содержательным блоком быть не перестал —
   разворачивать порядок из-за ленты не нужно.

   Список внутри дублируется РОВНО ДВАЖДЫ, а трек уезжает на -50%:
   в этот момент вторая копия стоит там, где начиналась первая, и стык
   не виден. Меняете состав ленты — меняйте обе копии, иначе на цикле
   будет рывок. Ширину треку не задавать: max-content подгоняется
   под содержимое, на фиксированной лента поедет от длины названий. */
/* Лента красится тем же цветом, что кнопки записи, — требование Шарифа:
   кнопка и лента должны совпадать. Стояла на --primary (цвет знака)
   и была темнее кнопки. */
.marquee{
  position:relative;overflow:hidden;
  background:var(--brand);color:var(--white);
  border-top:1px solid var(--brand-600);border-bottom:1px solid var(--brand-600);
}
.marquee__track{display:flex;width:max-content;animation:marquee-run 38s linear infinite}
/* Курсор над лентой её останавливает: названия можно дочитать. */
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__i{
  display:inline-flex;align-items:center;gap:12px;padding:18px 28px;flex:none;
  font-size:var(--fs-lg);font-weight:var(--fw-semi);line-height:1.2;white-space:nowrap;
}
.marquee__i svg{width:26px;height:26px;color:var(--accent-on-dark);flex:none}
@keyframes marquee-run{to{transform:translateX(-50%)}}

/* ====================== ЦИФРЫ ====================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--card);padding:var(--s-5) var(--s-3);text-align:center}
/* nowrap обязателен: «1 000+» без него ломается по пробелу, и плюс
   уезжает на вторую строку отдельной крупной закорючкой — так уже было
   с «500» и «+». */
.stat b{display:block;font-size:var(--fs-num);font-weight:var(--fw-black);letter-spacing:-.02em;color:var(--primary);line-height:1.1;white-space:nowrap}
.stat span{display:block;margin-top:10px;font-size:var(--fs-lg);color:var(--muted-fg);font-weight:var(--fw-semi);line-height:1.4}

/* ====================== ЭТАПЫ ПРОГРАММЫ ====================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);counter-reset:st}
.step{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);position:relative;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CDDCD4}
.step__n{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-bottom:var(--s-2);
  border-radius:var(--r-full);background:var(--primary-50);color:var(--primary);font-weight:var(--fw-black);font-size:var(--fs-body);
}
.step h3{margin-bottom:8px}
.step p{font-size:var(--fs-md);color:var(--muted-fg)}

/* Лестница направлений: десять ступеней — два ровных ряда по пять.
   Четыре колонки, как у обычных .steps, оставили бы в последнем ряду
   две карточки на всю ширину. Карточки здесь плотнее: текста в каждой
   одна строка-две. На планшете и телефоне ряды задаёт адаптив ниже
   (1024px → две колонки, 768px → одна).
   Ступень, с которой начинают на этой странице, подсвечена тем же
   приёмом, что строка своего направления в таблице цен. */
.steps--path{grid-template-columns:repeat(5,1fr)}
.steps--path .step{padding:var(--s-3)}
.steps--path .step__n{width:34px;height:34px;font-size:var(--fs-md)}
.step--now{background:var(--primary-50);box-shadow:inset 3px 0 0 var(--accent)}
.step__now{display:block;margin-top:10px;font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--accent)}

/* ====================== КАРТОЧКИ ЦЕН ====================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);align-items:stretch}
.card{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s-5) var(--s-4);position:relative;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#CDDCD4}
.card--hi{border-color:var(--primary);box-shadow:var(--shadow-md)}
.card__tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:6px 15px;border-radius:var(--r-full);background:var(--primary);color:#fff;
  font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.card__ico{width:46px;height:46px;border-radius:12px;background:var(--primary-50);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-2)}
.card__ico svg{width:24px;height:24px}
.card h3{margin-bottom:6px}
.card__for{font-size:var(--fs-ui);color:var(--muted-fg);margin-bottom:var(--s-3)}
.card__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-bottom:var(--s-3);margin-bottom:var(--s-3);border-bottom:1px solid var(--border)}
.card__price b{font-size:var(--fs-price);font-weight:var(--fw-black);letter-spacing:-.02em;line-height:1}
.card__price span{font-size:var(--fs-ui);color:var(--muted-fg);font-weight:var(--fw-semi)}
.card__list{list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.card__list li{display:flex;gap:10px;font-size:var(--fs-md);line-height:var(--lh-snug)}
.card__list svg{width:19px;height:19px;color:var(--accent);flex:none;margin-top:3px}

/* ---------- Цветные обводки карточек форматов ----------
   Приём с muslim.study, где карточки курсов обведены каждая своим цветом
   (образец прислал Шариф 27.08.2026). Порядок тонов задан Шарифом
   31.08.2026: оранжевый — групповые, светло-синий — индивидуальные,
   жёлтый — детская. Прежние зелёный, бирюза и янтарь убраны. Это
   цветовой маркер карточек, а не смена акцента страницы: кнопки,
   лента и плавающая кнопка остаются на --brand.

   Тонов на карточке два, как в условиях форматов ниже:
   --tone — светлый, красит рамку и плашку иконки; --tone-ink — тёмный,
   им набраны сам значок, галочки и бейдж с белым текстом. Разводить
   пришлось из-за жёлтого и оранжевого: чистый жёлтый #EAB308 на белом
   даёт 1,7:1, белый текст на нём не читается вовсе, а галочки тонут.
   Рамке яркость не мешает — это не текст и не значок.
   Добавляете четвёртую карточку — заводите пару --tone/--tone-ink,
   а не правьте правила по одному. */
.card--tone{border:5px solid var(--tone)}
/* Первая строка — запасная на случай, если color-mix не поддержан:
   тогда плашка останется прежней светло-зелёной, а не пропадёт. */
.card--tone .card__ico{background:var(--accent-50);color:var(--tone-ink,var(--tone))}
.card--tone .card__ico{background:color-mix(in srgb,var(--tone) 18%,#fff)}
.card--tone .card__list svg{color:var(--tone-ink,var(--tone))}
.card--tone .card__tag{background:var(--tone-ink,var(--tone))}
/* Ховер не должен затирать цветную рамку серым. */
.card--tone:hover{border-color:var(--tone)}
.card--a{--tone:#F97316;--tone-ink:#C2410C}   /* оранжевый — групповые */
.card--b{--tone:#38BDF8;--tone-ink:#0369A1}   /* светло-синий — индивидуальные */
.card--c{--tone:#EAB308;--tone-ink:#A16207}   /* жёлтый — детская карточка */

/* ====================== ТАБЛИЦА НАПРАВЛЕНИЙ ======================
   Второй уровень блока цен: карточки отвечают «как учиться», таблица —
   «сколько стоят остальные направления». Строка своего направления
   подсвечена: человек видит свою цену и рядом углублённый уровень.
   На узком экране таблица не ломается и не жмётся до нечитаемого —
   .ptab__scroll прокручивается вбок сама, страница по горизонтали стоит. */
.ptab{max-width:820px;margin:var(--s-5) auto 0}
.ptab__h{margin-bottom:var(--s-3);text-align:center}
.ptab__scroll{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg)}
.ptab table{width:100%;border-collapse:collapse;min-width:480px}
.ptab th,.ptab td{padding:14px var(--s-3);text-align:right;font-size:var(--fs-md);line-height:var(--lh-snug)}
.ptab thead th{
  font-size:var(--fs-caption);font-weight:var(--fw-semi);color:var(--muted-fg);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  border-bottom:1px solid var(--border);padding-top:var(--s-3);padding-bottom:12px
}
.ptab tbody th,.ptab thead th:first-child{text-align:left;font-weight:var(--fw-reg)}
.ptab tbody th{font-weight:var(--fw-semi)}
.ptab tbody tr+tr th,.ptab tbody tr+tr td{border-top:1px solid var(--border)}
.ptab td{font-variant-numeric:tabular-nums;white-space:nowrap}
.ptab__no{color:var(--muted-fg);font-size:var(--fs-small);font-variant-numeric:normal}
/* Подсветка своей строки: фон плюс полоса слева. Только фоном она теряется
   на распечатке и при высокой яркости, поэтому полоса, а не один цвет. */
.ptab__row--hi{background:var(--primary-50)}
.ptab__row--hi th:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.ptab__note{margin-top:var(--s-2);font-size:var(--fs-small);color:var(--muted-fg);text-align:center}

/* ====================== УСЛОВИЯ ФОРМАТОВ ======================
   Третий уровень: условия одинаковы у всех направлений внутри формата,
   поэтому стоят один раз здесь, а не повторяются в каждой карточке. */
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);max-width:820px;margin:var(--s-4) auto 0}
/* Условия форматов обведены цветными рамками. Тона здесь свои —
   жёлтый у групповых, оранжевый у индивидуальных (решение Шарифа
   31.08.2026). С карточками цен выше они больше не совпадают: там
   с 31.08.2026 оранжевый, светло-синий и жёлтый. Захотите свести
   две пары блоков обратно в один разговор про два формата — менять
   надо здесь, тонами карточек .card--a и .card--b.
   Шрифт поднят на ступень: заголовок с 16 до 19px, пункты с 16 до 17px.
   Это условия, по которым человек решает, — их читают, а не проглядывают. */
.terms__col{
  background:var(--card);border:5px solid var(--tone,var(--border));
  border-radius:var(--r-lg);padding:var(--s-4);
}
/* Жёлтая и оранжевая рамки — решение Шарифа 31.08.2026. Тона два:
   --tone красит рамку и маркеры, --tone-ink — заголовок. Разводить
   пришлось потому, что чистый жёлтый на белом даёт для текста контраст
   около 1,7:1 — заголовком им набирать нельзя, он будет нечитаем.
   Рамке яркость не мешает: это не текст. */
.terms__col:nth-child(1){--tone:#EAB308;--tone-ink:#A16207}   /* жёлтая */
.terms__col:nth-child(2){--tone:#F97316;--tone-ink:#C2410C}   /* оранжевая */
.terms__col h4{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin-bottom:14px;color:var(--tone-ink,var(--tone))}
.terms__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.terms__col li{position:relative;padding-left:20px;font-size:var(--fs-body);color:var(--muted-fg);line-height:var(--lh-snug)}
.terms__col li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--tone)}

/* Заголовок таблицы для скринридера: видимого дубля заголовка блока
   на странице не нужно, а таблице подпись нужна. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ====================== КАРТОЧКИ КУРСОВ ======================
   Заменили таблицу направлений 27.08.2026 (образец — muslim.study).
   Девять карточек ровно ложатся в три колонки по три ряда; на планшете
   две, на телефоне одна. Кнопка прижата к низу через flex, иначе при
   разной длине описаний кнопки в ряду встают на разной высоте — это
   первое, что бросается в глаза в сетке одинаковых карточек. */
.courses{margin-top:var(--s-6)}
/* Шрифт во всём блоке поднят на ступень (правка Шарифа 01.09.2026).
   Девять карточек стояли самым мелким текстом на странице — 14px
   в галочках и в подписи цены, 16px в описании, — и каталог, ради
   которого страница и сделана, читался как сноска под ценами.
   Текст заодно переведён с приглушённого на основной цвет: приглушённым
   набирают второстепенное, а здесь второстепенного нет. Приглушённой
   осталась только подпись «в месяц» — она и правда служебная. */
.courses__h{font-size:26px;font-weight:var(--fw-black);text-align:center}
.courses__sub{max-width:660px;margin:10px auto var(--s-4);text-align:center;font-size:var(--fs-body);font-weight:var(--fw-semi);color:var(--ink);line-height:var(--lh-snug)}
.courses__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.course{
  display:flex;flex-direction:column;position:relative;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.course:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CDDCD4}
/* Своё направление подсвечено тем же приёмом, что была подсвечена своя
   строка в таблице: заливка плюс акцентная полоса слева. */
.course--hi{background:var(--accent-50);border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.course__tag{
  display:inline-block;align-self:flex-start;margin-bottom:10px;padding:4px 10px;border-radius:var(--r-full);
  background:var(--accent);color:var(--white);font-size:var(--fs-caption);font-weight:var(--fw-bold);line-height:1.3;
}
/* ---------- Значок курса ----------
   Формат «Все курсы» с muslim.study: цветной квадрат с картинкой над
   названием. Там квадраты разноцветные и каждый со своей иллюстрацией;
   у нас девять курсов, и девять чужих цветов развалили бы палитру.
   Поэтому взята одна зелёная гамма, но цвет несёт смысл: чем дальше
   ступень, тем насыщеннее квадрат — от светло-мятных «Букв» до тёмной
   «Иджазы». Порядок карточек и порядок тонов должны совпадать.
   С седьмой ступени фон темнеет настолько, что иконка становится белой:
   на светлых тонах белая иконка теряет контраст. */
.course__ico{
  position:relative;overflow:hidden;
  width:100%;aspect-ratio:4/3;border-radius:var(--r-md);margin-bottom:var(--s-3);
  display:flex;align-items:center;justify-content:center;
  background:var(--ct-bg);color:var(--ct-ink);
}
/* Иконка крупная — это главное пятно карточки, как картинка в образце.
   На квадрате нет иллюстрации, поэтому пустоту забирает орнамент. */
.course__ico>svg{width:34%;height:34%;position:relative;z-index:1}
.course__ico .patt{position:absolute;inset:0;width:100%;height:100%;opacity:.16;z-index:0}
/* Номер ступени в углу: он и есть подпись «какая это по счёту ступень»
   после того, как лестница этапов со страницы ушла. */
.course__n{
  position:absolute;top:12px;right:14px;z-index:1;
  font-size:var(--fs-lg);font-weight:var(--fw-black);line-height:1;opacity:.55;
}
/* Картинка курса ложится поверх плашки и закрывает её целиком. Плашка
   с орнаментом и иконкой остаётся под ней заглушкой: файла нет или он
   не загрузился — onerror прячет img, и карточка выглядит целой,
   а не дырой. Тот же приём, что у .photo__fb на фотографиях. */
.course__ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.ct1{--ct-bg:#E9F5EF;--ct-ink:#0F5E39}
.ct2{--ct-bg:#D6EEE1;--ct-ink:#0F5E39}
.ct3{--ct-bg:#C0E4D1;--ct-ink:#0F5E39}
.ct4{--ct-bg:#A4D9BE;--ct-ink:#0B4A2C}
.ct5{--ct-bg:#80CBA7;--ct-ink:#0B4A2C}
.ct6{--ct-bg:#52B587;--ct-ink:#08301D}
.ct7{--ct-bg:#249663;--ct-ink:#FFFFFF}
.ct8{--ct-bg:#157A4A;--ct-ink:#FFFFFF}
.ct9{--ct-bg:#0C3D28;--ct-ink:#FFFFFF}
.course__h{font-size:var(--fs-h3);font-weight:var(--fw-black);line-height:var(--lh-head);margin-bottom:8px}
.course__p{font-size:var(--fs-body);color:var(--ink);line-height:var(--lh-snug)}
/* flex:1 у списка прижимает кнопку к низу карточки и при показанной цене,
   и при скрытой (с 14.09.2026 цен нет). Раньше низ держал margin-top:auto
   у .course__price — без него кнопки в ряду вставали на разной высоте. */
.course__list{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.course__list li{display:flex;gap:10px;align-items:flex-start}
.course__list svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:3px}
.course__list span{font-size:var(--fs-md);color:var(--ink);line-height:var(--lh-snug)}
/* margin-top:auto прижимает цену с кнопкой к низу карточки. */
.course__price{margin-top:auto;padding-top:var(--s-3)}
.course__price b{display:block;font-size:26px;font-weight:var(--fw-black);color:var(--primary);line-height:1.1}
.course__price span{display:block;margin-top:4px;font-size:var(--fs-md);color:var(--muted-fg);line-height:var(--lh-snug)}
.course .btn{margin-top:14px}

/* ====================== ПРЕИМУЩЕСТВА ====================== */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.feat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.feat__ico{width:44px;height:44px;border-radius:12px;background:var(--accent-50);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-2)}
.feat__ico svg{width:23px;height:23px}
.feat h3{margin-bottom:8px}
.feat p{font-size:var(--fs-md);color:var(--muted-fg)}

/* ====================== ПОЧЕМУ МЫ ======================
   Сетка формата muslim.study: одинаковые карточки с иконкой, заголовком
   и парой строк. Первая — широкая, 2 колонки на 2 ряда, с фото шейха
   Ясира: в неё переехал отдельный блок «Учителя». Пять обычных карточек
   браузер расставляет по оставшимся местам сам — при добавлении шестой
   сетка поедет, тогда пересчитывать span.
   Подложка светло-зелёная, а не тёмная плита, как было у блока учителей:
   тёмный блок посреди белой страницы и был половиной того «не белого»
   вида, от которого уходим. */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);align-items:stretch}
.why__i{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.why__i:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CDDCD4}
.why__i h3{margin-bottom:8px}
.why__i p{font-size:var(--fs-md);color:var(--muted-fg)}

/* ---------- Значок карточки «Почему мы» ----------
   Полоса во всю ширину карточки, а не квадрат 44px, как было у иконки:
   картинки присланы разной формы — от широкой карты мира до квадратного
   значка, — и в маленьком квадрате карта превратилась бы в полоску.
   contain, а не cover: это значки на своём фоне, обрезка по краям
   съедала бы у них смысл. Иконка лежит под картинкой заглушкой. */
.why__ico{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:112px;margin-bottom:var(--s-3);overflow:hidden;
  border-radius:var(--r-md);background:var(--accent-50);
}
.why__ico svg{width:38px;height:38px;color:var(--accent)}
.why__ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--white);z-index:1}

.why__main{
  grid-column:span 2;grid-row:span 2;
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-4);align-items:center;
  background:var(--accent-50);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);
}
.why__photo .photo{aspect-ratio:4/5;border-radius:var(--r-md);box-shadow:var(--shadow-md)}
/* Кадр сдвинут влево: лицо на снимке не по центру, при обрезке в 4:5
   по центру оно уходит к правому краю. Тот же сдвиг был у прежнего блока. */
.why__photo .photo img{object-position:42% 50%}
.why__body .eyebrow{margin-bottom:10px}
.why__body h3{margin-bottom:10px}
.why__lead{font-size:var(--fs-md);color:var(--muted-fg);line-height:var(--lh-snug)}
.why__list{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.why__list li{display:flex;gap:12px}
.why__list>li>svg{width:22px;height:22px;color:var(--accent);flex:none;margin-top:3px}
.why__list b{display:block;font-size:var(--fs-md);font-weight:var(--fw-bold);margin-bottom:2px}
.why__list li>span>span{font-size:var(--fs-small);color:var(--muted-fg);line-height:var(--lh-snug)}
/* Маркер [?] внутри списка: правило выше специфичнее .mark и перебивало бы
   его цвет — на прежнем тёмном блоке из-за этого маркер стал невидимым. */
.why__list .mark{color:#9A3412;font-size:var(--fs-caption)}

/* ====================== КАК НАЧАТЬ ====================== */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);position:relative}
.flow__i{text-align:center;position:relative;padding:0 8px}
/* Значки шагов: заливка цветом, белая иконка, скруглённый квадрат —
   по образцу, который прислал Шариф 27.08.2026. Были белые кружки
   с тонкой рамкой, и на белом фоне их почти не было видно.
   Тон темнеет от шага к шагу: цвет здесь читается как движение вперёд,
   поэтому порядок карточек и порядок тонов связаны. Ниже #2F9E6B
   не светлеть — у белой иконки на нём контраст 3,4:1, это уже граница
   нормы для графики. */
.flow__n{
  width:64px;height:64px;margin:0 auto var(--s-2);border-radius:19px;
  background:var(--fl);color:#fff;box-shadow:0 8px 18px rgba(21,122,74,.22);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.flow__i:nth-child(1){--fl:#2F9E6B}
.flow__i:nth-child(2){--fl:#1F8A57}
.flow__i:nth-child(3){--fl:#157A4A}
.flow__i:nth-child(4){--fl:#0F5E39}
.flow__i:hover .flow__n{transform:translateY(-4px);box-shadow:0 14px 26px rgba(21,122,74,.3)}
.flow__n svg{width:29px;height:29px}
/* Было 18px — выпадало из шкалы и оказывалось мельче нижней границы h3. */
.flow__i h3{font-size:var(--fs-lg);margin-bottom:6px}
.flow__i p{font-size:var(--fs-md);color:var(--muted-fg)}
/* Соединитель: пунктир и точка на конце, как в образце. Два фона в одном
   правиле — первый рисует точку у правого края, второй сам пунктир. */
.flow__i::after{
  content:"";position:absolute;top:29px;left:calc(50% + 46px);right:calc(-50% + 46px);height:7px;
  background:
    radial-gradient(circle at right center,var(--accent) 3px,transparent 3.5px) right center/8px 7px no-repeat,
    repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px) left center/100% 2px no-repeat;
  opacity:.5;
}
.flow__i:last-child::after{display:none}

/* ====================== ПРЕПОДАВАТЕЛИ ====================== */
.teach{background:var(--primary);color:#fff;border-radius:var(--r-lg);padding:var(--s-6);position:relative;overflow:hidden}
.teach__patt{position:absolute;inset:0;opacity:.07;color:#fff;pointer-events:none}
.teach__grid{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-6);align-items:center}
.teach h2{color:#fff;margin-bottom:var(--s-3)}
.teach .lead{color:rgba(255,255,255,.76)}
.teach__list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.teach__list li{display:flex;gap:14px}
.teach__list svg{width:24px;height:24px;color:var(--accent-on-dark);flex:none;margin-top:3px}
.teach__list b{display:block;font-size:var(--fs-body);font-weight:var(--fw-bold);margin-bottom:3px}
/* На тёмном фоне текст читается тяжелее — 15px → 16px. */
.teach__list span{font-size:var(--fs-md);color:rgba(255,255,255,.76);line-height:var(--lh-snug)}
/* Маркер [?] внутри этого списка: правило .teach__list span специфичнее .mark,
   поэтому текст маркера красился в белый и на светлой плашке пропадал.
   Возвращаем ему собственный цвет и размер. */
.teach__list .mark{color:#9A3412;font-size:var(--fs-caption)}
/* Фото преподавателя — одно крупное, а не две плитки: настоящий снимок есть
   один, и заглушка рядом с ним обесценивала бы его.
   Кадр 4:5, хотя исходник горизонтальный: рядом стоит колонка текста высотой
   около 700px, и горизонтальное фото оставляло под собой ~300px пустого фона.
   Портретная обрезка держит колонки вровень и даёт лицо крупнее. Подрезаются
   бока, поэтому сдвиг влево — по центру фигуры, а не кадра. */
.teach__media{position:relative}
.teach__media .photo{aspect-ratio:4/5;border-radius:var(--r-md)}
.teach__media .photo img{object-position:42% 50%}
/* Плашка с регалиями — тот же приём, что .hero__float на первом экране:
   белая карточка, выходящая за нижний угол фото. Новый визуальный язык
   не вводим. Содержимое — три строки: имя и две регалии, не весь список
   слева: плашка на пять пунктов перестаёт быть плашкой. */
.teach__card{
  position:absolute;left:-24px;bottom:-24px;z-index:2;
  display:flex;align-items:flex-start;gap:13px;padding:16px 20px;max-width:86%;
  background:var(--white);color:var(--ink);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);
}
.teach__card svg{width:26px;height:26px;color:var(--accent);flex:none;margin-top:3px}
.teach__card b{display:block;font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:1.25;margin-bottom:3px}
.teach__card span{display:block;font-size:var(--fs-md);color:var(--muted-fg);line-height:var(--lh-snug)}
.term{border-bottom:1px dotted rgba(255,255,255,.45);cursor:help}

/* ====================== ОТЗЫВЫ ====================== */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.rev{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.rev__stars{display:flex;gap:3px;color:var(--accent)}
.rev__stars svg{width:17px;height:17px;fill:currentColor}
.rev p{font-size:var(--fs-md);line-height:var(--lh-body);flex:1}
.rev__who{display:flex;align-items:center;gap:12px;padding-top:var(--s-2);border-top:1px solid var(--border)}
.rev__ava{width:44px;height:44px;border-radius:50%;background:var(--primary-50);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-black);flex:none}
.rev__who b{display:block;font-size:var(--fs-md);font-weight:var(--fw-bold)}
.rev__who span{font-size:var(--fs-small);color:var(--muted-fg)}

/* ====================== ДЕТИ ====================== */
/* Детский блок вынесен из общей белой гаммы в тёплую: он про другую
   аудиторию — читает его родитель, а не ученик. Тёплая подложка
   и янтарная рамка отделяют его от взрослой части страницы, но цвет
   взят тот же, что у детской карточки цен, — новый в палитру не вводим. */
.kids{
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-6);align-items:center;
  background:linear-gradient(135deg,#FFF9EF 0%,#FFF4E2 100%);
  border:4px solid #F5A524;border-radius:var(--r-lg);padding:var(--s-6);
  position:relative;overflow:hidden;
}
.kids .photo{aspect-ratio:16/11;border-radius:var(--r-md)}
.kids h2{margin-bottom:var(--s-2)}
.kids .eyebrow{color:#B45309}
.kids__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-4)}
/* Кнопка в детском блоке — янтарная, чтобы не спорила с фоном.
   Зелёная на тёплом фоне выглядела чужой. */
.kids .btn--dark{background:#B45309}
.kids .btn--dark:hover{background:#92400E}
.kids .btn--ghost{border-color:#F5A524;color:#92400E}
.kids .btn--ghost:hover{border-color:#B45309;background:rgba(180,83,9,.06)}

/* ====================== FAQ ====================== */
.faq{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
/* Вопросы были рядом одинаковых серых полос — их проглядывали, а не
   читали. Теперь у каждого своя цветная кромка слева и цветной шеврон;
   открытый вопрос заливается своим тоном. Тона идут по кругу из четырёх
   цветов страницы: зелёный, бирюза, янтарь, синий. Цвет здесь не несёт
   смысла, он только помогает не потерять строку глазами. */
.faq__i{
  background:var(--card);border:1px solid var(--border);border-left:5px solid var(--ftone);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease);
}
.faq__i:nth-child(4n+1){--ftone:#157A4A;--ftone-bg:#EDF7F2}
.faq__i:nth-child(4n+2){--ftone:#0F766E;--ftone-bg:#EAF6F4}
.faq__i:nth-child(4n+3){--ftone:#D97706;--ftone-bg:#FFF7EB}
.faq__i:nth-child(4n+4){--ftone:#1E4E8C;--ftone-bg:#EEF3FB}
.faq__i:hover{box-shadow:var(--shadow-sm)}
.faq__i.is-open{background:var(--ftone-bg);box-shadow:var(--shadow-md)}
.faq__i.is-open .faq__q{color:var(--ftone)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 24px;background:transparent;border:0;text-align:left;
  font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:1.4;
}
/* Шеврон в кружке своего тона: у ряда одинаковых строк это единственная
   деталь, по которой видно, что строка нажимается. */
.faq__q svg{
  width:30px;height:30px;padding:6px;flex:none;box-sizing:content-box;
  border-radius:50%;background:var(--ftone-bg);color:var(--ftone);
  transition:transform .3s var(--ease),background-color .2s var(--ease);
}
.faq__i.is-open .faq__q svg{transform:rotate(180deg);background:var(--ftone);color:#fff}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq__a p{padding:0 24px 24px;font-size:var(--fs-md);color:var(--muted-fg)}

/* ====================== ПОДБОР ЗАНЯТИЙ (КВИЗ) ====================== */
/* Визуальный язык берём готовый: белая карточка на приглушённой секции,
   как .card и .faq__i. Новых приёмов не вводим. */
/* Подбор — главное действие страницы, а выглядел он как обычная белая
   карточка на светлой секции: собственного веса у него не было.
   С 31.08.2026 он выделен тремя средствами, каждое со своей работой:
   рамка в цвет кнопок отделяет карточку от фона, цветная шапка сверху
   показывает, что это инструмент, а не текстовый блок, тень поднимает
   его над секцией. Заливать саму карточку цветом нельзя — на ней
   стоят варианты ответа, и они должны читаться как кнопки. */
.quiz{
  max-width:900px;margin:0 auto;background:var(--card);
  border:3px solid var(--brand);border-radius:var(--r-lg);
  padding:0 0 var(--s-5);box-shadow:0 22px 50px rgba(12,45,30,.16);overflow:hidden;
}
/* Шапка карточки: полоса цвета кнопок с прогрессом и номером шага.
   Прогресс на ней белый — на цветном фоне он виден куда лучше, чем
   прежняя тонкая серая полоска на белом. */
.quiz__head{
  display:flex;align-items:center;gap:18px;margin-bottom:var(--s-4);
  background:var(--brand);padding:18px var(--s-5);
}
.quiz__bar{flex:1;height:8px;background:rgba(255,255,255,.28);border-radius:var(--r-full);overflow:hidden}
.quiz__bar i{display:block;height:100%;width:0;background:#fff;border-radius:var(--r-full);transition:width .3s var(--ease)}
.quiz__step{font-size:var(--fs-md);font-weight:var(--fw-bold);color:#fff;white-space:nowrap}
/* Внутренности карточки идут со своими полями: у самой карточки
   их больше нет, иначе цветная шапка не дошла бы до краёв. */
.quiz>*:not(.quiz__head){padding-left:var(--s-5);padding-right:var(--s-5)}
.quiz h3{margin-bottom:6px}
.quiz h3:focus-visible{outline-offset:6px}
/* Строка «зачем спрашиваем» — обязательная часть каждого вопроса: человек
   отвечает про пол и возраст, и без причины это выглядит навязчиво. */
.quiz__why{font-size:var(--fs-ui);color:var(--muted-fg);margin-bottom:var(--s-3)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Раскладка задаётся у вопроса, а не по числу вариантов: «кто будет
   обучаться» — три коротких варианта в ряд, время — плитками по 150px. */
.opts--three{grid-template-columns:repeat(3,1fr)}
.opts--time{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* Варианты ответа — это кнопки, и выглядеть должны как кнопки: рамка
   в два пикселя, светлая подложка, заметный отклик на курсор. Прежние
   тонкие серые карточки на белом читались как список, и по ним
   не хотелось нажимать. */
.opt{
  display:block;width:100%;text-align:left;padding:18px 20px;
  background:var(--accent-50);border:2px solid transparent;border-radius:var(--r-md);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.opt:hover{border-color:var(--brand);background:#fff;transform:translateY(-3px);box-shadow:0 12px 24px rgba(12,45,30,.14)}
.opt b{display:block;font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:var(--lh-head)}
.opt span{display:block;margin-top:4px;font-size:var(--fs-md);color:var(--muted-fg);line-height:var(--lh-snug)}
.quiz__back{margin-top:var(--s-3);padding:4px 0;background:none;border:0;font-size:var(--fs-ui);font-weight:var(--fw-semi);color:var(--muted-fg)}
.quiz__back:hover{color:var(--accent)}
.quiz__note{margin-top:var(--s-3)}
.res__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-3)}
.chip{
  display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--r-full);
  background:var(--primary-50);color:var(--primary);font-size:var(--fs-small);font-weight:var(--fw-bold);
}
/* «изменить» в плашке готового ответа: ответ проставила кнопка «Записаться»,
   и человек должен видеть, что может ответить на этот вопрос сам. Ссылкой,
   а не кнопкой: рядом стоят варианты ответа, второй кнопке там не место. */
.chip__x{
  margin-left:8px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:var(--fw-reg);color:inherit;opacity:.75;
  text-decoration:underline;text-underline-offset:2px;
}
.chip__x:hover{opacity:1}
/* Форма контактов в конце подбора. Поля, ошибки и экран «Заявка отправлена»
   берут готовые классы формы внизу страницы — .field, .checkbox, .form__err,
   .form__ok. Отдельного оформления у неё нет. */
.quiz__form{margin-top:var(--s-3)}
.quiz__fields{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-3)}

/* ====================== ФОРМА ====================== */
.cta{background:var(--primary);color:#fff;position:relative;overflow:hidden}
.cta__patt{position:absolute;inset:0;opacity:.06;color:#fff;pointer-events:none}
.cta .container{position:relative;z-index:1}
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:center}
.cta h2{color:#fff;margin-bottom:var(--s-3)}
.cta .lead{color:rgba(255,255,255,.76)}
.cta__list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.cta__list li{display:flex;gap:11px;font-size:var(--fs-md);color:rgba(255,255,255,.88)}
.cta__list svg{width:20px;height:20px;color:var(--accent-on-dark);flex:none;margin-top:3px}
.form{background:var(--white);color:var(--ink);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow-lg)}
.form h3{margin-bottom:6px;font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.form__sub{font-size:var(--fs-ui);color:var(--muted-fg);margin-bottom:var(--s-4)}
.field{margin-bottom:var(--s-3)}
.field label{display:block;margin-bottom:7px;font-size:var(--fs-ui);font-weight:var(--fw-bold)}
.field input[type=text],.field input[type=tel],.field select{
  width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-sm);
  /* 16px — нижняя граница: при меньшем размере iOS сам зумит страницу на фокусе */
  background:var(--bg);font-family:inherit;font-size:var(--fs-md);color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease);
  min-height:52px;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--primary);background:var(--white);box-shadow:0 0 0 4px rgba(21,122,74,.12)}
.field.has-err input,.field.has-err select{border-color:#C2410C;background:#FFF7ED}
.field .hint{margin-top:6px;font-size:var(--fs-small);color:var(--muted-fg);line-height:var(--lh-snug)}
.field .err{display:none;margin-top:6px;font-size:var(--fs-small);font-weight:var(--fw-semi);color:#9A3412}
.field.has-err .err{display:block}
.checkbox{display:flex;gap:11px;align-items:flex-start;margin-bottom:var(--s-3)}
.checkbox input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--primary);cursor:pointer}
.checkbox label{font-size:var(--fs-small);color:var(--muted-fg);line-height:var(--lh-snug)}
.checkbox a{text-decoration:underline}
.checkbox.has-err label{color:#9A3412}
.form__err{display:none;margin-bottom:var(--s-3);padding:14px 16px;border:1px solid #FDBA74;background:#FFF7ED;border-radius:var(--r-sm);color:#9A3412;font-size:var(--fs-ui);font-weight:var(--fw-semi)}
.form__err.is-on{display:block}
.form__err ul{margin:8px 0 0;padding-left:18px}
.form__ok{display:none;text-align:center;padding:var(--s-4) 0}
.form__ok.is-on{display:block}
.form__ok .okico{width:64px;height:64px;margin:0 auto var(--s-2);border-radius:50%;background:rgba(21,122,74,.08);color:var(--primary);display:flex;align-items:center;justify-content:center}
.form__ok .okico svg{width:32px;height:32px}
.form__ok b{display:block;font-size:var(--fs-xl);font-weight:var(--fw-bold);margin-bottom:8px}
.form__ok p{font-size:var(--fs-md);color:var(--muted-fg)}
.btn.is-loading{opacity:.75;pointer-events:none}
.form__foot{margin-top:14px;font-size:var(--fs-small);color:var(--muted-fg);text-align:center}

/* ====================== ФУТЕР ====================== */
/* ФУТЕР СВЕТЛЫЙ — решение Шарифа 31.08.2026. До этого он был тёмно-
   зелёным и стоял сразу под тёмно-зелёным блоком формы: два близких
   тёмных тона подряд глаз читает как одно длинное пятно, и граница
   между ними дрожит. Развели по светлоте, а не по оттенку — подбирать
   «два приятных зелёных» бессмысленно, проблема была не в цвете.
   Заодно ушла подпорка: знак академии тёмный, и на светлом фоне он
   читается сам, без белого круга под ним. */
.ftr{
  background:var(--muted);color:var(--muted-fg);
  border-top:1px solid var(--border);padding:var(--s-6) 0 var(--s-4);
}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-5);padding-bottom:var(--s-5);border-bottom:1px solid var(--border)}
.ftr .logo__name{color:var(--primary)}
.ftr .logo__sub{color:var(--muted-fg)}
.ftr p{font-size:var(--fs-md);margin-top:var(--s-2);max-width:380px;line-height:var(--lh-body)}
.ftr h4{margin:0 0 var(--s-2);color:var(--ink);letter-spacing:.02em}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-ui)}
.ftr a:hover{color:var(--accent)}
.ftr__contact{display:flex;align-items:center;gap:10px}
.ftr__contact svg{width:18px;height:18px;color:var(--accent);flex:none}
.ftr__phone{font-size:var(--fs-lg);font-weight:var(--fw-black);color:var(--primary);letter-spacing:0}
/* Нижняя строка футера. Раньше здесь была прозрачность по белому —
   после перевода футера на светлый фон цвет взят токеном --muted-fg,
   у него к #F4F8F6 контраст 7,4:1. */
.ftr__bottom{padding-top:var(--s-3);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:var(--fs-small);color:var(--muted-fg)}

/* ====================== ПЛАВАЮЩАЯ КНОПКА ====================== */
.fab{
  position:fixed;right:24px;bottom:24px;z-index:50;
  display:inline-flex;align-items:center;gap:10px;padding:15px 22px;min-height:56px;
  /* Цвет знака, как у всех кнопок записи. Стояла на --accent — акценте
     мелких деталей: плавающая кнопка выходила светлее кнопки на первом
     экране, хотя зовёт туда же. Все CTA держать на --brand. */
  border:0;border-radius:var(--r-full);background:var(--brand);color:#fff;
  font-weight:var(--fw-bold);font-size:var(--fs-md);box-shadow:0 12px 30px rgba(12,45,30,.34);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background-color .2s var(--ease);
}
.fab.is-on{opacity:1;visibility:visible;transform:none}
.fab:hover{background:var(--brand-600)}
.fab svg{width:21px;height:21px}

/* ====================== ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ====================== */
.rev-up{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rev-up.is-in{opacity:1;transform:none}

/* ====================== АДАПТИВ ====================== */
@media (max-width:1200px){
  .nav{gap:16px}
}
/* Пунктов в меню стало шесть (добавился «Подбор»), и в полосе 1024–1100px
   навигация вместе с телефоном и кнопкой перестаёт помещаться. Поэтому
   шапка сворачивается в бургер на 1100px, а не на 1024, как раньше.
   Остальные правила планшета остаются на 1024. */
@media (max-width:1100px){
  .nav{display:none}
  .hdr__phone{display:none}
  .hdr .btn--accent{display:none}
  .burger{display:inline-flex}
  .hdr__inner{justify-content:space-between}
}
@media (max-width:1024px){
  :root{--hdr-h:70px}
  .hdr__side{gap:10px}
  .hero__grid{grid-template-columns:1fr;gap:var(--s-5)}
  .hero__media{max-width:520px;margin:0 auto;width:100%}
  /* Прежнее left:0 сдвигало плашку в левый край. Теперь она центрируется
     и на планшете — правило больше не нужно, но и добавлять сюда сдвиг
     нельзя: центрирование живёт в transform. */
  .steps,.cards,.feats,.flow,.revs{grid-template-columns:repeat(2,1fr)}
  /* Две колонки: широкая карточка занимает всю ширину и один ряд,
     остальные пять встают парами. Фото рядом с текстом ещё помещается. */
  .why{grid-template-columns:repeat(2,1fr)}
  .why__main{grid-column:span 2;grid-row:span 1}
  .courses__grid{grid-template-columns:repeat(2,1fr)}
  .flow__i::after{display:none}
  .teach__grid,.kids,.cta__grid{grid-template-columns:1fr;gap:var(--s-5)}
  /* Портретное фото под текстом во всю ширину планшета выросло бы до ~780px
     по высоте и заняло почти экран — ограничиваем и центрируем. */
  .teach__media{max-width:460px;margin:0 auto}
  .teach{padding:var(--s-5)}
  .kids{padding:var(--s-5)}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  /* На мобильном уменьшается вся шкала сразу, а не отдельные правила:
     иначе базовый текст падает до 16px, а подписи остаются 15.5px и
     оказываются почти вровень с ним. Ниже 16px тут не опускаемся. */
  /* --fs-accent на шаг ниже --fs-lg: иначе в блоке доверия заголовок
     и пояснение под ним на телефоне сравняются по размеру. */
  :root{--fs-body:16px;--fs-lg:18px;--fs-xl:21px;--fs-accent:17px}
  .sec{padding:var(--s-6) 0}
  .sec__head{margin-bottom:var(--s-5)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps,.cards,.feats,.flow,.revs{grid-template-columns:1fr}
  /* Телефон: одна колонка, фото уезжает над текстом. Ограничение
     по ширине — чтобы вертикальный кадр не вырос на весь экран. */
  .why{grid-template-columns:1fr}
  .why__main{grid-column:span 1;grid-template-columns:1fr;gap:var(--s-3)}
  .why__photo{max-width:320px;margin:0 auto;width:100%}
  .courses__grid{grid-template-columns:1fr}
  .hero__trust{grid-template-columns:1fr;gap:18px;margin-top:var(--s-5)}
  .trust{max-width:none}
  /* Плашка уходит из угла фото под него: начиная с планшета карточка шириной
     86% закрывает почти весь кадр и лицо преподавателя. Так же решено
     для .hero__float на первом экране. */
  .teach__card{position:static;max-width:none;margin-top:14px}
  .ftr__grid{grid-template-columns:1fr;gap:var(--s-4)}
  .hero{padding-top:calc(var(--hdr-h) + 34px);min-height:auto}
  /* На телефоне полоса складывается в столбик, стрелка разворачивается вниз:
     вбок ей указывать уже некуда. */
  /* На телефоне кнопка во всю ширину, указатель под её серединой. */
  .hero__cta{display:flex;margin-bottom:72px}
  .hero__cta .btn{width:100%}
  /* Сдвиг пересчитан под размер 56px: остриё лежит на 11.7px от левого
     края картинки, на него и центрируем. */
  .hero__cursor{width:56px;height:56px;bottom:-66px;translate:-12px 0}
  .form{padding:var(--s-4)}
  /* На телефоне поля ужимаются, но цветная шапка по-прежнему во всю
     ширину карточки — отсюда два правила вместо одного padding. */
  .quiz{padding:0 0 var(--s-4)}
  .quiz__head{padding:14px var(--s-4)}
  .quiz>*:not(.quiz__head){padding-left:var(--s-4);padding-right:var(--s-4)}
  /* Условия складываются в столбик, таблица — нет: у неё три колонки,
     и в одну её не свернуть без потери смысла. Она прокручивается вбок
     внутри .ptab__scroll, страница по горизонтали остаётся на месте. */
  .terms{grid-template-columns:1fr}
  .ptab th,.ptab td{padding:12px var(--s-2)}
  /* Время оставляем плитками: пять коротких вариантов в одну колонку —
     это пять экранов прокрутки на пустом месте. */
  .opts:not(.opts--time){grid-template-columns:1fr}
  .quiz__fields{grid-template-columns:1fr}
  .fab{right:16px;bottom:16px;padding:14px 18px}
}
@media (max-width:480px){
  .container{padding:0 18px}
  .logo__sub{display:none}
  /* Название длиннее прежнего «Школа Корана»: на 360px связка знак + название
     занимала 278px при 324px свободных, и вместе с бургером не помещалась.
     Ниже на шаг по шкале + разрешаем перенос на вторую строку про запас. */
  .logo{white-space:normal}
  .logo__name{font-size:var(--fs-ui)}
  /* Плашка уходит из кадра под фото: на 480px она закрывает почти весь
     снимок. Центрирующий сдвиг здесь обязательно снимать — при static
     он утащил бы плашку на пол-ширины влево. */
  .hero__float{position:static;max-width:none;margin-top:14px;transform:none}
  .hero__media:hover .hero__float,
  .hero__float:hover{transform:translateY(-4px)}
  .teach__media{max-width:none}
  .fab span{display:none}
  .fab{padding:16px;border-radius:50%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rev-up{opacity:1;transform:none}
  /* Стрелку и ленту гасим именно так, а не сжатой длительностью:
     зацикленные кадры по .01ms дают дрожание вместо остановки. Поворот
     стрелки на телефоне держится на свойстве rotate и не теряется.
     Лента при этом остаётся читаемой: видно её начало. */
  .hero__cursor{animation:none!important}
  .marquee__track{animation:none!important}
  /* Дорожку останавливаем на средней высоте, а не на сжатой: полоски
     должны остаться похожими на звук, просто без движения. */
  .live i{animation:none!important;transform:scaleY(.7)}
}

/* ====================== ДОКУМЕНТЫ ======================
   policy.html и oferta.html: только текст, без подбора и без скрипта.
   Оформление намеренно скупое — документ читают, а не разглядывают.
   Колонка 760px: на строке длиннее глаз теряет начало следующей.

   Шапка здесь своя, .doc__hdr, а не общая .hdr: у общей есть бургер
   и мобильное меню, а их открывает script.js, которого на этих
   страницах нет. Ссылки в ней ведут на главную, а не на якоря. */
.doc__hdr{
  position:sticky;top:0;z-index:50;background:var(--card);
  border-bottom:1px solid var(--border)
}
.doc__hdr .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:72px}
.doc{padding:var(--s-5) 0 var(--s-6)}
.doc__wrap{max-width:760px;margin:0 auto}
.doc h1{font-size:var(--fs-h2);line-height:var(--lh-tight);margin-bottom:var(--s-1)}
.doc__meta{color:var(--muted-fg);font-size:var(--fs-ui);margin-bottom:var(--s-4)}
.doc h2{font-size:var(--fs-xl);line-height:var(--lh-head);margin:var(--s-4) 0 var(--s-2)}
.doc h3{font-size:var(--fs-lg);margin:var(--s-3) 0 var(--s-1)}
.doc p{font-size:var(--fs-body);line-height:var(--lh-body);margin-bottom:var(--s-2)}
.doc ul,.doc ol{margin:0 0 var(--s-2);padding-left:24px;display:flex;flex-direction:column;gap:10px}
.doc li{font-size:var(--fs-body);line-height:var(--lh-body)}
.doc a{color:var(--accent);text-decoration:underline}
.doc a:hover{color:var(--accent-600)}
/* Врезка с реквизитами и контактами: её ищут глазами, поэтому отделена
   подложкой, а не просто абзацем. */
.doc__box{
  background:var(--muted);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s-3);margin:var(--s-3) 0
}
.doc__box p:last-child{margin-bottom:0}
.doc__back{display:inline-block;margin-top:var(--s-4)}

@media (max-width:640px){
  .doc__hdr .container{min-height:64px}
  .doc__hdr .logo__sub{display:none}
  .doc{padding:var(--s-4) 0 var(--s-5)}
}