/* longev.eu — сайт платформы. Дизайн-система повторяет портал
   (activehealth/frontend/src/theme.css): крем, белые поверхности, шалфейная
   зелень + золото, Saans/Inter, пилюли 9999px · контейнеры 24px · карточки
   16px. Шапка — копия шапки demo.longev.eu. */

/* Inter Variable едет с сайтом (как в сборке портала); лицензионный Saans
   берётся локальный, если стоит у смотрящего. Арабский, иврит, тайский и CJK
   Inter не покрывает — там работает системный шрифт, как и в портале. */
@font-face {
  font-family: 'Saans';
  src: local('Saans');
  font-weight: 400 652;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/inter-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --ink: #141414;
  --ink-70: #4a4740;
  --ink-50: #6e6b62;
  --ink-30: #99958a;
  --bg: #faf8f5;
  --surface: #ffffff;
  --bg-alt: #f0f2ea;
  --sage: #e4e7dc;
  --line: #e8e5de;
  --line-strong: #d8dcce;

  --accent: #10b981;
  --accent-strong: #047857;
  --accent-soft: #e6f4ee;
  --gold: #d97706;
  --gold-strong: #b45309;
  --gold-soft: #fbf0e0;

  --fs-display: clamp(40px, 9vw, 72px);
  --fs-heading-lg: clamp(32px, 6.5vw, 56px);
  --fs-heading: clamp(24px, 4vw, 32px);
  --fs-subheading: 20px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  --w-regular: 400;
  --w-ui: 440;
  --w-mid: 456;
  --w-semi: 600;
  --w-display: 652;

  --r-pill: 9999px;
  --r-container: 24px;
  --r-card: 16px;
  --r-badge: 8px;

  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-section: clamp(56px, 10vw, 96px);

  --header-h: calc(64px + env(safe-area-inset-top));
  --shadow-float: 0 8px 28px rgba(20, 20, 20, .14), 0 2px 6px rgba(20, 20, 20, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; overflow-x: clip; }
html { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Saans', 'Inter Variable', Inter, Geist, system-ui, -apple-system, sans-serif;
  font-feature-settings: "calt" 0, "dlig", "ss07";
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: 1.5;
  letter-spacing: 0.013em;
  -webkit-font-smoothing: antialiased;
}

/* RTL: арабица курсивна — межбуквенный интервал и латинские фичи долой */
[dir="rtl"] body { font-feature-settings: normal; }
[dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .btn, [dir="rtl"] .kicker, [dir="rtl"] .small, [dir="rtl"] .chip,
[dir="rtl"] .af-links a, [dir="rtl"] .af-note, [dir="rtl"] .lang-item {
  letter-spacing: 0;
}
[dir="rtl"] .brand { direction: ltr; }
[dir="rtl"] .brand img { object-position: right center; }
[dir="rtl"] .lang-btn .code { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .af-logo { direction: ltr; }
/* в RTL лента листается в другую сторону — шевроны стрелок зеркалятся */
[dir="rtl"] .gal-btn svg, [dir="rtl"] .lb-prev svg, [dir="rtl"] .lb-next svg { transform: scaleX(-1); }

a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--w-mid); }
a:hover { opacity: .7; }
.link-tap {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding-inline: var(--s-1);
}
b, strong { font-weight: var(--w-semi); }

h1, h2, h3, h4 { margin: 0 0 var(--s-2); }
h1 {
  font-size: var(--fs-heading-lg); font-weight: var(--w-display);
  line-height: 1.02; letter-spacing: -0.011em;
}
h2 {
  font-size: var(--fs-heading); font-weight: var(--w-display);
  line-height: 1.13; letter-spacing: -0.007em;
}
h3 { font-size: var(--fs-subheading); font-weight: var(--w-semi); line-height: 1.3; letter-spacing: 0; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--s-3); }
.section { padding-block: var(--s-section); }
.band { background: var(--bg-alt); }
.center { text-align: center; }
.small { font-size: var(--fs-body-sm); }
.muted { color: var(--ink-50); }

.kicker {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-caption); font-weight: var(--w-mid);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-30);
}
.lead { font-size: var(--fs-subheading); line-height: 1.45; color: var(--ink-70); margin: 0 0 var(--s-3); }
.sub { color: var(--ink-50); margin: 0 0 var(--s-4); max-width: 62ch; }

/* ---------------------------------------------------------------- header
   Копия шапки портала: липкая белая полоса 64px, логотип слева, язык и
   зелёная пилюля справа. */
.app-header {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: var(--s-1);
  /* полоса во всю ширину, но содержимое — в той же колонке 1120px, что и
     .wrap: на широком экране логотип и кнопки стоят вровень с секциями,
     а не липнут к краям окна */
  padding-inline: max(var(--s-2), calc((100% - 1120px) / 2 + var(--s-3)));
  height: var(--header-h); padding-top: env(safe-area-inset-top);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center;
  min-height: 44px;
  text-decoration: none; flex: 0 1 auto; min-width: 0;
}
.brand img {
  height: clamp(30px, 10.5vw, 42px); width: auto; display: block;
  max-width: 100%; object-fit: contain; object-position: left center;
}
.header-spacer { flex: 1; }
.hdr-cta { padding: 0 18px; min-height: 44px; white-space: nowrap; }
@media (max-width: 380px) {
  .app-header { gap: 6px; padding-inline: 12px; }
}

/* --------------------------------------------------- навигация в шапке
   Шесть переходов для отельера и инвестора. На широком экране — строкой
   после логотипа, на узком — гамбургер с листом под шапкой. */
.hdr-nav { display: none; align-items: center; gap: 2px; min-width: 0; margin-inline-start: var(--s-1); }
.hdr-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px; border-radius: var(--r-pill);
  color: var(--ink-70); text-decoration: none;
  font-size: var(--fs-body-sm); font-weight: var(--w-ui); white-space: nowrap;
}
.hdr-nav a:hover { background: var(--bg-alt); color: var(--ink); opacity: 1; }
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  cursor: pointer; transition: background .12s;
}
.burger:hover { background: var(--bg-alt); }
.burger .i-close { display: none; }
.burger.open { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.burger.open .i-burger { display: none; }
.burger.open .i-close { display: block; }
@media (min-width: 1100px) {
  .hdr-nav { display: flex; }
  .burger { display: none; }
}
/* Узкий экран: зелёной пилюли «Демо» в шапке нет — она съедала место и
   спорила с гамбургером за правый угол. Гамбургер уходит в правый край
   (order), переход в демо живёт в самом меню. */
@media (max-width: 1099px) {
  /* через `.app-header`: базовое `.btn { display: inline-flex }` стоит в
     файле ниже и при равном весе перебило бы простое `.hdr-cta` */
  .app-header .hdr-cta { display: none; }
  .burger { order: 1; }
}
.hdr-scrim {
  position: fixed; top: var(--header-h); bottom: 0; inset-inline: 0;
  z-index: 1190; background: rgba(20, 20, 20, .28); display: none;
}
.hdr-menu {
  position: fixed; top: var(--header-h); inset-inline: 0; z-index: 1200;
  display: none; background: var(--surface);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-float);
  padding: var(--s-1) var(--s-2) var(--s-2);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.hdr-scrim.open, .hdr-menu.open { display: block; }
.hdr-menu a {
  display: flex; align-items: center;
  min-height: 50px; padding: 0 14px; border-radius: var(--r-card);
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-body); font-weight: var(--w-ui);
}
.hdr-menu a:hover { background: var(--bg-alt); opacity: 1; }

