/* ═════════════════════════════════════════════════════════════════════════
   Витрина (/welcome) — собственный визуальный язык поверх landing.css.
   Подключается только в landing.html (body.lp), кабинет и формы входа
   не задевает.

   Идея: «сканер». Тёмный первый экран с сеткой как у DataMatrix, зелёный
   луч сканирования, зелёный «принят» как второй фирменный цвет,
   моноширинные подписи разделов «[01] …» — как строка из сканера.
   Фиолетово-синий градиент остаётся цветом бренда (логотип, кнопки).
   ═════════════════════════════════════════════════════════════════════════ */

.lp {
  --ink-bg: #0d0b1f;            /* тёмный фон первого экрана и тёмных блоков */
  --ink-bg-2: #161433;
  --scan: #22c55e;              /* «КИЗ принят» — второй фирменный цвет */
  --scan-soft: rgba(34, 197, 94, .14);
  --grad-light: linear-gradient(120deg, #c4b5fd 0%, #a5b4fc 45%, #7dd3fc 100%);
}

/* ---- подпись раздела: [01] Как работает ---- */
.lp .kick-mono { display: block; text-align: center; font-family: var(--mono); font-size: 12.5px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.lp .kick-mono b { color: var(--scan); font-weight: 700; margin-right: 6px; }
.lp .kick-mono.left { text-align: left; }

/* ---- первый экран: тёмный, сетка DataMatrix, свечение бренда ---- */
.lp .hero { background: var(--ink-bg); color: #fff; padding: 84px 0 96px; }
.lp .hero::before { left: 25%; top: -280px; width: 1100px; height: 700px;
  background: radial-gradient(closest-side, rgba(124,58,237,.42), rgba(37,99,235,.20) 55%, transparent 78%); }
.lp .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%); }
.lp .hero h1 { color: #fff; }
.lp .hero .grad-text { background: var(--grad-light); -webkit-background-clip: text; background-clip: text; }
.lp .hero p.lead { color: rgba(255,255,255,.74); }
.lp .hero .trust li { color: rgba(255,255,255,.72); }
.lp .hero .trust li::before { color: var(--scan); }
.lp .hero .mp-chip { background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
html .lp .hero .btn.btn-soft { background: rgba(255,255,255,.10); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
html .lp .hero .btn.btn-soft:hover { background: rgba(255,255,255,.16); color: #fff; }

/* телефон с видео на тёмном фоне — светлая окантовка и зелёный луч */
.lp .hero .phone { box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14), 0 0 80px rgba(124,58,237,.30); }
.lp .scan-demo { position: relative; overflow: hidden; }
.lp .scan-demo::after, .lp .hero .phone::after { content: ""; position: absolute; left: 6%; right: 6%; top: 8%; height: 2px;
  border-radius: 2px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--scan) 20%, var(--scan) 80%, transparent);
  box-shadow: 0 0 14px 2px rgba(34,197,94,.55);
  animation: lpScan 3.2s cubic-bezier(.45,0,.55,1) infinite; }
.lp .hero .phone::after { opacity: .75; }
@keyframes lpScan { 0% { top: 8%; opacity: 0; } 10% { opacity: 1; } 50% { top: 90%; opacity: 1; } 60% { opacity: 0; } 100% { top: 90%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lp .scan-demo::after, .lp .hero .phone::after { animation: none; display: none; } }

/* ---- «Больше, чем сборка»: три тёмные карточки ---- */
.lp .beyond { background: var(--bg); }
.lp .beyond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1100px) { .lp .beyond-grid { grid-template-columns: repeat(2, 1fr); } }
.lp .beyond-card { position: relative; overflow: hidden; background: var(--ink-bg); color: #fff;
  border-radius: var(--r-xl); padding: 28px 26px 26px; isolation: isolate; }
.lp .beyond-card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; z-index: -1;
  background: radial-gradient(closest-side, rgba(124,58,237,.45), transparent 70%); }
.lp .beyond-card .tag-mono { display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--scan); background: var(--scan-soft);
  padding: 4px 9px; border-radius: 6px; margin-bottom: 16px; }
.lp .beyond-card h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.018em; }
.lp .beyond-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
.lp .beyond-card a { display: inline-block; margin-top: 14px; color: #c4b5fd; font-weight: 600; font-size: 14px; }
.lp .beyond-card a:hover { color: #fff; }

/* ---- безопасность ключей ---- */
.lp .safe { background: var(--surface); }
.lp .safe-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.lp .safe h2 { text-align: left; }
.lp .safe .sub { text-align: left; margin: 0; }
.lp .safe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp .safe-list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start;
  background: var(--bg); border-radius: var(--r-lg); padding: 16px 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.lp .safe-list li b { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 2px; }
.lp .safe-list .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--scan-soft);
  display: flex; align-items: center; justify-content: center; }
