/* ==========================================================================
   Блоки главной страницы.
   Перенесено с артборда «01 Главная - Ритуал полная.dc.html»: сетки,
   отступы, размеры шрифтов и цвета — как в макете.
   ========================================================================== */

/* ----------------------------------------------------------------- герой */
/* Шапка сайта липкая и высотой 86px — под ней нужен запас, иначе бейдж
   начинается сразу под ней. */
/* Снизу отступ такой же, как сверху: без него нижний край видео упирался
   в разделительную черту, и первый экран заканчивался впритык. */
.hero__in { position: relative; max-width: var(--w); margin: 0 auto; padding: 64px var(--pad); }
.hero__main { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: stretch; min-height: 600px; }
/* Текст центрируем по вертикали: раньше колонку снизу подпирала строка с
   адресом (margin-top: auto), теперь без неё содержимое повисало вверху. */
.hero__col { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px 0 32px; }
/* надзаголовок героя без черты: рядом с ним и так есть воздух */
.hero__eyebrow::before { content: none; }
/* Заголовок разбит на три строки вручную (в шаблоне): «Премьер Спа — салон /
   эротического массажа / в Санкт-Петербурге». Кегль не больше общего .h1, но
   и не больше, чем влезает самая длинная строка в ширину колонки (cqi от
   .hero__col) — иначе она переносится и строк снова четыре. */
.hero__col { container-type: inline-size; }
.hero__h1 { margin: 28px 0 22px; font-size: min(var(--fs-h1), 8.6cqi); }
/* Адрес отдельной строкой между заголовком и строкой про акцию. Тише
   заголовка и крупнее подписи на фотографии: его читают, а не разглядывают. */
.hero__addr {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 20px;
  transition: color .15s;
}
/* метка на карте — значок адреса, понятный без подписи */
.hero__pin { flex-shrink: 0; color: var(--acc); }
.hero__addr:hover { color: var(--acc-lt); }
.hero__lead { max-width: 460px; margin-bottom: 32px; }
.hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }

.hero__gift {
  display: flex; align-items: center; gap: 16px;
  background: rgba(230, 190, 152, .06); border: 1px solid var(--bd-16);
  border-radius: var(--r-md); padding: 18px 20px; max-width: 480px;
}
.hero__gift-i { font-size: 24px; line-height: 1; color: var(--acc); flex-shrink: 0; }
.hero__gift p { color: var(--tx-mute); }
.hero__gift > a { margin-left: auto; font-size: 20px; color: var(--acc); flex-shrink: 0; }

/* медиапанель: видео (или фото, если ролика нет) в закруглённой рамке */
/* Без вертикальных полей: панель занимает всю высоту ряда. Поля в 20px
   остались с той поры, когда текстовую колонку снизу держала строка с
   адресом — её убрали, и панель стала выглядеть коротковатой. */
.hero__media { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
.hero__vid, .hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background-color: var(--bg); background-position: 52% center; background-size: cover; background-repeat: no-repeat;
}
.hero__media-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 10, 8, .05) 30%, rgba(13, 10, 8, .88) 88%);
}
.hero__vert {
  position: absolute; right: 24px; top: 28px; z-index: 1;
  writing-mode: vertical-rl;
}
.hero__note-box { position: absolute; left: 30px; right: 30px; bottom: 30px; z-index: 1; }
.hero__note-box strong {
  display: block; margin: 0 0 18px;
}
.hero__note-box a { display: inline-flex; align-items: center; gap: 10px; }
.hero__note-box a span { font-size: 17px; letter-spacing: 0; color: inherit; }
.hero__mark {
  position: absolute; right: 18px; bottom: 4px; z-index: 0; pointer-events: none;
  font-weight: 700; letter-spacing: .06em; line-height: 1; font-size: 70px; color: rgba(230, 190, 152, .08);
}

/* полоса преимуществ под геро */
.hero-feats { border-top: 1px solid var(--bd-14); border-bottom: 1px solid var(--bd-14); }
.hero-feats__in {
  max-width: var(--w); margin: 0 auto; padding: 46px var(--pad);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
/* каждая ячейка отделена линией — полоса читается как четыре карточки */
.hf { display: flex; align-items: center; gap: 18px; padding: 4px 32px; border-left: 1px solid var(--bd-10); }
.hf:first-child { border-left: none; padding-left: 0; }
.hf__i {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bd-20); background: rgba(230, 190, 152, .05);
  font-weight: 300; font-size: 22px; line-height: 1; color: var(--acc);
}
.hf p { margin: 0; }
.hf b { display: block; color: var(--tx-soft); }
.hf small { display: block; color: var(--tx-dim-2); margin-top: 6px; }
a.hf { transition: background .2s; }
a.hf:hover { background: rgba(230, 190, 152, .04); }
a.hf:hover .hf__i { border-color: var(--bd-50); }
a.hf:hover b { color: var(--acc-lt); }