/* липкая шапка не должна накрывать цель якоря */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  background: var(--accent-strong); color: #fff;
  border: 1px solid var(--accent-strong); border-radius: var(--r-pill);
  padding: 12px 24px;
  font-family: inherit; font-size: var(--fs-body-sm); font-weight: var(--w-ui);
  letter-spacing: 0.017em;
  cursor: pointer; transition: opacity .15s, background .15s;
  min-height: 44px;
}
a.btn { text-decoration: none; }
.btn:hover { opacity: .82; }
.btn:active { opacity: .7; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--bg-alt); opacity: 1; }
.btn.pill-lg { padding: 16px 32px; font-size: var(--fs-body); }

/* ----------------------------------------------------------- язык в шапке */
.lang-wrap { position: relative; display: inline-flex; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 44px; padding: 0 10px 0 12px; flex: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-family: inherit; font-size: var(--fs-body-sm); font-weight: var(--w-ui);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.lang-btn .code { letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lang-btn:hover { background: var(--bg-alt); }
.lang-btn.open { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.lang-btn.open svg:last-child { transform: rotate(180deg); }
.lang-btn svg:last-child { transition: transform .18s; }

.lang-scrim { position: fixed; inset: 0; z-index: 1390; background: rgba(20, 20, 20, .28); }

.lang-panel {
  position: absolute; top: 52px; inset-inline-end: -8px; z-index: 1400;
  width: min(340px, calc(100vw - 24px));
  display: flex; flex-direction: column; max-height: min(70vh, 560px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-container); padding: var(--s-2);
  box-shadow: var(--shadow-float);
}
.lang-panel[hidden], .lang-scrim[hidden] { display: none; }
.lang-grip { display: none; }
.lang-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-2); margin-bottom: var(--s-2);
}
.lang-head .ttl { font-size: var(--fs-subheading); font-weight: var(--w-semi); line-height: 1.2; }
.lang-head .sub {
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--ink-50);
  margin: 2px 0 0;
}
.lang-close {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-alt); border: none; color: var(--ink); cursor: pointer;
}
.lang-close:hover { background: var(--line-strong); }

.lang-search {
  display: flex; align-items: center; gap: var(--s-1);
  padding: 0 16px; height: 44px; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  color: var(--ink-50); margin-bottom: var(--s-1);
}
.lang-search:focus-within { border-color: var(--accent-strong); color: var(--ink); }
.lang-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font-family: inherit; font-size: var(--fs-body); font-weight: var(--w-regular);
  color: var(--ink);
}
.lang-search svg { flex: none; }

.lang-list { overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(var(--s-1) * -0.5); }
.lang-item {
  width: 100%; min-height: 48px; padding: 8px 12px;
  border: none; background: none; border-radius: var(--r-card); cursor: pointer;
  font-family: inherit; font-size: var(--fs-body-sm); font-weight: var(--w-ui);
  color: var(--ink); text-align: start; text-decoration: none;
  display: flex; align-items: center; gap: var(--s-1);
}
.lang-item .native { font-weight: var(--w-mid); }
.lang-item .latin { flex: 1; color: var(--ink-50); font-size: var(--fs-caption); text-align: end; }
.lang-item svg { flex: none; color: var(--accent-strong); }
.lang-item:hover { background: var(--bg-alt); opacity: 1; }
.lang-item.active { background: var(--bg-alt); }
.lang-item.active .native { font-weight: var(--w-semi); }
.lang-item.hide { display: none; }
.lang-empty { color: var(--ink-50); font-size: var(--fs-body-sm); text-align: center; padding: var(--s-2); }

/* На телефоне выбор языка — целый экран (как в портале) */
@media (max-width: 600px) {
  .lang-panel {
    position: fixed; inset: 0; z-index: 1400;
    width: 100%; max-height: none; border: none; border-radius: 0;
    padding: calc(var(--s-2) + env(safe-area-inset-top)) var(--s-2) var(--s-2);
  }
  .lang-list { flex: 1; min-height: 0; }
  .lang-item { min-height: 52px; }
}

/* ------------------------------------------------------------------ hero */
.hero { padding-block: var(--s-section) 0; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
}
.hero-copy, .hero-shot { min-width: 0; }
/* Заголовок хиро — теперь целая фраза, а не три слова: мера в 16ch и кегль
   56px разваливали её на шесть строк, и заголовок читался как абзац.
   Кегль меньше, мера шире, интерлиньяж чуть свободнее. */
.hero-copy h1 {
  max-width: 28ch;
  font-size: clamp(30px, 4.2vw, 42px);
  line-height: 1.1;
}
.hero-copy .lead { max-width: 56ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: var(--fs-body-sm); font-weight: var(--w-ui); color: var(--ink-70);
  white-space: nowrap;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 56px; }
}

/* Живой дашборд из демо-отеля в «браузерной» карточке на шалфейном ореоле */
.hero-shot { position: relative; isolation: isolate; }
.hero-shot::before {
  content: ''; position: absolute; z-index: -1;
  inset: 10% -8% 0;
  background: radial-gradient(55% 55% at 50% 55%, var(--sage) 0%, rgba(228, 231, 220, 0) 72%);
}
.browser {
  display: block; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 24px 48px rgba(20, 20, 20, .12), 0 4px 12px rgba(20, 20, 20, .06);
}
.br-bar {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.br-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
/* Скрин целиком, маленьким — в рамке он украшение и приглашение; читать его
   идут через клик, где открывается оригинал в полном разрешении. */
.br-view { display: block; direction: ltr; }
.browser img { display: block; width: 100%; height: auto; cursor: zoom-in; }

/* ----------------------------------------------------------------- legal
   Полоса комплаенса между хиро и модулями: слева знаки наград, справа —
   формулировка классификации, между ними тонкая линейка. Иконки-щита здесь
   нет (решение владельца 21.08.2026): рядом со знаками второй символ
   доверия спорил с ними и удешевлял блок. */
.legal { padding-block: var(--s-4); }
/* Группа стоит по центру полосы: прижатая влево, она оставляла справа
   треть пустого поля, и блок читался как недовёрстанный (решение
   владельца 21.08.2026). */
.legal-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-3) var(--s-4);
  border-block: 1px solid var(--line); padding-block: var(--s-4);
  text-align: start;
}
/* Текст занимает остаток строки и отделён от знаков волосяной линейкой:
   две зоны читаются как одна композиция, а не как случайное соседство */
.legal-copy {
  flex: 0 1 auto; min-width: 0;
  border-inline-start: 1px solid var(--line); padding-inline-start: var(--s-4);
}
.legal-row b {
  display: block; font-size: var(--fs-subheading); font-weight: var(--w-semi);
  line-height: 1.3; letter-spacing: -0.004em;
}
.legal-copy > span {
  display: block; margin-top: 4px;
  color: var(--ink-50); font-size: var(--fs-body-sm); line-height: 1.5;
  max-width: 56ch;
}
/* ссылка в вики — отдельной строкой, с воздухом: это переход, а не сноска */
.legal-copy > span:last-child { margin-top: var(--s-1); }

/* Гарантии одной строкой: имя стандарта плюс знак в 14px. Дизайнерский ход
   здесь — не рамки и не плашки, а разделители: тонкая вертикальная черта
   между парами держит ряд как единую строку, а не как четыре обрывка.
   У первого знака черты нет — она рисуется перед элементом. */
