/* ============================================================================
   drmazin.ru - визуальный слой «Латунь». Общий для всех страниц сайта.

   Откуда взялась гамма. Два присланных референса сошлись на одном сочетании,
   хотя сделаны разными людьми в разных странах:
     smilespb.ru            - почти-чёрный #1A1919 и приглушённое золото #83754E;
     facetas.edsondasilva   - графит #151719, шампань #AD9664, тёплый беж #D5D1C7.
   Отсюда база: тёплый графит и латунь. Бургунди из третьего пожелания живёт
   отдельно и редко - только на результатах кейсов, где он работает как печать,
   а не как тревога (красный в медицине читается плохо, бордовый - нет).
   От Apple здесь не цвет, а поведение: воздух, крупная лёгкая типографика,
   волосяные линии вместо рамок и почти полное отсутствие теней.

   Ритм страницы: бумага - основа, графит - акцент. Раньше было наоборот, и
   тёмного выходило три четверти страницы: для сайта врача это перебор -
   человеку в тревоге светлое даётся легче. Теперь тёмных островов на странице
   два-три (первый экран, финальный призыв, подвал), всё остальное - бумага.

   Как это устроено технически. Фиксированных слоя три: бумага, миллиметровка
   и холст с чертежом. Тёмный остров - не блок с заливкой, а подложка, которая
   лежит НИЖЕ холста (z-index -2 против -1). Поэтому чертёж рисуется поверх
   острова и остаётся живым на тёмном, а не прячется под ним.

   Чертёж на графите и на бумаге - разные чернила: на тёмном латунь, на
   светлом графитовый карандаш. Гаммы две, страница переключает их по ходу
   прокрутки (lux.js → panorama.js), переход плавный.

   Контраст проверен: латунь #C9A961 на графите #14120F даёт 8:1, тёмная
   кнопка на бумаге - 15:1. Латунь как цвет мелкого текста на светлом не
   используется нигде - там она только для линий, меток и цифр.
   ========================================================================== */

/* ── Шрифты ───────────────────────────────────────────────────────────────
   Onest - геометрический гротеск с хорошей кириллицей, в лёгких начертаниях
   даёт ровно ту «дорогую» лёгкость, что у Poppins ExtraLight на facetas.
   Playfair Display - высококонтрастная антиква, второй скин заголовков.
   Оба лежат у нас, внешних CDN нет: сайт должен открываться из любой сети. */
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Onest-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/Playfair-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/Playfair-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/Playfair-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── Ещё три семейства на выбор ───────────────────────────────────────────
   Manrope - гуманистический гротеск, теплее и мягче Onest.
   Literata - переходная антиква, контраст умереннее, чем у Playfair.
   Spectral - антиква с низким контрастом, самая спокойная из трёх.
   Все три с кириллицей и лежат у нас, без CDN. */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Literata-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Literata-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/Spectral-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/Spectral-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/Spectral-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/Spectral-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Палитра ─────────────────────────────────────────────────────────────── */
[data-skin="lux"] {
  --ink:      #14120F;   /* тёплый графит - тёмные экраны */
  --ink-2:    #1C1915;
  --paper:    #FAF8F4;   /* тёплая бумага - светлая середина */
  --paper-2:  #F1ECE3;

  --bg:        var(--paper);
  --bg-soft:   var(--paper-2);
  --card:      #FFFFFF;
  --line:      #E5DED1;
  --line-soft: #EFEAE1;

  --text:   #14120F;
  --text-2: #5D5648;
  --text-3: #948B7B;

  --gold:      #A8894F;   /* латунь на светлом: линии, метки, цифры */
  --gold-lit:  #C9A961;   /* латунь на тёмном: там она и текст тоже */
  --gold-deep: #8A6E3A;
  --wine:      #6E2233;   /* бургунди - только результаты кейсов */

  --accent:      var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-soft: #F1E8D6;
  --warm:        var(--wine);
  --warm-soft:   #F5E9EB;

  /* Цвета живого фона. panorama.js читает их отсюда: чертёж должен жить в той
     же гамме, что и текст рядом, иначе он выглядит чужой картинкой.
     Гаммы две, потому что подложек тоже две.

     1. На графите (первый экран, финал) - латунь. Тут ничего не меняем:
        именно этот кадр и есть лицо сайта. */
  --scene-bg:     #14120F;
  --scene-line:   #6B6151;
  --scene-accent: #C9A961;
  /* Сила линий чертежа. На графите он уходит в глубину и почти не мешает,
     но в паре мест всё же наезжает на текст - убавили на четверть. */
  --scene-ink:    0.78;
  /* Служебные подписи чертежа на графите заметнее, чем были на бумаге:
     светлое на тёмном всегда лезет вперёд. Гасим на пару тонов, иначе они
     спорят с заголовком, который проходит по тому же месту. */
  --scene-label:  #625948;

  /* 2. На бумаге - графитовый карандаш. Латунь на светлом выцветала в ничто:
        золото светлее бумаги ровно настолько, чтобы его не было видно вовсе.
        Графит темнее бумаги, поэтому виден при любой прозрачности - а вести
        его надо очень тихо, иначе линии лягут в одну плоскость с буквами и
        начнут мешать читать. 0.30 - чертёж угадывается, текст не страдает. */
  --scene-bg-paper:     #FAF8F4;
  --scene-line-paper:   #2C2822;
  --scene-accent-paper: #3B342A;
  --scene-label-paper:  #6E6659;
  /* 0.20, а не 0.30: на приёмке чертёж на бумаге оказался громче, чем нужно
     фону. Разница между «его видно» и «он мешает» тут в одну десятую. */
  --scene-ink-paper:    0.20;

  /* Между соседними светлыми секциями два отступа по 128px складывались в
     четверть пустого экрана. Воздух тут нужен, но не пропасть. */
  --sect-y: clamp(54px, 6.4vw, 96px);

  /* Тени почти убраны: на тёмном они не видны, а на светлом дешевят. */
  --shadow-sm: 0 1px 2px rgba(20, 18, 15, .04);
  --shadow-md: 0 2px 10px rgba(20, 18, 15, .06);
  --shadow-lg: 0 10px 40px rgba(20, 18, 15, .10);
}

/* ── Тёмный остров ────────────────────────────────────────────────────────
   Не отдельная тема, а переопределение тех же переменных на куске страницы.
   Поэтому все компоненты - кнопки, метки, карточки - работают в обеих зонах
   без единого дублирующего правила.

   Подложка острова лежит на z-index -2: ниже холста с чертежом (-1), но выше
   бумаги и миллиметровки (-4 и -3). Из-за этого чертёж рисуется ПОВЕРХ
   тёмного острова - живым, а не спрятанным под заливкой. Ради этого у #main
   снят z-index: любой положительный z-index у предка создаёт свой слой, и
   подложка с -2 уехала бы вместе с ним наверх, закрыв холст. */
[data-skin="lux"] .ink-zone {
  position: relative;
  --text:   #F4EFE6;
  --text-2: #ABA294;
  --text-3: #7C7466;

  --card:      rgba(255, 255, 255, .045);
  --bg-soft:   rgba(255, 255, 255, .03);
  --line:      rgba(244, 239, 230, .14);
  --line-soft: rgba(244, 239, 230, .07);

  --accent:      var(--gold-lit);
  --accent-deep: #E2C583;
  --accent-soft: rgba(201, 169, 97, .14);

  color: var(--text);
}
[data-skin="lux"] .ink-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, #17140F 0%, #100E0B 100%);
}
/* Два тёмных острова подряд не должны показывать шов между собой. */
[data-skin="lux"] .ink-zone + .ink-zone::before { top: -1px; }
/* Граница острова - резкая, без растворения. Пробовали градиент: получалась
   мутная полоса, в которой заголовок не читался ни как светлый, ни как
   тёмный. Резкий край выглядит как лист, положенный на стол, - и это честнее
   про сайт, где чертёж и бумага соседствуют. */

/* ── Типографика ──────────────────────────────────────────────────────────
   Крупнее и легче, чем было. Заголовок в лёгком начертании большого кегля -
   главный признак дорогого сайта: он занимает место, но не давит. */
