/* luxe.css — материал вместо рамок (редизайн главной, 09.09.2026)
   ------------------------------------------------------------------
   Зачем: страница держала форму блоков контуром — рамка 1px + ровная
   заливка у героя, ведомости, витрины кадров, прайса, вьюера экранов,
   карты. Владелец такую форму бракует: «рамка = дёшево, иишно».
   Здесь та же разметка получает материал: плита чуть светлее фона,
   блик по верхней грани, короткая плотная тень; крупные цифры —
   полированный металл с бликом, который пробегает и замирает;
   телефоны — титановый рейл вместо серой обводки; кнопки — плиты,
   а не капсулы. Ни одной новой рамки, ни одного нового цвета:
   всё из токенов styles.css.

   Грузится ПОСЛЕДНИМ (после styles.css, clubs-map.css, preview.css,
   sheet.css) и только переопределяет. Классы и JS-хуки прежние. */

:root{
  --lx-plate: linear-gradient(180deg, #16171e 0%, #0f1015 55%, #0b0c10 100%);
  --lx-plate-hi: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.65);
  --lx-drop: 0 26px 48px -22px rgba(0,0,0,.95);
  --lx-graphite: linear-gradient(180deg, #1d1e26 0%, #13141a 100%);
  --lx-metal: linear-gradient(180deg, #ffffff 0%, #eef1f6 28%, #b4bcc8 50%, #f3f5f9 64%, #c9d0da 100%);
  --lx-metal-red: linear-gradient(180deg, #ff8088 0%, #ff3541 40%, #b40f1a 54%, #ff4a55 68%, #c9121d 100%);
  --lx-sheen: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%);
  --lx-r: 12px;
}

/* ============================================================
   1. Металл: крупные цифры и слова-акценты
   Два слоя фона под text-clip: сверху блик, снизу металл. Блик едет
   по background-position ~1.3 с и стоит до конца цикла: пока позиция
   не меняется, перерисовки нет.
   ============================================================ */
.lx-num,
.hero__slate dd b,
.trustbelt__nums dt,
.rate__price b,
#partners .trust__num{
  background-image: var(--lx-sheen), var(--lx-metal);
  background-size: 260% 100%, 100% 100%;
  background-position: 140% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: lx-gleam 9s ease-in-out infinite;
}
.hero__slate-c.is-hot dd b,
.trustbelt__nums > div:first-child dt,
.rate__col--hot .rate__price b,
#partners .trust__num{
  background-image: var(--lx-sheen), var(--lx-metal-red);
}
/* цифры разных блоков не стартуют хором */
.hero__slate-c:nth-child(2) dd b{ animation-delay: .9s; }
.hero__slate-c:nth-child(3) dd b{ animation-delay: 1.8s; }
.trustbelt__nums > div:nth-child(2) dt{ animation-delay: 1.2s; }
.rate__col:nth-child(2) .rate__price b{ animation-delay: .7s; }
.rate__col:nth-child(3) .rate__price b{ animation-delay: 1.4s; }
.rate__col:nth-child(4) .rate__price b{ animation-delay: 2.1s; }
@keyframes lx-gleam{
  0%   { background-position: 140% 0, 0 0; }
  14%  { background-position: -140% 0, 0 0; }
  100% { background-position: -140% 0, 0 0; }
}

/* ============================================================
   2. Кнопки: плита, а не капсула; отклик материалом, а не прыжком
   ============================================================ */
