/* Оформление публичного сайта (hello.…): главная, тарифы, поддержка,
 * документы, страница установки профиля и возврата после оплаты.
 *
 * Вид — как у Mini App: тёмный фон с космосом, золото щита, карточки со
 * скруглением 16px. Светлая тема остаётся для тех, у кого светлая система:
 * сайт открывают и проверяющие банка, и люди из обычного браузера.
 *
 * Акцент в трёх ролях, путать их нельзя: `--accent` — заливка кнопки,
 * `--on-accent` — текст на ней, `--accent-ink` — золото как текст и ссылки
 * (на белом оно темнее заливки, иначе не читается).
 */
:root {
  --bg:#f5f7fa; --card:#ffffff; --card-2:#f0f3f7; --fg:#12151a; --muted:#5b6472;
  --line:#e3e7ee; --accent:#d6ae35; --on-accent:#14110a; --accent-ink:#8a6d12;
  --accent-soft:rgba(214,174,53,.14); --accent-line:rgba(214,174,53,.4);
  --ok:#1f8a4c; --warn:#a56a00; --bad:#c23b3b;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
  --head-bg:rgba(245,247,250,.82); --glow:rgba(214,174,53,.18);
  --radius:16px; --radius-sm:12px; --wide:1080px; --narrow:760px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#080d14; --card:rgba(18,28,39,.86); --card-2:#16202c; --fg:#eef2f7; --muted:#93a3b8;
    --line:rgba(255,255,255,.09); --accent-ink:#e3c05a;
    --accent-soft:rgba(214,174,53,.13); --accent-line:rgba(214,174,53,.35);
    --ok:#3fb950; --warn:#e0a33a; --bad:#ef5b6b;
    --shadow:none; --head-bg:rgba(8,13,20,.72); --glow:rgba(214,174,53,.16);
    color-scheme:dark;
  }
  /* Фон как в приложении — отдельным закреплённым слоем, чтобы не уезжал. */
  body::before { content:""; position:fixed; inset:0; z-index:-2;
    background:var(--bg) url("/static/img/bg-space.webp") no-repeat center / cover; opacity:.55; }
}
body::after { content:""; position:fixed; inset:-20vh -20vw auto; height:70vh; z-index:-1;
  background:radial-gradient(closest-side, var(--glow), transparent); pointer-events:none; }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased; }
a { color:var(--accent-ink); }
img { max-width:100%; }

.wrap { max-width:var(--wide); margin:0 auto; padding:0 20px; }
.narrow { max-width:var(--narrow); margin:0 auto; }
main { padding:28px 0 56px; }

/* --- шапка ------------------------------------------------------------- */
.top { position:sticky; top:0; z-index:10; background:var(--head-bg);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:18px; min-height:64px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:18px;
  letter-spacing:-.01em; color:var(--fg); text-decoration:none; flex:none; }
.brand img { width:34px; height:34px; object-fit:contain; }
.top nav { display:flex; gap:4px; flex:1; }
.top nav a { color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:8px 12px; border-radius:10px; white-space:nowrap; }
.top nav a:hover { color:var(--fg); background:var(--card-2); }
.top nav a.on { color:var(--accent-ink); background:var(--accent-soft); }
.top .btn { flex:none; }
@media (max-width:760px) {
  .top .wrap { flex-wrap:wrap; gap:0 12px; padding-top:8px; }
  .brand { flex:1; }
  /* На телефоне меню — второй строкой с прокруткой вбок: четыре пункта в
     одну строку не помещаются, а переносить их в две — съедать экран. */
  .top nav { order:3; flex:1 1 100%; overflow-x:auto; scrollbar-width:none;
    margin:6px -20px 0; padding:0 14px 8px; }
  .top nav::-webkit-scrollbar { display:none; }
}

/* --- кнопки ------------------------------------------------------------ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:12px; background:var(--accent); color:var(--on-accent);
  font-weight:650; font-size:15px; text-decoration:none; border:1px solid transparent;
  transition:filter .15s ease, transform .15s ease; }
.btn:hover { filter:brightness(1.06); }
.btn:active { transform:translateY(1px); }
.btn.ghost { background:transparent; color:var(--fg); border-color:var(--line); }
.btn.ghost:hover { border-color:var(--accent-line); }
.btn.small { padding:8px 14px; font-size:14px; border-radius:10px; }
.btn svg { width:18px; height:18px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
@media (max-width:560px) { .actions .btn { flex:1 1 100%; } }
/* Кнопка во всю ширину карточки — на странице установки: там одна кнопка
   на шаг, и попасть в неё должно быть легко. */
.btn.block { display:flex; width:100%; margin-top:14px; }
.btn.block + .btn.block { margin-top:8px; }

/* --- текст ------------------------------------------------------------- */
h1 { font-size:clamp(26px, 5.2vw, 40px); line-height:1.15; letter-spacing:-.025em; margin:0 0 14px; }
h2 { font-size:clamp(20px, 3.4vw, 26px); line-height:1.25; letter-spacing:-.02em; margin:0 0 12px; }
h3 { font-size:17px; margin:0 0 6px; letter-spacing:-.01em; }
p { margin:0 0 12px; }
ul, ol { margin:0 0 12px; padding-left:22px; }
li { margin-bottom:6px; }
.lead { color:var(--muted); font-size:clamp(16px, 2.2vw, 18px); margin-bottom:18px; }
.muted { color:var(--muted); font-size:14px; }
.eyebrow { display:inline-block; color:var(--accent-ink); background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:99px; padding:4px 12px; font-size:13px;
  font-weight:600; margin-bottom:14px; }