.legal-marks {
  display: flex; flex-wrap: wrap; align-items: center;
  /* без меры в 56ch, как у абзацев рядом: ряд обязан стоять одной строкой,
     а на узком экране его переносит flex-wrap */
  gap: 4px var(--s-2); margin: var(--s-2) 0 0;
  font-size: var(--fs-caption); color: var(--ink-50);
}
.lmark {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-weight: var(--w-ui);
}
.lmark + .lmark::before {
  content: ""; width: 1px; height: 12px; margin-inline-end: var(--s-2);
  background: var(--line-strong);
}
.lmark svg {
  width: 14px; height: 14px; flex: none;
  color: var(--accent-strong); stroke-width: 2;
}

/* Значки наград (нарезка content/znak.jpg в прозрачный WebP): лежат прямо на
   фоне страницы, тень по контуру знака мягкая — металл и без того тяжёлый,
   резкая тень делает полосу шумной; «нажимаются» — поднимаются под курсором,
   вжимаются при клике; клик открывает знак крупно в лайтбоксе.
   Стоят первыми в полосе — слева, одним рядом; в разметке они после текста,
   чтобы читалка и поисковик получали сперва саму формулировку. */
.legal-awards {
  display: flex; align-items: center; gap: var(--s-3);
  order: -1;
}
.award {
  display: inline-flex; padding: 0; margin: 0;
  background: none; border: none;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(20, 20, 20, .10)) drop-shadow(0 6px 12px rgba(20, 20, 20, .09));
  transition: transform .16s ease, filter .16s ease;
}
.award img { display: block; height: 88px; width: auto; }
.award:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 3px rgba(20, 20, 20, .12)) drop-shadow(0 10px 18px rgba(20, 20, 20, .14));
}
.award:active {
  transform: translateY(0) scale(.96); transition-duration: .06s;
  filter: drop-shadow(0 1px 2px rgba(20, 20, 20, .10)) drop-shadow(0 3px 6px rgba(20, 20, 20, .08));
}
/* На телефоне ряд наград переносится на свою строку — по центру и под
   текстом: сверху знаки оттеснили бы саму формулировку классификации.
   Линейка из вертикальной становится не нужна — колонка одна. */
@media (max-width: 860px) {
  .legal-awards { order: 0; margin-inline: auto; }
  .legal-copy { border-inline-start: none; padding-inline-start: 0; }
}

/* ----------------------------------------------------------------- cards */
.cards { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-3);
}
.card p { margin: 0; color: var(--ink-70); font-size: var(--fs-body-sm); line-height: 1.5; }
.card h3 { margin-bottom: var(--s-1); }
.ico {
  display: inline-flex; width: 44px; height: 44px; margin-bottom: var(--s-2);
  align-items: center; justify-content: center;
  border-radius: var(--r-card); background: var(--accent-soft); color: var(--accent-strong);
}
.ico svg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- market */
/* Тёмно-зелёный перелом страницы: цифра рынка и призыв «доступно уже
   сейчас». Единственная закрашенная секция — ей и положено звучать. */
.market { background: var(--accent-strong); color: #fff; padding-block: var(--s-section); }
/* Кикер здесь несёт целую фразу («Ваш отель уже готов для Longevity
   Resort»), а не два служебных слова: кегль крупнее, разрядка меньше —
   иначе строка расползается и перестаёт читаться как заголовок. */
.market .kicker {
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-body); letter-spacing: 0.1em; line-height: 1.4;
  margin-bottom: var(--s-2);
}
.market-grid { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) {
  .market-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; }
}
.ms-num {
  display: block;
  font-size: clamp(72px, 12vw, 132px); font-weight: var(--w-display);
  line-height: .95; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.ms-cap {
  margin: var(--s-2) 0 0; max-width: 28ch;
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-subheading); line-height: 1.4;
}
.m-lead {
  margin: 0 0 var(--s-2); max-width: 24ch;
  font-size: var(--fs-heading); font-weight: var(--w-display);
  line-height: 1.2; letter-spacing: -0.007em;
}
.m-now {
  margin: 0; max-width: 46ch;
  color: rgba(255, 255, 255, .85);
  font-size: var(--fs-subheading); line-height: 1.45;
}
.market .btn { background: #fff; color: var(--accent-strong); border-color: #fff; }
.market .btn.ghost-w { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.market .btn.ghost-w:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
[dir="rtl"] .ms-num { direction: ltr; unicode-bidi: isolate; }

/* -------------------------------------------------------------------- ai
   Обучаемый модуль портала. Тёмно-зелёная панель — тот же приём, что у
   блока рынка: два места на странице, где сайт делает заявление, а не
   перечисляет свойства. Три шага объясняют механику (учится → работает →
   растёт), последняя строка адресована инвестору. */
.ai-sec {
  background: var(--accent-strong); color: #fff;
  padding-block: var(--s-section);
}
.ai-sec .kicker { color: rgba(255, 255, 255, .6); }
/* заголовок идёт во всю строку колонки, без узкой меры: это одна фраза,
   и разбитая в столбик она читалась как список (решение владельца) */
.ai-t { max-width: none; }
.ai-lead {
  margin: 0 0 var(--s-4); max-width: 62ch;
  color: rgba(255, 255, 255, .85);
  font-size: var(--fs-subheading); line-height: 1.45;
}
.ai-flow { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 860px) { .ai-flow { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
/* карточки-стекло: на цветной подложке белая плашка выглядела бы заплатой */
.ai-step {
  padding: var(--s-3);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-card);
}
.ai-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-bottom: var(--s-2);
  border-radius: var(--r-pill);
  background: #fff; color: var(--accent-strong);
  font-size: var(--fs-body-sm); font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}
.ai-step h3 { margin: 0 0 6px; font-size: var(--fs-body); font-weight: var(--w-semi); }
.ai-step p {
  margin: 0; color: rgba(255, 255, 255, .82);
  font-size: var(--fs-body-sm); line-height: 1.55;
}
/* строка для инвестора: отделена линейкой — это другой адресат */
.ai-note {
  margin: var(--s-4) 0 0; padding-top: var(--s-3); max-width: 82ch;
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-body-sm); line-height: 1.6;
}
/* ссылка «подробнее» на тёмной панели: базовый цвет ссылок совпадает с её
   фоном, и без этого правила переход в разбор алгоритмов был бы невидим */
.ai-sec .wiki-more a { color: #fff; }

/* --------------------------------------------------------------- gadgets */
/* Оборудование программы: коллаж часов и весов на шалфейном ореоле слева,
   справа — кнопка «25», раскрывающая полный перечень показателей. */
.g-grid { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 980px) {
  .g-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; }
}
.g-media { min-width: 0; }
.g-collage {
  position: relative; isolation: isolate;
  max-width: 500px; margin-inline: auto;
  padding-block: 4% 12%;
}
.g-collage::before {
  content: ''; position: absolute; z-index: -1; inset: 2% -8% 0;
  background: radial-gradient(58% 58% at 46% 44%, var(--sage) 0%, rgba(228, 231, 220, 0) 72%);
}
.g-watch {
  display: block; width: 82%; height: auto;
  filter: drop-shadow(0 22px 38px rgba(20, 20, 20, .24)) drop-shadow(0 4px 10px rgba(20, 20, 20, .12));
}
.g-scale {
  position: absolute; z-index: 2; width: 42%; height: auto;
  inset-inline-end: 0; bottom: 0;
  filter: drop-shadow(0 16px 28px rgba(20, 20, 20, .22)) drop-shadow(0 3px 8px rgba(20, 20, 20, .12));
}
/* парящие метки метрик; термины интернациональны — без перевода */
.g-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(20, 20, 20, .12);
  font-size: var(--fs-caption); font-weight: var(--w-mid); color: var(--ink);
  white-space: nowrap; direction: ltr;
}
.g-chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.gc1 { top: 7%; inset-inline-start: -2%; }
.gc2 { top: 30%; inset-inline-end: 4%; }
.gc3 { top: 56%; inset-inline-start: -4%; }
.gc4 { top: 2%; inset-inline-end: 14%; }
.gc5 { bottom: 4%; inset-inline-end: 38%; z-index: 3; }
.gc5::before { background: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .gc1 { animation: gfloat 5.2s ease-in-out infinite alternate; }
  .gc2 { animation: gfloat 4.4s .6s ease-in-out infinite alternate; }
  .gc3 { animation: gfloat 6s .3s ease-in-out infinite alternate; }
  .gc4 { animation: gfloat 4.8s 1s ease-in-out infinite alternate; }
  .gc5 { animation: gfloat 5.6s .8s ease-in-out infinite alternate; }
}
@keyframes gfloat { from { transform: translateY(3px); } to { transform: translateY(-5px); } }
.g-cap {
  margin: var(--s-2) 0 0; text-align: center;
  color: var(--ink-30); font-size: var(--fs-caption); font-weight: var(--w-ui);
  letter-spacing: .04em; direction: ltr;
}
.g-copy { min-width: 0; }
.g-copy h2 { max-width: 26ch; }
.g-copy .f-lead { max-width: 56ch; color: var(--ink-70); }

