/* =========================================================
   Обсидиан — дизайн-система v2
   Два тона: почти-чёрный и кремовый. Без акцентного цвета —
   акцент делается начертанием: <em> внутри заголовка = курсив
   приглушённого хаки-тона. Секции чередуют темы .s-dark / .s-light,
   все компоненты берут цвета из переменных темы.
   ========================================================= */
:root {
  --black: #0c0c0d;
  --black-2: #161618;
  --cream: #f2ede4;
  --cream-2: #e6dfd3;
  --khaki: #8b8674;
  --amber: #c98a3e;        /* единственный акцент — только CTA-кнопки */
  --amber-hover: #b57a34;

  --serif: "Playfair Display", "Times New Roman", serif;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1200px;
  --gutter: clamp(18px, 4vw, 56px);
  --rail: 0px;
  --ease: cubic-bezier(.22, .8, .2, 1);

  /* тёмная тема по умолчанию */
  --bg: var(--black);
  --fg: var(--cream);
  --muted: rgba(242, 237, 228, .6);
  --line: rgba(242, 237, 228, .14);
  --card: var(--black-2);
  --accent: #a39e8c;
}
.s-dark { --bg: var(--black); --fg: var(--cream); --muted: rgba(242, 237, 228, .6); --line: rgba(242, 237, 228, .14); --card: var(--black-2); --accent: #a39e8c; }
.s-light { --bg: var(--cream); --fg: var(--black); --muted: rgba(12, 12, 13, .6); --line: rgba(12, 12, 13, .14); --card: #faf7f1; --accent: #7c7766; }
.s-dark, .s-light { background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--black); color: var(--cream);
  font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.is-loading { overflow: hidden; }
h1, h2, h3, h4, p, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 6px; }
section[id] { scroll-margin-top: 24px; }
main { padding-inline: var(--rail); }
footer { padding-inline: var(--rail); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--cream); color: var(--black); padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 16px; }

/* ---------- Типографика ---------- */
.h1, .h2, .h3, .hero__title, .page-hero__title, .contacts__title {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.04;
}
.hero__title { font-size: clamp(42px, 6.4vw, 100px); }
.page-hero__title { font-size: clamp(38px, 5.6vw, 80px); max-width: 16em; }
.h2 { font-size: clamp(36px, 4.6vw, 66px); }
.h3 { font-size: clamp(26px, 2.8vw, 38px); }
h1 em, h2 em, h3 em, .h1 em, .h2 em, .h3 em, .em { font-style: italic; font-weight: 400; color: var(--accent); }
.kicker { display: inline-flex; align-items: center; gap: 12px; font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .6; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  background: var(--amber); color: var(--black); border-radius: 999px; font-weight: 600; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s;
}
.btn:hover { transform: translateY(-2px); background: var(--amber-hover); }
.btn svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.btn--small { padding: 11px 20px; font-size: 14px; }
.btn--big { padding: 20px 34px; font-size: 17px; }
.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--fg); }
.link-quiet {
  font-weight: 500; padding: 8px 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.link-quiet:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Интро: монограмма ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--black); color: var(--cream); display: grid; place-items: center; transition: transform .9s var(--ease); animation: intro-safety 0s 6s forwards; }