.btn{ border-radius: 11px; }
.btn--primary{
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--red-grad);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.40),
    0 14px 28px -16px rgba(0,0,0,.9);
}
.btn--primary:hover{
  transform: none;
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(0,0,0,.40),
    0 14px 28px -16px rgba(0,0,0,.9);
}
/* блик по эмали — только у целевых кнопок первого и последнего экрана */
.hero__actions .btn--primary::after,
.fin__side .btn--primary::after{
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28) 50%, transparent);
  transform: translate3d(0,0,0) skewX(-12deg); pointer-events: none;
  animation: lx-sweep 7s ease-in-out infinite;
}
.fin__side .btn--primary::after{ animation-delay: 3.5s; }
@keyframes lx-sweep{
  0%, 6%   { transform: translate3d(0,0,0) skewX(-12deg); }
  30%, 100%{ transform: translate3d(420%,0,0) skewX(-12deg); }
}
.btn--ghost{
  border: 0; color: var(--ink-1);
  background: var(--lx-graphite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.5), 0 12px 26px -16px #000;
}
.btn--ghost:hover{
  transform: none; border: 0; color: var(--ink);
  background: linear-gradient(180deg, #252630 0%, #181920 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.5), 0 12px 26px -16px #000;
}
.btn--invert{
  background: linear-gradient(180deg, #ffffff 0%, #e3e7ee 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.22), 0 16px 34px -14px rgba(0,0,0,.9);
}
.btn--invert:hover{ transform: none; background: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,.22), 0 20px 40px -14px rgba(0,0,0,.9); }
.nav-toggle{
  border: 0; border-radius: 11px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.rate__cta, .fin__side .btn{ border-radius: 11px; }

/* ============================================================
   3. Первый экран
   ============================================================ */
/* софит дышит: единственное движение фона, transform + opacity */
.hero__stage--duo .hero__glow{
  opacity: .38;
  animation: lx-breathe 8s ease-in-out infinite;
}
@keyframes lx-breathe{
  0%, 100%{ opacity: .34; transform: scale(1); }
  50%     { opacity: .52; transform: scale(1.06); }
}
/* тень на «столе» под телефонами: предмет стоит, а не висит */
.hero__stage--duo::after{
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 2%; height: 16%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.8), transparent 72%);
  z-index: 0; pointer-events: none;
}

/* табло фактов: три плиты вместо решётки из рамок */
.hero__slate{
  border: 0; background: none; border-radius: 0;
  gap: 10px; max-width: 560px;
}
.hero__slate-c{
  position: relative; overflow: hidden;
  padding: 14px 16px 15px; border-radius: var(--lx-r);
  background: var(--lx-plate);
  box-shadow: var(--lx-plate-hi), var(--lx-drop);
}
.hero__slate-c + .hero__slate-c{ border-left: 0; }
/* «3 дня» — горячая плита: тёплый отсвет в верхнем углу */
.hero__slate-c.is-hot{
  background:
    radial-gradient(90% 70% at 90% -10%, rgba(228,18,30,.22), transparent 60%),
    var(--lx-plate);
}
.hero__slate dt{ color: var(--ink-3); }
.hero__slate dd b{ font-size: clamp(24px, 2.5vw, 32px); }
@media (max-width:560px){
  .hero__slate{ gap: 8px; }
  .hero__slate-c:nth-child(even), .hero__slate-c:nth-child(n+3){ border: 0; }
  .hero__slate-c{ padding: 12px 14px; }
}
/* пластина оффера: форму держит материал, рамка снята */
.switchbox{ border: 0; border-radius: var(--lx-r); }
/* эмалевый пин галочки везде, где он есть */
.tick{
  width: 20px; height: 20px; color: #fff;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), transparent 44%),
    var(--red-grad);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 -2px 4px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.5);
}
.tick svg{ width: 10px; height: 10px; }
/* строка «без карты» под кнопками */
.hero__nocard{
  margin: -10px 0 18px; font-size: .9rem; line-height: 1.5; color: var(--ink-2);
}
.hero__nocard b{ color: var(--ink-1); font-weight: 700; }

/* ============================================================
   4. Телефоны и табло: титановый рейл вместо серой обводки
   ============================================================ */
