/* ВСТРОЙ — оформление сайта.
   Одна таблица стилей на все страницы. Внешних загрузок нет:
   шрифт лежит рядом, библиотек нет. Сайт открывается без сети.

   Основа оформления — сота. Шестиугольник встаёт в ряд с другими
   без зазора: это и есть «встроить». Пчелиная решётка — доказанно
   самый экономный способ поделить плоскость (гипотеза о сотах,
   доказана Хейлсом в 1999 году). Единственная метафора на сайте,
   которая сама себя проверяет.

   Два цвета несут поровну: бирюза держит структуру, медовый
   обозначает действие. Бирюза светится и потому годится для текста;
   медовое чаще заливка, и текст на ней тёмный. */

/* =========================== 1. Шрифт =========================== */

@font-face {
  font-family: "Onest";
  src: url("shrifty/onest-kirillica.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  src: url("shrifty/onest-latinica.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================== 2. Значения =========================== */

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

   Два цвета несут поровну: бирюза держит структуру, медовый обозначает
   действие. Третьего в оформлении нет. */

:root {
  --fon:            #070A10;
  --fon-2:          #0B1018;
  --poverhnost:     #0F1620;
  --poverhnost-2:   #141C28;

  --tekst:          #E8F1F5;
  --tekst-2:        #A3B6C6;
  --tekst-3:        #8296A8;

  --granica:        #1C2836;
  --granica-2:      #2B3B4E;

  --neon:           #2FF3E0;
  --neon-yark:      #7CFCF0;
  --neon-glub:      #06181A;
  --neon-svet:      #0B272A;
  --neon-svet-2:    #14413F;
  /* Контур приглушённой кнопки. Сплошной тёмно-бирюзовый на чёрном
     не виден вовсе; полупрозрачная бирюза читается и не спорит
     с главной кнопкой. */
  --neon-kontur:    rgba(47, 243, 224, .45);
  --na-neone:       #041312;

  --myod:           #FFD23F;
  --myod-glub:      #FFE27A;
  --myod-svet:      #2A2108;
  --myod-tekst:     #FFDD74;
  --na-myode:       #14100A;

  --uspeh:          #4FE08A;
  --uspeh-fon:      #0B2417;
  --trevoga:        #FF9F43;
  --trevoga-fon:    #2A1A0B;

  /* Углы. Мир инженера прямоугольный, но панель со свечением требует
     заметного радиуса — иначе свет скапливается в углу пятном. */
  --skrug-1: 9px;
  --skrug-2: 13px;
  --skrug-3: 15px;

  /* Тени не падают, а светятся. Второй слой — обычная чёрная тень:
     на чёрном фоне одним свечением карточку от подложки не отделить. */
  --ten-1: 0 1px 2px rgba(0, 0, 0, .5);
  --ten-2: 0 0 16px -6px var(--neon), 0 8px 28px rgba(0, 0, 0, .55);
  --ten-3: 0 0 26px -8px var(--neon), 0 18px 46px rgba(0, 0, 0, .65);
  --svet-neon: 0 0 11px -3px var(--neon);
  --svet-myod: 0 0 11px -3px var(--myod);

  --o-1: 4px;  --o-2: 8px;  --o-3: 12px; --o-4: 16px;
  --o-5: 24px; --o-6: 32px; --o-7: 48px; --o-8: 64px;
  --o-9: 96px; --o-10: 128px;

  --shirina: 1180px;
  --shirina-uzkaya: 760px;

  --shrift: "Onest", "Segoe UI", -apple-system, BlinkMacSystemFont,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Моноширинный несёт всё служебное: надписи, числа, кнопки, номера.
     Он системный — ни одной внешней загрузки на сайте по-прежнему нет. */
  --shrift-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono",
                 "SF Mono", Consolas, "Liberation Mono", monospace;

  --plavno: 160ms cubic-bezier(.4, 0, .2, 1);
  --plavno-dolgo: 420ms cubic-bezier(.22, .61, .36, 1);

  /* Правильный шестиугольник: острия сверху и снизу. При отношении
     высоты к ширине 1,1547 все шесть сторон равны. Прежний контур был
     с остриями по бокам, а размеры элементов рассчитаны под этот —
     оттого соты и выходили вытянутыми. */
  --sota: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* Ширина к высоте. Задавать высоту в пикселях больше не нужно:
     она считается от ширины и всегда даёт равные стороны. */
  --sota-proporciya: .866;
}

/* =========================== 3. Основа =========================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font-family: var(--shrift);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 var(--o-4);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--tekst);
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.6rem); font-weight: 800; letter-spacing: -.038em; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.4rem); font-weight: 800; letter-spacing: -.032em; }
h3 { font-size: clamp(1.16rem, 1.04rem + .48vw, 1.38rem); }
h4 { font-size: 1.05rem; }

p  { margin: 0 0 var(--o-4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
  color: var(--neon);
  text-decoration: none;
  text-underline-offset: .22em;
  text-decoration-thickness: 1.5px;
  transition: color var(--plavno), opacity var(--plavno);
}
a:hover { text-decoration: underline; }

ul, ol { margin: 0 0 var(--o-4); padding-left: 1.35em; }
li { margin-bottom: var(--o-2); }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--tekst); }
/* На цветной заливке жирный берёт цвет от места, а не общий светлый:
   светлый на медовой плашке даёт контраст 1.4 — это нечитаемо. */
.pervyy strong, .pervyy b,
.prizyv strong, .prizyv b,
.propusk strong, .propusk b { color: inherit; }

code, kbd, samp {
  font-family: var(--shrift-mono);
  font-size: .88em;
  background: var(--neon-svet);
  color: var(--neon-yark);
  padding: .12em .38em;
  border-radius: var(--skrug-1);
}

hr { border: 0; height: 1px; background: var(--granica); margin: var(--o-7) 0; }

::selection { background: var(--myod); color: var(--na-myode); }

:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
  border-radius: 4px;
}

.propusk {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--neon); color: #fff;
  padding: var(--o-3) var(--o-5);
  font-weight: 600;
}
.propusk:focus { left: 0; }

