/* Каркас сайта: боковое меню слева, справа страница проекта в его собственном дизайне.
   Меню — общий «футляр» в одном тёмном виде; каждый проект представлен в нём своим значком. */
/* Запасные шрифты по меркам фирменных (Google Fonts грузятся с подменой): пока фирменный шрифт не пришёл,
   текст набирается Arial той же ширины и высоты строки — заголовки не переносятся иначе и страница не прыгает.
   Google присылает кириллицу и латиницу отдельными файлами, поэтому и мерки — отдельно для каждого алфавита
   и каждой толщины. Ширины измерены в браузере; поменяли шрифт — перемерьте. */
@font-face { font-family: "Golos Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 107.1%; ascent-override: 91.5%; descent-override: 20.6%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; 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; size-adjust: 107.7%; ascent-override: 91%; descent-override: 20.4%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; unicode-range: U+0030-0039; size-adjust: 106.1%; ascent-override: 92.3%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; unicode-range: U+0020, U+00A0; size-adjust: 90%; ascent-override: 108.9%; descent-override: 24.4%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 500; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 107.8%; ascent-override: 90.9%; descent-override: 20.4%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 500; 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; size-adjust: 107.9%; ascent-override: 90.9%; descent-override: 20.4%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 500; unicode-range: U+0030-0039; size-adjust: 107.8%; ascent-override: 90.9%; descent-override: 20.4%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 500; unicode-range: U+0020, U+00A0; size-adjust: 90%; ascent-override: 108.9%; descent-override: 24.4%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 600; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 99.9%; ascent-override: 98.1%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 600; 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; size-adjust: 100.4%; ascent-override: 97.6%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 600; unicode-range: U+0030-0039; size-adjust: 109.1%; ascent-override: 89.8%; descent-override: 20.2%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 600; unicode-range: U+0020, U+00A0; size-adjust: 90%; ascent-override: 108.9%; descent-override: 24.4%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 100.7%; ascent-override: 97.3%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; 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; size-adjust: 101.2%; ascent-override: 96.9%; descent-override: 21.7%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; unicode-range: U+0030-0039; size-adjust: 110.7%; ascent-override: 88.5%; descent-override: 19.9%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; unicode-range: U+0020, U+00A0; size-adjust: 90%; ascent-override: 108.9%; descent-override: 24.4%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 137.5%; ascent-override: 72.7%; descent-override: 18.2%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; 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; size-adjust: 134%; ascent-override: 74.6%; descent-override: 18.7%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; unicode-range: U+0030-0039; size-adjust: 142.5%; ascent-override: 70.2%; descent-override: 17.5%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; unicode-range: U+0020, U+00A0; size-adjust: 95.4%; ascent-override: 104.8%; descent-override: 26.2%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 133.6%; ascent-override: 74.9%; descent-override: 18.7%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; 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; size-adjust: 132.4%; ascent-override: 75.6%; descent-override: 18.9%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; unicode-range: U+0030-0039; size-adjust: 149.3%; ascent-override: 67%; descent-override: 16.7%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; unicode-range: U+0020, U+00A0; size-adjust: 89.3%; ascent-override: 112%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 103.4%; ascent-override: 103.5%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; 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; size-adjust: 104.4%; ascent-override: 102.5%; descent-override: 28.7%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; unicode-range: U+0030-0039; size-adjust: 103.2%; ascent-override: 103.7%; descent-override: 29.1%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 400; unicode-range: U+0020, U+00A0; size-adjust: 72%; ascent-override: 148.6%; descent-override: 41.7%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 500; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 105.2%; ascent-override: 101.7%; descent-override: 28.5%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 500; 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; size-adjust: 106.4%; ascent-override: 100.5%; descent-override: 28.2%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 500; unicode-range: U+0030-0039; size-adjust: 104.6%; ascent-override: 102.3%; descent-override: 28.7%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 500; unicode-range: U+0020, U+00A0; size-adjust: 72%; ascent-override: 148.6%; descent-override: 41.7%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 600; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 98.5%; ascent-override: 108.6%; descent-override: 30.4%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 600; 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; size-adjust: 100.7%; ascent-override: 106.3%; descent-override: 29.8%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 600; unicode-range: U+0030-0039; size-adjust: 105.8%; ascent-override: 101.1%; descent-override: 28.4%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 600; unicode-range: U+0020, U+00A0; size-adjust: 72%; ascent-override: 148.6%; descent-override: 41.7%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 100.2%; ascent-override: 106.8%; descent-override: 29.9%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; 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; size-adjust: 102.5%; ascent-override: 104.4%; descent-override: 29.3%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; unicode-range: U+0030-0039; size-adjust: 107.2%; ascent-override: 99.8%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700 900; unicode-range: U+0020, U+00A0; size-adjust: 72%; ascent-override: 148.6%; descent-override: 41.7%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 900; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 87.1%; ascent-override: 105.7%; descent-override: 33.3%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 900; 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; size-adjust: 88.9%; ascent-override: 103.5%; descent-override: 32.6%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 900; unicode-range: U+0030-0039; size-adjust: 78.9%; ascent-override: 116.5%; descent-override: 36.7%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 900; unicode-range: U+0020, U+00A0; size-adjust: 84.2%; ascent-override: 109.2%; descent-override: 34.4%; line-gap-override: 0%; }
@font-face { font-family: "Oswald Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 900; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 76%; ascent-override: 156.6%; descent-override: 38.2%; line-gap-override: 0%; }
@font-face { font-family: "Oswald Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 900; 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; size-adjust: 71.9%; ascent-override: 165.6%; descent-override: 40.4%; line-gap-override: 0%; }
@font-face { font-family: "Oswald Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 900; unicode-range: U+0030-0039; size-adjust: 86.1%; ascent-override: 138.3%; descent-override: 33.7%; line-gap-override: 0%; }
@font-face { font-family: "Oswald Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 900; unicode-range: U+0020, U+00A0; size-adjust: 82.4%; ascent-override: 144.4%; descent-override: 35.2%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 100 900; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; size-adjust: 98%; ascent-override: 110.2%; descent-override: 25.5%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 100 900; 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; size-adjust: 96.6%; ascent-override: 111.8%; descent-override: 25.9%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 100 900; unicode-range: U+0030-0039; size-adjust: 93.1%; ascent-override: 116%; descent-override: 26.9%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 100 900; unicode-range: U+0020, U+00A0; size-adjust: 86%; ascent-override: 125.5%; descent-override: 29.1%; line-gap-override: 0%; }

:root {
  --shell-bg: #141519;
  --shell-raise: #1d1f24;
  --shell-line: #2a2c33;
  --shell-fg: #ecebe6;
  --shell-muted: #9a9890;
  --shell-dim: #8d8b84;   /* мелкие подписи меню: контраст не ниже 4.5 */
  --shell-gold: #08b5e6;   /* акцент «футляра»: голубой из логотипа (на тёмном) */
  --shell-font: "Golos Text", "Golos Fallback", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --brand-font: "Unbounded", "Unbounded Fallback", "Golos Text", "Golos Fallback", "Segoe UI", sans-serif;
  --logo-font: Arial, Helvetica, "Liberation Sans", Arimo, sans-serif;   /* шрифт надписи в логотипе */
  --nav-w: 288px;
  color-scheme: dark;
}
/* светлая тема по кнопке в меню: светлеет и «футляр» */
:root[data-theme="light"] {
  --shell-bg: #e8e6e0;
  --shell-raise: #dcdad3;
  --shell-line: #cfccc3;
  --shell-fg: #17181c;
  --shell-muted: #55544f;
  --shell-dim: #67655e;
  --shell-gold: #0a66b8;   /* синий с градиента знака: на светлом фоне контраст не ниже 4.5 */
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--shell-bg);
  color: var(--shell-fg);
  font: 16px/1.55 var(--shell-font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }  /* скрытое скрыто всегда, даже если у элемента свой display */
a { color: inherit; }
:focus-visible { outline: 2px solid var(--shell-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- раскладка ---------- */
.layout { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100%; }

.nav {
  position: sticky; top: env(safe-area-inset-top, 0px);
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: 22px;
  padding: 28px 18px 22px;
  background: var(--shell-bg);
  border-right: 1px solid var(--shell-line);
  overflow-y: auto;
}
.nav__top { display: grid; justify-items: start; gap: 14px; padding-left: 8px; }
.nav__tools { display: flex; align-items: center; gap: 10px; padding-block: 6px; }

/* ---------- переключатели языка и темы: «таблетка» с внутренними тенями
   и стеклянный пузырь выше дорожки, внутри — светящийся значок или буквы ---------- */
.lang, .tgl {
  /* цвета дорожки — из логотипа: в тёмной теме графит с тёмно-синим отливом, в светлой — синий знака */
  --tgl-bg: linear-gradient(180deg, #243142, #141b25);
  --tgl-shadow: inset -2px -4px 4px rgba(0, 0, 0, .35), inset 0 2px 10px rgba(120, 180, 240, .14), 0 14px 26px -12px rgba(0, 0, 0, .75);
  --tgl-text: #93a1b3;
  --tgl-glow: 0 0 6px rgba(255, 255, 255, .9), 0 0 14px rgba(8, 181, 230, .55);
}
:root[data-theme="light"] .lang, :root[data-theme="light"] .tgl {
  --tgl-bg: linear-gradient(180deg, #1a6cbc, #0a4a8a);
  --tgl-shadow: inset -2px -4px 4px rgba(4, 25, 52, .22), inset 0 2px 10px rgba(255, 255, 255, .32), 0 14px 26px -14px rgba(8, 42, 86, .55);
  --tgl-text: rgba(255, 255, 255, .86);
}
/* стеклянный пузырь: почти прозрачный, со светом сверху слева (−45°) и тонкой кромкой */
.glassbub {
  position: absolute; pointer-events: none; border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .07));
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(255, 255, 255, .14),
    inset 0 0 14px rgba(255, 255, 255, .07), 0 8px 18px -8px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(1px) brightness(1.15) saturate(1.5); backdrop-filter: blur(1px) brightness(1.15) saturate(1.5);
}
:root[data-theme="light"] .glassbub {
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .08));
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(255, 255, 255, .35),
    inset 0 0 10px rgba(255, 255, 255, .08), 0 10px 20px -10px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(.5px) brightness(1.04) saturate(1.3); backdrop-filter: blur(.5px) brightness(1.04) saturate(1.3);
}

/* языки: три буквы на дорожке, пузырь переезжает к выбранной */
.lang {
  position: relative; display: inline-flex; align-items: center; flex: none;
  height: 38px; padding: 0 4px; border-radius: 999px;
  background: var(--tgl-bg); box-shadow: var(--tgl-shadow);
}
.lang button {
  position: relative; z-index: 1; width: 34px; height: 38px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: 600 12px/1 var(--shell-font); letter-spacing: .05em; color: var(--tgl-text);
  transition: color .3s ease, text-shadow .3s ease;
}
.lang button:hover { color: #ffffff; }
.lang button[aria-pressed="true"] { color: #ffffff; text-shadow: var(--tgl-glow); }
.lang__pill {
  top: -6px; height: 50px; left: 0; z-index: 0;
  transition: transform .95s cubic-bezier(.34, 1.25, .64, 1), width .95s cubic-bezier(.34, 1.25, .64, 1), scale .6s cubic-bezier(.34, 1.25, .64, 1);
}
.lang__pill.no-anim { transition: none; }

/* тема: подпись на одной стороне, пузырь с луной или солнцем на другой */
.tgl {
  position: relative; flex: none; width: 112px; height: 38px; padding: 0; border: 0; border-radius: 999px;
  background: none; cursor: pointer;
}
.tgl__track { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--tgl-bg); box-shadow: var(--tgl-shadow); }
.tgl__label {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--shell-font); color: var(--tgl-text); white-space: nowrap;
  transition: opacity .35s ease, filter .35s ease, transform .6s var(--spring);
}
.tgl__label--dark { left: 8px; right: 50px; }
.tgl__label--light { left: 50px; right: 8px; color: #ffffff; opacity: 0; filter: blur(4px); transform: translateX(-10px); }
:root[data-theme="light"] .tgl__label--dark { opacity: 0; filter: blur(4px); transform: translateX(10px); }
:root[data-theme="light"] .tgl__label--light { opacity: 1; filter: none; transform: none; }
.tgl__glass {
  top: -6px; left: 0; width: 46px; height: 50px; z-index: 1; display: grid; place-items: center;
  transform: translateX(63px);
  transition: transform .8s var(--spring), scale .45s var(--spring);
}
:root[data-theme="light"] .tgl__glass { transform: translateX(3px); }
.tgl__glass svg {
  grid-area: 1 / 1; width: 19px; height: 19px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)) drop-shadow(0 0 10px rgba(255, 255, 255, .5));
  transition: opacity .4s ease, transform .7s var(--spring);
}
.tgl__moon { fill: #ffffff; }
.tgl__sun { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; opacity: 0; transform: rotate(-120deg) scale(.4); }
:root[data-theme="light"] .tgl__moon { opacity: 0; transform: rotate(120deg) scale(.4); }
:root[data-theme="light"] .tgl__sun { opacity: 1; transform: none; }
.tgl:hover .tgl__glass { scale: 1.05; }
/* «Авто» (по солнцу Ташкента): пузырь стоит у текущей темы, вместо «Тёмная/Светлая» — «Авто», в пузыре — солнце над горизонтом */
.tgl__label--auto { left: 8px; right: 50px; opacity: 0; filter: blur(4px); }
.tgl__auto { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; opacity: 0; transform: scale(.4); }
:root[data-theme-mode="auto"] .tgl__label--dark, :root[data-theme-mode="auto"] .tgl__label--light { opacity: 0; filter: blur(4px); }
:root[data-theme-mode="auto"] .tgl__label--auto { opacity: 1; filter: none; }
:root[data-theme-mode="auto"][data-theme="light"] .tgl__label--auto { left: 50px; right: 8px; color: #ffffff; }
:root[data-theme-mode="auto"] .tgl__moon, :root[data-theme-mode="auto"] .tgl__sun { opacity: 0; transform: scale(.4); }
:root[data-theme-mode="auto"] .tgl__auto { opacity: 1; transform: none; }
.tgl:focus-visible, .lang button:focus-visible { outline-offset: 5px; }
.nav__brand { display: grid; gap: 10px; text-decoration: none; }
/* Логотип — тег <ADD/>: скобки и косая черта знака из LOGO/, между ними ADD и Corp (рисует js/site.js).
   При загрузке и при наведении в скобках раскрывается полное имя. Цвета — из «футляра»: в тёмной теме
   буквы белые, в светлой — тёмно-синие, как надпись логотипа. */
.brand { position: relative; display: block; width: 240px; color: #ffffff; --adt-ink: #ffffff; --adt-muted: var(--shell-muted); --adt-accent: var(--shell-gold); }
:root[data-theme="light"] .brand { --adt-ink: #071f3e; }
/* знак для заставки: штрихи скобок и косой черты, орнамент, бирюзовые ромбы */
.mark__l, .mark__r, .mark__s { stroke: #ffffff; }
.mark__o { stroke: #082a56; }
.mark__f { fill: #08a6b9; }
.nav__role { margin: 0; color: var(--shell-muted); font-size: 13.5px; line-height: 1.45; }

.nav__group { display: grid; gap: 2px; }
.nav__label {
  margin: 0 0 6px; padding: 0 10px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--shell-dim);
}
.nav__link {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 12px;
  padding: 9px 10px; border-radius: 8px;
  text-decoration: none; color: var(--shell-muted);
  transition: background .15s, color .15s;
}
.nav__link--text { grid-template-columns: minmax(0, 1fr); padding-block: 7px; }
.nav__link { position: relative; z-index: 1; }
.nav__link:hover { background: var(--shell-raise); color: var(--shell-fg); }
.nav__link[aria-current="page"] { background: transparent; color: var(--shell-fg); }
.nav__link[aria-current="page"] .nav__icon { animation: icon-pop .55s var(--spring); }
@keyframes icon-pop { 40% { transform: scale(1.18); } }

/* Стеклянный «пузырь» под выбранным пунктом: переезжает с пружинкой и тянется на ходу,
   как капля. Положение и размер ставит js/site.js. */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --glide: cubic-bezier(.22, .8, .24, 1); }
.nav__bubble {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  border-radius: 12px;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 65%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -10px 18px -14px rgba(0, 0, 0, .7), 0 12px 26px -16px rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: blur(8px) saturate(170%); backdrop-filter: blur(8px) saturate(170%);
  /* едет без проскока и плавно тормозит точно у цели: пружина с перелётом на длинном пути между группами
     меню выглядела как рывок мимо пункта */
  transition: transform .55s var(--glide), width .55s var(--glide), height .55s var(--glide),
    scale .35s var(--ease-soft), opacity .3s ease;
}
:root[data-theme="light"] .nav__bubble {
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 1), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55) 65%);
  border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 -1px 0 rgba(23, 24, 28, .06), 0 12px 24px -14px rgba(40, 38, 30, .45);
}
.nav__bubble.is-off { opacity: 0; scale: .7; }
.nav__bubble.no-anim { transition: none; }
/* значок приложения: на всю высоту пункта, рядом название и подпись */
.nav__icon { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.nav__name { font-size: 15px; font-weight: 500; line-height: 1.25; }
.nav__meta { grid-column: 2; font-size: 12px; color: var(--shell-dim); line-height: 1.3; }
.nav__link[aria-current="page"] .nav__meta { color: var(--shell-muted); }

.nav__contacts {
  margin-top: auto; display: grid; gap: 8px;
  padding: 14px 10px 0; border-top: 1px solid var(--shell-line);
  font-size: 13.5px;
}
.nav__contacts a { text-decoration: none; color: var(--shell-muted); font-variant-numeric: tabular-nums; }
.nav__contacts a:hover { color: var(--shell-fg); }

.main { min-width: 0; }
.page { min-height: 100vh; min-height: 100dvh; }
.page[hidden] { display: none !important; }

/* ---------- переход между страницами ----------
   Как запуск приложения в Android: новая страница раскрывается кругом из точки нажатия
   (--vt-x, --vt-y задаёт js/site.js), старая отъезжает вглубь и гаснет. Меню не участвует. */
.nav { view-transition-name: nav; }
::view-transition-old(nav), ::view-transition-new(nav) { animation: none; }
/* логотип и переключатели — отдельные слои: при смене страницы и языка они не мигают и не размываются,
   пузырёк языка переезжает вживую */
.nav__brand { view-transition-name: nav-brand; }
.nav__tools { view-transition-name: nav-tools; }
::view-transition-old(nav-brand), ::view-transition-old(nav-tools) { display: none; }
::view-transition-new(nav-brand), ::view-transition-new(nav-tools) { animation: none; }
::view-transition-old(root) { animation: vt-sink .7s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: vt-open .7s cubic-bezier(.4, 0, .2, 1) both; }

/* смена темы: «свет под углом» — новая тема наплывает по диагонали из левого верхнего угла,
   где стоит переключатель, широкой мягкой волной (тот же угол −45°, что у света на стеклянном пузыре).
   Маска задана в единицах экрана, поэтому волна идёт одинаково по странице и по меню;
   логотип и переключатели на это время входят в слой меню и перекрашиваются той же волной */
.theme-vt .nav__brand, .theme-vt .nav__tools { view-transition-name: none; }
.theme-vt::view-transition-old(root), .theme-vt::view-transition-old(nav) { animation: none; }
.theme-vt::view-transition-new(root), .theme-vt::view-transition-new(nav) {
  animation: theme-sweep 1.1s var(--ease-soft) both;
  -webkit-mask-image: linear-gradient(135deg, #000 0 40%, transparent 55%); mask-image: linear-gradient(135deg, #000 0 40%, transparent 55%);
  -webkit-mask-size: 300vmax 300vmax; mask-size: 300vmax 300vmax;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@keyframes theme-sweep {
  from { -webkit-mask-position: -165vmax -165vmax; mask-position: -165vmax -165vmax; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
/* смена языка: старый текст спокойно гаснет с лёгким размытием, новый после короткой паузы
   проявляется широкой мягкой волной сверху вниз — без резких границ и рывков */
:root { --ease-soft: cubic-bezier(.45, 0, .2, 1); }
.lang-vt::view-transition-old(root) { animation: lang-out .7s var(--ease-soft) both; }
.lang-vt::view-transition-new(root) {
  animation: lang-in 1s var(--ease-soft) .2s both, lang-wave 1.25s var(--ease-soft) .15s both;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 30%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0 30%, transparent 70%);
  -webkit-mask-size: 100% 320%; mask-size: 100% 320%;
}
.lang-vt::view-transition-old(nav) { animation: lang-out .55s var(--ease-soft) both; }
.lang-vt::view-transition-new(nav) { animation: lang-in .75s var(--ease-soft) .15s both; }
@keyframes lang-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes lang-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes lang-wave { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
/* браузеры без View Transitions: тексты просто мягко проявляются */
.lang-swap [data-i18n], .lang-swap [data-i18n-html] { animation: lang-in .9s var(--ease-soft) .12s both; }

/* без размытия и сжатия: они тяжёлые для видеокарты и дают рывки и тёмные полосы по краям */
@keyframes vt-sink { to { opacity: .35; } }
@keyframes vt-open {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 50%)); }
}
/* содержимое новой страницы всплывает по очереди, пока раскрывается круг */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.page.is-entering .proj__intro > *,
.page.is-entering .proj__visual,
.page.is-entering .proj__body,
.page.is-entering .hero > *,
.page.is-entering .work__grid > * { animation: rise .7s cubic-bezier(.22, .7, .2, 1) both; }
.page.is-entering .proj__intro > :nth-child(1), .page.is-entering .hero > :nth-child(1) { animation-delay: .12s; }
.page.is-entering .proj__intro > :nth-child(2), .page.is-entering .hero > :nth-child(2) { animation-delay: .18s; }
.page.is-entering .proj__intro > :nth-child(3), .page.is-entering .hero > :nth-child(3) { animation-delay: .24s; }
.page.is-entering .proj__intro > :nth-child(4), .page.is-entering .hero > :nth-child(4) { animation-delay: .30s; }
.page.is-entering .proj__intro > :nth-child(5), .page.is-entering .hero > :nth-child(5) { animation-delay: .36s; }
.page.is-entering .hero > :nth-child(n+6) { animation-delay: .42s; }
.page.is-entering .proj__visual { animation-delay: .28s; }
.page.is-entering .proj__body { animation-delay: .42s; }
.page.is-entering .work__grid > :nth-child(1) { animation-delay: .45s; }
.page.is-entering .work__grid > :nth-child(2) { animation-delay: .52s; }
.page.is-entering .work__grid > :nth-child(3) { animation-delay: .59s; }

/* ---------- телефон: меню превращается в верхнюю полосу ---------- */
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .nav {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
    height: auto; flex-direction: row; align-items: center; gap: 14px;
    padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--shell-line);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__top { display: contents; }
  .nav__tools { flex: none; }
  .nav__brand { flex: none; padding: 0; }
  .brand { width: 150px; }
  .nav__role, .nav__label, .nav__meta, .nav__contacts { display: none; }
  .nav__group { display: flex; gap: 4px; flex: none; }
  .nav__link { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 6px 10px 6px 6px; }
  .nav__link--text { padding: 6px 10px; }
  .nav__icon { width: 24px; height: 24px; border-radius: 6px; }
  .nav__name { font-size: 14px; }
  .page { min-height: 0; }
  .home .faq, .home .cta, .home .road { scroll-margin-top: 72px; }
}

/* ===================================================================
   Главная ADD Corp.
   Замысел: название фирмы собрано из анкеты — фамилия, имя, отчество дают A, D, D.
   Дальше приложения в своих дизайнах и пустое третье место «для вас».
   =================================================================== */
/* Главная тёмная по умолчанию, независимо от темы системы; светлая — только по явному выбору. */
.home {
  --h-bg: #17181d;
  --h-ink: #ecebe6;
  --h-muted: #a3a19a;
  --h-line: #2e3037;
  --h-card: #1e2025;
  --h-accent: #08b5e6;
  --h-on-accent: #071f3e;
  --h-accent-soft: rgba(8, 181, 230, .12);
  --h-accent-inv: #0a66b8;   /* акцент на инвертированном блоке «Есть задача?» */
  background: var(--h-bg); color: var(--h-ink);
  padding-block: clamp(32px, 6vw, 80px) 40px;
  padding-inline: clamp(16px, 5vw, 72px);
  color-scheme: dark;
}
:root[data-theme="light"] .home {
  --h-bg: #f2f1ec; --h-ink: #17181c; --h-muted: #5d5c57; --h-line: #d8d6ce; --h-card: #fbfaf7;
  --h-accent: #0a66b8; --h-on-accent: #ffffff; --h-accent-soft: rgba(10, 102, 184, .09); --h-accent-inv: #08b5e6;
  color-scheme: light;
}
.home__foot-in { max-width: 1120px; margin-inline: auto; }
.home__inner { max-width: 1120px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(64px, 9vw, 112px); }
.home h2 { margin: 0; font: 700 clamp(22px, 2.4vw, 30px)/1.15 var(--brand-font); letter-spacing: -.01em; color: var(--h-ink); text-wrap: balance; }
.eyebrow { margin: 0; font: 600 12px/1.2 var(--shell-font); letter-spacing: .16em; text-transform: uppercase; color: var(--h-muted); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.sec-head p { margin: 0; color: var(--h-muted); font-size: 15px; max-width: 46ch; }

/* --- первый экран: тег <ADD/> — полное имя в скобках знака складывается в три буквы --- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 32px); }
/* тег <ADD/>: одна SVG 1000×240, куски двигаются трансформацией (см. js/site.js) */
.adt__svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 240; overflow: visible; opacity: 0; transition: opacity .5s ease; }
.adt.is-ready .adt__svg { opacity: 1; }
.adt-p { transform-box: view-box; transform-origin: 0 0; transition: transform .95s cubic-bezier(.66, 0, .2, 1), opacity .45s ease; }
.adt-p text { font: 700 100px/1 "Unbounded", "Unbounded Fallback", "Golos Text", "Golos Fallback", sans-serif; }   /* шрифт меряется в js/site.js — не от темы */
/* color повторяет fill: проверки доступности меряют контраст текста SVG по color, а не по fill */
.adt-i text { fill: var(--adt-ink); color: var(--adt-ink); transition: fill .6s ease; }
.adt.is-full .adt-i text { fill: var(--adt-accent); color: var(--adt-accent); }
.adt-r text, .adt-c text { font-weight: 400; fill: var(--adt-muted); color: var(--adt-muted); }
/* складывается: хвосты гаснут первыми, буквы съезжают следом; раскрывается — наоборот */
.adt:not(.is-full) .adt-p { transition-delay: .16s; }
.adt:not(.is-full) .adt-r { transition-delay: 0s; transition-duration: .7s, .3s; }
.adt.is-full .adt-r { transition-delay: 0s, .35s; }
.adt.is-full .adt-c { transition-duration: .5s, .2s; }
.adt:not(.is-full) .adt-c { transition-delay: .16s, .85s; transition-duration: .95s, .45s; }   /* Corp — когда буквы встали */
.adt.no-anim .adt-p, .adt.no-anim .adt-i text { transition: none; }
/* скобки и косая черта: в тёмной теме светлее, в светлой — цвета логотипа */
.adt-st { fill: none; stroke-width: 68; stroke-linecap: round; stroke-linejoin: round; }
.adt-st--l { stroke: url(#adtD1); }
.adt-st--r { stroke: url(#adtD2); }
.adt-st--s { stroke: url(#adtD3); }
:root[data-theme="light"] .adt-st--l { stroke: url(#adtL1); }
:root[data-theme="light"] .adt-st--r { stroke: url(#adtL2); }
:root[data-theme="light"] .adt-st--s { stroke: url(#adtL3); }
.adt-orn { fill: none; stroke: #ffffff; }
.adt-dot { fill: #08a6b9; }
.nav__brand:hover .adt-b, .nav__brand:focus-visible .adt-b { filter: drop-shadow(0 0 8px rgba(8, 181, 230, .4)); }
/* имя для экранного диктора: рисунок скрыт от него, а это — нет */
.adt__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .adt-p, .adt-i text, .adt__svg { transition: none; } }

.hero__title { margin: 0; max-width: 24ch; font: 600 clamp(28px, 3.4vw, 44px)/1.12 var(--shell-font); letter-spacing: -.02em; text-wrap: balance; }
.hero__lead { margin: 0; max-width: 62ch; font-size: clamp(17px, 1.5vw, 19px); color: var(--h-muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px;
  font: 600 15px/1 var(--shell-font); text-decoration: none;
  background: var(--h-accent); color: var(--h-on-accent); transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--h-ink); box-shadow: inset 0 0 0 1px var(--h-line); }


/* --- «Сейчас в работе»: карточки в дизайне самих приложений + свободное место --- */
.work__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.wcard {
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 10px; min-height: 360px;
  padding: 20px; text-decoration: none; position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wcard:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(0, 0, 0, .65); }
.wcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wcard__top img { width: 44px; height: 44px; border-radius: 11px; }
.wcard__tag { font: 600 11px/1 var(--shell-font); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; white-space: nowrap; }
.wcard__name { display: block; line-height: 1.02; }
.wcard__pitch { display: block; font: 400 15px/1.45 var(--shell-font); }

.wcard--velaro { border-radius: 5px; color: var(--p-fg); }
.wcard--velaro .wcard__name { font: 400 44px/1 "Tenor Sans", var(--p-display); letter-spacing: .22em; color: var(--p-accent); }   /* TUZ — шрифтом приложения */
.wcard--velaro .wcard__pitch { color: var(--p-muted); }
.wcard--velaro .wcard__tag { font-family: var(--v-label); font-weight: 400; letter-spacing: .14em; color: var(--p-accent); background: #08301e; box-shadow: inset 0 0 0 1px var(--p-accent); }   /* тёмная заливка: за плашкой самое светлое место сукна, без неё золото — 2.8:1 */
.wcard__fan { display: flex; justify-content: center; align-items: center; padding: 8px 0; }
.wcard__fan .pc { margin: 0 -7px; transition: transform .3s cubic-bezier(.22, .7, .2, 1); }
.wcard__fan .pc:nth-child(1) { transform: rotate(-10deg) translateY(6px); }
.wcard__fan .pc:nth-child(3) { transform: rotate(10deg) translateY(6px); }
.wcard--velaro:hover .wcard__fan .pc:nth-child(1) { transform: rotate(-18deg) translate(-12px, 10px); }
.wcard--velaro:hover .wcard__fan .pc:nth-child(2) { transform: translateY(-8px); }
.wcard--velaro:hover .wcard__fan .pc:nth-child(3) { transform: rotate(18deg) translate(12px, 10px); }

.wcard--fridge { border-radius: 12px; background: var(--p-bg); color: var(--p-fg); }
.wcard--fridge .wcard__name { font: 600 40px/1 var(--p-display); }
.wcard--fridge .wcard__pitch { color: var(--p-muted); font-family: var(--p-font); }
.wcard--fridge .wcard__tag { background: var(--p-tint); color: var(--p-accent); }
/* на тёмной карточке терракотовая метка светлее — иначе не хватает контраста */
:root:not([data-theme="light"]) .wcard--fridge .wcard__tag { color: #e9a77a; }
:root[data-theme="light"] .wcard--fridge .wcard__tag { color: #86451a; }   /* светлая тема: тёмная охра, контраст 5.2 на бежевой плашке */
.wcard__dishes { display: flex; justify-content: center; align-items: center; padding: 8px 0; }
.wcard__dishes img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 6px; margin: 0 -8px;
  border: 3px solid var(--p-card); box-shadow: 0 12px 22px -14px rgba(0, 0, 0, .55);
  transition: transform .3s cubic-bezier(.22, .7, .2, 1);
}
.wcard__dishes img:nth-child(1) { transform: rotate(-6deg); }
.wcard__dishes img:nth-child(3) { transform: rotate(6deg); }
.wcard--fridge:hover .wcard__dishes img:nth-child(1) { transform: rotate(-10deg) translateX(-10px); }
.wcard--fridge:hover .wcard__dishes img:nth-child(2) { transform: translateY(-8px); }
.wcard--fridge:hover .wcard__dishes img:nth-child(3) { transform: rotate(10deg) translateX(10px); }

.wcard--slot {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  border-radius: 18px; border: 2px dashed var(--h-line); color: var(--h-ink); background: transparent;
}
.wcard--slot:hover { border-color: var(--h-accent); box-shadow: none; }
.wcard__plus {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  border: 2px dashed currentColor; color: var(--h-muted); font: 400 30px/1 var(--brand-font);
  transition: color .2s, transform .3s;
}
.wcard--slot:hover .wcard__plus { color: var(--h-accent); border-style: solid; transform: rotate(90deg); }
.wcard--slot .wcard__name { font: 700 22px/1.2 var(--brand-font); }
.wcard--slot .wcard__pitch { margin-top: 8px; color: var(--h-muted); }

@media (min-width: 600px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcard--slot { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 0; }
}
@media (min-width: 1200px) {
  .work__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wcard--slot { grid-column: auto; flex-direction: column; align-items: stretch; justify-content: space-between; min-height: 360px; }
}

/* --- дорожная карта: у каждого приложения своя «линия метро» в его цветах.
   Пройденное — залитые станции на сплошной линии, текущий этап пульсирует,
   будущее — пустые станции на пунктире, как участок, который ещё строится. --- */
.road { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; scroll-margin-top: 24px; }
.road .sec-head { margin-bottom: 0; }
.road__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--h-muted); }
.road__legend li { display: inline-flex; align-items: center; gap: 8px; }
/* в подписи — пара значков: карта TUZ и ляган Domcook в том же состоянии, что станции */
.st { flex: none; width: 34px; height: 18px; background: var(--st-card) left center / 13px 17px no-repeat, var(--st-plate) right center / 17px 17px no-repeat; }
.st--done { --st-card: var(--rm-face-h); --st-plate: var(--rm-plate-1); }
.st--now { --st-card: var(--rm-face-now); --st-plate: var(--rm-plate-now-icon); }
.st--next { --st-card: var(--uz-back); --st-plate: var(--rm-plate-next); opacity: .75; }
.road__lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.lane {
  --line: var(--h-ink); --dot: var(--h-accent);
  min-width: 0; padding: 22px 22px 6px; border-radius: 18px;
  background: var(--h-card); border: 1px solid var(--h-line);
}
.lane--velaro { --line: #1d8850; --dot: #ffc246; }
.lane--fridge { --line: #c67139; --dot: #f5ead8; }
.lane__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 20px; text-decoration: none; }
.lane__head img { width: 40px; height: 40px; border-radius: 10px; }
.lane--fridge .lane__head img { border-radius: 9px; }
.lane__name { font-size: 28px; line-height: 1; }
.lane--velaro .lane__name { font: 400 30px/1 "Tenor Sans", "Cormorant Garamond", "Cormorant Fallback", Georgia, serif; letter-spacing: .2em; color: #c99a2e; }
:root[data-theme="light"] .lane--velaro .lane__name { color: #8a5e00; }
.lane--fridge .lane__name { font: 600 28px/1 "Playfair Display", "Playfair Fallback", Georgia, serif; color: var(--h-ink); }
.lane__count { margin-left: auto; font-size: 12.5px; color: var(--h-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lane__line { margin: 0; padding: 0; list-style: none; }
.ms { position: relative; display: grid; gap: 3px; padding: 0 0 22px 36px; min-width: 0; }
/* отрезок линии до следующей станции */
.ms::before {
  content: ""; position: absolute; left: 9px; top: 18px; bottom: -2px; width: 4px; border-radius: 2px;
  background: var(--line);
}
.ms:last-child::before { display: none; }
.ms--now::before, .ms--next::before {
  background: repeating-linear-gradient(to bottom, var(--line) 0 7px, transparent 7px 13px); opacity: .75;
}
/* станция */
.ms::after {
  content: ""; position: absolute; left: 1px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--line); border: 4px solid var(--h-card); box-shadow: 0 0 0 2px var(--line);
}
.ms--now::after { background: var(--dot); animation: station 1.8s ease-in-out infinite; }
@keyframes station { 50% { box-shadow: 0 0 0 2px var(--line), 0 0 0 9px color-mix(in srgb, var(--line) 25%, transparent); } }
.ms--next::after { background: var(--h-card); border: 2px dashed var(--line); box-shadow: none; width: 22px; height: 22px; left: 0; top: 1px; }
/* TUZ: станции — карты. Пройдено — открытая карта (масти по кругу), сейчас — карта переворачивается
   и светится золотом, дальше — карта рубашкой. Рисунки — переменные --rm-* из js/uzb.js */
.lane--velaro .ms::after, .lane--velaro .ms--next::after {
  left: 2px; top: 0; width: 18px; height: 24px; border: 0; border-radius: 3px; opacity: 1;
  background: var(--rm-face-s) center / 100% 100% no-repeat; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transform: rotate(-6deg);
}
.lane--velaro .ms:nth-child(even)::after { transform: rotate(5deg); }
.lane--velaro .ms--done:nth-child(4n+2)::after { background-image: var(--rm-face-h); }
.lane--velaro .ms--done:nth-child(4n+3)::after { background-image: var(--rm-face-c); }
.lane--velaro .ms--done:nth-child(4n)::after { background-image: var(--rm-face-d); }
.lane--velaro .ms--next::after { background-image: var(--uz-back); opacity: .6; }
.lane--velaro .ms--now::after {
  background-image: var(--rm-face-now); animation: rm-flip 4.2s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(255, 194, 70, .45), 0 0 16px rgba(255, 194, 70, .55);
}
@keyframes rm-flip {
  0%, 12% { transform: rotate(-6deg) scaleX(1); background-image: var(--uz-back); }
  22% { transform: rotate(0deg) scaleX(0); background-image: var(--uz-back); }
  22.1% { transform: rotate(0deg) scaleX(0); background-image: var(--rm-face-now); }
  32%, 84% { transform: rotate(5deg) scaleX(1); background-image: var(--rm-face-now); }
  93% { transform: rotate(0deg) scaleX(0); background-image: var(--rm-face-now); }
  93.1% { transform: rotate(0deg) scaleX(0); background-image: var(--uz-back); }
  100% { transform: rotate(-6deg) scaleX(1); background-image: var(--uz-back); }
}
/* Domcook: станции — ляганы. Пройдено — блюдо с едой (пять разных), сейчас — над блюдом пар,
   дальше — пустой ляган пунктиром */
.lane--fridge .ms::after, .lane--fridge .ms--next::after {
  left: 0; top: 0; width: 22px; height: 22px; border: 0; border-radius: 50%; opacity: 1;
  background: var(--rm-plate-1) center / 100% 100% no-repeat; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.lane--fridge .ms--done:nth-child(5n+2)::after { background-image: var(--rm-plate-2); }
.lane--fridge .ms--done:nth-child(5n+3)::after { background-image: var(--rm-plate-3); }
.lane--fridge .ms--done:nth-child(5n+4)::after { background-image: var(--rm-plate-4); }
.lane--fridge .ms--done:nth-child(5n)::after { background-image: var(--rm-plate-5); }
.lane--fridge .ms--now::after {
  top: -14px; height: 36px; border-radius: 0; animation: none; box-shadow: none;
  background-image: var(--rm-plate-now); filter: drop-shadow(0 0 5px rgba(198, 113, 57, .65));
}
:root[data-theme="light"] .lane--fridge .ms--now::after { background-image: var(--rm-plate-now-l); }
.lane--fridge .ms--next::after { background: var(--rm-plate-next) center / 100% 100% no-repeat, var(--h-card); box-shadow: none; }   /* фон — чтобы пунктир не просвечивал */
@media (prefers-reduced-motion: reduce) {
  .lane--velaro .ms--now::after { animation: none; transform: rotate(5deg); }
  .lane--fridge .ms--now::after { background-image: var(--rm-plate-now-still); }
  :root[data-theme="light"] .lane--fridge .ms--now::after { background-image: var(--rm-plate-now-still-l); }
}
/* «Терминал»: карты и ляганы — в зелёном люминофоре, как картинки сайта в этой теме */
:root[data-egg="term"] .lane .ms::after, :root[data-egg="term"] .st, :root[data-egg="term"] .nw__st {
  filter: grayscale(1) sepia(1) hue-rotate(68deg) saturate(2.6) brightness(.9);
}
.ms__date { font: 600 12px/1.3 var(--shell-font); letter-spacing: .05em; color: var(--h-muted); font-variant-numeric: tabular-nums; }
.ms__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 600 17px/1.3 var(--shell-font); color: var(--h-ink); }
.ms__text { font-size: 14px; line-height: 1.5; color: var(--h-muted); }
.ms__badge {
  font: 700 11px/1 var(--shell-font); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; background: var(--h-accent); color: var(--h-on-accent);
}
.ms--next .ms__title { color: color-mix(in srgb, var(--h-ink) 75%, transparent); }
@media (max-width: 760px) {
  .road__lanes { grid-template-columns: minmax(0, 1fr); }
  .lane { padding: 18px 16px 4px; }
}

/* --- «Знакомо?»: вопросы-зацепки; при наведении строка окрашивается в цвета приложения --- */
.hooks { display: grid; grid-template-columns: minmax(0, 1fr); }
.hooks h2 { margin-bottom: 12px; }
.hook {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: center;
  padding: clamp(18px, 2.4vw, 28px) 16px; margin-inline: -16px;
  border-bottom: 1px solid var(--h-line); border-radius: 14px;
  text-decoration: none; color: var(--h-ink);
  transition: background .25s ease, color .25s ease;
}
.hook:first-of-type { border-top: 1px solid var(--h-line); }
.hook__q { font: 600 clamp(20px, 2.5vw, 32px)/1.2 var(--shell-font); letter-spacing: -.015em; text-wrap: balance; }
.hook__to { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--h-muted); white-space: nowrap; }
.hook__to img { width: 28px; height: 28px; border-radius: 7px; }
.hook__to::after { content: "→"; transition: transform .2s ease; }
.hook:hover .hook__to::after { transform: translateX(5px); }
.hook--velaro:hover { background: radial-gradient(120% 160% at 15% 0%, #1d8850, #08301e 70%); color: #eff7f1; }
.hook--velaro:hover .hook__to { color: #ffc246; }
.hook--fridge:hover { background: #f5ead8; color: #2e2b25; }
.hook--fridge:hover .hook__to { color: #a85a26; }
.hook--you:hover { background: var(--h-accent); color: var(--h-on-accent); }
.hook--you:hover .hook__to { color: var(--h-on-accent); }
@media (max-width: 640px) {
  .hook { grid-template-columns: minmax(0, 1fr); }
}

/* --- вопросы и ответы --- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; scroll-margin-top: 24px; }
.faq__side { display: grid; gap: 12px; position: sticky; top: 24px; }
.faq__side p { margin: 0; color: var(--h-muted); max-width: 36ch; }
.faq__list { display: grid; min-width: 0; }
.faq__group { margin: 26px 0 4px; font: 600 11.5px/1 var(--shell-font); letter-spacing: .16em; text-transform: uppercase; color: var(--h-muted); }
.faq__group:first-child { margin-top: 0; }
.faq details { border-bottom: 1px solid var(--h-line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 16px; align-items: center;
  padding: 16px 0; font: 500 18px/1.35 var(--shell-font); color: var(--h-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--h-line); color: var(--h-muted); font: 400 18px/1 var(--brand-font);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.faq summary:hover::after { border-color: var(--h-accent); color: var(--h-accent); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--h-accent); color: var(--h-on-accent); border-color: transparent; }
.faq details p { margin: 0 46px 18px 0; color: var(--h-muted); line-height: 1.6; }
@media (max-width: 900px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__side { position: static; }
}

/* --- «Прикинем объём?»: отметки слева, итог справа. Чипы те же, что в форме заявки,
   но в обычных цветах страницы (в форме они на инвертированном фоне) --- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; scroll-margin-top: 24px; }
.calc .sec-head { margin-bottom: 0; }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 3.6vw, 48px); align-items: start; }
.calc__qs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; counter-reset: calc-q; }
.calc__q { min-width: 0; margin: 0; padding: 0; border: 0; }
.calc__q legend { padding: 0; margin-bottom: 12px; font: 600 16px/1.35 var(--shell-font); color: var(--h-ink); }
.calc__q legend::before {
  counter-increment: calc-q; content: counter(calc-q, decimal-leading-zero);
  display: inline-block; min-width: 2.2em; font: 600 12px/1 var(--shell-font); letter-spacing: .06em;
  color: var(--h-accent); font-variant-numeric: tabular-nums;
}
.calc__q legend small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--h-muted); }
.calc__q--pf { animation: rise .45s var(--spring) both; }   /* вопрос о платформе появляется только для приложения */
.calc .chip { max-width: 96%; }   /* выбранный чип чуть растёт (scale 1.04): так даже самый длинный не вылезает за край */
.calc .chip span { color: var(--h-ink); border-color: color-mix(in srgb, var(--h-ink) 20%, transparent); }
.calc .chip:hover span { border-color: color-mix(in srgb, var(--h-ink) 50%, transparent); }
.calc .chip input:checked + span { background: var(--h-accent); color: var(--h-on-accent); border-color: transparent; }
.calc .chip input:focus-visible + span { outline-color: var(--h-accent); }
/* у пунктов с несколькими ответами плюс превращается в галочку */
.calc .chip input[type="checkbox"] + span::before { content: "+"; width: 1em; margin: 0 6px 0 -3px; text-align: center; font-weight: 600; color: var(--h-muted); }
.calc .chip input[type="checkbox"]:checked + span::before { content: "✓"; color: inherit; }

.calc__res {
  position: sticky; top: 24px; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(20px, 2.6vw, 30px);
  border-radius: 22px; background: var(--h-card); border: 1px solid var(--h-line);
}
.calc__kicker { margin: 0; font: 600 11.5px/1.2 var(--shell-font); letter-spacing: .16em; text-transform: uppercase; color: var(--h-muted); }
.calc__now { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: -6px; }
.calc__size { margin: 0; font: 700 clamp(21px, 2.2vw, 27px)/1.15 var(--brand-font); letter-spacing: -.01em; color: var(--h-ink); text-wrap: balance; }
.calc__size.is-bump { animation: calc-bump .5s var(--spring); }
@keyframes calc-bump { from { opacity: .3; transform: translateY(8px); } }
/* шкала из четырёх делений: небольшая, средняя, большая, очень большая */
.calc__meter { position: relative; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--h-ink) 10%, transparent); }
.calc__meter::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), var(--h-card) calc(25% - 3px) 25%); }
.calc__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--h-accent); transition: width .9s var(--spring); }
.calc__time { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font-size: 14px; color: var(--h-muted); }
.calc__time b { font: 600 20px/1.2 var(--shell-font); color: var(--h-ink); font-variant-numeric: tabular-nums; }
.calc__list { margin: -6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; font-size: 14.5px; line-height: 1.4; }
.calc__list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.calc__list li::before { content: "✓"; font-weight: 700; color: var(--h-accent); }
.calc__list li.is-new { animation: rise .45s var(--spring) both; }
.calc__warn { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--h-accent-soft); color: var(--h-ink); font-size: 14px; line-height: 1.45; }
.calc__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--h-muted); }
.calc__go { width: 100%; justify-content: center; border: 0; cursor: pointer; }
.calc__arr { transition: transform .25s var(--spring); }
.calc__go:hover .calc__arr { transform: translateY(3px); }
@media (max-width: 1100px) {
  .calc__grid { grid-template-columns: minmax(0, 1fr); }
  .calc__res { position: static; }
}
@media (max-width: 860px) { .home .calc { scroll-margin-top: 72px; } }
@media (max-width: 560px) { .calc__q legend small { display: block; margin: 3px 0 0; } }
/* форма, только что заполненная из «Прикинем объём?», на миг подсвечивается */
.brief-box { border-radius: 18px; outline: 2px solid transparent; outline-offset: 10px; transition: outline-color .6s ease; }
.brief-box.is-calc { outline-color: var(--h-accent-inv); animation: calc-flash .8s var(--spring); }
@keyframes calc-flash { from { outline-offset: 24px; outline-color: transparent; } }

/* --- «Как я работаю»: четыре шага с примерами из своих проектов --- */
.how__steps {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 560px) { .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .how__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.how__step {
  position: relative; display: grid; align-content: start; gap: 8px; min-width: 0;
  padding: 22px 20px 20px; border-radius: 16px; background: var(--h-card); border: 1px solid var(--h-line);
}
.how__step::after {
  content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--h-accent), transparent);
}
.how__n { font: 700 13px/1 var(--brand-font); letter-spacing: .08em; color: var(--h-accent); }
.how__step h3 { margin: 0; font: 600 19px/1.25 var(--shell-font); letter-spacing: -.01em; color: var(--h-ink); }
.how__step p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--h-muted); }
.how__step .how__ex {
  margin-top: 4px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--h-ink);
  background: var(--h-accent-soft);
}

/* --- «Есть задача?»: инвертированный блок в конце --- */
.cta {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; scroll-margin-top: 24px;
  padding: clamp(24px, 4vw, 52px); border-radius: 24px;
  background: var(--h-ink); color: var(--h-bg);
}
.home .cta__title { margin: 0; font: 700 clamp(34px, 5.4vw, 68px)/1.02 var(--brand-font); letter-spacing: -.02em; color: var(--h-bg); }
.home .cta__title span { color: var(--h-accent-inv); }
.cta__lead { margin: 0; max-width: 58ch; font-size: clamp(16px, 1.5vw, 18px); color: color-mix(in srgb, var(--h-bg) 72%, transparent); }

.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; max-width: 760px; }
.contact {
  display: grid; gap: 4px; padding: 18px 20px; border-radius: 14px;
  background: color-mix(in srgb, var(--h-bg) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--h-bg) 20%, transparent);
}
.contact__label { font-size: 12.5px; letter-spacing: .04em; color: color-mix(in srgb, var(--h-bg) 74%, transparent); }
.contact__value { font-size: 20px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; user-select: all; white-space: nowrap; color: var(--h-bg); }
.contact__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.copy {
  flex: none; background: transparent; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--h-bg) 30%, transparent); color: var(--h-bg);
  font: 500 12.5px/1 var(--shell-font); padding: 8px 11px; border-radius: 8px;
}
.copy:hover { background: var(--h-bg); color: var(--h-ink); }

/* --- форма заявки внутри блока «Есть задача?» (инвертированные цвета блока) --- */
.cta__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: start; }
.cta__grid .contacts { grid-template-columns: minmax(0, 1fr); max-width: none; }
@media (max-width: 1100px) { .cta__grid { grid-template-columns: minmax(0, 1fr); } }
.brief-box { min-width: 0; }
.brief { display: grid; gap: 18px; }
.brief__field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.brief__field > span, .brief__field legend {
  padding: 0; font-size: 13px; letter-spacing: .04em; color: color-mix(in srgb, var(--h-bg) 66%, transparent);
}
.brief__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .brief__row { grid-template-columns: minmax(0, 1fr); } }
.brief textarea, .brief input:not([type="radio"]) {
  width: 100%; padding: 13px 15px; border-radius: 14px; resize: vertical;
  font: 400 16px/1.45 var(--shell-font); color: var(--h-bg);
  background: color-mix(in srgb, var(--h-bg) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--h-bg) 20%, transparent);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.brief textarea::placeholder, .brief input::placeholder { color: color-mix(in srgb, var(--h-bg) 66%, transparent); }   /* контраст 5:1 и выше */
.brief textarea:focus, .brief input:not([type="radio"]):focus {
  outline: none; border-color: var(--h-accent-inv);
  background: color-mix(in srgb, var(--h-bg) 10%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--h-accent-inv) 25%, transparent);
}
.brief [aria-invalid="true"] { border-color: #ff8a80 !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 9px 15px; border-radius: 999px;
  font: 500 14px/1.2 var(--shell-font); color: var(--h-bg);
  border: 1px solid color-mix(in srgb, var(--h-bg) 24%, transparent);
  transition: background .25s, color .25s, border-color .25s, transform .4s var(--spring);
}
.chip:hover span { border-color: color-mix(in srgb, var(--h-bg) 55%, transparent); }
.chip input:checked + span { background: var(--h-bg); color: var(--h-ink); border-color: transparent; transform: scale(1.04); }
.chip input:focus-visible + span { outline: 2px solid var(--h-accent-inv); outline-offset: 3px; }
.brief__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.brief__error { margin: 0; font-size: 14px; color: #ff8a80; }
.brief__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.brief__submit { border: 0; cursor: pointer; background: var(--h-accent-inv); color: var(--h-ink); }
.brief__note { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--h-bg) 72%, transparent); max-width: 36ch; }
.brief-done {
  display: grid; gap: 14px; padding: 20px; border-radius: 18px;
  background: color-mix(in srgb, var(--h-bg) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--h-bg) 20%, transparent);
  animation: rise .6s var(--spring) both;
}
.brief-done__title { margin: 0; font: 700 22px/1.2 var(--brand-font); color: var(--h-bg); }
/* чай за заявку: чайник приподнимается и наклоняется, струя наполняет пиалу, потом над ней пар.
   Блок до этого скрыт (hidden), поэтому анимация начинается заново при каждом показе */
.brief-done__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.brief-tea { flex: none; display: block; width: 112px; height: 66px; color: var(--h-bg); overflow: visible; }
.brief-tea__pot { transform-box: view-box; transform-origin: 30px 42px; animation: tea-pour 2.6s ease-in-out both; }
.brief-tea__stream { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: tea-stream 2.6s linear both; }
.brief-tea__level { transform: translateY(16px); animation: tea-level 2.6s ease-out both; }
.brief-tea__top { opacity: 0; animation: tea-top 2.6s linear both; }
.brief-tea__steam path { opacity: 0; animation: tea-steam 2.8s ease-in-out 2.4s infinite; }
.brief-tea__steam path + path { animation-delay: 3.3s; }
@keyframes tea-pour { 0% { transform: none; } 22%, 70% { transform: translateY(-8px) rotate(24deg); } 88%, 100% { transform: none; } }
@keyframes tea-stream { 0%, 22% { opacity: 0; stroke-dashoffset: 1; } 24% { opacity: 1; } 36% { stroke-dashoffset: 0; } 66% { opacity: 1; stroke-dashoffset: 0; } 72%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes tea-level { 0%, 30% { transform: translateY(16px); } 70%, 100% { transform: translateY(0); } }
@keyframes tea-top { 0%, 64% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes tea-steam { 0% { opacity: 0; transform: translateY(3px); } 40% { opacity: .75; } 100% { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  /* без движения — сразу полная пиала и лёгкий пар */
  .brief-tea__pot, .brief-tea__stream, .brief-tea__level, .brief-tea__top, .brief-tea__steam path { animation: none; }
  .brief-tea__level { transform: none; }
  .brief-tea__top { opacity: 1; }
  .brief-tea__steam path { opacity: .5; }
}
:root[data-egg="term"] .brief-tea { display: none; }
.brief-done__text { margin: 0; color: color-mix(in srgb, var(--h-bg) 72%, transparent); }
.brief-done__preview {
  margin: 0; max-height: 220px; overflow: auto; padding: 14px 16px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 14px/1.5 var(--shell-font); color: var(--h-bg); background: color-mix(in srgb, var(--h-bg) 6%, transparent);
}
.brief-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.brief-done__actions .btn { background: var(--h-accent-inv); color: var(--h-ink); }
.brief-done__edit {
  border: 0; background: none; cursor: pointer; padding: 8px 4px;
  font: 500 14px/1 var(--shell-font); color: color-mix(in srgb, var(--h-bg) 70%, transparent); text-decoration: underline;
}

.home__foot { margin-top: clamp(32px, 4vw, 48px); font-size: 13.5px; color: var(--h-muted); }
.home__foot-in {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  padding-top: 20px; border-top: 1px solid var(--h-line);
}

/* ---------- общий скелет страницы проекта; кожу задаёт css/projects.css ---------- */
.proj {
  background: var(--p-bg); color: var(--p-fg);
  font-family: var(--p-font);
  padding-block: clamp(32px, 6vw, 72px) 80px;
  padding-inline: clamp(16px, 5vw, 72px);
}
.proj__inner { max-width: 1100px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); }
.proj__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
/* Описание проекта и живое демо. Демо бывает выше экрана (стол TUZ, «Что есть дома?» Domcook), поэтому
   на широком экране слева идут описание, «Что умеет» и «Как сделано», а демо занимает правую колонку на все три
   строки — без пустой колонки рядом с ним. «Живой телефон» и отзыв идут ниже во всю ширину. */
.proj__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); }
@media (min-width: 981px) {
  /* строки: описание, «Что умеет», «Как сделано» — последняя забирает лишнюю высоту демо */
  .proj__main { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: auto auto 1fr; column-gap: clamp(28px, 5vw, 56px); row-gap: clamp(36px, 4vw, 48px); }
  .proj__main > .proj__head, .proj__main > .proj__body { display: contents; }
  .proj__main .proj__intro { grid-column: 1; grid-row: 1; }
  .proj__main .proj__visual { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .proj__main > .proj__body > div { grid-column: 1; align-self: start; }
  .proj__main > .proj__body > div:first-child { grid-row: 2; }
  .proj__main > .proj__body > div:nth-child(2) { grid-row: 3; }
}
/* стол TUZ короче текста рядом — он едет вместе с чтением (до конца описания); телефон вписан в высоту
   окна масштабом (js/vfull.js), поэтому помещается и на ноутбуке. Класс is-pinned ставит тот же скрипт —
   только когда стол в рамке телефона (без рамки он бывает выше окна, и низ стола ушёл бы за край) */
@media (min-width: 981px) and (min-height: 600px) {
  .p-velaro .proj__main .proj__visual.is-pinned { position: sticky; top: 24px; }
}
.proj__intro { display: grid; gap: 18px; min-width: 0; }
.proj__id { display: flex; align-items: center; gap: 14px; }
.proj__logo { width: 64px; height: 64px; border-radius: var(--p-logo-r, 16px); flex: none; object-fit: cover; }
.proj__kicker { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted); }
.proj h1 { margin: 0; font-family: var(--p-display, inherit); font-size: clamp(36px, 5.4vw, 60px); line-height: 1.02; font-weight: var(--p-h-weight, 700); letter-spacing: var(--p-h-track, -.02em); text-wrap: balance; }
.proj__pitch { margin: 0; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--p-fg2, var(--p-fg)); max-width: 52ch; }
.proj__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.proj__chip { font-size: 13px; line-height: 1; padding: 8px 12px; border-radius: var(--p-chip-r, 999px); background: var(--p-chip-bg); color: var(--p-chip-fg); }
.proj__chip--stage { background: var(--p-accent); color: var(--p-on-accent); font-weight: 600; }
.proj__visual { min-width: 0; }

.proj__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.proj h2 { margin: 0 0 16px; font-family: var(--p-display, inherit); font-size: var(--p-h2-size, 24px); font-weight: var(--p-h2-weight, 650); letter-spacing: -.01em; }
.proj__features { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.proj__features li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; line-height: 1.5; }
.proj__features li::before { content: var(--p-bullet, "—"); color: var(--p-accent2, var(--p-accent)); font-weight: 700; }
.proj__stack { display: grid; gap: 10px; margin: 0; }
.proj__stack div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--p-line); }
.proj__stack dt { color: var(--p-muted); font-size: 14px; }
.proj__stack dd { margin: 0; font-size: 15px; }

@media (max-width: 980px) {
  .proj__head, .proj__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .proj__stack div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- устройства ---------- */
/* большие мониторы: содержимое шире, чтобы не терялось посреди экрана */
@media (min-width: 1700px) {
  :root { --nav-w: 320px; }
  .home__inner, .home__foot-in { max-width: 1320px; }
  .proj__inner { max-width: 1280px; }
}
@media (min-width: 2200px) {
  .home__inner, .home__foot-in { max-width: 1480px; }
  .proj__inner { max-width: 1400px; }
  body { font-size: 17px; }
}
/* сенсорные экраны: кнопки под палец и отклик на нажатие */
@media (pointer: coarse) {
  .lang button { width: 38px; }
  .tgl { width: 120px; }
  .tgl__glass { transform: translateX(71px); }
  .nav__link { min-height: 44px; }
  .copy { padding: 12px 14px; }
  .wcard:active, .hook:active, .btn:active { transform: scale(.98); }
}
/* телефон, повёрнутый горизонтально: экран низкий, первый экран компактнее */
@media (max-height: 500px) and (orientation: landscape) {
  .home { padding-block-start: 24px; }
}

/* ---------- отзывы о концепте: строка под блоком (цвета берёт из блока, где стоит) ---------- */
.fb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; padding: 12px 14px;
  border-radius: 12px; border: 1px dashed color-mix(in srgb, currentColor 24%, transparent); font-size: 14px;
}
.fb__q { margin: 0; color: color-mix(in srgb, currentColor 72%, transparent); }
.fb__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.fb__btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: inherit; background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  transition: background .2s, border-color .2s, transform .25s var(--spring);
}
.fb__btn b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 1ch; }
.fb__btn:hover:not(:disabled) { border-color: color-mix(in srgb, currentColor 55%, transparent); }
.fb__btn:active:not(:disabled) { transform: scale(.94); }
.fb__btn[aria-pressed="true"] { background: color-mix(in srgb, currentColor 14%, transparent); border-color: color-mix(in srgb, currentColor 60%, transparent); }
.fb__btn:disabled { opacity: .55; cursor: default; }
.fb__form { flex-basis: 100%; display: grid; gap: 8px; }
.fb__form textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; padding: 10px 12px; border-radius: 10px;
  font: inherit; color: inherit; background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.fb__form textarea:focus { outline: 2px solid color-mix(in srgb, currentColor 45%, transparent); outline-offset: 1px; }
