/* ============================================================
   Delba · сайт студии · дизайн-система
   Слои: токены → база → типографика → сцена ленты → шапка и меню →
         кнопки и элементы → секции (по блокам библиотеки B-xx) →
         интро, курсор, переходы → адаптив → уменьшенная анимация
   Язык: тёмная ювелирная студия, шампанское золото, Unbounded 300 крупно,
   Inter для текста, волосяные линии, стекло там, где под ним живёт лента.
   ============================================================ */

:root {
  --bg: #070608;
  --bg-2: #0c0b0e;
  --bg-3: #121116;
  --surface: rgba(17, 16, 20, 0.8);
  --surface-2: rgba(24, 22, 27, 0.86);
  --surface-solid: #121116;
  --line: rgba(244, 241, 234, 0.08);
  --line-2: rgba(244, 241, 234, 0.14);
  --line-3: rgba(244, 241, 234, 0.24);
  --text: #f4f1ea;
  --text-2: #c9c5bd;
  --text-dim: #9d99a3;
  --text-faint: rgba(244, 241, 234, 0.42);
  --gold: #ebe0b2;
  --gold-bright: #f6ecc2;
  --gold-deep: #b99c5f;
  --gold-dim: rgba(235, 224, 178, 0.34);
  --gold-soft: rgba(235, 224, 178, 0.09);
  --gold-grad: linear-gradient(105deg, #b99c5f 0%, #f6ecc2 38%, #ebe0b2 58%, #a98d52 100%);
  --cold: #b6c3d6;
  --red: #d2453f;
  --green: #3aa96a;
  --ink: #0b0a0c;

  --font: "Unbounded", "Arial", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Arial", sans-serif;

  --pad-x: clamp(20px, 5.6vw, 104px);
  --max-w: 1520px;
  --gap: clamp(16px, 1.6vw, 28px);
  --r-card: 22px;
  --r-panel: 32px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 220ms;
  --t-base: 560ms;
  --t-slow: 900ms;
  --shift: 28px;

  --header-h: 88px;
  --sec-pad: clamp(72px, 7vw, 112px);   /* между секциями ~200 px на 1440: воздух есть, пустых экранов нет */
  color-scheme: dark;
}

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-text); font-weight: 400; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-feature-settings: "ss01", "cv11";
}
[hidden] { display: none !important; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
table { border-collapse: collapse; width: 100%; }
figure { margin: 0; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

.container {
  max-width: var(--max-w); margin-inline: auto;
  padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
}
section { position: relative; padding-block: var(--sec-pad); }
section.tight { padding-block: clamp(48px, 5.5vw, 88px); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.sec-head, .hero-copy, .card, .form, .after, .rung, .tl, .entry, .case-body, .decision, .rating, .demo-main, .contacts-list, .contacts-list .item, .notfound .inner, .footer-contacts, .footer-entity, .hero-price, .now-card, .step, .sample-cap, .form-head, .field, .crit, .before-after > div, .inout .big, .sit { grid-template-columns: minmax(0, 1fr); }
h1, h2, h3, h4 { margin: 0; font-weight: 300; text-wrap: balance; overflow-wrap: break-word; }
h1, h2 { hyphens: manual; }

/* ---------- типографика ---------- */
h1, h2, h3, h4, .pill, .price, .num, .step-n, .rung-n, .tl-when, .sit-q, .big b, .qn, .pos, .val, .how-n, .sec-idx, .footer-phone, .menu-big a, .entry-n { font-family: var(--font); }
.h1 { font-size: clamp(36px, 4.7vw, 82px); line-height: 1.02; letter-spacing: -0.028em; font-weight: 300; }
.h2 { font-size: clamp(30px, 3.7vw, 62px); line-height: 1.06; letter-spacing: -0.022em; font-weight: 300; }
.h3 { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.25; letter-spacing: -0.01em; font-weight: 400; }
.lead { font-size: clamp(17px, 1.22vw, 20px); line-height: 1.58; color: var(--text-2); max-width: 36em; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 13px; line-height: 1.5; }
.gold { color: var(--gold); }
.gold-text { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-text); font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
}
.eyebrow::before { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.list-label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }

/* заголовок секции: индекс слева, заголовок и лид справа */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  max-width: 980px; margin-bottom: clamp(40px, 5vw, 80px); position: relative;
}
.sec-head .lead { max-width: 38em; }
.sec-idx {
  display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 400; letter-spacing: 0.08em;
  color: var(--gold);
}
.sec-idx::after { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, var(--gold-dim), transparent); }
.sec-idx span { color: var(--text-faint); }

/* ---------- сцена ленты ---------- */
#line-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none; display: block;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
html.has-webgl #line-canvas { opacity: 1; }
html.no-webgl #line-canvas { display: none; }
/* без WebGL: на месте сцены — снимок ленты */
html.no-webgl body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("img/ribbon-poster.webp") center / cover no-repeat;
  /* снимок не знает, где текст, поэтому он заметно тише живой сцены */
  opacity: 0.32;
}
#page { position: relative; z-index: 1; }
/* мягкая тень под текстом поверх золота — страховка читаемости в любой фазе движения полотен */
/* тонкий контур под мелким текстом поверх сцены; размытая тень не используется —
   она ложилась на полотно тёмным облаком по форме букв и читалась как провал в ткани */
/* читаемость обеспечивают положение и яркость сцены, маска под текстом и непрозрачность поверхностей; тени под текстом нет */
/* юридические страницы: без ленты, только спокойный фон */
html:has(.legal-doc) #line-canvas, html:has(.legal-doc) body::after { opacity: 0 !important; }
/* зерно плёнки и виньетка поверх всего — живая фактура кадра */
.grain {
  position: fixed; inset: -80px; z-index: 60; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain 0.5s steps(4) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-24px, 16px); } 50% { transform: translate(18px, -22px); } 75% { transform: translate(-14px, -12px); } 100% { transform: translate(22px, 18px); } }
.vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }

/* ---------- шапка ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--bg); }
#site-header {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 30;
  height: var(--header-h);
  transition: transform var(--t-base) var(--ease), height var(--t-base) var(--ease), background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  border-bottom: 1px solid transparent;
}
/* содержимое шапки — в той же сетке, что и контент: на широких экранах логотип и кнопка стоят по краям контейнера */
.header-in { max-width: var(--max-w); margin-inline: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px)); }
#site-header.is-compact {
  height: 64px; background: rgba(7, 6, 8, 0.66); border-bottom-color: var(--line);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
#site-header.is-hidden { transform: translateY(-100%); }
body.menu-open #site-header { transform: none; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
#page { padding-top: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 32px; height: 30px; transition: transform 0.9s var(--ease); }
.brand:hover .brand-mark { transform: rotate(120deg); }
.brand-word { font-family: var(--font); font-size: 15px; font-weight: 400; letter-spacing: 0.04em; }
.nav { display: flex; gap: clamp(20px, 2.4vw, 40px); align-items: center; }
.nav > a, .nav-sub-btn { position: relative; font-size: 14px; font-weight: 400; color: var(--text-dim); padding: 8px 0; transition: color var(--t-fast) var(--ease); }
.nav > a:hover, .nav > a[aria-current="page"] { color: var(--text); }
.nav > a[aria-current="page"]::before, .nav-sub-btn[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--gold-dim);
}
/* перекат текста ссылки (motion.js оборачивает в .roll) */
.roll { display: inline-grid; overflow: hidden; vertical-align: top; line-height: 1.3; }
.roll > span { grid-area: 1 / 1; transition: transform 0.55s var(--ease); }
.roll > span + span { transform: translateY(105%); color: var(--text); }
a:hover > .roll > span:first-child, button:hover > .roll > span:first-child { transform: translateY(-105%); }
a:hover > .roll > span + span, button:hover > .roll > span + span { transform: translateY(0); }

.header-right { display: flex; align-items: center; gap: 12px; }
.btn-motion {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast);
}
.btn-motion:hover { color: var(--text); border-color: var(--gold-dim); background: var(--gold-soft); }
.btn-motion svg { width: 14px; height: 14px; }
.btn-motion .ico-play { display: none; }
html[data-motion="off"] .btn-motion .ico-pause { display: none; }
html[data-motion="off"] .btn-motion .ico-play { display: block; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--text); transition: transform 0.5s var(--ease), opacity var(--t-fast); }
.burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 26px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* выпадающее «Что делаем» */
.nav .has-sub { position: relative; }
.nav-sub-btn { display: inline-flex; align-items: center; gap: 6px; }
.nav-sub-btn svg { width: 10px; height: 10px; transition: transform var(--t-fast) var(--ease); }
.has-sub:hover .nav-sub-btn, .has-sub:focus-within .nav-sub-btn, .nav-sub-btn[aria-current="page"], .nav-sub-btn[aria-expanded="true"] { color: var(--text); }
.has-sub:hover .nav-sub-btn svg, .nav-sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sub {
  position: absolute; left: -26px; top: calc(100% + 14px); z-index: 5;
  display: grid; grid-template-columns: auto auto; gap: 4px 44px; padding: 22px 26px 24px; min-width: 540px;
  border-radius: 20px; background: rgba(12, 11, 14, 0.9); border: 1px solid var(--line-2);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s 0.35s;
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.is-open .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sub-col { display: grid; gap: 2px; align-content: start; }
.sub-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); padding: 4px 0 10px; }
.sub a { font-size: 15px; color: var(--text-dim); padding: 7px 0; white-space: nowrap; transition: color var(--t-fast), transform var(--t-fast) var(--ease); }
.sub a:hover, .sub a[aria-current="page"] { color: var(--text); transform: translateX(4px); }

/* мобильное меню: основные разделы, направления и отрасли компактно, кнопка заявки и контакты */
#menu {
  position: fixed; inset: 0; z-index: 25; background: rgba(7, 6, 8, 0.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 26px; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--header-h) + 12px) max(24px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-io), opacity 0.4s var(--ease), visibility 0s 0.8s;
}
body.menu-open #menu { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition-delay: 0s; }
#menu > * { transform: translateY(14px); opacity: 0; transition: transform 0.7s var(--ease), opacity 0.6s var(--ease); }
body.menu-open #menu > * { transform: none; opacity: 1; }
body.menu-open #menu > :nth-child(2) { transition-delay: 0.06s; } body.menu-open #menu > :nth-child(3) { transition-delay: 0.12s; } body.menu-open #menu > :nth-child(4) { transition-delay: 0.18s; }
.menu-main { display: grid; border-top: 1px solid var(--line); }
.menu-main a { font-family: var(--font); font-weight: 300; font-size: clamp(21px, 5.6vw, 28px); letter-spacing: -0.01em; line-height: 1.2; padding: 13px 0; border-bottom: 1px solid var(--line); }
.menu-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.menu-group { display: grid; gap: 2px; align-content: start; }
.menu-label { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.menu-group a { font-size: 15px; line-height: 1.35; color: var(--text-2); padding: 6px 0; }
.menu-group a:hover, .menu-group a:focus-visible, .menu-main a:hover { color: var(--gold-bright); }
#menu .menu-cta { padding: 16px 28px; font-family: var(--font-text); font-size: 15px; letter-spacing: 0.005em; align-self: flex-start; }
.menu-contacts { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.menu-phone { font-family: var(--font); font-weight: 300; font-size: 22px; letter-spacing: -0.01em; color: var(--text); }
.menu-links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }
.menu-links a { color: var(--gold); }
.menu-addr { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
@media (max-width: 340px) { .menu-groups { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 600px) { .menu-groups { gap: 18px 40px; } .menu-group a { font-size: 16px; } }

/* ---------- кнопки, ссылки, чипы ---------- */
.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 30px; border-radius: var(--r-pill);
  font-family: var(--font-text); font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap; letter-spacing: 0.005em;
  /* transform двигает скрипт «магнитной» кнопки: CSS-переход на нём же давал рывки */
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast);
  isolation: isolate; overflow: hidden;
}
.pill--gold { background: var(--gold-bright); color: var(--ink); }
.pill--gold::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 140% at var(--mx, 50%) var(--my, 120%), #fffaf0 0%, rgba(255, 250, 240, 0) 55%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.pill--gold:hover::before { opacity: 1; }
.pill--gold::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: translateX(-180%) skewX(-18deg);
}
.pill--gold:hover::after { animation: sheen 0.9s var(--ease) forwards; }
@keyframes sheen { to { transform: translateX(460%) skewX(-18deg); } }
.pill--ghost { border: 1px solid var(--line-3); color: var(--text); background: transparent; }
.pill--ghost:hover { border-color: var(--gold-dim); background: var(--gold-soft); }
.pill--sm { padding: 13px 22px; font-size: 14px; }
.pill[disabled] { opacity: 0.5; cursor: default; transform: none !important; }
.pill .pill-arrow { width: 14px; height: 14px; transition: transform 0.5s var(--ease); }
.pill:hover .pill-arrow { transform: translateX(3px); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; color: var(--gold); position: relative; }
.link-arrow::after { content: "→"; transition: transform 0.5s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }
.link-arrow::before { content: ""; position: absolute; left: 0; right: 1.4em; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease); opacity: 0.6; }
.link-arrow:hover::before { transform: scaleX(1); transform-origin: left; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

.glass {
  /* без backdrop-filter: размытие под каждой карточкой пересчитывалось на каждом кадре живого фона и роняло частоту кадров */
  background: rgba(17, 16, 20, 0.86); border: 1px solid var(--line); border-radius: var(--r-card);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--surface-solid); } }
.card { padding: clamp(24px, 2.2vw, 36px); display: grid; gap: 14px; align-content: start; min-width: 0; position: relative; }
.card h3 { font-size: clamp(18px, 1.35vw, 22px); line-height: 1.25; font-weight: 400; }
.card p { color: var(--text-dim); font-size: 15px; }
/* ссылка-карточка: золотая кромка, проявляющаяся от курсора */
.is-link { position: relative; transition: transform 0.7s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease); }
.is-link::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(246, 236, 194, 0.75), rgba(246, 236, 194, 0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.is-link:hover::after, .is-link:focus-visible::after { opacity: 1; }
.card.is-link:hover, .entry:hover { transform: translateY(-6px); background: var(--surface-2); }
.card ul.dots li { position: relative; padding-left: 18px; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.card ul.dots li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dim); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); font-size: 12px; font-weight: 400; letter-spacing: 0.03em; color: var(--text-dim); white-space: nowrap;
  background: rgba(7, 6, 8, 0.35);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.chip--live { color: var(--text-2); } .chip--live::before { background: var(--text-dim); }
/* состояние проекта, кроме «работает»: тихая строка над заголовком, без значков */
.case-state { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.chips .case-state { align-self: center; margin-right: 6px; }
@keyframes live { 70% { box-shadow: 0 0 0 6px rgba(58, 169, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(58, 169, 106, 0); } }
.chip--pre { border-color: rgba(235, 224, 178, 0.38); color: var(--gold); } .chip--pre::before { background: var(--gold); }
.chip--design::before { background: var(--text-faint); }
.chip--typical { border-style: dashed; white-space: normal; line-height: 1.4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.price-date { margin-top: 20px; font-size: 13px; color: var(--text-dim); max-width: 92ch; line-height: 1.6; }
.sec-action { margin-top: clamp(28px, 3vw, 44px); display: flex; }
.sec-action .pill { gap: 10px; }
.price-date a { white-space: nowrap; }
.note-strip { border-left: 1px solid var(--gold); padding: 4px 0 4px 20px; max-width: 64ch; color: var(--text-dim); font-size: 15px; }
.note-strip b { color: var(--text); font-weight: 400; }
.status-line { font-size: 13px; color: var(--text-dim); }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 80px); align-items: start; }
.two .sec-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 32px); }
.list-plain li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-dim); }
.list-plain li b { color: var(--text); font-weight: 400; }

/* хлебные крошки */
.crumbs { padding-top: 22px; position: relative; z-index: 2; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--text-faint); }
.crumbs li { display: inline-flex; align-items: center; gap: 12px; }
.crumbs li + li::before { content: ""; width: 14px; height: 1px; background: var(--line-3); }
.crumbs a { color: var(--text-dim); transition: color var(--t-fast); }
.crumbs a:hover { color: var(--text); }
.crumbs + section { padding-top: clamp(28px, 4vw, 56px) !important; }

/* ============================================================
   B-01…B-03 · hero
   ============================================================ */