/* кнопка-счётчик: «25 показателей в динамике» */
.g-count {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; max-width: 560px; margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--accent); border-radius: var(--r-container);
  font-family: inherit; text-align: start; cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease;
}
.g-count:hover { box-shadow: var(--shadow-float); transform: translateY(-1px); }
.g-count:active { transform: translateY(0); }
.g-big {
  flex: none;
  font-size: clamp(40px, 6vw, 54px); font-weight: var(--w-display);
  line-height: 1; letter-spacing: -0.02em; color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.g-lbl { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--w-semi); line-height: 1.3; }
.g-lbl small {
  display: block; margin-top: 4px;
  color: var(--ink-50); font-size: var(--fs-body-sm); font-weight: var(--w-ui); line-height: 1.4;
}
.g-chev { flex: none; color: var(--accent-strong); transition: transform .25s ease; }
.g-count.open .g-chev { transform: rotate(180deg); }
.g-hint { margin: var(--s-1) 0 0; color: var(--ink-30); font-size: var(--fs-caption); }
.g-count.open + .g-hint { visibility: hidden; }

/* перечень раскрывается плавно: grid-rows 0fr → 1fr */
.g-list {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .45s ease, opacity .35s ease, visibility 0s .45s;
}
.g-list.open {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows .45s ease, opacity .35s ease .1s, visibility 0s;
}
.g-inner { overflow: hidden; min-height: 0; }
.g-groups {
  display: grid; gap: var(--s-2); grid-template-columns: 1fr;
  padding-top: var(--s-2);
}
@media (min-width: 640px) { .g-groups { grid-template-columns: 1fr 1fr; } }
.g-group {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-2) var(--s-3);
}
.g-group h3 { font-size: var(--fs-body); margin-bottom: var(--s-1); }
.g-group .g-h2nd { margin-top: var(--s-2); }
.g-group ul { margin: 0; padding: 0; list-style: none; }
.g-group li {
  position: relative; padding-inline-start: 24px; margin-bottom: 4px;
  color: var(--ink-70); font-size: var(--fs-body-sm); line-height: 1.5;
}
.g-group li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .36em;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-soft);
}
.g-group li::after {
  content: ''; position: absolute; inset-inline-start: 3.5px; top: calc(.36em + 3px);
  width: 7px; height: 4.5px;
  border-inline-start: 1.6px solid var(--accent-strong);
  border-bottom: 1.6px solid var(--accent-strong);
  transform: rotate(-45deg);
}
[dir="rtl"] .g-group li::after { transform: rotate(45deg) scaleX(-1); }

/* три шага внедрения: Wi-Fi → программа → браузер гостя */
.g-steps {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: grid; gap: var(--s-2);
}
.g-how {
  margin: 0;
  font-size: var(--fs-caption); font-weight: var(--w-mid);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-30);
}
.g-step { display: flex; gap: var(--s-2); align-items: flex-start; }
.gs-num {
  flex: none; width: 28px; height: 28px; margin-top: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-strong);
  font-weight: var(--w-semi); font-size: var(--fs-body-sm);
  font-variant-numeric: tabular-nums;
}
.g-step p { margin: 0; color: var(--ink-70); font-size: var(--fs-body-sm); line-height: 1.5; max-width: 52ch; }

/* ----------------------------------------------------------------- steps */
.steps { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }
.step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-3);
}
.step .num {
  display: inline-flex; width: 40px; height: 40px; margin-bottom: var(--s-2);
  align-items: center; justify-content: center; border-radius: var(--r-pill);
  background: var(--accent-strong); color: #fff;
  font-weight: var(--w-semi); font-size: var(--fs-subheading);
}
.step h3 { margin-bottom: var(--s-1); }
.step p { margin: 0; color: var(--ink-70); font-size: var(--fs-body-sm); }

/* ------------------------------------------------------------- languages */
/* Мультиязычность: облако всех языков платформы и демо автоперевода —
   карточка врача (немецкий) → карточка гостя на языке страницы. */
.lang-cloud {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: var(--s-3) 0 var(--s-4); max-width: 920px;
}
.ml-demo { display: grid; gap: var(--s-2); max-width: 880px; }
@media (min-width: 760px) {
  .ml-demo { grid-template-columns: 1fr auto 1fr; align-items: center; }
}
.ml-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-2) var(--s-3);
}
.ml-card.guest { border-color: var(--accent); border-width: 1.5px; }
.ml-card p { margin: 0; line-height: 1.5; }
.ml-role {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-caption); font-weight: var(--w-mid);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-30);
}
.ml-card.guest .ml-role { color: var(--accent-strong); }
/* стрелка перевода: в столбике смотрит вниз, в ряду — поперёк */
.ml-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-inline: auto; flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-strong);
  transform: rotate(90deg);
}
@media (min-width: 760px) { .ml-arrow { transform: none; } }
.ml-note {
  margin: var(--s-3) 0 0; padding: var(--s-2); max-width: 66ch;
  background: var(--bg-alt); border-inline-start: 2px solid var(--accent);
  border-radius: var(--r-badge);
  font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-70);
}

/* -------------------------------------------------------------- programs */
/* «Под ключ»: сетка 10 готовых Longevity-программ. 01 — флагманская точка
   входа (акцентная рамка), 09 — военная реабилитация с фишками метрик. */
.prog-grid {
  display: grid; gap: var(--s-2); grid-template-columns: 1fr;
  margin-top: var(--s-2);
}
@media (min-width: 700px) { .prog-grid { grid-template-columns: 1fr 1fr; } }
.prog {
  display: flex; gap: var(--s-2); align-items: stretch;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-2) var(--s-3);
}
/* колонка карточки тянется на всю её высоту — иначе кнопку внизу не к чему
   прижать: карточки ряда одной высоты, а текста и чипов в них разное число
   строк */
.prog > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.prog .pnum {
  flex: none; width: 34px; height: 34px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: var(--fs-caption); font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}
