/* ═══════════════════════════════════════════════════════════════════════
   Оформление обзорной страницы.

   Те же цвета, что у самой панели: человек, открыв страницу с телефона,
   должен узнать инструмент, а не гадать, туда ли попал. Тёмная тема — не
   ради моды: панель открывают ночью, и светлый экран в темноте слепит.

   Ни одного внешнего шрифта и ни одной библиотеки: страница должна
   открываться мгновенно даже на слабой связи.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0e131d; --surface:#151c2a; --border:#28324a;
  --ink:#e8edf7; --muted:#8d98b0; --accent:#5b93ff; --ok:#3ddc84;
  --violet:#a78bfa;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:900px;margin:0 auto;padding:0 18px}
a{color:var(--accent)}

/* ── шапка ─────────────────────────────────────────────────────────── */
.top{padding:44px 0 30px;border-bottom:1px solid var(--border);
     background:linear-gradient(180deg,#121a28,var(--bg))}
.brand{font:700 30px/1 system-ui,sans-serif;letter-spacing:.06em}
.brand span{font-size:14px;color:var(--muted);margin-left:9px;letter-spacing:.1em}
.lede{font-size:19px;color:var(--ink);max-width:680px;margin:16px 0 0}

/* Три цифры под заголовком. Цифра сверху, объяснение снизу — так их
   читают за секунду, не вчитываясь. */
.facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:24px}
.facts div{min-width:120px}
.facts b{display:block;font-size:30px;line-height:1.1;color:var(--ok)}
.facts span{font-size:13.5px;color:var(--muted)}

/* ── разделы ───────────────────────────────────────────────────────── */
main{padding:10px 0 30px}
section{padding:34px 0;border-bottom:1px solid var(--border)}
section:last-child{border-bottom:0}
h2{font-size:23px;margin:0 0 12px;line-height:1.25}
p{margin:0 0 12px;color:#cfd7e8}
b{color:var(--ink)}

/* Снимок экрана — главное содержимое страницы, поэтому во всю ширину
   и с подписью: без подписи непонятно, настоящий это экран или картинка. */
figure{margin:18px 0 0}
figure img{width:100%;display:block;border:1px solid var(--border);
     border-radius:12px;background:#0a0e16}
figcaption{margin-top:8px;font-size:13.5px;color:var(--muted)}

/* ── адреса ────────────────────────────────────────────────────────── */
.links ul{list-style:none;padding:0;margin:0;display:flex;
     flex-direction:column;gap:12px}
.links li{background:var(--surface);border:1px solid var(--border);
     border-radius:12px;padding:14px 16px;font-size:16px;color:#cfd7e8}
.links li b{color:var(--violet)}

footer{padding:26px 0 46px;color:var(--muted);font-size:14px}

@media (max-width:560px){
  body{font-size:16px}
  .lede{font-size:17px}
  h2{font-size:20px}
  .facts{gap:18px}
  .facts b{font-size:25px}
}