.hero { padding-block: clamp(32px, 4vw, 64px) clamp(40px, 5vw, 80px); min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; }
.hero > .container { width: 100%; min-width: 0; }
.hero .grid { align-items: center; width: 100%; }
.hero-copy { grid-column: 1 / span 7; grid-row: 1; display: grid; gap: clamp(22px, 2.4vw, 36px); position: relative; z-index: 2; }
.hero-side { grid-column: 8 / span 5; grid-row: 1; min-height: min(72vh, 740px); position: relative; margin-right: calc(var(--pad-x) * -0.5); }
.hero .h1 { max-width: 12.5em; }
.hero .h1 br { display: none; }
@media (min-width: 901px) { .hero .h1 br { display: inline; } .hero:not(.hero--offer) .h1 { font-size: clamp(38px, 3.9vw, 60px); max-width: 12.6em; } }
.hero-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 760px; }
.hero-offers li + li { border-left: 1px solid var(--line); }
.hero-offers a { display: grid; gap: 4px; padding: 16px 18px 16px 0; position: relative; transition: color var(--t-fast); }
.hero-offers li + li a { padding-left: 18px; }
.hero-offers .ho-label { font-size: 12.5px; color: var(--text-dim); }
.hero-offers b { font-family: var(--font); font-weight: 300; font-size: clamp(17px, 1.35vw, 21px); letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.hero-offers .ho-term { font-size: 12px; color: var(--text-faint); }
.hero-offers i { position: absolute; right: 14px; top: 16px; font-style: normal; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.hero-offers a:hover i { opacity: 1; transform: none; }
.hero-offers a:hover b { color: var(--gold-bright); }
.hero-offers + .hero-facts { border-top: 0; padding-top: 0; margin-top: 0; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 10px 32px; padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-dim);
}
.hero-facts span { display: inline-flex; gap: 10px; align-items: center; min-width: 0; }
.hero-facts span::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); opacity: 0.8; flex: none; }
.hero-scroll {
  position: absolute; right: max(var(--pad-x), env(safe-area-inset-right, 0px)); bottom: 32px; z-index: 2;
  display: grid; justify-items: center; gap: 12px; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint);
}
.hero-scroll i { width: 1px; height: 54px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: drip 2.2s var(--ease-io) infinite; }
@keyframes drip { to { top: 110%; } }
.hero--offer .hero-copy { grid-column: 1 / span 8; }
.hero--offer .h1 { font-size: clamp(36px, 4.2vw, 72px); max-width: 13.5em; }
.hero-price {
  grid-column: 9 / span 4; grid-row: 1; display: grid; gap: 10px; align-self: end; padding: clamp(24px, 2.2vw, 34px);
}
.hero-price .eyebrow::before { display: none; }
.hero-price .price { font-size: clamp(28px, 2.6vw, 42px); line-height: 1.05; font-weight: 300; letter-spacing: -0.02em; white-space: nowrap; }
.hero-price .term { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.hero-price .term.faint { color: var(--text-faint); font-size: 13px; }

/* ============================================================
   B-05 направления · B-21 отрасли
   ============================================================ */
.entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); counter-reset: entry; }
/* строки карточек выровнены между собой: номер, заголовок, список, подпись начинаются на одной высоте */
@supports (grid-template-rows: subgrid) { .entry { grid-template-rows: subgrid; grid-row: span 4; } .entries--3 .entry { grid-row: span 5; } .entry .entry-arrow, .entry .entry-price { margin-top: 0; align-self: end; } }
.entries--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entry { display: grid; gap: 16px; padding: clamp(26px, 2.4vw, 40px); min-height: 300px; align-content: start; counter-increment: entry; overflow: hidden; }
.entry::before {
  content: counter(entry, decimal-leading-zero); font-family: var(--font); font-size: 12px; letter-spacing: 0.08em; color: var(--gold);
  display: block; margin-bottom: clamp(20px, 3vw, 56px);
}
.entry h3 { font-size: clamp(22px, 1.8vw, 30px); line-height: 1.12; letter-spacing: -0.015em; font-weight: 300; }
.entry .entry-what { font-size: 15px; color: var(--text-2); line-height: 1.55; }
.entry .entry-bounds { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; padding-top: 14px; border-top: 1px solid var(--line); }
.entry .entry-price { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.entry .entry-price b { font-family: var(--font); font-weight: 300; font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -0.01em; white-space: nowrap; }
.entry .entry-price span { font-size: 13px; color: var(--text-dim); }
.entry .entry-arrow { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: var(--text-dim); font-size: 13px; gap: 12px; }
.entry .entry-arrow b { font-weight: 300; color: var(--gold); font-size: 22px; transition: transform 0.6s var(--ease); }
.entry:hover .entry-arrow b { transform: translateX(6px); }
.entry--big { min-height: clamp(380px, 34vw, 520px); }
.entry--big .entry-price { border-top: 1px solid var(--line); }
.entry::marker { content: none; }
/* знак Delba в углу карточки: тихий, на наведении поворачивается, как в шапке */
.entry { position: relative; }
.entry-mark { position: absolute; right: clamp(18px, 1.8vw, 28px); top: clamp(18px, 1.8vw, 28px); width: 28px; height: 26px; opacity: 0.22; transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); pointer-events: none; }
.entry-mark .brand-mark { width: 100%; height: 100%; }
.entry:hover .entry-mark { opacity: 0.75; transform: rotate(120deg); }
.entry .entry-text { font-size: 15px; color: var(--text-2); line-height: 1.55; }
/* отрасли: две колонки, карточки шире, текст абзацем, модули списком */
.entries--industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entries--industries .entry { min-height: 0; padding: clamp(28px, 2.6vw, 44px); gap: 14px; }
.entries--industries .entry::before { margin-bottom: 14px; }
.entries--industries .entry .entry-text { max-width: 44em; }
.entries--industries .entry .entry-arrow { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.entries--industries .entry h3 { font-size: clamp(24px, 2vw, 32px); }
.entries--industries .entry .dots { columns: 1; }
@supports (grid-template-rows: subgrid) { .entries--industries .entry { grid-row: span 5; } }

/* ============================================================
   B-19 проекты
   ============================================================ */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cases--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 48px) var(--gap); }