.prog h3 { font-size: var(--fs-body); margin: 0 0 4px; }
.prog p { margin: 0; color: var(--ink-50); font-size: var(--fs-body-sm); line-height: 1.45; }
.prog.main { border-color: var(--accent); border-width: 1.5px; }
.prog.main .pnum { background: var(--accent-strong); color: #fff; }
.prog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prog-chips span {
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--bg);
  font-size: 11px; font-weight: var(--w-mid); color: var(--ink-70);
  white-space: nowrap; direction: ltr;
}
/* кнопка «Применяемые протоколы» — у каждой из десяти карточек: своя
   страница в вики есть теперь у всех (22.08.2026). Мельче полной кнопки
   сайта: внутри карточки она спорила бы по весу с заголовком программы.
   `margin-top: auto` прижимает её к низу колонки — в паре карточек ряда
   чипы занимают разное число строк, и без этого кнопки стояли на разной
   высоте и подпирали чипы. `padding-top` держит разрядку, когда прижимать
   не к чему (одна колонка на телефоне).
   Селектор из двух классов не случаен: `.prog p { margin: 0 }` выше по
   специфичности, чем одиночный `.prog-open`, и молча съедал отступ —
   кнопка сидела вплотную к чипам (замечание владельца 22.08.2026). */
.prog .prog-open { margin: auto 0 0; padding-top: 16px; }
.prog-btn { padding: 9px 18px; min-height: 40px; }
.wiki-more { margin: var(--s-3) 0 0; font-size: var(--fs-body); }
/* внутри колонок модулей ссылка стоит ближе к тексту и мельче */
.f-copy .wiki-more, .g-copy .wiki-more { margin-top: var(--s-2); font-size: var(--fs-body-sm); }
[dir="rtl"] .wiki-more a { unicode-bidi: isolate; }
.prog-cta { margin: var(--s-4) 0 0; }

/* ----------------------------------------------------------------- price */
.price-cards { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 760px) { .price-cards { grid-template-columns: repeat(3, 1fr); } }
.pcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-container); padding: var(--s-4) var(--s-3);
}
.pcard.main { border-color: var(--accent); border-width: 1.5px; }
.pcard .kicker { margin-bottom: var(--s-1); color: var(--accent-strong); }
.pcard h3 { font-size: var(--fs-subheading); font-weight: var(--w-semi); letter-spacing: 0; margin-bottom: 2px; }
/* крупная цифра тарифа — главное в карточке */
.pval {
  font-size: clamp(34px, 5vw, 46px); font-weight: var(--w-display);
  line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 10px;
  font-variant-numeric: tabular-nums; direction: ltr;
}
.pcard.main .pval { color: var(--accent-strong); }
.pcard p { margin: 0; color: var(--ink-70); font-size: var(--fs-body-sm); line-height: 1.55; }
/* состав тарифа — по пункту на строку: сплошной абзац в карточке не читали */
.pfeat { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pfeat li {
  position: relative; padding-inline-start: 15px;
  color: var(--ink-70); font-size: var(--fs-body-sm); line-height: 1.5;
}
.pfeat li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
/* Надпись под карточками: чем окупается SEO-оптимизация из пункта Setup.
   Не мелкий шрифт сноски, а полоса на шалфейном фоне — это довод, а не
   примечание; ниже неё «подробности в вики» остаётся серым и мелким. */
.price-seo {
  margin: var(--s-4) auto 0; max-width: 66ch;
  padding: var(--s-3) clamp(16px, 4vw, 32px); text-align: center;
  background: var(--accent-soft); border-radius: var(--r-card);
  color: var(--ink-70); font-size: var(--fs-body);
  line-height: 1.55;
}
.price-note {
  margin: var(--s-3) auto; max-width: 56ch; text-align: center;
  color: var(--ink-50); font-size: var(--fs-body-sm);
}

/* ------------------------------------------------------------- case study
   История внедрения: Prezident (Карловы Вары). Подзаголовок, фото комплекта
   и кнопка в вики; карточек «запрос к ИИ» здесь больше нет (23.08.2026). */
.case-band { text-align: center; }
.case-band .sub { margin-inline: auto; margin-bottom: var(--s-1); }
.case-cta { margin: var(--s-4) 0 0; }
.case-band .small { margin-top: var(--s-2); }
.case-photo { margin: var(--s-4) auto 0; max-width: 880px; }
/* Фото — второй вход в статью рядом с кнопкой: снимок доказывает, кнопка
   зовёт. Отклик тот же, что у знаков наград — лёгкий подъём под курсором,
   чтобы кликабельность читалась без подчёркиваний. */
.case-shot {
  display: block; border-radius: var(--r-container); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.case-shot:hover {
  transform: translateY(-2px); opacity: 1;
  box-shadow: 0 12px 32px rgba(20, 20, 20, .12);
}
.case-photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-container); border: 1px solid var(--line);
}
.case-photo figcaption {
  margin-top: var(--s-1); color: var(--ink-50); font-size: var(--fs-caption);
}

/* ----------------------------------------------------------------- trust
   Ряд гарантий живёт в подвале: четыре колонки на широком экране, две на
   планшете, одна на телефоне. Отделён от колонок подвала волосяной линией. */
.af-trust {
  display: grid; gap: var(--s-2) var(--s-3); grid-template-columns: 1fr;
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--line-strong);
}
@media (min-width: 560px) { .af-trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .af-trust { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; gap: 10px; align-items: flex-start; text-align: start; }
/* Гарантии переехали в подвал (решение владельца 21.08.2026): это сноска,
   а не продающий блок, поэтому плашка мельче (32 вместо 48), знак — 18, и
   весь ряд набран служебным кеглем. Родная толщина Lucide (2 при сетке 24)
   сохранена: 1.7 давало нецелое число пикселей и мылило линии. */
.tico {
  display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px;
  align-items: center; justify-content: center; color: var(--accent-strong);
  border-radius: var(--r-badge); background: var(--accent-soft);
}
.tico svg { display: block; width: 18px; height: 18px; stroke-width: 2; }
.trust-item b { display: block; font-size: var(--fs-body-sm); line-height: 1.35; }
/* ТОЛЬКО описание в текстовой колонке. Общий `.trust-item span` цеплял и
   плашку знака (она тоже span) и делал её block — центрирование флексом
   отключалось, и знак сидел в левом верхнем углу квадрата. */
.trust-item > div > span {
  display: block; color: var(--ink-50); font-size: var(--fs-caption); line-height: 1.45;
}

/* --------------------------------------------------------------- contact
   Закрывающий призыв: кикер, заголовок, лид и два пути — Live Demo и
   «Запросить расчёт»; кнопки центрируются, поэтому .cta-row тут с justify. */
.contact .lead { max-width: 52ch; margin-inline: auto; }
.contact-cta { justify-content: center; margin-top: var(--s-4); }

/* ---------------------------------------------------------------- footer
   Подвал — светло-шалфейная полоса во всю ширину, содержимое в той же
   колонке 1120px, что и секции сайта. Внутри две колонки: слева бренд,
   захват и кнопки, справа календарь конференций; ниже — тонкая полоса с
   юридическими ссылками и копирайтом. */
.app-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding-block: var(--s-section) var(--s-3);
  text-align: center;
}
.af-inner { max-width: 1120px; margin-inline: auto; padding-inline: var(--s-3); }
.af-cols { display: grid; gap: var(--s-4); }
/* min-width: 0 — иначе колонка не сжимается ниже своей «естественной»
   ширины (поле почты + кнопка) и на узком экране вылезает за край: на
   375px подвал уходил на 9px правее экрана и текст обрезался. */