.tolko-dlya-chitalki {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================== 4. Сетка =========================== */

.obolochka {
  width: 100%;
  max-width: var(--shirina);
  margin: 0 auto;
  padding: 0 var(--o-5);
}
.obolochka.uzko { max-width: var(--shirina-uzkaya); }

.razdel { padding: var(--o-9) 0; }
.razdel--tesnyy { padding: var(--o-8) 0; }
.razdel--fon { background: var(--fon-2); }
.razdel--poverhnost { background: var(--poverhnost); }
/* Медовым отмечается полоса, а не заливается: во всю ширину экрана
   тёмно-медовый на чёрном становится бурым пятном и тянет текст за
   собой. Тонкая линия сверху и слабый отсвет дают тот же акцент. */
.razdel--medovyy {
  background: var(--poverhnost);
  border-top: 1px solid var(--myod);
  box-shadow: inset 0 1px 34px -18px var(--myod);
}

@media (max-width: 720px) {
  .razdel { padding: var(--o-8) 0; }
  .razdel--tesnyy { padding: var(--o-7) 0; }
  .obolochka { padding: 0 var(--o-4); }
}

.setka { display: grid; gap: var(--o-5); }
.setka--2 { grid-template-columns: repeat(2, 1fr); }
.setka--3 { grid-template-columns: repeat(3, 1fr); }
.setka--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .setka--3, .setka--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .setka--2, .setka--3, .setka--4 { grid-template-columns: 1fr; }
}

/* =========================== 5. Соты как фон =========================== */

/* Решётка сот. Рисунок вшит в стиль, отдельного файла нет.
   Два варианта одной бирюзы: слабее — по общему фону, сильнее —
   по первому экрану, где она должна проступить сквозь свечение. */
.sota-fon { position: relative; isolation: isolate; }
.sota-fon::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2249%22%20viewBox%3D%220%200%2028%2049%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%232FF3E0%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M13.99%209.25l13%207.5v15l-13%207.5L1%2031.75v-15l12.99-7.5zM3%2017.9v12.7l10.99%206.34%2011-6.35V17.9l-11-6.34L3%2017.9zM0%2015l12.98-7.5V0h-2v6.35L0%2012.69v2.3zm0%2018.5L12.98%2041v8h-2v-6.85L0%2035.81v-2.3zM15%200v7.5L27.99%2015H28v-2.31h-.01L17%206.35V0h-2zm0%2049v-8l12.99-7.5H28v2.31h-.01L17%2042.15V49h-2z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);
  background-size: 52px 91px;
}
/* Та же решётка, но заметнее — для первого экрана */
.sota-fon--na-zalivke::before {
  background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2249%22%20viewBox%3D%220%200%2028%2049%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%232FF3E0%22%20fill-opacity%3D%220.07%22%3E%3Cpath%20d%3D%22M13.99%209.25l13%207.5v15l-13%207.5L1%2031.75v-15l12.99-7.5zM3%2017.9v12.7l10.99%206.34%2011-6.35V17.9l-11-6.34L3%2017.9zM0%2015l12.98-7.5V0h-2v6.35L0%2012.69v2.3zm0%2018.5L12.98%2041v8h-2v-6.85L0%2035.81v-2.3zM15%200v7.5L27.99%2015H28v-2.31h-.01L17%206.35V0h-2zm0%2049v-8l12.99-7.5H28v2.31h-.01L17%2042.15V49h-2z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);
}
/* =========================== 6. Шапка =========================== */

.shapka {
  position: sticky; top: 0; z-index: 100;
  /* Полупрозрачное стекло, а не глухая плашка: под шапкой видно
     свечение первого экрана, и она перестаёт резать страницу пополам. */
  background: rgba(7, 10, 16, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--plavno), box-shadow var(--plavno);
}
.shapka--otorvana { border-bottom-color: var(--granica); box-shadow: var(--ten-1); }

.shapka__ryad {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--o-5); min-height: 72px;
}

.znak { display: inline-flex; align-items: center; gap: 11px; color: var(--tekst); }
.znak:hover { text-decoration: none; }
.znak__risunok { width: 32px; height: 28px; flex-shrink: 0; }
.znak__slovo {
  font-family: var(--shrift-mono);
  font-weight: 700; font-size: 1.06rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--tekst);
}

.menyu { display: flex; align-items: center; gap: 2px; }
.menyu a {
  padding: 9px 12px;
  color: var(--tekst-2);
  font-size: .95rem; font-weight: 500;
  border-radius: var(--skrug-1);
  transition: color var(--plavno), background var(--plavno);
}
.menyu a:hover { color: var(--tekst); background: var(--neon-svet); text-decoration: none; }
.menyu a[aria-current="page"] {
  color: var(--neon); font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--myod);
}
.menyu .knopka { margin-left: var(--o-3); }

/* Кнопка в меню остаётся кнопкой: цвет берёт от себя, а не от пункта меню.
   Иначе в тёмной теме светлый текст пункта ложится на медовую заливку. */
.menyu a.knopka--glavnaya { color: var(--na-myode); }
.menyu a.knopka--glavnaya:hover {
  color: var(--na-myode); background: var(--myod-glub);
}
.menyu a.knopka--vtoraya { color: var(--neon); }
.menyu a.knopka--vtoraya:hover { color: var(--na-neone); background: var(--neon); }
.gamburger {
  display: none; width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--tekst);
  border-radius: var(--skrug-1);
}
.gamburger__polosy, .gamburger__polosy::before, .gamburger__polosy::after {
  display: block; width: 22px; height: 2.4px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--plavno), opacity var(--plavno);
}
.gamburger__polosy { position: relative; }
.gamburger__polosy::before, .gamburger__polosy::after { content: ""; position: absolute; left: 0; }
.gamburger__polosy::before { top: -7px; }
.gamburger__polosy::after  { top: 7px; }
.gamburger[aria-expanded="true"] .gamburger__polosy { background: transparent; }
.gamburger[aria-expanded="true"] .gamburger__polosy::before { transform: translateY(7px) rotate(45deg); }
.gamburger[aria-expanded="true"] .gamburger__polosy::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1040px) {
  .gamburger { display: inline-flex; }
  .shapka__ryad { position: relative; }
  .menyu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--poverhnost);
    border-bottom: 1px solid var(--granica);
    box-shadow: var(--ten-2);
    padding: var(--o-3) var(--o-4) var(--o-5);
    display: none;
  }
  .menyu--otkryto { display: flex; }
  .menyu a { padding: 13px 12px; font-size: 1.02rem; }
  .menyu .knopka { margin: var(--o-3) 0 0; }
}