/* ------------------------------------------- заголовок секции по макету */
.shead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap; margin-bottom: 40px;
}
.shead--top { align-items: flex-start; gap: 40px; margin-bottom: 56px; }
.shead__note { max-width: 340px;
}

/* ------------------------------------------------- баннер-призыв в конце */
.banner {
  margin-top: 40px;
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse 70% 90% at 88% 0%, rgba(230, 190, 152, .16), transparent 60%), var(--surface);
  padding: 48px 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px; flex-wrap: wrap;
}
.banner__t { margin-bottom: 12px; text-wrap: pretty;
}
.banner__d { max-width: 520px; }
.banner__acts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

/* --------------------------------------------------- табы-метки программ */
.ptabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.ptab {
  display: inline-flex; align-items: center;
  background: transparent; border: 1px solid var(--bd-30); border-radius: 5px;
  padding: 9px 15px; cursor: pointer; color: var(--tx-mute-2);
  transition: background .18s, color .18s, border-color .18s;
}
.ptab:hover { color: var(--tx-hi); border-color: var(--bd-50); }
.ptab.is-on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }

/* --------------------------------- строка программы: точная сетка макета */
.prow {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) 120px 150px 34px;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--bd-22);
}
.prow:last-of-type { border-bottom: none; }
.prows { display: flex; flex-direction: column; border-bottom: 1px solid var(--bd-22); }
.prow__name { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.prow__name b {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.prow__chips { display: flex; gap: 6px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.prow__dur { white-space: nowrap; }
.prow__price { white-space: nowrap; text-align: left; }
.prow__go { font-size: 18px; color: var(--acc-lt); text-align: right; }

/* мелкая метка внутри строки */
.chip-sm {
  color: var(--tx-mute-2); background: transparent;
  border: 1px solid var(--bd-30); border-radius: 5px;
  padding: 3px 8px; white-space: nowrap;
}

/* ------------------------------------------------- карусель с кнопками */
.carousel { position: relative; }
.crail {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.crail::-webkit-scrollbar { display: none; }
.crail > * { scroll-snap-align: start; }
.crail--4 > * { flex: 0 0 calc((100% - 60px) / 4); }
.crail--33 > * { flex: 0 0 calc((100% - 40px) / 3.3); }
/* Ровно три в ряд: карточки отзывов должны обрываться не на полуслове,
   а по краю — лента листается страницами по три. */
.crail--3 > * { flex: 0 0 calc((100% - 40px) / 3); }

/* акции сеткой, когда их три или меньше */
.pgrid { display: grid; gap: 20px; }
.pgrid--1 { grid-template-columns: minmax(0, 420px); }
.pgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }

/* Стрелки ленты. Раньше это был плотный кружок цвета подложки поверх
   фотографии — он читался как дырка в кадре. Теперь затемнённое стекло:
   кадр за кнопкой виден, а сама кнопка не спорит со снимком. Внутри —
   та же SVG-галка, что на карточках мастеров и в расписании. */
.carr {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(12, 10, 9, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--tx-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  transition: color .18s, border-color .18s, background .18s, opacity .18s;
}
.carr:hover:not(:disabled) {
  color: var(--acc-lt); border-color: var(--acc); background: rgba(12, 10, 9, .78);
}
/* Дошли до края — кнопка гаснет и не ловит клик: раньше она нажималась
   впустую, и было непонятно, кончилась лента или что-то сломалось. */
.carr:disabled { opacity: .28; cursor: default; }
.carr--prev { left: -21px; }
.carr--next { right: -21px; }

/* Стрелки под лентой отзывов: слева от неё стоит панель оценок, и кнопке
   у левого края ленты некуда вылезать — она налезала бы на панель. */
.carr--flat {
  position: static; transform: none;
  width: 38px; height: 38px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: var(--bd-20);
}
.carr--flat:hover:not(:disabled) { background: rgba(230, 190, 152, .08); }

/* --------------------------------------------------- отзывы: панель + лента */
.revlab { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 26px; align-items: stretch; }
.revlab__slider { position: relative; min-width: 0; }
/* Две карточки в ряд: с тремя отзыв ужимался до колонки в 300 пикселей,
   и живой текст рвался на десяток строк. */
.crail--rev > * { flex: 0 0 calc((100% - 20px) / 2); }
.revctl { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
/* точки на одной линии со стрелками: общее .carousel .cdots ниже по файлу
   добавляет margin-top — перебиваем весом селектора */
.revlab .revctl .cdots { margin: 0 0 0 8px; justify-content: flex-start; }

@media (max-width: 1000px) {
  .revlab { grid-template-columns: 1fr; gap: 20px; }
  /* Панель ложится строкой: два числа рядом, кнопка справа. */
  .revrate { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 18px 26px; padding: 20px; }
  .revrate__c { width: auto; }
  .revrate__c + .revrate__c { border-top: 0; padding-top: 0; }
  .revrate__btn { width: auto; margin-top: 0; }
}
@media (max-width: 760px) {
  .crail--rev > * { flex: 0 0 100%; }
  .revrate { flex-direction: column; align-items: stretch; }
  .revrate__c + .revrate__c { border-top: 1px solid var(--bd-10); padding-top: 18px; }
  .revrate__btn { width: 100%; }
}


/* ------------------------------------------------------- карточка акции */
.pcard2 {
  border-radius: var(--r-xl);
  overflow: hidden; background: var(--surface);
  display: flex; flex-direction: column;
}
.pcard2__img { height: 230px; background-color: var(--bg); background-position: center; background-size: cover; background-repeat: no-repeat; }
.pcard2__body { padding: 28px 26px; display: flex; flex-direction: column; flex: 1; }
/* В карточке заголовок — это название акции (kicker), а под ним её описание:
   вес шрифта расставлен по этой роли, а не по порядку блоков. */
.pcard2__kicker { margin-bottom: 12px; text-wrap: pretty; }
.pcard2__t { margin-bottom: 8px; text-wrap: pretty; }
.pcard2__d { margin-bottom: 26px; }
.pcard2__acts { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------- рулетка */
.slot {
  position: relative;                /* под слой салюта */
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--bd-25);
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(230, 190, 152, .18), transparent 68%), var(--surface);
  padding: 52px 48px;
}
/* Полоса во всю ширину. Своя заливка у блока уже есть, поэтому секция
   вокруг ему не нужна: скруглённая карточка внутри пустой рамки читалась
   как «блок в блоке». Боковые границы и радиус сняты, вертикальные отступы
   стали отступами самой полосы. */
.slot--band {
  border-radius: 0; border-inline: 0;
  padding: 92px var(--pad);
}
.slot--band > * { max-width: var(--w-text); margin-inline: auto; }
.slot__head { text-align: center; margin-bottom: 32px; }
.slot__kicker { color: var(--acc); margin-bottom: 18px; }
/* Коробка барабанов: внутри — сами барабаны и всплывающий поверх них итог.
   Ширину и центрирование держит она, барабаны её просто заполняют. */
.slot__stage { position: relative; max-width: 720px; margin: 0 auto 24px; }
.slot__reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Все кнопки одной строкой: «Крутить», а после выигрыша справа от неё —
   «Забрать приз» и Telegram. Строка центрируется, поэтому при появлении
   кнопок приза «Крутить» сама уезжает влево, а высота блока не меняется. */
.slot__acts {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.slot__reel { display: flex; flex-direction: column; gap: 14px; }

/* окно барабана: кадры вытянутые, 3:4 */
.slot__win {
  position: relative; aspect-ratio: 3 / 4;
  border-radius: 12px; overflow: hidden; background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(230, 190, 152, .25);
}
/* затемнение сверху и снизу — кадр выглядит как в прорези автомата */
.slot__win::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(13,10,8,.55), transparent 22%, transparent 78%, rgba(13,10,8,.55));
}
/* Высота ленты обязательна: кадры внутри заданы в процентах, и без неё
   и лента, и кадры схлопываются в ноль — барабан выглядит пустым.
   На ней же держится шаг прокрутки: translateY(-100%) — ровно один кадр. */
.slot__strip { display: flex; flex-direction: column; height: 100%; will-change: transform; }
.slot__cell {
  flex: 0 0 100%; height: 100%;
  background-color: var(--bg); background-position: center; background-size: cover; background-repeat: no-repeat;
}
.slot__win.is-spin .slot__strip { filter: blur(5px) brightness(.72); }
.slot__win.is-slow .slot__strip { filter: blur(1.5px) brightness(.9); }
.slot__win.is-hit { animation: slotHit 1.3s cubic-bezier(.2, .8, .3, 1); z-index: 1; }
@keyframes slotHit {
  0% { box-shadow: inset 0 0 0 1px rgba(230, 190, 152, .25); transform: none; }
  22% { box-shadow: inset 0 0 0 3px var(--acc), 0 0 52px rgba(230, 190, 152, .6); transform: translateY(-8px) scale(1.035); }
  55% { transform: none; }
  100% { box-shadow: inset 0 0 0 1px rgba(230, 190, 152, .25); transform: none; }
}
/* Подпись листается вместе с кадрами: пока барабан крутится, она приглушена
   и мельтешит, на остановке встаёт выпавший подарок. */
/* Ровно две строки под подпись, и не строкой больше: названия подарков разной
   длины, и пока барабан крутится, они сменяют друг друга — без фиксированной
   высоты кнопка «Крутить» под ними дёргалась бы на каждой смене. */
.slot__cap { text-align: center;
  height: 3em; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  transition: color .25s, opacity .25s;
}
.slot__cap.is-rolling { color: var(--tx-faint); opacity: .7; }

/* Итог всплывает поверх кадров, по центру барабанов: в потоке он занимал
   отдельную строку, и блок вытягивался ровно на её высоту. Подложка —
   затемнённое стекло: строка читается на любом кадре. Пока не крутили,
   элемент пуст и не рисуется вовсе. */
.slot__out {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; pointer-events: none;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  column-gap: 10px; row-gap: 2px;
  /* Ширина — по тексту, но не шире блока. Без явной ширины окно с left: 50%
     получало от браузера только правую половину блока и сжималось в столбик. */
  width: max-content; max-width: calc(100% - 28px); padding: 14px 22px;
  border-radius: var(--r-xl);
  background: rgba(12, 10, 9, .74);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
}
.slot__out:empty { display: none; }
.slot__note { flex-basis: 100%; text-align: center; }
.slot__face { font-size: 22px; line-height: 1; animation: slotPop .45s cubic-bezier(.2, .8, .3, 1.4) both; }
.slot__title { text-wrap: pretty; }
.slot__out--win .slot__title {
  color: var(--acc-lt);
  animation: slotTitle .6s cubic-bezier(.2, .8, .3, 1.5) both;
}
@keyframes slotTitle {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: none; }
}
.slot__note { text-wrap: pretty; }
@keyframes slotPop {
  from { opacity: 0; transform: scale(.4) translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Промах — барабаны коротко вздрагивают */
.slot__reels.is-miss { animation: slotMiss .5s ease; }
@keyframes slotMiss {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
}

/* Забрать приз: главное действие после выигрыша — пульсирует, чтобы его
   заметили, не отводя глаз от барабанов. Уводит в чат салона. */
.slot__claim {
  color: var(--on-acc);
  background: linear-gradient(120deg, var(--acc), var(--acc-lt));
  border-color: transparent;
  animation: slotClaim 2.2s ease-out infinite;
  transition: filter .18s, box-shadow .18s, color .18s;
}
/* Под курсором пульс выключаем: кольцо продолжало расходиться из-под
   указателя и кнопка выглядела дёрганой. Заливку на наведении не меняем,
   а подсвечиваем ту же самую: градиент в плоский цвет не перетекает —
   прежнее правило подменяло фон рывком, без перехода. */
.slot__claim:hover, .slot__claim:focus-visible {
  animation: none;
  color: var(--on-acc);
  filter: brightness(1.07);
  box-shadow: 0 8px 20px rgba(230, 190, 152, .3);
}
@keyframes slotClaim {
  0% { box-shadow: 0 0 0 0 rgba(230, 190, 152, .5); }
  70% { box-shadow: 0 0 0 18px rgba(230, 190, 152, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 190, 152, 0); }
}
/* Второй путь — в Telegram, фирменным цветом мессенджера */
.slot__tg { color: var(--tx-white); background: var(--tg); border-color: transparent; }
.slot__tg:hover { color: var(--tx-white); background: var(--tg-lt); }
.slot__save { align-self: center; }
@media (prefers-reduced-motion: reduce) { .slot__claim { animation: none; } }

/* Выигрыш — салют поверх всего блока */
.slot__fx { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.slot__fx.is-flash::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 52% at 50% 42%, rgba(230, 190, 152, .3), transparent 70%);
  animation: slotFlash 1s ease forwards;
}
@keyframes slotFlash { from { opacity: 1; } to { opacity: 0; } }
/* Тёплый блик проходит по блоку вслед за первым залпом */
.slot__fx.is-flash::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(244, 235, 223, .13), transparent);
  animation: slotSweep 1.1s ease-out .15s both;
}
@keyframes slotSweep { from { left: -45%; } to { left: 104%; } }
.slot__spark {
  position: absolute; top: 36%;
  width: 7px; height: 12px; border-radius: 2px; opacity: 0;
  animation: slotSpark var(--dur, 1.8s) cubic-bezier(.2, .6, .4, 1) forwards;
}
/* Дуга: сначала вверх и в сторону, потом вниз — как настоящая бумажка. */
@keyframes slotSpark {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  10% { opacity: 1; }
  38% { transform: translate(calc(var(--dx) * .45), var(--up, -90px)) rotate(calc(var(--rot) * .35)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy, 340px)) rotate(var(--rot)); }
}

