/* ═══════════════════════════════════════════════════════════════════════════
   «Мой Рай» — слой объёма (3D). Подключается ПОСЛЕ service.css и anim.css.
   Идея: один источник света сверху-слева. Всё, что поднято над фоном,
   получает многослойную тень + светлую верхнюю кромку + тёмную нижнюю.
   Плоских белых прямоугольников на сайте не остаётся.
   Мобильный — главный: объём там даётся скроллом и касанием, а не наведением.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ——— сцена ——— */
  --persp:1200px;
  --persp-near:760px;

  /* ——— свет ——— */
  --lum:#fffdfc;                       /* блик на верхней кромке */
  --shade:74,40,45;                    /* тень тонирована в брендовый, не серая */

  /* ——— лестница возвышений: 4 ступени, каждая — 4 слоя тени ——— */
  --lift-1:
    0 .5px 1px rgba(var(--shade),.05),
    0 2px 3px -1px rgba(var(--shade),.05),
    0 6px 12px -5px rgba(var(--shade),.09),
    0 12px 22px -12px rgba(var(--shade),.10);
  --lift-2:
    0 1px 1.5px rgba(var(--shade),.05),
    0 4px 8px -2px rgba(var(--shade),.07),
    0 14px 26px -9px rgba(var(--shade),.13),
    0 28px 48px -22px rgba(var(--shade),.18);
  --lift-3:
    0 2px 3px rgba(var(--shade),.06),
    0 8px 16px -4px rgba(var(--shade),.10),
    0 24px 44px -14px rgba(var(--shade),.18),
    0 48px 80px -34px rgba(var(--shade),.26);
  --lift-4:
    0 4px 8px rgba(var(--shade),.10),
    0 16px 32px -8px rgba(var(--shade),.16),
    0 40px 72px -20px rgba(var(--shade),.26),
    0 80px 120px -50px rgba(var(--shade),.34);

  /* ——— кромки: то, что превращает прямоугольник в предмет ——— */
  --rim:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(var(--shade),.05);
  --rim-strong:inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1.5px 0 rgba(var(--shade),.07);

  /* ——— поверхности: не заливка, а грань, освещённая сверху ——— */
  --face:linear-gradient(174deg,#fff 0%,#fffcfb 46%,#fdf6f4 100%);
  --face-alt:linear-gradient(174deg,#fffefd 0%,#fdf7f5 55%,#faeeea 100%);
  --face-deep:linear-gradient(168deg,#8f4857 0%,#a65c6b 52%,#8a4453 100%);

  --slow:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
}

/* Тонировать тени в брендовый цвет — дешёвый способ сделать «тёплый» объём.
   Переопределяем старые переменные, чтобы весь сайт подхватил новый свет. */
:root{ --sh-1:var(--lift-1); --sh-2:var(--lift-2); }

/* ─────────────────────────────────────────────────────────────────────────
   1. СЦЕНА. Секции становятся 3D-сценами, содержимое живёт в объёме.
   ───────────────────────────────────────────────────────────────────────── */
/* Перспективу и preserve-3d держим ТОЛЬКО там, где по оси Z реально
   что-то двигается. Раньше трёхмерным контекстом становилась каждая
   секция и каждая сетка: браузер держал под них отдельные слои, текст
   при прокрутке переразмечался и мерцал, страница подтормаживала.
   Там, где нужен разовый наклон, перспектива пишется прямо в transform. */
.hero__in{ perspective:var(--persp); perspective-origin:50% 34%; }

/* ─────────────────────────────────────────────────────────────────────────
   2. ВЪЕЗД ИЗ ГЛУБИНЫ. Блок приезжает из-за экрана и разворачивается
   к зрителю. Триггер — наблюдатель пересечения из anim.js: он ставит
   .is-in один раз и больше не снимает. Намеренно НЕ используем
   scroll-driven анимации (animation-timeline:view): при прокрутке вверх
   и на последних экранах блоки остаются полупрозрачными — контент,
   который иногда не виден, для поисковика и человека хуже, чем эффект.
   ───────────────────────────────────────────────────────────────────────── */
/* Состояние «ещё не показан» вешаем на :not(.is-in), а не сбрасываем
   потом через .is-in. Так после появления у элемента вообще нет своего
   transform — и правила наведения, нажатия и наклона работают как обычно,
   не перебиваясь более специфичным сбросом. */
.js-anim .d3-in{ transform-origin:50% 110%;
  transition:opacity .85s var(--slow),transform 1.1s var(--slow),
             box-shadow .55s var(--slow);
  transition-delay:var(--d,0s); }
.js-anim .d3-in:not(.is-in){ opacity:0;
  transform:perspective(var(--persp)) translate3d(0,26px,-42px) rotateX(5deg);
  will-change:transform,opacity; }
/* Карточки в сетке разворачиваются веером — небольшой боковой поворот.
   Пишем через :not(.is-in): иначе селектор с типом элемента оказывается
   специфичнее строки сброса, карточка навсегда остаётся отодвинутой
   вглубь, и браузер перестаёт рисовать в ней текст. */
.js-anim .cards > li.d3-in:not(.is-in),
.js-anim .team > li.d3-in:not(.is-in),
.js-anim .rel > li.d3-in:not(.is-in){
  transform:perspective(var(--persp)) translate3d(0,24px,-56px) rotateX(5deg) rotateY(var(--yr,0deg)); }
.js-anim .cards > li.d3-in:nth-child(3n+1),
.js-anim .team > li.d3-in:nth-child(3n+1){ --yr:3.5deg }
.js-anim .cards > li.d3-in:nth-child(3n),
.js-anim .team > li.d3-in:nth-child(3n){ --yr:-3.5deg }

/* ─────────────────────────────────────────────────────────────────────────
   3. ПЕРВЫЙ ЭКРАН. Слоёная сцена: шёлк на WebGL сзади, текст, фотокарточка
   и парящие плашки — на разной глубине. Реагирует на скролл, палец и
   (по желанию пользователя) наклон телефона.
   ───────────────────────────────────────────────────────────────────────── */
.hero{ position:relative; overflow:hidden; isolation:isolate; }

/* холст шёлка */
.scene{ position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.2s ease; }
.scene.is-live{ opacity:1; }
.scene canvas{ display:block; width:100%; height:100%; }
/* пока (или если) WebGL не поднялся — статичный градиент того же настроения */
.scene::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 46% at 74% 22%,rgba(255,241,238,.95) 0%,transparent 62%),
    radial-gradient(52% 44% at 22% 74%,rgba(233,196,203,.6) 0%,transparent 66%);
  opacity:1; transition:opacity 1s ease; }