/* =========================== 7. Кнопки =========================== */

.knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--shrift-mono);
  font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.25;
  cursor: pointer;
  text-align: center;
  transition: background var(--plavno), color var(--plavno),
              border-color var(--plavno), transform var(--plavno),
              box-shadow var(--plavno);
}
.knopka:hover { text-decoration: none; }
.knopka:active { transform: translateY(1px); }

/* Действие красится медовым: это единственный цвет, которым на сайте
   обозначается «нажми». Текст на нём всегда тёмный. */
.knopka--glavnaya, .knopka--zheltaya {
  background: var(--myod); color: var(--na-myode); border-color: var(--myod);
  box-shadow: var(--svet-myod);
}
.knopka--glavnaya:hover, .knopka--zheltaya:hover {
  background: var(--myod-glub); border-color: var(--myod-glub);
  color: var(--na-myode); box-shadow: 0 0 20px -4px var(--myod);
}

.knopka--vtoraya {
  background: transparent; color: var(--neon); border-color: var(--neon-kontur);
}
.knopka--vtoraya:hover {
  background: var(--neon-glub); color: var(--neon-yark);
  border-color: var(--neon); box-shadow: var(--svet-neon);
}
.knopka--neonovaya {
  background: var(--neon); color: var(--na-neone); border-color: var(--neon);
  box-shadow: var(--svet-neon);
}
.knopka--neonovaya:hover {
  background: var(--neon-yark); border-color: var(--neon-yark);
  box-shadow: 0 0 20px -4px var(--neon);
}
.knopka--tihaya {
  background: transparent; color: var(--neon);
  padding-left: 6px; padding-right: 6px; min-height: 44px;
}
.knopka--tihaya:hover { color: var(--neon-yark); text-decoration: underline; }
/* Тихая кнопка — единственная, где регистр не меняется: она стоит
   в строке текста, и заглавные там читаются как крик. */
.knopka--tihaya { text-transform: none; letter-spacing: 0; font-size: .95rem;
  font-family: var(--shrift); font-weight: 600; }

.knopka--malaya { min-height: 42px; padding: 9px 17px; font-size: .9rem; }
.knopka--shirokaya { width: 100%; }

.knopki { display: flex; flex-wrap: wrap; gap: var(--o-3); }
@media (max-width: 460px) {
  .knopki { flex-direction: column; align-items: stretch; }
  .knopki .knopka { width: 100%; }
}

.strelka { transition: transform var(--plavno); }
.knopka:hover .strelka, a:hover > .strelka { transform: translateX(3px); }

/* =========================== 8. Первый экран =========================== */

/* Чёрное поле: ни фотографий, ни рекламных градиентов. Решётка сот,
   рисунок и одно пятно света за текстом. Читается за три секунды. */
.pervyy {
  position: relative;
  background: var(--fon);
  color: var(--tekst);
  padding: var(--o-9) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--granica);
}
/* Единственный источник света на экране стоит за рисунком справа.
   Пятно нарисовано градиентом, а не картинкой: ноль загрузок. */
.pervyy::after {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  right: -8%; top: 50%; transform: translateY(-50%);
  width: 640px; height: 640px; max-width: 96vw;
  background: radial-gradient(circle,
    rgba(47, 243, 224, .17) 0%, rgba(47, 243, 224, .05) 38%,
    rgba(47, 243, 224, 0) 68%);
}
.pervyy .obolochka { position: relative; z-index: 1; }
.pervyy h1, .pervyy h2, .pervyy h3 { color: inherit; }

.pervyy__ryad {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: var(--o-8); align-items: center;
}
.pervyy__soderzhimoe { max-width: 44ch; }
.pervyy__zagolovok { margin-bottom: var(--o-5); }
.pervyy__podpis {
  font-size: 1.12rem;
  opacity: .86;
  margin-bottom: var(--o-6);
  max-width: 48ch;
}
.pervyy .nadpis { color: var(--myod); }
.pervyy .knopka--vtoraya { color: var(--neon); border-color: var(--neon-kontur); }
.pervyy__grafika { justify-self: center; width: 100%; max-width: 350px; }

/* Три коротких довода прямо на заливке — под сгибом их уже не прочтут */
.pervyy__opory {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--o-5); margin-top: var(--o-8);
  padding-top: var(--o-6);
  border-top: 1px solid var(--granica);
}
.pervyy__opora { display: flex; gap: 12px; align-items: flex-start; }
.pervyy__opora-telo { font-size: .93rem; line-height: 1.5; }
.pervyy__opora-telo b { display: block; margin-bottom: 3px; font-size: .98rem; }
.pervyy__opora-telo span { display: block; opacity: .8; }

/* Метка довода — просто сота. Значок такого размера всё равно
   не прочитывается, а лишняя деталь ломает минимализм. */
.pervyy__sota {
  width: 15px; aspect-ratio: var(--sota-proporciya); flex-shrink: 0; margin-top: 4px;
  background: var(--myod);
  clip-path: var(--sota);
}

@media (max-width: 900px) {
  .pervyy__ryad { grid-template-columns: 1fr; gap: var(--o-6); }
  .pervyy__grafika { max-width: 230px; order: -1; justify-self: start; }
  .pervyy__opory { grid-template-columns: 1fr; gap: var(--o-4); }
}
@media (max-width: 720px) {
  .pervyy { padding: var(--o-6) 0 var(--o-8); }
  .pervyy__podpis { font-size: 1.04rem; }
  /* На телефоне рисунок работает как знак, а не как картина:
     иначе заголовок и кнопка уезжают за нижний край. */
  .pervyy__grafika { max-width: 160px; }
  /* При такой ширине значок в ячейке — девять пикселей каракулей.
     Пустая сота честнее нечитаемой картинки. */
  .pervyy__znachki { display: none; }
}