/* ------------------------------------------------------- особые случаи */
/* Карточка повода кликается целиком: ссылку «Подробнее» растягиваем
   псевдоэлементом на всю карточку (::after у неё занят стрелкой). Ссылка
   в разметке одна — для экранных читалок и поиска ничего не меняется. */
.occ {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); overflow: hidden; background: var(--surface);
}
.occ__img {
  height: 240px; background-color: var(--bg); background-position: center; background-size: cover; background-repeat: no-repeat;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
/* «Подробнее» — по нижнему краю, на одной линии во всех карточках ряда */
.occ__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 34px 30px 32px; }
.occ__t { margin-bottom: 14px; }
.occ__d { margin-bottom: 26px; }
.occ .ulink { margin-top: auto; }
.occ .ulink::before { content: ''; position: absolute; inset: 0; z-index: 1; }
.occ:hover .occ__img { transform: scale(1.04); }
.occ:hover .ulink { color: var(--tx-white); border-bottom-color: var(--acc-lt); }
.occ:hover .ulink::after { transform: translateX(5px); }
.occ:has(.ulink:focus-visible) { outline: 2px solid var(--acc); outline-offset: 3px; }
.occ .ulink:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .occ:hover .occ__img, .occ:hover .ulink::after { transform: none; }
}
#occasions .grid { gap: 28px; }

