/* Шрифты — со своего сервера (152-ФЗ): Onest (текст) и TikTok Sans
   (заголовки, с 07.10.2026 вместо Tektur — пробуем по просьбе пользователя),
   лицензия SIL OFL 1.1 (fonts/README.md). Наборы символов грузятся, только
   если они есть на странице. Tektur оставлен описанным для отката, не грузится. */
/* Onest, cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/onest-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Onest, cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Onest, math */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/onest-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* Onest, symbols */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/onest-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* Onest, latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Onest, latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/onest-latin.woff2) format('woff2');
  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;
}
/* TikTok Sans, cyrillic-ext */
@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 100% 150%;
  font-display: swap;
  src: url(fonts/tiktok-sans-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* TikTok Sans, cyrillic */
@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 100% 150%;
  font-display: swap;
  src: url(fonts/tiktok-sans-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* TikTok Sans, latin-ext */
@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 100% 150%;
  font-display: swap;
  src: url(fonts/tiktok-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* TikTok Sans, latin */
@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 100% 150%;
  font-display: swap;
  src: url(fonts/tiktok-sans-latin.woff2) format('woff2');
  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;
}
/* Tektur, cyrillic-ext */
@font-face {
  font-family: 'Tektur';
  font-style: normal;
  font-weight: 500 600;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/tektur-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Tektur, cyrillic */
@font-face {
  font-family: 'Tektur';
  font-style: normal;
  font-weight: 500 600;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/tektur-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Tektur, greek */
@font-face {
  font-family: 'Tektur';
  font-style: normal;
  font-weight: 500 600;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/tektur-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Tektur, latin-ext */
@font-face {
  font-family: 'Tektur';
  font-style: normal;
  font-weight: 500 600;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/tektur-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Tektur, latin */
@font-face {
  font-family: 'Tektur';
  font-style: normal;
  font-weight: 500 600;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/tektur-latin.woff2) format('woff2');
  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;
}

:root {
  --bg: #f4f5f7;
  --ink: #121418;
  --muted: #5c626a;
  --line: #dcdfe3;
  --surface: #e9ebee;
  --red: #e30518;
  --red-hover: #c40314;

  /* блок 5: чёрная секция — нейтральный почти чёрный, без синевы */
  --night: #0a0a0a;
  --night-ink: #f4f4f4;
  --night-muted: #9a9a9a;
  --night-line: #242424;

  --font-display: "TikTok Sans", "Onest", sans-serif;
  --display-weight: 800;
  --display-stretch: 150%; /* ширина TikTok Sans: 100–150 */
  --font-body: "Onest", system-ui, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: 16px;
  --container: 1280px;
}

@media (min-width: 768px) {
  :root { --gutter: 48px; }
}
/* на телефоне заголовки уже — иначе слишком мелкие */
@media (max-width: 767px) {
  :root { --display-stretch: 125%; }
}

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

html { background: var(--bg); color: var(--ink); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, p, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

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

/* Хедер — капсула */
.site-header {
  position: fixed;
  inset: 16px var(--gutter) auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.pill {
  pointer-events: auto;
  width: min(100%, var(--container));
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 8px 0 24px;
  background: rgb(233 235 238 / .8);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-radius: 999px;
}

.logo img { height: 32px; width: auto; }

.nav { display: flex; gap: 32px; }
.nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: color 150ms var(--ease);
}
.nav a:hover { color: var(--ink); }

.actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.phone { font-size: 16px; font-weight: 500; margin-right: 12px; white-space: nowrap; }

.icon-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 150ms var(--ease);
}
.icon-btn:hover { background: rgb(18 20 24 / .06); }
.icon-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.burger { display: none; }

/* шапка над чёрным блоком 5 — тёмная (класс on-dark ставит results.js) */
.pill { transition: background 250ms var(--ease); }
.logo img { transition: filter 250ms var(--ease); }
.site-header.on-dark .pill { background: rgb(28 28 28 / .72); }
.site-header.on-dark .logo img { filter: invert(1) hue-rotate(180deg) saturate(1.6); }
.site-header.on-dark .nav a { color: var(--night-muted); }
.site-header.on-dark .nav a:hover,
.site-header.on-dark .phone,
.site-header.on-dark .icon-btn { color: var(--night-ink); }
.site-header.on-dark .icon-btn:hover { background: rgb(244 244 244 / .08); }

.btn {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 150ms var(--ease);
}
.btn:hover { background: var(--red-hover); }
.btn-small { height: 48px; padding: 0 24px; margin-left: 8px; }

/* шесть пунктов меню (с «Экологией», 17.10.2026): 1201–1360 px — промежутки уже и телефон только в футере;
   от 1361 px — телефон в шапке, промежутки меню 22 px, чтобы кнопка «Оставить заявку» не выходила за капсулу */
@media (min-width: 1201px) and (max-width: 1279px) { .pill, .nav { gap: 16px; } .phone { display: none; } }
@media (min-width: 1280px) and (max-width: 1360px) { .pill, .nav { gap: 20px; } .phone { display: none; } }
@media (min-width: 1361px) { .pill { gap: 24px; } .nav { gap: 22px; } }
/* узкий телефон: логотип и четыре кнопки в одну строку */
@media (max-width: 380px) { .pill .icon-btn { width: 44px; height: 44px; } }
@media (max-width: 1200px) {
  .nav, .phone { display: none; }
  .burger { display: grid; }
}
@media (max-width: 767px) {
  .pill { gap: 8px; padding-left: 16px; }
  .logo img { height: 28px; }
  .btn-small { display: none; }
  .burger { display: grid; }
}

/* Сцена: без JS — обычный поток */
.scene { position: relative; }
.stage { position: relative; }
.scene-canvas { display: none; }
.bottle { width: min(60vw, 280px); margin: 0 auto 64px; }
.bottle svg { width: 100%; height: auto; overflow: visible; }

.hero-inner, .accuracy-inner, .stability-inner {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero { padding: 144px 0 48px; }
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -.01em;
  max-width: 12.5em; /* три строки: «Инновационные / зуботехнические / материалы» */
  font-stretch: var(--display-stretch);
}
.hero p { max-width: 36ch; color: var(--muted); }
.hero .btn { margin-top: 8px; }

.accuracy { padding: 96px 0; }
.accuracy-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.accuracy-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(48px, 10.8vw, 168px);
  line-height: .9;
  letter-spacing: .01em;
}
.stats { margin-top: 48px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
.stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.stat dd {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 100%; /* цифры в широком начертании слишком длинные */
  font-size: 26px;
  line-height: 1;
  color: var(--red);
  white-space: nowrap;
}
.stat .unit { font-family: var(--font-body); font-weight: 500; }
.stat dt { font-size: 14px; line-height: 1.4; color: var(--muted); }


@media (min-width: 768px) {
  .hero h1 { font-size: 56px; }
  .stat dd { font-size: 44px; }
}

/* Сцена с JS (video-scene.js): два обычных блока по экрану. Оба холста —
   часть страницы и прокручиваются вместе с ней: живой флакон — на первом
   блоке, видео налива и моделей — на обоих (его место задаёт скрипт).
   Текст первого блока — над холстами, текст «Точности» — под ними (модели
   стоят перед заголовком). (Источник записи видео — prototypes/scene-source —
   двигает свой холст сам, через transform.) */
.js:not(.reduced) .scene { overflow: hidden; overflow: clip; }
.js:not(.reduced) .scene-canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
}
.video-canvas { display: none; }
.js:not(.reduced) .video-canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  transform-origin: 0 0;
  visibility: hidden;
}
/* Видео сцены лежат на странице крошечными и прозрачными: невидимые браузер
   перестаёт декодировать; на экран их выводит холст. */
.scene-video { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.jaw-poster { display: none; }
.reduced .jaw-poster { display: block; width: min(100%, 640px); height: auto; margin: 32px auto 0; }
.js:not(.reduced) .bottle { display: none; }
.js:not(.reduced) .hero,
.js:not(.reduced) .accuracy {
  position: relative;
  height: 100vh;
  height: 100svh;
  padding: 0;
}
/* Сенсорные экраны: высота — запомненная при загрузке (video-scene.js), чтобы блоки
   не менялись, когда браузер прячет свою панель. */
.block-fixed.js:not(.reduced) .hero,
.block-fixed.js:not(.reduced) .accuracy { height: var(--block-h); }
.js:not(.reduced) .hero { z-index: 3; display: flex; align-items: center; }
.js:not(.reduced) .stability { position: relative; z-index: 1; background: var(--bg); }

/* «Точность»: заголовок по центру, нижним краем заходит за модели (холст
   прозрачный и лежит выше), параметры — по бокам челюстей. Положение челюстей
   на экране задаёт video-scene.js через --jaw-y, --jaw-top и --jaw-hw. */
.js:not(.reduced) .accuracy { z-index: 1; pointer-events: none; }
.js:not(.reduced) .accuracy-inner { position: relative; height: 100%; max-width: none; }
.js:not(.reduced) .accuracy-title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--jaw-top, 40vh) - .86em);
}
.js:not(.reduced) .stats { position: static; margin: 0; }
.js:not(.reduced) .stat {
  position: absolute;
  top: calc(var(--jaw-y, 60vh) - 48px);
  width: min(300px, calc(50% - var(--jaw-hw, 200px) - 64px));
  border-top: 0;
  padding-top: 0;
}
.js:not(.reduced) .stat-left { right: calc(50% + var(--jaw-hw, 200px) + 40px); text-align: right; align-items: flex-end; }
.js:not(.reduced) .stat-right { left: calc(50% + var(--jaw-hw, 200px) + 40px); }
/* Текст появляется по времени, когда модели почти выросли (класс is-shown
   ставит video-scene.js): заголовок поднимается за моделями, затем
   параметры вылетают из центра челюстей (--fx, --fy). Уходит без задержек. */
.js:not(.reduced) .accuracy-title,
.js:not(.reduced) .stat {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 500ms var(--ease), transform 700ms var(--ease);
}
.js:not(.reduced) .accuracy-title { transform: translate3d(0, 12vh, 0) scale(.86); }
.js:not(.reduced) .stat { transform: translate3d(var(--fx, 0), var(--fy, 0), 0) scale(.4); }
.js:not(.reduced) .is-shown .accuracy-title,
.js:not(.reduced) .is-shown .stat {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease), transform 1100ms cubic-bezier(.16, 1, .3, 1);
}
.js:not(.reduced) .is-shown .stat-left { transition-delay: 350ms; }
.js:not(.reduced) .is-shown .stat-right { transition-delay: 480ms; }

