/* ============================================================
   Сайт InsideProject — общие стили

   Тема под логотип (23.08.2026): чёрно-белая, засечные заголовки,
   тёплый нейтральный свет вверху страницы. Внешних библиотек,
   шрифтов и счётчиков нет намеренно: продукт торгует защитой
   данных и не сливает их на чужие серверы.

   Лёгкость и полупрозрачность держатся на трёх вещах: мягкие пятна
   в фоне, полупрозрачные фоны блоков и много воздуха между разделами.
   Размытия фона (backdrop-filter) на странице больше нет — почему,
   написано ниже, у пятен.
   ============================================================ */

:root {
  /* Гамма под логотип: строгая чёрно-белая монограмма с засечками.
     Цвета нет намеренно — «цветом» работают только фотографии экранов
     кабинета и статусы проверок. Живость даёт свет, а не краска. */
  --seryy-tepl: #E8E5DE;   /* тёплый нейтральный — верх страницы */
  --seryy: #DCD9D2;
  --seryy-svet: #F2F1ED;
  --seryy-blednyy: #F8F7F5;

  --fon: #FFFFFF;
  --poverhnost: #F8F7F5;
  --liniya: #E4E2DD;

  --text: #121212;
  --text-dim: #56534E;
  --text-faint: #8D8A83;

  --accent: #121212;
  --accent-tomn: #000000;
  --ok: #2F6B4F;
  --stop: #9B3A32;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* Засечный — как в логотипе. Только системные шрифты: ничего не грузится извне. */
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Две ширины: узкая под текст (читать длинные строки тяжело)
     и широкая под таблицы, карточки и макеты. */
  --uzko: 720px;
  --shiroko: 1080px;

  --radius: 14px;
  --radius-m: 10px;

  --ten: 0 8px 32px rgba(18, 18, 18, .07);
  --ten-vyshe: 0 18px 48px rgba(18, 18, 18, .13);
}

* { box-sizing: border-box; }

/* ── живой фон: мягкие пятна, из-за которых стекло видно ──
   Без них эффект стекла не читается: размывать нечего.
   Пятна медленно дышат — страница перестаёт быть картинкой. */
.pyatna {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* ── Почему тормозило и что с этим сделали ──
   23.08.2026 Лия сказала, что сайт работает с задержками.

   Причина: на главной больше двадцати блоков имели backdrop-filter —
   размытие того, что лежит под ними. Это самый дорогой эффект в браузере:
   он пересчитывается заново на каждом кадре прокрутки, а один из таких
   блоков — прилипшая шапка, видимая всегда.

   Разработчик в тот же день остановил движение пятен — это сняло часть
   нагрузки, но не причину. 23.08 размытие убрано отовсюду: под блоками
   почти везде ровная заливка, размывать там нечего, поэтому глазом
   разницы нет. Полупрозрачность и лёгкость остались.

   Пятна пока стоят неподвижно. Теперь, без размытий, движение снова
   стоит дёшево — вернуть можно, но только с замером на живой машине,
   а не «на глаз». */
.pyatno {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
}
.pyatno.a {
  width: 46vw; height: 46vw; background: #DAD6CC;
  top: -12vw; left: -8vw;
}
.pyatno.b {
  width: 38vw; height: 38vw; background: #D5D8DC;
  top: 6vw; right: -10vw; opacity: .45;
}
.pyatno.c {
  width: 32vw; height: 32vw; background: #E0DCD3;
  top: 46vw; left: 30vw; opacity: .3;
}
.pyatno.d {
  width: 26vw; height: 26vw; background: #D8D5CE;
  top: 120vw; right: 4vw; opacity: .28;
}


body {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;

  /* Градиент лежит на самой странице, а не на экране: сиреневый вверху,
     к середине первого экрана уходит в белое и больше не возвращается.
     Если сделать fixed — сиреневое всплывает при каждой прокрутке. */
  background-color: var(--fon);
  background-image:
    linear-gradient(180deg,
      var(--seryy-tepl) 0%,
      #EFEDE7 22%,
      var(--seryy-blednyy) 55%,
      var(--fon) 100%);
  background-repeat: no-repeat;
  background-size: 100% 900px;
}

/* Узкая полоса — для текста. Широкая — для таблиц, карточек, макетов. */
.wrap { max-width: var(--uzko); margin: 0 auto; padding: 0 1.5rem; }
.shir { max-width: var(--shiroko); margin: 0 auto; padding: 0 1.5rem; }

/* Внутри широкой полосы текст всё равно держим узким: длинные строки не читают. */
.shir > p,
.shir > ul,
.shir > ol,
.shir > h2,
.shir > h3,
.shir > .vrezka { max-width: var(--uzko); }

/* ── стекло ───────────────────────────────────────────
   Полупрозрачная поверхность, размывающая то, что под ней.
   Обязательно с запасным фоном: где backdrop-filter не работает,
   остаётся плотный светлый прямоугольник, а не мутное пятно. */
.steklo {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--ten);
  border-radius: var(--radius);
}