.af-cols > * { min-width: 0; }
.af-col-t {
  font-size: var(--fs-body-sm); font-weight: var(--w-semi); color: var(--ink);
  margin: 0 0 var(--s-1);
}
.af-tag {
  font-size: var(--fs-body-sm); color: var(--ink-70); line-height: 1.5;
  max-width: 42ch; margin: 0 auto;
}
.af-about .af-nl { margin-top: var(--s-4); }
.af-about .af-links { margin-top: var(--s-4); }
.af-conf { width: 100%; max-width: 520px; margin-inline: auto; }
.af-conf-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2); margin-bottom: 0;
}
/* заголовок в этой шапке своего нижнего отступа не имеет: источник должен
   стоять к нему вплотную и читаться как его подпись, а не как отдельная
   строка блока */
.af-conf-head .af-col-t { margin-bottom: 0; }
/* откуда взяты даты: мелко, серым — подпись под заголовком, а не ссылка,
   за которой идут (за списком идут по «Все конференции») */
.af-conf-src { margin: 1px 0 var(--s-1); font-size: var(--fs-caption); line-height: 1.3; }
.af-conf-src a { color: var(--ink-30); text-decoration: none; font-weight: var(--w-ui); }
.af-conf-src a:hover { color: var(--accent-strong); opacity: 1; }
.af-conf-all {
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--ink-50);
  text-decoration: none; white-space: nowrap;
}
.af-conf-all:hover { color: var(--accent-strong); opacity: 1; }
@media (min-width: 980px) {
  .af-cols {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--s-section);
    text-align: start; align-items: start;
  }
  .af-about .af-note, .af-about .af-tag { margin-inline: 0; }
  .af-cols .af-logo { margin-inline: 0; }
  .af-about .af-links { justify-content: flex-start; }
  .af-conf { margin-inline: 0; max-width: none; }
  /* Селекторы с `.af-about` не для красоты: базовые правила формы стоят в
     файле НИЖЕ этого блока, и при равном весе их `margin: 0 auto`
     перебивал переопределение — форма и оговорка съезжали от левого края
     колонки на 44px. */
  .af-about .af-nl-form { margin: 0; }
  .af-about .af-nl-note, .af-about .af-nl-ok { margin-inline: 0; }
}
/* нижняя полоса: слева юридические ссылки, справа авторство и копирайт */
.af-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-4); padding-top: var(--s-2);
  border-top: 1px solid var(--line-strong);
}
.af-credits {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px var(--s-2);
}
.af-credits a {
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--ink-30);
  text-decoration: none; min-height: 32px; display: inline-flex; align-items: center;
}
.af-credits a:hover { color: var(--ink-50); opacity: 1; }
@media (min-width: 980px) {
  .af-bottom { justify-content: space-between; }
}
/* Три кнопки подвала — те же элементы .btn, что и в призыве выше, только
   обычного размера: в подвале крупные пилюли перетянули бы на себя
   внимание с календаря конференций. Ряд переносится на узком экране. */
.af-links {
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-1);
}
.af-links .btn { min-height: 44px; text-decoration: none; }
.af-logo {
  height: 48px; width: auto; max-width: min(100%, 320px);
  object-fit: contain; display: block; margin: 0 auto var(--s-2);
}
.af-note {
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--ink-30);
  margin-top: 6px; max-width: 46ch; margin-inline: auto; line-height: 1.4;
}
.af-note a { color: inherit; text-decoration: none; font-weight: var(--w-ui); }
.af-note a:hover { color: var(--ink-50); opacity: 1; }
.af-version {
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--ink-30);
  direction: ltr;
}
/* Выходные данные оператора: служебная строка мелким кеглем под подвалом.
   Сами реквизиты всегда LTR — в арабском и иврите адрес и номера не должны
   переворачиваться, переводится только подпись слева */
.af-imprint {
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--ink-30);
  line-height: 1.6; text-align: center;
}
.af-imprint-l { color: var(--ink-50); }
.af-imprint-d { display: inline; }
.af-imprint-n { color: var(--ink-50); }
/* телефон и e-mail не разрываются переносом: номер, разбитый на две
   строки, читается как два разных числа */
.af-imprint a { color: inherit; text-decoration: none; white-space: nowrap; }
.af-imprint a:hover { color: var(--ink-50); opacity: 1; }
.legal-bottom .af-imprint { margin-top: var(--s-1); padding-top: 0; border-top: 0; }
/* Юридические ссылки в подвале */
.af-legal {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 4px var(--s-2);
}
.af-legal a {
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--ink-30);
  text-decoration: none; min-height: 32px; display: inline-flex; align-items: center;
}
.af-legal a:hover { color: var(--ink-50); opacity: 1; }

/* Подписка: компактная колонка подвала */
.af-nl-form {
  display: flex; gap: 6px;
  max-width: 360px; margin: 0 auto;
}
.af-nl-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: var(--fs-body-sm);
  direction: ltr; /* адрес почты — латиница и в RTL-языках */
}
.af-nl-form input:focus { outline: none; border-color: var(--accent-strong); }
.af-nl-form input::placeholder { color: var(--ink-30); }
.af-nl-form .btn { flex: none; padding: 0 18px; }
.af-nl-note {
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--ink-30);
  line-height: 1.4; margin: 6px auto 0; max-width: 360px;
}
.af-nl-note a { color: inherit; text-decoration: underline; }
.af-nl-note a:hover { color: var(--ink-50); opacity: 1; }
.af-nl-ok {
  font-size: var(--fs-body-sm); font-weight: var(--w-ui); color: var(--accent-strong);
  margin: 0 auto; max-width: 360px;
}
/* ------------------------------------------------ список конференций
   Белая карточка на шалфейном подвале; прокрутка внутри, карточки
   прилипают к верхнему краю (scroll-snap) — на границе окна не остаётся
   срезанной посередине строки. */
.conf-list {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); text-align: start;
  max-height: 430px; overflow-y: auto;
  scrollbar-width: thin; scroll-snap-type: y proximity;
  box-shadow: 0 1px 2px rgba(20, 20, 20, .04);
}
/* на телефоне карточки выше (текст переносится чаще) — окно списка ниже,
   чтобы подвал не занимал весь экран */
@media (max-width: 639px) {
  .conf-list { max-height: 360px; }
}
.conf-item {
  display: block; padding: 12px var(--s-2);
  border-bottom: 1px solid var(--line); text-decoration: none;
  scroll-snap-align: start;
}
.conf-item:last-child { border-bottom: 0; }
.conf-item:hover { background: var(--bg-alt); opacity: 1; }
.conf-title {
  display: block; font-size: var(--fs-body-sm); font-weight: var(--w-semi);
  color: var(--ink); line-height: 1.35;
}
.conf-item:hover .conf-title { color: var(--accent-strong); }
.conf-date {
  display: block; margin-top: 2px;
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--accent-strong);
}
.conf-meta {
  display: block; margin-top: 2px;
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--ink-50);
}
/* описание показывается целиком — обрезки многоточием нет, длинный текст
   прокручивается вместе со списком */
.conf-desc {
  display: block; margin-top: 4px;
  font-size: var(--fs-caption); color: var(--ink-50); line-height: 1.45;
}

/* ------------------------------------------------------- баннер согласия
   Полоска, а не карточка: сайт не ставит ни рекламных, ни аналитических
   cookie, и уведомление о языке в localStorage не должно занимать треть
   экрана. Текст мелкий, ссылка на политику — своей строкой, кнопка рядом
   и компактная; столбиком блок не разворачивается даже на узком экране. */