/* ссылка-подчёркивание «Подробнее» */
/* Стрелка — часть самой ссылки, а не дописанный в текст символ: раньше её
   ставили руками только в двух местах из трёх, и блоки выглядели по-разному.
   На наведении подчёркивание разгорается, а стрелка делает шаг вперёд. */
.ulink {
  display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(230, 190, 152, .4);
  padding-bottom: 6px;
  transition: color .18s, border-color .18s;
}
.ulink::after {
  content: '→'; font-size: 13px; letter-spacing: 0; line-height: 1;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}
.ulink:hover { color: var(--tx-white); border-bottom-color: var(--acc-lt); }
.ulink:hover::after { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .ulink:hover::after { transform: none; }
}

/* -------------------------------------------------- подарочные номиналы */
.cert-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center;
  background: var(--surface); border: 1px solid var(--bd-14);
  border-radius: 20px; padding: 45px;
}
/* Кому дарят: строка под заголовком и список поводов. Это повод, а не
   условие, и читают его первым — отсюда акцентный цвет и размер крупнее
   описания. Сплошной строкой перечисление проскакивали глазами, списком
   каждый повод виден отдельно. */
.cert-who__list {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  max-width: 460px;
}
.cert-who__list li {
  position: relative; padding-left: 24px;
}
/* Маркер — ромбик акцентом: точка терялась в тексте, а галочка обещала бы
   «включено в стоимость», чего здесь нет. Центр — на середине первой
   строки (.5lh), а не в em: иначе уезжает при смене межстрочного интервала. */