.fb__form-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.fb__send { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 13.5px; color: inherit; border: 1px solid currentColor; }
.fb__send.is-off { opacity: .45; }
.fb__cancel { border: 0; background: none; padding: 6px 0; cursor: pointer; font: inherit; font-size: 13.5px; color: color-mix(in srgb, currentColor 65%, transparent); }
.fb__note { flex-basis: 100%; margin: 0; font-size: 13px; color: color-mix(in srgb, currentColor 75%, transparent); }

/* сводка отзывов — её видит только владелец сайта */
.fb-sum {
  display: grid; gap: 12px; margin-top: clamp(40px, 6vw, 72px); padding: 22px 24px; border-radius: 16px;
  background: var(--h-card); border: 1px solid var(--h-line);
}
.fb-sum__title { margin: 0; font: 700 22px/1.2 var(--brand-font); }
.fb-sum__note { margin: 0; font-size: 14px; color: var(--h-muted); }
.fb-sum__rows { display: grid; gap: 10px; }
.fb-sum__row { display: grid; grid-template-columns: minmax(80px, 150px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.fb-sum__bar { position: relative; height: 8px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--h-ink) 12%, transparent); }
.fb-sum__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--up, 0%); border-radius: inherit; background: var(--h-accent); transition: width .5s var(--ease-soft); }
.fb-sum__nums { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--h-muted); }

