/* ============================================================
   preview.css — короткий конверсионный лендинг (превью 2026-06-13)
   Используется ТОЛЬКО preview.php. Боевой styles.css не трогаем.
   Дополняет styles.css?v=33 (берём токены, .btn, .plan, .roi, .jobs, .steps, .faq, .device).
   ============================================================ */

/* ── Hero: оффер перехода прямо на первом экране ──────────── */
.switchbox{
  margin-top:26px; padding:18px 20px; border-radius:16px;
  border:1px solid rgba(228,18,30,.4);
  background:
    radial-gradient(130% 160% at 0% 0%, var(--red-soft, rgba(228,18,30,.14)), transparent 60%),
    var(--surface, #111218);
  box-shadow: var(--shadow-card, 0 24px 60px rgba(0,0,0,.5));
}
.switchbox__h{ margin:0 0 6px; font-weight:800; color:var(--ink-1,#fff); font-size:1.04rem; }
.switchbox__p{ margin:0 0 12px; color:var(--ink-2, rgba(255,255,255,.62)); font-size:.95rem; line-height:1.5; }
.switchbox__ticks{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; }
.switchbox__ticks li{ display:flex; align-items:center; gap:7px; color:var(--ink-1,#fff); font-size:.9rem; font-weight:600; }
.switchbox__ticks li .tick{ color:var(--red,#e4121e); }

/* ── «Почему уходят» — pain → результат ───────────────────── */
.reasons{ display:grid; gap:14px; }
.reason{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
  padding:18px 22px; border-radius:16px;
  border:1px solid var(--line, rgba(255,255,255,.08)); background:var(--surface, #111218);
}
.reason__pain{ color:var(--ink-2, rgba(255,255,255,.6)); font-size:.96rem; }
.reason__pain b{ display:block; color:var(--ink-3, rgba(255,255,255,.45)); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.reason__arrow{ color:var(--red,#e4121e); flex:0 0 auto; font-size:1.3rem; line-height:1; }
.reason__win{ color:var(--ink-1,#fff); font-weight:600; font-size:1rem; }
.reason__win b{ display:block; color:var(--red,#e4121e); font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
@media (max-width:680px){
  .reason{ grid-template-columns:1fr; gap:8px; padding:16px 18px; }
  .reason__arrow{ transform:rotate(90deg); justify-self:center; font-size:1.05rem; opacity:.85; margin:2px 0; }
}

/* ── «Что входит» — карточки результата ───────────────────── */
.whatin{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wcard{ padding:22px 20px; border-radius:16px; border:1px solid var(--line, rgba(255,255,255,.08)); background:var(--surface, #111218); transition:transform .25s ease, border-color .25s ease; }
.wcard:hover{ transform:translateY(-3px); border-color:var(--line-strong, rgba(255,255,255,.16)); }
.wcard__ico{ width:42px; height:42px; display:grid; place-items:center; border-radius:11px; color:var(--red,#e4121e); background:var(--red-soft, rgba(228,18,30,.12)); margin-bottom:12px; }
.wcard__ico svg{ width:22px; height:22px; }
.wcard h3{ margin:0 0 6px; }
.wcard p{ margin:0; color:var(--ink-2, rgba(255,255,255,.6)); font-size:.92rem; line-height:1.5; }
@media (max-width:880px){ .whatin{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .whatin{ grid-template-columns:1fr; } }

/* ── Калькулятор окупаемости ──────────────────────────────── */
.calc{ max-width:760px; margin:0 auto; padding:26px; border-radius:20px;
  border:1px solid var(--line-strong, rgba(255,255,255,.14));
  background:radial-gradient(130% 130% at 100% 0%, var(--red-soft, rgba(228,18,30,.12)), transparent 55%), var(--surface, #111218);
  box-shadow: var(--shadow-card, 0 24px 60px rgba(0,0,0,.5)); text-align:center; }
.calc__line{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:8px 14px; font-size:1.05rem; color:var(--ink-2, rgba(255,255,255,.62)); }
.calc__line b{ color:var(--ink-1,#fff); font-weight:800; font-size:1.25rem; }
.calc__sum{ margin:14px 0; font-size:2rem; font-weight:800; color:var(--red,#e4121e); }
.calc__sum small{ display:block; font-size:.78rem; font-weight:600; color:var(--ink-3, rgba(255,255,255,.45)); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }
.calc__verdict{ margin:6px 0 0; color:var(--ink-1,#fff); font-size:1rem; }
.calc__verdict b{ color:var(--red,#e4121e); }

/* ── Сжатый 152-ФЗ ────────────────────────────────────────── */
.pdstrip{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; justify-content:center;
  max-width:880px; margin:18px auto 0; padding:16px 22px; border-radius:14px;
  border:1px solid var(--line, rgba(255,255,255,.08)); background:var(--bg-1, #0a0b0f); }
.pdstrip b{ color:var(--ink-1,#fff); }
.pdstrip ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; }
.pdstrip li{ display:flex; align-items:center; gap:7px; color:var(--ink-2, rgba(255,255,255,.62)); font-size:.9rem; }
.pdstrip li .tick{ color:var(--red,#e4121e); }

/* ── Компактная галерея скриншотов ────────────────────────── */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.gallery .shot{ position:relative; cursor:zoom-in; border:0; padding:0; background:none; border-radius:14px; overflow:hidden; box-shadow: var(--shadow-card, 0 16px 40px rgba(0,0,0,.5)); }
.gallery .shot img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:9/16; transition:transform .3s ease; }
.gallery .shot:hover img{ transform:scale(1.05); }
.gallery .shot::after{ content:"🔍"; position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-size:13px; background:rgba(8,9,12,.72); border:1px solid var(--line-strong, rgba(255,255,255,.18)); opacity:.85; }
@media (max-width:880px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .gallery{ grid-template-columns:repeat(2,1fr); } }

@media (prefers-reduced-motion: reduce){
  .wcard, .gallery .shot img{ transition:none; }
}

/* ============================================================
   pv — инлайн-вьюер «Настоящие экраны продукта» (2026-06-13)
   Табы-разделы + крупный фрейм + счётчик + лента тумбов.
   ============================================================ */
.pv__badge{ display:inline-flex; align-items:baseline; gap:6px; margin-left:6px; padding:4px 12px; border-radius:999px;
  border:1px solid rgba(228,18,30,.4); background:var(--red-soft, rgba(228,18,30,.12)); color:var(--ink-1,#fff); font-size:.82rem; white-space:nowrap; }
.pv__badge b{ color:var(--red,#e4121e); font-weight:800; }
.pv__fallback{ text-align:center; color:var(--ink-3, rgba(255,255,255,.45)); padding:40px 0; }
.pv.is-ready .pv__fallback{ display:none; }

/* табы разделов */
.pv__tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:26px; }
.pv__tab{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line, rgba(255,255,255,.1)); background:var(--surface, #111218); color:var(--ink-2, rgba(255,255,255,.62));
  font:inherit; font-size:.92rem; font-weight:600; transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease; }
.pv__tab:hover{ color:var(--ink-1,#fff); border-color:var(--line-strong, rgba(255,255,255,.18)); transform:translateY(-1px); }
.pv__tab b{ font-weight:800; color:var(--ink-3, rgba(255,255,255,.4)); font-size:.82rem; }
.pv__tab.is-active{ color:#fff; border-color:rgba(228,18,30,.55);
  background:linear-gradient(180deg, var(--red-soft, rgba(228,18,30,.16)), transparent); box-shadow:0 0 0 1px rgba(228,18,30,.25) inset; }
.pv__tab.is-active b{ color:var(--red,#e4121e); }

/* основная сцена */
.pv__main{ display:grid; grid-template-columns:1fr 1.05fr; gap:34px; align-items:center;
  padding:30px; border-radius:24px; border:1px solid var(--line, rgba(255,255,255,.08));
  background:radial-gradient(120% 130% at 100% 0%, var(--red-soft, rgba(228,18,30,.08)), transparent 55%), var(--surface, #111218);
  box-shadow: var(--shadow-card, 0 24px 60px rgba(0,0,0,.5)); }

.pv__side{ min-width:0; }
.pv__sec{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--red,#e4121e); margin-bottom:10px; }
.pv__benefit{ margin:0 0 8px; font-size:1.5rem; line-height:1.2; font-weight:800; color:var(--ink-1,#fff); }
.pv__shot{ margin:0 0 20px; color:var(--ink-2, rgba(255,255,255,.6)); font-size:.98rem; line-height:1.5; }

.pv__counter{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:.85rem; color:var(--ink-3, rgba(255,255,255,.5)); margin-bottom:8px; }
.pv__counter b{ color:var(--ink-1,#fff); font-weight:700; }
.pv__progress{ height:4px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:20px; }
.pv__progress i{ display:block; height:100%; background:var(--red-grad, var(--red,#e4121e)); background-color:var(--red,#e4121e); border-radius:99px; transition:width .3s cubic-bezier(.2,.7,.2,1); }

.pv__controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pv__ctrl{ width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; cursor:pointer;
  border:1px solid var(--line-strong, rgba(255,255,255,.14)); background:var(--surface-2, #16171e); color:var(--ink-1,#fff);
  transition:border-color .2s ease, background .2s ease, transform .15s ease; }
.pv__ctrl:hover{ border-color:rgba(228,18,30,.5); background:var(--surface-3, #1c1d26); }
.pv__ctrl:active{ transform:scale(.95); }
.pv__ctrl svg{ width:20px; height:20px; }
.pv__zoom{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; padding:0 16px; height:44px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line-strong, rgba(255,255,255,.14)); background:transparent; color:var(--ink-2, rgba(255,255,255,.7)); font:inherit; font-size:.9rem; font-weight:600;
  transition:color .2s ease, border-color .2s ease; }
.pv__zoom:hover{ color:#fff; border-color:rgba(228,18,30,.5); }
.pv__zoom svg{ width:16px; height:16px; }
.pv__next-hint{ margin:14px 0 0; font-size:.82rem; color:var(--ink-3, rgba(255,255,255,.42)); }

/* фрейм устройства */
.pv__frame{ position:relative; justify-self:center; width:100%; display:grid; place-items:center; }
.pv__device{ position:relative; border-radius:30px; padding:10px; background:#0b0c10; border:1px solid var(--line-strong, rgba(255,255,255,.14));
  box-shadow:0 30px 70px rgba(0,0,0,.6); overflow:hidden; }
.pv__frame--phone .pv__device{ width:min(300px, 78vw); border-radius:34px; }
.pv__frame--wide .pv__device{ width:min(720px, 100%); border-radius:16px; padding:8px; }
.pv__device img{ display:block; width:100%; height:auto; border-radius:24px; background:#0e0f14; }
.pv__frame--wide .pv__device img{ border-radius:10px; }
.pv__img{ opacity:0; transition:opacity .25s ease; }
.pv__img.is-ready{ opacity:1; }
.pv__device::after{ content:"🔍"; position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; background:rgba(8,9,12,.7); border:1px solid var(--line-strong, rgba(255,255,255,.18)); opacity:.8; pointer-events:none; }

/* лента тумбов */
.pv__thumbs{ display:flex; gap:10px; overflow-x:auto; padding:18px 2px 4px; scroll-snap-type:x mandatory; }
.pv__thumb{ flex:0 0 auto; width:58px; height:58px; border-radius:12px; overflow:hidden; cursor:pointer; padding:0; scroll-snap-align:center;
  border:1px solid var(--line, rgba(255,255,255,.1)); background:var(--surface-2, #16171e); opacity:.55; transition:opacity .2s ease, border-color .2s ease, transform .2s ease; }
.pv__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv__thumb:hover{ opacity:.85; }
.pv__thumb.is-active{ opacity:1; border-color:var(--red,#e4121e); transform:translateY(-2px); }

@media (max-width:880px){
  .pv__main{ grid-template-columns:1fr; gap:22px; padding:20px; }
  .pv__frame{ order:-1; }            /* на мобайле фрейм сверху */
  .pv__benefit{ font-size:1.25rem; }
}
@media (prefers-reduced-motion: reduce){
  .pv__tab, .pv__progress i, .pv__img, .pv__thumb, .pv__ctrl{ transition:none; }
}

/* ============================================================
   pv patch (v4) — стабильная высота сцены (без прыжков при смене
   раздела/экрана) + резерв места под подписи.
   Идёт ПОСЛЕ базовых .pv-правил, поэтому переопределяет их.
   ============================================================ */
.pv__main{ align-items:stretch; }
.pv__side{ align-self:center; }
.pv__shot{ min-height:2.8em; }
.pv__next-hint{ min-height:1.1em; }

/* фрейм держит постоянную высоту → колонка не прыгает */
.pv__frame{ min-height:620px; align-self:center; align-content:center; }
.pv__frame--phone .pv__device{ height:600px; width:auto; max-width:330px; padding:10px; display:flex; }
.pv__frame--phone .pv__device img{ height:100%; width:auto; object-fit:contain; border-radius:24px; }
.pv__frame--wide .pv__device{ width:min(720px,100%); height:auto; }
.pv__frame--wide .pv__device img{ width:100%; height:auto; border-radius:10px; }

@media (max-width:880px){
  .pv__frame{ min-height:540px; }
  .pv__frame--phone .pv__device{ height:500px; }
}

/* ── ссылка «глянуть демо» в финальном CTA на красном фоне ──── */
.final p a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.final p a:hover{ text-decoration-color:rgba(255,255,255,.6); }

/* ── «Нам уже доверяют»: число клубов + города (без имён) ── */
#partners .trust{
  margin-top:clamp(28px,4vw,48px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(20px,3vw,30px);
}
#partners .trust__count{
  display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap;
  column-gap:16px; row-gap:4px; margin:0;
}
#partners .trust__num{
  font-family:var(--font-display); font-weight:800; line-height:.9;
  font-size:clamp(58px,11vw,108px); letter-spacing:-.03em;
  background:var(--red-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
#partners .trust__unit{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(18px,2.4vw,26px); color:var(--ink-1);
}
#partners .trust__cities{
  list-style:none; margin:0; padding:0; max-width:760px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
#partners .trust__city{
  display:inline-flex; align-items:center; gap:7px;
  padding:.55em 1.05em; border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-strong);
  font-size:14px; font-weight:600; color:var(--ink-1); letter-spacing:.01em;
  transition:border-color .25s ease, transform .25s ease;
}
#partners .trust__city:hover{ border-color:var(--red-soft); transform:translateY(-2px); }
#partners .trust__city::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--red); box-shadow:0 0 8px var(--red-glow);
}
@media (max-width:560px){
  #partners .trust{ gap:18px; }
  #partners .trust__city{ font-size:13px; padding:.5em .9em; }
}

/* ── NFC-карта участника (физический атрибут, тариф Pro) ── */
#nfc .nfc__grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,68px);
  align-items:center;
}
#nfc .nfc__media{ position:relative; justify-self:center; max-width:360px; width:100%; }
#nfc .nfc__glow{
  position:absolute; inset:-14% -10% -18%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 38%, var(--red-glow), transparent 70%);
  filter:blur(46px); opacity:.5;
}
#nfc .nfc__img{
  position:relative; z-index:1; width:100%; height:auto; display:block;
  border-radius:var(--r-lg); border:1px solid var(--line-strong);
  box-shadow:var(--shadow-pop);
}
#nfc .nfc__copy{ max-width:560px; }
#nfc .nfc__copy .h2{ margin-top:14px; }
#nfc .nfc__copy .lead{ margin-top:18px; }
#nfc .nfc__feats{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:13px; }
#nfc .nfc__feats li{ display:flex; align-items:flex-start; gap:12px; font-size:1rem; color:var(--ink-1); }
#nfc .nfc__tag{
  margin-top:24px; display:inline-flex; align-items:center;
  font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--ink-2);
  padding:.55em 1.1em; border-radius:var(--r-pill);
  background:var(--red-soft); border:1px solid rgba(228,18,30,.35);
}
#nfc .nfc__tag b{ color:var(--red-ink); margin-left:.4em; }
#nfc .nfc__note{ margin-top:12px; font-size:.84rem; color:var(--ink-2); line-height:1.5; max-width:480px; }
@media (max-width:760px){
  #nfc .nfc__grid{ grid-template-columns:1fr; gap:32px; }
  #nfc .nfc__media{ order:-1; max-width:300px; }
}