.scene.is-live::after{ opacity:0; }

/* дышащий градиент из anim.js поверх шёлка лишний — убираем, когда сцена жива */
.scene.is-live ~ .hero__bg{ display:none; }

/* мягкое растворение сцены в белый низ страницы, чтобы не было шва */
.hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg,transparent,var(--bg) 88%); z-index:1; pointer-events:none; }

/* вуаль под текстом: шёлк остаётся виден, но буквы читаются на любом кадре.
   На широком экране светлеет левая половина, на телефоне — вся верхняя часть. */
.hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(178deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.5) 46%,rgba(255,255,255,.15) 78%,transparent 100%); }
@media (min-width:880px){
  .hero::before{ background:linear-gradient(96deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.6) 34%,rgba(255,255,255,.14) 58%,transparent 74%); }
}

.hero__in{ position:relative; z-index:2; }

/* Текст на первом экране НЕ выносим по оси Z: перспектива увеличивает
   поднятый элемент, и строки начинают вылезать за поля. Глубину тексту
   даёт вуаль под ним и тени соседних плашек. */
.hero__eyebrow{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.74));
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 6px 14px -8px rgba(var(--shade),.35); }

/* факты первого экрана — объёмные плашки */
.hero__facts{ gap:.6rem; }
.hero__facts > div{
  background:var(--face); border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--lift-2),var(--rim);
  border-radius:16px; padding:.7rem 1.05rem;
  transition:transform .6s var(--slow),box-shadow .6s var(--slow); }


/* фотокарточка: настоящая плита с толщиной. Толщину даёт не рамка, а
   многослойная тень плюс светлая кромка по контуру самого снимка. */
.hero__ph{ position:relative; transform-style:preserve-3d; min-width:0;
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  transition:transform .9s var(--slow); }
/* рамка держит медленный наезд на снимок внутри своих границ:
   без неё увеличенное изображение вылезало за поля страницы */
.hero__frame{ position:relative; overflow:hidden; border-radius:24px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.7),
    0 2px 4px rgba(var(--shade),.10),
    0 12px 24px -6px rgba(var(--shade),.20),
    0 34px 60px -18px rgba(var(--shade),.28),
    0 70px 110px -46px rgba(var(--shade),.38); }
/* внутренняя кромка — снимок выглядит утопленным в оправу, а не наклеенным */
.hero__frame::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(var(--shade),.07),
             inset 0 -24px 44px -30px rgba(var(--shade),.5);
  pointer-events:none; }
.hero__img{ border-radius:0; box-shadow:none; }

/* сетка первого экрана не должна разъезжаться шире экрана */
.hero__in,.hero__text,.hero__facts,.hero__lead,.hero__cta{ min-width:0; }
.hero__in > *{ min-width:0; }