@media (max-width: 767px) {
  .js:not(.reduced) .hero { align-items: flex-start; padding-top: 120px; }
  .js:not(.reduced) .accuracy-title { top: 112px; font-size: 52px; }
  .js:not(.reduced) .stat {
    top: calc(var(--jaw-bottom, 70vh) + 40px);
    width: calc(50% - var(--gutter) - 8px);
    text-align: left;
    align-items: flex-start;
  }
  .js:not(.reduced) .stat-left { right: auto; left: var(--gutter); }
  .js:not(.reduced) .stat-right { left: auto; right: var(--gutter); }
  .js:not(.reduced) .stat dd { font-size: 26px; }
}

/* Блок 3 «Стабильный результат» — в один экран: заголовок, подзаголовок и три
   пункта сверху, поле столбиков (stability.js) забирает оставшуюся высоту.
   Сверху — отступ под шапку-капсулу. */
.stability {
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px 0 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* сенсорные экраны: высота — запомненная при загрузке (как у первых двух блоков) */
.block-fixed .stability { min-height: var(--block-h); }
.stability-inner { flex: 1; display: flex; flex-direction: column; }
.stab-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: calc((100vw - 32px) / 10.5);
  line-height: 1.04; /* у TikTok Sans длинные выносные — строки не слипаются */
  letter-spacing: -.01em;
}
.stab-row, .stab-row > span { display: block; }
.stab-lead {
  margin-top: 24px;
  max-width: 40ch;
  font-size: 20px;
  line-height: 1.45;
  color: var(--muted);
}
.stab-points {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}
.stab-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}
.stab-point strong {
  display: block;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}
.stab-desc { display: block; font-size: 16px; line-height: 24px; color: var(--muted); }
/* кружок с номером слева от пункта; красный поднимается снизу вверх, как
   налив, цифра белеет вместе с ним — плавно, вместе с выравниванием поля */