[data-skin="lux"][data-type="sans"]     { --font-head: 'Onest', 'Inter', sans-serif; }
[data-skin="lux"][data-type="serif"]    { --font-head: 'Playfair Display', 'Onest', Georgia, serif; }
[data-skin="lux"][data-type="manrope"]  { --font-head: 'Manrope', 'Inter', sans-serif; }
[data-skin="lux"][data-type="literata"] { --font-head: 'Literata', Georgia, serif; }
[data-skin="lux"][data-type="spectral"] { --font-head: 'Spectral', Georgia, serif; }

[data-skin="lux"] h1 {
  font-size: clamp(38px, 5.6vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
[data-skin="lux"] h2 {
  font-size: clamp(28px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
[data-skin="lux"] h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.015em;
  font-weight: 500;
}
/* Гротески держим в лёгком начертании - оно и даёт «дорого». Антиквы наоборот
   в лёгком разваливаются: у них тонкие штрихи и так тонкие. */
[data-skin="lux"][data-type="sans"] h1,
[data-skin="lux"][data-type="sans"] h2,
[data-skin="lux"][data-type="manrope"] h1,
[data-skin="lux"][data-type="manrope"] h2 { font-weight: 300; }
[data-skin="lux"][data-type="serif"] h1,
[data-skin="lux"][data-type="serif"] h2 { font-weight: 500; letter-spacing: -0.02em; }
[data-skin="lux"][data-type="literata"] h1,
[data-skin="lux"][data-type="literata"] h2,
[data-skin="lux"][data-type="spectral"] h1,
[data-skin="lux"][data-type="spectral"] h2 { font-weight: 400; letter-spacing: -0.015em; }

[data-skin="lux"] .lead {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--text-2);
}

/* Метка раздела: разрядка вместо жира. Линия слева осталась, но стала тоньше
   и длиннее - она теперь работает как поле чертежа, а не как маркер списка. */
[data-skin="lux"] .label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--accent);
}
[data-skin="lux"] .label::before { width: 34px; opacity: .8; }

/* ── Кнопки ───────────────────────────────────────────────────────────────
   На бумаге главная кнопка тёмная, на графите - латунная. Латунь на белом в
   роли фона кнопки не проходит по контрасту, и это не вкусовщина: белый текст
   на #A8894F даёт 3:1 при норме 4,5. */
[data-skin="lux"] .btn {
  --btn-bg: var(--ink);
  --btn-fg: #FAF8F4;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0;
}
[data-skin="lux"] .btn:hover { background: var(--ink-2); box-shadow: none; }
[data-skin="lux"] .ink-zone .btn { --btn-bg: var(--gold-lit); --btn-fg: #14120F; }
[data-skin="lux"] .ink-zone .btn:hover { background: var(--accent-deep); }
/* Контурная кнопка перечисляется после зонального правила намеренно: иначе
   правило зоны заливает её тем же золотом, и на первом экране две одинаковые
   кнопки спорят за главную. */
[data-skin="lux"] .btn--ghost,
[data-skin="lux"] .ink-zone .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
  background: transparent;
}
[data-skin="lux"] .btn--ghost:hover,
[data-skin="lux"] .ink-zone .btn--ghost:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Фиксированные слои фона ──────────────────────────────────────────────
   Порядок слоёв снизу вверх: бумага (-4), миллиметровка (-3), тёмные острова
   (-2), холст с чертежом (-1), содержимое страницы. Номера сдвинуты на один
   вниз против panorama.css как раз затем, чтобы между сеткой и холстом
   освободилось место для островов. */
[data-skin="lux"] .bg-paper {
  z-index: -4;
  background:
    radial-gradient(58% 46% at 74% 12%, rgba(168, 137, 79, .10), transparent 70%),
    radial-gradient(52% 44% at 8% 78%, rgba(110, 34, 51, .05), transparent 72%),
    linear-gradient(180deg, #FDFCFA 0%, #F4F0E8 100%);
}
[data-skin="lux"] .bg-grid {
  z-index: -3;
  background-image:
    linear-gradient(rgba(44, 40, 34, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 40, 34, .05) 1px, transparent 1px);
  background-size: 64px 64px;
}
/* Сцена не завелась (нет WebGL, «меньше движения», ошибка загрузки) - на
   бумаге остаётся неподвижный графитовый след дуги. */
[data-skin="lux"] body.no-scene .bg-paper::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' fill='none' stroke='%232C2822'%3E%3Cg stroke-opacity='.30' stroke-width='1.6'%3E%3Cpath d='M100 140 C140 520 380 660 600 660 C820 660 1060 520 1100 140'/%3E%3Cpath d='M212 150 C246 455 416 566 600 566 C784 566 954 455 988 150'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .5;
}

/* ── Бумага ───────────────────────────────────────────────────────────────
   Отдельного «листа бумаги» на странице больше нет: бумага теперь основа, а
   не полоса поверх графита. Класс .paper оставлен пустым нарочно - разметка
   старых страниц на него ссылается, и пусть ссылается: он просто ничего не
   делает. */
[data-skin="lux"] .paper { position: relative; background: none; }
/* panorama.css оставляет внизу место под служебный переключатель сцен - на
   боевой странице его нет, место возвращаем содержимому. */
@media (max-width: 760px) { [data-skin="lux"] body { padding-bottom: 0; } }
/* z-index: auto - обязательное условие, а не мелочь. С положительным z-index
   у #main всё содержимое уезжает в собственный слой, и подложки тёмных
   островов (-2) поднимаются вместе с ним поверх холста, закрывая чертёж. */
[data-skin="lux"] #main { position: relative; z-index: auto; }

/* ── Шапка ────────────────────────────────────────────────────────────────
   Шапка одна и висит поверх всего, а под ней проезжают то бумага, то тёмный
   остров. Поэтому она умеет обе стороны: по умолчанию бумажная, а над тёмным
   островом - светлая на прозрачном. Класс вешает скрипт (lux.js), он же
   переключает чернила чертежа - обе смены идут одновременно и выглядят как
   одно движение. */
[data-skin="lux"] .hdr {
  background: rgba(250, 248, 244, .88);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  color: var(--text);
  border-bottom-color: var(--line);
  transition: background .4s var(--ease), color .4s var(--ease);
}
/* Над тёмным островом шапка прозрачная. Совсем прозрачная мешала бы читать:
   в момент проезда буквы шапки накладываются на чужие буквы. Лёгкая тёмная
   вуаль сверху решает это, не превращая шапку в плашку. */
[data-skin="lux"] .hdr::before {
  content: '';
  position: absolute;
  inset: 0 0 -28px 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  /* Плотную часть тянем до самого низа шапки: при коротком градиенте кнопки
     первого экрана, проезжая под ней, просвечивали сквозь имя врача. */
  background: linear-gradient(180deg, rgba(16, 14, 11, .96) 72%, rgba(16, 14, 11, 0));
  transition: opacity .4s var(--ease);
}
[data-skin="lux"] .hdr.on-ink {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #F4EFE6;
}
[data-skin="lux"] .hdr.on-ink::before { opacity: 1; }
/* Класс .anchors нужен только чтобы app.js подсвечивал текущий раздел. Сам по
   себе это отдельная липкая полоса со своим фоном и маской - внутри шапки она
   рисовала светлый прямоугольник за пунктами меню. Гасим всё оформление,
   оставляя только поведение. */
