/* Лендинг «Не терять нить». Тёмная тема v2 (токены из v2/tokens.css), кнопки — из v2/components.css (ui-button).
   Закреплённая сцена: нить из фотографий идёт через весь экран и меняется вместе с прокруткой (landing-v2.js).
   Тёмный фон кадров снимает mix-blend-mode: lighten, поэтому у #cam свой фон. Версия без анимации — landing-static.css. */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); }

body {
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  --pad: 6vw;
}

h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: 400; letter-spacing: -0.03em; text-wrap: balance; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--accent-ink);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Общая кнопка крупнее на лендинге: только размер, цвета остаются из ui-button */
.ui-button--lg { height: 56px; padding: 0 28px; font-size: 17px; }

/* ---------- шапка ---------- */
/* Челка и индикатор «домой»: в установленном PWA страница рисуется под статус-баром (viewport-fit=cover) */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --head-h: calc(max(16px, calc(var(--safe-top) + 8px)) + 48px);
}
.landing-header {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(16px, calc(var(--safe-top) + 8px)) max(var(--pad), env(safe-area-inset-right, 0px)) 0 max(var(--pad), env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.landing-header > * { pointer-events: auto; }
.landing-logo img { display: block; height: 48px; width: auto; }

/* ---------- закреплённая сцена ---------- */
#story { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
#stage { position: absolute; inset: 0; }
#cam { position: absolute; inset: 0; background: var(--bg); will-change: transform; }
#tl { position: absolute; inset: 0; overflow: hidden; }

.th {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  max-width: none;
  mix-blend-mode: lighten;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
/* Центр кадра на середине сцены задаёт отступ в долях ширины (половина высоты 3:2 и 16:9), а не transform:
   transform здесь делит GSAP, и двойной сдвиг уводил фото за экран, если картинка успевала загрузиться раньше скрипта. */
.th { margin-top: -33.333%; }
#hero { opacity: 1; visibility: visible; margin-top: -28.14%; }
#hl { clip-path: inset(0 50% 0 0); }
#hr { clip-path: inset(0 0 0 50%); }
#thick { clip-path: inset(0 100% 0 0); }
#rope { transform-origin: 49.3% 50%; }

#ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  border: 1.5px solid var(--lime);
  opacity: 0;
  pointer-events: none;
}
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
#flash { position: absolute; inset: 0; background: var(--lime); opacity: 0; pointer-events: none; z-index: 7; }

.sc { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#s2, #s3, #s4, #s5, #s6 { visibility: hidden; opacity: 0; }
.sc a { pointer-events: auto; }
.sp { display: none; }

.zt { position: absolute; left: var(--pad); right: var(--pad); top: max(96px, 14vh, calc(var(--head-h) + 24px)); }
.zb { position: absolute; left: var(--pad); right: var(--pad); bottom: max(28px, 7vh, calc(var(--safe-bottom) + 20px)); }
.zt h1 { font-size: clamp(52px, 8vw, 136px); line-height: 0.95; }
.zt h2 { font-size: clamp(40px, 6.4vw, 116px); line-height: 0.98; }
.lead { font-size: clamp(17px, 1.7vw, 24px); }
.note { font-size: var(--font-meta); color: var(--text-muted); }

/* слова и буквы, поднимающиеся из-под маски (создаёт landing-v2.js) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.c { display: inline-block; will-change: transform; }

/* 1: первый экран. Заголовок стоит в тёмном просвете между пальцами */
#s1 .zt { left: 22vw; right: 22vw; text-align: center; top: max(104px, 15vh, calc(var(--head-h) + 24px)); }
#s1 .zb { bottom: max(64px, 10vh); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
#s1 .lead { max-width: 520px; }
.cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* «Листай вниз»: заметная подсказка со стрелкой */
.hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(14px, 2.4vh, calc(var(--safe-bottom) + 10px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  pointer-events: none;
}
.hint svg { width: 28px; height: 28px; color: var(--lime); animation: hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* 2: боль */
.pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; }
.pain p { font-size: clamp(16px, 1.5vw, 22px); line-height: 1.4; }
.pain b { font-weight: var(--weight-medium); }

/* 3: карточки висят на нити, как бусины */
.beads { position: absolute; left: 0; top: 50%; display: flex; gap: 5vw; padding: 0 8vw 0 4vw; z-index: 2; will-change: transform; }
.bead { position: relative; flex: none; width: min(82vw, 420px); padding-top: 50px; transform-origin: 50% 0; }
.bead::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 50px; margin-left: -1.5px; background: var(--lime); border-radius: 2px; }
.bc { background: var(--surface); border-radius: var(--radius-panel); padding: 20px; }
.bc h3 { font-size: 22px; font-weight: var(--weight-medium); }
.bc .sub { margin-top: 4px; color: var(--text-secondary); font-size: var(--font-body); }
.bubble { margin-top: 14px; background: var(--surface-2); border-radius: 18px 18px 18px 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.bubble .who { font-size: var(--font-meta); font-weight: var(--weight-medium); color: var(--lime); }
.bubble .msg { font-size: var(--font-body); line-height: 1.4; }
.rows { margin-top: 6px; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.row + .row { border-top: 1px solid var(--border); }
.av { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: var(--font-meta); font-weight: var(--weight-medium); flex: none; }
.who2 { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.who2 small { font-size: var(--font-meta); color: var(--text-muted); }
.val { display: flex; flex-direction: column; align-items: flex-end; font-weight: var(--weight-medium); }
.val small { font-size: var(--font-meta); color: var(--text-muted); font-weight: 400; }
.val--risk { color: var(--danger); }
/* фото передачи нити проявляется из тьмы, пока карточка подъезжает (landing-v2.js) */
.ph { margin-top: 14px; width: 100%; height: 190px; object-fit: cover; border-radius: var(--radius-card); display: block; filter: brightness(0.12); }
.demo { position: absolute; left: var(--pad); bottom: max(20px, 4vh, calc(var(--safe-bottom) + 12px)); font-size: var(--font-meta); color: var(--text-muted); }

/* 4: квалификация */
#s4 .zb { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rank { font-size: clamp(64px, 12vw, 210px); line-height: 0.9; font-weight: var(--weight-light); letter-spacing: -0.04em; white-space: nowrap; }
.goal { width: min(100%, 460px); background: var(--lavender); color: var(--lavender-ink); border-radius: var(--radius-panel); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.goal .t { font-size: 16px; font-weight: var(--weight-medium); }
.goal .t--soft { font-weight: 400; margin-top: 4px; }
.goal .n { font-size: clamp(52px, 6vw, 96px); font-weight: var(--weight-light); line-height: 1; }
.goal .n b { font-weight: var(--weight-light); }
.goal .n span { font-size: 0.38em; font-weight: 400; }

/* 5: цена */
#s5 .zt .lead { margin-top: 16px; font-size: clamp(17px, 1.6vw, 22px); max-width: 520px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; }
.pc { border-radius: var(--radius-panel); padding: clamp(18px, 2vw, 32px); display: flex; flex-direction: column; gap: 6px; background: var(--surface); text-decoration: none; }
.pc .name { font-size: clamp(18px, 1.7vw, 24px); font-weight: var(--weight-medium); }
.pc .price { font-size: clamp(40px, 5vw, 84px); font-weight: var(--weight-light); line-height: 1; white-space: nowrap; }
.pc .price b { font-weight: var(--weight-light); }
.pc .price small { font-size: 0.28em; font-weight: 400; }
.pc .d { font-size: clamp(14px, 1.2vw, 17px); color: var(--text-secondary); margin-top: 6px; }
.pc--full { background: var(--lime); color: var(--accent-ink); }
.pc--full .d { color: var(--accent-ink); }
.pc--full:hover { background: var(--lime-hover); }

/* 6: финал */
#s6 .zt h2 { font-size: clamp(42px, 7vw, 124px); }
#s6 .zb { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
#s6 .lead { max-width: 520px; }

/* ---------- после сцены: вопросы и подвал ---------- */
.faq { padding: clamp(72px, 10vw, 160px) var(--pad) 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px 6vw; align-items: start; }
.faq-head { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.faq h2 { font-size: clamp(40px, 6vw, 96px); line-height: 0.98; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-list article { background: var(--surface); border-radius: var(--radius-card); padding: 20px 24px; }
.faq-list h3 { font-size: 20px; font-weight: var(--weight-medium); }
.faq-list p { margin-top: 6px; color: var(--text-secondary); }

.landing-footer { position: relative; overflow: hidden; padding: clamp(200px, 24vw, 380px) var(--pad) max(40px, calc(var(--safe-bottom) + 16px)); color: var(--text-muted); font-size: var(--font-small); }
.end-rope { position: absolute; left: 0; top: -2vw; width: 50vw; height: auto; max-width: none; mix-blend-mode: lighten; pointer-events: none; }
.support-row { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; color: var(--text-primary); }
.support-row h2 { font-size: clamp(34px, 4.6vw, 72px); line-height: 1; }
.support-contact { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.support-email { color: var(--text-secondary); }
.footer-bottom { margin-top: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 6vw; }
.footer-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-label { font-size: var(--font-meta); color: var(--text-muted); }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a, .footer-social { color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.footer-links a:hover, .footer-social:hover { color: var(--text-primary); }
.operator p { color: var(--text-primary); }
.footer-end { margin-top: 40px; font-size: var(--font-meta); }

@media (max-width: 700px) {
  .pain { grid-template-columns: 1fr; gap: 12px; }
  .plans { grid-template-columns: 1fr; gap: 10px; }
  .pc { padding: 16px 18px; border-radius: var(--radius-card); }
  .pc .price { font-size: 38px; }
  .pc .d { margin-top: 2px; font-size: var(--font-meta); }
  .rank { font-size: 19vw; }
  .goal { padding: 16px 18px; border-radius: var(--radius-card); }
  .goal .n { font-size: 56px; }
  .bc { padding: 16px; }
  .ph { height: 140px; }
  .ui-button--lg { height: 52px; font-size: 16px; }
  .zt { top: max(88px, 12vh, calc(var(--head-h) + 16px)); }
  #s1 .zt { left: var(--pad); right: var(--pad); top: max(96px, 13vh, calc(var(--head-h) + 16px)); }
  .faq { grid-template-columns: 1fr; }
  .footer-bottom { grid-template-columns: 1fr; }
  .end-rope { top: 0; }
}