/* визитка: сохранить контакт и QR-код для камеры телефона */
.contact--card .contact__row { justify-content: flex-start; }
.vc { display: grid; justify-items: start; gap: 8px; margin-top: 8px; }
.vc__code {
  width: 200px; max-width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: 6px; box-sizing: border-box;
  border-radius: 12px; background: #fff; color: #333; font-size: 13px; text-align: center;
}
.vc__code svg { display: block; width: 100%; height: 100%; }
.vc__note { margin: 0; max-width: 34ch; font-size: 13px; color: color-mix(in srgb, var(--h-bg) 74%, transparent); }

/* ===================================================================
   Заставка при первом входе: на зелёное сукно рубашкой вверх прилетают три карты,
   переворачиваются — A, D, D — и, сходясь, складываются в логотип ADD Corp; потом сукно гаснет.
   Около двух секунд. Показ решает скрипт в <head> (класс intro-on у <html>), пропуск и уборку
   из DOM — js/site.js. Весь ход задан здесь задержками анимаций, поэтому, даже если скрипт
   не сработает, заставка сама погаснет и не будет мешать нажатиям.
   =================================================================== */
.intro-on .intro[hidden] { display: block !important; }
.intro {
  --cw: clamp(60px, min(24vw, 19vh), 116px);   /* ширина карты; высота в 1,45 раза больше, как у .pc */
  --gap: calc(var(--cw) * .3);
  --lf: calc(var(--cw) * .56);                 /* буква на карте и буква логотипа — одного кегля */
  --paper: #fdfbf4; --ink: #16202a; --red: #d01f2e; --back: #f0700f; --gold: #ffc246;
  position: fixed; inset: 0; z-index: 2000; overflow: hidden;
  color: var(--paper); cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  /* сукно: мягкий свет лампы над столом и едва заметный ворс */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 -.16'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(75% 65% at 50% 46%, #1d8850 0%, #0f5c36 48%, #08301e 82%, #04190f 100%) #08301e;
  animation: intro-out .36s var(--ease-soft) 1.92s forwards;
}
:root[data-theme="light"] .intro {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 -.15'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(75% 65% at 50% 46%, #23995c 0%, #137043 50%, #0c4a2c 85%, #083a22 100%) #0c4a2c;
}
/* линия стола вокруг карт, как на настоящем сукне */
.intro::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(88vw, calc(var(--cw) * 6.6)); height: min(70vh, calc(var(--cw) * 3.4)); border-radius: 50%;
  border: 1.5px solid rgba(255, 194, 70, .24); outline: 1px solid rgba(255, 194, 70, .1); outline-offset: 7px;
  animation: intro-in .5s ease both;
}
.intro.is-out { animation: intro-skip .3s var(--ease-soft) forwards; pointer-events: none; }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@keyframes intro-skip { to { opacity: 0; visibility: hidden; } }
@keyframes intro-in { from { opacity: 0; } }
@keyframes intro-fade { to { opacity: 0; } }