.cert-who__list li::before {
  content: '';
  position: absolute; left: 3px; top: .85em; top: .5lh;
  width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg);
  background: var(--acc);
}
/* Полоса во всю ширину: заливка уходит на секцию, а сетка внутри держится
   той же колонки, что и остальные блоки страницы. Скруглённая карточка
   внутри пустой секции читалась как «блок в блоке». */
.certband {
  background: var(--surface);
  border-block: 1px solid var(--bd-14);
  padding: 92px var(--pad);
}
/* Полоса идёт сразу за другой полосой — верхний отступ срезаем, как
   и у обычных секций: иначе к отступу соседа снизу прибавляется свой. */
.sec--line + .certband { padding-top: 64px; }
.certband .cert-grid {
  background: none; border: 0; border-radius: 0; padding: 0;
  max-width: var(--w); margin-inline: auto;
}
/* Веер карточек: чуть повёрнут — на столе сертификаты тоже не лежат по линейке. */
.certcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; transform: rotate(-3deg); }

/* ------------------------------------------------------------ интерьеры */
/* Точки идут сразу под лентой: тридцать четыре пикселя общего отступа
   отрывали их от карусели и они висели сами по себе. */
.carousel .cdots { margin-top: 22px; }
.int {
  padding: 0; border: none; cursor: pointer; border-radius: 0; overflow: hidden;
  position: relative;
  background-color: var(--bg); background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* Наведение как в галерее мастера: приближается отдельный слой с кадром. */
.int::before {
  content: ''; position: absolute; inset: 0;
  background: inherit; background-size: cover; background-position: center;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), filter .35s;
}
.int:hover::before, .int:focus-visible::before {
  transform: scale(1.06); filter: brightness(1.06) saturate(1.06);
}