/* =========================== 9. Заголовки разделов =========================== */

.nadpis {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--o-3);
  font-family: var(--shrift-mono);
  font-size: .73rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--neon);
}
.nadpis::before {
  content: ""; width: 13px; aspect-ratio: var(--sota-proporciya);
  background: var(--myod);
  clip-path: var(--sota);
  flex-shrink: 0;
}

.shapka-razdela { max-width: 62ch; margin-bottom: var(--o-7); }
.shapka-razdela p { color: var(--tekst-2); font-size: 1.06rem; margin-bottom: 0; }

/* =========================== 10. Карточки =========================== */

.kartochka {
  display: flex; flex-direction: column;
  padding: var(--o-6);
  background: var(--poverhnost);
  border: 1px solid var(--granica);
  border-radius: var(--skrug-2);
  color: inherit;
  transition: border-color var(--plavno), box-shadow var(--plavno),
              transform var(--plavno);
}
.kartochka__zagolovok { margin-bottom: var(--o-3); }
.kartochka__tekst { color: var(--tekst-2); font-size: .97rem; }
.kartochka__niz { margin-top: auto; padding-top: var(--o-5); color: var(--neon); font-weight: 600; }

a.kartochka, .kartochka--zhivaya { cursor: pointer; }
a.kartochka:hover, .kartochka--zhivaya:hover {
  border-color: var(--neon);
  box-shadow: var(--ten-2);
  transform: translateY(-2px);
  text-decoration: none;
}
a.kartochka:hover .kartochka__zagolovok { color: var(--neon); }

/* Значок в соте. Ни одной круглой плашки на сайте. */
.kartochka__znachok {
  width: 46px; aspect-ratio: var(--sota-proporciya);
  margin-bottom: var(--o-5);
  background: var(--neon-svet);
  color: var(--neon);
  clip-path: var(--sota);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* В соту вместо рисунка иногда встаёт номер правила. */
.kartochka__znachok strong {
  font-size: 1.24rem; font-weight: 800; line-height: 1;
  letter-spacing: -.02em;
}
.kartochka__znachok--zheltyy { background: var(--myod-svet); color: var(--myod-tekst); }
.kartochka__znachok--medovyy { background: var(--myod); color: var(--na-myode); }

.kartochka--vydelena {
  border-color: var(--neon-kontur);
  box-shadow: var(--ten-2);
}
.kartochka--tihaya {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.reshenie__verh {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--o-2) var(--o-3); margin-bottom: var(--o-4);
}
/* Отрасль стоит рядом с сотой, а не внутри неё: в соту помещается
   только номер, длинный текст она обрезает по контуру. */
.reshenie__otrasl {
  margin-right: auto;
  font-size: .8rem; color: var(--tekst-3);
}
.reshenie__verh .metka { margin-left: auto; }
.reshenie__nomer {
  width: 34px; aspect-ratio: var(--sota-proporciya);
  background: var(--neon);
  color: var(--na-neone);
  clip-path: var(--sota);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--shrift-mono);
  font-size: .78rem; font-weight: 700; letter-spacing: 0;
  flex-shrink: 0;
}
/* =========================== 11. Метки =========================== */

.metka {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-family: var(--shrift-mono);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.metka::before {
  content: ""; width: 7px; aspect-ratio: var(--sota-proporciya);
  background: currentColor;
  clip-path: var(--sota);
  flex-shrink: 0;
}
.metka--rabotaet   { background: var(--uspeh-fon);  color: var(--uspeh); }
.metka--v-rabote   { background: var(--myod-svet);  color: var(--myod-tekst); }
.metka--pauza      { background: var(--fon-2);      color: var(--tekst-3); }
.metka--vnutri     { background: var(--neon-svet); color: var(--neon); }
.metka--bez-tochki::before { display: none; }

/* =========================== 12. Списки =========================== */

.spisok-galok, .spisok-krestov { list-style: none; padding: 0; margin: 0; }

.spisok-galok li, .spisok-krestov li {
  position: relative;
  padding-left: 34px;
  margin-bottom: var(--o-3);
  color: var(--tekst-2);
}
.spisok-galok li:last-child, .spisok-krestov li:last-child { margin-bottom: 0; }

.spisok-galok li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 20px; aspect-ratio: var(--sota-proporciya);
  background: var(--myod);
  clip-path: var(--sota);
}
.spisok-galok li::after {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 8px; height: 4px;
  border-left: 2px solid var(--na-myode);
  border-bottom: 2px solid var(--na-myode);
  transform: rotate(-45deg);
}

.spisok-krestov li::before {
  content: "\00d7";
  position: absolute; left: 0; top: .1em;
  width: 20px; aspect-ratio: var(--sota-proporciya);
  background: var(--fon-2);
  color: var(--trevoga);
  clip-path: var(--sota);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 700; line-height: 1;
}

/* =========================== 13. Шаги =========================== */

.shagi { counter-reset: shag; display: grid; gap: var(--o-5); }
.shag {
  position: relative;
  padding-left: 62px;
  counter-increment: shag;
}
.shag::before {
  content: counter(shag);
  position: absolute; left: 0; top: 0;
  width: 40px; aspect-ratio: var(--sota-proporciya);
  background: var(--myod);
  color: var(--na-myode);
  clip-path: var(--sota);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800;
}
.shag::after {
  content: "";
  position: absolute; left: 19.5px; top: 52px; bottom: -22px;
  width: 1px;
  background: var(--granica-2);
}
.shag:last-child::after { display: none; }
.shag__zagolovok { margin-bottom: 5px; font-size: 1.06rem; }
.shag p { color: var(--tekst-2); font-size: .97rem; }