/* плашка рейтинга парит над снимком */
.hero__badge{ transform:translateZ(46px);
  background:linear-gradient(178deg,#fff,#fdf7f5);
  box-shadow:var(--lift-3),var(--rim-strong); border-radius:18px; }

/* ——— телефон: первый экран должен помещаться в экран ———
   Было: кнопка записи уезжала на 1300-й пиксель, до неё нужно было
   листать. Порядок меняем — сначала суть и кнопка, потом факты и фото. */
@media (max-width:879px){
  .hero{ padding:1.5rem 0 2.3rem }
  .hero__in{ gap:1.4rem }
  .hero__text{ display:flex; flex-direction:column }
  .hero__eyebrow{ order:1; align-self:flex-start; margin-bottom:.75rem }
  .hero h1{ order:2; font-size:clamp(1.9rem,7.6vw,2.6rem) }
  .hero__lead{ order:3; font-size:1rem; line-height:1.5; margin:.75rem 0 1.15rem }
  .hero__cta{ order:4; display:grid; grid-template-columns:1fr; gap:.55rem; margin-bottom:1.15rem }
  .hero__cta .btn{ width:100% }
  .hero__facts{ order:5; margin-bottom:0; flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-left:-20px; margin-right:-20px; padding:.35rem 20px .5rem }
  .hero__facts::-webkit-scrollbar{ display:none }
  .hero__facts > div{ flex:0 0 auto; padding:.55rem .9rem; border-radius:14px }
  .hero__facts dd{ font-size:.95rem }
  .ymyl-note{ order:6 }
  /* широкий кадр вместо портретного: экономит около 150 пикселей высоты */
  .hero__img{ aspect-ratio:5/4; border-radius:20px }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. КНОПКИ. Настоящая физика: у кнопки есть нижняя грань, при нажатии
   она проседает. На телефоне это единственный тактильный отклик — важно.
   ───────────────────────────────────────────────────────────────────────── */
.btn{ position:relative;
  transition:transform .32s var(--spring),box-shadow .32s var(--slow),filter .3s ease; }
.btn--primary{
  background:linear-gradient(176deg,#b76d7b 0%,var(--brand) 40%,var(--brand-dark) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -2px 0 rgba(90,36,47,.5) inset,
    0 2px 4px rgba(140,70,85,.28),
    0 8px 16px -4px rgba(140,70,85,.42),
    0 18px 34px -14px rgba(140,70,85,.55); }
.btn--primary:hover{ transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -2px 0 rgba(90,36,47,.5) inset,
    0 3px 6px rgba(140,70,85,.3),
    0 12px 22px -4px rgba(140,70,85,.45),
    0 28px 46px -16px rgba(140,70,85,.6); }
.btn--primary:active{ transform:translateY(2px) scale(.985);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -1px 0 rgba(90,36,47,.5) inset,
    0 1px 2px rgba(140,70,85,.3),
    0 4px 8px -2px rgba(140,70,85,.4);
  transition-duration:.09s; }
.btn--ghost{ background:linear-gradient(178deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(166,92,107,.34);
  box-shadow:var(--lift-1),inset 0 1px 0 rgba(255,255,255,.95); }
.btn--ghost:hover{ transform:translateY(-2px); box-shadow:var(--lift-2),inset 0 1px 0 #fff; }
.btn--ghost:active{ transform:translateY(1px); box-shadow:var(--lift-1); transition-duration:.09s; }

/* ─────────────────────────────────────────────────────────────────────────
   5. КАРТОЧКИ. Грань с бликом, толщина, подъём при наведении/касании.
   ───────────────────────────────────────────────────────────────────────── */
.card,.panel,.step,.rev,.rel li,.place__card{
  background:var(--face); border:1px solid rgba(238,224,220,.9);
  box-shadow:var(--lift-1),var(--rim);
  transition:transform .55s var(--slow),box-shadow .55s var(--slow),border-color .45s ease; }

.sec--alt .card,.sec--alt .panel,.sec--alt .step,.sec--alt .rev,.sec--alt .rel li{
  background:linear-gradient(174deg,#fff 0%,#fffdfc 52%,#fdf8f6 100%); }

.card:hover,.rel li:hover,.place__card:hover{
  transform:translateY(-5px) scale(1.012);
  box-shadow:var(--lift-3),var(--rim-strong);
  border-color:rgba(166,92,107,.3); }

/* иконка услуги — не плашка, а вдавленная лунка со светящейся линией */
.card__icon{
  background:linear-gradient(168deg,#f7e6e6,#efd6d8);
  box-shadow:
    inset 0 2px 4px rgba(var(--shade),.14),
    inset 0 -1px 0 rgba(255,255,255,.85),
    0 1px 0 rgba(255,255,255,.9);
  border-radius:15px; transition:transform .5s var(--slow); }
.card:hover .card__icon{ transform:translateY(-2px); }

/* Пудровая заглушка на время загрузки живёт на самом снимке, а не на
   обёртке: обёртка выше картинки на её нижний отступ, и снизу вылезала
   розовая полоска. */
.js-anim .shot{ background:transparent; }
.team__i img,.gal img,.place__map img,.hero__img{
  background:linear-gradient(160deg,#f8ece9,#efd9d6); }

/* ─────────────────────────────────────────────────────────────────────────
   5б. ВСЯ КАРТОЧКА — ССЫЛКА. Раньше срабатывало только название; палец на
   телефоне попадал мимо, и карточка казалась неживой.
   Делаем это не скриптом, а невидимым перекрытием у самой ссылки: в
   разметке остаётся один настоящий <a>, поэтому работают и средняя кнопка,
   и Ctrl+клик, и «открыть в новой вкладке», и адрес в строке состояния,
   а поисковик видит ровно ту же ссылку, что и раньше.
   Псевдоэлемент ::after у этих ссылок уже занят подчёркиванием — берём
   ::before. Карточки без ссылки (например, «с чем приходят») не трогаем:
   их отбирает :has(), а где :has() не поддержан, всё остаётся как было.
   ───────────────────────────────────────────────────────────────────────── */
.cards--links .card:has(h3 a),
.rel li:has(> a),
.tbl tbody tr:has(a){ position:relative; cursor:pointer; }

/* Ссылка обязана быть НЕ позиционированной, иначе inset:0 у её
   псевдоэлемента растянется по самой ссылке, а не по карточке.
   Поэтому подчёркивание из anim.css переносим с абсолютного ::after
   на фоновую полоску — она рисуется тем же движением, но не требует
   position:relative и освобождает перекрытие. */
.cards--links .card h3 a,
.rel li > a{ position:static;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:left calc(100% - 1px);
  background-size:0 1.5px;
  transition:background-size .55s var(--slow),color .3s ease; }
.cards--links .card:hover h3 a,
.rel li:hover > a{ background-size:100% 1.5px; }
.cards--links .card h3 a::after,
.rel li > a::after{ display:none; }

.cards--links .card h3 a::before,
.rel li > a::before,
.tbl tbody td a::before{ content:""; position:absolute; inset:0; z-index:1; }

/* если внутри карточки когда-нибудь появится вторая ссылка или кнопка —
   она должна остаться выше перекрытия и работать сама по себе */
.cards--links .card p a,
.cards--links .card button,
.rel li > a ~ a{ position:relative; z-index:2; }

/* с клавиатуры рамка обводит карточку целиком, а не два слова заголовка */
.cards--links .card:has(h3 a:focus-visible),
.rel li:has(> a:focus-visible),
.tbl tbody tr:has(a:focus-visible){
  outline:2.5px solid var(--brand); outline-offset:3px; border-radius:var(--radius); }
.cards--links .card h3 a:focus-visible,
.rel li > a:focus-visible,
.tbl tbody td a:focus-visible{ outline:none; }

/* на строках прайса подсветка при наведении теперь относится ко всей строке */
.tbl tbody tr:has(a):hover td:first-child{ color:var(--brand-dark); }

/* ——— фото: рамка-паспарту с настоящей толщиной ——— */
.team__i img,.gal img{
  box-shadow:var(--lift-2),0 0 0 1px rgba(var(--shade),.06);
  transition:transform .6s var(--slow),box-shadow .6s var(--slow); }
.team__i:hover img,.gal li:hover img{ transform:translateY(-4px) scale(1.015); box-shadow:var(--lift-3); }

/* ——— галерея студии на телефоне: карусель с настоящей перспективой ———
   Было: одна колонка во всю ширину, четыре снимка растягивали страницу
   почти на две тысячи пикселей. Стало: лента, где кадры разворачиваются
   к зрителю по мере пролистывания. Прозрачность не трогаем — даже если
   браузер не умеет анимации по скроллу, все снимки видны и кликабельны. */
@media (max-width:879px){
  .gal{ display:flex; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory;
    perspective:900px; perspective-origin:50% 50%;
    margin-left:-20px; margin-right:-20px; padding:.6rem 20px 1.3rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    grid-template-columns:none!important; }
  .gal::-webkit-scrollbar{ display:none }
  .gal > li{ flex:0 0 66%; scroll-snap-align:center; }
  .gal img{ aspect-ratio:3/4; border-radius:18px; }

  /* мастера: две колонки вместо одной — минус ещё около тысячи пикселей */
  .team{ grid-template-columns:1fr 1fr; gap:1rem }
  .team__i img{ aspect-ratio:3/4 }
  .team__i h3{ font-size:1rem }
}
@supports (animation-timeline:view()){
  @media (max-width:879px) and (prefers-reduced-motion:no-preference){
    .gal > li{ animation:coverflow linear both; animation-timeline:view(x);
      animation-range:cover 0% cover 100%; }
  }
}
@keyframes coverflow{
  0%  { transform:rotateY(24deg) scale(.87) }
  50% { transform:rotateY(0deg) scale(1) }
  100%{ transform:rotateY(-24deg) scale(.87) }
}

/* ─────────────────────────────────────────────────────────────────────────
   6. ШАПКА. Стекло с толщиной; при прокрутке «прижимается» и темнеет тень.
   ───────────────────────────────────────────────────────────────────────── */
.hdr{ background:rgba(255,253,252,.72);
  backdrop-filter:saturate(1.5) blur(10px); -webkit-backdrop-filter:saturate(1.5) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 rgba(var(--shade),0);
  transition:box-shadow .5s var(--slow),background-color .5s ease; }
.hdr.is-stuck{ background:rgba(255,253,252,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,
             0 8px 20px -12px rgba(var(--shade),.28),
             0 20px 40px -30px rgba(var(--shade),.3); }
.hdr__logo .mark{ filter:drop-shadow(0 2px 3px rgba(var(--shade),.22)); }
.hdr__nav a{ transition:background-color .35s ease,color .35s ease,transform .35s var(--slow); }
.hdr__nav a:hover{ transform:translateY(-1px); }

/* мобильное меню — выезжающая панель с объёмом, а не плоский список */
@media (max-width:879px){
  /* фон панели непрозрачный: сквозь полупрозрачный текст первого экрана
     просвечивал и мешал читать пункты меню */
  .hdr__nav{ background:linear-gradient(180deg,#fffdfc 0%,#fdf7f5 100%);
    box-shadow:var(--lift-3); border-bottom:1px solid rgba(255,255,255,.9); }
  .hdr__nav.is-open{ display:block; animation:navDrop .5s var(--slow) both; }
  .hdr__nav.is-open li{ animation:navItem .5s var(--slow) both; }
  .hdr__nav.is-open li:nth-child(1){animation-delay:.04s}
  .hdr__nav.is-open li:nth-child(2){animation-delay:.08s}
  .hdr__nav.is-open li:nth-child(3){animation-delay:.12s}
  .hdr__nav.is-open li:nth-child(4){animation-delay:.16s}
  .hdr__nav.is-open li:nth-child(5){animation-delay:.20s}
  .hdr__nav.is-open li:nth-child(6){animation-delay:.24s}
}
@keyframes navDrop{ from{ opacity:0; transform:perspective(800px) rotateX(-9deg); transform-origin:50% 0 }
  to{ opacity:1; transform:none } }
@keyframes navItem{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }

/* ─────────────────────────────────────────────────────────────────────────
   7. ЦЕНЫ. На десктопе — плита со строками, что подсвечиваются.
   На мобильном каждая позиция становится объёмной карточкой: это главный
   экран принятия решения, ему нужен вес.
   ───────────────────────────────────────────────────────────────────────── */
.tbl{ background:var(--face); box-shadow:var(--lift-2),var(--rim); border-color:rgba(238,224,220,.9); }
.tbl tbody tr{ transition:background-color .3s ease; }
.tbl tbody tr:hover{ background:linear-gradient(90deg,rgba(246,231,231,.55),rgba(255,255,255,0)); }
.tbl thead th{ background:linear-gradient(180deg,#fdf8f6,#fbf3f0); }

@media (max-width:719px){
  .tbl tr{ background:var(--face); border:1px solid rgba(238,224,220,.9);
    box-shadow:var(--lift-2),var(--rim); border-radius:18px;
    transition:transform .4s var(--spring),box-shadow .4s var(--slow); }
  .tbl tr:active{ transform:scale(.985); box-shadow:var(--lift-1); }
  /* прайс из 37 позиций: экономим по 20 пикселей на карточке */
  .tbl tr{ padding:.95rem 1.1rem; margin-bottom:.7rem }
  .tbl tbody td:first-child{ padding-bottom:.5rem }
  .tbl tbody td:not(:first-child){ padding:.42rem 0 }
  /* цена «мастер» — акцентная, крупная; она и есть точка решения */
  .tbl tbody td:nth-child(3){ font-size:1.15rem; color:var(--brand-dark); font-weight:800;
    letter-spacing:-.03em; }
}

/* ─────────────────────────────────────────────────────────────────────────
   8. FAQ. Крышка, которая откидывается: тень растёт, содержимое выезжает.
   ───────────────────────────────────────────────────────────────────────── */
.faq details{ background:var(--face); box-shadow:var(--lift-1),var(--rim);
  border:1px solid rgba(238,224,220,.9); overflow:hidden;
  transition:box-shadow .5s var(--slow),transform .5s var(--slow); }
.faq details[open]{ box-shadow:var(--lift-3),var(--rim-strong); }
.faq summary::after{ transition:transform .45s var(--spring),color .3s ease; }
.faq details[open] summary::after{ transform:rotate(135deg); color:var(--brand-dark); }
.faq details[open] > div{ animation:faqOpen .5s var(--slow) both; }
@keyframes faqOpen{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }

/* ─────────────────────────────────────────────────────────────────────────
   9. ОТЗЫВЫ. Лента карточек, у которых видна глубина: боковые слегка
   отодвинуты в перспективу. На телефоне это читается как стопка.
   ───────────────────────────────────────────────────────────────────────── */
.rev{ background:var(--face); box-shadow:var(--lift-2),var(--rim);
  transition:transform .5s var(--slow),box-shadow .5s var(--slow); }
.rev:hover{ transform:translateY(-4px) scale(1.01); box-shadow:var(--lift-3); }
.rev__ava{ box-shadow:0 3px 8px -2px rgba(140,70,85,.5),inset 0 1px 0 rgba(255,255,255,.45); }
/* Скрипт прячет стрелки атрибутом hidden, когда ленту некуда листать, но
   авторское display:flex сильнее браузерного [hidden] — и стрелки всё
   равно висели, в том числе над пустой лентой. Возвращаем им немоту. */
.revs__nav[hidden],.swipe__nav[hidden]{ display:none; }
.revs__nav,.swipe__nav{ background:linear-gradient(178deg,#fff,#fdf7f5);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:var(--lift-2),var(--rim-strong); border-color:rgba(255,255,255,.9);
  transition:transform .4s var(--spring),box-shadow .4s var(--slow),opacity .3s ease; }
.revs__nav:hover,.swipe__nav:hover{ transform:translateY(-2px) scale(1.06); box-shadow:var(--lift-3); }
.revs__nav:active,.swipe__nav:active{ transform:translateY(1px) scale(.97); transition-duration:.1s; }

/* Стрелки лент висели в отступе секции, метрах в шестидесяти над своим
   заголовком. Ставим их по краям самой ленты — так понятно, чем они
   управляют, и они не спорят с заголовком за место. */
@media (min-width:900px){
  .sec .revs-wrap,.sec .swipe-wrap{ margin-top:0; padding-top:0; }
  .revs-wrap,.swipe-wrap{ margin-left:0; margin-right:0; }
  .revs__nav,.swipe__nav{ top:44%; --ty:-50%;
    transform:translateY(var(--ty)); }
  .revs__nav--prev,.swipe__nav--prev{ left:2px; right:auto }
  .revs__nav--next,.swipe__nav--next{ right:2px }
  .revs__nav:hover,.swipe__nav:hover{ transform:translateY(calc(var(--ty) - 1px)) scale(1.08) }
  .revs__nav:active,.swipe__nav:active{ transform:translateY(var(--ty)) scale(.96) }
  .revs__nav[disabled],.swipe__nav[disabled]{ transform:translateY(var(--ty)) }
}
/* когда по бокам появляются поля — выносим стрелки за ленту целиком */
@media (min-width:1280px){
  .revs__nav--prev,.swipe__nav--prev{ left:-23px }
  .revs__nav--next,.swipe__nav--next{ right:-23px }
}

/* ─────────────────────────────────────────────────────────────────────────
   10. ФИНАЛЬНЫЙ ПРИЗЫВ. Не плашка, а тяжёлая плита с внутренним светом.
   ───────────────────────────────────────────────────────────────────────── */
.cta__card{
  background:
    radial-gradient(120% 130% at 88% 6%,rgba(212,146,158,.9) 0%,transparent 52%),
    radial-gradient(80% 90% at 12% 100%,rgba(70,28,38,.55) 0%,transparent 60%),
    linear-gradient(148deg,#8a4453 0%,#a65c6b 55%,#7d3d4c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(60,22,30,.4),
    0 10px 20px -8px rgba(125,61,76,.5),
    0 34px 60px -22px rgba(125,61,76,.6),
    0 70px 110px -50px rgba(125,61,76,.7); }
/* блик, скользящий по плите при появлении */
.cta__card::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.16) 48%,transparent 62%);
  transform:translateX(-120%); }
.cta__card.is-in::before{ animation:ctaSheen 2.4s var(--slow) .25s both; }
@keyframes ctaSheen{ to{ transform:translateX(120%) } }
.cta__text,.cta__aside{ position:relative; z-index:1; }
.cta__facts b{ text-shadow:0 2px 6px rgba(60,22,30,.35); }
.cta .btn--primary{ background:linear-gradient(178deg,#fff,#f7ebe8); color:var(--brand-dark);
  box-shadow:
    inset 0 1px 0 #fff, inset 0 -2px 0 rgba(140,70,85,.18),
    0 2px 4px rgba(40,14,20,.2), 0 10px 20px -6px rgba(40,14,20,.35); }
.cta .btn--primary:active{ transform:translateY(2px) scale(.985);
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(40,14,20,.25); }

/* ─────────────────────────────────────────────────────────────────────────
   11. ШАГИ СЕАНСА. Закреплённый блок получает глубину: активный шаг
   выходит вперёд, соседние утоплены.
   ───────────────────────────────────────────────────────────────────────── */

/* на телефоне закреплённый блок уходил под липкую шапку и не помещался
   вместе с заголовком — отводим ему место сверху */
@media (max-width:879px){
  .pin{ min-height:92svh; min-height:92vh; padding:4.4rem 0 1.4rem }
}
.pin__steps .step{ background:none; border:0; box-shadow:none;
  transform:perspective(var(--persp-near)) translate3d(0,22px,-46px) rotateX(6deg); }
.pin__steps .step.on{ transform:none; }
.clock{ filter:drop-shadow(0 18px 30px rgba(140,70,85,.24)); }
.clock__t b{ text-shadow:0 2px 4px rgba(var(--shade),.12); }

/* ─────────────────────────────────────────────────────────────────────────
   12. ПОДБОРЩИК ПО ЗОНАМ. Фигура получает объём: подсветка сверху,
   тень снизу, выбранная зона выходит вперёд.
   ───────────────────────────────────────────────────────────────────────── */
.bm__fig{ filter:drop-shadow(0 16px 22px rgba(140,70,85,.15)) drop-shadow(0 4px 7px rgba(140,70,85,.09));
  transform:perspective(var(--persp)) rotateY(var(--bry,0deg)) rotateX(var(--brx,0deg));
  transition:transform .8s var(--slow); }
.bm-base *{ fill:url(#bmSkin) #f1e0dc; }
.bm-zone{ fill:url(#bmZone) #ecd6d7; }
.bm-zone.is-on{ fill:url(#bmZoneOn) #a65c6b; }
/* через одну полосу — чуть светлее: фигура читается как набор зон,
   и человек понимает, что по ней можно нажимать */
.bm-zone:nth-of-type(2n){ opacity:.82 }
.bm-zone:nth-of-type(2n).is-on{ opacity:1 }
/* скруглённые полосы вместо прямоугольников: выделенная зона перестаёт
   выглядеть наклеенной плашкой и садится по форме тела */
.bm-zone{ rx:9px; ry:9px }
/* рамка вокруг всей фигуры нужна тому, кто ходит с клавиатуры;
   по клику мышью она только пугала */
.bm__fig:focus-within{ outline:none }
.bm__fig:has(.bm-zone:focus-visible){ outline:2.5px solid var(--brand);
  outline-offset:10px; border-radius:24px }
.bm-zone{ transition:fill .35s var(--slow),transform .45s var(--spring),filter .35s ease; }
.bm-zone.is-on{ filter:drop-shadow(0 4px 10px rgba(140,70,85,.5)); }
.bm__out{ background:var(--face); box-shadow:var(--lift-3),var(--rim);
  border:1px solid rgba(238,224,220,.9); }
.bm__list a{ background:var(--face); box-shadow:var(--lift-1),var(--rim);
  border-color:rgba(238,224,220,.9);
  transition:transform .45s var(--slow),box-shadow .45s var(--slow),border-color .3s ease; }
.bm__list a:hover{ transform:translate(5px,-2px); box-shadow:var(--lift-2); }
.bm__tab,.bm__chip{ background:var(--face); box-shadow:var(--lift-1),var(--rim);
  border-color:rgba(238,224,220,.9);
  transition:transform .35s var(--spring),box-shadow .35s var(--slow),background-color .3s ease,color .3s ease; }
.bm__tab:active,.bm__chip:active{ transform:translateY(1px) scale(.97); transition-duration:.1s; }
.bm__tab.is-on{ background:linear-gradient(176deg,#4a3b39,var(--ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 14px -6px rgba(var(--shade),.5); }

/* ─────────────────────────────────────────────────────────────────────────
   13. ПОДВАЛ. Уходит в глубину: тёмная плита под всей страницей.
   ───────────────────────────────────────────────────────────────────────── */
.ftr{ position:relative; overflow:hidden;
  background:
    radial-gradient(70% 120% at 18% 0%,rgba(166,92,107,.22) 0%,transparent 58%),
    linear-gradient(180deg,#2f2524 0%,#221b1a 62%,#1b1615 100%);
  box-shadow:inset 0 14px 30px -22px rgba(0,0,0,.9); }
.ftr::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:1;
  background:linear-gradient(90deg,transparent,rgba(216,160,172,.65) 22%,rgba(216,160,172,.65) 78%,transparent); }
.ftr .wrap{ position:relative; z-index:1 }
.ftr .mark{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.ftr__h{ color:#9d8b87 }
.ftr__links a{ transition:color .3s ease,transform .35s var(--slow) }
.ftr__links a:hover{ transform:translateX(3px) }
/* страница «ложится» на тёмную плиту подвала: узкая светлая кромка сверху */
.ftr__bottom{ border-top-color:rgba(255,255,255,.07) }

/* ─────────────────────────────────────────────────────────────────────────
   14. МОБИЛЬНАЯ ПАНЕЛЬ ЗАПИСИ. Стекло, парящее над контентом. Появляется
   после первого экрана, прячется при скролле вверх — не мешает читать.
   ───────────────────────────────────────────────────────────────────────── */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  display:flex; gap:.5rem; align-items:stretch;
  background:linear-gradient(180deg,rgba(255,253,252,.97),#fffdfc);
  border-top:1px solid rgba(255,255,255,.85);
  box-shadow:0 -1px 0 rgba(255,255,255,.9) inset, 0 -12px 30px -14px rgba(var(--shade),.3);
  transform:translate3d(0,110%,0);
  transition:transform .55s var(--slow); }
.dock.is-on{ transform:none; }
.dock__b{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:50px; border-radius:14px; text-decoration:none; font-weight:700; font-size:.95rem;
  letter-spacing:-.01em; transition:transform .3s var(--spring),box-shadow .3s var(--slow); }
.dock__b:active{ transform:translateY(2px) scale(.98); transition-duration:.09s; }
.dock__b--main{ flex:1.5 1 0; color:#fff;
  background:linear-gradient(176deg,#b76d7b,var(--brand) 42%,var(--brand-dark));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(90,36,47,.45),
             0 4px 10px -2px rgba(140,70,85,.42),0 12px 22px -10px rgba(140,70,85,.5); }
.dock__b--alt{ color:var(--brand-dark);
  background:linear-gradient(178deg,rgba(255,255,255,.95),rgba(250,240,238,.9));
  box-shadow:inset 0 1px 0 #fff,0 2px 6px -2px rgba(var(--shade),.2),0 8px 16px -10px rgba(var(--shade),.3); }
.dock__b svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
@media (min-width:880px){ .dock{ display:none } }
/* под панелью нужен воздух, иначе она закрывает подвал */
@media (max-width:879px){ body.has-dock .ftr{ padding-bottom:calc(2.4rem + 68px) } }

/* ─────────────────────────────────────────────────────────────────────────
   15. ЛИНИЯ ЧТЕНИЯ. Не полоса, а светящаяся нить.
   ───────────────────────────────────────────────────────────────────────── */
#prog{ height:2.5px;
  background:linear-gradient(90deg,var(--brand-dark),var(--brand) 45%,#d79aa6);
  box-shadow:0 0 12px rgba(166,92,107,.6),0 1px 3px rgba(var(--shade),.4); }

/* ─────────────────────────────────────────────────────────────────────────
   16. КРОШКИ И СЕКЦИИ. Тонкий рельеф между полосами фона — «слои породы».
   ───────────────────────────────────────────────────────────────────────── */
.crumbs{ background:linear-gradient(180deg,#fdf8f6,#fbf4f1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(var(--shade),.05); }
.sec--alt{ position:relative;
  background:linear-gradient(180deg,#fdf8f6 0%,var(--bg-alt) 40%,#fbf2ef 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(var(--shade),.06); }

/* ─────────────────────────────────────────────────────────────────────────
   17. ТАЧ-ОТКЛИК. На телефоне нет hover — объём даёт нажатие.
   ───────────────────────────────────────────────────────────────────────── */
@media (hover:none){
  .card,.rel li,.place__card,.rev,.bm__list a,.team__i,.gal li{
    transition:transform .28s var(--spring),box-shadow .28s var(--slow); }
  .card:active,.rel li:active,.place__card:active,.rev:active,.bm__list a:active{
    transform:scale(.982); box-shadow:var(--lift-1); }
  /* убираем «залипший» hover после тапа */
  .card:hover,.rel li:hover,.place__card:hover,.rev:hover{ transform:none; box-shadow:var(--lift-1),var(--rim); }
  .team__i:hover img,.gal li:hover img{ transform:none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   18. ЭКОНОМИЯ ДВИЖЕНИЯ И БАТАРЕИ.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .js-anim .d3-in{ opacity:1!important; transform:none!important; animation:none!important; }
  .hero__ph,.bm__fig{ transform:none!important; }
  .scene{ display:none; }
  .cta__card::before{ animation:none; display:none; }
  .hdr__nav.is-open,.hdr__nav.is-open li{ animation:none; }
  .dock{ transition:none; }
}
/* экономия энергии: на слабых устройствах сцену не поднимаем (класс ставит JS) */
html.no-scene .scene canvas{ display:none; }
html.no-scene .scene{ opacity:1; }
html.no-scene .scene::after{ opacity:1; }