.cases--4 { padding-bottom: clamp(0px, 9vw, 150px); }
.cases--4 .case-card:nth-child(even) { position: relative; top: clamp(0px, 9vw, 150px); }
.cases--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-card { overflow: hidden; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-card); }
.case-card.glass { background: rgba(14, 13, 17, 0.84); }
.case-shot { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #0e0d12; border-bottom: 1px solid var(--line); }
.case-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7, 6, 8, 0.55)); pointer-events: none; }
.case-body { padding: clamp(22px, 2vw, 32px); display: grid; gap: 12px; align-content: start; }
.case-body h3 { font-size: clamp(19px, 1.5vw, 26px); line-height: 1.18; letter-spacing: -0.012em; font-weight: 300; }
.case-body p { font-size: 14.5px; }
.case-body .case-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--text-dim); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filters button { padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: 13px; color: var(--text-dim); transition: all var(--t-fast) var(--ease); }
.filters button[aria-pressed="true"] { background: var(--gold-bright); color: var(--ink); border-color: var(--gold-bright); }
.filters button:hover { color: var(--text); border-color: var(--gold-dim); }
.filters button[aria-pressed="true"]:hover { color: var(--ink); border-color: var(--gold-bright); }
.shot-note { position: absolute; left: 14px; bottom: 12px; z-index: 2; max-width: calc(100% - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--text-dim); letter-spacing: 0.03em; padding: 4px 9px; border-radius: 6px; background: rgba(7, 6, 8, 0.72); }
.shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* экран проекта: окно браузера на тёмной сцене, рядом — экран на телефоне; все размеры от ширины контейнера */
.case-shot, .case-hero-shot, .screen-frame { container-type: inline-size; }
.shot-stage { position: absolute; inset: 0; background: radial-gradient(70% 80% at 28% 0%, rgba(235, 224, 178, 0.11), transparent 62%), radial-gradient(50% 60% at 100% 100%, rgba(235, 224, 178, 0.05), transparent 60%), #0d0c10; }
.shot-win { position: absolute; left: 5%; right: 5%; top: 7%; bottom: auto; display: grid; grid-template-rows: auto auto; border-radius: clamp(6px, 1.6cqw, 12px); border: 1px solid var(--line-2); background: #141318; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.4); transition: transform 1.2s var(--ease); }
.shot-win--flat { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; }
.shot-bar { display: flex; align-items: center; gap: 0.45em; height: 2.4em; padding: 0 1em; font-size: clamp(7px, 1.75cqw, 13px); background: rgba(255, 255, 255, 0.025); border-bottom: 1px solid var(--line); }
.shot-bar i { width: 0.7em; height: 0.7em; border-radius: 50%; background: rgba(244, 241, 234, 0.13); }
.shot-bar span { margin-left: 0.6em; padding: 0.3em 0.9em; border-radius: 1em; background: rgba(255, 255, 255, 0.045); color: var(--text-faint); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.shot-bar span:empty { display: none; }
.shot-view { position: relative; overflow: hidden; aspect-ratio: 2.1; }   /* снимки 1560 × 730; снимки 8:5 обрезаются снизу */
.shot-phone { position: absolute; right: 4.5%; bottom: -5%; width: 23%; aspect-ratio: 39 / 50; border-radius: clamp(8px, 2.4cqw, 18px) clamp(8px, 2.4cqw, 18px) 0 0; overflow: hidden; border: 1px solid var(--line-3); border-bottom: 0; background: #141318; box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.5); transition: transform 1.2s var(--ease); }
.case-card.is-link:hover .shot-win, .next-case:hover .shot-win { transform: translateY(-1.5%); }
.case-card.is-link:hover .shot-phone, .next-case:hover .shot-phone { transform: translateY(-4%); }
/* hero кейса: окно 1:1 к снимку (снимки 800 px, растягивать нельзя), телефон рядом на сцене */
.case-hero-shot .shot-win { left: 6%; right: auto; width: 62%; top: 9%; }
.case-hero-shot .shot-stage:not(:has(.shot-phone)) .shot-win { left: 15%; width: 70%; }
.case-hero-shot .shot-phone { width: 22%; right: 7%; top: 17%; bottom: auto; border-bottom: 1px solid var(--line-3); border-radius: 18px; }
.case-hero-shot .shot-stage--bp .shot-win { left: 7%; right: 7%; width: auto; top: 8%; }
.next-case .shot-win { top: 8%; }

/* схема проекта — на месте экрана, пока нет согласия клиента или экранов ещё нет */
.shot-stage--bp .shot-win { background: linear-gradient(180deg, #16151b, #121117); bottom: -3%; grid-template-rows: auto 1fr; border-bottom: 0; border-radius: clamp(6px, 1.6cqw, 12px) clamp(6px, 1.6cqw, 12px) 0 0; }
.shot-stage--bp + .shot-note { left: auto; bottom: auto; top: 10px; right: 12px; background: rgba(7, 6, 8, 0.5); }
@media (max-width: 640px) { .shot-stage--bp + .shot-note { top: auto; right: auto; left: 12px; bottom: 10px; } }
.bp { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; font-size: clamp(7px, 1.75cqw, 16px); color: var(--text-dim); line-height: 1.35; }
.bp h4 { font-family: var(--font); font-weight: 300; font-size: 2.1em; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); margin: 0; }
.bp-body { position: relative; min-height: 0; overflow: hidden; }
.bp--site .bp-body { padding: 0 2.4em; }
.bp-nav { display: flex; align-items: center; gap: 1.6em; height: 3.2em; border-bottom: 1px solid var(--line); color: var(--text-faint); font-size: 0.92em; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; }
.bp-nav b { width: 5.5em; height: 0.9em; border-radius: 0.3em; background: linear-gradient(90deg, var(--gold), var(--gold-dim)); margin-right: 1em; flex: none; }
.bp-hero { padding: 2.6em 0 2.2em; display: grid; gap: 0.9em; max-width: 60%; justify-items: start; }
.bp-cta { display: flex; gap: 0.8em; margin-top: 0.6em; }
.bp-hero p { margin: 0; font-size: 1em; color: var(--text-dim); }
.bp-btn { display: block; width: 9em; height: 2.3em; border-radius: 2em; background: var(--gold-bright); }
.bp-btn--ghost { background: transparent; border: 1px solid var(--line-3); }
.bp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.bp-tiles div { padding: 1.2em 1.2em 1.4em; border: 1px solid var(--line-2); border-radius: 0.8em; background: rgba(255, 255, 255, 0.025); display: grid; gap: 0.35em; align-content: start; min-height: 6em; }
.bp-tiles b { font-weight: 500; color: var(--text-2); font-size: 1.05em; }
.bp-tiles span { color: var(--text-faint); font-size: 0.92em; }
.bp--app .bp-body { display: grid; grid-template-columns: 24% 1fr; }
.bp--app aside { border-right: 1px solid var(--line); padding: 1.6em 0; display: grid; align-content: start; gap: 0.2em; color: var(--text-faint); }
.bp--app aside span { padding: 0.6em 1.6em; border-left: 2px solid transparent; }
.bp--app aside .is-on { color: var(--text); border-left-color: var(--gold); background: linear-gradient(90deg, rgba(235, 224, 178, 0.08), transparent); }
.bp--app main { padding: 1.8em 2.2em; display: grid; gap: 0.7em; align-content: start; }
.bp--app main h4 { margin-bottom: 0.5em; }
.bp-row { display: flex; align-items: center; gap: 0.9em; padding: 0.95em 1.1em; border: 1px solid var(--line); border-radius: 0.6em; background: rgba(255, 255, 255, 0.025); color: var(--text-2); white-space: nowrap; overflow: hidden; }
.bp-row i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--text-faint); flex: none; }
.bp-row i.ok { background: var(--green); }
.bp-row i.hi { background: var(--gold); box-shadow: 0 0 0.6em rgba(235, 224, 178, 0.6); }
.bp-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.bp-row em { font-style: normal; color: var(--text-faint); font-size: 0.92em; }



/* ============================================================
   B-06 ситуации — редакционный список цитат
   ============================================================ */
.sits { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.sit.glass { background: transparent; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sit {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) clamp(150px, 15vw, 210px); gap: 16px clamp(24px, 4vw, 72px); align-items: start;
  padding: clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--line); position: relative;
}
.sit::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.sit:hover::before { transform: scaleX(1); }
.sit .sit-q { font-size: clamp(19px, 1.65vw, 27px); line-height: 1.3; font-weight: 300; letter-spacing: -0.012em; transition: color 0.4s; }
.sit:hover .sit-q { color: var(--gold-bright); }
.sit .sit-a { font-size: 15px; color: var(--text-2); line-height: 1.6; }
.sit .sit-r { grid-column: 2; font-size: 14px; color: var(--text); }
.sit .sit-r b { font-weight: 500; color: var(--text-dim); display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.sit .link-arrow { font-size: 14px; white-space: nowrap; align-self: start; justify-self: end; padding-top: 4px; }

/* ============================================================
   B-24 ступени · B-10 таймлайн · B-26 лестница
   ============================================================ */
.howlist { display: grid; border-top: 1px solid var(--line); counter-reset: how; }
.how.glass { background: transparent; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.how {
  display: grid; grid-template-columns: clamp(80px, 9vw, 150px) minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 20px clamp(20px, 3vw, 48px);
  padding: clamp(26px, 2.6vw, 40px) 0; align-items: start; border-bottom: 1px solid var(--line); position: relative;
}
/* контурная цифра тенями, а не text-stroke: обводка ровная на тонких штрихах шрифта */
.how .how-n { font-size: clamp(40px, 4.4vw, 76px); line-height: 0.9; font-weight: 300; letter-spacing: -0.04em; color: var(--bg); text-shadow: -1px -1px 0 var(--gold-dim), 0 -1px 0 var(--gold-dim), 1px -1px 0 var(--gold-dim), 1px 0 0 var(--gold-dim), 1px 1px 0 var(--gold-dim), 0 1px 0 var(--gold-dim), -1px 1px 0 var(--gold-dim), -1px 0 0 var(--gold-dim); transition: color 0.6s var(--ease), text-shadow 0.6s var(--ease); }
.how:hover .how-n, .how.is-lit .how-n { color: var(--gold); text-shadow: none; }
.how h3 { font-size: clamp(20px, 1.7vw, 28px); line-height: 1.15; font-weight: 300; letter-spacing: -0.012em; margin-bottom: 8px; }
.how p { font-size: 14.5px; color: var(--text-dim); }
.how .how-get b, .how .how-you b { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.how .how-get, .how .how-you { font-size: 15px; color: var(--text-2); line-height: 1.55; }
.how .how-you { color: var(--text-dim); }
.howlist--compact .how { grid-template-columns: clamp(80px, 9vw, 150px) minmax(0, 5fr) minmax(0, 6fr); }
.stages-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.stages-stage { position: sticky; top: calc(var(--header-h) + 24px); height: calc(100vh - var(--header-h) - 48px); min-height: 420px; display: grid; align-content: center; gap: 18px; }
.stage-count { display: flex; align-items: baseline; gap: 14px; }
.sc-cur { display: inline-block; overflow: hidden; clip-path: inset(0); height: 0.9em; line-height: 0.9; font-size: clamp(120px, 13vw, 230px); font-weight: 300; letter-spacing: -0.05em; }
/* цифра двигается transform-ом: градиент через background-clip: text в Chromium при этом пропадает, поэтому сплошной цвет */
.sc-cur > span { display: block; color: var(--gold-bright); }
.sc-tot { font-size: clamp(16px, 1.3vw, 20px); color: var(--text-faint); letter-spacing: 0.04em; }
.sc-title { font-family: var(--font); font-weight: 300; font-size: clamp(20px, 1.8vw, 30px); letter-spacing: -0.01em; color: var(--text-2); max-width: 12em; min-height: 2.3em; }
.stages-wrap .howlist--compact .how { grid-template-columns: clamp(72px, 7vw, 120px) minmax(0, 1fr) minmax(0, 1.15fr); }

.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
.timeline--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tl { padding: 24px; display: grid; gap: 10px; align-content: start; min-height: 200px; }
.tl .tl-when { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.tl h3 { font-size: 17px; font-weight: 400; }
.tl p { font-size: 13.5px; color: var(--text-dim); }
.tl .tl-you { font-size: 12.5px; color: var(--text-faint); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }

.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ladder--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ladder--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.ladder--4 .rung { padding: clamp(26px, 2.2vw, 34px); min-height: 300px; }
.ladder--4 .rung h3 { font-size: 21px; }
.ladder--4 .rung .rung-what { font-size: 14.5px; }
.rung { padding: 26px; display: grid; gap: 12px; align-content: start; min-height: 270px; position: relative; }
.rung .rung-n { font-size: 12px; letter-spacing: 0.08em; color: var(--gold); }
.rung h3 { font-size: 19px; font-weight: 400; }
.rung .rung-what { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.rung .rung-price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.rung .rung-price b { font-family: var(--font); font-weight: 300; font-size: 20px; letter-spacing: -0.01em; }
.rung .rung-price span { font-size: 12.5px; color: var(--text-dim); }
.rung.is-entry { border-color: var(--gold-dim); background: linear-gradient(180deg, rgba(235, 224, 178, 0.07), rgba(17, 16, 20, 0.6)); }
.rung.is-entry::after { content: "начать здесь"; position: absolute; top: 18px; right: 18px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

/* ============================================================
   B-11 процесс по ролям (липкая сцена)
   ============================================================ */
.process-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.process-stage { position: sticky; top: calc(var(--header-h) + 24px); height: calc(100vh - var(--header-h) - 48px); min-height: 420px; }
.process-steps { display: grid; }
.step { min-height: 34vh; display: grid; align-content: center; gap: 14px; padding: 28px 0; border-top: 1px solid var(--line); opacity: 0.3; transition: opacity 0.7s var(--ease); }
.step.is-active { opacity: 1; }
.step .step-n { font-size: 12px; letter-spacing: 0.1em; color: var(--gold); }
.step .step-role { font-size: clamp(24px, 2.4vw, 38px); line-height: 1.1; font-weight: 300; letter-spacing: -0.015em; }
.step .step-action { font-size: 16px; color: var(--text-2); max-width: 32em; }
.step .step-data { font-size: 13px; color: var(--text-dim); display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.step .step-data span { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); }
.now-card { display: grid; gap: 10px; padding: 24px 28px; margin-bottom: 12px; }
.now-card .label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

/* ============================================================
   B-13 роли · B-09 цены — таблицы
   ============================================================ */
.roles-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.roles-table, .price-table { overflow-x: auto; }
.roles-table table { min-width: 640px; font-size: 14px; }
.price-table table { min-width: 760px; font-size: 14px; }
.roles-table th, .roles-table td, .price-table th, .price-table td { padding: 18px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.roles-table td { vertical-align: middle; }
.roles-table th, .price-table th { font-weight: 500; color: var(--text-faint); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.roles-table th:first-child, .roles-table td:first-child, .price-table th:first-child, .price-table td:first-child { padding-left: 0; }
.roles-table td:first-child { color: var(--text); }
.roles-table tr:hover td, .price-table tbody tr:hover td { background: rgba(244, 241, 234, 0.022); }
.roles-table .y { color: var(--gold); } .roles-table .n { color: var(--text-faint); } .roles-table .p { color: var(--text-dim); }
.price-table td:first-child { color: var(--text); font-size: 16px; font-family: var(--font); font-weight: 300; letter-spacing: -0.01em; width: 26%; }
.price-table td .dim { display: block; font-family: var(--font-text); font-size: 13px; margin-top: 6px; }
.price-table td .link-arrow { margin-top: 10px; font-family: var(--font-text); font-size: 13px; }
.price-table td.price { white-space: nowrap; font-size: 18px; font-weight: 300; text-align: right; }
.price-table th:last-child { text-align: right; }
.price-table td ul li { position: relative; padding-left: 14px; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; }
.price-table td ul li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-dim); }
.price-table .price-cond { margin: 0.7em 0 0; max-width: 42ch; }

/* ============================================================
   B-07, B-14, B-22, B-31 — сетки карточек
   ============================================================ */
.stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stack .card h3, .principles .card h3, .q4 .card h3 { font-size: 18px; }
.stack .card p, .principles .card p, .q4 .card p { font-size: 14px; }
.q4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.q4 .card .qn { font-size: 12px; letter-spacing: 0.08em; color: var(--gold); }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.decisions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.decision { padding: 28px; display: grid; gap: 12px; align-content: start; }
.decision .d-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.decision h3 { font-size: 18px; font-weight: 400; }
.decision p { font-size: 14px; color: var(--text-dim); }
.clients { display: flex; flex-wrap: wrap; gap: 10px; }
.clients span { padding: 12px 18px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 14px; color: var(--text-dim); transition: border-color var(--t-fast), color var(--t-fast); }
.clients span:hover { border-color: var(--gold-dim); color: var(--text); }
.clients span b { font-weight: 400; color: var(--text); }

/* B-08, B-12, B-15, B-16 — входит / отдельно */
.inout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.inout--2 { grid-template-columns: 1fr 1fr; }
.inout .big { padding: clamp(26px, 2.6vw, 40px); display: grid; gap: 10px; }
.inout .big b { font-size: clamp(28px, 2.5vw, 44px); font-weight: 300; line-height: 1.05; letter-spacing: -0.025em; white-space: nowrap; }
.inout .big span { font-size: 13.5px; color: var(--text-dim); }
.inout ul li { padding: 12px 0 12px 26px; border-top: 1px solid var(--line); font-size: 14.5px; position: relative; }
.inout ul li::before { content: "+"; color: var(--gold); position: absolute; left: 0; top: 12px; }
.inout ul li a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-dim); }
.inout ul li a:hover { color: var(--gold-bright); }
.inout ul.no li::before { content: "–"; color: var(--text-faint); }
.inout ul.no li { color: var(--text-dim); }
.inout .list-label { margin-bottom: 6px; }

/* B-17 сейчас / после */
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r-card); overflow: hidden; }
.before-after > div { padding: clamp(26px, 2.6vw, 40px); display: grid; gap: 14px; align-content: start; }
.before-after .now { background: rgba(255, 255, 255, 0.015); border-right: 1px solid var(--line); }
.before-after .label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.before-after .now .label { color: var(--text-faint); }
.before-after li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.before-after .now li { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(244, 241, 234, 0.22); }

/* B-28 образцы */
.samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.sample { overflow: hidden; }
.sample .sample-art { aspect-ratio: 3 / 2; position: relative; background: #0e0d12; border-bottom: 1px solid var(--line); }
.sample .sample-cap { padding: 18px 22px 22px; display: grid; gap: 6px; }
.sample .sample-cap b { font-weight: 400; font-size: 15px; }
.sample .sample-cap span { font-size: 13px; color: var(--text-dim); }
/* документы аудита: схемы с настоящими подписями, не серые полосы */
.sample .sample-art { container-type: inline-size; }
.doc { position: absolute; inset: 9% 9% 8%; font-size: clamp(7px, 3.2cqw, 12px); color: var(--text-dim); display: grid; align-content: start; gap: 0.8em; line-height: 1.3; }
.doc-title { font-family: var(--font); font-weight: 300; color: var(--text); font-size: 1.5em; letter-spacing: -0.01em; padding-bottom: 0.5em; border-bottom: 1px solid var(--line); }
.doc-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0.5em 0.4em; align-items: center; }
.doc-grid b { font-weight: 500; font-size: 0.85em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); text-align: center; }
.doc-grid i { font-style: normal; color: var(--text-2); }
.doc-grid em { display: block; width: 1em; height: 1em; margin: 0 auto; border-radius: 50%; border: 1px solid var(--line-3); }
.doc-grid em.on { background: var(--gold); border-color: var(--gold); }
.doc-grid em.warn { border-color: #ff8f88; border-style: dashed; }
.doc-note { font-size: 0.9em; color: #ff8f88; }
.doc-row { display: flex; gap: 0.8em; align-items: center; padding: 0.45em 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.doc-row b { flex: none; font-weight: 500; font-size: 0.8em; padding: 0.2em 0.6em; border-radius: 1em; letter-spacing: 0.06em; }
.doc-row .p1 { background: rgba(255, 143, 136, 0.16); color: #ff8f88; } .doc-row .p2 { background: rgba(235, 224, 178, 0.14); color: var(--gold); } .doc-row .p3 { background: rgba(244, 241, 234, 0.08); color: var(--text-dim); }
.doc-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; }
.doc-cols > div { display: grid; gap: 0.35em; align-content: start; padding: 0.7em; border: 1px solid var(--line-2); border-radius: 0.6em; background: rgba(255, 255, 255, 0.025); }
.doc-cols b { font-weight: 500; color: var(--text); font-size: 0.95em; }
.doc-cols span { color: var(--text-dim); font-size: 0.9em; }
.doc-cols em { font-style: normal; color: var(--gold); font-size: 0.9em; margin-top: 0.3em; }

/* B-23 люди */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.two .team { grid-template-columns: minmax(0, 1fr); }
.team--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.person { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; padding: 22px; min-width: 0; overflow-wrap: anywhere; }
.person .avatar { width: 120px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a2730, #121114); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-faint); font-size: 11px; text-align: center; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.05); transition: filter 0.8s var(--ease); }
.person:hover .avatar { filter: grayscale(0.15); }
.person .avatar[data-photo] { color: transparent; }
.person h3 { font-size: 20px; font-weight: 300; letter-spacing: -0.01em; }
.person p { font-size: 14px; color: var(--text-dim); }
.team--6 .person { grid-template-columns: 88px 1fr; } .team--6 .person .avatar { width: 88px; }
.team-note { margin-top: 20px; font-size: 14px; color: var(--text-dim); }

/* B-33 вопросы */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 72px); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child, .faq details:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; font-size: 17px; font-weight: 400; position: relative; transition: color var(--t-fast); }
.faq summary:hover { color: var(--gold-bright); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq summary::before { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1px; background: var(--gold); transition: transform 0.5s var(--ease); }
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0deg); }
.faq .answer { padding: 0 0 26px; font-size: 15px; color: var(--text-dim); max-width: 58ch; line-height: 1.65; }

/* ============================================================
   B-34 форма · B-36 контакты
   ============================================================ */
.contact-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.form { display: grid; gap: 16px; padding: clamp(26px, 3vw, 48px); border-radius: var(--r-panel); }
.form .form-head { display: grid; gap: 12px; margin-bottom: 10px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; position: relative; }
.field label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.field label .req { font-style: normal; color: var(--gold); }
.form-hint { margin-top: -4px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid var(--line-3); border-radius: 0;
  padding: 10px 0 12px; transition: border-color var(--t-fast) var(--ease);
}
.field select { appearance: none; -webkit-appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23ebe0b2' stroke-width='1.3'/%3E%3C/svg%3E") right 2px center / 12px no-repeat; }
.field select option { background: var(--bg-3); color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); pointer-events: none; }
.field:focus-within::after { transform: scaleX(1); }
.field:has(.err)::after { bottom: auto; top: calc(100% - 1px); }
.field textarea { min-height: 96px; resize: vertical; }
.field.is-error input { border-bottom-color: var(--red); }
.field .err { font-size: 12px; color: #ff8f88; display: none; }
.field.is-error .err { display: block; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
.consent input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.consent a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-dim); }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; margin-top: 8px; }
.form-status { font-size: 13px; color: var(--text-dim); }
.form-status.ok { color: #9edcb5; }
.form-status.bad { color: #ff8f88; }
.contact-dot { width: 90px; height: 90px; flex: none; }
.after { display: grid; gap: 22px; padding-top: 12px; }
.after ol { display: grid; gap: 18px; counter-reset: a; }
.after li { position: relative; padding-left: 52px; font-size: 15px; color: var(--text-dim); line-height: 1.55; }
.after li::before { counter-increment: a; content: counter(a, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font); font-size: 13px; color: var(--gold); }
.after li b { display: block; color: var(--text); font-weight: 400; margin-bottom: 2px; }
.proto-note { font-size: 12px; color: var(--text-faint); border-left: 1px solid var(--gold-dim); padding-left: 12px; }
.contacts-list { display: grid; gap: 18px; }
.contacts-list .item { display: grid; gap: 4px; padding-bottom: 20px; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.contacts-list .item span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.contacts-list .item b { font-family: var(--font); font-weight: 300; font-size: clamp(19px, 1.7vw, 26px); letter-spacing: -0.01em; }
.copy-btn { font-size: 12px; color: var(--gold); padding: 4px 0; }

/* ============================================================
   B-18 демо кабинета жюри
   ============================================================ */
.demo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
.demo-frame { border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface-solid); box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(235, 224, 178, 0.04); }
.demo-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-dim); }
.demo-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.demo-bar .url { margin-left: 8px; padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); font-size: 11px; }
.demo-app { display: grid; grid-template-columns: 220px 1fr; min-height: 440px; }
.demo-side { border-right: 1px solid var(--line); padding: 16px 12px; display: grid; gap: 4px; align-content: start; }
.demo-side .who { padding: 10px 12px 14px; font-size: 12px; color: var(--text-dim); border-bottom: 1px solid var(--line); margin-bottom: 8px; min-width: 0; }
.demo-side .who b { display: block; color: var(--text); font-weight: 400; font-size: 14px; }
.demo-side button { text-align: left; padding: 12px; border-radius: 12px; font-size: 14px; display: grid; gap: 4px; transition: background var(--t-fast) var(--ease); }
.demo-side button:hover { background: rgba(255, 255, 255, 0.04); }
.demo-side button[aria-selected="true"] { background: var(--gold-soft); }
.demo-side button small { font-size: 11px; color: var(--text-dim); }
.demo-side button .st { font-size: 11px; color: var(--gold); }
.demo-side button .st.done { color: #9edcb5; }
.demo-side .demo-reset { margin-top: auto; align-self: start; border: 1px solid var(--line-2); color: var(--text-dim); font-size: 12px; padding: 8px 12px; border-radius: var(--r-pill); }
.demo-side .demo-reset:hover, .demo-side .demo-reset:focus-visible { color: var(--text); border-color: var(--gold-dim); }
.demo-side [role="tab"]:focus-visible, .scale button:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 2px; }
.demo-main { padding: 22px 26px; display: grid; gap: 18px; align-content: start; }
.demo-main h4 { font-size: 20px; font-weight: 300; }
.demo-main .nominee { font-size: 13px; color: var(--text-dim); }
.crit { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.crit .crit-name { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; font-size: 14px; }
.crit .crit-name span { color: var(--text-dim); font-size: 12px; white-space: nowrap; flex: none; margin-left: auto; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.scale button { height: 40px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 14px; color: var(--text-dim); transition: all var(--t-fast) var(--ease); }
.scale button:hover { border-color: var(--gold-dim); color: var(--text); }
.scale button[aria-pressed="true"] { background: var(--gold-bright); color: var(--ink); border-color: var(--gold-bright); }
.demo-comment textarea { width: 100%; min-height: 64px; font: inherit; font-size: 14px; color: var(--text); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; resize: vertical; }
.demo-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.demo-actions .hint { font-size: 12px; color: var(--text-dim); }
.rating { display: grid; gap: 14px; padding: 26px; }
.rating h4 { font-size: 17px; font-weight: 300; display: flex; justify-content: space-between; }
.rating h4 span { color: var(--text-dim); font-size: 12px; }
.rating ol { display: grid; gap: 12px; }
.rating li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.rating li .bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; grid-column: 1 / -1; }
.rating li .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transition: width var(--t-slow) var(--ease); }
.rating li .pos { color: var(--text-dim); font-size: 12px; }
.rating li.is-new .val { color: var(--gold); }
.rating .rating-note { font-size: 12px; color: var(--text-faint); }
.demo-caption { font-size: 13px; color: var(--text-dim); margin-top: 14px; }
.demo-noscript { padding: 24px; color: var(--text-dim); }
.demo-done { color: var(--text-dim); border-top: 1px solid var(--line); padding-top: 14px; }
.demo-done .link-arrow { margin-left: 8px; }

/* ============================================================
   B-04 кейс · B-29 текст · B-32 экраны · B-20 следующий
   ============================================================ */
.case-hero { padding-block: clamp(32px, 4vw, 64px) 0; }
.case-hero .grid { align-items: end; }
.case-hero-copy { grid-column: 1 / span 8; display: grid; gap: 24px; }
.case-hero-copy .h1 { font-size: clamp(34px, 3.5vw, 58px); }
.case-hero-shot { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 72px); aspect-ratio: 2.2; border-radius: var(--r-panel); overflow: hidden; position: relative; border: 1px solid var(--line); background: #0e0d12; }
.case-meta-row { display: flex; flex-wrap: wrap; gap: 14px 40px; font-size: 13.5px; color: var(--text-dim); padding-top: 20px; border-top: 1px solid var(--line); }
.case-meta-row b { font-weight: 500; color: var(--text-faint); display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.prose { max-width: 68ch; display: grid; gap: 18px; font-size: 17px; line-height: 1.7; }
.prose p { color: var(--text-2); }
.prose p b { color: var(--text); font-weight: 500; }
.next-case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; border-radius: var(--r-panel); }
.next-case .case-shot { aspect-ratio: 16 / 9; min-height: 0; border-bottom: 0; border-right: 1px solid var(--line); }
.next-case .case-body { padding: clamp(28px, 3.4vw, 56px); align-content: center; }
.next-case .case-body .h3 { font-size: clamp(22px, 2vw, 34px); font-weight: 300; letter-spacing: -0.015em; }
.screens { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 62%); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
.screens:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 6px; }
.screen { margin: 0; scroll-snap-align: start; display: grid; gap: 12px; align-content: start; }
.screen--phone { max-width: 300px; }
.screen-frame { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #0e0d12; aspect-ratio: 16 / 10; }
.screen--phone .screen-frame { aspect-ratio: 39 / 50; }
.screen figcaption { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.consent-note { color: var(--text-faint); }

/* ============================================================
   B-42 404
   ============================================================ */
.notfound { min-height: calc(100svh - var(--header-h)); display: grid; place-items: center; text-align: center; }
.notfound .inner { display: grid; gap: 24px; justify-items: center; max-width: 620px; }

/* ============================================================
   подвал: большой призыв и знак
   ============================================================ */
#site-footer { position: relative; z-index: 1; padding-block: clamp(40px, 6vw, 96px) clamp(12px, 1.6vw, 28px); overflow: hidden; }
#site-footer.footer--after-form { padding-top: clamp(24px, 3vw, 48px); }
.footer-cta { display: grid; justify-items: start; gap: clamp(28px, 3vw, 48px); padding-bottom: clamp(48px, 7vw, 120px); max-width: min(64%, 1000px); position: relative; z-index: 2; }
.footer-cta .h2 { max-width: 14em; font-size: clamp(34px, 5.2vw, 92px); line-height: 1.0; letter-spacing: -0.03em; }
.footer-cta .h2 em { font-style: normal; }
.footer-panel { padding: clamp(28px, 3vw, 48px); display: grid; gap: 40px; border-radius: var(--r-panel); }
.footer-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 32px; align-items: start; }
.footer-contacts { display: grid; gap: 8px; }
.footer-phone { font-size: clamp(22px, 2.2vw, 34px); font-weight: 300; letter-spacing: -0.015em; }
.footer-phone a:hover, .footer-mail a:hover { color: var(--gold-bright); }
.footer-addr { font-size: 14px; color: var(--text-dim); }
.footer-mail { font-size: 16px; color: var(--gold); }
.footer-nav { display: grid; gap: 10px; font-size: 14px; color: var(--text-dim); }
.footer-nav--2 { grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.footer-nav--2 div { display: grid; gap: 10px; align-content: start; }
.footer-nav a { transition: color var(--t-fast); }
.footer-nav a:hover { color: var(--text); }
.footer-entity { display: grid; gap: 8px; font-size: 13px; color: var(--text-dim); min-width: 0; overflow-wrap: anywhere; }
.footer-entity b { font-weight: 400; color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-dim); }
.footer-bottom .brand-mark { width: 26px; height: 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a:hover, .footer-right a:hover { color: var(--text); }
.footer-right { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.icon-link { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-dim); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.icon-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-link:hover, .footer .icon-link:hover, .footer-right .icon-link:hover { color: var(--ink); background: var(--gold-bright); border-color: var(--gold-bright); }
.icon-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* модальное окно «Обсудить проект» */
.modal { border: 0; padding: 0; margin: 0; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--text); display: none; place-items: center; }
.modal[open] { display: grid; }
.modal::backdrop { background: rgba(7, 6, 8, 0.74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-panel { position: relative; width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border-radius: var(--r-panel); background: rgba(14, 13, 17, 0.9); animation: modal-in 0.5s var(--ease); overscroll-behavior: contain; }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; right: 14px; top: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-dim); transition: color var(--t-fast), border-color var(--t-fast); }
.modal-close:hover { color: var(--text); border-color: var(--line-3); }
.modal-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.modal-form { gap: 14px; }
.modal-form .form-head { padding-right: 48px; margin-bottom: 4px; }
.modal-form .h2 { font-size: clamp(26px, 2.6vw, 36px); }
.modal-form .form-head p { font-size: 14.5px; }
.modal-form textarea { min-height: 80px; }
.modal-alt { margin-top: 4px; }
.modal-alt a { color: var(--gold); }
.modal-alt a:hover { color: var(--gold-bright); }
body.modal-open .cbtn { display: none; }
@media (max-width: 640px) { .modal-panel { width: 100vw; max-height: 100vh; border-radius: 0; } .modal-form .row2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .modal-panel { animation: none; } }

/* плавающая кнопка связи */
html.js .cbtn { opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
html.js .cbtn.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cbtn { position: fixed; right: clamp(16px, 2.2vw, 32px); bottom: clamp(16px, 2.2vw, 32px); z-index: 60; display: grid; justify-items: end; gap: 12px; }
.cbtn-btn { width: 54px; height: 54px; border-radius: 50%; background: var(--gold-bright); color: var(--ink); display: grid; place-items: center; box-shadow: 0 14px 34px -10px rgba(235, 224, 178, 0.45), 0 2px 8px rgba(0, 0, 0, 0.5); transition: transform 0.5s var(--ease), box-shadow 0.4s var(--ease); }
.cbtn-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(235, 224, 178, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5); }
.cbtn-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; position: absolute; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.cbtn-btn .cbtn-i-close { opacity: 0; transform: rotate(-45deg) scale(0.8); }
.cbtn-btn[aria-expanded="true"] .cbtn-i-open { opacity: 0; transform: rotate(45deg) scale(0.8); }
.cbtn-btn[aria-expanded="true"] .cbtn-i-close { opacity: 1; transform: none; }
.cbtn-panel { width: min(320px, calc(100vw - 32px)); padding: 10px; border-radius: 18px; display: grid; gap: 2px; background: rgba(14, 13, 17, 0.86); transform-origin: 100% 100%; animation: cbtn-in 0.45s var(--ease); }
.cbtn-panel[hidden] { display: none; }
@keyframes cbtn-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.cbtn-title { padding: 10px 12px 8px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.cbtn-panel > a { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; color: var(--text); font-size: 15px; line-height: 1.2; transition: background var(--t-fast); }
.cbtn-panel > a:hover { background: rgba(244, 241, 234, 0.06); }
.cbtn-panel > a svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cbtn-panel > a small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.cbtn-panel .cbtn-form { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 14px; font-size: 14px; color: var(--gold); }
.cbtn-panel .cbtn-form:hover { background: none; color: var(--gold-bright); }
body.menu-open .cbtn { display: none; }
@media (max-width: 640px) { .cbtn-btn { width: 50px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .cbtn-panel { animation: none; } }
.footer-word {
  font-family: var(--font); font-weight: 300; letter-spacing: -0.06em; line-height: 0.74; text-align: center; user-select: none;
  font-size: clamp(88px, 23.5vw, 400px); margin: clamp(40px, 6vw, 96px) 0 0; padding-bottom: 0.08em; overflow: hidden; max-width: 100%;
  background: linear-gradient(180deg, rgba(246, 236, 194, 0.62) 0%, rgba(201, 172, 110, 0.28) 55%, rgba(185, 156, 95, 0.04) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   интро · курсор · переходы
   ============================================================ */
.intro { position: fixed; inset: 0; z-index: 80; pointer-events: none; display: none; place-items: center; background: var(--bg); }
html.intro-on .intro { display: grid; }
.intro-mark { width: clamp(72px, 9vw, 120px); height: auto; overflow: visible; }
.intro-mark path { fill: transparent; stroke: var(--gold); stroke-width: 0.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-word { position: absolute; left: 50%; top: calc(50% + clamp(64px, 7vw, 100px)); transform: translateX(-50%); font-family: var(--font); font-weight: 300; font-size: 12px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; opacity: 0; }
.intro-count { position: absolute; right: var(--pad-x); bottom: 32px; font-family: var(--font); font-size: 12px; letter-spacing: 0.1em; color: var(--text-faint); }

.curtain { position: fixed; inset: 0; z-index: 70; pointer-events: none; background: var(--bg); transform: scaleY(0); transform-origin: 50% 100%; }
.curtain::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-grad); opacity: 0.8; }
.curtain::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-grad); opacity: 0.8; }

.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none; opacity: 0; transition: opacity 0.4s; }
.cursor.is-on { opacity: 1; }
html.has-cursor .cursor { display: block; }
.cursor-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--gold-bright); }
.cursor-ring {
  position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid rgba(235, 224, 178, 0.45);
  display: grid; place-items: center; transition: width 0.5s var(--ease), height 0.5s var(--ease), margin 0.5s var(--ease), background 0.4s var(--ease), border-color 0.4s;
}
.cursor-ring span { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink); opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
.cursor.is-link .cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--gold); }
.cursor.is-label .cursor-ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--gold-bright); border-color: var(--gold-bright); }
.cursor.is-label .cursor-ring span { opacity: 1; }
.cursor.is-label .cursor-dot, .cursor.is-text .cursor-dot { opacity: 0; }
.cursor.is-text .cursor-ring { width: 2px; height: 26px; margin: -13px 0 0 -1px; border-radius: 1px; background: var(--gold); border-color: transparent; }
.cursor.is-down .cursor-ring { transform: scale(0.85); }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: text; }
/* мелкие иконки и модальное окно: системный курсор (модалка в верхнем слое, кастомный курсор под ней не виден) */
.cursor.is-icon .cursor-ring { opacity: 0; }
html.has-cursor .icon-link, html.has-cursor .modal-close { cursor: pointer; }
body.modal-open .cursor { display: none; }
html.has-cursor .modal, html.has-cursor .modal * { cursor: auto; }
html.has-cursor .modal a, html.has-cursor .modal button, html.has-cursor .modal select, html.has-cursor .modal label, html.has-cursor .modal input[type=checkbox] { cursor: pointer; }
html.has-cursor .modal input:not([type=checkbox]), html.has-cursor .modal textarea { cursor: text; }