/* =========================== 14. Пары =========================== */

.pary { display: grid; gap: 0; border-top: 2px solid var(--granica); }
.para {
  display: grid; grid-template-columns: minmax(140px, 1fr) 2.2fr;
  gap: var(--o-5);
  padding: var(--o-5) 0;
  border-bottom: 1px solid var(--granica);
}
.para__levo { font-weight: 700; }
.para__pravo { color: var(--tekst-2); }
@media (max-width: 720px) {
  .para { grid-template-columns: 1fr; gap: var(--o-2); }
}

/* =========================== 15. Врезки =========================== */

.vrezka {
  padding: var(--o-5) var(--o-6);
  background: var(--neon-svet);
  border-left: 4px solid var(--neon);
  border-radius: 0 var(--skrug-2) var(--skrug-2) 0;
  color: var(--tekst-2);
}
.vrezka strong { color: var(--tekst); }
.vrezka--zheltaya { background: var(--myod-svet); border-left-color: var(--myod); }
.vrezka--tihaya {
  background: var(--fon-2);
  border-left-color: var(--granica-2);
}
.vrezka__zagolovok {
  display: block;
  margin-bottom: var(--o-2);
  font-weight: 700;
  color: var(--tekst);
}

/* =========================== 16. Числа =========================== */

.chislo { display: flex; flex-direction: column; gap: 4px; }
.chislo__znachenie {
  font-family: var(--shrift-mono);
  font-size: clamp(1.8rem, 1.35rem + 1.9vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--neon);
  text-shadow: 0 0 22px rgba(47, 243, 224, .38);
}
.chislo__podpis {
  font-family: var(--shrift-mono);
  font-size: .78rem; color: var(--tekst-2); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.chislo__snoska { font-size: .81rem; color: var(--tekst-3); }

/* =========================== 17. Таблицы =========================== */

.tablica-obertka {
  overflow-x: auto;
  border: 1px solid var(--granica);
  border-radius: var(--skrug-2);
  background: var(--poverhnost);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
th, td {
  padding: 13px var(--o-5);
  text-align: left;
  border-bottom: 1px solid var(--granica);
  vertical-align: top;
}
th {
  background: var(--fon-2);
  font-family: var(--shrift-mono);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tekst-3);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--plavno); }
tbody tr:hover { background: var(--poverhnost-2); }
td { color: var(--tekst-2); }
td:first-child { color: var(--tekst); font-weight: 600; }

/* =========================== 18. Гармошка =========================== */

.garmoshka { border-top: 1px solid var(--granica); }
.garmoshka__punkt { border-bottom: 1px solid var(--granica); }
.garmoshka__knopka {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--o-4);
  width: 100%;
  min-height: 60px;
  padding: var(--o-5) 0;
  background: none; border: 0;
  font: inherit; font-weight: 600; font-size: 1.04rem;
  color: var(--tekst);
  text-align: left;
  cursor: pointer;
  transition: color var(--plavno);
}
.garmoshka__knopka:hover { color: var(--neon); }
.garmoshka__plyus {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--neon);
}
.garmoshka__plyus::before, .garmoshka__plyus::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  transition: transform var(--plavno), opacity var(--plavno);
}
.garmoshka__plyus::before { width: 14px; height: 2px; }
.garmoshka__plyus::after  { width: 2px; height: 14px; }
.garmoshka__knopka[aria-expanded="true"] .garmoshka__plyus::after {
  transform: translate(-50%, -50%) rotate(90deg); opacity: 0;
}
.garmoshka__telo {
  overflow: hidden;
  transition: max-height var(--plavno-dolgo);
}
/* Закрываем сразу, а не сценарием после отрисовки. Иначе страница успевает
   показать все пункты раскрытыми, сценарий их схлопывает, и содержимое
   прыгает — Lighthouse считал это сдвигом раскладки и снимал баллы.
   Без сценария класса js нет, и гармошки остаются открытыми. */
.js .garmoshka__telo { max-height: 0; }
.garmoshka__telo > div {
  padding: 0 0 var(--o-5);
  color: var(--tekst-2);
  max-width: 72ch;
}

/* =========================== 19. Подвал =========================== */

.podval {
  padding: var(--o-8) 0 var(--o-6);
  background: var(--fon-2);
  border-top: 1px solid var(--granica);
}
.podval__setka {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--o-6);
  padding-bottom: var(--o-7);
}
@media (max-width: 900px) { .podval__setka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .podval__setka { grid-template-columns: 1fr; gap: var(--o-5); } }

.podval__zagolovok {
  margin-bottom: var(--o-4);
  font-size: .79rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tekst-3);
}
.podval__spisok { list-style: none; padding: 0; margin: 0; }
.podval__spisok li { margin-bottom: 9px; }
.podval__spisok a { color: var(--tekst-2); }
.podval__spisok a:hover { color: var(--neon); }
.podval__o { color: var(--tekst-2); max-width: 38ch; font-size: .95rem; }

.podval__niz {
  display: flex; flex-wrap: wrap; gap: var(--o-3) var(--o-5);
  justify-content: space-between;
  padding-top: var(--o-5);
  border-top: 1px solid var(--granica);
  font-size: .88rem;
  color: var(--tekst-3);
}
.podval__niz a { color: var(--tekst-3); }
.podval__niz a:hover { color: var(--neon); }

/* Пчела в подвале. Единственная вольность на весь сайт. */
.pchela { display: inline-flex; align-items: center; gap: 8px; color: var(--tekst-3); font-size: .85rem; }
.pchela svg { width: 18px; height: 18px; flex-shrink: 0; }

/* =========================== 20. Крошки =========================== */

.kroshki {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--o-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--o-5);
  font-family: var(--shrift-mono);
  font-size: .78rem;
  color: var(--tekst-3);
}
.kroshki li { margin: 0; display: flex; align-items: center; gap: var(--o-2); }
.kroshki li:not(:last-child)::after { content: "/"; color: var(--granica-2); }
.kroshki a { color: var(--tekst-2); }

/* =========================== 21. Форма =========================== */