/* Мозаика интерьеров (mars_interiors): первые десять кадров. Все кадры
   салона горизонтальные (около 1,8:1), поэтому ячейки только горизонтальные:
   большая 2×2 и обычная 1×1 почти той же пропорции, что и снимки, — кадр
   не режется в полоску. 4 колонки: большая слева + четыре справа, четыре
   слева + большая справа — четыре ряда без дыр (dense).
   Высоту ряда задают обычные ячейки через aspect-ratio, большая
   растягивается на два ряда. */
.imosaic {
  --mos-gap: 12px;
  --mos-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--mos-cols), minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--mos-gap);
}
.imosaic .int { border-radius: var(--r-lg); aspect-ratio: 1.75; }
.imosaic .int:nth-child(1) { grid-column: 1 / span 2; grid-row: span 2; aspect-ratio: auto; }
.imosaic .int:nth-child(6) { grid-column: 3 / span 2; grid-row: span 2; aspect-ratio: auto; }
/* Остальные кадры под кнопкой «Показать ещё» — ровные ряды по четыре;
   неполный последний ряд встаёт по центру, а не прилипает влево. */
.imore {
  --mos-gap: 12px;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--mos-gap); margin-top: var(--mos-gap);
}
.imore:not(.is-full) { margin-top: 0; }
.imore .int {
  flex: 0 0 calc((100% - 3 * var(--mos-gap)) / 4);
  aspect-ratio: 1.75; border-radius: var(--r-lg);
}
.imore .int[hidden] { display: none; }
.imore__btn { display: flex; justify-content: center; margin-top: 32px; }
.imore__btn:has(> [hidden]) { display: none; }
/* Телефон: две колонки, большие кадры во всю ширину: большой, четыре
   обычных парами, большой, ещё четыре. */
@media (max-width: 760px) {
  .imosaic, .imore { --mos-cols: 2; --mos-gap: 8px; }
  .imosaic .int:nth-child(1),
  .imosaic .int:nth-child(6) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1.75; }
  .imore .int { flex-basis: calc((100% - var(--mos-gap)) / 2); }
  .imore__btn { margin-top: 24px; }
}

/* ------------------------------------------------------------ Crazy-меню */
/* две колонки по 5 строк, заполняются сверху вниз — как в макете */
.crazy { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 0 56px; }
/* Разделитель тише прежнего: строки читаются как список, а не как
   расчерченная таблица. Первая строка каждой колонки без линии — над ней
   и так подпись блока, и лишняя черта выглядела обрезанным краем.
   В колонке пять строк, отсюда 5n+1. */
.crazy__i { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 1px solid var(--bd-10); }
.crazy__i:nth-child(5n+1) { border-top: 0; }
.crazy__l { flex: 1; border-bottom: 1px dotted var(--bd-30); }
.crazy__p { white-space: nowrap; }
.crazy__note { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 34px; }

/* ------------------------------------------ аккордеон в стиле макета */
.acc--plain { gap: 0; }
.acc--plain .acc__it { background: none; border: none; border-top: 1px solid var(--bd-20); border-radius: 0; }
.acc--plain .acc__btn { padding: 24px 0; }
.acc--plain .acc__q { color: var(--tx-soft); }
.acc--plain .acc__ico { border: none; width: auto; height: auto; color: var(--acc-lt); }
.acc--plain .acc__body { padding: 0 0 26px; }
.acc--plain .acc__a { color: var(--tx-mute); max-width: 700px; }

/* -------------------------------------------------------- блок контактов */
.cgrid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.cinfo { display: flex; flex-direction: column; gap: 24px; margin-bottom: 34px; }
.cinfo__k { margin-bottom: 8px; }

.cmap { border-radius: var(--r-xl); overflow: hidden; }
.cmap .ymap { display: block; width: 100%; height: 440px; border: 0; }
.cmap__foot {
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--bd-20);
}

/* --------------------------------------------------- адаптив главной */
@media (max-width: 1440px) {
  .carr--prev { left: 8px; }
  .carr--next { right: 8px; }
}

@media (max-width: 1180px) {
  .prow { grid-template-columns: minmax(0, 1.3fr) 120px 150px 34px; gap: 22px; }
  .prow__desc { display: none; }
}

@media (max-width: 1080px) {
  .cgrid, .cert-grid { grid-template-columns: 1fr; gap: 40px; }
  .slot { padding: 48px 28px; }
  .banner { padding: 36px 28px; }
  .crail--4 > * { flex: 0 0 calc((100% - 20px) / 2); }
  .crail--33 > * { flex: 0 0 calc((100% - 20px) / 2.2); }
}