.intro__stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: intro-lift .36s var(--ease-soft) 1.92s both; }
@keyframes intro-lift { to { scale: 1.05; } }
/* место карты в ряду; в конце карта едет к своей букве логотипа (--dx/--dy уточняет js/site.js) */
.intro__slot {
  --dx: calc((var(--i) - 1) * (var(--lf) * .84 - var(--cw) - var(--gap)) - var(--lf) * 1.42);
  position: absolute; width: var(--cw); height: calc(var(--cw) * 1.45);
  left: calc((var(--i) - 1) * (var(--cw) + var(--gap)) - var(--cw) / 2); top: calc(var(--cw) * -.725);
  animation: intro-merge .42s cubic-bezier(.62, 0, .24, 1) 1.26s both;
}
@keyframes intro-merge { to { translate: var(--dx) var(--dy, 0px); } }
/* раздача: карты по очереди прилетают снизу, как из колоды в руке */
.intro__card { position: absolute; inset: 0; perspective: 900px; animation: intro-deal .52s cubic-bezier(.2, .85, .3, 1.1) calc(.04s + var(--i) * .08s) both; }
@keyframes intro-deal {
  from { translate: calc((1 - var(--i)) * (var(--cw) + var(--gap)) * .6) calc(50vh + var(--cw) * 1.3); rotate: calc((var(--i) - 1) * 22deg - 12deg); }
}
/* переворот: карта чуть приподнимается и показывает букву */
.intro__flip { position: absolute; inset: 0; transform-style: preserve-3d; animation: intro-flip .42s cubic-bezier(.45, 0, .2, 1) calc(.46s + var(--i) * .09s) both; }
@keyframes intro-flip {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(90deg) scale(1.1); }
  100% { transform: rotateY(180deg); }
}
.intro__face { position: absolute; inset: 0; border-radius: calc(var(--cw) * .13); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* рубашка — как у карт TUZ (.pc--back): риштанская роспись, узор --uz-back из css/projects.css */
.intro__back {
  background: var(--uz-back) center / 100% 100% no-repeat, var(--uz-glaze, #f7f2e5);
  box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .75);
}
/* лицо: бумага карты, угловые индексы и крупная буква шрифтом логотипа */
.intro__front {
  --c: var(--ink);
  transform: rotateY(180deg); display: grid; place-items: center;
  background: var(--paper); color: var(--c);
  box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .75);
  animation: intro-paper .42s cubic-bezier(.5, 0, .3, 1) 1.26s both;
}
.intro__front--red { --c: var(--red); }
/* на сходе бумага сначала сжимается вокруг буквы, потом тает, а буква светлеет до цвета логотипа */
@keyframes intro-paper {
  55% { inset: 26% 23%; border-radius: 10px; background-color: var(--paper); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .55); color: var(--c); }
  to { inset: 29% 26%; border-radius: 8px; background-color: rgba(253, 251, 244, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); color: var(--paper); }
}
.intro__mark {
  position: absolute; top: 6%; left: 9%; display: grid; justify-items: center; gap: 2px;
  font: 400 calc(var(--cw) * .2)/1 "Oswald", "Oswald Fallback", "Arial Narrow", sans-serif;
  animation: intro-fade .18s linear 1.26s both;
}
.intro__mark small { font: calc(var(--cw) * .15)/1 "Segoe UI Symbol", serif; }
.intro__mark--end { top: auto; left: auto; bottom: 6%; right: 9%; rotate: 180deg; }
.intro__letter { font: 700 var(--lf)/1 var(--logo-font); letter-spacing: 0; animation: intro-fade .12s linear 1.7s both; }
/* логотип в вертикальной компоновке (LOGO/ADD_Corp_Stacked): знак проявляется над буквами с карт,
   Corp выплывает следом, под надписью вспыхивает золотая черта стола */