/* ── шапка ───────────────────────────────────────────── */
.shapka {
  padding: .85rem 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--liniya);
}
/* У шапки размытия нет намеренно: она висит при прокрутке, и размывать
   под ней пришлось бы каждый кадр — это самый дорогой случай на странице. */
/* .wrap здесь тоже нужен: отраслевые страницы пока на узкой полосе. */
.shapka .shir, .shapka .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.logo { font-family: var(--serif); font-weight: 600; letter-spacing: 0;  font-size: 1.1rem; letter-spacing: -.015em; color: var(--text); text-decoration: none; }
.shapka nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.shapka nav a { color: var(--text-dim); text-decoration: none; font-size: .9rem; transition: color .15s ease; }
.shapka nav a:hover, .shapka nav a:focus-visible { color: var(--accent-tomn); }

/* ── первый экран ────────────────────────────────────── */
.pervyy { padding: 4.5rem 0 4rem; }
.pervyy h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -.032em;
  margin: 0 0 1.4rem;
  font-weight: 680;
  max-width: 15ch;
}
.pervyy .lid {
  color: var(--text-dim);
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  max-width: 46ch;
  line-height: 1.55;
}
.pervyy .svoy {
  display: inline-block;
  padding: .55rem .95rem;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  font-size: .9rem;
  color: var(--text-dim);
  box-shadow: 0 4px 18px rgba(18, 18, 18, .08);
}

/* три коротких маркера под первым экраном */
.markery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .9rem;
  margin-top: 2.75rem;
}
.marker {
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 6px 22px rgba(18, 18, 18, .07);
}
.marker b { display: block; font-size: .95rem; margin-bottom: .25rem; }
.marker span { font-size: .87rem; line-height: 1.45; color: var(--text-dim); display: block; }


/* ── содержание ──────────────────────────────────────── */
main { padding: 1rem 0 5rem; }

section { margin: 0 0 5rem; }
section:last-child { margin-bottom: 0; }

/* Надстрочная метка раздела — вместо линейки под заголовком:
   линейка делала страницу похожей на документ. */
.metka {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .55rem;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3.3vw, 2.05rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: 0 0 1.1rem;
  font-weight: 600;
  max-width: 22ch;
}
h3 { font-size: 1.08rem; margin: 2rem 0 .5rem; font-weight: 640; letter-spacing: -.01em; }

p { margin: 0 0 1.1rem; }
ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
li { margin-bottom: .55rem; }
li::marker { color: var(--seryy); }
b, strong { font-weight: 640; }

.vedomo { color: var(--text-dim); }
.podzag { color: var(--text-dim); font-size: 1.05rem; max-width: 52ch; }

/* ── таблицы ─────────────────────────────────────────── */
.scroll { overflow-x: auto; margin: 0 0 1.25rem; -webkit-overflow-scrolling: touch; }
table {
  border-collapse: collapse; width: 100%; font-size: .95rem;
  border-radius: var(--radius); overflow: hidden;
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--ten);
}
th, td { text-align: left; padding: .8rem .95rem; border-bottom: 1px solid var(--liniya); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); font-weight: 650; white-space: nowrap;
  background: rgba(242, 241, 237, .85);
}
td:first-child { font-weight: 600; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: rgba(248, 247, 245, .85); }

/* ── врезки ──────────────────────────────────────────── */
.vrezka {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .7);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(18, 18, 18, .08);
  padding: 1.15rem 1.3rem;
  margin: 0 0 1.4rem;
}
.vrezka p:last-child { margin-bottom: 0; }
.chestno { border-left-color: var(--stop); }