[data-skin="lux"] .hdr .anchors {
  position: static;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  -webkit-mask-image: none;
          mask-image: none;
  z-index: auto;
}
[data-skin="lux"] .hdr .anchors a {
  flex: none;
  padding: 9px 14px;
  border-bottom: 0;
  border-radius: 999px;
  font-size: 14.5px;
}
[data-skin="lux"] .hdr .anchors a.is-active { color: var(--accent); font-weight: 500; }
[data-skin="lux"] .hdr .nav a { color: var(--text-2); }
[data-skin="lux"] .hdr .nav a:hover { color: var(--text); background: var(--paper-2); }
[data-skin="lux"] .hdr .brand__sub { color: var(--text-3); }
[data-skin="lux"] .hdr .btn { --btn-bg: var(--ink); --btn-fg: #FAF8F4; }
/* Контурная кнопка в шапке (на статьях и документах это «все статьи» и
   «вернуться на сайт») ловилась правилом выше и получала светлые буквы на
   прозрачном фоне - то есть исчезала. */
[data-skin="lux"] .hdr .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); }
[data-skin="lux"] .hdr.on-ink .btn--ghost { --btn-fg: #F4EFE6; border-color: rgba(244, 239, 230, .28); }

[data-skin="lux"] .hdr.on-ink .nav a { color: rgba(244, 239, 230, .72); }
[data-skin="lux"] .hdr.on-ink .nav a:hover { color: #F4EFE6; background: rgba(255, 255, 255, .07); }
[data-skin="lux"] .hdr.on-ink .brand__sub { color: rgba(244, 239, 230, .5); }
[data-skin="lux"] .hdr.on-ink .btn { --btn-bg: var(--gold-lit); --btn-fg: #14120F; }
[data-skin="lux"] .hdr.on-ink .anchors a { color: rgba(244, 239, 230, .72); }

/* ── Якорное меню внутренних страниц ──────────────────────────────────────
   На главной якоря живут внутри шапки, а на внутренних страницах это своя
   липкая полоса под ней. Значит, и вести себя она должна как шапка: над
   бумагой бумажная, над тёмным островом - прозрачная и светлая. Высоту
   прилипания задаёт lux.js: она равна высоте шапки, а та зависит от окна. */
[data-skin="lux"] body > .anchors {
  background: rgba(250, 248, 244, .9);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
[data-skin="lux"] body > .anchors a {
  border-bottom: 0;
  padding: 13px 14px;
  font-size: 14px;
  transition: color .3s var(--ease);
}
[data-skin="lux"] body > .anchors a.is-active { color: var(--accent); font-weight: 500; }
[data-skin="lux"] body > .anchors.on-ink {
  background: rgba(16, 14, 11, .82);
  border-bottom-color: rgba(244, 239, 230, .12);
}
[data-skin="lux"] body > .anchors.on-ink a { color: rgba(244, 239, 230, .72); }
[data-skin="lux"] body > .anchors.on-ink a:hover { color: #F4EFE6; }
[data-skin="lux"] body > .anchors.on-ink a.is-active { color: var(--gold-lit); }

/* Подложка под текстом первого экрана на внутренних страницах: цвет берётся
   из зоны, поэтому одно правило работает и на бумаге, и на графите. Без
   этого над тёмным островом висело светлое облако из panorama.css. */
[data-skin="lux"] .hero__grid > div:first-child::before {
  background: radial-gradient(78% 66% at 32% 48%, var(--veil), transparent 76%);
}

/* ── Первый экран внутренних страниц ──────────────────────────────────────
   Здесь заголовок делит экран с портретом, поэтому он на размер меньше
   главной: тем же кеглем он занимал пять строк, и кнопка уезжала за нижний
   край окна. */
[data-skin="lux"] .hero__grid h1 {
  font-size: clamp(32px, 3.7vw, 58px);
  line-height: 1.06;
}
[data-skin="lux"] .hero__lead { font-size: clamp(16px, 1.5vw, 19px); }
/* Портрет снят на белом фоне, и на графите он лежал светящимся прямоугольником.
   Оставляем его светлым нарочно, но делаем отпечатком: чёрно-белым, с прямым
   углом и волосяной латунной каймой - фотография, положенная на чертёж.
   Круглые углы в 20 пикселей тут читались как виджет из другого макета. */
[data-skin="lux"] .hero__photo img {
  border-radius: 2px;
  filter: grayscale(1) contrast(1.04);
  border: 1px solid rgba(201, 169, 97, .3);
  background: var(--paper-2);
}
[data-skin="lux"] .hero__halo { display: none; }
/* Плашка-факт поверх фото: на графите белая карточка слепила, а её цифра
   терялась. Делаем её тёмной с латунной цифрой - тот же приём, что у цифр
   в блоке «сколько это стоит». */
[data-skin="lux"] .ink-zone .hero__badge {
  background: rgba(20, 18, 15, .88);
  border-color: rgba(201, 169, 97, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}
[data-skin="lux"] .hero__badge b {
  font-family: var(--font-head);
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--accent);
}
/* Цифра на /online завёрнута в span - его же ловило правило про мелкую
   подпись под цифрой, и «300+» выходило меньше собственного пояснения. */
[data-skin="lux"] .hero__badge b span {
  display: inline;
  font-size: inherit;
  color: inherit;
  margin: 0;
}

/* ── Аватарка вместо квадрата с буквами ───────────────────────────────────
   Квадрат «ЕМ» - это логотип компании, а сайт не компания: сюда приходят к
   человеку. Лицо в шапке решает за два слова то, что монограмма не решает
   вовсе. Чёрно-белым - чтобы фотография не спорила с латунью и не тянула на
   себя внимание там, где её задача - только подпись. */
.brand__face {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 14%;
  filter: grayscale(1) contrast(1.05);
  border: 1px solid var(--line);
  background: var(--paper-2);
  transition: border-color .4s var(--ease);
}
[data-skin="lux"] .hdr.on-ink .brand__face { border-color: rgba(201, 169, 97, .5); }
@media (max-width: 620px) { .brand__face { width: 36px; height: 36px; } }

/* ── Подложка под текстом на чертеже ──────────────────────────────────────
   Приглушить линии по всей сцене можно только до предела: дальше фон исчезает
   совсем. Поэтому вторым слоем гасим чертёж точечно - там, где идёт текст.
   Это не плашка: мягкое пятно цвета фона без единой границы, глазом оно не
   читается как прямоугольник, но контраст букв поднимает заметно.
   Цвет пятна берётся из зоны, поэтому один класс работает и на графите,
   и на бумаге. */
/* Значения по умолчанию - для светлых секций: они лежат вне зон и раньше
   оставались без переменной вовсе, отчего слово-тень у отзывов не появлялось. */
[data-skin="lux"] { --veil: rgba(250, 248, 244, .90); --ghost: rgba(20, 18, 15, .06); }
[data-skin="lux"] .ink-zone { --veil: rgba(20, 18, 15, .86); --ghost: rgba(201, 169, 97, .11); }

/* ── Слово-тень за заголовком ─────────────────────────────────────────────
   Приём подсмотрен на smilespb: за заголовком лежит то же (или родственное)
   слово - крупнее, жирнее и почти неразличимого тона. Оно не читается как
   текст, а работает как фактура: заголовок получает вес, а страница -
   второй план. На чертеже это ещё и удобно: пятно слова само притеняет
   линии под заголовком. */
.head-lux[data-ghost] { position: relative; }
.head-lux[data-ghost]::after {
  content: attr(data-ghost);
  position: absolute;
  left: -0.05em;
  top: -0.34em;
  z-index: -1;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(58px, 9.5vw, 148px);
  line-height: .9;
  letter-spacing: -0.055em;
  color: var(--ghost);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 760px) { .head-lux[data-ghost]::after { display: none; } }

/* Подложки и слово-тень нарочно вылезают за края своего блока - иначе видно
   их границы. Но вылезают они и за край страницы, а это горизонтальная
   прокрутка на пустом месте. overflow-x: clip режет лишнее, не создавая
   прокручиваемой области (в отличие от hidden, который ломает липкую шапку). */
[data-skin="lux"] .section,
[data-skin="lux"] .hero,
[data-skin="lux"] .final,
[data-skin="lux"] .ftr { overflow-x: clip; }

/* Подложка нужна везде, где текст лежит прямо на чертеже, - а он теперь под
   всей страницей. На бумаге она не читается как облако (цвет тот же), но
   линии под буквами гасит. */
.hero-lux,
.head-lux,
.dossier,
.final .page { position: relative; }
/* Своя область наложения. Без неё слово-тень с z-index:-1 уезжает за фон
   полосы бумаги и пропадает - на светлых секциях его просто не было видно. */
.head-lux { isolation: isolate; }

.hero-lux::before,
.head-lux::before,
.dossier::before,
.final .page::before {
  content: '';
  position: absolute;
  inset: -34px -52px;
  z-index: -1;
  pointer-events: none;
  border-radius: 48px;
  background: radial-gradient(66% 58% at 32% 50%, var(--veil), transparent 74%);
}
/* У кейсов текст идёт через всю ширину, поэтому пятно шире и ровнее. */
.dossier::before {
  inset: -22px -44px;
  background: radial-gradient(78% 64% at 50% 50%, var(--veil), transparent 80%);
}
.final .page::before {
  background: radial-gradient(58% 62% at 50% 50%, var(--veil), transparent 76%);
}

/* ── Первый экран ─────────────────────────────────────────────────────────
   Портрета в герое больше нет. Фото на белом фоне посреди графита выглядит
   вырезанным из другого макета, а главное - оно спорило с чертежом за то же
   место. Врач остался на первом экране, но подписью: круглый медальон рядом
   с именем, как подпись на бланке. Крупное фото ушло в блок «кто я». */
[data-skin="lux"] .hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 124px 0 76px;
  /* Шапка липкая и стоит в потоке, то есть первый экран начинается под ней.
     Пока фон был общий на всю страницу, это было незаметно; с тёмным
     островом над ним оставалась светлая полоса в высоту шапки - шов.
     Поэтому экран заезжает под шапку и добирает эту высоту отступом.
     Высоту меряет lux.js: она зависит от ширины окна и длины имени. */
  margin-top: calc(-1 * var(--hdr-h, 70px));
  padding-top: calc(124px + var(--hdr-h, 70px));
  /* site.css режет герою всё, что вылезло. При высоком первом экране под нож
     попадала подпись врача внизу - на светлой версии её там просто не было. */
  overflow: visible;
}
/* .page - гибкий элемент внутри .hero, и без ширины он сжимается по содержимому
   и уезжает в центр вместе с margin:auto. Текст первого экрана должен стоять по
   той же левой границе, что и логотип в шапке. */
[data-skin="lux"] .hero > .page { width: 100%; }
.hero-lux { max-width: 1000px; }
.hero-lux__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-bottom: 34px;
}
.hero-lux__eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 169, 97, .5), transparent);
}
/* Перенос строки задан в разметке - ограничивать ширину нельзя, иначе
   заголовок ломается на три строки и первый экран не помещается в окно. */
