/* Платёжный шлюз. Стили только этой страницы, общая основа в /styles.css.
   Движение здесь не ради движения: оно показывает путь денег и подсказывает,
   что происходит. Всё, что не объясняет, а просто дёргается, выброшено. */

.header__out{opacity:.72}
.header__nav{display:flex;gap:18px;align-items:center;font-weight:600}
.header__nav a{color:var(--muted);text-decoration:none;transition:color .18s ease}
.header__nav a:hover{color:var(--text)}
@media (max-width:720px){
  .header__nav{gap:12px;font-size:13px}
  .header__nav a:nth-child(3){display:none}
}

/* --- шапка страницы --- */

.hero{padding:56px 0 8px;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.hero__h1{font-size:clamp(30px,5.2vw,52px);line-height:1.06;letter-spacing:-0.03em;
          margin:0 0 16px;animation:rise .5s ease both}
.hero__accent{color:var(--accent)}
.hero__p{font-size:clamp(15px,2vw,18px);color:var(--muted);max-width:46ch;margin:0 0 22px;
         animation:rise .5s .07s ease both}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;animation:rise .5s .14s ease both}
.btn--lg{padding:12px 22px;font-size:15px}
.hero__art{animation:rise .5s .2s ease both}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .hero{padding-top:32px}
  .hero__in{grid-template-columns:1fr;gap:24px}
  .hero__art{order:-1}
}

/* --- схема пути денег --- */

.flow{width:100%;height:auto;max-height:240px}
.flow__box{fill:var(--bg-soft);stroke:var(--line);stroke-width:1.5}
.flow__box--mid{stroke:var(--accent);stroke-dasharray:5 4;
                animation:dash 14s linear infinite}
@keyframes dash{to{stroke-dashoffset:-180}}
.flow__t{fill:var(--text);font:600 13px var(--font-body);letter-spacing:-0.01em}
.flow__s{fill:var(--muted);font:500 11px var(--font-body)}
.flow__line{stroke:var(--line-strong);stroke-width:2;stroke-linecap:round}

/* --- цифры под шапкой --- */

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0 8px}
.factbox{border:1px solid var(--line);border-radius:12px;padding:16px;
         background:var(--bg-soft);text-align:center;
         transition:transform .2s ease,border-color .2s ease}
.factbox:hover{transform:translateY(-2px);border-color:var(--accent)}
.factbox b{display:block;font-size:26px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.factbox span{color:var(--muted);font-size:13px}
@media (max-width:720px){.facts{grid-template-columns:repeat(2,1fr)}}

/* --- появление при прокрутке ---
   Заметно, но коротко. Долгая анимация на каждом блоке превращает чтение в
   ожидание. */
.reveal{opacity:0;transform:translateY(16px);
        transition:opacity .45s ease,transform .45s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .flow__box--mid,.flow__coin{animation:none}
  .hero__h1,.hero__p,.hero__cta,.hero__art{animation:none}
}

/* --- шаги --- */

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.step{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--bg-soft);
      transition:transform .2s ease,box-shadow .2s ease}
.step:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(0,0,0,.07)}
.step__n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
         background:var(--accent);color:#fff;font-weight:700;margin-bottom:12px}
.step__h{margin:0 0 8px;font-size:17px;letter-spacing:-0.01em}
.step p{margin:0;color:var(--muted);line-height:1.6}
.steps .reveal:nth-child(2){transition-delay:.08s}
.steps .reveal:nth-child(3){transition-delay:.16s}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* --- живая проверка --- */

.try{display:grid;grid-template-columns:1fr 260px;gap:22px}
.try__qr{display:flex;flex-direction:column;align-items:center}
.qrbox{width:220px;height:220px;border:1px solid var(--line);border-radius:14px;
       background:#fff;display:grid;place-items:center;overflow:hidden;padding:10px}
.qrbox svg{width:100%;height:100%}
@media (max-width:720px){.try{grid-template-columns:1fr}.try__qr{order:-1}}

/* Пока ждём оплату - спокойное дыхание, а не мигание. */
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;
       background:var(--accent);margin-right:7px;vertical-align:middle;
       animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

/* --- код --- */

.dl{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.code{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-soft)}
.code__head{display:flex;justify-content:space-between;align-items:center;gap:12px;
            padding:10px 14px;border-bottom:1px solid var(--line);
            color:var(--muted);font-weight:600;font-size:13px}
.code__body{margin:0;padding:16px;overflow-x:auto;font-size:13px;line-height:1.65}
.code__body code{font-family:var(--font-mono);white-space:pre}

.warn{margin-top:20px;border:1px solid var(--accent);border-radius:14px;padding:20px;
      background:var(--accent-weak)}
.warn__h{margin:0 0 10px;font-size:17px}
.warn p{margin:0 0 10px;line-height:1.6}
.warn p:last-child{margin-bottom:0}

/* --- заметки --- */

.notes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.note{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--bg-soft)}
.note h3{margin:0 0 8px;font-size:16px}
.note p{margin:0;color:var(--muted);line-height:1.6}
.notes .reveal:nth-child(2){transition-delay:.06s}
.notes .reveal:nth-child(3){transition-delay:.12s}
.notes .reveal:nth-child(4){transition-delay:.18s}
@media (max-width:720px){.notes{grid-template-columns:1fr}}

.lead{color:var(--muted);max-width:64ch;line-height:1.7}
.section--soft{background:var(--bg-soft);border-top:1px solid var(--line);
               border-bottom:1px solid var(--line)}