html:not(.js) .intro { display: none; }
.intro.is-done { transform: translateY(-100%); }
.intro.is-gone { display: none; }
@keyframes intro-safety { to { visibility: hidden; } }
.intro__inner { text-align: center; }
/* знак: scale-in + blur-in первым (.55s); имя проявляется следом; статус — последним */
/* интро — только текстовый логотип: «Обсидиан» курсивом Playfair, scale/blur-in */
.intro__name { opacity: 0; transform: scale(.9) translateY(8px); filter: blur(10px); animation: intro-name .7s var(--ease) .15s forwards; }
@keyframes intro-name { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes intro-fade { to { opacity: 1; } }
.intro__name { font: 600 clamp(40px, 5.6vw, 84px)/1 var(--serif); font-style: italic; letter-spacing: -.02em; }
.intro__status { position: fixed; left: 50%; bottom: 6vh; transform: translateX(-50%); opacity: 0; animation: intro-fade .5s .9s forwards; display: flex; align-items: center; gap: 10px; font: 600 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.intro__status span { width: 40px; height: 1px; background: var(--muted); position: relative; overflow: hidden; }
.intro__status span::after { content: ""; position: absolute; inset: 0; background: var(--cream); transform: scaleX(0); transform-origin: left; animation: intro-bar 1.6s var(--ease) .2s forwards; }
@keyframes intro-bar { to { transform: scaleX(1); } }

/* ---------- Вертикальные рейлы навигации ---------- */
/* без mix-blend-mode: цвет рейлов переключает JS по секции под ними (blend-слои поверх WebGL провоцировали чёрные кадры компоновщика) */
.rail { position: fixed; top: 0; bottom: 0; z-index: 60; width: var(--rail); display: none; flex-direction: column; align-items: center; justify-content: space-between; padding: 28px 0; color: var(--cream); pointer-events: none; transition: color .25s; }
.rail.is-light { color: var(--black); }
.rail > * { pointer-events: auto; }
.rail--brand { left: 0; border-right: 1px solid rgba(127, 127, 127, .3); }
.rail--nav { right: 0; border-left: 1px solid rgba(127, 127, 127, .3); justify-content: center; gap: 34px; }
.rail__brand, .rail__sub, .rail--nav a { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: .24em; font: 600 11px/1 var(--sans); }
/* текстовый логотип в левом рейле: курсив Playfair, без значка */
.rail__brand { font: 600 22px/1 var(--serif); font-style: italic; text-transform: none; letter-spacing: -.01em; text-decoration: none; color: inherit; }
.rail__sub { font-weight: 500; opacity: .6; }
.rail--nav a { position: relative; padding: 6px 0; opacity: .72; transition: opacity .25s; }
.rail--nav a:hover, .rail--nav a.is-active { opacity: 1; }
.rail--nav a.is-active::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translateX(-50%); }

/* мобильная шапка */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); color: var(--cream); background: var(--black); border-bottom: 1px solid rgba(242, 237, 228, .12); }
.logo { display: flex; align-items: center; font: 600 24px/1 var(--serif); font-style: italic; letter-spacing: -.01em; }   /* текстовый логотип */
.burger { display: grid; gap: 6px; width: 44px; height: 44px; place-content: center; background: none; border: 0; cursor: pointer; color: inherit; }
.burger span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.is-menu-open .burger span:first-child { transform: translateY(4px) rotate(45deg); }
.is-menu-open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 65; background: var(--black); color: var(--cream); padding: 96px var(--gutter) 40px; display: flex; flex-direction: column; gap: 4px; transform: translateY(-100%); transition: transform .5s var(--ease); }
.is-menu-open .menu { transform: none; }
.menu a:not(.btn) { font: 400 34px/1.25 var(--serif); padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu a.is-active { font-style: italic; color: var(--accent); }
.menu .btn { margin-top: 28px; align-self: flex-start; padding: 18px 28px; }
.is-menu-open .topbar { mix-blend-mode: normal; }
body.is-menu-open { overflow: hidden; }

@media (min-width: 1024px) {
  :root { --rail: 72px; }
  .rail { display: flex; }
  .topbar, .menu { display: none; }
}
@media (max-width: 1023px) {
  main { padding-top: 64px; }
}

/* ---------- Линии-реавил заголовков ---------- */
.line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.line > span { display: block; }
.js .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .is-ready .hero__title .line > span, .js .reveal-lines.in .line > span { transform: none; }
.js .line:nth-child(2) > span { transition-delay: .12s; }
.js .line:nth-child(3) > span { transition-delay: .24s; }
.js [data-hero-fade] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .is-ready [data-hero-fade] { opacity: 1; transform: none; }
.js .is-ready .hero__lead { transition-delay: .35s; }
.js .is-ready .hero__actions { transition-delay: .48s; }
.js .is-ready .checks { transition-delay: .7s; }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(96px, 12vh, 140px) 0 56px; position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; width: 100%; }
.hero__title { margin-bottom: 30px; }
.hero__lead { font-size: clamp(17px, 1.4vw, 20px); max-width: 32em; color: var(--muted); margin-bottom: 36px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

/* макет, «собирающийся» после интро */
.build { position: relative; }
.build__frame { background: var(--cream); color: var(--black); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); transform: rotate(1.5deg); }
.build__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(12, 12, 13, .12); background: var(--cream-2); }
.build__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(12, 12, 13, .18); }
.build__url { margin-left: 12px; font-size: 12px; color: var(--khaki); background: var(--cream); border: 1px solid rgba(12, 12, 13, .12); border-radius: 999px; padding: 2px 12px; }
.build__page { padding: 18px; display: grid; gap: 14px; }
.b--nav { display: flex; gap: 10px; align-items: center; }
.b--nav span { height: 8px; border-radius: 4px; background: var(--cream-2); width: 14%; }
.b--nav span:first-child { width: 22%; background: var(--black); margin-right: auto; }
.b--hero { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
.b-hero__txt { display: grid; gap: 8px; }
.b-hero__txt span { height: 12px; border-radius: 6px; background: var(--black); }
.b-hero__txt .t1 { width: 92%; height: 16px; }
.b-hero__txt .t2 { width: 70%; height: 16px; background: var(--khaki); }
.b-hero__txt .t3 { width: 84%; height: 7px; background: var(--cream-2); margin-top: 4px; }
.b-hero__txt .pill { width: 46%; height: 22px; border-radius: 999px; background: var(--black); margin-top: 6px; }
.b-hero__img { position: relative; aspect-ratio: 4 / 3.4; border-radius: 12px; overflow: hidden; background: linear-gradient(170deg, #d9d2c4 0%, #a39e8c 70%, #6f6b5c 100%); }
.b-hero__img .sun { position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--cream); right: 16%; top: 20%; }
.b-hero__img .hill { position: absolute; border-radius: 50% 50% 0 0; }
.b-hero__img .h1 { width: 120%; height: 50%; left: -40%; bottom: -12%; background: #3a3831; }
.b-hero__img .h2 { width: 110%; height: 42%; right: -45%; bottom: -14%; background: var(--black); }
.b--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card { height: 64px; border-radius: 10px; }
.c1 { background: var(--cream-2); } .c2 { background: #d9d2c4; } .c3 { background: var(--cream-2); }
.build__tag { position: absolute; background: var(--cream); color: var(--black); border-radius: 999px; padding: 10px 18px; font-size: 14px; white-space: nowrap; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .6); }
.build__tag b { font-family: var(--serif); font-style: italic; font-weight: 400; margin-right: 4px; }
.build__tag--a { left: -28px; bottom: 16%; }
.build__tag--b { right: -12px; top: -18px; }
.js .b, .js .build__tag { opacity: 0; transform: translateY(14px) scale(.98); }
.js .build__frame { opacity: 0; transform: rotate(5deg) translateY(40px); transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.js .is-ready .build__frame { opacity: 1; transform: rotate(1.5deg); }
.js .is-ready .b, .js .is-ready .build__tag { animation: snap .7s var(--ease) forwards; }
.js .is-ready .b--nav { animation-delay: .5s; }
.js .is-ready .b--hero { animation-delay: .7s; }
.js .is-ready .b--row { animation-delay: .9s; }
.js .is-ready .build__tag--a { animation-delay: 1.25s; }
.js .is-ready .build__tag--b { animation-delay: 1.45s; }
@keyframes snap { to { opacity: 1; transform: none; } }

.checks { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 64px; width: 100%; font-weight: 500; font-size: 15px; }
.checks li { display: flex; align-items: center; gap: 10px; }
.check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--fg); position: relative; }
.check::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--fg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

.ticker { border-block: 1px solid var(--line); overflow: hidden; padding: 20px 0; }
.ticker__track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker__track span { font: 400 clamp(22px, 2.4vw, 32px)/1 var(--serif); font-style: italic; color: var(--accent); padding: 0 28px; white-space: nowrap; display: flex; align-items: center; gap: 56px; }
.ticker__track span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); opacity: .5; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- HERO: sticky-стейдж на весь вьюпорт, фигура из камня, типографика за/над ней ---------- */
.hero-asm { position: relative; min-height: calc(100vh + 4200px + var(--hero-hold, 0px)); display: flex; flex-direction: column; padding: 0;   /* + пауза в конце (--hero-hold = data-hold) */ }   /* сцена растянута: ~4200px скролла на разворот/разлёт/сборку */
.hero-asm__stage { position: sticky; top: 0; height: 100vh; height: 100svh; width: 100%; overflow: hidden; flex: none; }
/* фото-объект: центр-право, парит; transform по --hp (0…1 из script.js) + медленное дыхание */
/* объект из DOM-тайлов: контейнер 82vh высотой (пропорция фото 1600×2685), центр — правее середины; transform/filter ставит hero-venus.js */
/* статуя из осколков: контейнер 90vh (пропорция из манифеста, inline), финальная позиция — справа; transform ставит hero-shards.js
   (зум+сдвиг до разлёта, непрерывное вращение rotateY, наклон) */
.v-obj { position: absolute; z-index: 2; left: calc(50% + 15vw); top: 50%; height: 90vh; transform: translate(-50%, -50%); pointer-events: none; will-change: transform, filter; }
/* два слоя внутри контейнера: мозаика осколков и ЦЕЛОЕ фото (тот же файл, те же координаты) — кроссфейд в конце сборки ставит hero-shards.js */
.v-shards { position: absolute; inset: 0; z-index: 1; }
.v-whole { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; pointer-events: none; background: url("img/hero-venus.webp") center / 100% 100% no-repeat; }
.v-shard { position: absolute; background-repeat: no-repeat; background-size: 100% 100%; will-change: transform, opacity; }
/* гладкое свечение за объектом — CSS radial-gradient, не тайлы; гаснет с началом разлёта (--hp .1 → .4) */
.hero-glow { position: absolute; z-index: 1; left: calc(50% + 11vw); top: 46%; width: 70vh; height: 100vh; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(242, 237, 228, .13) 0%, rgba(242, 237, 228, .05) 32%, transparent 62%);
  opacity: calc(1 - clamp(0, (var(--hp, 0) - .1) / .3, 1) * .75); }