/* разбивка заголовков на строки (motion.js) */
.split-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-line > span { display: block; will-change: transform; }

/* появление: если motion.js не загрузился — CSS-переход по классу */
.rv { opacity: 1; transform: none; }
html.js .rv { opacity: 0; transform: translateY(var(--shift)); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
html.js .rv.is-in { opacity: 1; transform: none; }
html.js .rv.d1 { transition-delay: 80ms; } html.js .rv.d2 { transition-delay: 160ms; } html.js .rv.d3 { transition-delay: 240ms; } html.js .rv.d4 { transition-delay: 320ms; } html.js .rv.d5 { transition-delay: 400ms; }
html.js.gsap-on .rv { transition: none; }

/* переход страниц: управляет motion.js; без него — короткое затухание */
#page { transition: opacity var(--t-fast) var(--ease); }
body.is-leaving #page { opacity: 0; }
body.is-entering #page { opacity: 0; transition: none; }
html.gsap-on body.is-leaving #page, html.gsap-on body.is-entering #page { opacity: 1; }

/* ============================================================
   адаптив
   ============================================================ */
@media (max-width: 1240px) {
  .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ladder--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline, .timeline--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .decisions, .samples, .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q4, .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .how { grid-template-columns: clamp(64px, 9vw, 120px) minmax(0, 1fr); }
  .how .how-get, .how .how-you { grid-column: 2; }
  .howlist--compact .how { grid-template-columns: clamp(64px, 9vw, 120px) minmax(0, 1fr); }
  .team--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sit .link-arrow { grid-column: 2; }
}
@media (max-width: 1100px) {
  .entries--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --header-h: 70px; }
  .nav, .header-cta { display: none; }
  .burger { display: block; }
  #site-header.is-compact { height: 60px; }
  .hero { min-height: auto; padding-block: 8px 56px; display: block; }
  .hero-copy, .hero--offer .hero-copy { grid-column: 1 / -1; grid-row: 2; }
  .hero-side { grid-column: 1 / -1; grid-row: 1; min-height: 24vh; max-height: 30vh; }
  .hero-price { grid-column: 1 / -1; grid-row: 3; }
  .hero--offer .hero-copy { grid-row: 1; }
  .hero--offer .hero-price { grid-row: 2; }
  .hero-scroll { display: none; }
  .process-wrap, .roles-wrap, .contact-wrap, .demo, .before-after, .next-case, .inout--2, .two, .footer-cta { grid-template-columns: minmax(0, 1fr); }
  .two .sec-head { position: static; }
  .process-stage { display: none; }
  .step { min-height: auto; opacity: 1; padding: 22px 0; }
  .stages-wrap { grid-template-columns: minmax(0, 1fr); }
  .stages-stage { display: none; }
  .stages-wrap .howlist--compact .how { grid-template-columns: clamp(64px, 9vw, 120px) minmax(0, 1fr); }
  .stages-wrap .howlist--compact .how .how-get { grid-column: 2; }
  .before-after .now { border-right: 0; border-bottom: 1px solid var(--line); }
  .stack, .team, .faq, .cases, .cases--4, .cases--list, .decisions, .samples, .inout { grid-template-columns: minmax(0, 1fr); }
  .cases--4 .case-card:nth-child(n) { top: 0; }
  .cases--4 { padding-bottom: 0; }
  .faq details:nth-last-child(2) { border-bottom: 0; }
  .form .row2 { grid-template-columns: 1fr; }
  .demo-app { grid-template-columns: 1fr; }
  .demo-side { border-right: 0; border-bottom: 1px solid var(--line); display: flex; overflow-x: auto; gap: 8px; padding: 12px; }
  .demo-side .who { display: none; }
  .demo-side button { flex: 0 0 auto; min-width: 180px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-right { margin-left: 0; }
  .person { grid-template-columns: 88px 1fr; } .person .avatar { width: 88px; }
  .next-case .case-shot { border-right: 0; border-bottom: 1px solid var(--line); min-height: 220px; }
  .sit { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sit .sit-r, .sit .link-arrow { grid-column: 1; }
  .screens { grid-auto-columns: 86%; }
  .case-hero-copy { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :root { --sec-pad: 72px; }
  .pill { white-space: normal; text-align: center; }
  .entries, .entries--3, .entries--industries, .ladder, .ladder--3, .ladder--4, .timeline, .timeline--6, .q4, .principles, .team--6 { grid-template-columns: minmax(0, 1fr); }
  .entry, .entry--big, .rung, .tl { min-height: auto; }
  .entry::before { margin-bottom: 8px; }
  .hero-offers { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .hero-offers li + li { border-left: 0; border-top: 1px solid var(--line); }
  .hero-offers a, .hero-offers li + li a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; padding: 12px 26px 12px 0; align-items: center; }
  .hero-offers .ho-label { grid-column: 1; font-size: 14px; color: var(--text); }
  .hero-offers .ho-term { grid-column: 1; grid-row: 2; }
  .hero-offers b { grid-column: 2; grid-row: 1 / span 2; font-size: 17px; }
  .hero-offers i { top: 50%; transform: translate(-6px, -50%); right: 4px; }
  .hero-offers a:hover i { transform: translate(0, -50%); }
.hero-facts { gap: 8px 20px; }
  .h1 { font-size: clamp(30px, 8.6vw, 44px); }
  .h2 { font-size: clamp(26px, 7.4vw, 36px); }
  .how, .howlist--compact .how, .stages-wrap .howlist--compact .how { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .how .how-get, .how .how-you, .stages-wrap .howlist--compact .how .how-get { grid-column: 1; }
  .footer-nav--2 { grid-template-columns: 1fr; }
  .crit .crit-name { flex-direction: column; gap: 2px; } .crit .crit-name span { white-space: normal; }
  .footer-cta .h2 { font-size: clamp(30px, 9vw, 44px); }
  .footer-cta { max-width: none; }
  }
@media (max-width: 600px) {
  /* телефон 360–430: сцена видна за текстом, отдельной полосы над предложением нет */
  .hero-side { min-height: 0; height: clamp(24px, 5vh, 56px); max-height: none; }
  .hero { padding-top: 8px; padding-bottom: 40px; }
  .hero:not(.hero--offer) .h1 { font-size: clamp(24px, calc((100vw - 2 * var(--pad-x)) / 11.4), 42px); line-height: 1.06; }
  .hero-copy { gap: 18px; }
}

/* ============================================================
   уменьшенная анимация и кнопка «Остановить анимацию»
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.js .rv { transform: none; transition: opacity var(--t-fast) linear; }
  .grain, .hero-scroll i::after, .chip--live::before { animation: none; }
  .process-stage { display: none; }
  .step { min-height: auto; opacity: 1; padding: 22px 0; }
  .is-link, .card.is-link:hover, .entry:hover { transform: none !important; }
}
html[data-motion="off"] .rv { transform: none !important; transition: opacity var(--t-fast) linear !important; }
html[data-motion="off"] .grain, html[data-motion="off"] .hero-scroll i::after, html[data-motion="off"] .chip--live::before { animation: none; }
html[data-motion="off"] .process-stage { display: none; }
html[data-motion="off"] .step { min-height: auto; opacity: 1; padding: 22px 0; }

/* узкие телефоны: три цены главной — списком, а не в три колонки (на 320 px колонки не помещаются) */
@media (max-width: 400px) {
  .hero-offers { grid-template-columns: minmax(0, 1fr); }
  .hero-offers li + li { border-left: 0; border-top: 1px solid var(--line); }
  .hero-offers a, .hero-offers li + li a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 0; }
  .hero-offers b { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .hero-offers i { display: none; }
}
/* низкие экраны (320 × 568): кнопка действия остаётся в первом экране */
@media (max-width: 400px) and (max-height: 700px) {
  .hero-side { display: none; }
  .hero { padding-top: 16px; }
  .hero-copy { gap: 16px; }
  .hero .lead { font-size: 15px; line-height: 1.5; }
}

/* ---------- юридические страницы: документ с нумерованными пунктами ---------- */
.legal-doc { max-width: 76ch; margin-top: 4vh; padding-bottom: clamp(24px, 4vw, 56px); }
.legal-doc h1 { margin-bottom: 20px; }
.legal-doc .lead { margin-bottom: clamp(28px, 4vw, 48px); }
.legal-doc h2 { font-size: clamp(20px, 1.7vw, 26px); font-weight: 400; letter-spacing: -0.01em; margin: clamp(32px, 4vw, 52px) 0 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal-doc p, .legal-doc li { font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.legal-doc p { margin: 0 0 10px; }
.legal-doc ul { margin: 6px 0 14px; padding-left: 1.2em; display: grid; gap: 4px; }
.legal-doc li { list-style: disc; }
.legal-doc a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201, 172, 110, 0.4); }
.legal-doc a:hover { color: var(--gold-bright); }
.legal-doc .rows { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 8px; }
.legal-doc .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.legal-doc .row dt { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; }
.legal-doc .row dd { font-size: 16px; color: var(--text); margin: 0; }
@media (max-width: 560px) { .legal-doc .row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

@media (max-width: 640px) {
  /* hero кейса на телефоне: окно во всю ширину, телефон не нужен — он и так телефон */
  .case-hero-shot { aspect-ratio: 1.6; }
  .case-hero-shot .shot-win, .case-hero-shot .shot-stage:not(:has(.shot-phone)) .shot-win { left: 5%; width: 90%; top: 7%; }
  .case-hero-shot .shot-phone { display: none; }
  .case-hero-shot .shot-stage--bp .shot-win { left: 5%; right: 5%; width: auto; bottom: -3%; }
}

@media (max-width: 640px) { .footer-word { font-size: 21vw; } }

@media (max-width: 640px) {
  .roles-table::after { content: "Таблица прокручивается вбок \2192"; display: block; font-size: 12px; color: var(--text-faint); padding: 10px 0 2px; }
  /* таблица состава на телефоне — карточками: название, состав, срок и цена друг под другом */
  .price-table { overflow: visible; }
  .price-table table, .price-table tbody, .price-table tr, .price-table td { display: block; min-width: 0; width: 100%; }
  .price-table thead { display: none; }
  .price-table tr { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
  .price-table td, .price-table td:first-child { padding: 0 0 10px; border: 0; }
  .price-table td:first-child { font-size: 20px; width: auto; max-width: none; padding-bottom: 12px; }
  .price-table td .link-arrow { display: inline-block; margin-top: 8px; }
  .price-table td:nth-child(3)::before { content: "Срок: "; color: var(--text-faint); }
  .price-table td:nth-child(3) { color: var(--text-dim); font-size: 14px; padding-bottom: 4px; }
  .price-table td.price { text-align: left; font-size: 22px; padding-top: 2px; }
  .price-table tbody tr:hover td { background: none; }
}

/* переносы: без висячих коротких слов в конце абзаца, заголовки ровными строками */
p, li, dd, .lead, .entry-what, .entry-bounds, .entry-text, .rung-what, .sit-a, .sit-r, .how-get, .tl p, .faq .answer { text-wrap: pretty; }
h1, h2, h3, .h1, .h2, .h3, .sit-q, summary { text-wrap: balance; }

/* заголовки не рвутся посреди слова: длинное слово уходит на строку целиком, размер подобран под ширину */
h1, h2, h3, .h1, .h2, .h3 { overflow-wrap: normal; word-break: normal; }
@media (max-width: 600px) {
  .hero--offer .h1 { font-size: clamp(23px, calc((100vw - 2 * var(--pad-x)) / 12), 40px); line-height: 1.06; }
}
@media (max-width: 900px) { .ladder--3 { grid-template-columns: minmax(0, 1fr); } }

/* B-41 проект в цифрах */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.stat { padding: clamp(22px, 2.4vw, 36px) clamp(18px, 2vw, 32px) clamp(22px, 2.4vw, 36px) 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.stat + .stat { padding-left: clamp(18px, 2vw, 32px); border-left: 1px solid var(--line); }
.stat:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.stat dt { font-family: var(--font); font-weight: 300; font-size: clamp(36px, 3.6vw, 60px); line-height: 1; letter-spacing: -0.03em; color: var(--gold-bright); }
.stat dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); max-width: 22em; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(4n + 1) { padding-left: clamp(18px, 2vw, 32px); border-left: 1px solid var(--line); } .stat:nth-child(2n + 1) { padding-left: 0; border-left: 0; } }

/* галерея экранов: десктопные экраны крупно (62 % ширины), телефон узкой колонкой; лента прокручивается */
.screens { display: flex; align-items: flex-start; }
.screens > .screen { flex: 0 0 min(62%, 940px); }
.screens > .screen--phone { flex: 0 0 clamp(220px, 22%, 300px); }
@media (max-width: 900px) { .screens > .screen { flex-basis: 86%; } .screens > .screen--phone { flex-basis: 62%; } }
@media (max-width: 600px) { .case-hero-copy .h1 { font-size: clamp(25px, 8vw, 34px); } }

/* B-23b команда карточками: одинаковые фото, руководители не выделяются */
.crew { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) var(--gap); }
.crew-card { display: grid; gap: 8px; align-content: start; }
.crew-photo { aspect-ratio: 4 / 5; border-radius: var(--r-card); border: 1px solid var(--line); background: #141317 center 22% / cover no-repeat; filter: grayscale(1) contrast(1.05) brightness(0.92); margin-bottom: 14px; transition: filter 0.8s var(--ease); }
.crew-card:hover .crew-photo { filter: grayscale(0.6) contrast(1.05) brightness(1); }
.crew-photo--empty { display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #2a2730, #121114); filter: none; }
.crew-photo--empty span { font-family: var(--font); font-weight: 300; font-size: clamp(48px, 5vw, 80px); color: var(--gold-dim); }
.crew-card h3 { font-size: clamp(19px, 1.5vw, 23px); font-weight: 400; letter-spacing: -0.01em; }
.crew-role { font-size: 13px; letter-spacing: 0.04em; color: var(--gold); }
.crew-text { font-size: 14.5px; line-height: 1.55; color: var(--text-dim); max-width: 32em; }
@media (max-width: 900px) { .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .crew { grid-template-columns: minmax(0, 1fr); } .crew-photo { aspect-ratio: 4 / 3.4; } }

/* B-43 функция крупно */
.showcase { display: grid; gap: clamp(64px, 8vw, 128px); }
.sc-item { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.sc-item--rev .sc-media { order: 2; }
.sc-media { margin: 0; display: grid; gap: 12px; }
.sc-frame { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: #f3f5f9; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); padding-top: 30px; }
.sc-frame::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 30px; background: #e9edf3; border-bottom: 1px solid #dde2ea; }
.sc-dots { position: absolute; left: 14px; top: 11px; display: flex; gap: 6px; z-index: 1; }
.sc-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c7ced9; }
.sc-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9.6; object-fit: cover; object-position: top center; }
.sc-media figcaption { font-size: 13px; color: var(--text-dim); }
.sc-copy { display: grid; gap: 16px; align-content: center; }
.sc-copy .h3 { font-size: clamp(24px, 2.1vw, 34px); line-height: 1.12; font-weight: 300; letter-spacing: -0.015em; }
.sc-copy p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.sc-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.sc-points li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-2); position: relative; }
.sc-points li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
@media (max-width: 900px) { .sc-item { grid-template-columns: minmax(0, 1fr); } .sc-item--rev .sc-media { order: 0; } }

/* B-44 галерея */
.gal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.gal-tabs button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--text-2); transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.gal-tabs button sup { font-size: 10px; color: var(--text-faint); margin-left: 2px; }
.gal-tabs button:hover { border-color: var(--line-3); color: var(--text); }
.gal-tabs button[aria-selected="true"] { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }
.gal-tabs button[aria-selected="true"] sup { color: rgba(11, 10, 12, 0.6); }
.gal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); grid-auto-flow: dense; }
.gal-item { margin: 0; display: grid; gap: 10px; align-content: start; }
.gal-item--wide { grid-column: span 2; }
.gal-item[hidden] { display: none; }
.gal-open { display: block; width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #f3f5f9; cursor: zoom-in; transition: transform 0.6s var(--ease), border-color var(--t-fast); }
.gal-open img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform 1.2s var(--ease); }
.gal-item--phone .gal-open img { aspect-ratio: 39 / 50; }
.gal-open:hover { border-color: var(--gold-dim); }
.gal-open:hover img { transform: scale(1.025); }
.gal-item figcaption { font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.gal-item figcaption span { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gal-grid { grid-template-columns: minmax(0, 1fr); } .gal-item--wide { grid-column: auto; } }
/* просмотр во весь экран */
.lb { border: 0; padding: 0; margin: 0; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--text); }
.lb[open] { display: grid; grid-template-rows: 1fr auto; }
.lb::backdrop { background: rgba(7, 6, 8, 0.92); backdrop-filter: blur(6px); }
.lb-stage { position: relative; overflow: auto; display: grid; place-items: start center; padding: clamp(16px, 4vw, 56px) clamp(8px, 4vw, 72px) 8px; }
.lb-stage img { max-width: min(100%, 1680px); height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); cursor: zoom-out; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 56px) 20px; font-size: 14px; color: var(--text-2); }
.lb-bar .lb-btns { display: flex; gap: 8px; flex: none; }
.lb-bar button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text); }
.lb-bar button:hover { border-color: var(--gold); color: var(--gold-bright); }
html.has-cursor .lb, html.has-cursor .lb * { cursor: auto; }
html.has-cursor .lb button { cursor: pointer; }
html.has-cursor .lb-stage img, html.has-cursor .gal-open, html.has-cursor .pl-view, html.has-cursor [data-zoom] { cursor: none; }
.sc-item--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
@media (max-width: 900px) { .sc-item--rev { grid-template-columns: minmax(0, 1fr); } }
.gal-open img { object-position: top left; }
@media (max-width: 560px) { .gal-tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--pad-x)); padding-right: var(--pad-x); scrollbar-width: none; } .gal-tabs button { flex: none; } .gal-tabs::-webkit-scrollbar { display: none; } }