.pole { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--o-5); }
.pole__podpis { font-size: .92rem; font-weight: 600; color: var(--tekst); }
.pole__podpis span { color: var(--tekst-3); font-weight: 400; }

input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  background: var(--poverhnost);
  border: 1px solid var(--granica-2);
  border-radius: var(--skrug-2);
  font: inherit;
  font-size: 1rem;
  color: var(--tekst);
  transition: border-color var(--plavno), box-shadow var(--plavno);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px var(--neon-svet), var(--svet-neon);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.55; }

.soglasie {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .92rem;
  color: var(--tekst-2);
  margin-bottom: var(--o-5);
}
.soglasie input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--neon); }

/* =========================== 22. Появление =========================== */

.js .poyavlenie {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--plavno-dolgo), transform var(--plavno-dolgo);
}
.js .poyavlenie--vidno { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .poyavlenie { opacity: 1; transform: none; }
}

/* =========================== 23. Призыв =========================== */

.prizyv {
  position: relative;
  padding: var(--o-8) var(--o-6);
  background: var(--poverhnost);
  color: var(--tekst);
  border: 1px solid var(--granica-2);
  border-radius: var(--skrug-3);
  box-shadow: var(--ten-2);
  text-align: center;
  overflow: hidden;
}
.prizyv h2 { color: inherit; margin-bottom: var(--o-3); }
.prizyv p { opacity: .85; max-width: 56ch; margin: 0 auto var(--o-6); }
.prizyv .knopki { justify-content: center; }
.prizyv .knopka--vtoraya { color: var(--neon); border-color: var(--neon-kontur); }
/* =========================== 24. Липкий призыв на телефоне =========================== */

/* Появляется, когда первый экран уехал вверх. На выставке человек
   держит телефон одной рукой — действие должно быть под большим пальцем. */
.lipkiy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: var(--o-3);
  padding: 10px var(--o-4) calc(10px + env(safe-area-inset-bottom));
  background: var(--poverhnost);
  border-top: 1px solid var(--granica);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .6);
  /* Спрятан не только с глаз: visibility убирает ссылки из обхода
     клавиатурой, пока полоса не выехала. Иначе Tab уходит в невидимое. */
  visibility: hidden;
  transform: translateY(105%);
  transition: transform var(--plavno-dolgo), visibility 0s linear .42s;
}
.lipkiy--vidno {
  visibility: visible;
  transform: none;
  transition: transform var(--plavno-dolgo), visibility 0s;
}
.lipkiy .knopka { flex: 1; min-height: 50px; padding-left: var(--o-3); padding-right: var(--o-3); }
@media (max-width: 720px) {
  .lipkiy { display: flex; }
  /* Место под полосу, чтобы она не накрывала низ подвала */
  body { padding-bottom: 78px; }
}

/* =========================== 25. Мелочи =========================== */

.tekst-tihiy { color: var(--tekst-2); }
.tekst-melkiy { font-size: .89rem; }
.tekst-po-centru { text-align: center; }
.tekst-po-centru .shapka-razdela { margin-left: auto; margin-right: auto; }
.tekst-po-centru .nadpis { justify-content: center; }

.otstup-verh-2 { margin-top: var(--o-2); }
.otstup-verh-4 { margin-top: var(--o-4); }
.otstup-verh-5 { margin-top: var(--o-5); }
.otstup-verh-6 { margin-top: var(--o-6); }
.otstup-verh-7 { margin-top: var(--o-7); }
.otstup-niz-4 { margin-bottom: var(--o-4); }
.otstup-niz-5 { margin-bottom: var(--o-5); }
.otstup-niz-6 { margin-bottom: var(--o-6); }



/* =========================== 26. Карусель направлений =========================== */

/* Лента прокручивается пальцем, колесом с зажатым Shift и клавишами —
   стрелки только ускоряют. Без сценария она остаётся прокручиваемой:
   это обычный overflow, а не самодельный движок. */
.karusel { position: relative; }

.karusel__lenta {
  display: flex;
  gap: var(--o-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* тень карточек не срезается краем ленты */
  padding: 4px 2px var(--o-4);
  margin: -4px -2px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--granica-2) transparent;
  overscroll-behavior-x: contain;
}
.karusel__lenta::-webkit-scrollbar { height: 8px; }
.karusel__lenta::-webkit-scrollbar-track {
  background: var(--fon-2); border-radius: 100px;
}
.karusel__lenta::-webkit-scrollbar-thumb {
  background: var(--granica-2); border-radius: 100px;
}

.karta-napravleniya {
  /* Карточка нарочно уже трети экрана: край следующей всегда виден,
     и человеку не надо объяснять, что тут прокручивается. */
  flex: 0 0 clamp(260px, 29vw, 316px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: var(--o-6);
  background: var(--poverhnost);
  border: 1px solid var(--granica);
  border-radius: var(--skrug-2);
  color: inherit;
  transition: border-color var(--plavno), box-shadow var(--plavno),
              transform var(--plavno);
}
.karta-napravleniya:hover {
  border-color: var(--neon);
  box-shadow: var(--ten-2);
  transform: translateY(-2px);
  text-decoration: none;
}
.karta-napravleniya:hover h3 { color: var(--neon); }
.karta-napravleniya h3 {
  margin-bottom: var(--o-3);
  font-size: 1.12rem;
  transition: color var(--plavno);
}
.karta-napravleniya p { color: var(--tekst-2); font-size: .96rem; }
.karta-napravleniya__niz {
  margin-top: auto; padding-top: var(--o-5);
  color: var(--neon); font-weight: 600; font-size: .89rem;
}
.karta-napravleniya__znachok {
  width: 46px; aspect-ratio: var(--sota-proporciya);
  margin-bottom: var(--o-5);
  background: var(--neon-svet);
  color: var(--neon);
  clip-path: var(--sota);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.karta-napravleniya__znachok svg { width: 22px; height: 22px; }

/* Стрелки стоят в одной строке с заголовком раздела, а не под лентой:
   внизу справа их не видит никто, и лента выглядит просто обрезанной. */
.razdel__verh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--o-5);
  margin-bottom: var(--o-7);
}
.razdel__verh .shapka-razdela { margin-bottom: 0; }