/* постамент под статуей — opacity ставит hero-venus.js (= прогресс возврата kC); низ объекта = 91vh */
.hero-pedestal { position: absolute; z-index: 1; left: calc(50% + 15vw); top: 95vh; width: 44vh; height: 8vh; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .65) 38%, rgba(0, 0, 0, .25) 58%, transparent 72%);
  opacity: 0; pointer-events: none; }
.hero-asm .hero3d { display: none; }
/* поэтапное появление текста по прогрессу сцены p (классы is-t1 / is-t2 из script.js):
   стадия 1 (p ≥ .58) — слово «Форма» за статуей; стадия 2 (p ≥ .94) — заголовок, кнопки, буллиты (после ухода подписей).
   Так на экране одновременно не больше одной подписи ИЛИ заголовочного блока. «не эскиз — результат.» убран. */
.hero-asm .hero__title, .hero-asm .hero__actions, .hero-asm .checks {
  opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.hero-asm .hero-display { display: none; }   /* вотермарк «Форма» и «не эскиз — результат.» убраны */
.hero-asm.is-t2 .hero__title, .hero-asm.is-t2 .hero__actions, .hero-asm.is-t2 .checks { opacity: 1; transform: none; }
/* заголовок ниже is-t2 скрыт полностью (перебиваем .js .is-ready .hero__title .line > span) */
.js .is-ready .hero-asm:not(.is-t2) .hero__title { opacity: 0; }
/* перебиваем .js .is-ready [data-hero-fade] (спец. 0,3,0): до стадии 2 кнопки и буллиты скрыты */
.js .is-ready .hero-asm:not(.is-t2) .hero__actions, .js .is-ready .hero-asm:not(.is-t2) .checks { opacity: 0; transform: translateY(26px); }
.hero-asm.is-t2 .checks { transition-delay: .15s; }
.hero-asm.is-t1 .hero-display--back { opacity: 1; }
.hero-scrollhint { position: absolute; left: 24%; bottom: 6vh; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); opacity: 1; transition: opacity .5s; pointer-events: none; }
.hero-scrollhint i { width: 1px; height: 30px; background: currentColor; transform-origin: top; animation: scrollhint 1.6s ease-in-out infinite; }
.hero-asm.is-scrolled .hero-scrollhint { opacity: 0; transition-duration: .25s; }
@keyframes scrollhint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* пока подсказка видна, фразы нарратива не мешают ей: первая фраза стартует с tp ≥ .16 (см. script.js) */
.hero-asm__copy { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 4; pointer-events: none; }
.hero-asm__copy .hero__copy { max-width: 40%; pointer-events: auto; }
.hero-asm .hero__title { font-size: clamp(36px, 3.9vw, 62px); margin-bottom: 20px; }
.hero-asm .hero__title .line:nth-child(3) { font-size: .5em; line-height: 1.2; margin-top: .35em; }
.hero-asm .hero__lead { font-size: clamp(15px, 1.05vw, 17px); margin-bottom: 24px; max-width: 30em; }
.hero-asm .checks { margin-top: 22px; gap: 8px 20px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.hero-asm .check { width: 18px; height: 18px; opacity: .7; }
.hero-asm .check::after { left: 6px; top: 3px; width: 4px; height: 8px; }
/* крупная типографика: back — под канвасом (фигура перекрывает), front — над */
.hero-display { position: absolute; z-index: 1; pointer-events: none; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.03em; line-height: .9; white-space: nowrap; }
.hero-display--back { right: 2vw; top: 6vh; font-size: clamp(120px, 19vw, 330px); color: rgba(242, 237, 228, .16); }
.hero-display--front { z-index: 3; right: 3vw; top: 52vh; font-size: clamp(44px, 5.4vw, 96px); color: var(--cream); text-align: right; }
.hero-display--front span { display: block; }
.hero-display--front span + span { color: var(--accent); }
.hero-grain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .045; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-asm .assembly__stage--fallback { display: none; }
.frag { position: absolute; border-radius: 6px; background: var(--card); border: 1px solid var(--line); will-change: transform, opacity; }
.frag--solid { background: var(--cream); border-color: var(--cream); }
.frag--khaki { background: var(--khaki); border-color: var(--khaki); }
.frag--frame { background: transparent; border: 1px solid var(--line); border-radius: 14px; }
.assembly__grime { position: absolute; inset: -2%; border-radius: 16px; pointer-events: none; --wipe: 0%;
  background: rgba(12, 12, 13, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .66 0 0 0 0 .58 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode: multiply; opacity: .85; clip-path: inset(0 0 0 var(--wipe)); }
/* 4 фразы — внизу стейджа, над всем */
/* заголовок-фраза слева от статуи: крупный курсивный serif в 2 строки, полностью непрозрачный.
   Две строки-слота: верхний — предыдущая фраза (гаснет до .25 и висит, пока новая не проявится), нижний — активная (1.0).
   Переключение и выдержка ≥ 1 с — в script.js (captions). */
.hero-asm .assembly__text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 6; display: grid; grid-template-rows: 2.3em 2.3em; align-content: center; row-gap: .5em;
  padding: 0 0 0 max(4%, calc((100% - var(--wrap, 1280px)) / 2)); pointer-events: none; font-size: clamp(30px, 3.6vw, 60px); }
.assembly__text p { grid-column: 1; grid-row: 2; align-self: end; margin: 0; max-width: 11em; font: 400 1em/1.12 var(--serif); font-style: italic; letter-spacing: -.02em; color: var(--cream); text-align: left;
  opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .5s var(--ease); text-shadow: 0 6px 30px rgba(0, 0, 0, .8); }
.assembly__text p.in { opacity: 1; transform: none; }
.assembly__text p.is-dim { grid-row: 1; opacity: .25; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.assembly__text p.is-out { grid-row: 1; opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.assembly__text em { font-style: italic; font-weight: 400; color: var(--accent); }
.assembly__text small { display: block; margin-top: .35em; font: 400 clamp(15px, 1.25vw, 20px)/1.3 var(--sans); font-style: normal; letter-spacing: 0; color: var(--muted); }
.assembly__text .assembly__text--final { font: 600 1.6em/1 var(--serif); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.hero-asm__scroll { display: none; }
.rule { height: 1px; background: var(--line); }
@media (max-width: 1080px) {
  .hero-asm__copy .hero__copy { max-width: 46%; }
  .hero-display--back { font-size: clamp(90px, 16vw, 200px); }
  .hero-display--front { font-size: clamp(32px, 4.6vw, 64px); }
}
@media (max-width: 767px) {
  /* Телефон: та же sticky-сцена, что на десктопе (сборка статуи из осколков по скроллу), но под портретный экран:
     статуя по центру, подписи сверху, финальный заголовок и кнопка снизу. Раньше здесь стейдж отключался (static) —
     на iPhone hero выглядел статичной картинкой. */
  .hero-asm { min-height: calc(100vh + 2600px + var(--hero-hold, 0px)); min-height: calc(100svh + 2600px + var(--hero-hold, 0px)); }
  .hero-asm__stage { position: sticky; top: 0; }
  .hero-display, .hero-grain { display: none; }
  .v-obj { left: 50%; top: 45%; height: 50vh; height: 50svh; }
  .hero-glow { left: 50%; top: 45%; width: 90vw; height: 70svh; }
  .hero-pedestal { display: block; left: 50%; top: calc(45% + 25svh); width: 42svh; height: 7svh; }
  .hero-scrollhint { left: 50%; bottom: 3svh; }
  .hero-asm .assembly__text { position: absolute; left: 0; right: 0; top: 76px; transform: none; display: grid; padding: 0 var(--gutter); font-size: clamp(22px, 6.4vw, 30px); }
  .assembly__text p { max-width: 12em; text-align: left; }
  .assembly__text p.is-dim, .assembly__text p.is-out { display: block; }
  .hero-asm__copy { top: auto; bottom: 5svh; transform: none; padding-inline: var(--gutter); }
  .hero-asm__copy .hero__copy { max-width: none; }
  .hero-asm .hero__title { font-size: clamp(30px, 8.6vw, 40px); margin-bottom: 16px; }
  .hero-asm .hero__lead, .hero-asm .checks { display: none; }
  .hero-asm .hero__actions { margin-top: 0; }
  .frag--lite { display: none; }
}
@media (max-width: 600px) {
  .hero-asm .hero__actions { flex-direction: row; gap: 12px 18px; }
  .hero-asm .btn--big { width: auto; padding: 16px 24px; font-size: 15px; }
}

/* ---------- Тизеры ---------- */
.teaser { padding: clamp(72px, 10vw, 140px) 0; }
.teaser__head { max-width: 30em; margin-bottom: 44px; }
.teaser__head .muted { margin-top: 18px; }
.teaser__more { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; margin-top: 28px; }
.teaser__more svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.teaser__more:hover svg { transform: translateX(4px); }
.teaser__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.teaser__grid--rev { grid-template-columns: 6fr 6fr; }
.teaser__pills { display: grid; gap: 12px; }
.teaser__pill { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; transition: transform .3s var(--ease); }
.teaser__pill:hover { transform: translateY(-4px); }
.teaser__pill b { display: block; margin-bottom: 4px; }
.teaser__pill span:not(.teaser__pill-n) { color: var(--muted); font-size: 14.5px; }
.teaser__pill-n { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 400 15px var(--serif); font-style: italic; }
.badge { display: inline-block; vertical-align: middle; margin-left: 6px; font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 5px 9px; border-radius: 999px; }
.process-row { display: flex; flex-wrap: wrap; gap: 22px 16px; }
.process-row__item { flex: 1 1 110px; text-align: center; }
.process-row__n { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 400 20px var(--serif); font-style: italic; }
.process-row__item span { display: block; font-size: 13.5px; color: var(--muted); }
.mini-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mini-case { display: block; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.mini-case:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.mini-case__art { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.mini-case__body { padding: 18px 20px 22px; }
.mini-case__tag { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: block; }
.mini-case__body h3 { font: 600 20px/1.3 var(--serif); }
.mini-case__art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .6s var(--ease); }
.mini-case:hover .mini-case__art img { transform: scale(1.04); }
.mini-case__badge { position: absolute; left: 12px; top: 12px; font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--cream); color: var(--black); }
.mini-case__badge--demo { background: rgba(12, 12, 13, .78); color: var(--cream); }
.mini-case--soon { opacity: .85; }
.mini-case__art--soon { display: grid; place-items: center; background: var(--black-2); color: var(--cream); font: 400 clamp(22px, 2.2vw, 30px)/1.1 var(--serif); font-style: italic; text-align: center; padding: 20px; }
.mini-case__real { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--black); color: var(--cream); font: 600 11px/1.2 var(--sans); letter-spacing: .06em; }
.mini-case__price { margin-top: 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.mini-case__price b { font: 600 17px/1.2 var(--serif); color: var(--black); }
.mini-case__price span { font-size: 12px; color: var(--muted); }
.mini-case__feats { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.mini-case__feats li { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.mini-case__feats li::before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 1px; background: currentColor; }
.mini-case__note { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.case-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.case-hero__actions { margin-top: 26px; }
.case-demo-badge { display: inline-block; margin-top: 18px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--amber); color: var(--cream); font-size: 14px; }
.case-demo-badge--real { border-color: var(--line); color: var(--muted); }
.case-note { margin-top: 18px; padding: 16px 18px; border-left: 2px solid var(--amber); color: var(--muted); font-size: 15px; }
.price-chips { display: grid; gap: 12px; }
.price-chip { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: transform .3s var(--ease); }
.price-chip:hover { transform: translateX(6px); }
.price-chip--accent { background: var(--fg); color: var(--bg); }
.price-chip__name { font-weight: 600; }
.price-chip__price { font: 400 22px/1 var(--serif); font-style: italic; white-space: nowrap; }
@media (max-width: 900px) {
  .teaser__grid, .teaser__grid--rev { grid-template-columns: 1fr; gap: 32px; }
  .mini-cases { grid-template-columns: 1fr; }
}

/* ---------- Drag-to-compare ---------- */
.cmp-section { padding: clamp(72px, 10vw, 140px) 0; }
.cmp { position: relative; aspect-ratio: 16 / 9; max-height: 640px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); user-select: none; --pos: 50%; }
.cmp__pane { position: absolute; inset: 0; overflow: hidden; }
.cmp__pane--after { clip-path: inset(0 0 0 var(--pos)); }
.cmp__label { position: absolute; top: 18px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; }
.cmp__pane--before .cmp__label { left: 18px; background: rgba(0, 0, 0, .08); color: #666; }
.cmp__pane--after .cmp__label { right: 18px; background: var(--cream); color: var(--black); }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--cream); transform: translateX(-50%); pointer-events: none; }
.cmp__handle::after { content: "⇔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: var(--cream); color: var(--black); display: grid; place-items: center; font-size: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
/* «типовой» макет: сознательно узнаваемый конструкторский стиль — системный шрифт, фото в скруглённой рамке,
   прямоугольная кнопка, сетка одинаковых карточек с line-art иконками */
.tpl { background: #f4f4f4; color: #444; font-family: Arial, Helvetica, sans-serif; padding: 3% 4%; display: grid; grid-template-rows: auto 1fr; gap: 3%; }
.tpl__nav { display: flex; gap: 22px; align-items: center; font-size: 13px; color: #555; padding-top: 30px; }
.tpl__nav b { margin-right: auto; font-size: 15px; font-weight: 700; color: #333; }
.tpl__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; align-content: start; }
.tpl__col { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 10px; }
.tpl__img { border: 1px solid #ddd; border-radius: 4px; padding: 4px; background: #fafafa; margin-bottom: 10px; }
.tpl__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.tpl__col h3 { font: 700 clamp(12px, 1.25vw, 16px)/1.3 Arial, sans-serif; color: #333; margin-bottom: 6px; }
.tpl__col p { font-size: clamp(10px, 1vw, 13px); color: #777; margin-bottom: 10px; line-height: 1.5; }
.tpl__btn { display: inline-block; padding: 8px 16px; background: #5b7fa6; color: #fff; font-size: clamp(10px, 1vw, 13px); border-radius: 5px; }
/* «наш» макет: фото на весь блок, тёмный градиент снизу, курсивный заголовок Playfair, одна скруглённая CTA в янтарном */
.prm { background: var(--black); color: var(--cream); }
.prm__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.prm__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 13, .15) 0%, rgba(12, 12, 13, .35) 45%, rgba(12, 12, 13, .92) 100%); }
.prm__nav { position: absolute; left: 4%; right: 4%; top: 30px; display: flex; gap: 22px; align-items: center; font: 500 13px/1 var(--sans); padding-top: 26px; }
.prm__nav b { margin-right: auto; font: 600 18px/1 var(--serif); font-style: italic; }
.prm__nav span { opacity: .75; }
.prm__copy { position: absolute; right: 5%; bottom: 7%; max-width: 46%; }   /* асимметрично: один крупный элемент справа, остальное — поддержка */
.prm__copy h3 { font: 400 clamp(26px, 4.2vw, 60px)/.98 var(--serif); font-style: italic; letter-spacing: -.03em; margin-bottom: 14px; }
.prm__copy h3 em { font-style: italic; color: var(--amber); }
.prm__copy p { font-size: clamp(11px, 1.05vw, 14px); color: rgba(242, 237, 228, .6); margin-bottom: 18px; letter-spacing: .02em; }
.prm__copy .btn { padding: clamp(12px, 1.4vw, 20px) clamp(20px, 2.6vw, 36px); font-size: clamp(12px, 1.3vw, 17px); }
@media (max-width: 700px) {
  .cmp { aspect-ratio: 4 / 3; border-radius: 16px; }
  .cmp__handle::after { width: 44px; height: 44px; }
  .tpl__nav span, .prm__nav span { display: none; }
  .tpl__col p { display: none; } .tpl__grid { grid-template-columns: repeat(2, 1fr); } .tpl__col:last-child { display: none; }
  .prm__copy { max-width: 62%; }
}

/* ---------- Страницы: шапка страницы ---------- */
.page-hero { padding: clamp(96px, 14vh, 160px) 0 clamp(48px, 7vw, 80px); }
.page-hero__lead { margin-top: 22px; max-width: 40em; font-size: clamp(17px, 1.3vw, 19px); color: var(--muted); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .06em; color: var(--muted); margin-bottom: 20px; }
.crumbs a:hover { color: var(--fg); }

/* ---------- Разделители ---------- */
.shape-divider { display: block; width: 100%; line-height: 0; overflow: hidden; }
.shape-divider svg { display: block; width: 100%; height: clamp(46px, 7vw, 96px); }
.shape-divider--d2l { background: var(--black); }
.shape-divider--d2l path { fill: var(--cream); }
.shape-divider--l2d { background: var(--cream); }
.shape-divider--l2d path { fill: var(--black); }
.zigzag { position: relative; height: clamp(28px, 4vw, 46px); width: 100%; }
.zigzag--l2d { background: var(--cream); }
.zigzag--l2d::after { content: ""; position: absolute; inset: 0; background: var(--black); clip-path: polygon(0% 100%, 4% 0%, 8% 100%, 12% 0%, 16% 100%, 20% 0%, 24% 100%, 28% 0%, 32% 100%, 36% 0%, 40% 100%, 44% 0%, 48% 100%, 52% 0%, 56% 100%, 60% 0%, 64% 100%, 68% 0%, 72% 100%, 76% 0%, 80% 100%, 84% 0%, 88% 100%, 92% 0%, 96% 100%, 100% 0%, 100% 100%); }
.diagonal-top { clip-path: polygon(0 clamp(24px, 4vw, 56px), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * clamp(24px, 4vw, 56px)); padding-top: calc(clamp(72px, 10vw, 140px) + clamp(24px, 4vw, 56px)) !important; }

/* ---------- Секции ---------- */
.section { padding: clamp(80px, 11vw, 150px) 0; }

/* Контакты */
.contacts__links { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.big-link { display: block; padding: 36px 0; border-bottom: 1px solid var(--line); }
.big-link + .big-link { padding-left: 40px; border-left: 1px solid var(--line); }
.big-link__label { display: block; color: var(--muted); font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
.big-link__value { display: block; font: 600 clamp(28px, 3.6vw, 54px)/1.1 var(--serif); letter-spacing: -.01em; transition: color .25s, font-style .25s; overflow-wrap: anywhere; }
.big-link:hover .big-link__value { font-style: italic; color: var(--accent); }
.contacts__note { margin-top: 28px; }
.contacts-page__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.contacts-extra { display: grid; gap: 16px; }
.contacts-extra__item { padding: 24px 26px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.contacts-extra__item h3 { font: 600 20px var(--serif); margin-bottom: 8px; }
.contacts-extra__item p { color: var(--muted); font-size: 15px; }

/* Таймлайн */
.timeline { position: relative; margin-top: 8px; }
.timeline::before { content: ""; position: absolute; left: 27px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.timeline__progress { position: absolute; left: 27px; top: 6px; width: 1px; height: calc(var(--progress, 0) * 100%); background: var(--fg); transition: height .15s linear; }
.timeline__item { position: relative; padding: 0 0 56px 84px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; font: 400 20px var(--serif); font-style: italic; color: var(--muted); transition: background .3s, border-color .3s, color .3s; z-index: 1; }
.timeline__item.is-lit .timeline__dot { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.timeline__date { display: block; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.timeline__item h3 { font: 600 26px/1.25 var(--serif); margin-bottom: 10px; }
.timeline__item p { color: var(--muted); max-width: 40em; }

/* Тарифы: лестница */
.stairs { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; margin-top: 24px; }
.stair { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 28px 26px 26px; border-top: 1px solid var(--fg); border-left: 1px solid var(--line); background: var(--card); transition: transform .3s var(--ease); }
.stair:hover { transform: translateY(-6px); }
.stair--1 { min-height: 250px; border-left: 0; background: transparent; }
.stair--2 { min-height: 320px; }
.stair--3 { min-height: 400px; border-top-width: 3px; }
.stair--4 { min-height: 470px; }
.stair h3 { font: 600 22px/1.2 var(--serif); }
.stair__price { font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); font-style: italic; color: var(--accent); margin-top: 12px; white-space: nowrap; }
.stair__time { font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-top: 10px; }
.stair__desc { color: var(--muted); font-size: 15px; margin-top: 16px; }
.stair--1 h3 { font-size: 18px; }
.stair--1 .stair__price { font-size: 26px; }
.stair__link { align-self: flex-start; font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--fg); transition: background .25s, color .25s; }
.stair__link:hover { background: var(--fg); color: var(--bg); }
.stair__link--solid { background: var(--amber); border-color: var(--amber); color: var(--black); }
.stair__link--solid:hover { background: var(--amber-hover); border-color: var(--amber-hover); color: var(--black); }
.stair__flag { position: absolute; top: -14px; left: 24px; background: var(--fg); color: var(--bg); font: 600 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; }
.flagship { position: relative; overflow: hidden; margin-top: 28px; border-radius: 28px; background: var(--black); color: var(--cream); display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding: clamp(36px, 6vw, 80px); border: 1px solid rgba(242, 237, 228, .2); }
.s-dark .flagship { background: var(--cream); color: var(--black); }
.flagship__title { font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.flagship__price { font: 600 clamp(48px, 7vw, 104px)/1 var(--serif); letter-spacing: -.02em; margin: 18px 0 20px; white-space: nowrap; }
.flagship__price em { font-weight: 400; font-style: italic; opacity: .6; }
.flagship__note { opacity: .7; max-width: 26em; margin-bottom: 36px; }
.flagship__side { align-self: end; }
.flagship__lead { font: 400 clamp(22px, 2vw, 28px)/1.35 var(--serif); font-style: italic; margin-bottom: 28px; }
.flagship__caps { display: flex; flex-wrap: wrap; gap: 10px; }
.flagship__caps li { border: 1px solid currentColor; opacity: .8; border-radius: 999px; padding: 9px 16px; font-size: 14px; }
.promo { margin-top: clamp(64px, 8vw, 110px); display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }
.promo__head .muted { margin-top: 14px; max-width: 22em; }
.promo__row { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 24px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--line); transition: padding .3s var(--ease); }
.promo__row:last-child { border-bottom: 1px solid var(--line); }
.promo__row:hover { padding-left: 12px; }
.promo__name { font: 600 20px var(--serif); }
.promo__text { color: var(--muted); font-size: 15px; }
.promo__price { font: 400 22px/1.2 var(--serif); font-style: italic; color: var(--accent); white-space: nowrap; }
.compare { margin-top: clamp(64px, 8vw, 110px); }
.compare__head { max-width: 32em; margin-bottom: 32px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 15px; }
.compare-table th, .compare-table td { padding: 16px 20px; text-align: left; border-top: 1px solid var(--line); white-space: nowrap; }
.compare-table thead th { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border-top: none; }
.compare-table tbody th { font-weight: 500; white-space: normal; min-width: 220px; }
.compare-table td { text-align: center; color: var(--muted); }
.compare-table thead th:first-child, .compare-table tbody th { text-align: left; }
.compare-table .col-popular { background: rgba(127, 127, 127, .08); }
.compare-table .yes { color: var(--fg); font-weight: 700; }
.compare-table .no { opacity: .3; }

/* ---------- Услуги: sticky-панели ---------- */
.stack { position: relative; }
.stack .panel.s-light:nth-child(even) { --bg: var(--cream-2); --card: var(--cream); }
.panel { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; border-radius: 48px 48px 0 0; padding: clamp(56px, 9vh, 96px) 0 clamp(72px, 9vh, 110px); box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .5); display: flex; align-items: center; }
.panel__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; width: 100%; }
.panel__kicker { font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.panel h2 { font: 600 clamp(36px, 5vw, 72px)/1.04 var(--serif); letter-spacing: -.02em; margin-bottom: 20px; }
.panel__meta { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 22px; }
.panel__meta b { display: block; font: 400 24px/1 var(--serif); font-style: italic; }
.panel__meta span { font: 600 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 6px; }
.panel__lead { max-width: 36em; color: var(--muted); margin-bottom: 26px; }
.panel__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 30px; }
.panel__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.panel__list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.panel__list svg circle { fill: none; stroke: currentColor; stroke-width: 1.2; }
.panel__list svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.geo { width: 100%; max-width: 440px; margin: 0 auto; display: block; height: auto; }
.geo * { vector-effect: non-scaling-stroke; }
.geo .st { fill: none; stroke: currentColor; stroke-width: 1.2; }
.geo .st--acc { stroke: var(--accent); }
.geo .fl { fill: currentColor; }
.geo .fl--acc { fill: var(--accent); }
.geo .dash { stroke-dasharray: 4 6; }
.geo .spin { transform-origin: 200px 200px; animation: spin 40s linear infinite; }
.geo .spin--r { animation-direction: reverse; animation-duration: 60s; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .panel { position: static; min-height: 0; border-radius: 32px; margin: 12px var(--gutter) 0; padding: 40px 0; box-shadow: none; }
  .panel .wrap { padding: 0 24px; }
  .panel__grid { grid-template-columns: 1fr; gap: 28px; }
  .panel__list { grid-template-columns: 1fr; }
  .geo { max-width: 260px; }
}

/* ---------- Портфолио / кейсы ---------- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.case-grid .mini-case, .mini-cases .mini-case { display: flex; flex-direction: column; }
.case-grid .mini-case__art, .mini-cases .mini-case__art { flex: none; }
.case-grid .mini-case__body, .mini-cases .mini-case__body { flex: 1; min-height: 140px; }
.case-grid .mini-case--wide { grid-column: span 2; }
.case-grid .mini-case--wide .mini-case__art { aspect-ratio: auto; height: 0; padding-bottom: calc(37.5% - 10px); }   /* высота как у соседней 4/3-карточки одной колонки */
.case-grid .mini-case--wide .mini-case__art img { position: absolute; inset: 0; }
@media (max-width: 900px) { .case-grid .mini-case--wide { grid-column: auto; } .case-grid .mini-case--wide .mini-case__art { height: auto; padding-bottom: 0; aspect-ratio: 4 / 3; } }   /* все карточки одной высоты, включая «Скоро» с примечанием */
/* «Что мы умеем» — реальные тарифы */
.skills { padding: clamp(64px, 9vw, 120px) 0; }
.skills__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 36px 0 28px; }
.skills__list li { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.skills__name { font: 600 18px/1.2 var(--serif); }
.skills__price { font: 400 24px/1 var(--serif); font-style: italic; color: var(--accent); }
.skills__desc { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 1080px) { .skills__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .skills__list { grid-template-columns: 1fr; } }
.art { position: absolute; inset: 0; }
.art--1 { background: linear-gradient(155deg, #f2ede4 0%, #a39e8c 55%, #2a2925 100%); }
.art--2 { background: linear-gradient(155deg, #d9d2c4 0%, #6f6b5c 50%, #0c0c0d 100%); }
.art--3 { background: linear-gradient(200deg, #e6dfd3 0%, #8b8674 45%, #161618 100%); }
.art::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(242, 237, 228, .35); border-radius: 50%; }
.case-hero { padding: clamp(96px, 14vh, 160px) 0 0; }
.case-hero__tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.case-hero__tags span { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); }
.case-hero__art { margin-top: 40px; aspect-ratio: 21/9; border-radius: 24px; position: relative; overflow: hidden; }
.case-section { padding: clamp(48px, 7vw, 88px) 0; }
.case-section + .case-section { border-top: 1px solid var(--line); }
.case-section__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; }
.case-section h2 { font: 600 clamp(26px, 3vw, 38px)/1.15 var(--serif); }
.case-section p { color: var(--muted); max-width: 42em; }
.case-section p + p { margin-top: 14px; }
.case-list { display: grid; gap: 20px; }
.case-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.case-list li b { font: 400 22px/1 var(--serif); font-style: italic; color: var(--accent); }
.case-list li p { margin: 0; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-stat { padding: 28px 26px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.case-stat b { display: block; font: 600 clamp(34px, 4vw, 48px)/1 var(--serif); margin-bottom: 8px; }
.case-stat span { color: var(--muted); font-size: 14.5px; }
.case-cta { text-align: center; padding: clamp(64px, 9vw, 130px) clamp(24px, 6vw, 60px); }
.case-cta h2 { font: 600 clamp(30px, 4.4vw, 56px)/1.1 var(--serif); letter-spacing: -.02em; margin-bottom: 20px; }
.case-cta p { max-width: 34em; margin: 0 auto 30px; }
.case-nav { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; font-size: 14px; border-top: 1px solid var(--line); }
.case-nav a:hover { font-style: italic; }
.about-manifesto { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; padding: clamp(64px, 9vw, 120px) 0; }
.about-manifesto p.lead { font: 400 clamp(24px, 2.6vw, 34px)/1.35 var(--serif); }
.about-manifesto p.lead em { font-style: italic; color: var(--accent); }
.about-manifesto .cols { display: grid; gap: 24px; }
.about-manifesto .cols p { color: var(--muted); }
.founder { display: block; padding-block: clamp(64px, 9vw, 120px); }
.founder > div { max-width: 52em; }
.founder__quote { font: 400 clamp(22px, 2.4vw, 30px)/1.45 var(--serif); font-style: italic; margin-bottom: 20px; }
.founder__name { font-weight: 600; }
.founder__role { color: var(--muted); font-size: 14.5px; }

/* ---------- Футер ---------- */
.footer { padding-top: clamp(56px, 7vw, 88px); font-size: 14px; border-top: 1px solid var(--line); }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer .logo { margin-bottom: 14px; }
.footer__tagline { max-width: 26em; color: var(--muted); }
.footer__col-title { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 18px; color: var(--muted); }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col a:hover { font-style: italic; }
.footer__credit { padding: 0 0 26px; font-size: 11.5px; line-height: 1.55; color: var(--muted); opacity: .72; max-width: 62em; }
.footer__credit a { text-decoration: underline; text-decoration-color: rgba(127, 127, 127, .4); text-underline-offset: 2px; }
.footer__credit a:hover { opacity: 1; text-decoration-color: currentColor; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; padding-block: 22px; border-top: 1px solid var(--line); color: var(--muted); }

/* ---------- Адаптив ---------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .build { max-width: 560px; margin: 0 auto; width: 100%; }
  .stairs { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .stair { min-height: 0 !important; }
  .stair--1 { padding-left: 26px; border-left: 1px solid var(--line); background: var(--card); }
  .stair--3, .stair--4 { margin-top: 28px; }
  .flagship { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 900px) {
  .promo, .about-manifesto, .founder, .case-section__grid, .contacts-page__grid { grid-template-columns: 1fr; gap: 28px; }
  .case-grid { grid-template-columns: 1fr; }
  .case-stats { grid-template-columns: 1fr; }
  .promo__row { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .promo__text { grid-column: 1 / -1; grid-row: 2; }
  .contacts__links { grid-template-columns: 1fr; }
  .big-link + .big-link { padding-left: 0; border-left: 0; }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 4px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero { padding-top: 40px; }
  .btn--big { width: 100%; padding: 18px 24px; }
  .hero__actions { flex-direction: column; align-items: stretch; text-align: center; }
  .link-quiet { align-self: center; }
  .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 48px; font-size: 14px; }
  .checks li { align-items: flex-start; }
  .build__tag { font-size: 12px; padding: 8px 14px; }
  .build__tag--a { left: -6px; }
  .build__tag--b { right: -4px; }
  .stairs { grid-template-columns: 1fr; }
  .stair, .stair--1 { padding: 24px 20px; border: 1px solid var(--line); border-top: 1px solid var(--fg); }
  .stair--3, .stair--4 { margin-top: 0; }
  .stair + .stair { margin-top: 12px; }
  .stair--3 { margin-top: 30px !important; }
  .stair--1 { flex-direction: row; align-items: center; gap: 16px; }
  .stair--1 .stair__desc { display: none; }
  .stair__price, .flagship__price { white-space: normal; }
  .flagship { border-radius: 22px; padding: 32px 22px; }
  .flagship .btn { width: 100%; }
  .case-hero__art { aspect-ratio: 4/3; }
  .timeline::before, .timeline__progress { left: 21px; }
  .timeline__item { padding-left: 60px; padding-bottom: 44px; }
  .timeline__dot { width: 44px; height: 44px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  /* «Уменьшение движения» (в т.ч. iOS): убираем зацикленные и большие смещения, но НЕ отключаем анимации целиком —
     контент по-прежнему проявляется по скроллу, только мягким появлением (opacity), без выезда/сдвига. */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
  .ticker__track, .hero-scrollhint i { animation: none; }
  .js .line > span, .js .reveal-lines.in .line > span, .js .is-ready .hero__title .line > span { transform: none; }
  .js .line > span { opacity: 0; transition: opacity .6s var(--ease); }
  .js .is-ready .hero__title .line > span, .js .reveal-lines.in .line > span { opacity: 1; }
  .js [data-hero-fade], .hero-asm .hero__title, .hero-asm .hero__actions, .hero-asm .checks, .assembly__text p { transform: none !important; transition-property: opacity !important; transition-duration: .6s !important; }
  .timeline__progress { transition: none; }
}

/* ---------- Направления (вместо бегущей строки) ---------- */
/* строка доверия — тонкая полоса под hero */
.trust { border-top: 1px solid var(--line); }
.trust__list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 36px; padding-top: 18px; padding-bottom: 18px; font-size: 13px; font-weight: 500; color: var(--muted); }
.trust__list li { display: flex; align-items: center; gap: 10px; }
.trust__list .check { width: 18px; height: 18px; opacity: .7; }
.trust__list .check::after { left: 6px; top: 3px; width: 4px; height: 8px; }
.trust__more { margin-left: auto; }
.trust__more .link-quiet { color: var(--fg); font-size: 14px; }
@media (max-width: 767px) { .trust__more { margin-left: 0; } }
.dirs { border-block: 1px solid var(--line); padding: clamp(36px, 5vw, 64px) 0; }
.dirs__inner { display: grid; grid-template-columns: auto 1fr; gap: 24px clamp(32px, 5vw, 80px); align-items: baseline; }
.dirs .kicker { margin: 0; white-space: nowrap; }
.dirs__list { display: flex; flex-wrap: wrap; gap: 12px 12px; }
.dirs__list li { font: 400 clamp(17px, 1.5vw, 22px)/1 var(--serif); font-style: italic; color: var(--fg); padding: 14px 24px; border: 1px solid var(--line); border-radius: 999px; transition: border-color .3s, color .3s; }
.dirs__list li:hover { border-color: var(--fg); }
@media (max-width: 900px) { .dirs__inner { grid-template-columns: 1fr; gap: 18px; } .dirs__list li { padding: 11px 18px; } }

/* ---------- Контакты в шапке: Telegram + телефон (вместо боковой метки TELEGRAM) ---------- */
.hdr-contact { position: fixed; z-index: 75; top: 10px; right: 64px; display: flex; align-items: center; gap: 4px; color: var(--cream); }
.hdr-contact a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; color: inherit; opacity: .85; transition: opacity .25s; }
.hdr-contact a:hover { opacity: 1; }
.hdr-contact svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.hdr-contact__tg svg { fill: currentColor; stroke: none; }
.hdr-contact__tel span { display: none; font: 500 13px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; }
.is-menu-open .hdr-contact { opacity: 0; pointer-events: none; }
@media (min-width: 520px) { .hdr-contact__tel span { display: inline; } }
@media (min-width: 1024px) {
  .hdr-contact { top: 14px; right: calc(var(--rail) + 22px); padding: 0 8px 0 14px; border-radius: 999px; background: rgba(12, 12, 13, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }   /* на десктопе шапки нет — контакты в правом верхнем углу, тёмная плашка читается поверх любых секций и фото */
}