/* форма: прикрепить файл, ошибка согласия */
.attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.attach-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.attach-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.attach-btn:hover { border-color: var(--gold); color: var(--text); }
.attach-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attach-input:focus-visible + .attach-list, .attach:focus-within .attach-btn { border-color: var(--gold); color: var(--text); }
.attach-list { min-width: 0; overflow-wrap: anywhere; }
.attach-list.bad { color: #ff7a74; }
.consent.is-error { color: #ff7a74; }
html.has-cursor .attach-btn { cursor: none; }
html.has-cursor .modal .attach-btn { cursor: pointer; }
.field .attach-input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.field .attach-btn { text-transform: none; letter-spacing: 0; font-size: 13px; margin: 0; color: var(--text-2); }
.field .attach-btn:hover { color: var(--text); }
.field-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--text-faint); }

/* B-45 сценарий в живом интерфейсе */
.pl { display: grid; gap: clamp(18px, 2vw, 28px); }
.pl-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-tabs button { display: grid; gap: 4px; text-align: left; padding: 14px 20px 15px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(14, 13, 18, 0.72); color: var(--text-2); font-size: 15.5px; line-height: 1.3; min-width: 220px; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.pl-tabs .pl-role { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.pl-tabs button:hover { border-color: var(--line-3); color: var(--text); }
.pl-tabs button[aria-selected="true"] { border-color: var(--gold-dim); background: rgba(235, 224, 178, 0.07); color: var(--text); }
.pl-tabs button[aria-selected="true"] .pl-role { color: var(--gold); }
.pl-track { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.pl-track[hidden] { display: none; }
.pl-stage { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #eef1f6; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.85); }
.pl-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #e3e7ee; border-bottom: 1px solid #d6dbe4; }
.pl-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c3cad6; }
.pl-bar span { margin-left: 12px; padding: 4px 12px; border-radius: 7px; background: #f4f6fa; font-size: 12px; color: #5d6676; letter-spacing: 0.01em; }
.pl-view { position: relative; overflow: hidden; background: #f0f2f7; }
.pl-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.55s var(--ease); }
.pl-frame.is-on { opacity: 1; }
.pl-cursor { position: absolute; left: 50%; top: 50%; width: clamp(16px, 1.6vw, 24px); height: clamp(16px, 1.6vw, 24px); margin: -2px 0 0 -3px; pointer-events: none; opacity: 0; z-index: 2; transition: left 0.95s cubic-bezier(0.55, 0.05, 0.3, 1), top 0.95s cubic-bezier(0.55, 0.05, 0.3, 1), opacity 0.3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.pl-cursor svg { width: 100%; height: 100%; fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; transform: rotate(-12deg); }
.pl-cursor.is-on { opacity: 1; }
.pl-cursor::after { content: ""; position: absolute; left: -14px; top: -14px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(42, 163, 245, 0.85); opacity: 0; transform: scale(0.3); }
.pl-cursor.is-click::after { animation: pl-click 0.55s var(--ease); }
@keyframes pl-click { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.4); } }
.pl-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(17, 17, 22, 0.66); color: #fff; opacity: 0; transition: opacity var(--t-fast); }
.pl-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pl-view:hover .pl-zoom, .pl-zoom:focus-visible { opacity: 1; }
.pl-under { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(16px, 3vw, 48px); align-items: start; }
.pl-now { display: grid; gap: 6px; margin: 0; min-height: 3.2em; }
.pl-now-n { font-family: var(--font-display, inherit); font-size: 12px; letter-spacing: 0.14em; color: var(--gold); }
.pl-now-t { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: var(--text); }
.pl-steps { list-style: none; margin: 0; padding: 4px 0 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.pl-steps button { width: 100%; display: grid; gap: 8px; padding: 0 0 6px; text-align: left; color: var(--text-faint); font-size: 12px; letter-spacing: 0.06em; }
.pl-steps .pl-prog { order: -1; display: block; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.pl-steps .pl-prog i { display: block; height: 100%; width: 0; background: var(--gold); }
.pl-steps .pl-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-steps li { position: relative; }
.pl-steps button:hover { color: var(--text); }
.pl-steps button:hover .pl-prog { background: var(--line-3); }
.pl-steps button[aria-current="step"] { color: var(--gold-bright); }
.pl-steps button.is-done .pl-prog i { width: 100%; background: var(--gold-dim); }
.pl-ctrl { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-faint); }
.pl-play { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text); flex: none; }
.pl-play:hover { border-color: var(--gold); }
.pl-play svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-play .i-play { display: none; fill: currentColor; stroke: none; }
.pl-play[data-state="pause"] .i-pause { display: none; }
.pl-play[data-state="pause"] .i-play { display: block; }
html.has-cursor .pl-tabs button, html.has-cursor .pl-steps button, html.has-cursor .pl-play, html.has-cursor .pl-zoom { cursor: pointer; }
@media (max-width: 900px) {
  .pl-tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--pad-x)); padding-right: var(--pad-x); scrollbar-width: none; }
  .pl-tabs::-webkit-scrollbar { display: none; }
  .pl-tabs button { min-width: 0; flex: none; }
  .pl-under { grid-template-columns: minmax(0, 1fr); }
  .pl-steps { order: -1; }
  .pl-bar { height: 26px; } .pl-bar span { display: none; }
  .pl-stage { border-radius: 12px; }
  .pl-zoom { opacity: 1; width: 34px; height: 34px; right: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pl-frame, .pl-cursor { transition: none; } .pl-cursor { display: none; } }

/* B-46 контекст кейса */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.story-head { position: sticky; top: calc(var(--header-h, 72px) + 32px); }
.story-head .sec-head { margin-bottom: 0; }
.story-body { display: grid; gap: 0; border-top: 1px solid var(--line); }
.story-item { padding: clamp(22px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.story-k { margin: 0; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.story-t { margin: 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; font-weight: 400; color: var(--text); letter-spacing: -0.01em; }
.story-item p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--text-2); max-width: 62ch; }
@media (max-width: 900px) { .story { grid-template-columns: minmax(0, 1fr); } .story-head { position: static; } }

/* первый экран кейса со снимком живой системы */
.case-hero-live { grid-column: 1 / -1; margin: clamp(32px, 4.5vw, 64px) 0 0; display: grid; gap: 12px; }
.case-hero-live .pl-stage img { display: block; width: 100%; height: auto; }
.case-hero-live figcaption, .sc-media figcaption { font-size: 13px; color: var(--text-dim); }

/* витрина: снимок целиком, без обрезки */
.sc-frame { padding-top: 0; background: #eef1f6; }
.sc-frame::before { display: none; }
.sc-frame .pl-bar { height: 30px; }
.sc-frame img { aspect-ratio: auto; object-fit: initial; height: auto; }
.sc-dots { display: none; }

/* галерея: снимки в исходных пропорциях */
.gal-grid { display: block; columns: 3 300px; column-gap: clamp(16px, 1.8vw, 28px); }
.gal-item { break-inside: avoid; margin: 0 0 clamp(20px, 2vw, 32px); }
.gal-open img { aspect-ratio: auto; object-fit: initial; height: auto; }
.gal-item--phone .gal-open { max-width: 300px; }
@media (max-width: 560px) { .gal-grid { columns: 1; } }

/* форма: поля в ряду выравниваются по верху, подсказка не сдвигает соседнее поле */
.field { align-content: start; }
.form .form-head .h2 { font-size: clamp(30px, 2.7vw, 46px); line-height: 1.04; }
.form .form-head p { font-size: 16px; line-height: 1.55; max-width: 52ch; }
.form .row2 { align-items: start; }
.field--msg::after { display: none; }
.field:has(.field-hint)::after { display: none; }
.modal-panel > .modal-form { width: 100%; max-width: none; margin: 0; }
.pl { justify-items: stretch; }
.case-meta-row b { color: var(--text-2); }  .pl-tabs button { min-width: 0; flex: 1 1 0; }
.pl-tabs button { align-content: space-between; }
.sit-n { display: block; font-size: 12px; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 10px; }
/* команда: единая фотосерия 2026, цвет без обесцвечивания */
.crew-photo { filter: saturate(0.9) brightness(0.96); background-position: center 18%; }
.crew-card:hover .crew-photo { filter: saturate(1) brightness(1); }
/* фото команды обычными img: браузер повторяет загрузку при сбое (site.js, data-retry) */
.crew-photo, .person .avatar[data-photo] { overflow: hidden; position: relative; }
.crew-photo img, .person .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.person .avatar img { object-position: center 20%; }

/* ===== кейс: шлифовка (lab-54) ===== */
/* подзаголовки в теле кейса — текстовым шрифтом: широкий акцидентный Unbounded остаётся для H1/H2 и цифр */
.story-t, .sc-copy .h3, .decision h3, .tl h3 { font-family: var(--font-text); font-weight: 500; letter-spacing: -0.012em; }
.story-t { font-size: clamp(19px, 1.45vw, 22px); line-height: 1.3; }
.sc-copy .h3 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.2; font-weight: 500; }
.story-k, .decision .d-label, .tl .tl-when, .sc-copy .eyebrow { font-family: var(--font-text); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; }
.story-item p, .sc-copy p { font-size: 16px; line-height: 1.65; }

/* вкладки сценариев: одна строка, ровные */
.pl-tabs { gap: 8px; }
.pl-tabs button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 500; text-align: center; white-space: nowrap; }
@media (min-width: 901px) { .pl-tabs { display: grid; grid-template-columns: repeat(var(--tabs, 5), minmax(0, 1fr)); } }
.pl-under { margin-top: 2px; }
.pl-now-t { font-size: clamp(16px, 1.2vw, 18px); }

/* таймлайн: линия с точками вместо пяти карточек */
.timeline--rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; padding-top: 28px; }
.timeline--rail::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg, var(--gold-dim), var(--line-2) 70%); }
.timeline--rail .tl { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 clamp(14px, 1.6vw, 28px) 0 0; min-height: 0; gap: 10px; position: relative; }
.timeline--rail .tl::before { content: ""; position: absolute; left: 0; top: -27px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink, #0b0a0c); border: 1px solid var(--gold); }
.timeline--rail .tl h3 { font-size: 17px; line-height: 1.3; }
.timeline--rail .tl p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.timeline--rail .tl .tl-you { border-top: 0; padding-top: 4px; color: var(--text-dim); font-size: 13px; }
@media (max-width: 900px) {
  .timeline--rail { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 26px; gap: 28px; }
  .timeline--rail::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; background: linear-gradient(180deg, var(--gold-dim), var(--line-2)); }
  .timeline--rail .tl::before { left: -26px; top: 3px; }
}