.hero-lux h1 { text-wrap: nowrap; }
@media (max-width: 640px) { .hero-lux h1 { text-wrap: balance; } }
.hero-lux__lead {
  max-width: 46ch;
  margin: 30px 0 40px;
}
.hero-lux__cta { display: flex; flex-wrap: wrap; gap: 14px; }
/* Срок ответа под кнопкой - самое дешёвое доказательство надёжности из всех,
   и на живом сайте он есть, а на первом экране не было ни разу. */
.hero-lux__srok {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero-lux__srok::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ── Частые вопросы ───────────────────────────────────────────────────────
   Та же механика, что у кейсов: свёрнутый вопрос - строка, ответ по клику.
   Пять вопросов подряд развёрнутыми превращают конец страницы в стену. */
/* ВАЖНО: класс .faq уже занят в site.css - там это карточка с заливкой,
   рамкой, скруглением и собственным шевроном через summary::after. Мои
   правила легли поверх, и получилось два указателя и светлая плашка посреди
   графита. Гасим карточку и пользуемся её же шевроном - свой не нужен. */
.faq {
  display: block;
  gap: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  overflow: visible;
}
.faq details { background: none; }
.faq summary:hover { background: none; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: -0.015em;
  transition: opacity .2s var(--ease);
}
/* Свой плюс в кружке уже есть, а браузер рисует рядом собственную стрелку.
   Гасим все три способа: старый вебкитовский маркер, ::marker и list-style -
   какой именно сработает, зависит от версии браузера. */
.faq__item > summary::-webkit-details-marker,
.dossier__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker,
.dossier__item > summary::marker { content: ''; }
.faq__item, .faq__item > summary,
.dossier__item, .dossier__item > summary { list-style: none; }
.faq__item > summary:hover { opacity: .75; }
.faq__q { flex: 1; }
/* Указатель один - тот, что уже рисует site.css через summary::after.
   Свой шеврон убран, иначе на строке два одинаковых значка. */
.faq summary::after { margin-left: auto; }
.faq__item[open] > summary::after { border-color: var(--accent); }
.faq__a {
  padding: 0 58px 26px 0;
  max-width: 76ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-2);
}

/* ── Форма заявки ─────────────────────────────────────────────────────────
   Человек, дочитавший главную до конца, не должен уходить на другую страницу,
   чтобы написать. */
.zapis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.zapis__side p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.zapis__side p + p { margin-top: 14px; }
.zapis__what {
  margin-top: 24px;
  padding-left: 22px;
  border-left: 1px solid var(--accent);
}
.zapis__what b { display: block; margin-bottom: 10px; font-weight: 500; }
.zapis__what ol { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 15px; line-height: 1.7; }
[data-skin="lux"] .field input,
[data-skin="lux"] .field textarea,
[data-skin="lux"] .field select {
  background: var(--card);
  border-color: var(--line);
  border-radius: 4px;
}
/* Своя стрелка вместо системной: системная в macOS рисует синюю пилюлю,
   и поле выпадает из гаммы страницы. */
[data-skin="lux"] .field select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[data-skin="lux"] .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
[data-skin="lux"] .form__micro {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}

@media (max-width: 900px) { .zapis { grid-template-columns: 1fr; } }

/* Подпись врача: медальон, имя, регалии одной строкой. */
.signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  max-width: 560px;
}
.signature img {
  width: 58px; height: 58px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 14%;
  flex: none;
  filter: grayscale(1) contrast(1.04);
  border: 1px solid rgba(201, 169, 97, .35);
}
.signature__name { font-weight: 500; letter-spacing: -0.01em; }
.signature__meta { font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.45; }

/* Тонкая полоса «дальше» внизу первого экрана. */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.scroll-hint::after {
  content: '';
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--gold-lit), transparent);
}

/* ── Кейсы: досье вместо карточек ─────────────────────────────────────────
   Четыре одинаковых карточки с тремя абзацами каждая - это стена текста, и её
   не читают. Теперь свёрнутый кейс - одна строка: город, что вышло, сколько
   сэкономлено. Подробности открываются по клику тому, кому они нужны. */
