/* Общий стиль страниц статей сервиса «Ботбанкрот». Маркетолог: этот файл НЕ трогать —
   новая статья = копия _template.html с новым текстом, стили подтянутся сами. */
:root{ --ink:#182535; --muted:#66748c; --line:#e8ecf4; --accent:#004075; --accentD:#00335e;
  --brandsoft:#e4ecff; --grad:linear-gradient(135deg,#004075,#749cff);
  --sh:0 14px 40px rgba(2,20,35,.08); --r:18px; }
*{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);
  background:linear-gradient(180deg,#ffffff,#e0e8ff) fixed;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}b{font-weight:800}

.top{background:#fff;border-bottom:1px solid #e7ebf3;position:sticky;top:0;z-index:40}
.top-in{display:flex;align-items:center;gap:22px;padding:12px 22px;max-width:1000px;margin:0 auto}
.logo a{display:flex;align-items:center;gap:10px}
.logo img{height:38px;display:block}
.top nav{display:flex;gap:22px;margin-left:10px;flex:1}
.top nav a{color:#33405a;font-size:14.5px;font-weight:600}.top nav a:hover{color:var(--accent)}
/* Мобильная шапка: nav переносится на отдельную строку под лого — все кнопки остаются доступны */
@media(max-width:820px){.top-in{flex-wrap:wrap;gap:10px 14px}.top nav{margin-left:0;flex:1 0 100%;gap:16px;flex-wrap:wrap}}
@media(max-width:640px){.top nav a{font-size:13px}}

.wrap{max-width:1000px;margin:0 auto;padding:26px 22px 40px}
.crumb{display:inline-block;color:var(--accent);font-size:13.5px;font-weight:700;margin-bottom:14px}
.crumb:hover{text-decoration:underline}

.art{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px;box-shadow:var(--sh)}
@media(max-width:640px){.art{padding:22px 18px}}
.art .meta{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.art .tagb{display:inline-block;background:var(--brandsoft);color:var(--accentD);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.art .date{color:var(--muted);font-size:13px;font-weight:600}
.art h1{font-size:28px;line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}
@media(max-width:640px){.art h1{font-size:22px}}
.art .lead{font-size:15.5px;color:var(--muted);line-height:1.6;margin:0 0 8px}
.art .body{font-size:14.5px;line-height:1.7;color:#25334a}
.art .body h2{font-size:19px;letter-spacing:-.01em;margin:26px 0 8px;color:var(--ink)}
.art .body h3{font-size:15.5px;margin:18px 0 6px;color:var(--ink)}
.art .body p{margin:0 0 12px}
.art .body ul,.art .body ol{margin:0 0 12px;padding-left:22px}
.art .body li{margin-bottom:7px}
.art .body li b{color:var(--ink)}
.art .body .hlbox{background:#f2f6ff;border:1px solid #c9d8f5;border-radius:12px;padding:14px 16px;margin:14px 0}

.cta{margin-top:18px;border-radius:var(--r);padding:24px 26px;color:#fff;box-shadow:var(--sh);
  background:radial-gradient(500px 240px at 88% -10%,rgba(255,255,255,.14),transparent 60%),var(--grad)}
.cta b{font-size:17px}
.cta p{margin:7px 0 14px;font-size:13.5px;color:#dbe7ff;line-height:1.55;max-width:640px}
.cta .btn{display:inline-block;background:#fff;color:var(--accent);font-weight:800;font-size:14px;border-radius:26px;padding:11px 24px}
.cta .btn:hover{filter:brightness(.96)}

.note{margin-top:16px;background:#fff8e9;border:1px solid #f0dfb5;border-radius:14px;padding:14px 18px;color:#6b5518;font-size:12.5px;line-height:1.6}

footer.f{background:#0f1c2b;color:#9fb0c6;padding:24px 22px;font-size:12.5px;line-height:1.6}
footer.f .in{max-width:1000px;margin:0 auto}

/* сетка карточек на странице «Все статьи» (тот же вид, что на главной) */
.ahero{background:radial-gradient(560px 260px at 90% -10%,rgba(0,64,117,.10),transparent 60%),linear-gradient(180deg,#f2f6ff,#fff);
  border:1px solid #c9d8f5;border-radius:var(--r);padding:30px 34px;box-shadow:var(--sh);margin-bottom:20px}
.ahero .badge{display:inline-block;background:var(--brandsoft);color:var(--accentD);font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px;margin-bottom:12px}
.ahero h1{font-size:27px;line-height:1.16;letter-spacing:-.02em;margin:0 0 8px}.ahero h1 b{color:var(--accent)}
.ahero p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0;max-width:680px}
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.agrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.agrid{grid-template-columns:1fr}}
.acard{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;transition:.15s;display:flex;flex-direction:column;gap:7px;box-shadow:var(--sh)}
.acard:hover{transform:translateY(-2px)}
.acard .ndate{font-size:11.5px;color:var(--muted);font-weight:600}
.acard h3{margin:0;font-size:15px;line-height:1.3;color:var(--ink)}
.acard p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.acard .nmore{font-size:12.5px;color:var(--accent);font-weight:700;margin-top:auto}