/* решения: ровная сетка, больше воздуха и кегля */
.decisions { gap: 14px; }
.decision { padding: clamp(24px, 2.2vw, 34px); gap: 12px; }
.decision h3 { font-size: 18px; line-height: 1.3; }
.decision p { font-size: 15px; line-height: 1.62; color: var(--text-2); }

/* галерея: компактный ряд превью одной высоты, остальное в просмотре */
.gal--compact .gal-grid { display: grid; columns: auto; grid-template-columns: repeat(var(--gc, 4), minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.gal--compact .gal-item { margin: 0; }
.gal--compact .gal-item[hidden] { display: none; }
.gal--compact .gal-open img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.gal--compact .gal-item figcaption { font-size: 13px; }
.gal-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(20px, 2vw, 32px); }
.gal-note { margin: 0; font-size: 13px; color: var(--text-faint); }
html.has-cursor [data-gal-all] { cursor: pointer; }
@media (max-width: 900px) { .gal--compact .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* витрина прокторинга: подпись и пункты легче */
.sc-points li { font-size: 14.5px; color: var(--text-2); }
.showcase { gap: clamp(56px, 7vw, 112px); }
@media (max-width: 900px) { .pl-tabs button { flex: 0 0 auto; min-width: max-content; } }

/* B-47 типы проектов */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan { padding: clamp(24px, 2.2vw, 34px); display: flex; flex-direction: column; gap: 12px; }
.plan-n { font-family: var(--font); font-size: 12px; letter-spacing: 0.1em; color: var(--gold); }
.plan-t { font-family: var(--font-text); font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -0.012em; }
.plan-sub { font-size: 15px; color: var(--text-dim); margin: 0 0 6px; }
.plan .list-label { margin-top: 8px; }
.plan ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan ul li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.plan ul li::before { content: ""; position: absolute; left: 1px; top: 0.62em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); }
.plan-cond { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); margin: 6px 0 0; }
.plan-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: end; }
.plan-foot span { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.plan-foot b { font-weight: 400; font-size: 15px; color: var(--text); white-space: nowrap; }
.plan-foot div:last-child { text-align: right; }
.plan-foot .num { font-family: var(--font); font-weight: 300; font-size: clamp(19px, 1.5vw, 24px); color: var(--gold-bright); letter-spacing: -0.01em; }
.plan-terms { margin-top: clamp(20px, 2vw, 28px); display: grid; gap: 6px; max-width: 70ch; }
.plan-terms p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
@media (max-width: 1100px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan-foot b { white-space: normal; } }

/* B-48 состав работ */
.scope { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); border-top: 1px solid var(--line); }
.scope li { padding: clamp(20px, 2vw, 28px) 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.scope-n { font-family: var(--font); font-size: 12px; letter-spacing: 0.1em; color: var(--gold); }
.scope h3 { font-family: var(--font-text); font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.scope p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.scope-extra { margin-top: clamp(24px, 2.6vw, 40px); padding: clamp(22px, 2.2vw, 32px); }
.scope-extra ul { columns: 2 320px; column-gap: 40px; margin: 0; }
.scope-extra li { break-inside: avoid; font-size: 15px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 1000px) { .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .scope { grid-template-columns: minmax(0, 1fr); } }
.crew--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .crew--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crew-lead { margin-top: clamp(24px, 2.6vw, 40px); padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 8px; max-width: 70ch; }
.crew-lead p:last-child { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.principles .card h3 { font-family: var(--font-text); font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.principles .card p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.plan-head { display: grid; gap: 10px; align-content: start; }
@media (min-width: 1101px) { .plan-head { min-height: 9.6em; } }
.plan-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
.plan-term { margin: 0; font-size: 14px; color: var(--text-2); }
.plan-term span { display: inline; margin: 0 10px 0 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.plan-price { margin: 0; font-family: var(--font); font-weight: 300; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.15; letter-spacing: -0.015em; color: var(--gold-bright); }
.scope-extra ul { display: block; }
.scope-extra li { margin-bottom: 10px; padding-left: 18px; position: relative; }
.scope-extra li::before { content: "—"; position: absolute; left: 0; color: var(--text-faint); }
.scope-extra .list-label { margin-bottom: 14px; }
.scope-extra li::before { content: ""; top: 0.78em; width: 8px; height: 1px; background: var(--text-faint); }
.scope-extra li { padding-left: 24px; }
.scope-extra li::before { left: 2px; width: 10px; }
.timeline--rail .tl .tl-you { color: var(--text-2); opacity: 0.75; line-height: 1.5; }

/* плашка cookie */
.cookie { position: fixed; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 60; width: min(860px, calc(100vw - 2 * clamp(12px, 2vw, 28px) - 84px)); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 30px); border-radius: 18px; background: rgba(28, 27, 31, 0.94); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(16px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.cookie.is-in { opacity: 1; transform: none; }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; flex: 1 1 auto; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.cookie a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold-dim); text-underline-offset: 3px; }
.cookie .pill { flex: none; padding: 15px 30px; }
html.has-cursor .cookie button, html.has-cursor .cookie a { cursor: pointer; }
@media (max-width: 640px) { .cookie { left: 10px; bottom: 10px; width: calc(100vw - 20px); flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; border-radius: 14px; } .cookie p { font-size: 12px; line-height: 1.45; } .cookie .pill { width: 100%; justify-content: center; padding: 11px 20px; } }

/* просмотр во весь размер: свой курсор «Увеличить» вместо значка */
[data-zoom], .pl-view { cursor: zoom-in; }
/* при своём курсоре кнопка увеличения скрыта от мыши, но доступна с клавиатуры */
html.has-cursor .pl-zoom { opacity: 0; pointer-events: none; }
html.has-cursor .pl-zoom:focus-visible { opacity: 1; pointer-events: auto; }
html.has-cursor body.modal-open .lb .cursor { display: block; }
html.has-cursor .lb, html.has-cursor .lb button { cursor: none; }
[data-zoom]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Яндекс.Карта на странице контактов */
.ymap { position: relative; margin: clamp(40px, 6vw, 88px) 0 0; height: clamp(420px, 46vw, 600px); border-radius: 24px; overflow: hidden; border: 1px solid var(--line-2); background: radial-gradient(120% 90% at 70% 40%, #24222a 0%, #141317 70%); isolation: isolate; }
.ymap::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(249, 232, 165, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(249, 232, 165, 0.05) 1px, transparent 1px); background-size: 48px 48px; z-index: 0; }
.ymap-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0.8s var(--ease); }
.ymap.is-live .ymap-canvas { opacity: 1; }
.ymap.is-live .ymap-pin--static { opacity: 0; }
.ymap [class*="ground-pane"] { filter: grayscale(1) invert(0.92) contrast(0.86) brightness(0.92); }
.ymap [class*="copyrights-pane"] { opacity: 0.55; }
.ymap-pin { position: relative; width: 0; height: 0; }
.ymap-pin--static { position: absolute; left: 62%; top: 50%; z-index: 2; transition: opacity 0.4s; }
.ymap-pin-logo { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #17161b; border: 1.5px solid #f9e8a5; box-shadow: 0 12px 30px -6px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(249, 232, 165, 0.12); }
.ymap-pin-logo svg { width: 30px; height: auto; display: block; }
.ymap-pin-pulse { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid rgba(249, 232, 165, 0.6); animation: ymapPulse 2.6s var(--ease) infinite; }
@keyframes ymapPulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ymap-pin-pulse { animation: none; opacity: 0; } }
.ymap-card { position: absolute; z-index: 3; left: clamp(16px, 2.4vw, 32px); top: clamp(16px, 2.4vw, 32px); width: min(380px, calc(100% - 32px)); padding: clamp(20px, 2vw, 28px); border-radius: 18px; background: rgba(23, 22, 27, 0.9); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8); }
.ymap-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--text); margin-bottom: 14px; }
.ymap-brand svg { width: 26px; height: auto; }
.ymap-addr { margin: 0 0 6px; font-size: 17px; line-height: 1.45; color: var(--text); }
.ymap-hours { margin: 0 0 20px; font-size: 14px; color: var(--text-2); }
.ymap-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ymap.is-off .ymap-pin--static { opacity: 1; }
@media (max-width: 640px) {
  .ymap { height: auto; display: flex; flex-direction: column; }
  .ymap-canvas, .ymap::before { position: relative; height: 320px; inset: auto; }
  .ymap::before { position: absolute; inset: 0 0 auto 0; height: 320px; }
  .ymap-canvas { position: relative; }
  .ymap-pin--static { left: 50%; top: 160px; }
  .ymap-card { position: relative; left: auto; top: auto; width: auto; margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--line-2); }
}

/* honeypot: поле для ботов, людям не видно и не доступно с клавиатуры */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Состав работ: дополнительные работы карточками с пояснением; ответы FAQ из нескольких абзацев */
.scope-extra-label { margin-top: clamp(40px, 4vw, 64px); margin-bottom: 18px; }
.scope-extra-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.scope-extra-grid li { padding: clamp(20px, 2vw, 28px); display: grid; gap: 8px; align-content: start; }
.scope-extra-grid h3 { font-family: var(--font-text); font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.scope-extra-grid p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
@media (max-width: 1000px) { .scope-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .scope-extra-grid { grid-template-columns: minmax(0, 1fr); } }
.faq .answer p { margin: 0; }
.faq .answer p + p { margin-top: 0.8em; }
.scope[style*="--cols"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.scope[style*="--cols"] p { max-width: 60ch; }
@media (max-width: 640px) { .scope[style*="--cols"] { grid-template-columns: minmax(0, 1fr); } }
.hero-price .term.strong { font-size: 16px; color: var(--text); letter-spacing: 0; margin-bottom: 4px; }
.plan-terms--box { max-width: none; padding: clamp(22px, 2.2vw, 32px); margin-top: var(--gap); }
.plan-terms--box .list-label { margin-bottom: 14px; }
.plan-terms--box ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(24px, 3vw, 48px); }
.plan-terms--box li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.plan-terms--box li::before { content: ""; position: absolute; left: 2px; top: 0.8em; width: 10px; height: 1px; background: var(--gold); }
@media (max-width: 760px) { .plan-terms--box ul { grid-template-columns: minmax(0, 1fr); } }
/* команда на телефоне: фото слева, текст справа, без узких колонок */
@media (max-width: 560px) {
  .crew, .crew--4 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .crew-card { grid-template-columns: 108px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .crew-card .crew-photo { grid-row: 1 / span 3; aspect-ratio: 4 / 5; margin-bottom: 0; align-self: start; }
  .crew-card h3 { font-size: 19px; }
  .crew-card .crew-text { font-size: 14px; }
}
/* ситуации без ссылки: колонка под ссылку не резервируется, текст занимает всю правую часть */
@media (min-width: 1001px) {
  .sit:not(:has(.link-arrow)) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .sit:not(:has(.link-arrow)) .sit-a, .sit:not(:has(.link-arrow)) .sit-r { max-width: 62ch; }
  .sit .sit-r { margin-top: 6px; }
}

/* Ряды карточек: номер, заголовок, описание и нижняя строка (цена, срок, итог этапа) стоят на одной линии во всём ряду */
@supports (grid-template-rows: subgrid) {
  .ladder { align-items: stretch; }
  .ladder .rung:has(> :nth-child(4):last-child) { grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; min-height: 0; align-content: stretch; }
  .ladder .rung:has(> :nth-child(3):last-child) { grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; min-height: 0; align-content: stretch; }
  .ladder .rung .rung-what { align-self: start; }
  .ladder .rung .rung-price { align-self: end; margin-top: 8px; }
  .timeline .tl:has(> :nth-child(4):last-child) { grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; align-content: stretch; }
  .timeline .tl:has(> :nth-child(3):last-child) { grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; align-content: stretch; }
  .timeline .tl > * { align-self: start; }
  .timeline .tl > .tl-you { margin-top: 0; }
  /* карточки тарифов: шапка, подпись списка, список, условие и цена на одной линии во всём ряду */
  /* только когда карточки стоят в ряд: в ленте на телефоне строки растягивались по высоте самой длинной карточки
     и между подзаголовком и списком оставался провал */
  @media (min-width: 1101px) {
    .plans .plan:has(> :nth-child(5):last-child) { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 12px; }
    .plans .plan > .list-label { align-self: end; }
    .plans .plan > ul, .plans .plan > .plan-cond { align-self: start; }
    .plans .plan > .plan-foot { margin-top: 0; align-self: end; }
  }
}
@supports not (grid-template-rows: subgrid) {
  .ladder .rung { display: flex; flex-direction: column; }
  .ladder .rung .rung-price { margin-top: auto; }
}
/* парные панели («Входит / Отдельно», «Подходит, если / Начать с другого») одной высоты */
.inout--2 { align-items: stretch; }

/* руководство под карточками команды: без фото, двумя колонками */
.crew-lead--people { max-width: none; }
.crew-lead-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); }
.crew-lead-grid > div { display: grid; gap: 6px; align-content: start; }
.crew-lead--people .crew-lead-name { margin: 0; font-size: 17px; color: var(--text); font-weight: 400; }
.crew-lead--people .crew-lead-name span { display: block; margin-top: 2px; font-size: 13px; color: var(--gold); }
.crew-lead--people .crew-lead-grid p:last-child { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 640px) { .crew-lead-grid { grid-template-columns: minmax(0, 1fr); } }
/* поле задачи на телефоне вмещает подсказку из двух примеров целиком */
@media (max-width: 640px) { .field--msg textarea { min-height: 11.5em; } }

/* форма и окно заявки: спокойные подсказки, сплошная панель, контакты значками */
.field input::placeholder, .field textarea::placeholder { color: rgba(244, 241, 234, 0.3); opacity: 1; }
.field label { color: rgba(244, 241, 234, 0.5); }
.consent { color: rgba(244, 241, 234, 0.48); }
.consent a { color: rgba(244, 241, 234, 0.66); }
.attach-list { font-size: 12.5px; color: rgba(244, 241, 234, 0.5); }
.attach-list:empty { display: none; }
.modal::backdrop { background: rgba(5, 4, 6, 0.82); }
.modal-panel { background: #0f0e12; border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); }
.modal-panel > .modal-form { padding: clamp(28px, 4vw, 48px); gap: 18px; }
.modal-form .form-head p { color: rgba(244, 241, 234, 0.56); max-width: 46ch; }
.modal-alt { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: rgba(244, 241, 234, 0.46); }
.modal-alt-links { display: flex; gap: 10px; }
.modal-alt .icon-link { width: 40px; height: 40px; color: var(--text-2); }
/* значок плавающей кнопки по центру и в Safari на iPhone */
.cbtn-btn { position: relative; }
.cbtn-btn svg { inset: 0; margin: auto; }
.modal-form textarea { min-height: 108px; }
@media (max-width: 640px) {
  .modal-panel > .modal-form { padding: 64px 20px 28px; }
  .modal-form textarea { min-height: 7.5em; }
  .modal-form .form-actions .pill { width: 100%; justify-content: center; }
  .modal-alt { flex-wrap: wrap; }
}

/* списки с плюсами: спокойная метка вместо знака, который хочется нажать */
.inout ul li::before { content: ""; top: 21px; left: 2px; width: 10px; height: 1px; background: var(--gold); }
.inout ul.no li::before { content: ""; background: var(--text-faint); }

/* телефон: ряды карточек листаются вбок; полоса под рядом показывает, где вы */
.hs-bar { display: none; }
@media (max-width: 640px) {
  .hs { display: flex !important; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--pad-x)); padding: 2px var(--pad-x) 4px !important; scroll-padding-inline: var(--pad-x); scrollbar-width: none; border-top: 0 !important; -webkit-overflow-scrolling: touch; }
  .hs::-webkit-scrollbar { display: none; }
  .hs > * { flex: 0 0 min(84%, 340px); scroll-snap-align: start; margin: 0 !important; top: auto !important; min-width: 0; }
  .hs::before { display: none !important; }
  .cases--4.hs { padding-bottom: 4px !important; }
  .crew.hs > * { flex-basis: min(72%, 280px); }
  .hs-bar { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
  .hs-bar.is-off { display: none; }
  .hs-track { flex: 1; height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
  .hs-track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); transition: width 0.25s var(--ease); }
  .hs-count { font-family: var(--font); font-size: 12px; letter-spacing: 0.08em; color: var(--text-faint); min-width: 3.4em; text-align: right; }
  .hs-count b { font-weight: 400; color: var(--text); }
  /* ситуации на телефоне: карточки */
  .sits.hs > .sit { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: rgba(255, 255, 255, 0.02); }
  .sits.hs .sit-r { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
  .sits.hs .link-arrow { justify-self: start; align-self: flex-start; }
  /* шкала этапов на телефоне: линия у каждой карточки */
  .timeline--rail.hs { padding-top: 10px !important; }
  .timeline--rail.hs .tl { padding: 26px 0 0 !important; border-top: 1px solid var(--line-2) !important; }
  .timeline--rail.hs .tl::before { top: -6px; }
  .timeline.hs:not(.timeline--rail) > * { min-height: 0; }
  /* состав работ: первые пункты и кнопка «показать весь» */
  ol.scope.is-cut > li:nth-child(n+6) { display: none; }
  .scope-more { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 14px; color: var(--text); font-size: 15px; text-align: left; }
  .scope-more em { font-style: normal; font-size: 13px; color: var(--text-faint); }
  /* чтение на телефоне: больше воздуха между блоками и внутри карточек */
  :root { --sec-pad: 88px; }
  section.tight { padding-block: 72px; }
  .sec-head { margin-bottom: 36px; }
  p, li { line-height: 1.62; }
}
@media (max-width: 640px) {
  .crew.hs .crew-card { display: flex; flex-direction: column; gap: 6px; }
  .crew.hs .crew-photo { width: 100%; aspect-ratio: 4 / 4.6; margin-bottom: 12px; grid-row: auto !important; }
  .hs > .tl { display: flex !important; flex-direction: column; gap: 12px; }
  .hs > .tl .tl-you { margin-top: auto; }
  .timeline--rail.hs .tl { border-radius: 0 !important; }
  .timeline--rail.hs .tl::before { left: 0 !important; right: auto !important; top: -6px !important; }
}

