/* 💸 Донаты SaSiTe — главная (о сервисе + вход). Токены и компоненты — base.css. Телефон — в конце файла. */

.page-landing { background:
  radial-gradient(900px 420px at 85% -80px, var(--accent-soft), transparent 70%),
  radial-gradient(700px 360px at -10% 120px, var(--blue-soft), transparent 70%), var(--bg); background-repeat:no-repeat; }
.page-landing .bar { background:color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.land { max-width:1080px; }
.page-landing .bar-in { max-width:1080px; }

/* первый экран: текст слева, вход справа */
.hero { display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:40px; align-items:start; padding:28px 0 12px; }
.hero-kicker { margin-bottom:14px; }
.hero-title { font-size:40px; line-height:1.12; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance; }
.hero-title .hl { color:var(--accent); }
.lead { font-size:17px; line-height:1.55; color:var(--text2); max-width:560px; margin:0 0 20px; }
.pros { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px; max-width:560px; }
.pros li { display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.5; }
.pro-i { width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--card); border:1px solid var(--line); font-size:17px; }
.pros b { font-weight:600; }
.nets { display:grid; gap:8px; }
.nets-row { position:relative; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding-left:100px; }
.nets-k { position:absolute; left:0; top:5px; font-size:12px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.04em; }
.nets .chip { background:var(--card); border:1px solid var(--line); }
.nets .chip.more { color:var(--text2); }

/* карточка входа: постоянная высота — виды не прыгают */
.auth { position:relative; min-height:452px; padding:22px; border-radius:20px; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 40px -18px rgba(0,0,0,.28); }
.auth-boot { position:absolute; inset:0; display:grid; place-items:center; }
.auth-tabs { margin:-6px -4px 16px; }
.auth-tabs .tab { flex:1; font-size:15px; }
.auth-form .field + .field { margin-top:10px; }
.auth-form .hint.err { min-height:2.9em; margin:6px 0 4px; }
.auth-form .btn.big { margin-top:2px; }
#pkHint { text-align:center; }
.reg-note { margin:12px 0 0; text-align:center; }
#mfaView h2 { font-size:20px; margin-bottom:6px; }
#mfaView .auth-form { margin-top:14px; }
.mfa-back { margin-top:10px; }
.in-view { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding-top:18px; }
.in-view p { margin:0; }
.me-ava { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-text); font-size:30px; font-weight:700; margin-bottom:6px; }
.me-nick { font-size:22px; margin:0 0 10px; overflow-wrap:anywhere; }
.in-view .btn.block { max-width:320px; }

/* шаги и «как устроено» */
.steps, .how { margin-top:44px; }
.steps h2, .how h2 { font-size:22px; margin-bottom:16px; }
.steps-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; counter-reset:none; }
.steps-list li { display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; }
.steps-list b { display:block; font-size:15px; margin:4px 0 4px; }
.steps-list p { margin:0; color:var(--text2); font-size:13.5px; line-height:1.5; }
.step-n { width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:700; }
.how-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.how-grid .card + .card { margin-top:0; }
.how-c p { margin:0; font-size:13.5px; line-height:1.5; }

.foot { border-top:1px solid var(--line); margin-top:40px; }
.foot-in { max-width:1080px; margin:0 auto; padding:18px 16px 28px; display:flex; justify-content:space-between; gap:12px; color:var(--text2); font-size:13px; }

@media (max-width:980px) {
  .hero { grid-template-columns:minmax(0, 1fr) 360px; gap:24px; }
  .hero-title { font-size:34px; }
}
@media (max-width:760px) {
  .hero { grid-template-columns:minmax(0, 1fr); gap:22px; padding:8px 0 4px; }
  .hero-title { font-size:28px; }
  .lead { font-size:15.5px; margin-bottom:16px; }
  .pros { gap:10px; margin-bottom:18px; }
  .pros li { font-size:14px; }
  .nets-row { padding-left:0; }
  .nets-k { position:static; width:100%; }
  .auth { min-height:452px; padding:18px 16px; border-radius:18px; }
  .steps, .how { margin-top:32px; }
  .steps h2, .how h2 { font-size:19px; }
  .steps-list, .how-grid { grid-template-columns:minmax(0, 1fr); gap:10px; }
  .foot-in { flex-direction:column; padding:16px 12px 24px; }
}