.consent {
  position: fixed; inset-inline: var(--s-2); bottom: var(--s-2); z-index: 60;
  display: flex; align-items: center; gap: var(--s-2);
  max-width: 560px; margin-inline: auto;
  padding: 10px var(--s-2);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-card); box-shadow: 0 8px 28px rgba(20, 20, 20, .12);
}
/* Без этой строки баннер не закрывался вовсе: `display: flex` выше сильнее
   браузерного `[hidden] { display: none }`, поэтому и нажатие «Понятно», и
   отметка в localStorage у вернувшегося посетителя ничего не меняли. */
.consent[hidden] { display: none; }
.consent-copy { flex: 1; min-width: 0; }
.consent-txt {
  margin: 0; font-size: var(--fs-caption); color: var(--ink-50); line-height: 1.4;
}
.consent-more {
  display: inline-block; margin-top: 3px;
  font-size: var(--fs-caption); font-weight: var(--w-ui);
  color: var(--ink-50); text-decoration: underline;
}
.consent .btn { flex: none; padding: 9px 18px; font-size: var(--fs-body-sm); }
/* «Отклонить» и «Принять» одного размера и рядом: отказ по GDPR даётся тем
   же одним нажатием, что согласие, и не прячется в мелкий текст. Узкому
   экрану баннер отдаёт кнопкам целую строку под текстом — сжатые подписи
   на кириллице и в немецком не помещались в одну. */
.consent-btns { display: flex; flex: none; gap: 8px; }
@media (max-width: 480px) {
  .consent { flex-wrap: wrap; }
  .consent-btns { width: 100%; }
  .consent-btns .btn { flex: 1; }
}
@media (max-width: 400px) {
  .consent { inset-inline: var(--s-1); bottom: var(--s-1); gap: 10px; }
  .consent .btn { padding: 9px 14px; }
}

/* Кнопка отзыва согласия — только на странице cookie-политики */
.legal-reset { margin: var(--s-3) 0 0; }

/* ---------------------------------------------------------- legal-страницы */
.legal-top {
  border-bottom: 1px solid var(--line);
  padding: var(--s-2) var(--s-3);
  display: flex; justify-content: center;
}
.legal-top img { height: 40px; width: auto; }
/* Только `main.legal` документа, а не `section.legal` главной: класс один и
   тот же, и без этого уточнения колонка в 72ch сжимала полосу комплаенса на
   главной вдвое — знаки наград переносились на вторую строку. */
main.legal {
  max-width: 72ch; margin-inline: auto;
  padding: var(--s-4) var(--s-3) var(--s-section);
}
main.legal h1 { font-size: var(--fs-heading); letter-spacing: -0.007em; margin-bottom: var(--s-1); }
.legal-updated {
  font-size: var(--fs-caption); font-weight: var(--w-ui); color: var(--ink-30);
  margin-bottom: var(--s-3);
}
main.legal h2 {
  font-size: var(--fs-body); font-weight: var(--w-semi);
  margin: var(--s-3) 0 var(--s-1);
}
main.legal p, main.legal li {
  font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink-70, var(--ink));
  margin-bottom: var(--s-1);
}
main.legal ul { padding-inline-start: 1.2em; margin-bottom: var(--s-2); }
.legal-nav {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--line);
}
.legal-nav a {
  font-size: var(--fs-body-sm); font-weight: var(--w-ui); color: var(--ink-50);
  text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center;
}
.legal-bottom {
  border-top: 1px solid var(--line);
  padding: var(--s-2) var(--s-3) var(--s-3); text-align: center;
}

/* ---------------------------------------------------------------- модули */
/* Блок-утверждение открывает секцию модулей */
.statement {
  margin: 0 auto var(--s-section);
  max-width: 32ch; text-align: center;
  font-size: var(--fs-heading); font-weight: var(--w-display);
  line-height: 1.22; letter-spacing: -0.007em;
}

/* minmax(0,…) и min-width:0 обязательны: без них лента экранов распирает
   грид-колонку на всю свою ширину и перестаёт прокручиваться */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4); margin-bottom: var(--s-section); align-items: center;
}
.f-copy, .f-media { min-width: 0; }
.f-num {
  display: inline-flex; width: 44px; height: 44px; margin-bottom: var(--s-2);
  align-items: center; justify-content: center; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-strong);
  font-weight: var(--w-semi); font-variant-numeric: tabular-nums;
}
.f-copy .kicker { margin-bottom: var(--s-1); }
.f-copy h2 { max-width: 24ch; }
.f-text { margin: 0 0 var(--s-2); color: var(--ink-70); max-width: 54ch; }
.f-chips { margin: var(--s-2) 0 var(--s-3); }
.chip.accent { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.f-note {
  margin: var(--s-2) 0 0; padding: var(--s-2); max-width: 54ch;
  background: var(--bg-alt); border-inline-start: 2px solid var(--accent);
  border-radius: var(--r-badge);
  font-size: var(--fs-body-sm); line-height: 1.45; color: var(--ink-70);
}

/* Лента экранов в телефонных рамках: горизонтальный свайп со снапом.
   Крайний кадр нарочно выглядывает из-под обреза — приглашение листать. */
.shots { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x proximity; padding: 16px 2px 22px; }
.shot { flex: 0 0 auto; margin: 0; width: clamp(200px, 56vw, 248px); scroll-snap-align: center; }
.ph-frame {
  display: block; background: var(--ink); border-radius: 34px; padding: 8px;
  box-shadow: 0 18px 36px rgba(20, 20, 20, .16), 0 3px 8px rgba(20, 20, 20, .08);
  transition: transform .35s ease, opacity .35s ease;
}
/* кадр в центре ленты чуть вырастает, соседи приглушаются — видно, какой
   экран «в фокусе», и что лента листается */
.shot:not(.on) .ph-frame { opacity: .85; }
.shot.on .ph-frame { transform: scale(1.045); }
.ph-frame img { display: block; width: 100%; height: auto; border-radius: 26px; background: #fff; cursor: zoom-in; }

/* Кнопки листания по краям ленты и точки-кнопки под ней: нажатие на точку
   плавно подводит ленту к своему кадру. На телефоне листают пальцем — стрелки
   спрятаны, точки остаются. */
.gallery { position: relative; }
.gal-btn {
  position: absolute; top: 45%; transform: translateY(-50%); z-index: 5;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 20, 20, .12);
  transition: background .12s;
}
.gal-btn:hover { background: var(--bg-alt); }
.gal-prev { inset-inline-start: -10px; }
.gal-next { inset-inline-end: -10px; }
.gal-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; padding-top: 2px; }
.dot {
  width: 8px; height: 8px; padding: 0; border-radius: var(--r-pill);
  border: none; background: var(--line-strong); cursor: pointer;
  transition: background .15s, width .15s;
}
.dot:hover { background: var(--ink-30); }
.dot.on { background: var(--accent-strong); width: 22px; }

@media (min-width: 980px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; }
  .feature.flip .f-media { order: -1; }
  .shot { width: 236px; }
  .gal-btn { display: inline-flex; }
}
/* на телефоне лента уходит под обрез экрана и листается во всю ширину */
@media (max-width: 979px) {
  .f-media .shots { margin-inline: calc(var(--s-3) * -1); padding-inline: var(--s-3); }
}