/* первый экран: цены по направлениям — ссылки, стрелка видна всегда */
.hero-offers i { opacity: 0.75; transform: none; }
.hero-offers a:hover i { opacity: 1; transform: translateX(4px); }
@media (max-width: 1000px) {
  .hero-offers a, .hero-offers li + li a { grid-template-columns: minmax(0, 1fr) auto 18px !important; column-gap: 12px; padding: 14px 0 !important; }
  .hero-offers i { display: block !important; position: static; grid-column: 3; grid-row: 1 / span 2; align-self: center; opacity: 1; transform: none !important; font-size: 16px; }
  .hero-offers .ho-label { color: var(--text); }
  /* строчная раскладка ссылки (название | цена | стрелка) — только в один столбец: в три колонки на 620–1000 px
     название ложилось на цену, стрелка — на соседнюю плашку */
  .hero-offers { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .hero-offers li + li { border-left: 0; border-top: 1px solid var(--line); }
  .hero-offers .ho-label { grid-column: 1; grid-row: 1; }
  .hero-offers .ho-term { grid-column: 1; grid-row: 2; }
  .hero-offers b { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* мобильное меню: «Что делаем» и «Для кого» раскрываются, почта и Telegram со значками */
.menu-groups { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; border-top: 0; }
.menu-group { display: block; border-bottom: 1px solid var(--line); }
.menu-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; font-family: var(--font); font-weight: 300; font-size: clamp(21px, 5.6vw, 28px); letter-spacing: -0.01em; line-height: 1.2; cursor: pointer; }
.menu-group summary::-webkit-details-marker { display: none; }
.menu-group summary i { position: relative; width: 14px; height: 14px; flex: none; }
.menu-group summary i::before, .menu-group summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--gold); transition: transform 0.35s var(--ease); }
.menu-group summary i::after { transform: rotate(90deg); }
.menu-group[open] summary i::after { transform: rotate(0deg); }
.menu-group[open] summary { color: var(--gold-bright); }
.menu-sub { display: grid; padding: 0 0 14px 2px; }
.menu-sub a { font-size: 16px; line-height: 1.35; color: var(--text-2); padding: 8px 0; }
.menu-sub a:hover, .menu-sub a:focus-visible { color: var(--gold-bright); }
.menu-links { gap: 10px 22px; }
.menu-links a { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); }
.menu-links .icon-link { width: 34px; height: 34px; color: var(--gold); }
.menu-links a:hover .icon-link { color: var(--ink); background: var(--gold-bright); border-color: var(--gold-bright); }
#menu > * { flex-shrink: 0; }
#menu .menu-groups { margin-top: -26px; }

/* переход в конце блока («Все проекты» и т. п.): полоса на всю ширину контейнера */
.sec-action { display: block; margin-top: clamp(36px, 4vw, 64px); }
.more-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(22px, 2.4vw, 34px) 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); color: var(--text); }
.more-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.more-label { font-family: var(--font); font-weight: 300; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.15; letter-spacing: -0.015em; transition: color 0.4s var(--ease); }
.more-go { flex: none; width: clamp(52px, 4.4vw, 68px); height: clamp(52px, 4.4vw, 68px); border-radius: 50%; border: 1px solid var(--gold-dim); color: var(--gold); display: grid; place-items: center; transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease); }
.more-go svg { width: 40%; height: 40%; }
.more-band:hover::after, .more-band:focus-visible::after { transform: scaleX(1); }
.more-band:hover .more-label { color: var(--gold-bright); }
.more-band:hover .more-go, .more-band:focus-visible .more-go { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); transform: translateX(4px); }
.more-band:focus-visible { outline: none; }
html.has-cursor .more-band { cursor: none; }
@media (max-width: 640px) { .more-label { font-size: 20px; } .more-band { padding: 20px 0; } .hs-bar + .sec-action, .scope-more + .sec-action { margin-top: 28px; } }
@media (min-width: 641px) { .scope-more { display: none; } }

/* знак Delba вращается вокруг своего центра симметрии (он ниже середины рамки) */
.brand-mark, .entry-mark { transform-origin: 50.1% 61.4%; }
.icon-link svg, .cbtn-pop svg, .modal-alt svg { display: block; flex: none; }

/* плавная смена фона и цвета у карточек и значков */
.entry, .card, .glass.is-link { transition: transform 0.7s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease); }
.entry h3, .card h3 { transition: color 0.5s var(--ease); }
.icon-link { transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease); }
.cbtn-panel > a { transition: background 0.35s var(--ease), color 0.35s var(--ease); }
/* свой курсор: системная «рука» над значками не нужна (кроме окна заявки, где свой курсор не рисуется) */
html.has-cursor .icon-link, html.has-cursor .cbtn-btn, html.has-cursor .cbtn-panel a { cursor: none; }
html.has-cursor .modal .icon-link, html.has-cursor .modal-close { cursor: pointer; }
.sc-cur > span { will-change: transform; }
.faq details.is-closing summary::before { transform: rotate(90deg); } .faq details.is-closing summary { color: inherit; }

/* прикреплённые файлы: имя и кнопка «убрать» */
.attach-list.has-files { display: flex; flex-wrap: wrap; gap: 8px; }
.attach-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 6px 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); }
.attach-file > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; }
.attach-file button { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--text-dim); transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.attach-file button svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.attach-file button:hover, .attach-file button:focus-visible { background: rgba(244, 241, 234, 0.1); color: var(--text); outline: none; }
html.has-cursor .modal .attach-file button { cursor: pointer; }

/* хлебные крошки на телефоне: одна строка, длинное название текущей страницы сокращается многоточием */
@media (max-width: 640px) {
  .crumbs ol { flex-wrap: nowrap; gap: 8px; font-size: 12.5px; white-space: nowrap; min-width: 0; }
  .crumbs li { gap: 8px; flex: none; }
  .crumbs li + li::before { width: 10px; }
  .crumbs li:last-child { flex: 1 1 auto; min-width: 0; display: flex; }
  .crumbs li:last-child > * , .crumbs li:last-child { overflow: hidden; text-overflow: ellipsis; }
  .crumbs li:last-child span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 640px) { .crumbs li:last-child > span, .crumbs li:last-child > a { display: block; white-space: nowrap !important; flex: 1 1 auto; } }

/* окна: плавный уход при закрытии, фон затемняется и светлеет плавно */
@keyframes modal-out { to { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes bd-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bd-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dlg-out { to { opacity: 0; } }
.modal[open]::backdrop, .lb[open]::backdrop { animation: bd-in 0.4s ease both; }
.modal.is-closing .modal-panel { animation: modal-out 0.28s cubic-bezier(.4,0,1,1) forwards; }
.modal.is-closing::backdrop, .lb.is-closing::backdrop { animation: bd-out 0.28s ease forwards; }
.lb.is-closing { animation: dlg-out 0.24s ease forwards; }
@media (prefers-reduced-motion: reduce) { .modal.is-closing .modal-panel, .lb.is-closing { animation: none; } }

/* таблица ролей: подсветка строки с отступами по краям и плавно */
/* таблица в пределах колонки: поля подсветки строки за счёт внутренних отступов, без выхода за контейнер */
.roles-table table { width: 100%; border-collapse: separate; border-spacing: 0; }
.roles-table th:first-child, .roles-table td:first-child { padding-left: 14px !important; }
.roles-table th:last-child, .roles-table td:last-child { padding-right: 14px; }
.roles-table td { transition: background 0.4s var(--ease); }
.roles-table tr:hover td { background: rgba(244, 241, 234, 0.035); }
.roles-table tr td:first-child { border-radius: 10px 0 0 10px; }
.roles-table tr td:last-child { border-radius: 0 10px 10px 0; }

/* ссылка с подчёркиванием: плавная смена цвета при наведении */
.link-u { color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-dim); transition: color 0.4s var(--ease), text-decoration-color 0.4s var(--ease); }
.link-u:hover, .link-u:focus-visible { color: var(--gold-bright); text-decoration-color: var(--gold-bright); }

/* ряды-слайдеры на телефоне: промежуток равен полю страницы, край соседней карточки слева не выглядывает */
@media (max-width: 640px) {
  .hs { gap: var(--pad-x) !important; }
  .hs > * { flex-basis: calc(100vw - 2 * var(--pad-x) - 34px); max-width: 360px; }
  .crew.hs > * { flex-basis: calc(100vw - 2 * var(--pad-x) - 90px); }
}

/* мобильное меню: группа раскрывается плавно (высоту ведёт скрипт) */
.menu-group summary i::after { transition: transform 0.4s var(--ease); }
.menu-group.is-closing summary i::after { transform: rotate(90deg); }
.menu-group.is-closing summary { color: inherit; }

/* принципы работы: карточки при прокрутке собираются стопкой одна под другую */
.principles { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; padding-bottom: 8px; }
.principles .card { position: sticky; top: calc(96px + var(--k, 0) * 16px); background: #121116; border-color: var(--line-2); box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, 0.75); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 4vw, 72px); align-items: start; padding: clamp(26px, 3vw, 44px); min-height: clamp(150px, 14vw, 200px); transform-origin: 50% 0; }
.principles .card:nth-child(1) { --k: 0; } .principles .card:nth-child(2) { --k: 1; } .principles .card:nth-child(3) { --k: 2; } .principles .card:nth-child(4) { --k: 3; }
.principles .card h3 { font-family: var(--font); font-weight: 300; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.2; letter-spacing: -0.01em; }
.principles .card p { font-size: 15.5px; line-height: 1.65; }
@media (max-width: 760px) {
  .principles .card { grid-template-columns: minmax(0, 1fr); top: calc(76px + var(--k, 0) * 12px); min-height: 0; }
}

/* «Сначала разбираемся в задаче»: номер, вопрос и текст на одной высоте во всех карточках ряда */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1001px) {
    .q4 .card:has(> :nth-child(3):last-child) { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 14px; }
  }
}

/* четыре типа проектов в ряд; «что входит» абзацем */
.plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
@supports (grid-template-rows: subgrid) {
  .plans .plan:has(> :nth-child(4):last-child) { grid-row: span 4; display: grid; grid-template-rows: subgrid; }
}
.tl-text { display: grid; gap: 10px; }
.tl-text p { margin: 0; }