.karusel__upravlenie {
  display: flex; gap: var(--o-3);
  flex-shrink: 0;
  padding-bottom: 4px;    /* выравнивание по нижней строке заголовка */
}
/* Обязательно: заданный display перебивает встроенное правило браузера
   для атрибута hidden, и без этой строки спрятанные стрелки видны. */
.karusel__upravlenie[hidden] { display: none; }
.karusel__strelka {
  width: 52px; aspect-ratio: var(--sota-proporciya);
  display: flex; align-items: center; justify-content: center;
  /* Обвода не будет: clip-path срезает границу. Поэтому кнопка видна
     заливкой, а не рамкой. */
  background: var(--neon-svet);
  color: var(--neon);
  border: 0;
  clip-path: var(--sota);
  cursor: pointer;
  transition: background var(--plavno), color var(--plavno);
}
.karusel__strelka svg { width: 24px; height: 24px; }
.karusel__strelka:hover { background: var(--myod); color: var(--na-myode); }
.karusel__strelka[disabled] { opacity: .3; cursor: default; }
.karusel__strelka[disabled]:hover { background: var(--neon-svet); color: var(--neon); }
/* Обвод фокуса — тоже тенью, по той же причине. */
.karusel__strelka:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--fon), 0 0 0 6px var(--neon);
}

@media (max-width: 720px) {
  /* Пальцем лента листается и так — на телефоне стрелки только съедают
     место под заголовком. */
  .razdel__verh { display: block; }
  .razdel__verh .shapka-razdela { margin-bottom: var(--o-7); }
  .karusel__upravlenie { display: none; }
}

/* =========================== 27. Числа и отрасли =========================== */

/* auto-fit, а не жёсткие четыре колонки: плитку добавляют копированием,
   и ряд не должен от этого разваливаться. */
.chisla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--o-6) var(--o-5);
}

.otrasli {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--o-3) var(--o-4);
}
.otrasli li {
  /* Общий отступ у li обязателен к обнулению: в гибкой раскладке он не
     схлопывается, а входит в высоту строки. У последнего пункта его нет —
     и он один растягивается на эти восемь пикселей выше соседей. */
  margin: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 11px var(--o-4) 11px var(--o-3);
  background: var(--poverhnost);
  border: 1px solid var(--granica);
  border-radius: var(--skrug-2);
  font-size: .95rem; font-weight: 600;
  color: var(--tekst);
}
.otrasli li span {
  width: 15px; aspect-ratio: var(--sota-proporciya); flex-shrink: 0;
  background: var(--myod);
  clip-path: var(--sota);
}

/* =========================== 28. Схема сот =========================== */

.sota-shema { width: 100%; max-width: 400px; }
.sota-shema__podpis {
  margin-top: var(--o-3);
  max-width: 400px;
  font-size: .86rem; color: var(--tekst-3);
}

.setka--po-centru { align-items: center; gap: var(--o-8); }
.setka--shiroko { gap: var(--o-8); align-items: start; }

/* =========================== 29. Направления в гармошке =========================== */

/* Тело обычной гармошки сужено до 72ch ради читаемости абзаца.
   Здесь внутри две колонки, и ограничение снимается. */
.garmoshka--napravleniya .garmoshka__telo > div { max-width: none; }
.garmoshka--napravleniya .garmoshka__knopka { font-size: 1.1rem; }

.garmoshka__imya { display: flex; align-items: center; gap: var(--o-4); }
.garmoshka__znachok {
  width: 38px; aspect-ratio: var(--sota-proporciya); flex-shrink: 0;
  background: var(--neon-svet);
  color: var(--neon);
  clip-path: var(--sota);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--plavno), color var(--plavno);
}
.garmoshka__znachok svg { width: 19px; height: 19px; }
.garmoshka__knopka:hover .garmoshka__znachok,
.garmoshka__knopka[aria-expanded="true"] .garmoshka__znachok {
  background: var(--myod); color: var(--na-myode);
}

.napravlenie {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--o-6) var(--o-8);
  padding-bottom: var(--o-3);
}
.napravlenie__opisanie p { margin-bottom: var(--o-4); }
.napravlenie__opisanie p:last-of-type { margin-bottom: 0; }
.napravlenie__spiski h3 { font-size: 1.02rem; margin-bottom: var(--o-4); }

@media (max-width: 860px) {
  .napravlenie { grid-template-columns: 1fr; gap: var(--o-6); }
  .garmoshka--napravleniya .garmoshka__knopka { font-size: 1rem; }
  .garmoshka__imya { gap: var(--o-3); }
}

/* =========================== 30. Крупный призыв =========================== */

/* Текст слева, соты справа — призыв перестаёт быть просто плашкой
   и держит ту же графику, что первый экран. */
.prizyv--krupnyy {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
  gap: var(--o-8);
  align-items: center;
  text-align: left;
  padding: var(--o-8);
}
.prizyv--krupnyy .prizyv__telo { max-width: 60ch; }
.prizyv--krupnyy p { margin-left: 0; margin-right: 0; }
.prizyv--krupnyy .knopki { justify-content: flex-start; }
.prizyv--krupnyy .nadpis { color: var(--myod); justify-content: flex-start; }

.prizyv__soty { justify-self: center; }
.prizyv__soty svg { display: block; width: 100%; max-width: 250px; height: auto; }

@media (max-width: 900px) {
  .prizyv--krupnyy { grid-template-columns: 1fr; padding: var(--o-7) var(--o-5); }
  /* На узком экране соты забирают весь первый экран блока и отодвигают
     кнопку вниз. Фоновая решётка раздела эту роль уже выполняет. */
  .prizyv__soty { display: none; }
}

/* =========================== 31. Вид результата =========================== */

/* Три вкладки и «экран» под ними. Экран нарочно не похож на снимок
   программы: это тот же текст, той же вёрсткой, — его можно выделить,
   прочитать читалкой и найти поиском по странице. Картинка так не умеет. */