/* ── карточки: «что внутри» и подобные ───────────────── */
.kartochki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1rem;
}
.kartochka {
  padding: 1.3rem 1.35rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 6px 22px rgba(18, 18, 18, .07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kartochka:hover { transform: translateY(-3px); box-shadow: var(--ten-vyshe); }
.kartochka h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.kartochka p { margin: 0; font-size: .94rem; color: var(--text-dim); }
.kartochka p + p { margin-top: .7rem; }

/* ── три уровня: что есть, что настраивается, что добавляется ── */
.urovni { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.uroven {
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .52);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: 0 8px 28px rgba(18, 18, 18, .08);
  border-top: 3px solid var(--seryy);
}
.uroven.est { border-top-color: var(--ok); }
.uroven { border-top-color: var(--liniya); }
.uroven.nastroyka { border-top-color: var(--accent); }
.uroven.dobavlyaem { border-top-color: var(--seryy); }
.uroven .shag { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.uroven h3 { margin: .35rem 0 .3rem; font-size: 1.1rem; }
.uroven .tsena { font-size: .84rem; color: var(--text-dim); margin-bottom: .85rem; display: block; }
.uroven ul { margin: 0; padding-left: 1.1rem; font-size: .93rem; }
.uroven li { margin-bottom: .42rem; color: var(--text-dim); }
.uroven li b { color: var(--text); }

/* ── шаги ────────────────────────────────────────────── */
ol.shagi { counter-reset: sh; list-style: none; padding: 0; margin: 0; }
/* Номер лежит поверх, а не отдельной колонкой сетки.
   Через grid было нельзя: <b> внутри пункта становился отдельной
   ячейкой и текст разъезжался на две строки сетки. */
ol.shagi li {
  counter-increment: sh;
  position: relative;
  padding-left: 3.1rem;
  margin-bottom: 1.15rem;
  min-height: 1.95rem;
}
ol.shagi li::before {
  content: counter(sh);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.95rem;
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 640;
  color: var(--fon);
  background: var(--accent);
  border-radius: 8px;
  height: 1.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(18, 18, 18, .3);
}

/* ── отрасли ─────────────────────────────────────────── */
.otrasli { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.otrasl {
  display: block;
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 6px 22px rgba(18, 18, 18, .07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
a.otrasl:hover, a.otrasl:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ten-vyshe);
  border-color: rgba(18, 18, 18, .5);
  background: rgba(255, 255, 255, .72);
}
.otrasl b { display: block; margin-bottom: .3rem; }
.otrasl span { display: block; font-size: .89rem; color: var(--text-dim); }
/* Направление, страница которого ещё пишется: не ссылка, а карточка. */
.otrasl.gotovitsya { opacity: .78; }
.otrasl .skoro {
  display: inline-block; margin-top: .6rem;
  font-size: .74rem; letter-spacing: .04em;
  color: var(--text-dim); background: var(--seryy-svet);
  padding: .12rem .45rem; border-radius: 999px;
}

/* ── призыв ──────────────────────────────────────────── */
.prizyv {
  border-radius: var(--radius);
  padding: 2.25rem;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: 0 12px 40px rgba(18, 18, 18, .13);
}
.prizyv h2 { margin-bottom: .9rem; }

.svyaz {
  font-family: var(--mono); font-size: .85rem; margin: 1.1rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
/* Почта — единственный контакт: Telegram-бота пока нет, обещать его нельзя. */
.pochta {
  display: inline-block;
  padding: .3rem .65rem;
  border-radius: 8px;
  font-size: .85rem;
  background: rgba(18, 18, 18, .1);
  border: 1px solid rgba(18, 18, 18, .35);
  color: var(--accent-tomn);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.pochta:hover, .pochta:focus-visible {
  background: rgba(18, 18, 18, .18);
  border-color: var(--accent);
}
.zaglushka {
  background: var(--seryy-svet);
  color: var(--text-dim);
  padding: .12rem .4rem;
  border-radius: 4px;
}

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

/* ── подвал ──────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--liniya);
  padding: 1.75rem 0 3.5rem;
  font-size: .85rem;
  color: var(--text-faint);
}
footer a { color: var(--text-dim); }

a { color: var(--accent-tomn); text-decoration-color: rgba(18, 18, 18, .35); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   Макет кабинета — как он может выглядеть у заказчика.
   Это рисунок из блоков, а не снимок экрана: никаких данных.
   Разделы подписаны настоящими словами, цифр нет намеренно —
   выдуманная цифра на витрине читается как обещание.
   ============================================================ */

.makety { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }

.maket {
  --m-fon: #131F2E;
  --m-panel: #1A2939;
  --m-liniya: #2E4157;
  --m-text: #E6ECF5;
  --m-dim: #9BADC4;
  --m-akcent: #E8A33D;

  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 12px 34px rgba(18, 18, 18, .17);
  background: var(--m-fon);
  transition: transform .22s ease, box-shadow .22s ease;
}
.maket:hover { transform: translateY(-5px); box-shadow: 0 22px 52px rgba(18, 18, 18, .24); }

/* варианты оформления */
.maket.svetlyy {
  --m-fon: #FFFFFF; --m-panel: #F4F3FC; --m-liniya: #E2DFF4;
  --m-text: #1E1B33; --m-dim: #6B6690; --m-akcent: #6B5CE7;
}
.maket.brend {
  --m-fon: #0F2A22; --m-panel: #143528; --m-liniya: #24503C;
  --m-text: #E7F3EC; --m-dim: #9CC0AE; --m-akcent: #4CC38A;
}

.maket-verh {
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem .75rem;
  background: var(--m-panel);
  border-bottom: 1px solid var(--m-liniya);
}
.maket-verh i { width: 8px; height: 8px; border-radius: 50%; background: var(--m-liniya); display: block; }
.maket-verh span { margin-left: .5rem; font-size: .68rem; color: var(--m-dim); font-family: var(--mono); }

.maket-telo { display: grid; grid-template-columns: 104px 1fr; min-height: 232px; }

.maket-menu { background: var(--m-panel); border-right: 1px solid var(--m-liniya); padding: .6rem .55rem; }
.maket-menu b {
  display: block; font-size: .55rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--m-akcent); margin-bottom: .5rem;
}
.maket-menu u {
  display: block; text-decoration: none;
  font-size: .6rem; line-height: 1.5; color: var(--m-dim);
  padding: .16rem .3rem; border-radius: 4px; margin-bottom: .12rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.maket-menu u.on { background: var(--m-akcent); color: var(--m-fon); font-weight: 640; opacity: .95; }

.maket-holst { padding: .7rem .75rem; }

/* Шапка экрана: название раздела и период */
.maket-shapka {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin-bottom: .7rem; padding-bottom: .45rem; border-bottom: 1px solid var(--m-liniya);
}
.maket-shapka b { font-size: .78rem; color: var(--m-text); font-weight: 650; }
.maket-shapka span { font-size: .62rem; color: var(--m-dim); font-family: var(--mono); }

/* Плитки с итогами. Суммы выдуманные — так и подписано под макетом. */
.maket-plitki { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .7rem; }
.maket-plitka { border: 1px solid var(--m-liniya); border-radius: 6px; padding: .42rem .5rem; }
.maket-plitka i {
  display: block; font-style: normal; font-size: .55rem; letter-spacing: .02em;
  color: var(--m-dim); margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.maket-plitka b { display: block; font-size: .72rem; color: var(--m-text); font-weight: 650; white-space: nowrap; }
.maket-plitka.vydelena { border-color: var(--m-akcent); }
.maket-plitka.vydelena b { color: var(--m-akcent); }

/* Список проверок: семь зелёных и одна красная — она и держит период */
.maket-proverki {
  display: grid; grid-template-columns: 1fr 1fr; gap: .18rem .7rem;
  margin-bottom: .75rem;
}
.maket-proverka {
  display: flex; align-items: center; gap: .35rem;
  font-size: .58rem; line-height: 1.35; color: var(--m-dim);
}
.maket-proverka span { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #3FA36B; }
.maket-proverka.stop { color: #F09A94; font-weight: 600; }
.maket-proverka.stop span { background: #D2544C; }

/* Таблица */
.maket-tablica { border-top: 1px solid var(--m-liniya); padding-top: .45rem; }
.maket-stroka {
  display: grid; grid-template-columns: 1.5fr .55fr 1.1fr 1fr; gap: .4rem;
  align-items: center; padding: .2rem 0;
  font-size: .6rem; color: var(--m-text);
}
.maket-stroka + .maket-stroka { border-top: 1px solid var(--m-liniya); }
.maket-stroka span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maket-stroka.shapkastroki {
  font-size: .53rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--m-dim); border-top: 0;
}
.maket-stroka .sovpalo { color: #3FA36B; }
.maket-stroka .rashozhdenie { color: #E0736B; font-weight: 640; }
.maket.svetlyy .maket-stroka .sovpalo { color: #2F7D5B; }
.maket.svetlyy .maket-stroka .rashozhdenie { color: #B23B33; }
.maket.svetlyy .maket-proverka.stop { color: #B23B33; }

/* Крупный макет — во всю ширину, с проверками */
.maket.krupnyy { margin-bottom: 2.5rem; }
.maket.krupnyy .maket-telo { grid-template-columns: 168px 1fr; min-height: 400px; }
.maket.krupnyy .maket-menu u { font-size: .68rem; padding: .26rem .45rem; margin-bottom: .1rem; }
.maket.krupnyy .maket-menu b { font-size: .6rem; }
.maket.krupnyy .maket-holst { padding: 1rem 1.15rem; }
.maket.krupnyy .maket-shapka b { font-size: 1rem; }
.maket.krupnyy .maket-shapka span { font-size: .74rem; }
.maket.krupnyy .maket-plitka { padding: .7rem .8rem; }
.maket.krupnyy .maket-plitka i { font-size: .68rem; margin-bottom: .3rem; }
.maket.krupnyy .maket-plitka b { font-size: 1.05rem; }
.maket.krupnyy .maket-proverka { font-size: .72rem; gap: .45rem; }
.maket.krupnyy .maket-proverka span { width: 7px; height: 7px; }
.maket.krupnyy .maket-stroka { font-size: .78rem; padding: .38rem 0; }
.maket.krupnyy .maket-stroka.shapkastroki { font-size: .64rem; }
.maket.krupnyy .maket-podpis { padding: 1rem 1.15rem 1.1rem; font-size: .9rem; }
.maket.krupnyy:hover { transform: none; }

/* Два оформления помельче, под крупным */
.vid-podzag { margin-top: 2.5rem; }
.makety.malye { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Подпись всегда светлая и непрозрачная: на тёмном макете
   полупрозрачная подложка давала серый текст на сером. */
.maket-podpis {
  padding: .85rem .95rem 1rem;
  background: #FFFFFF;
  font-size: .86rem;
  color: var(--text-dim);
  border-top: 1px solid var(--liniya);
}
.maket-podpis b { color: var(--text); display: block; font-size: .95rem; margin-bottom: .18rem; }

/* ============================================================
   Движение: блоки мягко появляются при прокрутке.
   Начальное состояние включается скриптом (класс .anim на body) —
   поэтому при выключенном JS всё видно сразу, ничего не пропадает.
   ============================================================ */
body.anim .voz {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .8, .3, 1), transform .7s cubic-bezier(.22, .8, .3, 1);
}
body.anim .voz.vidno { opacity: 1; transform: none; }

/* Кому движение мешает — тому его нет. Это не украшение, а требование доступности. */
@media (prefers-reduced-motion: reduce) {
  body.anim .voz { opacity: 1; transform: none; transition: none; }
  .pyatno { animation: none; }
  .maket:hover, .kartochka:hover, a.otrasl:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

/* ── телефон: письма читают с телефона, значит и придут с него ──
   Проверять обязательно на ширине 360 точек. */
@media (max-width: 700px) {
  body { font-size: 16px; background-size: 100% 620px; }
  .wrap, .shir { padding: 0 1.1rem; }
  .pervyy { padding: 2.5rem 0 2.5rem; }
  .pervyy h1 { max-width: none; }
  section { margin-bottom: 3.5rem; }
  .prizyv { padding: 1.4rem; }
  .shapka .shir, .shapka .wrap { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .shapka nav { gap: .9rem; }
  .shapka nav a { font-size: .84rem; }
  th, td { padding: .65rem .7rem; }

  /* На телефоне боковое меню съедает ширину, и экран обрезается.
     Поэтому меню переезжает наверх лентой, а содержимое занимает всю ширину. */
  .maket-telo, .maket.krupnyy .maket-telo { grid-template-columns: 1fr; min-height: 0; }
  .maket-menu {
    display: flex; gap: .3rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-right: 0; border-bottom: 1px solid var(--m-liniya); padding: .5rem .6rem;
  }
  .maket-menu b { display: none; }
  .maket-menu u, .maket.krupnyy .maket-menu u { margin: 0; white-space: nowrap; font-size: .68rem; }
  .maket-proverki { grid-template-columns: 1fr; gap: .22rem; }
  .maket.krupnyy .maket-holst { padding: .8rem .85rem; }
  .maket.krupnyy .maket-plitka { padding: .5rem .55rem; }
  .maket.krupnyy .maket-plitka i { font-size: .58rem; }
  .maket.krupnyy .maket-plitka b { font-size: .74rem; }
  .maket.krupnyy .maket-proverka { font-size: .66rem; }
  .maket-stroka, .maket.krupnyy .maket-stroka {
    grid-template-columns: 1.25fr .45fr 1fr .85fr; gap: .3rem; font-size: .64rem;
  }
  .maket-stroka.shapkastroki, .maket.krupnyy .maket-stroka.shapkastroki { font-size: .54rem; }
}