/* --------------------------------------------------- поп-ап «расчёт/КП» */
.lm-scrim {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(20, 20, 20, .38);
}
.lm-modal {
  position: fixed; z-index: 1510;
  top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-container); padding: var(--s-4) var(--s-3) var(--s-3);
  box-shadow: var(--shadow-float);
}
[dir="rtl"] .lm-modal { transform: translate(50%, -50%); }
.lm-scrim[hidden], .lm-modal[hidden] { display: none; }
.lm-close {
  position: absolute; top: 12px; inset-inline-end: 12px;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-alt); border: none; color: var(--ink); cursor: pointer;
}
.lm-close:hover { background: var(--line-strong); }
.lm-logo { display: block; height: 26px; width: auto; margin-bottom: 8px; }
.lm-kicker {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-caption); font-weight: var(--w-mid);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-30);
  padding-inline-end: 40px;
}
.lm-modal h3 {
  margin: 0 0 var(--s-1); padding-inline-end: 40px;
  font-size: var(--fs-subheading); font-weight: var(--w-semi); line-height: 1.3;
}
.lm-sub { margin: 0 0 var(--s-3); color: var(--ink-50); font-size: var(--fs-body-sm); line-height: 1.5; }
#lmForm { display: grid; gap: var(--s-1); }
#lmForm input {
  height: 48px; padding: 0 18px; min-width: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: var(--fs-body-sm);
}
#lmForm input:focus { outline: none; border-color: var(--accent-strong); }
#lmForm input::placeholder { color: var(--ink-30); }
#lmForm .btn { margin-top: var(--s-1); width: 100%; }
.lm-done { display: grid; gap: var(--s-2); padding-block: var(--s-2); }
.lm-done[hidden] { display: none; }
.lm-done .btn { width: 100%; }
.lm-ok {
  margin: 0;
  color: var(--accent-strong); font-weight: var(--w-semi);
  font-size: var(--fs-body); line-height: 1.45; text-align: center;
}
.lm-note {
  margin: var(--s-2) 0 0;
  color: var(--ink-30); font-size: var(--fs-caption); line-height: 1.45;
}
.lm-note a { color: var(--ink-50); }
/* --- запись на демонстрацию: шаги и календарь свободных окон --- */
/* программа встречи — маркеры акцентом, текст тем же тоном, что lm-sub */
.lm-list {
  margin: 0 0 var(--s-2); padding-inline-start: 20px;
  color: var(--ink-50); font-size: var(--fs-body-sm); line-height: 1.5;
}
.lm-list li { margin: 0 0 4px; }
.lm-list li::marker { color: var(--accent-strong); }
.lm-step {
  margin: var(--s-1) 0 2px;
  font-size: var(--fs-body-sm); font-weight: var(--w-semi); color: var(--ink);
}
.bk-load { margin: 0; color: var(--ink-30); font-size: var(--fs-body-sm); }
.bk-cal { display: grid; gap: var(--s-1); }
/* лента дней: прокручивается пальцем, чипы прилипают к началу, выбранный
   день — акцентом */
.bk-days {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; scroll-snap-type: x proximity;
}
.bk-days[hidden], .bk-times[hidden], .bk-load[hidden], .bk-tz[hidden], .bk-err[hidden] { display: none; }
/* touch-action: manipulation — палец не ждёт двойного нажатия, чип
   срабатывает мгновенно; подсветку касания рисуем сами состоянием .sel */
.bk-day, .bk-time { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bk-day:focus-visible, .bk-time:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.bk-day {
  flex: 0 0 auto; min-width: 62px; padding: 7px 10px;
  scroll-snap-align: start;
  border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--surface); color: var(--ink);
  font-family: inherit; cursor: pointer; text-align: center;
}
.bk-day b { display: block; font-size: var(--fs-body-sm); font-weight: var(--w-semi); }
.bk-day span { display: block; font-size: var(--fs-caption); color: var(--ink-50); }
.bk-day.sel { border-color: var(--accent-strong); background: var(--accent-soft); }
.bk-day.sel span { color: var(--accent-strong); }
/* часы выбранного дня; занятое время видно, но не нажимается */
.bk-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bk-time {
  height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: var(--fs-body-sm); cursor: pointer;
}
.bk-time.sel { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.bk-time.busy {
  color: var(--ink-30); background: var(--bg-alt); border-color: var(--line);
  text-decoration: line-through; cursor: not-allowed;
}
.bk-tz { margin: 0; font-size: var(--fs-caption); color: var(--ink-30); }
.bk-err { margin: 0; font-size: var(--fs-body-sm); color: #b42318; }
/* отказ по почте — под полем контакта, до кнопки */
.lm-err { margin: 2px 0 0; font-size: var(--fs-body-sm); color: #b42318; line-height: 1.45; }
.lm-err[hidden] { display: none; }
/* экран после записи: выбранное время + что будет дальше */
.lm-slot { margin: 0; text-align: center; font-weight: var(--w-semi); font-size: var(--fs-body); }
.lm-ok2 {
  margin: 0; color: var(--ink-70);
  font-size: var(--fs-body-sm); line-height: 1.5; text-align: center;
}
/* Появление окна: на столе — мягкое проявление (transform не трогаем,
   центровку держит translate, в RTL он свой), затемнение проявляется само */
@media (prefers-reduced-motion: no-preference) {
  .lm-scrim { animation: lm-fade .2s ease-out; }
  .lm-modal { animation: lm-fade .22s ease-out; }
}
@keyframes lm-fade { from { opacity: 0; } }
@keyframes lm-rise { from { opacity: .4; transform: translateY(40px); } }
/* Телефон: не карточка в центре, а лист снизу — на всю ширину, со своим
   запасом под жестовую полосу; чипы крупнее, чтобы попадать пальцем */
@media (max-width: 640px) {
  .lm-modal {
    top: auto; bottom: 0; inset-inline-start: 0; transform: none;
    width: 100%;
    max-height: calc(100vh - 40px);  /* запас для браузеров без dvh */
    max-height: calc(100dvh - 40px);
    border-radius: var(--r-container) var(--r-container) 0 0;
    border-bottom: none;
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  }
  [dir="rtl"] .lm-modal { transform: none; }
  .bk-day { min-width: 72px; padding: 10px 12px; }
  .bk-time { height: 48px; font-size: var(--fs-body); }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .lm-modal { animation: lm-rise .26s ease-out; }
}

/* --------------------------------------------------------------- лайтбокс */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 20, 20, .82);
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.lightbox[hidden] { display: none; }
/* Картинка занимает почти весь экран, но никогда не растягивается за свой
   натуральный размер — точный предел ставит site.js по naturalWidth. */
.lb-fig { margin: 0; max-width: 96vw; }
.lb-fig img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 90vh;
  border-radius: var(--r-card); background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
}
.lb-btn {
  position: absolute; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3); cursor: pointer;
  font-family: inherit; font-size: var(--fs-body-sm); font-weight: var(--w-ui);
  transition: background .12s;
}
.lb-btn:hover { background: rgba(255, 255, 255, .28); }
/* «Закрыть» — словом, сверху: заметнее безымянного крестика */
.lb-close {
  top: max(14px, env(safe-area-inset-top)); inset-inline-end: 14px;
  width: auto; padding: 0 18px;
}
.lb-prev { inset-inline-start: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { inset-inline-end: 10px; top: 50%; transform: translateY(-50%); }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }

.feature-row { display: grid; gap: var(--s-2); }
@media (min-width: 760px) { .feature-row { grid-template-columns: 1fr 1fr; gap: var(--s-3); } }
.fcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-container); padding: var(--s-4) var(--s-3);
}
.fcard h2 { font-size: var(--fs-heading); }
.fcard .kicker { margin-bottom: var(--s-1); }
.f-lead { margin: 0 0 var(--s-2); font-size: var(--fs-subheading); font-weight: var(--w-mid); line-height: 1.4; }
.fcard .f-text:last-child { margin-bottom: 0; }

/* ------------------------------------------------- появление при прокрутке */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
}