section { margin-top:56px; }
section > h2 { margin-bottom:18px; }

/* --- карточки ---------------------------------------------------------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); margin:16px 0; }
.card > :last-child { margin-bottom:0; }
.card h2, .card h3 { margin-top:0; }
.grid { display:grid; gap:14px; }
.grid.three { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.grid.two { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.grid > .card { margin:0; }
.ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-ink);
  margin-bottom:14px; }
.ico svg { width:22px; height:22px; }

/* --- главный экран ----------------------------------------------------- */
.hero { display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:center;
  padding-top:18px; }
.hero .logo { display:flex; justify-content:center; }
.hero .logo img { width:min(340px, 70vw); height:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.35)); }
@media (max-width:760px) {
  .hero { grid-template-columns:1fr; gap:8px; padding-top:0; }
  .hero .logo { order:-1; }
  .hero .logo img { width:min(200px, 52vw); }
}

/* Шаги: номер в круге, заголовок, пояснение. */
.steps { counter-reset:step; }
.steps > .card { position:relative; padding-top:22px; }
.num { width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); font-weight:700; font-size:15px;
  margin-bottom:12px; }

.band { text-align:center; padding:34px 24px; background:linear-gradient(135deg,
  var(--accent-soft), transparent 70%), var(--card); }
.band .actions { justify-content:center; }

/* --- тарифы ------------------------------------------------------------ */
.group { margin-top:34px; }
.group > h2 { display:flex; align-items:center; gap:10px; }
.plans { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.plan { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); position:relative; display:flex; flex-direction:column; }
.plan.hot { border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line), var(--shadow); }
.plan-title { font-weight:650; font-size:15.5px; margin-bottom:12px; padding-right:74px; }
.plan-price { font-size:30px; font-weight:750; letter-spacing:-.03em; line-height:1.1; }
.plan-price s { font-size:15px; font-weight:400; color:var(--muted); margin-left:8px; letter-spacing:0; }
.plan-month { color:var(--muted); font-size:13.5px; margin-top:4px; }
.plan-meta { color:var(--muted); font-size:13px; margin-top:14px; display:flex; gap:6px; flex-wrap:wrap; }
.plan-meta span { border:1px solid var(--line); border-radius:99px; padding:2px 10px; }
.plan-meta .off { color:var(--ok); border-color:currentColor; }
.plan-desc { color:var(--muted); font-size:13.5px; margin-top:10px; }
.badge { position:absolute; top:16px; right:16px; font-size:11.5px; font-weight:650;
  letter-spacing:.02em; padding:3px 10px; border-radius:99px; background:var(--accent);
  color:var(--on-accent); }
.note { border-left:3px solid var(--accent); }

/* --- документы --------------------------------------------------------- */
.doc { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px, 4vw, 40px); box-shadow:var(--shadow); }
.doc p { margin:0 0 14px; }
.doc h2 { font-size:19px; border-top:1px solid var(--line); padding-top:22px; margin-top:26px; }
.doc h1 + .muted { margin-bottom:22px; }

/* --- состояние (оплата, ссылка недействительна) ------------------------ */
.state { text-align:center; padding-top:18px; }
.state .mark { width:76px; height:76px; border-radius:50%; margin:0 auto 18px;
  display:grid; place-items:center; border:1px solid var(--line); background:var(--card); }
.state .mark svg { width:36px; height:36px; }
.state .mark.ok { color:var(--ok); border-color:currentColor; }
.state .mark.warn { color:var(--warn); border-color:currentColor; }
.state .mark.bad { color:var(--bad); border-color:currentColor; }
.state .card { text-align:left; }

/* --- выбор системы на странице установки ------------------------------- */
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px; }
.tab { padding:8px 14px; border:1px solid var(--line); border-radius:99px; background:var(--card);
  color:var(--muted); text-decoration:none; font-size:14px; white-space:nowrap; }
.tab.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }

/* --- подвал ------------------------------------------------------------ */
footer { border-top:1px solid var(--line); padding:28px 0 40px; color:var(--muted); font-size:14px; }
footer .wrap { display:grid; gap:18px; grid-template-columns:1.2fr 1fr; }
footer p { margin:0 0 6px; }
footer a { color:var(--muted); }
footer a:hover { color:var(--fg); }
footer nav { display:flex; flex-wrap:wrap; gap:6px 18px; align-content:start; }
@media (max-width:640px) { footer .wrap { grid-template-columns:1fr; } }

/* --- телефон ------------------------------------------------------------- */
@media (max-width:560px) {
  /* Четыре пункта меню — в одну строку без прокрутки. */
  .top nav { gap:0; }
  .top nav a { padding:7px 8px; font-size:13.5px; }
  /* Тарифы по два в ряд: одной колонкой девять карточек — три экрана. */
  .plans { grid-template-columns:1fr 1fr; gap:10px; }
  .plan { padding:14px; }
  .plan-title { padding-right:0; font-size:14.5px; margin-bottom:8px; }
  .plan-price { font-size:23px; }
  .plan-price s { display:block; margin:2px 0 0; font-size:13px; }
  .plan-meta { margin-top:10px; }
  .badge { position:static; align-self:flex-start; margin-bottom:8px; order:-1; }
}