.lp .safe-list .ic svg { width: 19px; height: 19px; stroke: #16a34a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- остальные секции: зелёные галочки и номера ---- */
.lp .cmp .now::before { color: #16a34a; }
.lp .step-n, .lp .shot-num { background: var(--ink-bg); color: var(--scan); font-family: var(--mono); }

/* тариф с ЧЗ — тёмный, чтобы отличался сразу */
.lp .plan.featured { background: var(--ink-bg); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px rgba(13,11,31,.35); }
.lp .plan.featured h3, .lp .plan.featured li { color: #fff; }
/* .who у тарифа — не секция «Для кого» (у неё тоже класс .who с белым фоном) */
.lp .plan .who { background: transparent; }
.lp .plan.featured .who, .lp .plan.featured .price span { color: rgba(255,255,255,.62); }
.lp .plan.featured .price .old { color: rgba(255,255,255,.4); }
.lp .plan.featured .save { background: var(--scan-soft); color: #4ade80; }
.lp .plan.featured li::before { background: var(--scan-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }

/* финальный призыв — тёмный, как первый экран: страница «закольцована» */
.lp .cta-band { background: var(--ink-bg); position: relative; overflow: hidden; isolation: isolate; }
.lp .cta-band::before { content: ""; position: absolute; left: 50%; top: -200px; width: 900px; height: 500px; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(124,58,237,.40), rgba(37,99,235,.16) 55%, transparent 78%); }
html .lp .cta-band .btn-ghost { background: var(--grad); color: #fff; }
html .lp .cta-band .btn-ghost:hover { background: var(--grad); color: #fff; filter: brightness(1.08); }
.lp .footer { background: #08071a; }

@media (max-width: 860px) {
  .lp .hero { padding: 44px 0 60px; }
  .lp .beyond-grid { grid-template-columns: 1fr; }
  .lp .safe-in { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- «Нет сканера? Сканируйте телефоном» — внутри «Как работает» ---- */
.lp .phone-scan { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center;
  margin-top: 28px; padding: 36px 40px; border-radius: var(--r-xl); background: var(--ink-bg); color: #fff;
  position: relative; overflow: hidden; isolation: isolate; }
.lp .phone-scan::before { content: ""; position: absolute; right: -120px; top: -140px; width: 460px; height: 460px; z-index: -1;
  background: radial-gradient(closest-side, rgba(34,197,94,.22), rgba(124,58,237,.18) 55%, transparent 75%); }
.lp .phone-scan .tag-mono { display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--scan); background: var(--scan-soft);
  padding: 4px 9px; border-radius: 6px; margin-bottom: 14px; }
.lp .phone-scan h3 { margin: 0 0 10px; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.lp .phone-scan .ps-txt > p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.75); }
.lp .ps-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.lp .ps-points li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.72); }
.lp .ps-points li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 6px;
  background: var(--scan-soft); color: var(--scan); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lp .ps-points b { color: #fff; }
.lp .phone-scan .ps-more { display: inline-block; margin-top: 14px; color: #c4b5fd; font-weight: 600; font-size: 14px; }
.lp .phone-scan .ps-more:hover { color: #fff; }
.lp .phone-scan .ps-txt > p.ps-small { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.5); }

/* макет экрана телефона — тот же вид, что у настоящей страницы /m/<token> */
.lp .ps-phone { justify-self: center; width: 230px; padding: 10px; border-radius: 34px; background: #1f1d36;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1); }
.lp .ps-screen { border-radius: 26px; background: #111114; padding: 12px 10px 14px; display: flex; flex-direction: column; gap: 9px; }
.lp .ps-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; padding: 0 4px; }
.lp .ps-top span { font-weight: 800; background: linear-gradient(115deg,#a78bfa,#60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp .ps-top i { font-style: normal; color: #86efac; }
.lp .ps-top i::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; margin-right: 4px; vertical-align: 1px; }
.lp .ps-cam { position: relative; height: 200px; border-radius: 16px; background: linear-gradient(160deg, #3a3f4a, #23262d); overflow: hidden; }
/* «DataMatrix» на упаковке — узор из квадратиков */
.lp .ps-dm { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%,-50%);
  background-color: #fff; border: 6px solid #fff; border-radius: 3px;
  background-image: conic-gradient(#111 25%, transparent 0 50%, #111 0 75%, transparent 0);
  background-size: 12px 12px; box-shadow: inset 4px 0 0 #111, inset 0 -4px 0 #111; }
.lp .ps-frame { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; transform: translate(-50%,-50%);
  border-radius: 10px; background: rgba(52,199,89,.14); animation: lpPsLock 3.2s ease-in-out infinite; }
.lp .ps-frame i { position: absolute; width: 18px; height: 18px; border: 3px solid #34c759; animation: lpPsCorner 3.2s ease-in-out infinite; }
@keyframes lpPsCorner { 0%, 22% { border-color: #fff; } 34%, 88% { border-color: #34c759; } 100% { border-color: #fff; } }
.lp .ps-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.lp .ps-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.lp .ps-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.lp .ps-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
/* рамка: широкая белая → сжимается до кода и зеленеет */
@keyframes lpPsLock {
  0%, 18%   { width: 150px; height: 150px; background: transparent; }
  40%, 85%  { width: 88px; height: 88px; background: rgba(52,199,89,.14); }
  100%      { width: 150px; height: 150px; background: transparent; }
}
.lp .ps-order { display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 12px; padding: 7px; color: #1d1d1f; }
.lp .ps-img { flex: 0 0 30px; height: 38px; border-radius: 6px; background: linear-gradient(135deg, #c4b5fd, #7dd3fc); }
.lp .ps-ot { display: flex; flex-direction: column; min-width: 0; font-size: 10px; line-height: 1.3; }
.lp .ps-ot b { color: #5b4bf0; }
.lp .ps-ot em { font-style: normal; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp .ps-ok { border-radius: 12px; padding: 9px 10px; background: #0f2a1a; border: 1.5px solid rgba(34,197,94,.45);
  color: #86efac; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
@media (prefers-reduced-motion: reduce) { .lp .ps-frame, .lp .ps-frame i { animation: none; } }
@media (max-width: 860px) {
  .lp .phone-scan { grid-template-columns: 1fr; padding: 28px 22px; gap: 28px; }
  .lp .phone-scan h3 { font-size: 22px; }
}