/* панель связи: плотная подложка и плавный уход */
.cbtn-panel { background: #121116; border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
@keyframes cbtn-out { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
.cbtn-panel.is-closing { animation: cbtn-out 0.22s ease-in forwards; pointer-events: none; }

/* ошибки полей формы */
.field-err { font-size: 12px; color: #ff8f88; }

/* статус модуля отдельной строкой с одинаковым отступом */
.card-chip { margin: 2px 0 0; }

/* удаление вложения: зона нажатия около 40 px при маленьком значке */
.attach-file button { position: relative; }
.attach-file button::after { content: ""; position: absolute; inset: -9px; }

/* вкладки сценариев: длинная подпись сохраняет поля и переносится */
.pl-tabs button { padding-inline: 20px; }
.pl-tabs button > span:not(.pl-role), .pl-tabs button { white-space: normal; }

/* окно заявки на телефоне: крестик закреплён и виден при прокрутке формы */
@media (max-width: 640px) {
  .modal-close { position: sticky; top: 12px; margin: 12px 12px -52px auto; background: #0f0e12; }
  .modal-panel { display: block; }
}

/* контакты: телефон и почта сразу ссылками */
.contact-link { color: inherit; font: inherit; transition: color 0.4s var(--ease); }
.contact-link:hover, .contact-link:focus-visible { color: var(--gold-bright); }

/* плеер: состояние автопоказа и пауза над экраном, а не под ним */
.pl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.pl-top .pl-ctrl { margin-left: auto; }
.pl-state { font-size: 13px; color: var(--text-dim); }

/* первый экран кейса на невысоком десктопе: роль, стек, статус и сайт в одну строку под описанием */
@media (min-width: 1001px) {
  .case-hero-copy { grid-column: 1 / -1; gap: 20px; }
  .case-hero-copy .lead { max-width: 52em; }
  .case-meta-row { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 14px clamp(28px, 4vw, 64px); }
  .case-meta-row > span { display: block; max-width: 30ch; }
}
/* вкладки сценариев: ширина по подписи, длинная подпись не сжимается */
.pl-tabs button { flex: 1 1 auto; }

.pr-n { display: block; margin-bottom: 10px; font-family: var(--font); font-size: 12px; letter-spacing: 0.1em; color: var(--gold); }
.roles-table th, .roles-table td { padding-left: 10px; padding-right: 10px; }
.roles-table th:first-child, .roles-table td:first-child { padding-left: 14px !important; }
.roles-table th:last-child, .roles-table td:last-child { padding-right: 14px; }
.pl-top > .pl-tabs { flex: 1 1 auto; min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .pl-top > .pl-tabs { flex-basis: 100%; } }
.pl > * { min-width: 0; }
.pl-top { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .pl-top > .pl-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .pl-top > .pl-tabs::-webkit-scrollbar { display: none; } .pl-top > .pl-tabs button { flex: 0 0 auto; } }

/* принципы: колода карточек. При прокрутке каждая следующая ложится на предыдущую,
   и у нижних остаётся видна полоса с номером и заголовком */
.principles .pr-card {
  --step: 76px;
  top: calc(var(--header-h, 72px) + 24px + var(--k, 0) * var(--step));
  display: grid; grid-template-columns: clamp(72px, 8vw, 120px) minmax(0, 5fr) minmax(0, 6fr); gap: 10px clamp(24px, 3.4vw, 56px); align-items: start;
  padding: 22px clamp(24px, 3vw, 44px) clamp(28px, 3vw, 40px); min-height: clamp(170px, 15vw, 210px);
  border-radius: 22px; border: 1px solid var(--line-2); border-top-color: rgba(235, 224, 178, 0.28);
  background: linear-gradient(180deg, #19171d 0%, #121116 46%, #0f0e12 100%);
  box-shadow: 0 -24px 60px -28px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.principles .pr-num { font-family: var(--font); font-weight: 300; font-size: clamp(40px, 4vw, 60px); line-height: 0.9; letter-spacing: -0.04em; color: var(--bg); text-shadow: -1px -1px 0 var(--gold-dim), 0 -1px 0 var(--gold-dim), 1px -1px 0 var(--gold-dim), 1px 0 0 var(--gold-dim), 1px 1px 0 var(--gold-dim), 0 1px 0 var(--gold-dim), -1px 1px 0 var(--gold-dim), -1px 0 0 var(--gold-dim); transition: color 0.6s var(--ease), text-shadow 0.6s var(--ease); }
.principles .pr-card:hover .pr-num { color: var(--gold); text-shadow: none; }
.principles .pr-card h3 { padding-top: 6px; font-family: var(--font); font-weight: 300; font-size: clamp(21px, 1.9vw, 30px); line-height: 1.18; letter-spacing: -0.012em; }
.principles .pr-card p { padding-top: 8px; margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.principles .pr-n { display: none; }
@media (max-width: 760px) {
  .principles .pr-card { --step: 56px; top: calc(64px + 12px + var(--k, 0) * var(--step)); grid-template-columns: 56px minmax(0, 1fr); padding: 18px 20px 24px; min-height: 0; }
  .principles .pr-num { font-size: 36px; }
  .principles .pr-card h3 { padding-top: 2px; font-size: 20px; }
  .principles .pr-card p { grid-column: 1 / -1; padding-top: 4px; }
}

/* архитектура и технологии */
.tech-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tech-cards .card .qn { font-size: 12px; letter-spacing: 0.08em; color: var(--gold); }
.tech-cards .card h3 { font-family: var(--font-text); font-weight: 500; font-size: 18px; line-height: 1.3; }
.tech-cards .card p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.tech-stack-label { margin-top: clamp(36px, 4vw, 56px); }
.tech-stack { margin: 0; border-top: 1px solid var(--line); }
.tech-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tech-row dt { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; }
.tech-row dd { margin: 0; font-family: var(--font); font-weight: 300; font-size: clamp(17px, 1.4vw, 21px); color: var(--text); }
@media (max-width: 900px) { .tech-cards { grid-template-columns: minmax(0, 1fr); } .tech-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .principles .pr-card { grid-template-columns: minmax(0, 1fr); gap: 8px; --step: 64px; }
  .principles .pr-num { font-size: 28px; }
  .principles .pr-card h3 { padding-top: 0; }
}
.lead-group { display: grid; gap: 12px; } .lead-group .lead { margin: 0; }

/* принципы v3: без «коробок». Строки-оглавление на фоне страницы с тонкой линией сверху;
   при прокрутке следующая строка наезжает на предыдущую, у собранных видна строка с номером и заголовком */
.principles { gap: 0 !important; border-bottom: 1px solid var(--line); }
.principles .pr-card {
  --step: 62px;
  top: calc(var(--header-h, 72px) + 16px + var(--k, 0) * var(--step));
  grid-template-columns: clamp(56px, 7vw, 104px) minmax(0, 5fr) minmax(0, 6fr); gap: 12px clamp(24px, 3.4vw, 56px);
  padding: 22px 0 clamp(30px, 3vw, 44px); min-height: 0;
  border: 0; border-top: 1px solid var(--line-2); border-radius: 0;
  background: var(--bg); box-shadow: 0 -30px 40px -30px rgba(0, 0, 0, 0.8);
  transform-origin: 50% 0;
}
.principles .pr-card::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--gold); transition: width 0.9s var(--ease); }
.principles .pr-card:hover::before { width: 100%; }
.principles .pr-num { font-family: var(--font); font-size: 13px; line-height: 1.6; letter-spacing: 0.1em; color: var(--gold); text-shadow: none; padding-top: 10px; }
.principles .pr-card:hover .pr-num { color: var(--gold-bright); }
.principles .pr-card h3 { padding-top: 0; font-size: clamp(22px, 2vw, 32px); line-height: 1.15; }
.principles .pr-card p { padding-top: 6px; font-size: 15.5px; }
@media (max-width: 760px) {
  .principles .pr-card { --step: 52px; top: calc(64px + 8px + var(--k, 0) * var(--step)); grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0 24px; }
  .principles .pr-num { padding-top: 0; }
  .principles .pr-card h3 { font-size: 21px; }
}

/* принципы v4: одна панель-оглавление, строки внутри неё собираются стопкой; фон строк = фон панели */
.principles { background: #0f0e13; border: 1px solid var(--line-2); border-radius: 24px; padding: 6px clamp(20px, 3vw, 48px) 10px; border-bottom: 1px solid var(--line-2); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.8); }
.principles .pr-card { background: #0f0e13; box-shadow: none; }
.principles .pr-card:first-child { border-top-color: transparent; }
.principles .pr-card:last-child { padding-bottom: clamp(22px, 2.4vw, 32px); }
@media (max-width: 760px) { .principles { border-radius: 18px; padding: 4px 18px 6px; } }
.principles .pr-card { --step: 96px; }
@media (max-width: 760px) { .principles .pr-card { --step: 44px; } }
/* шаг стопки ровно по первой строке заголовка: у собранной строки видна целая строка, без обрезанных букв */
.principles .pr-card { --pr-fs: clamp(22px, 2vw, 32px); --pr-pt: 22px; padding-top: var(--pr-pt); --step: calc(var(--pr-pt) + var(--pr-fs) * 1.15 + 3px); }
.principles .pr-card h3 { font-size: var(--pr-fs); line-height: 1.15; }
.principles .pr-num { padding-top: calc((var(--pr-fs) * 1.15 - 13px * 1.6) / 2); }
@media (max-width: 760px) {
  .principles .pr-card { --pr-pt: 18px; --step: calc(var(--pr-pt) + 13px * 1.6 + 4px); }
  .principles .pr-num { padding-top: 0; }
}
/* запас снизу: последняя строка успевает встать на своё место в стопке, третья не прячется под ней */
.principles { --pr-step: calc(22px + clamp(22px, 2vw, 32px) * 1.15 + 3px); padding-bottom: calc(var(--pr-step) * 2); }
@media (max-width: 760px) { .principles { --pr-step: calc(18px + 13px * 1.6 + 4px); } }
/* запас — содержимым, а не отступом: липкая строка ограничена контентной областью панели */
.principles { padding-bottom: 10px; }
.principles::after { content: ""; display: block; height: calc(var(--pr-step) * 3); }

/* принципы v5: подложка панели — отдельный слой, её высота уменьшается по мере сборки (переменная --ph);
   строки не липкие, их двигает скрипт */
.principles.is-stack { position: relative; isolation: isolate; background: none; border: 0; box-shadow: none; }
.principles.is-stack::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--ph, 100%); z-index: -1; background: #0f0e13; border: 1px solid var(--line-2); border-radius: 24px; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.8); }
.principles.is-stack::after { display: none; }
.principles.is-stack .pr-card { position: relative; top: auto; }
@media (max-width: 760px) { .principles.is-stack::before { border-radius: 18px; } }
/* номер, заголовок и описание на одной базовой линии */
.principles .pr-card { align-items: baseline; }
.principles .pr-num { padding-top: 0 !important; }
.principles .pr-card p { padding-top: 0; }

/* первый экран на телефоне: две кнопки во всю ширину одна под другой, вторая — контурная */
@media (max-width: 600px) {
  .cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta-row > .pill { width: 100%; }
  .cta-row > .link-arrow {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: 17px 24px; border: 1px solid var(--line-3); border-radius: var(--r-pill);
    font-size: 15px; line-height: 1.2; text-align: center; color: var(--text);
  }
  .cta-row > .link-arrow::before { display: none; }
  .cta-row > .link-arrow::after { color: var(--gold);
  }
}

/* карточки разной длины: ссылка и строка с типом проекта прижаты к нижнему краю */
.cases .case-card { display: flex; flex-direction: column; }
.cases .case-card .case-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.cases .case-card .case-body .case-meta { margin-top: auto; }


/* подпись над рядом карточек или списком отделена от него */
.container > .list-label { margin-bottom: 18px; }

/* ---------- карусель макетов ---------- */
.gstage { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.gs-main { position: relative; border-radius: clamp(14px, 1.4vw, 20px); overflow: hidden; border: 1px solid var(--line-2); background: #eef1f6; aspect-ratio: 16 / 8.6; touch-action: pan-y; }
.gs-track { position: absolute; inset: 0; }
.gs-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateX(3%) scale(0.985); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), visibility 0s 0.6s; }
.gs-slide.is-back { transform: translateX(-3%) scale(0.985); }
.gs-slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), visibility 0s; }
.gs-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gs-open img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.gs-slide--phone .gs-open { padding: clamp(14px, 2vw, 28px) 0; }
.gs-slide--phone .gs-open img { object-position: center; border-radius: 18px; }
.gs-nav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; border-radius: 50%; background: rgba(11, 10, 12, 0.78); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--t-fast), border-color var(--t-fast), transform 0.4s var(--ease); }
.gs-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gs-nav:hover { background: rgba(11, 10, 12, 0.92); border-color: var(--gold-dim); }
.gs-prev { left: 16px; } .gs-next { right: 16px; }
.gs-prev:hover { transform: translateX(-2px); } .gs-next:hover { transform: translateX(2px); }
.gs-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 24px; align-items: baseline; min-height: 3.2em; }
.gs-n { font-family: var(--font); font-size: 13px; letter-spacing: 0.08em; color: var(--text-faint); white-space: nowrap; }
.gs-n b { font-weight: 400; color: var(--gold-bright); }
.gs-t { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.gs-t span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-right: 12px; }
.gs-thumbs { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px; scroll-padding-inline: 2px; }
.gs-thumbs::-webkit-scrollbar { display: none; }
.gs-thumb { flex: 0 0 clamp(108px, 11vw, 150px); aspect-ratio: 16 / 10; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: #eef1f6; opacity: 0.5; transition: opacity var(--t-fast), border-color var(--t-fast); }
.gs-thumb--phone { flex-basis: clamp(56px, 5.4vw, 72px); }
.gs-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.gs-thumb--phone img { object-position: top center; }
.gs-thumb:hover { opacity: 0.85; }
.gs-thumb[aria-selected="true"] { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.gs-thumb:focus-visible, .gs-nav:focus-visible, .gs-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html.has-cursor .gs-open { cursor: none; }
@media (max-width: 760px) {
  .gs-main { aspect-ratio: 16 / 11; }
  .gs-nav { width: 40px; height: 40px; margin-top: -20px; }
  .gs-prev { left: 8px; } .gs-next { right: 8px; }
  .gs-cap { grid-template-columns: minmax(0, 1fr); }
  .gs-t span { display: block; margin: 0 0 4px; }
  .gs-thumbs { margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); scroll-padding-inline: var(--pad-x); }
  .gs-thumb { flex-basis: 96px; }
  .gs-thumb--phone { flex-basis: 48px; }
}
@media (prefers-reduced-motion: reduce) { .gs-slide, .gs-slide.is-on { transition: none; transform: none; } }
/* карточки направлений в ленте на телефоне: без выравнивания строк по соседним, нижняя строка прижата к низу */
/* класс .hs скрипт ставит и на десктопе, поэтому правила ленты — только внутри медиазапроса ленты */
@media (max-width: 640px) {
  .hs > .entry { display: flex !important; flex-direction: column; grid-row: auto !important; }
  .hs > .entry .entry-arrow, .hs > .entry .entry-price { margin-top: auto !important; align-self: stretch !important; }
  .hs > .entry .entry-text + .entry-arrow, .hs > .entry .dots + .entry-arrow { padding-top: 16px; }
  .hs > .rung { display: flex !important; flex-direction: column; grid-row: auto !important; }
  .hs > .rung .rung-price { margin-top: auto; align-self: stretch !important; }
  .sits.hs .sit:not(:has(.sit-r)) > .link-arrow { margin-top: auto; padding-top: 14px; }
}
/* несколько абзацев в карточках решений, этапов и экранов */
.how p + p { margin-top: 0.7em; }
.decision p + p, .sc-copy p + p { margin-top: -4px; }
.how .how-term { display: block; margin-top: 10px; font-family: var(--font); font-size: 15px; color: var(--gold-bright); letter-spacing: -0.005em; }
.sec-head .lead-group { max-width: var(--lead-max, 62ch); }

/* таблица ролей: объём доступа читается по индикатору, а не только по тексту ячейки */
.roles-table td.f, .roles-table td.l { white-space: normal; }
.roles-table td.f > span:last-child, .roles-table td.l > span:last-child { vertical-align: middle; }
.acc { display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: middle; transform: translateY(-1px); }
.acc i { width: 10px; height: 4px; border-radius: 2px; background: var(--line-3); }
.acc--f i { background: var(--gold); }
.acc--l i:first-child { background: var(--gold); }
.roles-table td.f { color: var(--text); }
.roles-table td.l { color: var(--text-2); }
.roles-table td.n { color: var(--text-faint); }
.acc-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 13px; color: var(--text-dim); }
.acc-legend li { display: inline-flex; align-items: center; }
.acc-none { display: inline-block; width: 23px; margin-right: 10px; color: var(--text-faint); }
.roles-table .acc { display: flex; width: max-content; margin: 0 0 9px; transform: none; }
.roles-table td.f, .roles-table td.l, .roles-table td.n { vertical-align: top; }
.roles-main { min-width: 0; }
.roles-table td.n > span[aria-hidden] { display: block; padding-top: 13px; }
.roles-table .acc i { width: 13px; }
/* длинные слова в подписях цифр («автоматизированных») переносятся по слогам, а не раздвигают колонку */
.stats > *, .stats dl > * { min-width: 0; }
.stats dd { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.stat { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 480px) {
  .stats { grid-template-columns: minmax(0, 1fr) !important; }
  /* цифра над подписью: значения вида «80 → 110» не помещались в узкую колонку слева */
  .stat, .stat + .stat, .stat:nth-child(n) { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0 !important; border-left: 0 !important; }
  .stat dt { font-size: 34px; white-space: nowrap; }
  .stat dd { max-width: none; }
}
/* подпись схемы или макета — в строке окна справа, не на рамке */
.shot-tag { margin-left: auto; padding-left: 1em; font-style: normal; font-size: 0.92em; letter-spacing: 0.02em; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shot-bar span { flex: 0 1 auto; min-width: 0; }
/* окно схемы обрезано нижним краем карточки: край растворяется, а не обрывается */
.shot-stage--bp .shot-win { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }

/* заголовки ступеней — тот же межстрочный, что у остальных заголовков карточек */
.rung h3 { line-height: 1.22; }
/* «Копировать» под телефоном и почтой — по левому краю, как «Открыть» под Telegram */
.copy-btn { justify-self: start; align-self: flex-start; text-align: left; }
/* экраны проекта на десктопе: все в ряд без обрезанного справа кадра */
@media (min-width: 900px) {
  .screens { overflow: visible; }
  .screens > .screen { flex: 1 1 0; min-width: 0; }
  .screens > .screen--phone { flex: 0 0 min(21%, 300px); }
}
/* ряды вкладок и таблицы, которые листаются вбок на телефоне: правый край растворяется, видно, что дальше есть ещё */
@media (max-width: 760px) {
  .pl-tabs, .gal-tabs, .roles-table, .price-table { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .pl-tabs.is-end, .gal-tabs.is-end, .roles-table.is-end, .price-table.is-end { -webkit-mask-image: none; mask-image: none; }
}
/* телефон: кнопка формы во всю ширину; точка-мишень для плавающей кнопки не занимает строку под кнопкой (было ~90 px пустоты) */
@media (max-width: 600px) {
  .form-actions { position: relative; }
  .form-actions > .pill { width: 100%; justify-content: center; }
  .form-actions > .contact-dot { position: absolute; right: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
  .ymap-actions > * { flex: 1 1 100%; justify-content: center; }
}
/* тарифы в ленте на телефоне: каждая карточка своей высоты, без пустоты под коротким списком */
@media (max-width: 640px) { .plans.hs { align-items: flex-start; } }
@media (min-width: 761px) { .pl-top { flex-wrap: nowrap; } .pl-top > .pl-tabs { flex: 1 1 0; } }
/* иконки-кнопки: при наведении фон золотой, иконка тёмная — в любом контексте (в окне заявки цвет иконки перебивал наведение) */
.modal-alt .icon-link:hover, .modal-alt .icon-link:focus-visible, .cbtn-panel .icon-link:hover, .contacts-list .icon-link:hover { color: var(--ink); background: var(--gold-bright); border-color: var(--gold-bright); }

/* модули группами: основные и направления развития; развитие отделено пунктирной рамкой и отступом */
.stack--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mod-group + .mod-group { margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.mod-group-head { display: grid; gap: 8px; margin-bottom: 18px; max-width: 62ch; }
.mod-group-head .list-label { margin: 0; }
.mod-group-head .dim { margin: 0; font-size: 15px; line-height: 1.6; }
.mod-group--ext .card { background: transparent; border-style: dashed; border-color: var(--line-3); }
.mod-group--ext .list-label { color: var(--gold); }
.mod-group-note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); max-width: 70ch; }
@media (max-width: 900px) { .stack--2 { grid-template-columns: minmax(0, 1fr); } }
/* страница никогда не шире экрана: временный выход элемента за край (анимация появления, закреплённый блок)
   на телефоне расширял область просмотра и мелко «отъезжал» всю страницу. clip, а не hidden: sticky и закрепление работают */
html, body { overflow-x: clip; }
/* подзаголовок перед шагами процесса; пункты списка с заголовком и пояснением */
.steps-head { display: grid; gap: 8px; padding: clamp(28px, 3vw, 44px) 0 8px; }
.steps-head .h3 { margin: 0; font-size: clamp(20px, 1.7vw, 26px); font-weight: 300; letter-spacing: -0.012em; }
.steps-head .dim { margin: 0; font-size: 15px; line-height: 1.6; max-width: 60ch; }
.now-card p + p { margin-top: 0.6em; }
li .li-t { display: block; font-weight: 500; color: var(--text); }
li .li-p { display: block; margin-top: 3px; font-size: 0.93em; color: var(--text-dim); line-height: 1.55; }
.inout .big span + span { margin-top: 6px; }

/* выпадающее меню «Что делаем»: плотный фон, контент страницы под ним не просвечивает и не мешает читать пункты */
/* сплошной фон без backdrop-filter: внутри шапки с собственным размытием вложенное размытие пропускало текст страницы насквозь */
.sub.glass { background: #111015; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line-2); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; }
/* мобильное меню: «Обсудить проект» во всю ширину, как кнопки первого экрана */
#menu .menu-cta { align-self: stretch; width: 100%; justify-content: center; }

/* поле задачи: растёт по тексту до потолка, ручное растягивание выключено */
.field textarea { resize: none; overflow-y: hidden; max-height: 22em; }
.demo-comment textarea { resize: none; }
/* метка на карте: внутри слоя Яндекс Карт свои правила box-sizing и выравнивания строк — знак центрируется явно */
.ymap-pin-logo, .ymap-pin-pulse { box-sizing: border-box; }
.ymap-pin-logo { display: block; line-height: 0; }
.ymap-pin-logo svg { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: 0; transform: translate(-50%, -50%); }
/* в окнах иконка внутри кнопки или ссылки наследует курсор кнопки, а не сбрасывается на стрелку */
html.has-cursor .modal a *, html.has-cursor .modal button *, html.has-cursor .modal label *, html.has-cursor .lb a *, html.has-cursor .lb button * { cursor: inherit; }
html.has-cursor .modal button, html.has-cursor .modal a, html.has-cursor .modal label { cursor: pointer; }
/* строки стопки двигает только прокрутка: общий для карточек плавный transition по transform догонял положение
   с задержкой 0,7 с, и после пересчёта (раскрыли вопрос ниже) строки «пролетали» вверх */
.principles.is-stack .pr-card { transition: none !important; }
.ymap.is-live .ymap-pin--static { display: none !important; }
/* таблица ролей на 7 колонок: заголовок над таблицей, таблица на всю ширину контейнера — на 1366 px колонка «Настройки» уходила за край */
.roles-wrap--wide { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.roles-wrap--wide .sec-head { max-width: 62ch; }

/* вопросы в две независимые колонки */
.faq.faq--cols { align-items: start; }
.faq-col { display: grid; align-content: start; min-width: 0; }
.faq.faq--cols details { border-bottom: 0; }
.faq.faq--cols .faq-col details:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 900px) {
  .faq.faq--cols { display: flex; flex-direction: column; }
  .faq.faq--cols .faq-col { display: contents; }
  .faq.faq--cols .faq-col details:last-child { border-bottom: 0; }
  .faq.faq--cols details[data-last] { border-bottom: 1px solid var(--line); }
}
/* лайтбокс: картинка по размеру окна, а не по размеру карточки, и по центру по вертикали */
/* margin: auto центрирует по вертикали, пока картинка помещается; высокий скриншот стоит сверху и прокручивается */
.lb-stage img { width: auto; height: auto; max-width: min(100%, 1680px); margin-block: auto; }
/* три карточки направлений в две колонки (планшет): третья на всю ширину, без пустой половины ряда */
@media (min-width: 601px) and (max-width: 1240px) {
  .entries:not(.entries--industries) > .entry:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* принципы на телефоне: без стопки, обычный список (QA-8) */
@media (max-width: 760px) {
  .principles:not(.is-stack) .pr-card { position: relative; top: auto; }
  .principles:not(.is-stack)::after { display: none; }
}

/* заголовок кейса на телефоне: самое длинное слово («благотворительного») помещается в ширину экрана;
   у коротких слов размер прежний (8vw) */
@media (max-width: 600px) { .case-hero-copy .h1 { font-size: clamp(22px, min(8vw, (100vw - 2 * var(--pad-x)) / (var(--lw, 10) * 0.69)), 34px); } }