.intro__logo {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--lf) * .5);
  white-space: nowrap; font-size: var(--lf); color: var(--paper);
}
.intro__mk { width: calc(var(--lf) * 2.6); height: auto; aspect-ratio: 513 / 358; animation: intro-mk .5s var(--glide) 1.42s both; }
.intro__mk .mark__l, .intro__mk .mark__r, .intro__mk .mark__s { stroke: var(--paper); }
@keyframes intro-mk { from { opacity: 0; scale: .55; filter: blur(6px); } }
.intro__word { display: flex; align-items: baseline; gap: .3em; font: 400 calc(var(--lf) * .786)/1 var(--logo-font); }
.intro__logo b { display: flex; font-size: 1.273em; font-weight: 700; color: var(--paper); }
.intro__logo i { font-style: normal; animation: intro-in .12s linear 1.62s both; }
.intro__corp { animation: intro-corp .44s var(--glide) 1.5s both; }
@keyframes intro-corp { from { opacity: 0; translate: -.6em 0; filter: blur(6px); } }
.intro__logo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.36em; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30% 70%, transparent);
  transform-origin: 50% 50%; animation: intro-line .5s var(--glide) 1.64s both;
}
@keyframes intro-line { from { transform: scaleX(0); opacity: 0; } }
.intro__skip {
  position: absolute; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  font: 500 13px/1 var(--shell-font); letter-spacing: .03em; color: rgba(253, 251, 244, .82);
  background: rgba(4, 25, 15, .38); border: 1px solid rgba(253, 251, 244, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s, color .2s, border-color .2s;
  animation: intro-in .3s ease .3s both;
}
.intro__skip::after { content: "→"; content: "→" / ""; transition: transform .2s var(--spring); }
.intro__skip:hover { color: #ffffff; background: rgba(4, 25, 15, .58); border-color: rgba(253, 251, 244, .45); }
.intro__skip:hover::after { transform: translateX(3px); }
.intro__skip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ===================================================================
   Экскурсия «Покажите мне всё»: затемнение с окном вокруг блока и подпись рядом,
   на телефоне — шторкой снизу. Окно, подпись и прозрачные заслонки вокруг окна
   (мимо окна не нажать, а в окне всё работает) расставляет js/site.js.
   =================================================================== */
.btn--tour { border: 0; cursor: pointer; }
.btn--tour svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.btn--tour svg path { fill: currentColor; stroke: none; }
.btn--tour:hover { box-shadow: inset 0 0 0 1px var(--h-accent); }
.btn--tour:hover svg { color: var(--h-accent); }

.tour {
  --tour-dim: rgba(6, 8, 12, .7);
  position: fixed; inset: 0; z-index: 1500; overflow: hidden; pointer-events: none;
  transition: opacity .3s var(--ease-soft);
  view-transition-name: tour;   /* при смене страницы затемнение стоит на месте, круг раскрывается под ним */
}
:root[data-theme="light"] .tour { --tour-dim: rgba(26, 28, 36, .56); }
::view-transition-old(tour) { display: none; }
::view-transition-new(tour) { animation: none; }
.tour.is-off { opacity: 0; }
.tour.is-off .tour__block, .tour.is-off .tour__tip { pointer-events: none; }   /* гаснущая экскурсия уже не ловит нажатия */
.tour__block { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: auto; }
.tour__hole {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 16px;
  box-shadow: 0 0 0 200vmax var(--tour-dim);
  transition: transform .6s var(--glide), width .6s var(--glide), height .6s var(--glide);
}
.tour__hole::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 2px var(--shell-gold), 0 0 26px 0 color-mix(in srgb, var(--shell-gold) 35%, transparent);
  animation: tour-ring 2.4s ease-in-out infinite;
}
@keyframes tour-ring { 50% { box-shadow: 0 0 0 2px var(--shell-gold), 0 0 0 7px color-mix(in srgb, var(--shell-gold) 16%, transparent); } }
.tour.is-follow .tour__hole, .tour.is-follow .tour__tip, .tour__tip.no-move { transition: none; }

.tour__tip {
  position: absolute; left: 0; top: 0; width: 340px; max-width: calc(100vw - 24px); pointer-events: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 16px 14px;
  border-radius: 20px; color: var(--shell-fg);
  background: color-mix(in srgb, var(--shell-raise) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--shell-fg) 14%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 28px 60px -22px rgba(0, 0, 0, .75);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  transition: transform .5s var(--glide), translate .35s var(--glide), opacity .3s var(--ease-soft);
}
:root[data-theme="light"] .tour__tip {
  background: color-mix(in srgb, #fbfaf7 94%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 28px 60px -24px rgba(20, 20, 30, .55);
}
.tour__tip.is-hidden { opacity: 0; translate: 0 10px; pointer-events: none; }
.tour__tip:focus { outline: none; }
.tour__tip.is-sheet {
  left: 10px; right: 10px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: auto; max-width: none; transform: none; border-radius: 22px; padding: 14px 16px 12px;
}
.tour__tip.is-sheet.is-hidden { translate: 0 24px; }
.tour__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour__count { font: 600 11.5px/1 var(--shell-font); letter-spacing: .14em; text-transform: uppercase; color: var(--shell-muted); font-variant-numeric: tabular-nums; }
.tour__x {
  display: grid; place-items: center; width: 34px; height: 34px; margin: -8px -8px -8px 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--shell-muted); cursor: pointer;
  transition: background .2s, color .2s;
}
.tour__x svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tour__x:hover { background: color-mix(in srgb, var(--shell-fg) 10%, transparent); color: var(--shell-fg); }
.tour__live { display: grid; gap: 6px; }
.tour__title { margin: 0; font: 700 18px/1.2 var(--brand-font); letter-spacing: -.01em; color: var(--shell-fg); text-wrap: balance; }
.tour__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, var(--shell-fg) 80%, transparent); }
/* сколько осталось до следующей остановки: пройденные полоски полные, текущая наполняется */
.tour__steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.tour__steps i { position: relative; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--shell-fg) 16%, transparent); }
.tour__steps b { position: absolute; inset: 0; border-radius: inherit; background: var(--shell-gold); transform-origin: 0 50%; transform: scaleX(0); }
.tour__nav { display: flex; align-items: center; gap: 8px; }
.tour__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 15px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--shell-fg) 22%, transparent);
  background: transparent; color: var(--shell-fg); cursor: pointer;
  font: 600 14px/1 var(--shell-font); transition: background .2s, border-color .2s, opacity .2s, transform .25s var(--spring);
}
.tour__btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--shell-fg) 50%, transparent); }
.tour__btn:active:not(:disabled) { transform: scale(.95); }
.tour__btn:disabled { opacity: .38; cursor: default; }
.tour__pp { width: 40px; padding: 0; }
.tour__pp svg { width: 14px; height: 14px; fill: currentColor; }
.tour__btn--main { margin-left: auto; background: var(--shell-gold); color: var(--shell-bg); border-color: transparent; }
.tour__btn--main:hover:not(:disabled) { border-color: transparent; filter: brightness(1.06); }
.tour__btn--main::after { content: "→"; content: "→" / ""; transition: transform .2s var(--spring); }
.tour__btn--main:hover::after { transform: translateX(3px); }
.tour__btn--main.is-last::after { content: none; }
.tour__keys { margin: -4px 0 0; font-size: 12px; color: var(--shell-dim); }
.tour__tip.is-sheet .tour__keys { display: none; }
@media (pointer: coarse) { .tour__keys { display: none; } .tour__btn { min-height: 44px; } .tour__pp { width: 44px; } }

/* ===== «Что нового» ===== */
/* Короткая лента изменений сразу под дорожной картой: одна карточка-список в цветах главной.
   У записи значок приложения, дата, заголовок, строка пояснения и метка этапа, ведущая к карте.
   Метка повторяет станцию линии приложения: пройденный этап залит, текущий — с кольцом. */