.dossier { border-top: 1px solid var(--line); }
.dossier__item { border-bottom: 1px solid var(--line); }
.dossier__item > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 54px minmax(0, .85fr) minmax(0, 2fr) 34px;
  align-items: center;
  gap: 26px;
  padding: 26px 0;
  transition: opacity .2s var(--ease);
}
.dossier__item > summary::-webkit-details-marker { display: none; }
.dossier__item > summary:hover { opacity: .78; }
.dossier__no {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dossier__who { font-size: 15px; color: var(--text-2); }
.dossier__what {
  font-size: clamp(16px, 1.6vw, 21px);
  letter-spacing: -0.015em;
  line-height: 1.35;
}
/* Деньги внутри строки результата - латунью. Отдельной колонкой их держать
   нельзя: у казанского кейса денег нет вовсе, и колонка зияла бы прочерком. */
.dossier__what b {
  color: var(--accent);
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Указатель «раскрыть». Был плюс в кружке - и он читался как «добавить», а
   не как «развернуть»: плюс на сайтах чаще всего значит именно добавление.
   Ставим стрелку вниз, при раскрытии она переворачивается вверх. Это тот же
   значок, что и у вопросов ниже по странице, - один язык на всю страницу. */
.dossier__toggle {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  font-size: 0;                      /* прячем плюс из старой разметки */
  color: var(--accent);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.dossier__toggle::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.dossier__item[open] .dossier__toggle { border-color: var(--accent); }
.dossier__item[open] .dossier__toggle::after { transform: rotate(225deg) translate(-2px, -2px); }

/* Тот же значок вместо плюса в аккордеоне «подробнее обо мне». */
[data-skin="lux"] .about-more summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .3s var(--ease);
}
[data-skin="lux"] .about-more[open] summary::after {
  content: '';
  transform: rotate(225deg) translate(-3px, -3px);
}
.dossier__body {
  display: grid;
  grid-template-columns: 54px repeat(2, minmax(0, 1fr));
  gap: 26px;
  padding: 0 0 34px 0;
}
.dossier__body > :first-child { grid-column: 2; }
.dossier__lbl {
  display: block;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 9px;
}
.dossier__txt { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ── Плитка разделов (регистратура) ───────────────────────────────────────
   Главная отвечает на один вопрос - «куда мне», - и плитка это и есть ответ.
   Карточки не одинаковые: приём и онлайн занимают по половине ряда, потому
   что это услуги, а гайд, вебинар и статьи идут втрое мельче - их берут
   заодно. Разный размер тут работает как порядок приоритетов. */
[data-skin="lux"] .hcard {
  border-radius: 2px;
  background: var(--card);
  min-height: 0;
  padding: 26px 26px 22px;
}
[data-skin="lux"] .hcard:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: none;
}
[data-skin="lux"] .hcard__num {
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 400;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
[data-skin="lux"] .hcard h3 { font-size: clamp(19px, 2vw, 25px); font-weight: 400; letter-spacing: -0.02em; }
[data-skin="lux"] .hcard__sub { color: var(--text-2); }
[data-skin="lux"] .hcard__price { font-weight: 400; color: var(--accent); font-variant-numeric: tabular-nums; }
[data-skin="lux"] .hcard__go { border-color: var(--line); }
[data-skin="lux"] .hcard:hover .hcard__go { background: var(--accent); border-color: var(--accent); color: #14120F; }
[data-skin="lux"] .hub__col-title {
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: .2em;
  font-size: 11px;
  margin-top: 22px;
}
[data-skin="lux"] .hub__col-title::after { background: var(--line); }
[data-skin="lux"] .hub__grid { gap: 16px; }

/* ── Прайс: разделы вкладками ─────────────────────────────────────────────
   Как на старом сайте: полоса разделов сверху, под ней один открытый раздел.
   На узком экране полоса едет вбок каруселью - это лучше переноса в три
   этажа, потому что этажи съедают весь первый экран прайса.
   Края полосы растворяются: видно, что разделов больше, чем помещается. */
.ptabs {
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.ptabs__in {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.ptabs__in::-webkit-scrollbar { display: none; }
@media (max-width: 860px) {
  .ptabs {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
}
.ptabs__t {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 14px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 15px;
  color: var(--text-3);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.ptabs__t span {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ptabs__t:hover { color: var(--text-2); }
.ptabs__t.is-on { color: var(--text); border-bottom-color: var(--accent); }
.ptabs__t.is-on span { color: var(--accent); }

.price__panel { display: none; animation: tabIn .4s var(--ease); }
.price__panel.is-on { display: block; }
/* Во время поиска показываем совпадения из всех разделов сразу и подписываем,
   из какого раздела строка: иначе непонятно, что найдено. */
#price.is-search .price__panel.is-on::before {
  content: attr(data-title);
  display: block;
  margin: 18px 0 6px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
[data-skin="lux"] .price__row {
  border-top: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 13px 2px;
  font-size: 15.5px;
}
[data-skin="lux"] .price__row b { font-weight: 400; color: var(--accent); font-variant-numeric: tabular-nums; }
[data-skin="lux"] .price__search { border-radius: 2px; }
.price__note--panel { margin-top: 14px; font-size: 13px; color: var(--text-3); }

/* ── Запись на очный приём ────────────────────────────────────────────────
   Главное действие страницы - написать администратору, поэтому блок собран
   в одну колонку по центру: заголовок, две кнопки одинакового веса и мелкая
   строка с запасным вариантом. Форма из этого блока убрана не потому, что
   она плохая, а потому что она конкурирует: человек выбирает между «написать»
   и «заполнить восемь полей» и часто не делает ни того, ни другого. */
.zapis-cta { max-width: 720px; margin: 0 auto; text-align: center; }
.zapis-cta .label { justify-content: center; }
.zapis-cta__h {
  margin: 18px 0 16px;
  font-size: clamp(30px, 4vw, 52px);
}
.zapis-cta__lead { margin: 0 auto 34px; max-width: 52ch; }
.zapis-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.zapis-cta__btns .msg--primary { padding: 16px 30px; font-size: 16px; }

/* «Что дальше» под кнопками. Блок по центру, но текст в нём - по левому
   краю: три строки, выключенные по центру, читаются как эпитафия. */
.zapis-cta__what {
  max-width: 56ch;
  margin: 34px auto 0;
  padding-left: 22px;
  border-left: 1px solid var(--accent);
  text-align: left;
}
.zapis-cta__what b { display: block; margin-bottom: 8px; font-weight: 500; }
.zapis-cta__what p { color: var(--text-2); font-size: 15px; line-height: 1.65; }
.zapis-cta__tiny {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--text-3);
}

/* Запасной вариант - мелкой строкой. Кликабельно всё, но подчёркнуто только
   «через форму»: так строка читается как фраза, а не как ещё одна кнопка. */
.zapis-alt { margin-top: 26px; }
.zapis-alt > summary {
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-3);
}
.zapis-alt > summary::-webkit-details-marker { display: none; }
.zapis-alt > summary::marker { content: ''; }
.zapis-alt > summary span {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.zapis-alt > summary:hover span { color: var(--accent-deep); }
.zapis-alt__body {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  text-align: left;
  animation: tabIn .4s var(--ease);
}
.zapis-alt__body .btn { justify-self: center; }

/* ── Кейсы: карточки-карусель ─────────────────────────────────────────────
   Раньше кейс был свёрнутой строкой, которую надо развернуть. Проблема в том,
   что развернуть догадывается один из десяти, а остальные видят четыре
   одинаковые строки и проматывают. Карточка показывает всё сразу: кто, что
   было, что сделали, чем кончилось. Карусель нужна, чтобы четыре карточки не
   выстроились стеной на весь экран - листается пальцем и стрелками. */
.cases-slider .slider__track { gap: 18px; }
.case-card {
  width: min(420px, 82vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--card);
}
.case-card__top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.case-card__no {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.case-card__who { font-size: 15.5px; letter-spacing: -0.01em; }
.case-card__who i { display: block; font-style: normal; font-size: 13px; color: var(--text-3); margin-top: 3px; }
.case-card__lbl {
  display: block;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
}
.case-card__part p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
/* Итог прижат к низу карточки: у всех кейсов он на одной линии, и колонку
   результатов можно читать по горизонтали, не вчитываясь в подробности. */
.case-card__res {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.5;
}
.case-card__res b {
  color: var(--accent);
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Край следующей карточки виден и растворяется - так понятно, что кейсов больше. */
[data-skin="lux"] .cases-slider .slider__track {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent 100%);
}

/* ── Доказательства: отзывы ───────────────────────────────────────────────
   Слева - крупная цифра и ссылка на источник, справа - сама лента. Скриншот
   без источника проверить нельзя, поэтому источник теперь крупнее скриншотов. */
.proof { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.proof__big {
  font-size: clamp(52px, 6vw, 84px);
  line-height: .9;
  letter-spacing: -0.05em;
  font-family: var(--font-head);
  font-weight: 300;
}
.proof__cap { margin-top: 14px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
/* Скриншот отзыва должен читаться прямо в карусели. В общем site.css он
   обрезан по высоте и кадрирован по левому краю - там это витрина, по которой
   кликают. Здесь наоборот: карточка во всю ширину колонки и полная высота
   картинки, кликать нужно только чтобы разглядеть мелкое. */
[data-skin="lux"] .proof { grid-template-columns: 1fr; }
[data-skin="lux"] .shot {
  width: min(100%, 1100px);
  height: auto;
  border-radius: 4px;
  border-color: var(--line);
  background: #fff;
}
[data-skin="lux"] .shot img {
  height: auto;
  object-fit: contain;
  object-position: center;
}
[data-skin="lux"] .shot:hover img { transform: none; }

/* Карусель: край следующего отзыва виден и растворяется. Без этого не
   понятно, что за первым скриншотом есть ещё двадцать - лента выглядит
   одной картинкой. Ширину карточки уменьшаем ровно на ширину «подглядки»,
   маска гасит правый край. */
[data-skin="lux"] #otzyvy .slider { --peek: clamp(34px, 7vw, 104px); }
[data-skin="lux"] #otzyvy .slider__item { width: calc(100% - var(--peek)); }
[data-skin="lux"] #otzyvy .slider__track {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--peek)), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - var(--peek)), transparent 100%);
}
/* Кнопки карусели не гасим на краях: лента закольцована, край - не тупик. */
[data-skin="lux"] #otzyvy .slider__btn:disabled { opacity: 1; cursor: pointer; }

/* ── Вкладки «с чем приходят» ─────────────────────────────────────────────
   Четыре ситуации подряд читаются как список услуг. Списком слева и одним
   раскрытым ответом справа они читаются как разговор: человек выбирает свою. */
.tabs { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.tabs__list { display: grid; }
.tabs__btn {
  appearance: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  text-align: left;
  padding: 20px 4px;
  cursor: pointer;
  font-size: clamp(18px, 1.9vw, 24px);
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-3);
  transition: color .2s var(--ease), padding-left .25s var(--ease);
  display: flex;
  align-items: center;
  gap: 14px;
}
.tabs__list .tabs__btn:last-child { border-bottom: 1px solid var(--line); }
.tabs__btn::before {
  content: '';
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .25s var(--ease);
}
.tabs__btn:hover { color: var(--text-2); }
.tabs__btn.is-on { color: var(--text); }
.tabs__btn.is-on::before { width: 26px; }
.tabs__pane { display: none; }
.tabs__pane.is-on { display: block; animation: tabIn .45s var(--ease); }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tabs__pain {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.tabs__ans { font-size: 16.5px; line-height: 1.65; color: var(--text-2); max-width: 52ch; }
.tabs__ans b { color: var(--accent); font-weight: 500; }
/* Без скрипта вкладки должны читаться все подряд - иначе три четверти блока
   пропадут у человека с выключенным JS и у поисковика. */
html:not(.js) .tabs__pane { display: block; margin-bottom: 34px; }
html:not(.js) .tabs { grid-template-columns: 1fr; }
html:not(.js) .tabs__list { display: none; }

/* ── Шаги разбора: рельс с крупными цифрами ───────────────────────────── */
.rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.rail__step { border-top: 1px solid var(--line); padding-top: 24px; }
.rail__no {
  font-family: var(--font-head);
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: 20px;
}
.rail__step h3 { margin-bottom: 10px; }
.rail__step p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.rail__note {
  margin-top: clamp(28px, 3.4vw, 46px);
  padding-left: 22px;
  border-left: 1px solid var(--accent);
  font-size: 15.5px;
  color: var(--text-2);
  max-width: 62ch;
}

/* ── Кто я: портрет и досье ───────────────────────────────────────────── */
.bio { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.bio__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 2px;
  filter: grayscale(1) contrast(1.03);
}
.bio__photo figcaption { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.bio__text p { font-size: 16.5px; line-height: 1.66; color: var(--text-2); }
.bio__text p + p { margin-top: 16px; }
/* Досье - таблица фактов. Регалии в столбик проверяются глазом за секунду,
   а тем же текстом внутри абзаца - никогда. */
.facts { margin-top: 34px; border-top: 1px solid var(--line); }
.facts__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}
.facts__row dt { color: var(--text-3); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; }
.facts__row dd { color: var(--text); }

/* ── Цифры ────────────────────────────────────────────────────────────── */
/* Колонки одинаковой ширины, а цифры в них - разной длины: «до 300к ₽» втрое
   шире, чем «87%». На общем кегле она упиралась в соседнюю колонку. Лечим
   двумя вещами сразу: колонка подстраивается под содержимое, и между
   колонками появляется настоящий зазор, а не только волосяная линия. */
.figures {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  column-gap: clamp(20px, 3.4vw, 56px);
}
.figure { padding-left: clamp(18px, 2.4vw, 40px); border-left: 1px solid var(--line); }
.figure:first-child { border-left: 0; padding-left: 0; }
.figure__n {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 14px;
  white-space: nowrap;
}
.figure__n i { font-style: normal; color: var(--accent); }
/* Денежная цифра длиннее прочих в три раза: на общем кегле она вылезала из
   своей колонки и наезжала на соседнюю. Ей нужен свой размер, а не перенос -
   перенос у крупных цифр читается как две разные цифры. */
.figure__n--sum {
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: -0.03em;
  padding-top: .28em;
  padding-bottom: .22em;
}
.figure p { font-size: 14px; color: var(--text-2); line-height: 1.45; }

/* ── Прайс-лист ───────────────────────────────────────────────────────────
   Не карточки тарифов, а лист с отточием: название - точки - цена. Приём из
   меню, и он делает ровно то, что нужно тут - показывает, что цены открыты
   и их не прячут за кнопкой «узнать стоимость». */
.tariff-list { border-top: 1px solid var(--line); }
.tariff-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(24px, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line-soft);
}
.tariff-row__nm { font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -0.015em; }
.tariff-row__nm span { display: block; font-size: 13.5px; color: var(--text-3); margin-top: 4px; letter-spacing: 0; }
.tariff-row__dots {
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
}
.tariff-row__pr {
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tariff-row--pick .tariff-row__pr { color: var(--accent); }
.tariff-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.tariff-foot p { color: var(--text-2); font-size: 15px; max-width: 46ch; }

/* ── Финал: связаться ─────────────────────────────────────────────────── */
.final { text-align: center; padding: clamp(70px, 10vw, 150px) 0; }
.final h2 { max-width: 16ch; margin: 0 auto 26px; }
.final__lead { max-width: 52ch; margin: 0 auto 42px; }
.final__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.final__tiny { margin-top: 22px; color: var(--text-3); font-size: 13px; }

/* ── Лента разделов ───────────────────────────────────────────────────── */
.strip { border-top: 1px solid var(--line); }
.strip__it {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left .25s var(--ease), color .2s var(--ease);
}
.strip__it:hover { padding-left: 12px; color: var(--accent); }
.strip__nm { font-size: 16.5px; letter-spacing: -0.01em; }
.strip__meta { font-size: 13px; color: var(--text-3); margin-left: auto; white-space: nowrap; }
.strip__go { color: var(--accent); }

/* ── Абзац, который проявляется по прокрутке ──────────────────────────────
   Слова стоят приглушёнными и наливаются цветом по очереди, пока абзац
   проходит середину окна. Механику взяли у originkit (там GSAP), сделали на
   своих двадцати строках. Появление слова - не просто цвет: лёгкий сдвиг и
   уход размытия, приём из 21st.dev. Вместе это читается как чужой голос,
   который проговаривает фразу, а не как анимация ради анимации. */
.fx-highlight { color: var(--text-3); }
.fx-word {
  display: inline-block;
  color: var(--text-3);
  filter: blur(2.4px);
  opacity: .55;
  transform: translateY(4px);
  transition: color .5s var(--ease), opacity .5s var(--ease),
              filter .5s var(--ease), transform .5s var(--ease);
}
.fx-word.is-lit {
  color: var(--text);
  opacity: 1;
  filter: none;
  transform: none;
}
/* Без JS и при «меньше движения» абзац обязан быть обычным абзацем. */
.fx-highlight--off .fx-word,
html:not(.js) .fx-word {
  color: inherit; opacity: 1; filter: none; transform: none; transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .fx-word { color: inherit; opacity: 1; filter: none; transform: none; transition: none; }
}

/* ── Появление по буквам ──────────────────────────────────────────────────
   Два приёма на одном движке. «Пружина» - буквы встают снизу и чуть
   перелетают: живо, но заметно, поэтому на главной такой заголовок один.
   «Фокус» - буквы наводятся на резкость из размытия: спокойнее и киношнее,
   он живёт на страницах инфопродуктов. */
.fx-letters { display: inline; }
.fx-w { display: inline-block; white-space: nowrap; }
.fx-c {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.fx-letters--rise .fx-c {
  transform: translateY(0.5em);
  opacity: 0;
  transition: transform .62s cubic-bezier(.2, 1.5, .4, 1), opacity .45s var(--ease);
}
.fx-letters--focus .fx-c {
  filter: blur(9px);
  opacity: 0;
  transform: scale(1.06);
  transition: filter .7s var(--ease), opacity .7s var(--ease), transform .7s var(--ease);
}
.fx-letters.is-in .fx-c {
  transform: none;
  opacity: 1;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .fx-c { transform: none !important; opacity: 1 !important; filter: none !important; transition: none; }
}

/* ── Слово, которое меняется ──────────────────────────────────────────────
   Заголовок стоит, а одно слово в нём перебирает ситуации. Ширина слота
   зафиксирована по самому длинному слову - иначе строка дёргается на каждой
   смене, и вместо приёма получается нервный тик. */
.fx-word-slot {
  display: inline-block;
  color: var(--accent);
  transition: opacity .3s var(--ease), transform .3s var(--ease), filter .3s var(--ease);
}
.fx-word-slot.is-out { opacity: 0; transform: translateY(-.18em); filter: blur(4px); }

/* ── Бегущая строка городов ───────────────────────────────────────────────
   Полоса на всю ширину, едет медленно сама и ускоряется от прокрутки.
   Края растворяются, чтобы лента не обрубалась о рамку окна. */
.rail-cities {
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rail-cities__in { display: flex; width: max-content; will-change: transform; }
.rail-cities__row { display: flex; align-items: center; flex: none; }
.rail-cities__it {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  font-size: clamp(15px, 1.7vw, 21px);
  letter-spacing: -0.01em;
  color: var(--text-2);
  white-space: nowrap;
}
.rail-cities__it::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .6;
}

/* ── Блеск по строке ──────────────────────────────────────────────────────
   Медленный блик по тексту. Ставим ровно там, где он что-то значит, -
   на метке «чаще всего берут» у тарифа. */
.shine {
  background: linear-gradient(100deg,
    currentColor 20%, #FFF3D0 38%, currentColor 56%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5.5s linear infinite;
}
@keyframes shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .shine { animation: none; -webkit-text-fill-color: currentColor; } }

/* ── Наклон карточки инфопродукта ─────────────────────────────────────────
   Карточка чуть поворачивается за курсором, по ней ходит блик. Приём
   магазинный - и работает он именно там, где продают вещь, а не услугу. */
[data-tilt] {
  position: relative;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
  isolation: isolate;
}
[data-tilt]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(42% 42% at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 245, 220, .16), transparent 70%);
}
[data-tilt]:hover::after { opacity: 1; }

/* ── Дот-матрица на финальном экране ──────────────────────────────────────
   Точечное поле, которое медленно дышит двумя слоями с разной скоростью.
   В каталоге это шум Перлина на холсте; здесь тот же эффект двумя слоями
   CSS - без единого килобайта скриптов и без нагрузки на телефон. */
.final.ink-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(rgba(201, 169, 97, .5) 1px, transparent 1.2px),
    radial-gradient(rgba(201, 169, 97, .3) 1px, transparent 1.2px);
  background-size: 34px 34px, 52px 52px;
  -webkit-mask-image: radial-gradient(72% 60% at 50% 50%, #000, transparent 78%);
          mask-image: radial-gradient(72% 60% at 50% 50%, #000, transparent 78%);
  animation: dots 26s linear infinite;
}
@keyframes dots {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 34px 68px, -52px 52px; }
}
@media (prefers-reduced-motion: reduce) { .final.ink-zone::after { animation: none; } }

/* ── Пульс по сетке на юридических страницах ──────────────────────────────
   Там нет трёхмерной сцены - и лист получается совсем неподвижным. Один
   медленный световой проход по миллиметровке за двадцать секунд возвращает
   странице дыхание и никому не мешает читать. */
body.no-scene .bg-grid {
  animation: gridPulse 22s ease-in-out infinite;
}
@keyframes gridPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { body.no-scene .bg-grid { animation: none; } }

/* ── Кнопки: заливка от точки курсора ─────────────────────────────────────
   Из точки, где курсор вошёл в кнопку, растекается заливка. Латунь на тёмном,
   графит на бумаге - кнопка на наведении меняется местами со своим фоном.
   Сама кнопка при этом стоит на месте: притяжение к курсору пробовали и
   убрали, на врачебном сайте оно неуместно.

   Раньше приём стоял только на крупных кнопках, теперь на всех: мелкие
   «Далее» и «Отмена» отзывались иначе, и разнобой был заметнее самого эффекта.
   Липкая кнопка исключена намеренно - она `position: fixed`, и `relative`
   отсюда сорвал бы её с места. Отклика она всё равно не теряет: живёт только
   на телефоне, где наведения нет. */
[data-skin="lux"] .btn:not(.sticky-cta),
[data-skin="lux"] .msg--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .25s var(--ease), color .25s var(--ease);
}
[data-skin="lux"] .btn:not(.sticky-cta)::after,
[data-skin="lux"] .msg--primary::after {
  content: '';
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  z-index: -1;
  width: 260%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--btn-sweep, rgba(255, 255, 255, .14));
  scale: 0;
  transition: scale .45s cubic-bezier(.22, 1, .36, 1);
}
[data-skin="lux"] .btn:not(.sticky-cta):hover::after,
[data-skin="lux"] .msg--primary:hover::after { scale: 1; }
[data-skin="lux"] .btn { --btn-sweep: rgba(201, 169, 97, .22); }
[data-skin="lux"] .ink-zone .btn { --btn-sweep: rgba(20, 18, 15, .16); }
[data-skin="lux"] .btn--ghost,
[data-skin="lux"] .ink-zone .btn--ghost { --btn-sweep: rgba(168, 137, 79, .12); }

/* ── Список статей ────────────────────────────────────────────────────────
   Строка вместо карточки: статей мало, и каждая должна читаться как
   заголовок, а не как плитка. Картинка всплывает под курсором (её показывает
   тот же скрипт, что и на витрине элементов). */
.artlist { list-style: none; max-width: 820px; }
.artlist li { border-top: 1px solid var(--line); }
.artlist li:last-child { border-bottom: 1px solid var(--line); }
.artlist a {
  display: grid;
  gap: 8px;
  padding: 26px 0;
  transition: padding-left .3s var(--ease);
}
.artlist a:hover { padding-left: 14px; }
.artlist__tag {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.artlist__nm {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 24ch;
}
.artlist a:hover .artlist__nm { color: var(--accent); }
.artlist__meta { font-size: 13px; color: var(--text-3); }

/* ── Таймлайн «что и когда» ───────────────────────────────────────────────
   Слева срок, справа что происходит. Читается сверху вниз как расписание,
   а не как схема процесса - человеку важнее «когда», чем «как устроено». */
.tline { display: grid; max-width: 820px; }
.tline__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
.tline__row:first-child { border-top: 1px solid var(--line); }
.tline__row:last-child { border-bottom: 1px solid var(--line); }
.tline__k {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 4px;
}
.tline__row p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 700px) {
  .tline__row { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Статья: оглавление сбоку и парные картинки ───────────────────────────
   Статья идёт двадцать минут. Без оглавления человек не знает ни сколько
   впереди, ни можно ли перескочить к своему разделу - а перескочить чаще
   всего и надо: врач ищет одну методику из пяти.
   Колонка липкая и стоит слева от текста; на узком экране становится
   обычным раскрывающимся списком над статьёй. */
.article-wrap {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.article-wrap .article { margin: 0; }
.artnav {
  position: sticky;
  top: calc(var(--hdr-h, 80px) + 24px);
  border-left: 1px solid var(--line);
  padding-left: 16px;
}
.artnav__t {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 12px;
}
.artnav__list { display: grid; gap: 9px; }
.artnav__list a {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text-3);
  transition: color .2s var(--ease);
}
.artnav__list a:hover { color: var(--text-2); }
.artnav__list a.is-on { color: var(--accent); }
[data-skin="lux"] .article h2 { scroll-margin-top: calc(var(--hdr-h, 80px) + 24px); }

/* Две схемы про одно и то же - рядом, а не одна под другой: так их
   и сравнивают. */
.article__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 32px 0; }
.article__pair figure { margin: 0; }

@media (max-width: 900px) {
  .article-wrap { grid-template-columns: 1fr; }
  .artnav {
    position: static;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 18px;
  }
  .artnav__list { grid-template-columns: 1fr 1fr; display: grid; gap: 8px 18px; }
  .article__pair { grid-template-columns: 1fr; }
}

/* ── Лонгрид ──────────────────────────────────────────────────────────────
   Статья - это та же бумага, только с колонкой текста. Цитаты и метки в ней
   были розовыми (второй акцент старой палитры) и выбивались из гаммы. */
[data-skin="lux"] .article__tag {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}
[data-skin="lux"] .article blockquote,
[data-skin="lux"] .pull {
  background: transparent;
  border-left: 1px solid var(--accent);
  border-radius: 0;
  padding: 4px 0 4px 22px;
  font-style: normal;
  color: var(--text-2);
}
/* Заголовок, который сам по себе цитата: линия слева остаётся, кегль -
   заголовочный. Кавычки уже стоят в тексте, вторых не добавляем. */
[data-skin="lux"] h2.pull {
  padding-left: 26px;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.02em;
}
[data-skin="lux"] .article h2 { letter-spacing: -0.025em; font-weight: 400; }
/* Картинки в статье - как в оригинале: по центру, уже колонки текста и
   никогда не крупнее исходника. Во всю ширину они выглядели плакатами и
   рвали чтение, а мелкие вроде схемы на 700px ещё и мылились от растяжения. */
[data-skin="lux"] .article figure { margin: 34px 0; text-align: center; }
[data-skin="lux"] .article figure img {
  width: auto;
  max-width: min(660px, 100%);
  margin: 0 auto;
  border-radius: 2px;
}
/* Подпись под картинкой - по центру и мельче текста статьи, как на Тильде.
   Линию слева убрали: она тянула подпись влево, а картинка стоит по центру. */
[data-skin="lux"] .article figcaption {
  max-width: 560px;
  margin: 12px auto 0;
  padding-left: 0;
  border-left: 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
}
/* Портрет автора после эпиграфов - круг 150px по центру, как в оригинале.
   Раньше это фото 300x300 растягивалось во всю колонку. */
[data-skin="lux"] .article figure.article__face { margin: 40px 0 34px; text-align: center; }
/* Вес селектора тут не прихоть: общее правило для картинок статьи идёт
   с [data-skin], и без него круг превращался обратно в квадрат. */
[data-skin="lux"] .article figure.article__face img {
  width: 150px; height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  border: 1px solid var(--line);
}
[data-skin="lux"] .artcard { border-radius: 2px; }
/* В «Латуни» заливка прогресса - латунная, дорожка под ней та же латунь,
   разбавленная до фона. Красить надо .progress__bar, а не .progress:
   .progress теперь дорожка, и сплошная латунь на ней съедала весь смысл. */
[data-skin="lux"] .progress { background: color-mix(in srgb, var(--accent) 18%, transparent); }
[data-skin="lux"] .progress__bar { background: var(--accent); }

/* ── Мелочи ───────────────────────────────────────────────────────────── */
[data-skin="lux"] .section { border-top: 0; }
[data-skin="lux"] .section--soft { background: transparent; }
[data-skin="lux"] .ftr { background: transparent; border-top: 1px solid var(--line); }
[data-skin="lux"] .msg { border-radius: 999px; }
[data-skin="lux"] .msg--primary { background: var(--accent); border-color: var(--accent); color: #14120F; }
[data-skin="lux"] .msg--primary .msg__ico { color: #14120F; }
[data-skin="lux"] .msg--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #14120F; }
[data-skin="lux"] .sticky-cta { --btn-bg: var(--ink); --btn-fg: #FAF8F4; }
[data-skin="lux"] .after-note { color: var(--text-3); font-size: 12.5px; margin-top: 18px; }

/* Заголовок раздела: метка сверху, заголовок под ней, лид рядом. */
.head-lux { margin-bottom: clamp(34px, 4.4vw, 64px); }
.head-lux .label { margin-bottom: 20px; }
.head-lux__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.head-lux__row p { color: var(--text-2); font-size: 16px; line-height: 1.6; }

/* ════════════════════════════════════════════════════════════════════════
   ВАРИАНТЫ ОФОРМЛЕНИЯ

   Их три, и разница между ними ровно одна: сколько на странице тёмных
   островов. Сама вёрстка не меняется - остров помечается классом .ink-zone,
   а какие блоки его получат, решает lux.js при загрузке.

     «Микс» (по умолчанию)  - острова там, где помечено в разметке:
                              первый экран, финальный призыв, подвал.
     «Светлый»              - островов нет вовсе, кроме помеченных .keep-ink.
     «Тёмный»               - островом становится вся страница.

   Раньше варианты жили в CSS и каждый тянул за собой десятки правил про
   «а вот тут кнопка должна быть другой». Теперь правило одно: остров тёмный,
   бумага светлая, - а варианты просто расставляют острова.
   ════════════════════════════════════════════════════════════════════════ */

/* Тёмный целиком: подложка страницы графитовая, отдельные подложки островов
   не нужны - они рисовали бы графит по графиту. */
[data-skin="lux"][data-mode="solid"] .bg-paper {
  background:
    radial-gradient(58% 46% at 72% 12%, rgba(201, 169, 97, .10), transparent 70%),
    radial-gradient(52% 44% at 10% 78%, rgba(110, 34, 51, .10), transparent 72%),
    linear-gradient(180deg, #17140F 0%, #100E0B 100%);
}
[data-skin="lux"][data-mode="solid"] .bg-grid {
  background-image:
    linear-gradient(rgba(201, 169, 97, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 97, .055) 1px, transparent 1px);
}
[data-skin="lux"][data-mode="solid"] .ink-zone::before { display: none; }
[data-skin="lux"][data-mode="solid"] body.no-scene .bg-paper::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' fill='none' stroke='%23C9A961'%3E%3Cg stroke-opacity='.34' stroke-width='1.6'%3E%3Cpath d='M100 140 C140 520 380 660 600 660 C820 660 1060 520 1100 140'/%3E%3Cpath d='M212 150 C246 455 416 566 600 566 C784 566 954 455 988 150'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .7;
}

/* Подвал в светлом варианте уходит в золото: страница заканчивается цветом,
   а не ещё одним белым экраном. Текст по золоту тёмный - контраст 8:1,
   читается лучше, чем белый по золоту. */
[data-skin="lux"][data-mode="light"] .ftr {
  background: linear-gradient(180deg, #CBAB63 0%, #B4924B 100%);
  border-top: 0;
  --text:   #14120F;
  --text-2: #3A3227;
  --text-3: #4F4535;
  --line:      rgba(20, 18, 15, .18);
  --line-soft: rgba(20, 18, 15, .12);
  --accent: #14120F;
  color: var(--text);
}
[data-skin="lux"][data-mode="light"] .ftr a,
[data-skin="lux"][data-mode="light"] .ftr .link,
[data-skin="lux"][data-mode="light"] .ftr h4 { color: #14120F; }

/* ── Узкие экраны ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .proof, .tabs, .bio { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .figure:nth-child(3) { border-left: 0; padding-left: 0; }
  .head-lux__row { grid-template-columns: 1fr; align-items: start; }
  .bio__photo { max-width: 320px; }
}

@media (max-width: 760px) {
  [data-skin="lux"] .hero {
    padding: 108px 0 76px;
    padding-top: calc(88px + var(--hdr-h, 62px));
    min-height: auto;
  }
  .hero-lux__lead { margin: 22px 0 30px; }
  .signature { margin-top: 38px; }
  .scroll-hint { display: none; }

  /* Свёрнутый кейс на телефоне - две строки вместо четырёх колонок. */
  .dossier__item > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    padding: 20px 0;
  }
  .dossier__no { grid-column: 1; font-size: 11px; }
  .dossier__toggle { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .dossier__what { grid-column: 1; }
  .dossier__who { grid-column: 1; }
  .dossier__sum { grid-column: 1; }
  .dossier__body { grid-template-columns: 1fr; gap: 20px; }
  .dossier__body > :first-child { grid-column: 1; }

  .figures { grid-template-columns: 1fr; }
  .figure { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
  .figure:first-child { border-top: 0; padding-top: 0; }

  .tariff-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tariff-row__dots { display: none; }
}