@media (max-width: 900px) {
  /* В одну колонку строки идут подряд, и «первая в колонке» — только самая
     первая: правило 5n+1 здесь оторвало бы линию у шестой строки посреди списка. */
  .crazy { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .crazy__i:nth-child(5n+1) { border-top: 1px solid var(--bd-10); }
  .crazy__i:first-child { border-top: 0; }
  .hero__in { padding-top: 40px; }
  .hero__main { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
  .hero__col { padding: 0; }
  .hero__media { min-height: 380px; margin: 0 0 8px; }
  /* в сетке 2×2 вертикальные линии только мешают — разводим ячейки зазором */
  .hero-feats__in { grid-template-columns: 1fr 1fr; gap: 28px 24px; padding: 32px var(--pad); }
  .hf { border-left: none; padding: 0; }
}

@media (max-width: 820px) {
  .prow { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; padding: 22px 0; }
  .prow__go { display: none; }
  .prow__name { flex-wrap: wrap; }
  .prow__name b { white-space: normal; }
  .prow__desc { display: block; grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  /* на узких экранах кнопки баннера перестают быть неразрывными */
  .banner { padding: 28px 20px; }
  .banner__acts { flex-shrink: 1; width: 100%; }
  .banner__acts > * { flex: 1 1 100%; }
  .hero-feats__in { grid-template-columns: 1fr; gap: 20px; }
  .hero__cta { width: 100%; }
  .hero__cta > * { flex: 1 1 auto; }
  .hero__gift { flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .crail--4 > *, .crail--33 > * { flex: 0 0 86%; }
  .carr { display: none; }
  .slot__reels { gap: 12px; }
  .slot { padding: 40px 20px; }
  /* колонка втрое уже — длинные названия занимают до трёх строк */
  .slot__cap { height: 4.5em; }
  .certcards { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Ритм и воздух главной (28.09.2026)

   Отступы — по шкале 16 / 28 / 32 / 56 / ~124:
   - секция: одинаково сверху и снизу (было 64 сверху и 142 снизу —
     заголовок прилипал к черте, под содержимым висел провал);
   - заголовок секции → содержимое: всегда 56 (было 22…56 вразнобой);
   - заголовок → абзац под ним: 16, абзац → содержимое: 40;
   - карточки в сетке: 28 между, 32 внутри.

   Фон — строгое чередование двух тонов вместо почти неотличимых
   #0d0a08 / #100c0a, разрезанных волосяными чертами:
   тёмный (#0d0a08, с подсветкой) — мастера, акции, поводы, интерьеры,
   отзывы, контакты; светлее (#1a1512) — первый экран, программы, рулетка,
   сертификаты, дополнения, вопросы. Смена тона сама отбивает секции,
   поэтому черты сняты.

   Только главная (.home на body): у посадочных своя разметка полос
   (sec--glow / sec--deep на самих секциях), им этот порядок не подходит.
   ========================================================================== */

.home {
  --sp-sec: clamp(96px, 10vw, 128px);
  --sp-head: 56px;
  --sp-gap: 28px;
  --sp-card: 32px;
  --bg-alt: #1a1512;
  --bg-alt-2: #221b17;               /* плашка внутри светлой полосы */
  /* подсветка тёмных секций вдвое тише: иначе угол тёмной секции
     выходил светлее светлой полосы и чередование смазывалось */
  --glow: radial-gradient(ellipse 62% 58% at 82% 6%, rgba(230, 190, 152, .07), transparent 62%);
}
@media (max-width: 760px) {
  .home {
    --sp-sec: 80px;
    --sp-head: 36px;
    --sp-gap: 16px;
    --sp-card: 24px;
  }
}

/* ---------------------------------------------------- отступы секций */
.home :is(.sec, .sec.sec--wide, .sec--line + .sec,
          .sec--line > .sec:first-child, .sec--glow > .sec:first-child),
.home :is(.certband, .sec--line + .certband, .slot--band) {
  padding-block: var(--sp-sec);
}

/* ------------------------------------------------------------- фоны */
.home .sec--line { border-bottom: 0; }
.home .hero::after { content: none; }
.home :is(.certband, .slot--band) { border-block: 0; }

/* светлые полосы — во всю ширину, даже если секция уже экрана */
.home :is(.hero, main > .sec, main > #slot, .certband) {
  background-color: var(--bg-alt);
  box-shadow: 0 0 0 100vmax var(--bg-alt);
  clip-path: inset(0 -100vmax);
}
.home .slot--band { background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(230, 190, 152, .12), transparent 68%), var(--bg-alt); }
/* плашка внутри светлой полосы — на ступень светлее самой полосы */
.home .banner {
  background: radial-gradient(ellipse 70% 90% at 88% 0%, rgba(230, 190, 152, .16), transparent 60%), var(--bg-alt-2);
  border: 1px solid var(--bd-10);
}

/* ------------------------------------------ заголовок секции → содержимое */
.home :is(.shead, .shead--top, .slot__head),
.home .sec > .h2 { margin-bottom: var(--sp-head); }
/* заголовок с абзацем под ним: абзац ближе к заголовку, отступ — после абзаца */
.home .sec > .h2:has(+ .body-t),
.home .certband .h2 { margin-bottom: 16px; }
.home .sec > .h2 + .body-t,
.home .certband .h2 + .body-t { margin-bottom: 40px; }
/* в контактах под заголовком сразу список — отступ как внутри колонки */
.home .cgrid .h2 { margin-bottom: 40px; }
.home .eyebrow + .h2,
.home .slot__head .eyebrow { margin-bottom: 16px; }
.home .shead__note { max-width: 380px; }

/* ------------------------------------------------ сетки и карточки */
.home :is(.pgrid, #occasions .grid, .revlab) { gap: var(--sp-gap); }
.home .grid--gap-lg { gap: 56px var(--sp-gap); }
.home :is(.pcard2__body, .occ__body) { padding: var(--sp-card); }
.home .quote { padding: var(--sp-card) 28px; }
.home .revrate { padding: var(--sp-card) 24px; }
.home .banner { margin-top: var(--sp-head); padding: 56px 64px; }
.home .prow { padding-block: 32px; }
.home .crazy__i { padding-block: 20px; }
.home .acc__btn { padding-block: 28px; }
.home .cinfo { gap: 28px; margin-bottom: 40px; }

@media (max-width: 760px) {
  .home .banner { padding: 32px 24px; }
  .home .quote { padding: var(--sp-card) 20px; }
  .home .grid--gap-lg { gap: 40px var(--sp-gap); }
}

/* ==========================================================================
   Ритм посадочных и районов (29.09.2026) — тот же принцип, что у главной.

   Секции на посадочных выводятся по условиям (есть о-нас, мастера, FAQ…),
   поэтому тон задаём не классами sec--glow/sec--deep в разметке, а по
   фактическому порядку: первый экран светлый, дальше строго через одну —
   тёмная с подсветкой / светлая. Блок записи в конце всегда противоположен
   последней секции. Черты между секциями сняты — отбивает смена тона.
   ========================================================================== */

:is(.single-landing, .single-district) {
  --sp-sec: clamp(96px, 10vw, 128px);
  --sp-strip: 72px;                    /* полоса преимуществ после первого экрана */
  --sp-head: 56px;
  --bg-alt: #1a1512;
  --bg-alt-2: #221b17;
  --glow: radial-gradient(ellipse 62% 58% at 82% 6%, rgba(230, 190, 152, .07), transparent 62%);
}
@media (max-width: 760px) {
  :is(.single-landing, .single-district) { --sp-sec: 80px; --sp-strip: 48px; --sp-head: 36px; }
}

/* отступы: одинаково сверху и снизу */
:is(.single-landing, .single-district) main > .sec,
:is(.single-landing, .single-district) main > .sec.sec--line + .sec { padding-block: var(--sp-sec); }
:is(.single-landing, .single-district) main > .sec.sec--xs { padding-block: var(--sp-strip); }

/* черты — долой, отбивка тоном */
:is(.single-landing, .single-district) main > .sec { border-top: 0; border-bottom: 0; }
:is(.single-landing, .single-district) .hero::after { content: none; }

/* тона по порядку: 1-я секция (первый экран) светлая, дальше через одну */
:is(.single-landing, .single-district) main > section:nth-of-type(odd) { background: var(--bg-alt); }
:is(.single-landing, .single-district) main > section:nth-of-type(even) { background: var(--glow), var(--bg-deep); }
/* блок записи: по умолчанию тёмный; если последняя секция тёмная — светлый */
:is(.single-landing, .single-district) main > div.sec:last-child { background: var(--glow), var(--bg-deep); }
:is(.single-landing, .single-district) main:has(> section:nth-of-type(even):last-of-type) > div.sec:last-child { background: var(--bg-alt); }

/* карточки в светлых секциях — на ступень светлее фона, иначе сливаются */
:is(.single-landing, .single-district) main > section:nth-of-type(odd) :is(.card, .tile, .pcard, .pcard2, .quote, .revrate) {
  background-color: var(--bg-alt-2);
}

/* заголовок секции → содержимое */
:is(.single-landing, .single-district) main > .sec .sec-head { margin-bottom: var(--sp-head); }
:is(.single-landing, .single-district) main > .sec > .wrap > .h2 { margin-bottom: var(--sp-head) !important; }