.device, .pv__device, .pv__fallback img{
  border: 0;
  background: linear-gradient(180deg, #33363f 0%, #14151b 14%, #0a0b0f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.85),
    0 0 0 1px rgba(0,0,0,.7),
    0 44px 80px -26px rgba(0,0,0,.95);
}
.pv__fallback img{ padding: 8px; }
.pv__frame--wide .pv__device{ border-radius: 14px; }
/* знак «на весь экран» — контур в маске, а не эмодзи */
.pv__device::after{
  content: ""; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
  border: 0; font-size: 0;
  background: rgba(8,9,12,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.pv__device::before{
  content: ""; position: absolute; z-index: 1; top: 25px; right: 25px; width: 16px; height: 16px;
  background: #fff; opacity: .85; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.gallery .shot::after{ content: none; }

/* ============================================================
   5. Полоса доверия и ведомость
   ============================================================ */
.trustbelt__nums dt{ font-size: clamp(32px, 3.8vw, 50px); }
.logobelt__l{
  border: 0; border-radius: 10px;
  background: var(--lx-graphite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.5), 0 10px 22px -14px #000;
  opacity: .8;
}
.logobelt__l:hover{
  border: 0; opacity: 1;
  background: linear-gradient(180deg, #262730 0%, #181920 100%);
}

.ldg{
  border: 0; border-radius: 14px;
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(255,255,255,.045), transparent 70%),
    var(--lx-plate);
  box-shadow: var(--lx-plate-hi), var(--lx-drop);
}
.ldg__n{ color: var(--ink-4); }

/* ============================================================
   6. Витрина кадров («Что входит») и вьюер экранов
   ============================================================ */
.spec__shot{
  border: 0; border-radius: 16px; padding: 7px;
  background: linear-gradient(180deg, #2d3038 0%, #14151b 12%, #0a0b0f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.30),
    0 0 0 1px rgba(0,0,0,.7),
    0 36px 64px -28px rgba(0,0,0,.95);
}
.spec__shot img{ border-radius: 10px; }
.spec__shot::after{ inset: auto 7px 7px 7px; border-radius: 0 0 10px 10px; }
@media (hover:hover) and (pointer:fine){
  .spec__i:hover .spec__shot{ border: 0; box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 0 1px rgba(0,0,0,.7),
    0 36px 64px -28px rgba(0,0,0,.95); }
  .spec__i:hover .spec__shot img{ transform: none; }
}
.spec__doc{
  border: 0; border-radius: 14px;
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    var(--lx-plate);
  box-shadow: var(--lx-plate-hi), var(--lx-drop);
}
@media (max-width:640px){
  .spec__shot{ padding: 5px; border-radius: 12px; }
  .spec__shot img{ border-radius: 8px; }
}

/* вкладки разделов: строка ведомости с красной планкой, не капсулы */
.pv__tabs{
  gap: 0; justify-content: flex-start; flex-wrap: nowrap; margin-bottom: 26px;
  border-bottom: 1px solid var(--line-strong);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
/* на телефоне ряд вкладок длиннее экрана: край гаснет, чтобы было видно, что
   строка продолжается; сама линия под вкладками остаётся */
@media (max-width:640px){
  .pv__tabs{
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent);
            mask-image: linear-gradient(90deg, #000 84%, transparent);
    padding-right: 32px;
  }
  .pv__tab{ padding: 12px 14px 15px; }
}
.pv__tabs::-webkit-scrollbar{ display: none; }
.pv__tab{
  position: relative; flex: none;
  padding: 12px 18px 15px; border: 0; border-radius: 0; background: none;
  color: var(--ink-2); font-weight: 700; font-size: .95rem; white-space: nowrap;
  transition: color .2s ease;
}
.pv__tab::after{
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.16,.84,.36,1);
}
.pv__tab:hover{ transform: none; border: 0; color: var(--ink-1); }
.pv__tab b{ font-size: .78rem; color: var(--ink-4); }
.pv__tab.is-active{ color: var(--ink); background: none; border: 0; box-shadow: none; }
.pv__tab.is-active::after{ transform: scaleX(1); }
.pv__tab.is-active b{ color: var(--red-ink); }

.pv__main{
  border: 0; border-radius: 16px;
  background:
    radial-gradient(90% 60% at 78% 0%, rgba(228,18,30,.12), transparent 60%),
    radial-gradient(60% 40% at 20% 0%, rgba(255,255,255,.04), transparent 70%),
    var(--lx-plate);
  box-shadow: var(--lx-plate-hi), var(--lx-drop);
}
.pv__sec{ color: var(--red-ink); }
.pv__progress{ border-radius: 0; height: 3px; background: rgba(255,255,255,.08); }
.pv__progress i{ border-radius: 0; }
.pv__ctrl, .pv__zoom{
  border: 0; border-radius: 10px; color: var(--ink-1);
  background: var(--lx-graphite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.5), 0 10px 22px -14px #000;
}
.pv__ctrl:hover, .pv__zoom:hover{
  border: 0; color: var(--ink);
  background: linear-gradient(180deg, #252630 0%, #181920 100%);
}
.pv__thumb{
  border: 0; border-radius: 9px; opacity: .5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.pv__thumb.is-active{
  opacity: 1; transform: none; border: 0;
  box-shadow: inset 0 0 0 2px var(--red), 0 8px 18px -10px rgba(0,0,0,.8);
}

/* ============================================================
   7. Прайс: один лист, «Pro» под софитом
   ============================================================ */
.rate{
  border: 0; border-radius: 16px;
  background: var(--lx-plate);
  box-shadow: var(--lx-plate-hi), var(--lx-drop);
}
.rate__col--hot{
  background:
    radial-gradient(90% 46% at 50% 0%, rgba(228,18,30,.20), transparent 70%),
    linear-gradient(180deg, #1b1c24 0%, #111218 60%, #0d0e13 100%);
  box-shadow: inset 0 2px 0 var(--red), inset 0 3px 0 rgba(255,255,255,.12);
}
.rate__price b{ font-size: clamp(2rem, 2.8vw, 2.5rem); }
.rate__foot{ border-top: 0; }
.rate__nocard{
  margin: 14px 0 0; font-size: .92rem; line-height: 1.55; color: var(--ink-2); max-width: 64ch;
}
.rate__nocard b{ color: var(--ink-1); font-weight: 700; }
@media (max-width:820px){
  .rate__col--hot{ box-shadow: inset 0 2px 0 var(--red), inset 0 3px 0 rgba(255,255,255,.12); }
}

/* ============================================================
   8. Запуск: ряд действий после шагов
   ============================================================ */
.route__cta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  margin-top: clamp(30px, 4vw, 44px);
}
.route__cta-note{
  flex: 1 1 100%; margin: 4px 0 0; font-size: .88rem; color: var(--ink-3);
}
@media (max-width:560px){
  .route__cta .btn{ width: 100%; }
}

/* ============================================================
   9. Карта клубов, NFC, липкая панель
   ============================================================ */
.psm-hero{
  border: 0;
  box-shadow: var(--lx-plate-hi), var(--lx-drop);
}
.psm-ctrl__b{
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.5);
}
.psm-ctrl__b:hover{ border: 0; }
.psm-stat span{
  border: 0; border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#nfc .nfc__img, #nfc .nfc__img--flat{
  border: 0; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 40px 80px -26px rgba(0,0,0,.95);
}
.mcta{
  border-top: 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,.08), 0 -24px 40px -24px #000;
}
.mcta .btn{ border-radius: 10px; }

/* ============================================================
   10. Покой
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .lx-num, .hero__slate dd b, .trustbelt__nums dt, .rate__price b, #partners .trust__num,
  .hero__actions .btn--primary::after, .fin__side .btn--primary::after,
  .hero__stage--duo .hero__glow{ animation: none; }
  .hero__actions .btn--primary::after, .fin__side .btn--primary::after{ opacity: 0; }
}

/* ============================================================
   11. Подвал: карта сайта колонками вместо ленты из 11 ссылок
   Слева марка и два действия, справа четыре колонки, внизу две
   строки реквизитов. Волосок сверху и между ярусами — разделитель,
   не рамка.
   ============================================================ */
.ft{
  position: relative; margin-top: 0;
  padding: clamp(44px, 6vw, 72px) 0 clamp(28px, 4vw, 40px);
  background: linear-gradient(180deg, #07080b 0%, #040507 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  color: var(--ink-2);
}
.ft__top{
  display: grid; grid-template-columns: minmax(240px, 1.1fr) minmax(0, 2.4fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.ft__brand .brand{ font-size: 1.12rem; }
.ft__desc{ margin: 16px 0 0; max-width: 34ch; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.ft__cta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ft__cta .btn{ padding: .8em 1.3em; font-size: .95rem; }

.ft__cols{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px clamp(16px, 2.4vw, 36px);
}
.ft__col{ display: flex; flex-direction: column; min-width: 0; }
.ft__h{
  margin: 0 0 10px; font-family: var(--font-ui); font-weight: 800; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.ft__col a{
  display: block; padding: 7px 0; min-height: 34px;
  font-size: .94rem; font-weight: 600; line-height: 1.4; color: var(--ink-2);
  transition: color .18s ease;
}
.ft__col a:hover{ color: var(--ink); }
.ft__col a.ft__tg{ display: inline-flex; align-items: center; gap: .5em; color: var(--ink-1); }
.ft__col a.ft__tg svg{ width: 1.05em; height: 1.05em; flex: none; }
.ft__note{ margin: 10px 0 0; font-size: .84rem; line-height: 1.5; color: var(--ink-3); max-width: 28ch; }

.ft__bottom{ padding-top: clamp(18px, 2.4vw, 26px); display: grid; gap: 8px; }
.ft__bottom p{ margin: 0; font-size: .82rem; line-height: 1.55; color: var(--ink-3); max-width: 100ch; }
.ft__bottom a{ color: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.16); }
.ft__bottom a:hover{ color: var(--ink); border-bottom-color: var(--red); }

@media (max-width: 1024px){
  .ft__top{ grid-template-columns: minmax(0, 1fr); }
  .ft__cols{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .ft__cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .ft__col--contact{ grid-column: 1 / -1; }
  .ft__note{ max-width: none; }
  .ft__cta .btn{ flex: 1 1 auto; }
}
@media (max-width: 380px){
  .ft__cols{ grid-template-columns: minmax(0, 1fr); }
}
/* липкая мобильная панель CTA закрывает низ подвала — резерв */
@media (max-width: 720px){
  .ft{ padding-bottom: calc(28px + 72px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   12. «Что входит» — опись из шести строк вместо витрины телефонов
   (владелец 09.09: картинки занимали место и не продавали). Секция
   короче обычной, экраны продукта идут сразу следом.
   ============================================================ */
.section--what{ padding-block: clamp(48px, 7vw, 90px) clamp(36px, 5vw, 64px); }
.section--what .sh{ margin-bottom: clamp(18px, 2.4vw, 28px); }
.what{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(22px, 3vw, 44px);
  border-top: 1px solid var(--line-strong);
}
.what li{
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px;
  padding: 16px 0 18px; border-bottom: 1px solid var(--line);
}
.what__n{
  grid-row: 1 / span 2; padding-top: 4px;
  font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: .1em;
  color: var(--red-ink); font-variant-numeric: tabular-nums;
}
.what__h{
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2;
  letter-spacing: -.01em; color: var(--ink);
}
.what__p{ margin-top: 6px; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 900px){ .what{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){
  .what{ grid-template-columns: minmax(0, 1fr); }
  .what li{ padding: 14px 0 15px; }
}

/* ============================================================
   13. Прайс: «Pro» под софитом, на телефоне тарифы отдельными плитами
   (владелец 09.09 из TG: «тарифы слипаются, не понятно где какой,
   нет целевого акцента продать за 15к»). Pro шире и крупнее, на
   телефоне идёт первым и единственный с флагом и красной планкой;
   остальные — тише, каждый своей плитой с зазором.
   ============================================================ */
.rate{ grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.24fr) minmax(0,1fr); }
.rate__col--hot{
  padding-top: clamp(26px, 2.6vw, 34px);
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(228,18,30,.28), transparent 70%),
    linear-gradient(180deg, #1d1e27 0%, #121319 55%, #0e0f14 100%);
  box-shadow:
    inset 0 3px 0 var(--red),
    inset 0 4px 0 rgba(255,255,255,.14),
    inset 0 0 90px -30px rgba(228,18,30,.30);
}
.rate__col--hot .rate__flag{ font-size: 11px; }
.rate__col--hot .rate__name{ font-size: 1.75rem; }
.rate__col--hot .rate__tag{ color: var(--ink-2); }
.rate__col--hot .rate__price b{ font-size: clamp(2.4rem, 3.3vw, 3rem); }
.rate__col--hot .rate__cta{ font-size: 1.05rem; padding-block: 1.05em; }
.rate__col--hot .rate__f li{ color: var(--ink); }
.rate__price{ flex-wrap: wrap; }
.rate__price b{ white-space: nowrap; }

@media (max-width:1180px) and (min-width:821px){
  .rate{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:820px){
  .rate{
    grid-template-columns: minmax(0,1fr);
    background: none; box-shadow: none; border-radius: 0; overflow: visible;
    gap: 14px;
  }
  .rate__col{
    border: 0; border-radius: 14px; padding: 20px 18px 18px;
    background: var(--lx-plate);
    box-shadow: var(--lx-plate-hi), var(--lx-drop);
  }
  .rate__col--hot{
    order: -1; padding-top: 22px;
    background:
      radial-gradient(90% 40% at 50% 0%, rgba(228,18,30,.30), transparent 70%),
      linear-gradient(180deg, #1d1e27 0%, #121319 55%, #0e0f14 100%);
    box-shadow:
      inset 0 3px 0 var(--red),
      inset 0 4px 0 rgba(255,255,255,.14),
      var(--lx-drop);
  }
  .rate__col--hot .rate__flag{ display: block; }
  .rate__col--hot .rate__name{ font-size: 1.9rem; }
  .rate__col--hot .rate__price b{ font-size: 2.6rem; }
  /* имя и цена в одну строку: видно, где какой тариф, не читая список */
  .rate__name{ font-size: 1.5rem; }
  .rate__tag{ min-height: 0; }
  .rate__price{ margin-top: 12px; padding-bottom: 14px; }
  .rate__f li{ padding-block: 10px; }
}

/* 10.09.2026, владелец: «название не растягивать на весь экран, сделать меньше
   и читабельнее» (скрин 390px: H1 36px в четыре строки). На телефоне заголовок
   героя кеглем от ширины экрана, но заметно мельче и с нормальным интерлиньяжем;
   селектор с тем же весом, что и в styles.css, файл грузится последним. */
@media (max-width:720px){
  .hero--cover h1, .h1{ font-size:clamp(1.65rem, 6.4vw, 2.3rem); line-height:1.1; letter-spacing:-.015em; }
  .hero h1{ margin-bottom:16px; }
}
@media (max-width:400px){
  .hero--cover h1, .h1{ font-size:clamp(1.55rem, 6.4vw, 2.3rem); }
}

/* 10.09.2026, владелец: «все крупные названия поменяй на меньше». Заголовки
   секций (.h2: «Почему», «Что входит», цены, запуск, FAQ, финал) на телефоне
   были 30px — теперь кегль от ширины экрана, около 21px на 390px. */
@media (max-width:720px){
  .h2{ font-size:clamp(1.35rem, 5.4vw, 1.85rem); line-height:1.15; letter-spacing:-.012em; }
  .section-head{ margin-bottom:clamp(24px, 6vw, 40px); }
  .h3{ font-size:1.15rem; }
  .rate__name{ font-size:1.3rem; }
}

/* 24.09.2026, владелец: свечение у красных кнопок убрать и на главной
   (внутренние страницы уже без него, site-canon.css). Тень у кнопок и
   активного кадра тёмная; слово-акцент в заголовке без красного ореола. */
.h1--lit em{ text-shadow: none; }

/* 26.09.2026, владелец: голубая полоса над шапкой «Канал для владельцев
   клубов». Цвет Telegram, чтобы читалась как вход в канал; без обводки. */
.tgch-strip{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 16px; background:linear-gradient(90deg,#1c8adb,#2AABEE);
  color:#fff; font-weight:700; font-size:14px; line-height:1.25;
  text-decoration:none; text-align:center; position:relative; z-index:60;
  transition:filter .18s ease;
}
.tgch-strip:hover{ filter:brightness(1.05); color:#fff; }
.tgch-strip:active{ filter:brightness(.96); }
.tgch-strip svg{ flex:0 0 auto; width:18px; height:18px; }
.tgch-strip b{ font-weight:800; }
.tgch-strip__go{ flex:0 0 auto; padding:6px 12px; border-radius:999px; background:#fff; color:#1778c2; font-weight:800; font-size:13px; }
/* открытое мобильное меню стоит от 74px сверху: полосу прячем, чтобы шапка вернулась к верху */
body.nav-open .tgch-strip{ display:none; }
@media (max-width:400px){ .tgch-strip{ font-size:13px; gap:8px; padding:9px 12px; } }
@media (max-width:420px){ .tgch-strip__sub{ display:none; } }