.vkladki { margin-top: var(--o-6); }

.vkladki__ryad {
  display: flex; flex-wrap: wrap; gap: var(--o-2);
  margin-bottom: var(--o-4);
}
.vkladka {
  font-family: var(--shrift-mono);
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 15px;
  background: var(--fon-2);
  color: var(--tekst-2);
  border: 1px solid var(--granica);
  border-radius: 100px;
  cursor: pointer;
  transition: color var(--plavno), border-color var(--plavno),
              background var(--plavno), box-shadow var(--plavno);
}
.vkladka:hover { color: var(--tekst); border-color: var(--granica-2); }
.vkladka[aria-selected="true"] {
  color: var(--neon); border-color: var(--neon-kontur);
  background: var(--neon-glub);
  box-shadow: var(--svet-neon);
}

/* Экран: рамка с полосой сверху. Точки слева — не украшение, а знак
   того, что ниже вывод программы, а не наш текст про программу. */
.ekran {
  background: var(--fon);
  border: 1px solid var(--granica);
  border-radius: var(--skrug-3);
  box-shadow: var(--ten-2);
  overflow: hidden;
}
.ekran__shapka {
  display: flex; align-items: center; gap: var(--o-3);
  padding: 10px var(--o-4);
  background: var(--fon-2);
  border-bottom: 1px solid var(--granica);
}
.ekran__tochki {
  display: flex; gap: 5px; flex-shrink: 0;
}
.ekran__tochki::before, .ekran__tochki::after {
  content: ""; width: 7px; aspect-ratio: var(--sota-proporciya);
  background: var(--granica-2); clip-path: var(--sota);
}
.ekran__adres {
  font-family: var(--shrift-mono);
  font-size: .72rem; letter-spacing: .06em;
  color: var(--tekst-3);
}
.ekran__telo { padding: var(--o-5); }

/* ── Карточка норматива ── */
.karta-normy__verh {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--o-3); margin-bottom: var(--o-3);
}
.karta-normy__oboznachenie {
  font-family: var(--shrift-mono);
  font-size: 1.1rem; font-weight: 700; color: var(--neon);
}
.karta-normy__nazvanie {
  margin: 0 0 var(--o-4); max-width: 54ch;
  color: var(--tekst); line-height: 1.45;
}
.karta-normy__polya {
  margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--o-3) var(--o-6);
  border-top: 1px solid var(--granica); padding-top: var(--o-4);
}
.karta-normy__polya div { display: flex; gap: var(--o-3); align-items: baseline; }
.karta-normy__polya dt {
  font-family: var(--shrift-mono);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tekst-3); flex-shrink: 0;
}
.karta-normy__polya dd {
  margin: 0; font-family: var(--shrift-mono);
  font-size: .82rem; color: var(--tekst-2);
}

/* ── Пульт: список модулей ── */
.pult {
  list-style: none; margin: 0; padding: 0;
  counter-reset: modul;
}
.pult li {
  counter-increment: modul;
  display: grid; grid-template-columns: 2.2em minmax(0, 12em) minmax(0, 1fr);
  gap: var(--o-2) var(--o-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--granica);
  margin: 0;
}
.pult li:last-child { border-bottom: 0; }
.pult li::before {
  content: counter(modul, decimal-leading-zero);
  font-family: var(--shrift-mono); font-size: .78rem;
  color: var(--neon); opacity: .75;
}
.pult__imya { font-weight: 700; color: var(--tekst); }
.pult__delo { color: var(--tekst-2); font-size: .93rem; }

/* ── Прогон проверок ── */
.prognon { display: grid; gap: var(--o-4); }
.prognon__stroka { display: flex; align-items: baseline; gap: var(--o-4); }
.prognon__chislo {
  font-family: var(--shrift-mono);
  font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 700;
  color: var(--neon); line-height: 1;
  min-width: 3.6em; text-align: right;
  text-shadow: 0 0 22px rgba(47, 243, 224, .38);
  font-variant-numeric: tabular-nums;
}
/* Ноль падений — это медовое, а не бирюзовое: единственное число тут,
   которое обязано остаться нулём. */
.prognon__chislo--nol { color: var(--myod); text-shadow: 0 0 22px rgba(255, 210, 63, .3); }
.prognon__chto { color: var(--tekst-2); }

.vkladki__snoska {
  margin: var(--o-4) 0 0; max-width: 72ch;
  font-size: .88rem; color: var(--tekst-3);
}

@media (max-width: 620px) {
  .ekran__telo { padding: var(--o-4); }
  .pult li { grid-template-columns: 2.2em minmax(0, 1fr); }
  .pult__delo { grid-column: 2; }
  .prognon__stroka { flex-direction: column; gap: 2px; }
  .prognon__chislo { min-width: 0; text-align: left; }
}

/* =========================== 32. Печать =========================== */

@media print {
  .shapka, .gamburger, .prizyv, .podval__setka, .lipkiy, .propusk { display: none !important; }
  .karusel__upravlenie { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .pervyy { background: #fff !important; color: #000 !important; padding: 12pt 0; }
  .pervyy__grafika { display: none; }
  a { color: #000; text-decoration: underline; }
  .razdel { padding: 12pt 0; }
  .kartochka { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .sota-fon::before { display: none; }
  /* На бумаге лента не прокручивается — раскладываем карточки сеткой,
     иначе за краем листа остаются четыре направления из шести. */
  .karusel__lenta {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8pt; overflow: visible;
  }
  .karta-napravleniya { border: 1px solid #ccc; break-inside: avoid; }
  /* Вкладки на бумаге не переключишь — показываем все три панели. */
  .vkladki__ryad { display: none !important; }
  .vkladki__panel[hidden] { display: block !important; }
  .ekran { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .ekran__shapka { background: #f2f2f2; }

  /* Гармошка на печати раскрыта: свёрнутый текст на бумаге потерян. */
  .garmoshka__telo { max-height: none !important; overflow: visible !important; }
  .garmoshka__plyus { display: none; }
}