.stab-num {
  --f: 0;
  position: relative;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
}
.stab-num::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid #c3c8ce;
  border-radius: 50%;
  transition: border-color 250ms var(--ease);
}
.stab-num.full::after { border-color: var(--red); }
.stab-fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  clip-path: inset(calc((1 - var(--f)) * 100%) 0 0 0);
}
.reduced .stab-num { --f: 1; }
.reduced .stab-num::after { border-color: var(--red); }
/* поле — во всю ширину экрана, края растворяются */
.stab-field {
  position: relative;
  margin: 24px 0 0 calc(50% - 50vw);
  width: 100vw;
  flex: 1 1 0;
  min-height: 160px;
  max-height: 260px;
  touch-action: pan-y;
}
.stab-field canvas {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
  mask-composite: intersect;
}
@media (min-width: 768px) {
  .stability { padding: 112px 0 32px; }
  .stab-title { font-size: min(calc((100vw - 96px) / 16.9), 72px); line-height: 1.04; }
  .stab-row { white-space: nowrap; }
  .stab-row > span { display: inline; }
  .stab-lead { margin-top: 24px; font-size: 24px; line-height: 1.4; }
  .stab-points { margin-top: 48px; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .stab-point strong { font-size: 24px; line-height: 32px; }
  .stab-desc { font-size: 18px; line-height: 28px; }
  .stab-num { width: 32px; height: 32px; margin-top: 0; font-size: 16px; }
  .stab-field { min-height: 200px; max-height: 420px; margin-top: 16px; }
}
/* низкие экраны (ноутбук, окно браузера): мельче, чтобы блок влез в экран */
@media (min-width: 768px) and (max-height: 760px) {
  .stability { padding: 92px 0 12px; }
  .stab-title { font-size: min(calc((100vw - 96px) / 16.9), 56px); }
  .stab-lead { margin-top: 16px; font-size: 20px; }
  .stab-points { margin-top: 32px; }
  .stab-field { min-height: 140px; }
}

/* Блок 4 «Материал с технической поддержкой»: заголовок, подзаголовок, три
   пункта и кнопка; внизу — полоса логотипов производителей принтеров, под
   которые у SMOLA есть профили. Полоса во всю ширину экрана без остановки едет
   справа налево (support.js задаёт скорость и вторую копию списка) и на курсор
   не реагирует. Логотипы одноцветные — маской; размер выровнен по площади:
   широкие надписи ниже, компактные знаки выше. */
.support {
  position: relative;
  z-index: 1;
  padding: 64px 0 96px;
  overflow: hidden;
  background: var(--bg);
}
.support-inner {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sup-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: calc((100vw - 32px) / 10.5);
  line-height: 1.04; /* у TikTok Sans длинные выносные — строки не слипаются */
  letter-spacing: -.01em;
}
.sup-row, .sup-row > span { display: block; }
.sup-lead {
  margin-top: 24px;
  max-width: 40ch;
  font-size: 20px;
  line-height: 1.45;
  color: var(--muted);
}
.sup-points {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}
.sup-point strong {
  display: block;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}
.sup-desc { display: block; font-size: 16px; line-height: 24px; color: var(--muted); }
.sup-cta { margin: 48px 0 0; }

.sup-brands {
  --gap: 48px;
  --s: .72; /* масштаб логотипов на телефоне */
  width: 100vw;
  margin: 64px 0 0 calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sup-track { display: flex; width: max-content; }
.js .sup-track {
  animation: sup-marquee var(--dur, 60s) linear infinite;
  will-change: transform;
}
.js .sup-brands.off .sup-track { animation-play-state: paused; }
.sup-list {
  margin: 0;
  padding: 0 var(--gap) 0 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 64px;
}
.sup-logo {
  display: block;
  width: calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  background: #7d838b;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}
@keyframes sup-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (min-width: 768px) {
  .support { padding: 96px 0 128px; }
  .sup-title { font-size: min(calc((100vw - 96px) / 18), 64px); line-height: 1.04; }
  .sup-row:first-child { white-space: nowrap; }
  .sup-row:first-child > span { display: inline; }
  .sup-lead { font-size: 24px; line-height: 1.4; }
  .sup-points { margin-top: 64px; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .sup-point strong { font-size: 24px; line-height: 32px; }
  .sup-desc { font-size: 18px; line-height: 28px; }
  .sup-cta { margin-top: 64px; }
  .sup-brands { --gap: 80px; --s: 1; margin-top: 96px; }
  .sup-list { height: 80px; }
}
/* без движения: одна неподвижная полоса по центру, с переносом */
@media (prefers-reduced-motion: reduce) {
  .js .sup-track { animation: none; width: auto; justify-content: center; }
  .sup-list { flex-wrap: wrap; justify-content: center; height: auto; row-gap: 32px; padding: 0 var(--gutter); }
  .sup-list + .sup-list { display: none; }
  .sup-brands { -webkit-mask-image: none; mask-image: none; }
}

/* Блок 5 «Результаты печати» — вариант E «Глубина» (prototypes/results/e-depth,
   решение пользователя 07.10.2026). Чёрная волна заливает весь экран быстрее
   прокрутки; блок закрепляется, заголовок стоит на месте, работы выплывают по
   центру из глубины; подписи по бокам меняются вместе с карточкой (слева —
   номер и изделие, справа — паспорт печати). Пока вместо фото —
   полупрозрачные карточки со скруглёнными углами. Движение — results.js. */
.res {
  position: relative;
  z-index: 2;
  padding: 96px 0 128px;
  background: var(--night);
  color: var(--night-ink);
}
.res-wave {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}
.res-wave-fill { fill: var(--night); }
.res-wave-gloss { fill: none; stroke: url(#res-gloss); stroke-width: 1.5; }
.res-head {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
}
.res-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: calc((100vw - 32px) / 10.5);
  line-height: 1.04; /* у TikTok Sans длинные выносные — строки не слипаются */
  letter-spacing: -.01em;
}
.res-title > span { display: block; }
.res-lead {
  margin-top: 24px;
  max-width: 40ch;
  font-size: 20px;
  line-height: 1.45;
  color: var(--night-muted);
}

/* без JS и при «уменьшить движение» — обычный список карточек */
.res-deck {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
  display: grid;
  gap: 48px;
}
.res-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  border: 1px solid rgb(244 244 244 / .16);
  background: rgb(244 244 244 / .07);
}
.res-card-num {
  position: absolute;
  left: 24px;
  bottom: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .08em;
  color: var(--night-muted);
}
.res-cap { margin: 0; }
.res-cap-l { margin-top: 16px; }
.res-cap-num { display: none; }

/* «Паспорт печати»: изделие · материал · принтер · слой · постобработка.
   Пунктир — данные, которых ещё нет (придут вместе с фото). */
.pp-item { display: block; font-size: 18px; font-weight: 600; line-height: 24px; color: var(--night-ink); }
.pp-line {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--night-muted);
  font-variant-numeric: tabular-nums;
}
.pp-line > span { white-space: nowrap; }
.pp-line > span:not(:last-child)::after { content: "·"; display: inline-block; margin: 0 8px; }
.pp-mat { color: var(--night-ink); }
.tbd {
  text-decoration: underline dashed rgb(154 154 154 / .6);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* глубина: блок закрепляется на экране, прокрутка ведёт камеру сквозь карточки */
.js:not(.reduced) .res { padding-top: 0; }
/* экран + по экрану на каждую из 4 карточек */
.js:not(.reduced) .res-depth { height: 500vh; height: 500svh; }
.js:not(.reduced) .res-stage {
  --cw: min(76vw, 520px); /* ширина карточки */
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.js:not(.reduced) .res-head { position: relative; z-index: 2000; padding-top: 96px; padding-bottom: 0; }
.js:not(.reduced) .res-deck { display: block; padding: 0; }
.js:not(.reduced) .res-card {
  position: absolute;
  left: 50%;
  top: var(--cy, 50%);
  width: var(--cw);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.js:not(.reduced) .res-cap {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 2000;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
  pointer-events: none;
}
.js:not(.reduced) .res-cap-l { bottom: 156px; }
.js:not(.reduced) .res-cap-r { top: calc(100% - 148px); }
.js:not(.reduced) .res-work.was .res-cap { transform: translateY(-12px); }
.js:not(.reduced) .res-work.is-on .res-cap { opacity: 1; transform: none; }
.js:not(.reduced) .res-cap-num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .08em;
  color: var(--night-muted);
}

@media (min-width: 768px) {
  .res { padding: 128px 0 192px; }
  .res-title { font-size: min(calc((100vw - 96px) / 14), 64px); line-height: 1.04; white-space: nowrap; }
  .res-title > span { display: inline; }
  .res-lead { font-size: 24px; line-height: 1.4; }
  .res-deck { grid-template-columns: 1fr 1fr; gap: 64px 24px; }
  .pp-item { font-size: 20px; line-height: 28px; }
  .js:not(.reduced) .res-head { padding-top: 112px; }
}
/* компьютер: карточка по центру, подписи — по бокам от неё */
@media (min-width: 1024px) {
  .js:not(.reduced) .res-stage {
    --cy: 60%;
    --cw: min(38vw, 560px, 62vh);
    --side: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  }
  .js:not(.reduced) .res-cap {
    top: var(--cy);
    bottom: auto;
    width: calc(50vw - var(--cw) / 2 - var(--side) - 48px);
    transform: translateY(calc(-50% + 12px));
  }
  .js:not(.reduced) .res-work.was .res-cap { transform: translateY(calc(-50% - 12px)); }
  .js:not(.reduced) .res-work.is-on .res-cap { transform: translateY(-50%); }
  .js:not(.reduced) .res-cap-l { left: var(--side); right: auto; }
  .js:not(.reduced) .res-cap-r { left: auto; right: var(--side); text-align: right; }
  .js:not(.reduced) .res-cap-l .pp-item { font-size: 24px; line-height: 32px; }
  .js:not(.reduced) .res-cap-r .pp-line { flex-direction: column; align-items: flex-end; margin: 0; font-size: 18px; line-height: 28px; }
  .js:not(.reduced) .res-cap-r .pp-line > span::after { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .res-wave { display: none; }
}

/* Блок 6 «Материалы SMOLA» — вариант B «Таблица элементов» (prototypes/catalog/
   b-table, решение пользователя 07.10.2026). Выход из чёрного блока 5 — белая
   волна. Семь смол — клетки периодической таблицы в четырёх группах по задачам
   лаборатории; в клетке номер по каталогу, точки — цвета выпуска, символ,
   название, задача. Клетки заполняются по номерам 01 → 07 (catalog.js). */
.cat {
  position: relative;
  z-index: 3; /* выше блока 5: белая волна рисуется поверх чёрного */
  padding: 96px 0;
  background: var(--bg);
}
.cat-wave {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: min(28vh, 240px);
  pointer-events: none;
}
.cat-wave-fill { fill: var(--bg); }
.cat-inner {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-areas: "head" "table" "cta";
}
.cat-head { grid-area: head; }
.cat-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: calc((100vw - 32px) / 10.5);
  line-height: 1.04;
  letter-spacing: -.01em;
}
.cat-lead {
  margin-top: 24px;
  max-width: 40ch;
  font-size: 20px;
  line-height: 1.45;
  color: var(--muted);
}
.cat-cta { grid-area: cta; margin-top: 48px; }
.cat-table { grid-area: table; margin-top: 48px; display: grid; gap: 32px; }
.cat-grp-name {
  position: relative;
  margin: 0 0 12px;
  padding-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cat-grp-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; transition: transform 400ms var(--ease); }
.cat-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cat-el {
  position: relative;
  min-height: 160px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 150ms var(--ease), background 250ms var(--ease);
}
.cat-el > * { transition: opacity 250ms var(--ease), color 150ms var(--ease); }
.cat-el-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-el-num { font-size: 14px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-el-sym {
  margin: 24px 0 8px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.01em;
}
.cat-el-name { font-size: 16px; font-weight: 600; line-height: 24px; }
.cat-el-task { font-size: 14px; line-height: 20px; color: var(--muted); }
/* цвета выпуска: точка на цвет; пунктирное кольцо — цвет ещё не знаем */
.cat-dots { display: flex; gap: 4px; }
.cat-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(18 20 24 / .14); }
.cat-dots .clear { background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px rgb(120 140 155 / .55), inset 3px -3px 0 -1px rgb(196 212 224 / .7); }
.cat-dots .tbd { background: none; box-shadow: none; border: 1px dashed rgb(92 98 106 / .6); }
.cat-el:hover, .cat-el:focus-visible { border-color: var(--red); outline: none; }
.cat-el:hover .cat-el-sym, .cat-el:focus-visible .cat-el-sym { color: var(--red); }
/* сборка таблицы: до появления — пустые пунктирные клетки */
.cat-el::before { content: ""; position: absolute; inset: -1px; border: 1px dashed var(--line); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease); }
.js:not(.reduced) .cat-table:not(.in) .cat-grp-name::after { transform: scaleX(0); }
.js:not(.reduced) .cat-table:not(.in) .cat-el { background: transparent; border-color: transparent; }
.js:not(.reduced) .cat-table:not(.in) .cat-el::before { opacity: 1; }
.js:not(.reduced) .cat-table:not(.in) .cat-el > * { opacity: 0; }
.cat-table.in .cat-el, .cat-table.in .cat-el::before, .cat-table.in .cat-el > * { transition-delay: var(--d); }
.cat-table.in .cat-el:hover, .cat-table.in .cat-el:hover > * { transition-delay: 0ms; }

@media (min-width: 768px) {
  .cat { padding: 128px 0; }
  .cat-inner { grid-template-columns: 1fr auto; grid-template-areas: "head cta" "table table"; align-items: end; column-gap: 48px; }
  .cat-title { font-size: min(calc((100vw - 96px) / 18), 64px); }
  .cat-lead { font-size: 24px; line-height: 1.4; }
  .cat-cta { margin: 0; }
  .cat-table { margin-top: 64px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .cat-el { min-height: 200px; }
  .cat-el-sym { font-size: 48px; }
}
/* широкий экран: все семь клеток в одну строку, ширина группы — по числу клеток */
@media (min-width: 1200px) {
  .cat-table { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); }
  .cat-cells { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .cat-el { min-height: 224px; }
  .cat-el-sym { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-wave { display: none; }
}

.bottle-dental { font: 700 38px/1 var(--font-body); fill: var(--red); letter-spacing: -.02em; }
.bottle-s { font: 700 21px/1 var(--font-body); fill: var(--red); }
.bottle-name { font: 700 16px/1 var(--font-body); fill: #fff; }
.bottle-small { font: 500 10px/1 var(--font-body); fill: #fff; fill-opacity: .85; }

.reduced .scene-canvas {
  display: block;
  width: 100%;
  height: 360px;
  margin-top: 48px;
}

/* Плавная прокрутка (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Блок 7 «3D-принтеры и оборудование» — вариант D «Рабочее место»
   (prototypes/equipment/d-desk, решение пользователя 07.10.2026). Белый, без
   закрепления. Изометрическая комната-лаборатория в SVG (equipment.js):
   приборы опускаются на места; наведение, фокус или касание — прибор
   приподнимается, рёбра краснеют, своё движение, всплывает подпись.
   На компьютере заголовок над блоком, подзаголовок и кнопка слева, комната
   справа; на телефоне — заголовок, подзаголовок, комната, кнопка. */
.eq { position: relative; padding: 96px 0; background: var(--bg); }
.eq-inner {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-areas: "title" "lead" "body" "cta";
}
.eq-title {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: calc((100vw - 32px) / 11.5); /* «оборудование» в одну строку на телефоне */
  line-height: 1.04;
  letter-spacing: -.01em;
}
.eq-lead { grid-area: lead; margin-top: 24px; max-width: 40ch; font-size: 20px; line-height: 1.45; color: var(--muted); }
.eq-body { grid-area: body; margin-top: 32px; }
.eq-cta { grid-area: cta; margin-top: 32px; }

.eq-dio { position: relative; width: min(100%, 1040px, calc((100svh - 200px) * 1.1)); margin: 0 auto; } /* целиком в экран: viewBox 790 × 716 */
.eq-dio svg { width: 100%; height: auto; overflow: visible; }
.eq-dio polygon, .eq-dio path, .eq-dio ellipse { stroke: rgb(18 20 24 / .16); stroke-width: .8; stroke-linejoin: round; }
.eq-dio .eq-lid polygon { stroke: rgb(227 5 24 / .45); }
.eq-dio .eq-floor { stroke: #dfe2e6; stroke-width: .8; }
.eq-obj { cursor: pointer; outline: none; }
.eq-drop, .eq-lift, .eq-mv { transform-box: view-box; }
.eq-lift { transition: transform 250ms var(--ease); }
.eq-obj.on .eq-lift { transform: translateY(-10px); }
.eq-obj:focus-visible polygon { stroke: var(--red); stroke-width: 1.2; }
/* активный прибор — красные рёбра (прозрачность других просвечивала бы сквозь объёмы) */
.eq-obj.on polygon, .eq-obj.on path, .eq-obj.on ellipse { stroke: rgb(227 5 24 / .55); }
/* движение приборов, пока прибор активен */
.eq-mv { transition: transform 400ms var(--ease); }
.eq-obj.on .eq-plate { animation: eq-plate 1.6s var(--ease) infinite alternate; }
@keyframes eq-plate { to { transform: translateY(26px); } }
.eq-obj.on .eq-basket { transform: translateY(-16px); }
.eq-glow { opacity: .35; }
.eq-obj.on .eq-glow { animation: eq-glow 1.2s ease-in-out infinite alternate; }
@keyframes eq-glow { from { opacity: .35; } to { opacity: .95; } }
.eq-obj.on .eq-blink { animation: eq-glow .6s steps(2) infinite; }
.eq-obj.on .eq-bottle, .eq-obj.on .eq-can { animation: eq-tilt 1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.eq-obj.on .eq-bottle:nth-child(2) { animation-delay: -.33s; }
.eq-obj.on .eq-bottle:nth-child(3) { animation-delay: -.66s; }
.eq-obj.on .eq-can:nth-child(2) { animation-delay: -.5s; }
@keyframes eq-tilt { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
/* появление: приборы по очереди опускаются на места */
.eq-drop { transition: transform 600ms var(--ease) var(--d), opacity 400ms var(--ease) var(--d); }
.js:not(.reduced) .eq-dio:not(.in) .eq-drop { transform: translateY(-64px); opacity: 0; }
/* подпись */
.eq-lbl { position: absolute; left: 0; top: 0; z-index: 2; width: max-content; max-width: min(320px, 86vw); padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--night-ink); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% + 8px)); transition: opacity 150ms var(--ease), transform 250ms var(--ease); }
.eq-lbl.show { opacity: 1; transform: translate(-50%, -100%); }
.eq-lbl b { display: block; font-size: 16px; font-weight: 600; line-height: 24px; }
.eq-lbl span { display: block; font-size: 14px; line-height: 20px; color: var(--night-muted); }
.eq-lbl i { display: block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: #ff5a66; }
.eq-lbl::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: inherit; transform: rotate(45deg); border-radius: 2px; }

@media (min-width: 768px) {
  .eq { padding: 128px 0; }
  .eq-title { font-size: min(calc((100vw - 96px) / 18), 64px); }
  .eq-lead { font-size: 24px; line-height: 1.4; }
}
@media (min-width: 1000px) {
  .eq-inner { grid-template-columns: minmax(280px, 1fr) minmax(0, 2.4fr); grid-template-areas: "title title" "lead body" "cta body" ". body"; grid-template-rows: auto auto auto 1fr; align-items: start; column-gap: 48px; }
  .eq-lead { max-width: 16em; }
  .eq-body { margin-top: 24px; }
  .eq-cta { margin-top: 48px; }
  .eq-dio { margin: 0 0 0 auto; }
}

/* ——— Блок 8 «Обучение 3D-печати» (лаборатория — prototypes/training) ———
   Раскладка как у блока 7: заголовок сверху, на компьютере подзаголовок,
   курсы и кнопка слева, видео клиента справа; на телефоне — заголовок,
   подзаголовок, видео, курсы, кнопка. Видео: скруглённые края без подложки
   (тёмный фон просвечивал каймой — у кадров белые края), белые кнопки паузы
   и звука, свои субтитры; нажатие на видео — поп-ап поверх страницы. */
.tr { position: relative; padding: 96px 0; background: var(--bg); }
.tr-inner {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-areas: "title" "lead" "media" "list" "cta";
}
.tr-title {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: calc((100vw - 32px) / 11.5); /* как у блока 7 */
  line-height: 1.04;
  letter-spacing: -.01em;
}
.tr-lead { grid-area: lead; margin-top: 24px; max-width: 40ch; font-size: 20px; line-height: 1.45; color: var(--muted); }
.tr-media { grid-area: media; margin-top: 32px; }
.tr-list { grid-area: list; margin-top: 32px; border-top: 1px solid var(--line); }
.tr-cta { grid-area: cta; margin-top: 32px; }
.tr-list li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.tr-list b { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 20px; line-height: 28px; font-weight: 600; }
.tr-list b span { font-family: var(--font-display); font-weight: var(--display-weight); white-space: nowrap; }
.tr-list p { margin-top: 8px; max-width: 44ch; font-size: 16px; line-height: 24px; color: var(--muted); }
.tr-list .tr-inc { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--ink); font-weight: 500; }
.tr-inc svg { flex: none; width: 16px; height: 16px; color: var(--red); }

.tr-vid { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.tr-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-vid:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.tr-ctl { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: flex; gap: 8px; cursor: auto; }
.tr-btn { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 2px 12px rgb(0 0 0 / .28); cursor: pointer; transition: transform 200ms var(--ease); }
.tr-btn:hover { transform: scale(1.06); }
.tr-btn:active { transform: scale(.96); }
.tr-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.tr-btn svg { width: 20px; height: 20px; display: block; }
.tr-btn .i-off, .tr-pp .i-play { display: none; }
.tr-btn[aria-pressed="true"] .i-on { display: none; }
.tr-btn[aria-pressed="true"] .i-off { display: block; }
.tr-pp[aria-pressed="true"] .i-play { display: block; }
.tr-pp[aria-pressed="true"] .i-pause { display: none; }
.tr-cc { font: 700 14px/1 var(--font-body); letter-spacing: .02em; }
.tr-cc[aria-pressed="false"] { background: rgb(255 255 255 / .28); color: #fff; }

.tr-subs { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 68px; display: flex; justify-content: center; text-align: center; pointer-events: none; }
.tr-subs span { padding: 3px 8px; border-radius: 8px; background: rgb(10 10 10 / .72); box-decoration-break: clone; -webkit-box-decoration-break: clone; color: #fff; font-size: 14px; line-height: 21px; font-weight: 500; }
.tr-subs:empty, .tr-subs.off { display: none; }

/* поп-ап */
.tr-pop { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.tr-pop::backdrop { background: rgb(10 10 10 / .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tr-pop[open] { display: grid; place-items: center; animation: tr-pop-in 260ms var(--ease); }
@keyframes tr-pop-in { from { opacity: 0; } }
.tr-frame { position: relative; width: min(94vw, 1280px, calc((100dvh - 48px) * 16 / 9)); }
.tr-full { cursor: default; border-radius: 14px; box-shadow: 0 24px 80px rgb(0 0 0 / .5); }
.tr-full video { object-fit: contain; }
.tr-full .tr-subs { left: 16px; right: 16px; bottom: 100px; }
.tr-close { position: absolute; z-index: 5; top: -52px; right: 0; }
.tr-seek { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 76px; height: 20px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.tr-seek i { display: block; position: relative; width: 100%; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .3); }
.tr-seek b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #fff; }

/* подпись-курсор над видео в блоке (только мышь) */
.tr-cur { position: fixed; left: 0; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 4px 16px rgb(0 0 0 / .18); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; scale: .8; transition: opacity 180ms var(--ease), scale 180ms var(--ease); will-change: transform; }
.tr-cur svg { width: 14px; height: 14px; color: var(--red); }
.tr-cur.show { opacity: 1; scale: 1; }
.tr-vid.has-cur { cursor: none; }

@media (min-width: 768px) {
  .tr { padding: 128px 0; }
  .tr-title { font-size: min(calc((100vw - 96px) / 18), 64px); }
  .tr-lead { font-size: 24px; line-height: 1.4; }
  .tr-full { border-radius: 20px; }
  .tr-close { top: -56px; }
  .tr-full .tr-subs span { font-size: 16px; line-height: 26px; }
}
@media (min-width: 1000px) {
  .tr-inner { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.45fr); grid-template-areas: "title title" "lead media" "list media" "cta media" ". media"; grid-template-rows: auto auto auto auto 1fr; align-items: start; column-gap: 64px; }
  .tr-lead { max-width: 16em; }
  .tr-media { margin-top: 32px; }
  .tr-list { margin-top: 40px; }
  .tr-cta { margin-top: 48px; }
  .tr-subs { left: 16px; right: 120px; bottom: 16px; min-height: 44px; align-items: flex-end; justify-content: flex-start; text-align: left; }
  .tr-subs span { padding: 4px 10px; font-size: 16px; line-height: 26px; }
  .tr-ctl { right: 16px; bottom: 16px; }
  .tr-full .tr-subs { left: 16px; right: 16px; bottom: 100px; justify-content: center; text-align: center; }
  .tr-full .tr-subs span { font-size: 20px; line-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .gleam { display: none; }
  .eq-obj.on .eq-plate, .eq-obj.on .eq-glow, .eq-obj.on .eq-blink, .eq-obj.on .eq-bottle, .eq-obj.on .eq-can { animation: none; }
  .tr-pop[open] { animation: none; }
  * { transition: none !important; }
}

/* Блок 9 «Подберём материал под вашу задачу» и общий футер (лаборатория —
   prototypes/request, вариант Б «Красная смола», выбран пользователем
   08.10.2026). Форма — начало паспорта печати из блока 5: посетитель пишет,
   что печатает и на каком принтере; материал, высота слоя и постобработка —
   пунктиром, их подберёт специалист SMOLA; после отправки пунктир
   прочерчивается. Блок заливает красная волна (мягче, чем в блоке 5), футер
   стоит на том же красном — у страницы один финал; крупный логотип открывает
   футер и поднимается снизу. Движение и форма — request.js. */
.rq, .ft {
  --rq-bg: var(--red);
  --rq-ink: #fff;
  --rq-muted: #fff;                          /* на красном мелкий текст только белый: иначе контраст < 4,5 */
  --rq-soft: rgb(255 255 255 / .86);         /* крупный текст: 4,2 : 1 */
  --rq-rule: rgb(255 255 255 / .32);
  --rq-field: rgb(255 255 255 / .8);         /* линия поля: 3,5 : 1 к красному */
  --rq-accent: #fff;                         /* фокус, галочка, прочерченный паспорт */
  --rq-err: #fff;
  --rq-glow: rgb(255 255 255 / .1);
  --rq-btn: #fff;
  --rq-btn-hover: #f4f4f4;
  --rq-btn-ink: var(--red);
  --rq-mark: #fff;
  --rq-gloss: rgb(255 255 255 / .4);
}

/* ---------- блок 9 ---------- */
.rq {
  position: relative;
  z-index: 2;
  overflow-x: clip; /* «свет» полей не расширяет страницу на телефоне; волна сверху — видна */
  padding: 96px 0;
  background: var(--rq-bg);
  color: var(--rq-ink);
}
.rq :focus-visible { outline-color: var(--rq-accent); }

/* волна: смола заливает экран над краем блока быстрее прокрутки (как блок 5) */
.rq-wave {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}
.rq-wave-fill { fill: var(--rq-bg); }
.rq-wave-gloss { fill: none; stroke: url(#rq-gloss); stroke-width: 1.5; }
.rq-gloss-stop { stop-color: var(--rq-gloss); }

.rq-inner {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-areas: "title" "lead" "form";
}
.rq-title {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: calc((100vw - 32px) / 11.5); /* как у блоков 7 и 8 */
  line-height: 1.04;
  letter-spacing: -.01em;
}
.rq-lead { grid-area: lead; margin-top: 24px; max-width: 40ch; font-size: 20px; line-height: 1.45; color: var(--rq-soft); }
.rq-form { grid-area: form; margin-top: 48px; isolation: isolate; }
.rq-pass { margin: 0; padding: 0; border: 0; min-width: 0; }

/* поле: подпись капсом, как названия групп в таблице смол; линия снизу */
.rq-ctl { position: relative; }
.rq-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rq-muted);
  transition: color 150ms var(--ease);
}
.rq-ctl:focus-within .rq-label { color: var(--rq-ink); }
.rq-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--rq-field);
  border-radius: 0;
  background: transparent;
  color: var(--rq-ink);
  font: 500 20px/28px var(--font-body);
  caret-color: var(--rq-accent);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.rq-input::placeholder { color: var(--rq-muted); opacity: .72; }
.rq-input:focus { outline: none; border-bottom-color: var(--rq-accent); box-shadow: inset 0 -1px 0 var(--rq-accent); }
.rq-input[aria-invalid="true"] { border-bottom-color: var(--rq-err); box-shadow: inset 0 -1px 0 var(--rq-err); }
.rq-input[readonly] { cursor: default; }
/* «студийный свет»: поле в фокусе подсвечено, как изделие в тёмной студии блока 5 */
.rq-ctl::before {
  content: "";
  position: absolute;
  inset: -24px -24px -8px;
  z-index: -1;
  background: radial-gradient(60% 72% at 50% 100%, var(--rq-glow), transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease);
}
.rq-ctl:focus-within::before { opacity: 1; }

.rq-err-msg { min-height: 0; margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--rq-err); }
.rq-err-msg:empty { display: none; }
.rq-err-msg::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: #fff; color: var(--red); font-size: 12px; font-weight: 700; vertical-align: 1px; }

/* паспорт: своя часть посетителя — крупно, как изделие в подписи блока 5 */
.rq-task .rq-input {
  min-height: 48px;
  padding: 8px 0 12px;
  resize: none;
  overflow: hidden;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
/* часть SMOLA — пунктиром, как недостающие данные в паспортах блока 5 */
.rq-pp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 16px;
  font-size: 18px;
  line-height: 28px;
  color: var(--rq-muted);
}
.rq-pp-line { display: flex; flex-wrap: wrap; }
.rq-slot { white-space: nowrap; }
.rq-slot:not(:last-child)::after { content: "·"; display: inline-block; margin: 0 8px; }
.rq-slot b { position: relative; font-weight: 400; transition: color 250ms var(--ease); }
.rq-slot b::before,
.rq-slot b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; }
.rq-slot b::before { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); opacity: .6; transition: opacity 250ms var(--ease); }
.rq-slot b::after { height: 2px; bottom: -4px; background: var(--rq-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 400ms var(--ease); }
.rq-pp-who { font-size: 16px; line-height: 24px; }
.rq-pp-who::before { content: "— "; }
/* «SMOLA» — словом из логотипа, без значка (решение пользователя 08.10.2026);
   низ рамки — линия букв, поэтому стоит на строке как текст */
.rq-word { display: inline-block; height: .82em; width: auto; aspect-ratio: 215.5 / 54.5; margin-left: .06em; vertical-align: baseline; fill: currentColor; }
/* посетитель написал задачу — паспорт ждёт специалиста: пропуски светлеют */
.rq.has-task .rq-slot b { color: var(--rq-ink); }
/* заявка отправлена — пунктир прочерчивается сплошной линией по очереди */
.rq.sent .rq-slot b { color: var(--rq-ink); }
.rq.sent .rq-slot b::before { opacity: 0; transition-delay: var(--d); }
.rq.sent .rq-slot b::after { transform: scaleX(1); transition-delay: var(--d); }

.rq-contacts { display: grid; gap: 32px; margin-top: 48px; }

/* согласие — отдельная галочка, по умолчанию не отмечена (152-ФЗ) */
.rq-send { display: grid; gap: 24px; margin-top: 40px; }
.rq-consent { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font-size: 16px; line-height: 24px; cursor: pointer; }
.rq-consent input { position: absolute; left: 0; top: 10px; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.rq-box { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--rq-field); border-radius: 6px; color: var(--rq-bg); transition: background 150ms var(--ease), border-color 150ms var(--ease); }
.rq-box svg { width: 16px; height: 16px; opacity: 0; transition: opacity 150ms var(--ease); }
.rq-consent input:checked + .rq-box { background: var(--rq-accent); border-color: var(--rq-accent); }
.rq-consent input:checked + .rq-box svg { opacity: 1; }
.rq-consent input:focus-visible + .rq-box { outline: 2px solid var(--rq-accent); outline-offset: 3px; }
.rq-consent input[aria-invalid="true"] + .rq-box { border-color: var(--rq-err); box-shadow: inset 0 0 0 1px var(--rq-err); }
.rq-consent a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rq-consent a:hover { text-decoration-thickness: 2px; }
.rq-consent-wrap .rq-err-msg { margin-top: 0; padding-left: 36px; }
.rq-btn { width: 100%; justify-content: center; border: 0; font: 600 16px/1 var(--font-body); cursor: pointer; background: var(--rq-btn); color: var(--rq-btn-ink); transition: background 150ms var(--ease), opacity 250ms var(--ease); }
.rq-btn:hover { background: var(--rq-btn-hover); }
/* кнопка доступна, когда заполнен телефон или e-mail; до этого бледная, но
   нажимается — нажатие подсказывает, чего не хватает */
.rq-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.rq-btn[aria-disabled="true"]:hover { background: var(--rq-btn); }

.rq-done { display: flex; align-items: flex-start; gap: 12px; margin-top: 40px; font-size: 18px; line-height: 28px; }
.rq-done:focus { outline: none; }
.rq-done[hidden] { display: none; }
.rq-done svg { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--rq-accent); color: var(--rq-bg); }
.rq-done b { font-weight: 600; }
.rq.sent .rq-send { display: none; }

/* ---------- футер: тот же фон — у страницы один финал ---------- */
.ft { position: relative; z-index: 2; margin-top: -1px; padding: 0 0 32px; /* −1 px: без светлого шва на дробной границе */ background: var(--rq-bg); color: var(--rq-ink); }
.ft :focus-visible { outline-color: var(--rq-accent); }
.ft-inner { width: min(100%, var(--container)); margin: 0 auto; padding: 0 var(--gutter); }
/* крупный логотип открывает футер, над контактами (решение пользователя 08.10.2026);
   вектор обведён по PNG с текущего сайта — до боевого сайта взять вектор у клиента */
.ft-logo { overflow: hidden; }
.ft-logo svg { width: 100%; height: auto; transform: translateY(var(--rise, 0%)); will-change: transform; }
.lg-mark { fill: var(--rq-mark); }
.lg-word { fill: var(--rq-ink); }
.ft-cols { display: grid; gap: 32px; margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--rq-rule); }
.ft-h { margin: 0 0 12px; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--rq-muted); }
.ft-col p, .ft-col li { font-size: 16px; line-height: 24px; }
.ft-col li + li { margin-top: 8px; }
.ft-col a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* «Website by» + знак Scaffold, под знаком — домен студии */
.ft-by {
  width: fit-content;
  margin: 64px 0 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "lbl logo" ". domain";
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  color: var(--rq-ink);
}
.ft-by-lbl { grid-area: lbl; font-size: 14px; line-height: 20px; color: var(--rq-muted); }
.ft-scf { grid-area: logo; display: block; width: 0; min-width: 100%; height: auto; } /* ширину колонки задаёт домен (≈130 px), знак встаёт ровно по нему */
.ft-by-domain { grid-area: domain; font-size: 14px; line-height: 20px; }
.ft-by:hover .ft-by-domain { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (min-width: 700px) {
  /* слева имя и компания, справа телефон и под ним e-mail */
  .rq-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 24px; }
  .rq-send { grid-template-columns: 1fr auto; align-items: center; }
  .rq-btn { width: auto; }
  .ft-cols { grid-template-columns: 5fr 3fr 4fr; column-gap: 48px; }
}
@media (min-width: 768px) {
  .rq { padding: 128px 0; }
  .rq-title { font-size: min(calc((100vw - 96px) / 18), 64px); }
  .rq-title > span { display: block; }
  .rq-lead { font-size: 24px; line-height: 1.4; }
  .rq-task .rq-input { font-size: 24px; line-height: 32px; } /* как изделие в подписи блока 5 */
}
@media (min-width: 1000px) {
  .rq-inner { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.45fr); grid-template-areas: "title title" "lead form"; column-gap: 64px; align-items: start; }
  .rq-lead { max-width: 16em; margin-top: 32px; }
  .rq-form { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .rq-wave { display: none; }
  .rq *, .rq *::before, .rq *::after { transition: none !important; }
  .ft-logo svg { transform: none; }
}