.news { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; scroll-margin-top: 24px; }
.news .sec-head { margin-bottom: 0; }
.news__list {
  margin: 0; padding: 0 clamp(16px, 2.4vw, 26px); list-style: none; min-width: 0;
  background: var(--h-card); border: 1px solid var(--h-line); border-radius: 18px;
}
.nw {
  --line: #1d8850; --dot: #ffc246;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px;
  align-items: start; justify-items: start; min-width: 0; padding: 18px 0;
}
.nw--fridge { --line: #c67139; --dot: #f5ead8; }
.nw + .nw { border-top: 1px solid var(--h-line); }
.nw > * { grid-column: 2; min-width: 0; max-width: 100%; }
.nw__icon { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 10px; }
.nw--fridge .nw__icon { border-radius: 9px; }
.nw__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--h-muted); }
.nw__app { font: 600 11px/1.3 var(--shell-font); letter-spacing: .12em; text-transform: uppercase; }
.nw--velaro .nw__app { color: #c99a2e; }
.nw--fridge .nw__app { color: #e9a77a; }
:root[data-theme="light"] .nw--velaro .nw__app { color: #8a5e00; }
:root[data-theme="light"] .nw--fridge .nw__app { color: #9a4a17; }
.nw__date { font-variant-numeric: tabular-nums; }
.nw__new {
  font: 700 10px/1 var(--shell-font); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 999px; background: var(--h-accent); color: var(--h-on-accent);
}
.nw__title { margin: 0; font: 600 17px/1.3 var(--shell-font); color: var(--h-ink); text-wrap: pretty; overflow-wrap: anywhere; }
.nw__text { margin: 0; max-width: 68ch; font-size: 14.5px; line-height: 1.5; color: var(--h-muted); }
.nw__ms {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 6px 14px 6px 9px;
  border: 1px solid var(--h-line); border-radius: 14px; text-decoration: none; color: var(--h-ink);
  transition: border-color .2s ease, background .2s ease;
}
.nw__ms:hover { border-color: var(--line); background: color-mix(in srgb, var(--line) 10%, transparent); }
.nw__ms::after { content: "→"; content: "→" / ""; flex: none; color: var(--h-muted); transition: transform .2s var(--spring), color .2s; }
.nw__ms:hover::after { transform: translateX(3px); color: var(--h-ink); }
/* подпись и название этапа в одну строку, на узком экране — друг под другом */
.nw__ms-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; min-width: 0; }
.nw__ms-k { font: 600 11px/1.3 var(--shell-font); letter-spacing: .1em; text-transform: uppercase; color: var(--h-muted); }
.nw__ms-n { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
/* маленькая станция в цветах линии приложения, как на дорожной карте */
.nw__st { flex: none; width: 16px; height: 16px; margin: 0 2px; border-radius: 50%; background: var(--line); border: 3px solid var(--h-card); box-shadow: 0 0 0 2px var(--line); }
.nw__ms.is-now .nw__st { background: var(--dot); }
.nw__ms.is-next .nw__st { background: transparent; border: 2px dashed var(--line); box-shadow: none; }
/* метки в «Что нового» — те же карты и ляганы, что станции на дорожной карте */
.nw--velaro .nw__st, .nw--velaro .nw__ms.is-next .nw__st {
  width: 13px; height: 17px; margin: 0 3px; border: 0; border-radius: 2px; transform: rotate(-6deg);
  background: var(--rm-face-h) center / 100% 100% no-repeat; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.nw--velaro .nw__ms.is-now .nw__st { background-image: var(--rm-face-now); box-shadow: 0 0 0 1.5px rgba(255, 194, 70, .5), 0 0 8px rgba(255, 194, 70, .5); }
.nw--velaro .nw__ms.is-next .nw__st { background-image: var(--uz-back); opacity: .6; }
.nw--fridge .nw__st, .nw--fridge .nw__ms.is-next .nw__st {
  width: 17px; height: 17px; margin: 0 1px; border: 0; border-radius: 50%;
  background: var(--rm-plate-1) center / 100% 100% no-repeat; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.nw--fridge .nw__ms.is-now .nw__st { background-image: var(--rm-plate-now-icon); }
.nw--fridge .nw__ms.is-next .nw__st { background-image: var(--rm-plate-next); box-shadow: none; }
/* записи, открытые кнопкой «Показать все», всплывают по очереди */
@keyframes nw-in { from { opacity: 0; transform: translateY(10px); } }
.nw.is-in { animation: nw-in .45s cubic-bezier(.22, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * 45ms); }
.news__more { justify-self: start; border: 0; cursor: pointer; padding: 12px 18px; font-size: 14.5px; }
.news__more svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--spring); }
.news__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.news__more:hover { box-shadow: inset 0 0 0 1px var(--h-accent); }
/* станция, к которой привела метка: мягкая подсветка и пара колец */
/* часть нижнего отступа станции на время подсветки становится внешним (сумма та же, ничего не сдвигается),
   чтобы плашка не наезжала на следующую станцию; отрезок линии удлиняется на ту же величину */
.ms { border-radius: 12px; transition: background-color .6s ease, box-shadow .6s ease; }
.ms.is-ping { padding-bottom: 6px; margin-bottom: 16px; background-color: var(--h-accent-soft); box-shadow: 0 0 0 8px var(--h-accent-soft); }
.ms.is-ping::before { bottom: -18px; }
.ms.is-ping .ms__title { color: var(--h-ink); }
.ms.is-ping::after { animation: ms-ping 1.1s ease-out 2; }
@keyframes ms-ping {
  from { box-shadow: 0 0 0 2px var(--line), 0 0 0 0 color-mix(in srgb, var(--line) 60%, transparent); }
  to { box-shadow: 0 0 0 2px var(--line), 0 0 0 16px color-mix(in srgb, var(--line) 0%, transparent); }
}
/* точка «новое» у пункта меню: появилась запись новее той, что посетитель уже видел */
.nav__new {
  position: absolute; top: 50%; right: 12px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--shell-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-gold) 22%, transparent);
  transition: opacity .3s ease, transform .3s ease;
}
.nav__new.is-gone { opacity: 0; transform: scale(.3); }
.nav__new > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 860px) {
  .home .news { scroll-margin-top: 72px; }
  .nav__new { top: 4px; right: 3px; margin-top: 0; width: 7px; height: 7px; }
}
/* узкий телефон: значок уходит в строку с датой, текст получает всю ширину */
@media (max-width: 520px) {
  .nw { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; padding: 16px 0; }
  .nw__icon { grid-row: 1; align-self: center; width: 24px; height: 24px; border-radius: 6px; }
  .nw > :not(.nw__icon):not(.nw__meta) { grid-column: 1 / -1; }
  .nw__title { margin-top: 2px; }
}

/* ===== резюме и визитки для печати ===== */
/* «Визитка»: второй ряд — резюме и лист визиток в PDF, рядом «Печать» (js/print.js) */
.contact--card .pr { margin-top: 4px; }
.pr .pr__btn { flex: 0 1 auto; max-width: 100%; display: inline-flex; align-items: center; gap: 7px; text-align: left; line-height: 1.1; }
.pr__btn[aria-busy="true"] { justify-content: center; cursor: progress; }
.pr__btn[aria-busy="true"]::after {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid currentColor; border-right-color: transparent; animation: pr-spin .8s linear infinite;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr__btn[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: .5; } }
.pr__print {
  flex: none; padding: 8px 4px; border: 0; background: none; cursor: pointer;
  font: 500 12.5px/1 var(--shell-font); color: color-mix(in srgb, var(--h-bg) 74%, transparent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.pr__print:hover { color: var(--h-bg); }
.pr__note { margin: 2px 0 0; max-width: 42ch; font-size: 13px; line-height: 1.4; color: color-mix(in srgb, var(--h-bg) 80%, transparent); }
@media (pointer: coarse) { .pr__print { padding: 12px 6px; } }

/* страница резюме для «Печать»: скрипт собирает её перед печатью и сразу убирает; на экране её нет */
.cvp { display: none; }
.cvp.is-measure { display: block; position: fixed; top: 0; left: 0; visibility: hidden; pointer-events: none; }
@media print {
  html.cv-printing, html.cv-printing body { height: auto; background: #fff; }
  html.cv-printing body > :not(.cvp) { display: none !important; }
  html.cv-printing .cvp { display: block; }
}
.cvp {
  position: relative; width: 210mm; height: 297mm; padding: 16mm 16mm 0; box-sizing: border-box; overflow: hidden;
  background: #fff; color: #17181c; font: 10pt/1.45 var(--shell-font); text-align: left;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cvp h1, .cvp h2, .cvp h3, .cvp p, .cvp ul, .cvp ol, .cvp dl, .cvp dd { margin: 0; padding: 0; }
.cvp__top { display: flex; align-items: center; justify-content: space-between; }
.cvp__logo { display: inline-flex; align-items: center; gap: 2.4mm; color: #071f3e; }
.cvp__mark { width: 13mm; height: auto; aspect-ratio: 513 / 358; }
.cvp__word { font: 400 11.5pt/1 var(--logo-font); }
.cvp__word b { font-size: 1.273em; font-weight: 700; }
.cvp h2, .cvp__doc { font: 600 7.5pt/1.25 var(--shell-font); letter-spacing: .1em; text-transform: uppercase; color: #0878d1; }
.cvp__doc { color: #5d5c57; }
.cvp .cvp__name { margin-top: 9mm; font: 600 29pt/1.05 var(--shell-font); letter-spacing: -.015em; color: #17181c; }
.cvp .cvp__role { margin-top: 2.6mm; font-size: 12.5pt; color: #0878d1; }
.cvp__body {
  position: absolute; left: 16mm; right: 16mm; top: 54mm; bottom: 18mm;
  display: grid; grid-template-columns: minmax(0, 1fr) 54mm; gap: 8mm; padding-top: 5mm; border-top: .3mm solid #d8d6ce;
}
.cvp section { display: grid; align-content: start; gap: 2.2mm; }
.cvp__main { min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 6.5mm; font-size: 10pt; }
.cvp__about { font-size: 1.02em; }
.cvp__proj { display: grid; gap: 1.5mm; }
.cvp__proj + .cvp__proj { margin-top: 3.5mm; }
.cvp__ph { display: flex; align-items: baseline; justify-content: space-between; gap: 4mm; }
.cvp h3 { font: 600 1.4em/1.2 var(--shell-font); }
.cvp__tag { font-size: .78em; color: #0878d1; white-space: nowrap; }
.cvp__proj p { font-size: .98em; line-height: 1.42; }
.cvp__proj ul { list-style: none; display: grid; gap: .3mm; font-size: .92em; line-height: 1.4; }
.cvp__proj li { position: relative; padding-left: 4mm; }
.cvp__proj li::before { content: ""; position: absolute; left: .2mm; top: .55em; width: 1.05mm; height: 1.05mm; background: #0878d1; }
.cvp__proj dl { display: grid; gap: .6mm; margin-top: .8mm; font-size: .9em; line-height: 1.42; }
.cvp__proj dl div { display: grid; grid-template-columns: 25mm minmax(0, 1fr); }
.cvp__proj dt { font-size: .92em; color: #5d5c57; }
.cvp__how ol { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm 6mm; }
.cvp__how li { display: grid; grid-template-columns: 7mm minmax(0, 1fr); align-content: start; font-size: .94em; line-height: 1.35; }
.cvp__how b { grid-row: span 2; font-weight: 600; color: #0878d1; }
.cvp__how strong { font-weight: 600; }
.cvp__how span { font-size: .915em; line-height: 1.4; color: #5d5c57; }
.cvp.is-tight .cvp__main { font-size: 9.2pt; }
.cvp.is-short .cvp__how { display: none; }
.cvp__side { display: grid; align-content: start; gap: 6mm; margin-top: -1mm; padding: 5mm; border-radius: 3mm; background: #f0f6fc; }
.cvp__contacts { display: grid; gap: 2.4mm; }
.cvp__contacts dt { font-size: 7.6pt; color: #5d5c57; }
.cvp__contacts a { font-size: 10.4pt; font-weight: 600; color: #17181c; text-decoration: none; }
.cvp__qr { width: 38.4mm; margin-top: 1.5mm; padding: 2.2mm; box-sizing: border-box; border-radius: 2mm; background: #fff; }
.cvp__qr svg { display: block; width: 100%; height: auto; fill: #17181c; }
.cvp__small { font-size: 7.6pt; line-height: 1.35; color: #5d5c57; }
.cvp__add { font-size: 8.8pt; line-height: 1.42; }
.cvp__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6mm; }
.cvp__chips li { padding: .9mm 2.3mm; border: .25mm solid #0878d1; border-radius: 99px; background: #fff; font-size: 8.6pt; line-height: 1.2; }
.cvp__foot {
  position: absolute; left: 16mm; right: 16mm; bottom: 7mm; display: flex; justify-content: space-between;
  padding-top: 2.4mm; border-top: .3mm solid #d8d6ce; font-size: 7.6pt; color: #5d5c57;
}

/* ===================================================================
   Пасхалка (js/egg.js): окно «Вы нашли секрет», мини-игра «Поймай ADD», тема «Терминал»
   =================================================================== */
.egg {
  position: fixed; inset: 0; z-index: 1800; display: grid; place-items: center; padding: 12px;
  background: rgba(3, 10, 22, .72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: egg-in .3s ease both;
}
@keyframes egg-in { from { opacity: 0; } }
.egg__box {
  width: min(100%, 560px); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
  display: grid; gap: 14px; padding: 20px; border-radius: 18px;
  background: linear-gradient(160deg, #0d223f, #081629); color: #e8f1ff; border: 1px solid rgba(127, 216, 255, .22);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); font-family: var(--shell-font);
}
.egg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.egg__title { margin: 0; font: 700 clamp(19px, 3vw, 24px)/1.2 var(--brand-font); }
.egg__close {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(127, 216, 255, .3); background: transparent;
  color: #e8f1ff; font-size: 22px; line-height: 1; cursor: pointer;
}
.egg__close:hover, .egg__close:focus-visible { border-color: #08b5e6; }
.egg__lead, .egg__note { margin: 0; font-size: 14px; line-height: 1.45; color: #a9bfdc; }
.egg__note { font-size: 12.5px; }
.egg__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.egg__card { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 14px; background: rgba(127, 216, 255, .06); border: 1px solid rgba(127, 216, 255, .14); font-size: 13.5px; line-height: 1.4; color: #c9d9ef; }
.egg__card b { font: 700 15px/1.2 var(--brand-font); color: #ffffff; }
.egg__card small { color: #7fd8ff; font-weight: 600; }
.egg__ico { font-size: 24px; line-height: 1; color: #39ff88; }
.egg__btn {
  justify-self: start; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(127, 216, 255, .4); background: transparent;
  color: #e8f1ff; font: 600 14px/1 var(--shell-font); cursor: pointer;
}
.egg__btn:hover, .egg__btn:focus-visible { border-color: #08b5e6; }
.egg__btn--main { background: #08b5e6; border-color: transparent; color: #071f3e; }
.egg__btn--main:hover { background: #3fc6ef; }
.egg__btn[aria-pressed="true"] { background: rgba(57, 255, 136, .16); border-color: #39ff88; color: #b8ffc6; }
.egg__link { justify-self: start; padding: 4px 0; border: 0; background: none; color: #7fd8ff; font: 600 14px/1 var(--shell-font); cursor: pointer; }
/* игра */
.egg__hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 14px/1 var(--shell-font); font-variant-numeric: tabular-nums; }
.egg__word { display: inline-flex; gap: 4px; }
.egg__word i {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; font: 700 14px/1 var(--brand-font); font-style: normal;
  color: rgba(232, 241, 255, .45); border: 1px dashed rgba(127, 216, 255, .35); transition: background .2s, color .2s;
}
.egg__word i.is-on { background: #08b5e6; color: #071f3e; border-style: solid; border-color: #08b5e6; }
.egg__lives { color: #ff6b6b; letter-spacing: .1em; }
/* «Собери плов»: карточка во всю ширину окна, в строке над казаном — какой продукт ловить дальше */
.egg__card--plov { grid-column: 1 / -1; }
.egg__next { min-width: 0; color: #f2c14e; text-align: center; overflow-wrap: anywhere; }
.egg__stage { position: relative; justify-self: center; width: min(100%, 360px, calc((100dvh - 250px) * .75)); }
.egg__cv { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 14px; outline: none; touch-action: none; cursor: pointer; }
.egg__cv:focus-visible { box-shadow: 0 0 0 2px #08b5e6; }
.egg__over { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; border-radius: 14px; background: rgba(4, 16, 34, .72); text-align: center; }
.egg__overbox { display: grid; gap: 10px; justify-items: center; font-size: 14px; line-height: 1.45; color: #c9d9ef; }
.egg__overbox p { margin: 0; }
.egg__overbox .egg__btn { justify-self: center; }
.egg__big { font: 700 28px/1.1 var(--brand-font); color: #ffffff; }
.egg__rec { color: #39ff88; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .egg { animation: none; } }

/* скрытая тема «Терминал» — на всём сайте, в двух вариантах. Тёмный — зелёный люминофор на чёрном,
   светлый — тёмно-зелёный на бледно-зелёном, как старый ЖК-экран. Переключатель «Тёмная / Светлая» работает
   и здесь. Цвета — в переменных --tm-*, ими же перекрашены TUZ и Domcook (css/projects.css). */
:root[data-egg="term"] {
  --tm-bg: #040a06; --tm-raise: #0a140d; --tm-sheet: #0d1a11; --tm-line: #173a22;
  --tm-fg: #b8ffc6; --tm-fg2: #9ff0b0; --tm-muted: #6fd488; --tm-acc: #39ff88; --tm-on: #03140a;
  --tm-amber: #ffb000; --tm-back: #0f5f30; --tm-glow: rgba(57, 255, 136, .28); --tm-scan: rgba(0, 0, 0, .22);
  --tm-font: "Cascadia Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace;
  --shell-bg: var(--tm-bg); --shell-raise: var(--tm-raise); --shell-line: var(--tm-line); --shell-fg: var(--tm-fg);
  --shell-muted: var(--tm-muted); --shell-dim: var(--tm-muted); --shell-gold: var(--tm-acc);
  --shell-font: var(--tm-font); --brand-font: var(--tm-font);
  color-scheme: dark;
}
:root[data-egg="term"][data-theme="light"] {
  --tm-bg: #e3efdc; --tm-raise: #d5e6cc; --tm-sheet: #cadfc0; --tm-line: #a9c9b1;
  --tm-fg: #0f3a1c; --tm-fg2: #1c4a2a; --tm-muted: #3d6b49; --tm-acc: #0d6e35; --tm-on: #eef8ea;
  --tm-amber: #8a5200; --tm-back: #8fc79e; --tm-glow: rgba(13, 110, 53, .12); --tm-scan: rgba(0, 0, 0, .05);
  color-scheme: light;
}
:root[data-egg="term"] .home {
  --h-bg: var(--tm-bg); --h-ink: var(--tm-fg); --h-muted: var(--tm-muted); --h-line: var(--tm-line); --h-card: var(--tm-raise);
  --h-accent: var(--tm-acc); --h-on-accent: var(--tm-on); --h-accent-soft: color-mix(in srgb, var(--tm-acc) 12%, transparent); --h-accent-inv: var(--tm-acc);
}
:root[data-egg="term"] .nav, :root[data-egg="term"] .home, :root[data-egg="term"] .proj { text-shadow: 0 0 6px var(--tm-glow); }
:root[data-egg="term"] .brand { --adt-ink: var(--tm-fg); --adt-muted: var(--tm-muted); --adt-accent: var(--tm-acc); }
:root[data-egg="term"] .lang, :root[data-egg="term"] .tgl { --tgl-bg: linear-gradient(180deg, var(--tm-sheet), var(--tm-raise)); --tgl-text: var(--tm-muted); }
:root[data-egg="term"][data-theme="light"] .lang button[aria-pressed="true"], :root[data-egg="term"][data-theme="light"] .tgl__label--light { color: var(--tm-fg); text-shadow: none; }
:root[data-egg="term"][data-theme="light"] .tgl__sun { stroke: var(--tm-fg); }
:root[data-egg="term"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 1700; pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--tm-scan) 0 1px, transparent 1px 3px);
}
:root[data-egg="term"] .home h2::before { content: "> "; color: var(--h-accent); }
/* картинки — как на однотонном экране: зелёный оттенок вместо цвета */
:root[data-egg="term"] .nav__icon, :root[data-egg="term"] .proj__logo, :root[data-egg="term"] .wcard img,
:root[data-egg="term"] .p-fridge img, :root[data-egg="term"] .ph__screen {
  filter: grayscale(1) sepia(1) hue-rotate(68deg) saturate(2.6) brightness(.82) contrast(1.08);
}
:root[data-egg="term"][data-theme="light"] .nav__icon, :root[data-egg="term"][data-theme="light"] .proj__logo, :root[data-egg="term"][data-theme="light"] .wcard img,
:root[data-egg="term"][data-theme="light"] .p-fridge img, :root[data-egg="term"][data-theme="light"] .ph__screen {
  filter: grayscale(1) sepia(.7) hue-rotate(68deg) saturate(1.6) brightness(1.02) contrast(1.05);
}

/* --- «Терминал»: анимации под тему (js/egg.js) --- */
/* загрузка «системы»: строки печатаются на чёрном, потом экран «включается» как у старого монитора */
.term-boot {
  position: fixed; inset: 0; z-index: 1900; display: flex; align-items: flex-start; padding: clamp(18px, 5vw, 56px);
  background: #020503; color: #39ff88; cursor: pointer; transition: opacity .4s ease;
}
.term-boot.is-out { opacity: 0; pointer-events: none; }
.term-boot__log {
  margin: 0; white-space: pre-wrap; font: 400 clamp(12px, 1.6vw, 16px)/1.6 "Cascadia Mono", Consolas, "Courier New", monospace;
  text-shadow: 0 0 8px rgba(57, 255, 136, .55);
}
.term-boot__log::after { content: "█"; margin-left: 2px; animation: term-blink 1s steps(1) infinite; }
.term-crt .layout { animation: term-crt .7s cubic-bezier(.2, .7, .3, 1) both; transform-origin: 50% 50%; }
@keyframes term-crt {
  0% { transform: scale(1, .003); filter: brightness(8); opacity: .8; }
  35% { transform: scale(1, .003); filter: brightness(5); opacity: 1; }
  60% { transform: scale(1, 1.03); filter: brightness(2); }
  100% { transform: none; filter: none; }
}
@keyframes term-blink { 50% { opacity: 0; } }

/* цифровой дождь за главной: холст под сайтом, главная прозрачная */
.term-rain { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .17; }
:root[data-egg="term"] .layout { position: relative; z-index: 1; }
:root[data-egg="term"] .home { background: transparent; }

/* заголовки печатаются по буквам; у заголовка главной — мигающий курсор */
.tw .tw-w { white-space: nowrap; }
.tw .tw-c { animation: term-type 120ms linear both; animation-delay: calc(var(--tw-d, 0ms) + var(--i) * 24ms); }   /* не steps(): из-за округления задержки шаг мог не дойти до конца */
/* буква появляется зелёным блоком и гаснет до обычной — как бегущий по строке курсор */
@keyframes term-type { 0% { opacity: 0; } 1% { opacity: 1; background: var(--h-accent); color: var(--h-on-accent); } 100% { opacity: 1; } }
:root[data-egg="term"] .hero__title::after { content: "█"; margin-left: .12em; color: var(--h-accent); animation: term-blink 1s steps(1) infinite; }
/* пока заголовок печатается, курсор в конце спрятан; появляется, когда допечатан */
:root[data-egg="term"] .hero__title.tw::after {
  visibility: hidden;
  animation: term-show 1ms linear calc(var(--tw-d, 0ms) + var(--tw-n, 0) * 24ms) forwards, term-blink 1s steps(1) calc(var(--tw-d, 0ms) + var(--tw-n, 0) * 24ms) infinite;
}
@keyframes term-show { to { visibility: visible; } }

/* полоса развёртки медленно идёт сверху вниз, строки чуть мерцают */
:root[data-egg="term"] body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 140px; z-index: 1701; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--tm-acc) 6%, transparent), transparent);
  animation: term-sweep 8s linear infinite;
}
@keyframes term-sweep { from { transform: translateY(-140px); } to { transform: translateY(100vh); } }
:root[data-egg="term"] body::after { animation: term-flicker 5s steps(1) infinite; }
@keyframes term-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 49% { opacity: 1; } 83% { opacity: .9; } }

/* блоки при входе на страницу не выплывают, а «загораются» с мерцанием, как на старом экране */
:root[data-egg="term"] .page.is-entering .hero > *,
:root[data-egg="term"] .page.is-entering .work__grid > * { animation-name: term-flick; animation-timing-function: steps(6); }
@keyframes term-flick { 0% { opacity: 0; } 30% { opacity: .85; } 42% { opacity: .15; } 60% { opacity: 1; } 72% { opacity: .55; } 100% { opacity: 1; } }

/* переходы — «мерцание», как у старого монитора: старый экран гаснет вспышками, новый загорается
   с несколькими всполохами яркости и лёгким дрожанием строк. Так меняются страницы, тема, язык,
   и так же выключается сам «Терминал» (класс egg-vt ставит js/egg.js) */
:root[data-egg="term"]:not(.theme-vt):not(.lang-vt)::view-transition-old(root),
:root[data-egg="term"].theme-vt::view-transition-old(root), :root[data-egg="term"].theme-vt::view-transition-old(nav),
:root[data-egg="term"].lang-vt::view-transition-old(root), :root[data-egg="term"].lang-vt::view-transition-old(nav),
.egg-vt::view-transition-old(root), .egg-vt::view-transition-old(nav) {
  animation: term-flick-out .34s steps(2) both;
}
:root[data-egg="term"]:not(.theme-vt):not(.lang-vt)::view-transition-new(root),
:root[data-egg="term"].theme-vt::view-transition-new(root), :root[data-egg="term"].theme-vt::view-transition-new(nav),
:root[data-egg="term"].lang-vt::view-transition-new(root), :root[data-egg="term"].lang-vt::view-transition-new(nav),
.egg-vt::view-transition-new(root), .egg-vt::view-transition-new(nav) {
  animation: term-flick-in .56s steps(2) .1s both;
  -webkit-mask-image: none; mask-image: none;
}
@keyframes term-flick-out {
  0% { opacity: 1; filter: none; transform: none; }
  18% { opacity: .3; filter: brightness(1.9); }
  30% { opacity: 1; filter: brightness(1.25); transform: translateX(2px); }
  46% { opacity: .12; transform: none; }
  60% { opacity: .65; filter: brightness(2.3); transform: translateX(-2px); }
  76%, 100% { opacity: 0; filter: brightness(1); transform: none; }
}
@keyframes term-flick-in {
  0% { opacity: 0; filter: brightness(1); transform: none; }
  16% { opacity: .85; filter: brightness(2.6); transform: translateX(-3px); }
  26% { opacity: .08; }
  42% { opacity: 1; filter: brightness(1.7); transform: translateX(2px); }
  54% { opacity: .4; filter: brightness(1); transform: none; }
  68% { opacity: 1; filter: brightness(1.35); }
  80% { opacity: .82; }
  100% { opacity: 1; filter: none; transform: none; }
}

/* кнопки и ссылки — квадратные, при наведении светятся */
:root[data-egg="term"] .home .btn { border-radius: 2px; transition: background .15s steps(2), color .15s steps(2), box-shadow .15s; }
:root[data-egg="term"] .home .btn:hover, :root[data-egg="term"] .home .btn:focus-visible { box-shadow: 0 0 0 1px var(--h-accent), 0 0 18px color-mix(in srgb, var(--tm-acc) 45%, transparent); transform: none; }
:root[data-egg="term"] .home .btn--ghost:hover { background: var(--h-accent); color: var(--h-on-accent); }
:root[data-egg="term"] .nav__link:hover { text-shadow: 0 0 10px color-mix(in srgb, var(--tm-acc) 80%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .term-crt .layout, .tw .tw-c, :root[data-egg="term"] body::before, :root[data-egg="term"] body::after,
  :root[data-egg="term"] .hero__title::after, .term-boot__log::after { animation: none; }
  .egg-vt::view-transition-old(root), .egg-vt::view-transition-new(root) { animation: none; }
  :root[data-egg="term"] body::before { display: none; }
}

/* ===================================================================
   «Что смотрят» — панель владельца внизу главной (js/owner.js). Цвета — переменные главной (--h-*).
   (Конструктор «Соберите своё приложение» и «Цифры проектов» убраны с сайта до лучших времён —
   всё для возврата лежит в drafts/home-builder-numbers/.)
   =================================================================== */
:root[data-egg="term"] .own__kpi { border-radius: 2px; }
/* --- «Что смотрят»: панель владельца поверх сводки отзывов (.fb-sum) --- */
.fb-sum .own__h { margin: 6px 0 0; font: 600 15px/1.3 var(--shell-font); color: var(--h-ink); }
.own { display: grid; gap: 14px; padding-bottom: 6px; }
.own__kpis { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.own__kpi { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--h-line); min-width: 0; }
.own__kpi dt { font-size: 12.5px; color: var(--h-muted); }
.own__kpi dd { margin: 2px 0 0; font: 700 24px/1.1 var(--brand-font); color: var(--h-ink); font-variant-numeric: tabular-nums; }
.own__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px 28px; }
.own__col { min-width: 0; }
.own__rows { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.own__row { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 4ch; gap: 10px; align-items: center; font-size: 14px; }
.own__row b { text-align: right; font-variant-numeric: tabular-nums; }
.own__bar { position: relative; height: 8px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--h-ink) 12%, transparent); }
.own__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: inherit; background: var(--h-accent); }

/* ===================================================================
   Узбекские мотивы на главной (js/uzb.js): «Изразцы Регистана», «Атлас», «Сюзане», бордюр,
   ночная Бухара / рассвет над Регистаном, праздничные ленты. Узоры — SVG в переменных --uz-*.
   =================================================================== */
@property --uz-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.home { position: relative; overflow-x: clip; }   /* розетки в углах не дают странице ездить вбок; clip не ломает «липкие» блоки */
.home__inner { position: relative; z-index: 1; }

/* фон-гирих: тусклая основа на всю главную и блик-«солнце», который ходит за курсором */
.uz-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.uz-bg__base, .uz-bg__glow { position: absolute; background-repeat: repeat; background-size: 120px 120px; }
.uz-bg__base {
  inset: 0; background-image: var(--uz-girih-d); opacity: .17;
  /* плитки собираются из центра первого экрана */
  -webkit-mask-image: radial-gradient(circle at 50% 380px, #000 var(--uz-r), transparent calc(var(--uz-r) + 140px));
  mask-image: radial-gradient(circle at 50% 380px, #000 var(--uz-r), transparent calc(var(--uz-r) + 140px));
}
.uz-bg.is-on .uz-bg__base { animation: uz-assemble 2.4s cubic-bezier(.3, .55, .25, 1) both; }
.uz-bg.is-done .uz-bg__base { -webkit-mask-image: none; mask-image: none; animation: none; }
@keyframes uz-assemble { from { --uz-r: 0px; } to { --uz-r: 2600px; } }
.uz-bg__glow {
  left: 0; top: 0; width: 420px; height: 420px; background-image: var(--uz-glow-d); opacity: .5;
  transform: translate(-999px, -999px); will-change: transform;
  -webkit-mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, .45) 45%, transparent);
  mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, .45) 45%, transparent);
}
:root[data-theme="light"] .uz-bg__base { background-image: var(--uz-girih-l); opacity: .13; }
:root[data-theme="light"] .uz-bg__glow { background-image: var(--uz-glow-l); opacity: .38; }
.uz-navruz .uz-bg__glow { background-image: var(--uz-glow-navruz); }
.uz-mustaqil .uz-bg__glow { background-image: var(--uz-glow-mustaqil); }

/* атлас (икат): в углу «Есть задача?» — ткань, которая колышется; под заголовками — звезда-хатам на линии */
.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta::before {
  content: ""; position: absolute; inset: -40px; z-index: -1; pointer-events: none;
  background: var(--uz-ikat-d) 0 0 / 96px 128px repeat; opacity: .42;
  /* ткань лежит в правом верхнем углу и тает к форме — текст и поля остаются на чистом фоне */
  --uz-cta-m: radial-gradient(ellipse 620px 460px at 100% 0, #000 18%, rgba(0, 0, 0, .55) 52%, transparent 100%);
  -webkit-mask-image: var(--uz-cta-m); mask-image: var(--uz-cta-m);
  animation: uz-wave 9s ease-in-out infinite alternate;
}
:root[data-theme="light"] .cta::before { background-image: var(--uz-ikat-l); opacity: .5; }
@media (max-width: 700px) {
  .cta::before { --uz-cta-m: radial-gradient(ellipse 300px 230px at 100% 0, #000 10%, rgba(0, 0, 0, .5) 50%, transparent 100%); }
  .uz-bg__base { opacity: .13; }
  :root[data-theme="light"] .uz-bg__base { opacity: .1; }
}
@keyframes uz-wave {
  0% { transform: skewX(-2.5deg) translateX(-10px); }
  100% { transform: skewX(2.5deg) translateX(10px); }
}
.home h2:not(.cta__title)::after {
  content: ""; display: block; width: 120px; height: 14px; margin-top: 12px;
  background: var(--uz-mark-d) 0 0 / 120px 14px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent);
}
:root[data-theme="light"] .home h2:not(.cta__title)::after { background-image: var(--uz-mark-l); }

/* сюзане: розетка «вышивается» — маска проходит по контурам, потом пришиваются узелки */
.uz-suz { display: block; width: 100%; height: auto; }
.uz-suz__m path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.uz-suz__m circle { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.uz-suz.is-sewn .uz-suz__m path { animation: uz-sew 1.5s cubic-bezier(.5, 0, .3, 1) forwards; animation-delay: calc(var(--k) * 70ms); }
.uz-suz.is-sewn .uz-suz__m circle { animation: uz-knot .3s ease forwards; animation-delay: calc(1.3s + var(--k) * 45ms); }
@keyframes uz-sew { to { stroke-dashoffset: 0; } }
@keyframes uz-knot { to { transform: none; } }
.uz-corner { position: absolute; z-index: 0; width: clamp(200px, 26vw, 360px); opacity: .5; pointer-events: none; }
.uz-corner--tr { top: -60px; right: -80px; }
.uz-corner--bl { left: -90px; bottom: clamp(220px, 22vw, 320px); opacity: .4; }
:root[data-theme="light"] .uz-corner { opacity: .42; }
:root[data-theme="light"] .uz-corner--bl { opacity: .32; }
@media (max-width: 700px) { .uz-corner { width: 190px; opacity: .3; } .uz-corner--tr { top: -40px; right: -70px; } .uz-corner--bl { display: none; } }

/* разделитель: бордюр-фриз, к краям гаснет; в середине — маленькая розетка */
/* блоки стоят в разметке, поэтому шаг сетки делится пополам: раздел — полшага — бордюр — полшага — раздел */
.uz-div { position: relative; display: grid; place-items: center; height: 44px; pointer-events: none; }
:root:not([data-egg="term"]) .home__inner { row-gap: calc(clamp(64px, 9vw, 112px) / 2); }
.uz-div__band {
  position: absolute; left: 0; right: 0; top: 50%; height: 16px; translate: 0 -50%; opacity: .6;
  background: var(--uz-frieze-d) 0 0 / 40px 16px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
:root[data-theme="light"] .uz-div__band { background-image: var(--uz-frieze-l); opacity: .55; }
.uz-div__mid { position: relative; width: 52px; height: 52px; padding: 4px; border-radius: 50%; background: var(--h-bg); }

/* внизу главной — «город на подвале»: чёткий силуэт (ночная Бухара в тёмной теме, утренний Регистан в светлой)
   стоит на полосе-подвале того же цвета, в полосе — подпись. Блок .uz-sky стоит в index.html, рисунок — js/uzb.js */
.uz-sky {
  position: relative; z-index: 1; pointer-events: none;
  /* высота — по пропорциям рисунка 1200×220 от ширины главной (экран минус меню): на широком экране минареты целы */
  height: clamp(120px, calc((100vw - var(--nav-w)) * .1833), 260px);
  margin: clamp(28px, 4vw, 48px) calc(-1 * clamp(16px, 5vw, 72px)) 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%); mask-image: linear-gradient(to bottom, transparent, #000 24%);
}
@media (max-width: 860px) { .uz-sky { height: clamp(120px, 18.33vw, 160px); } }   /* меню сверху — главная во всю ширину */
.uz-sky:empty { display: none; }
.uz-sky svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.uz-sky__registan { display: none; }
:root[data-theme="light"] .uz-sky__bukhara { display: none; }
:root[data-theme="light"] .uz-sky__registan { display: block; }

/* время суток по Ташкенту (data-phase ставит js/uzb.js): цвет неба у горизонта (--uz-s1/--uz-s2),
   облака днём, звёзды и месяц ночью, огни в окнах вечером. Без солнца и оранжевого — только холодные тона */
.uz-sky { --uz-s1: #24395a; --uz-s1o: .6; --uz-s2: #45648a; --uz-cloud: #9fb6cc; --uz-cloud-o: .22; }   /* тёмная тема, утро: светлеет у горизонта */
.uz-sky[data-phase="day"] { --uz-s1: #1f4b72; --uz-s2: #2f6a99; }
.uz-sky[data-phase="evening"] { --uz-s1: #2a2f5e; --uz-s1o: .65; --uz-s2: #3d3f78; }
.uz-sky[data-phase="night"] { --uz-s1: #0d1e3d; --uz-s2: #10264a; }
:root[data-theme="light"] .uz-sky { --uz-s1: #c9dcef; --uz-s1o: .75; --uz-s2: #eef4f9; --uz-cloud: #ffffff; --uz-cloud-o: .95; }   /* утро: бледный свет у горизонта */
:root[data-theme="light"] .uz-sky[data-phase="day"] { --uz-s1: #b5daf5; --uz-s1o: .85; --uz-s2: #86c0ea; }
:root[data-theme="light"] .uz-sky[data-phase="evening"] { --uz-s1: #8e95c8; --uz-s1o: .75; --uz-s2: #5b62a3; }
:root[data-theme="light"] .uz-sky[data-phase="night"] { --uz-s1: #2c4a85; --uz-s1o: .85; --uz-s2: #24407a; }
.uz-sky__s0 { stop-color: var(--uz-s1); stop-opacity: 0; }
.uz-sky__s1 { stop-color: var(--uz-s1); stop-opacity: var(--uz-s1o); }
.uz-sky__s2 { stop-color: var(--uz-s2); }
.uz-sky__clouds, .uz-sky__stars, .uz-sky__moon, .uz-light { opacity: 0; }
.uz-sky__clouds { fill: var(--uz-cloud); }
.uz-sky[data-phase="day"] .uz-sky__clouds { opacity: var(--uz-cloud-o); }
.uz-sky[data-phase="morning"] .uz-sky__clouds { opacity: calc(var(--uz-cloud-o) * .55); }
.uz-sky[data-phase="evening"] .uz-sky__stars { opacity: .4; }
.uz-sky[data-phase="night"] .uz-sky__stars { opacity: 1; }
.uz-sky[data-phase="evening"] .uz-sky__moon { opacity: .55; }
.uz-sky[data-phase="night"] .uz-sky__moon { opacity: 1; }
.uz-light { fill: #ffe7a6; }
.uz-sky[data-phase="evening"] .uz-light, .uz-sky[data-phase="night"] .uz-light:not(.uz-light--late) { opacity: .85; }
/* смена времени суток — плавно; огни загораются по одному */
.uz-sky.is-live stop { transition: stop-color 2.5s ease, stop-opacity 2.5s ease; }
.uz-sky.is-live .uz-sky__clouds, .uz-sky.is-live .uz-sky__stars, .uz-sky.is-live .uz-sky__moon { transition: opacity 2.5s ease; }
.uz-sky.is-live .uz-light { transition: opacity .7s ease calc(var(--k) * 140ms); }
.uz-cloud { animation: uz-drift 70s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -23s); }
@keyframes uz-drift { from { transform: translateX(-50px); } to { transform: translateX(50px); } }
.uz-star { fill: #fff; animation: uz-twinkle 3.4s ease-in-out infinite; animation-delay: calc(var(--k) * -.37s); }
@keyframes uz-twinkle { 50% { opacity: .2; } }

/* часы Ташкента в подвале — кнопка: показывает город в другое время суток */
.uz-clock {
  padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: inherit; color: inherit; font-variant-numeric: tabular-nums;
}
.uz-clock:hover { text-decoration: underline; text-underline-offset: 3px; }
.uz-clock:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; }
.uz-clock__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* рядом с часами — время года, тоже кнопка; точка-разделитель не подчёркивается */
.uz-when { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; }
.uz-season::before { content: "·"; display: inline-block; margin-right: .3em; }

/* ---------- времена года над городом (data-season на .uz-sky, частицы — js/uzb.js) ----------
   Каждая частица — полоса во всю высоту неба: она едет сверху вниз (translateY в процентах от своей высоты),
   а сама снежинка, лепесток или лист внизу полосы покачивается. Светлячки не падают, а кружат на своей высоте */
.uz-fall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.uz-fall i {
  position: absolute; top: 0; left: var(--x); width: 0; height: 100%;
  animation: uz-drop calc(var(--d) * 1s) linear infinite; animation-delay: calc(var(--k) * -1s);
}
.uz-fall i::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: calc(var(--s) * 1px); height: calc(var(--s) * 1px); background: var(--c);
  animation: uz-sway calc(var(--d) * .3s) ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.5s);
}
.uz-sky:not(.is-seen) .uz-fall i, .uz-sky:not(.is-seen) .uz-fall i::before { animation-play-state: paused; }
@keyframes uz-drop { from { transform: translateY(-100%); } to { transform: translateY(8%); } }
@keyframes uz-sway { from { transform: translateX(calc(var(--w) * -1)) rotate(-25deg); } to { transform: translateX(var(--w)) rotate(30deg); } }
.uz-sky[data-season="winter"] .uz-fall i::before { border-radius: 50%; opacity: .9; box-shadow: 0 0 3px rgba(255, 255, 255, .55); }
/* лепесток урюка — «линза» из двух скруглённых углов */
.uz-sky[data-season="spring"] .uz-fall i::before { width: calc(var(--s) * 1.5px); border-radius: 0 100% 0 100%; opacity: .95; }
/* лист чинары — пятипалый силуэт маской, цвет — --c; кружится сильнее */
.uz-sky[data-season="autumn"] .uz-fall i::before {
  -webkit-mask: var(--uz-leaf) center / contain no-repeat; mask: var(--uz-leaf) center / contain no-repeat;
  animation-name: uz-flutter;
}
@keyframes uz-flutter { from { transform: translateX(calc(var(--w) * -1)) rotate(-70deg) rotateY(0deg); } to { transform: translateX(var(--w)) rotate(80deg) rotateY(160deg); } }
.uz-sky[data-season="summer"] .uz-fall i {
  top: var(--y); height: 0; animation-name: uz-wander; animation-timing-function: ease-in-out; animation-direction: alternate;
}
.uz-sky[data-season="summer"] .uz-fall i::before {
  border-radius: 50%; box-shadow: 0 0 6px 2px rgba(255, 232, 110, .7);
  animation: uz-blink 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.7s);
}
@keyframes uz-wander { 0% { transform: translate(0, 0); } 35% { transform: translate(var(--w), -12px); } 70% { transform: translate(calc(var(--w) * -.6), 5px); } 100% { transform: translate(calc(var(--w) * .4), -6px); } }
@keyframes uz-blink { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
/* светлячки ярче всего в сумерках и ночью; днём — едва заметные искры */
.uz-sky[data-season="summer"][data-phase="morning"] .uz-fall, .uz-sky[data-season="summer"][data-phase="day"] .uz-fall { opacity: .5; }
.uz-sky.is-live .uz-fall { transition: opacity 2.5s ease; }
/* настоящее небо (js/uzb.js): созвездия по звёздам, видны со звёздами — вечером и ночью. Большая Медведица —
   всегда, остальные — по времени года; линии между звёздами едва заметны, у Летнего треугольника — ещё слабее */
.uz-const__ln { fill: none; stroke: #d6e4ff; stroke-opacity: .23; stroke-width: .8; stroke-linecap: round; }
.uz-const__ln--faint { stroke-opacity: .12; stroke-dasharray: 2 3; }
.uz-const--winter, .uz-const--spring, .uz-const--summer, .uz-const--autumn { display: none; }
.uz-sky[data-season="winter"] .uz-const--winter, .uz-sky[data-season="spring"] .uz-const--spring,
.uz-sky[data-season="summer"] .uz-const--summer, .uz-sky[data-season="autumn"] .uz-const--autumn { display: inline; }
/* Новый год: гирлянды на куполах и порталах, четыре цвета мигают по очереди (переключение рывком — без плавной
   анимации, так дешевле); в новогоднюю ночь — салют над городом */
.uz-garland { display: none; }
.uz-sky[data-ny] .uz-garland { display: inline; }
.uz-garland__c { animation: uz-bulb 1.6s steps(1) infinite; animation-delay: calc(var(--k) * -.4s); }
@keyframes uz-bulb { 0% { opacity: 1; } 50% { opacity: .22; } }
.uz-salute { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: none; }
.uz-sky[data-ny="salute"] .uz-salute { display: block; }
.uz-burst { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.uz-burst b {
  position: absolute; left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: var(--c); box-shadow: 0 0 5px var(--c);
  animation: uz-spark 3.2s cubic-bezier(.2, .7, .3, 1) infinite; animation-delay: calc(var(--k) * 1s);
}
@keyframes uz-spark {
  0%, 8% { opacity: 0; transform: rotate(var(--a)) translateX(0); }
  10% { opacity: 1; }
  55% { opacity: .9; }
  78%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) translateY(5px); }
}
.uz-sky:not(.is-seen) .uz-burst b, .uz-sky:not(.is-seen) .uz-garland__c { animation-play-state: paused; }
/* снежные шапки на куполах */
.uz-snowcap { fill: #f2f7ff; opacity: 0; }
.uz-sky[data-season="winter"] .uz-snowcap { opacity: .94; }
.uz-sky.is-live .uz-snowcap { transition: opacity 2.5s ease; }
:root {
  --uz-leaf: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 14C8 14.6 5.6 15.6 3.4 14.6C4.4 13.6 4.4 12.6 3 11.6C1.6 11 .5 9.6.5 8.5C2 8.6 3.4 8.3 4.6 7.6C3.6 6 3.4 4.5 4 3C5.6 3.6 7 4.6 8 6C8.6 4 9.2 2 10 .5C10.8 2 11.4 4 12 6C13 4.6 14.4 3.6 16 3C16.6 4.5 16.4 6 15.4 7.6C16.6 8.3 18 8.6 19.5 8.5C19.5 9.6 18.4 11 17 11.6C15.6 12.6 15.6 13.6 16.6 14.6C14.4 15.6 12 14.6 10 14ZM9.4 13.6H10.6L10.9 19.6H9.1Z'/></svg>");
}
/* узор фона гаснет к низу — над городом чистое небо */
.uz-bg { -webkit-mask-image: linear-gradient(to top, transparent 220px, #000 460px); mask-image: linear-gradient(to top, transparent 220px, #000 460px); }
/* подвал: продолжение земли под городом — тот же цвет, что у силуэта */
:root:not([data-egg="term"]) .uz-sky:not(:empty) + .home__foot {
  --uz-ground: #081124;
  position: relative; z-index: 1; margin: 0 calc(-1 * clamp(16px, 5vw, 72px)) -40px;
  padding: 16px clamp(16px, 5vw, 72px) 22px; background: var(--uz-ground); color: #a9b8cc;
}
:root[data-theme="light"]:not([data-egg="term"]) .uz-sky:not(:empty) + .home__foot { --uz-ground: #0b2f5c; color: #d2deec; }
:root:not([data-egg="term"]) .uz-sky:not(:empty) + .home__foot .home__foot-in { padding-top: 0; border-top: 0; }

/* праздники: лента над заголовком главной */
.uz-fest { display: none; }
.uz-navruz .uz-fest--navruz, .uz-mustaqil .uz-fest--mustaqil { display: flex; }
.uz-fest { align-items: center; gap: 12px; margin: 0; font: 600 14px/1.3 var(--shell-font); color: var(--h-ink); }
.uz-fest__band { flex: none; width: 150px; height: 24px; border-radius: 3px; }
.uz-fest--navruz .uz-fest__band { background: var(--uz-tulips) 0 0 / 30px 24px repeat-x; }
.uz-fest--mustaqil .uz-fest__band {
  height: 22px; box-shadow: 0 0 0 1px var(--h-line);
  background: linear-gradient(#0099b5 0 32%, #ce1126 32% 35%, #ffffff 35% 65%, #ce1126 65% 68%, #1eb53a 68%);
}

/* «Терминал» — свой мир: узбекские узоры прячутся; меньше движения — без анимаций */
:root[data-egg="term"] .uz-bg, :root[data-egg="term"] .uz-corner, :root[data-egg="term"] .uz-div,
:root[data-egg="term"] .uz-sky, :root[data-egg="term"] .uz-fest, :root[data-egg="term"] .uz-clock { display: none; }
:root[data-egg="term"] .cta::before, :root[data-egg="term"] .home h2::after { content: none; }
@media (prefers-reduced-motion: reduce) {
  .cta::before, .home h2::after, .uz-star, .uz-cloud { animation: none; }
  .uz-sky.is-live stop, .uz-sky.is-live .uz-sky__clouds, .uz-sky.is-live .uz-sky__stars, .uz-sky.is-live .uz-sky__moon, .uz-sky.is-live .uz-light { transition: none; }
  /* времена года без движения: снег, лепестки и листья замирают на разной высоте, светлячки просто светятся */
  .uz-fall i, .uz-fall i::before { animation: none !important; }   /* сильнее правил отдельных сезонов */
  .uz-fall i { transform: translateY(calc(var(--p) * -88% - 6%)); }
  .uz-sky[data-season="summer"] .uz-fall i { transform: none; }
  .uz-sky[data-season="summer"] .uz-fall i::before { opacity: .8; }
  .uz-sky.is-live .uz-fall, .uz-sky.is-live .uz-snowcap { transition: none; }
  /* гирлянды горят ровно, салюта нет */
  .uz-garland__c { animation: none; }
  .uz-sky[data-ny="salute"] .uz-salute { display: none; }
  .uz-suz__m path { stroke-dashoffset: 0; }
  .uz-suz__m circle { transform: none; }
}

/* ===================================================================
   «Кто сейчас на сайте» (js/live.js, только в артефакте): курсоры-тюбетейки и плашка внизу справа
   =================================================================== */
.live-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1200; pointer-events: none; }
.live-cur { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; transition: transform .12s linear, opacity .4s ease; will-change: transform; }
.live-cur.is-idle { opacity: .45; }
.live__tip { width: 12px; height: 12px; fill: var(--c); stroke: #ffffff; stroke-width: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.live-cur .live__doppi { width: 22px; height: 17px; margin: 9px 0 0 -3px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
.live__name {
  margin: 13px 0 0 3px; padding: 2px 8px; max-width: 150px; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--c); color: #071022; font: 600 11.5px/1.45 var(--shell-font);
}
.live { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 65; font: 500 13px/1.3 var(--shell-font); }
.live__btn {
  display: flex; align-items: center; gap: 9px; padding: 5px 13px 5px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(24, 25, 31, .94); color: #ecebe6; font: inherit;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7);
}
.live__btn:focus-visible, .live__go:focus-visible { outline: 2px solid #08b5e6; outline-offset: 2px; }
.live__heads { display: flex; }
.live__heads i { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -9px; border-radius: 50%; background: var(--c); border: 2px solid rgba(24, 25, 31, .94); }
.live__heads i:first-child { margin-left: 0; }
.live__heads .live__doppi { width: 18px; height: 14px; }
.live__panel {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: min(290px, calc(100vw - 32px)); padding: 12px 12px 10px; border-radius: 14px;
  background: #1d1f26; color: #ecebe6; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .7);
}
.live__title { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a3a19a; }
.live__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.live__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 10px; }
.live__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live__who .live__doppi { flex: none; width: 26px; height: 26px; padding: 5px 3px 3px; border-radius: 50%; background: var(--c); }
.live__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.live__where { grid-column: 1; padding-left: 34px; font-size: 12px; color: #a3a19a; }
.live__go {
  grid-column: 2; grid-row: 1 / span 2; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: inherit; font: 500 12px/1 var(--shell-font);
}
.live__go:hover { background: rgba(255, 255, 255, .08); }
:root[data-theme="light"] .live__btn { background: rgba(255, 255, 255, .96); color: #1a1c22; border-color: rgba(0, 0, 0, .12); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .35); }
:root[data-theme="light"] .live__heads i { border-color: #ffffff; }
:root[data-theme="light"] .live__panel { background: #ffffff; color: #1a1c22; border-color: rgba(0, 0, 0, .1); box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .3); }
:root[data-theme="light"] .live__title, :root[data-theme="light"] .live__where { color: #5d5b55; }
:root[data-theme="light"] .live__go { border-color: rgba(0, 0, 0, .2); }
:root[data-theme="light"] .live__go:hover { background: rgba(0, 0, 0, .05); }
:root[data-theme="light"] .live__btn:focus-visible, :root[data-theme="light"] .live__go:focus-visible { outline-color: #0a66b8; }
/* «Терминал»: плашка и подписи — зелёным моноширинным */
:root[data-egg="term"] .live { font-family: var(--tm-font); }
:root[data-egg="term"] .live__btn, :root[data-egg="term"] .live__panel { background: var(--tm-bg); color: var(--tm-fg); border-color: var(--tm-line); }
:root[data-egg="term"] .live__heads i { border-color: var(--tm-bg); }
:root[data-egg="term"] .live__title, :root[data-egg="term"] .live__where { color: var(--tm-muted); }
:root[data-egg="term"] .live__go { border-color: var(--tm-line); }
:root[data-egg="term"] .live__name { font-family: var(--tm-font); }
@media (prefers-reduced-motion: reduce) { .live-cur { transition: none; } }
@media print { .live, .live-layer { display: none !important; } }
.live__num { display: none; font-weight: 700; font-variant-numeric: tabular-nums; }
/* узкий экран: плашка — только тюбетейки и число, надпись остаётся для экранного диктора */
@media (max-width: 560px) {
  .live { right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  .live__btn { gap: 6px; padding: 4px 10px 4px 4px; }
  .live__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .live__num { display: inline; }
  .live__heads i { width: 24px; height: 24px; margin-left: -10px; }
  .live__heads .live__doppi { width: 15px; height: 12px; }
}

/* ===================================================================
   Тема по часам и крупный режим (js/site.js; начальное состояние ставит скрипт в <head> index.html)
   Тема «Авто» — по солнцу Ташкента (на <html> data-theme-mode="auto"): режим по умолчанию и третье положение
   переключателя «Тёмная → Светлая → Авто»; на переключателе тогда подпись «Авто» и солнце над горизонтом.
   Крупный режим — кнопка «Aa» после языков и темы: весь сайт крупнее (CSS zoom на body) и подписи
   контрастнее (data-big).
   =================================================================== */
/* на компьютере переключатели переносятся: языки и тема в ряд, «Aa» — следующим рядом */
@media (min-width: 861px) {
  .nav__tools { flex-wrap: wrap; row-gap: 14px; }
}

/* --- кнопка «Aa»: такая же таблетка, как языки; включена — стеклянный пузырь и свечение букв --- */
.bigb {
  --tgl-bg: linear-gradient(180deg, #243142, #141b25);
  --tgl-shadow: inset -2px -4px 4px rgba(0, 0, 0, .35), inset 0 2px 10px rgba(120, 180, 240, .14), 0 14px 26px -12px rgba(0, 0, 0, .75);
  --tgl-text: #93a1b3;
  --tgl-glow: 0 0 6px rgba(255, 255, 255, .9), 0 0 14px rgba(8, 181, 230, .55);
  position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 38px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tgl-bg); box-shadow: var(--tgl-shadow); color: var(--tgl-text);
  transition: color .3s ease;
}
:root[data-theme="light"] .bigb {
  --tgl-bg: linear-gradient(180deg, #1a6cbc, #0a4a8a);
  --tgl-shadow: inset -2px -4px 4px rgba(4, 25, 52, .22), inset 0 2px 10px rgba(255, 255, 255, .32), 0 14px 26px -14px rgba(8, 42, 86, .55);
  --tgl-text: rgba(255, 255, 255, .86);
}
.bigb__aa { position: relative; z-index: 1; font: 700 17px/1 var(--shell-font); letter-spacing: -.01em; transition: text-shadow .3s ease; }
.bigb__aa small { font-size: 13px; font-weight: 600; }
.bigb:hover, .bigb[aria-pressed="true"] { color: #ffffff; }
.bigb[aria-pressed="true"] .bigb__aa { text-shadow: var(--tgl-glow); }
.bigb__glass { top: -6px; left: -2px; width: 50px; height: 50px; opacity: 0; scale: .55; transition: opacity .3s ease, scale .6s var(--spring); }
.bigb[aria-pressed="true"] .bigb__glass { opacity: 1; scale: 1; }
.bigb:hover .bigb__glass { scale: .62; }
.bigb[aria-pressed="true"]:hover .bigb__glass { scale: 1.05; }
.bigb:focus-visible { outline-offset: 5px; }
.bigb__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (pointer: coarse) { .bigb { width: 50px; } .bigb__glass { width: 54px; } }
:root[data-egg="term"] .bigb { --tgl-bg: linear-gradient(180deg, var(--tm-sheet), var(--tm-raise)); --tgl-text: var(--tm-muted); }
:root[data-egg="term"] .bigb:hover, :root[data-egg="term"] .bigb[aria-pressed="true"] { color: var(--tm-fg); }
:root[data-egg="term"][data-theme="light"] .bigb[aria-pressed="true"] .bigb__aa { text-shadow: none; }

/* --- крупный режим: всё крупнее. CSS zoom на body — как масштаб браузера, но только для сайта:
   раскладка та же, просто крупнее (на компьютере ×1,18, на узком телефоне ×1,15). Внутри zoom
   единицы vh/vw тоже растут, поэтому высоты «по экрану» ниже поделены на --bz. --- */
:root { --bz: 1; }
@media screen {
  :root[data-big] { --bz: 1.18; }
  :root[data-big] body { zoom: var(--bz); }
}
@media screen and (max-width: 480px) { :root[data-big] { --bz: 1.15; } }
/* слои, которые сайт ставит по координатам экрана (экскурсия, курсоры гостей, блик на изразцах, заставка),
   и стол TUZ на весь экран (он и так крупнее, js/vfull.js) — в обычном масштабе: иначе съехали бы */
:root[data-big] .tour, :root[data-big] .live-layer, :root[data-big] .uz-bg, :root[data-big] .intro,
:root[data-big].vfull .p-velaro .proj__visual { zoom: calc(1 / var(--bz)); }
/* высоты и ширины «по экрану» */
@media (min-width: 861px) { :root[data-big] .nav { height: calc(100vh / var(--bz)); height: calc(100dvh / var(--bz)); } }
:root[data-big] .page { min-height: calc(100dvh / var(--bz)); }
@media (max-width: 860px) { :root[data-big] .page { min-height: 0; } }
:root[data-big] .egg__box { max-height: calc(100dvh / var(--bz) - 24px); }
:root[data-big] .egg__stage { width: min(100%, 360px, calc((100dvh / var(--bz) - 250px) * .75)); }
:root[data-big] .trophy__box, :root[data-big] .school__box { max-height: calc(100dvh / var(--bz) - 32px); }
@media (max-width: 480px) { :root[data-big] .school__box { max-height: calc(100dvh / var(--bz) - 20px); } }
:root[data-big] .live__panel { width: min(290px, calc(100vw / var(--bz) - 32px)); }
:root[data-big] .uz-sky { height: clamp(120px, calc((100vw / var(--bz) - var(--nav-w)) * .1833), 260px); }
@media (max-width: 860px) { :root[data-big] .uz-sky { height: clamp(120px, calc(18.33vw / var(--bz)), 160px); } }

/* --- крупный режим: подписи контрастнее. Приглушённый цвет берётся из основного цвета текста того же блока,
   поэтому подходит к любой теме, к «Терминалу», к оформлениям стола и к Domcook --- */
:root[data-big] {
  --shell-muted: color-mix(in srgb, var(--shell-fg) 86%, var(--shell-bg));
  --shell-dim: color-mix(in srgb, var(--shell-fg) 80%, var(--shell-bg));
}
:root[data-big] .home, :root[data-big] .home * { --h-muted: color-mix(in srgb, var(--h-ink) 86%, var(--h-bg)) !important; }
:root[data-big] .proj, :root[data-big] .proj * {
  --p-muted: color-mix(in srgb, var(--p-fg) 88%, transparent) !important;
  --p-fg2: var(--p-fg) !important;
}
:root[data-big] .cta__lead { color: color-mix(in srgb, var(--h-bg) 92%, transparent); }
:root[data-big]:not([data-egg="term"]) .uz-sky:not(:empty) + .home__foot { color: #dfe7f1; }
/* TUZ на узком телефоне: четыре масти для дамы (58 px каждая) не влезали в стол — пусть чуть сжимаются */
:root[data-big] .g__suits { grid-template-columns: minmax(0, 1fr); }
:root[data-big] .g__suits div { max-width: 100%; }
/* облачка реакций за общим столом js/tables.js ставит по координатам экрана — тоже в обычном масштабе, буквы чуть крупнее */
:root[data-big]:not(.vfull) .g__bubble { zoom: calc(1 / var(--bz)); font-size: 16px; }

/* смена масштаба — мягкая смена кадра, без круга перехода страниц (класс big-vt ставит js/site.js) */
.big-vt::view-transition-old(root), .big-vt::view-transition-old(nav) { animation: big-out .28s ease both; }
.big-vt::view-transition-new(root), .big-vt::view-transition-new(nav) { animation: big-in .38s ease .06s both; }
@keyframes big-out { to { opacity: 0; } }
@keyframes big-in { from { opacity: 0; } }


/* ===================================================================
   Живые значки (меню, карточки главной, заголовок Domcook): у Domcook при наведении из трубы поднимается пар,
   у TUZ уголок туза приподнимается, как карта, которую берут со стола. При «меньше движения» — без движения
   =================================================================== */
.dcico { display: block; flex: none; overflow: hidden; }
.dcico__w { opacity: .95; transform-box: fill-box; transform-origin: 50% 100%; }
.dcico__w2, .dcico__w3 { opacity: 0; }
.nav__link:hover .dcico__w, .nav__link:focus-visible .dcico__w,
.wcard--fridge:hover .dcico__w, .wcard--fridge:focus-visible .dcico__w,
.proj__logo.dcico:hover .dcico__w { animation: dc-steam 1.5s ease-out infinite; }
.nav__link:hover .dcico__w2, .wcard--fridge:hover .dcico__w2, .proj__logo.dcico:hover .dcico__w2,
.nav__link:focus-visible .dcico__w2, .wcard--fridge:focus-visible .dcico__w2 { animation-delay: .5s; }
.nav__link:hover .dcico__w3, .wcard--fridge:hover .dcico__w3, .proj__logo.dcico:hover .dcico__w3,
.nav__link:focus-visible .dcico__w3, .wcard--fridge:focus-visible .dcico__w3 { animation-delay: 1s; }
@keyframes dc-steam { 0% { opacity: 0; transform: translateY(3px) scale(.8); } 30% { opacity: .95; } 100% { opacity: 0; transform: translateY(-5px) scale(1.1); } }
.dcico__pot { transform-box: fill-box; transform-origin: 50% 100%; }
.nav__link:hover .dcico__pot, .wcard--fridge:hover .dcico__pot, .proj__logo.dcico:hover .dcico__pot { animation: dc-pot .6s ease-in-out 2; }
@keyframes dc-pot { 50% { transform: translateY(-1.5px); } }
.tuzico { transition: transform .35s var(--spring), box-shadow .35s; transform-origin: 30% 90%; }
.nav__link:hover .tuzico, .nav__link:focus-visible .tuzico, .wcard--velaro:hover .tuzico, .wcard--velaro:focus-visible .tuzico {
  transform: translateY(-2px) rotate(-9deg); box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .55);
}
@media (prefers-reduced-motion: reduce) {
  .dcico__w, .dcico__pot { animation: none !important; }
  .tuzico { transition: none; }
}