/* ===== Spotik Russia — блог. Общий стиль (тёмная фирменная тема) ===== */
:root{
  --green:#1DB954; --green-bright:#1ED760; --green-deep:#169c46;
  --bg:#0a0a0a; --bg-2:#121212; --bg-3:#181818; --card:#1a1a1a; --card-hover:#242424;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
  --text:#ffffff; --muted:#b3b3b3; --muted-2:#7a7a7a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* header */
.bhead{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.bhead .row{max-width:1080px;margin:0 auto;padding:0 20px;height:62px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em}
.logo img{width:30px;height:30px;border-radius:50%}
.bhead .links{display:flex;gap:22px;align-items:center}
.bhead .links a{color:var(--muted);font-weight:600;font-size:14.5px;transition:color .15s}
.bhead .links a:hover{color:#fff}
.bhead .btn-bot{background:var(--green);color:#000;padding:9px 16px;border-radius:10px;font-weight:800;font-size:14px}
.bhead .btn-bot:hover{background:var(--green-bright)}
@media(max-width:640px){.bhead .links a.nav-hide{display:none}}

/* index hero */
.blog-hero{padding:56px 0 30px;text-align:center}
.blog-hero .kicker{color:var(--green-bright);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.blog-hero h1{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.12}
.blog-hero p{color:var(--muted);font-size:16.5px;margin-top:14px}
@media(max-width:600px){.blog-hero h1{font-size:29px}}

/* article cards (index) */
.cards{display:flex;flex-direction:column;gap:16px;padding:20px 0 40px}
.pcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px;transition:.18s}
.pcard:hover{background:var(--card-hover);border-color:var(--line-2);transform:translateY(-3px)}
.pcard .tag{display:inline-block;font-size:12px;font-weight:700;color:var(--green-bright);background:rgba(29,185,84,.13);padding:4px 11px;border-radius:999px;margin-bottom:12px}
.pcard h2{font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.pcard p{color:var(--muted);font-size:15px;margin-top:9px}
.pcard .more{color:var(--green-bright);font-weight:700;font-size:14.5px;margin-top:14px;display:inline-block}

/* breadcrumbs */
.crumbs{font-size:13.5px;color:var(--muted-2);padding:26px 0 0;font-weight:600}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:#fff}

/* article */
article{padding:14px 0 40px}
article h1{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:14px 0 12px}
article .meta{color:var(--muted-2);font-size:14px;font-weight:600;margin-bottom:26px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
article .lead{font-size:18px;color:#dcdcdc;line-height:1.7;margin-bottom:24px}
.content{font-size:16.5px;line-height:1.75;color:#e6e6e6}
.content > p{margin:0 0 18px}
.content h2{font-size:23px;font-weight:800;letter-spacing:-.01em;margin:34px 0 13px;line-height:1.25}
.content h3{font-size:18.5px;font-weight:700;margin:26px 0 10px}
.content ul,.content ol{margin:0 0 18px;padding-left:22px}
.content li{margin-bottom:9px}
.content a{color:var(--green-bright);font-weight:600;border-bottom:1px solid rgba(29,185,84,.35)}
.content a:hover{border-color:var(--green-bright)}
.content strong{color:#fff;font-weight:700}
.content blockquote{border-left:3px solid var(--green);background:var(--bg-3);padding:14px 18px;border-radius:0 10px 10px 0;margin:0 0 20px;color:var(--muted)}
.content table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.content th,.content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.content th{background:var(--bg-3);font-weight:700;color:#fff}
@media(max-width:600px){article h1{font-size:26px}.content{font-size:16px}}

/* CTA box */
.cta{background:linear-gradient(135deg,rgba(29,185,84,.14),rgba(29,185,84,.05));border:1px solid rgba(29,185,84,.3);border-radius:18px;padding:28px 26px;margin:36px 0;text-align:center}
.cta h3{font-size:21px;font-weight:800;margin-bottom:8px;letter-spacing:-.01em}
.cta p{color:var(--muted);font-size:15px;margin-bottom:18px}
.cta a{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#000;font-weight:800;font-size:15.5px;padding:13px 26px;border-radius:12px;transition:.15s}
.cta a:hover{background:var(--green-bright);transform:scale(1.03)}

/* related */
.related{border-top:1px solid var(--line);margin-top:40px;padding-top:26px}
.related h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:700;margin-bottom:16px}
.related a{display:block;color:#fff;font-weight:700;font-size:16px;padding:12px 0;border-bottom:1px solid var(--line);transition:.15s}
.related a:hover{color:var(--green-bright)}
.related a:last-child{border-bottom:none}

/* footer */
.bfoot{border-top:1px solid var(--line);background:var(--bg-2);margin-top:20px}
.bfoot .in{max-width:1080px;margin:0 auto;padding:34px 20px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.bfoot .logo{font-size:16px}.bfoot .logo img{width:26px;height:26px}
.bfoot nav{display:flex;gap:20px;flex-wrap:wrap}
.bfoot nav a{color:var(--muted);font-size:14px;font-weight:600}
.bfoot nav a:hover{color:#fff}
.bfoot .cp{color:var(--muted-2);font-size:12.5px;width:100%;border-top:1px solid var(--line);padding-top:16px}
/* ===== Добавления к /blog/style.css — дописать в конец файла ===== */

/* плашка-тег в шапке статьи (в разметке статей стоит .pcard-tag, стиля не было) */
article .meta .pcard-tag{
  display:inline-block;font-size:12px;font-weight:700;color:var(--green-bright);
  background:rgba(29,185,84,.13);padding:4px 11px;border-radius:999px;letter-spacing:0;
}

/* блок «Коротко» */
.content .tldr{
  background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:0 14px 14px 0;padding:20px 22px;margin:0 0 26px;
}
.content .tldr h4{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--green-bright);font-weight:800;margin-bottom:12px;
}
.content .tldr ul{margin:0;padding-left:20px}
.content .tldr li{margin-bottom:7px;color:#dcdcdc;font-size:15.5px}
.content .tldr li:last-child{margin-bottom:0}

/* инлайн-код (DNS-адреса) */
.content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:var(--bg-3);border:1px solid var(--line);
  color:var(--green-bright);padding:2px 7px;border-radius:6px;
}

/* аккордеон «Частые вопросы» (микроразметка FAQPage) */
.content .faq{margin:0 0 22px}
.content details{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:0 18px;margin:0 0 10px;transition:border-color .15s;
}
.content details:hover{border-color:var(--line-2)}
.content details[open]{background:var(--bg-3)}
.content summary{
  cursor:pointer;list-style:none;font-weight:700;font-size:16px;color:#fff;
  padding:15px 26px 15px 0;position:relative;
}
.content summary::-webkit-details-marker{display:none}
.content summary::after{
  content:'';position:absolute;right:2px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;
}
.content details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.content details[open] summary{color:var(--green-bright)}
.content details p{color:var(--muted);font-size:15.5px;padding:0 0 16px;margin:0}