/* KOSMO DOM — стили SEO-описаний категорий (kd-cat)
   Подключается из category.description.html один раз на страницу.
   Обёртка в админке: <div class="kd-cat">…</div>
   Алиасы .kd-epil / .kd-brash — для уже опубликованных описаний. */

.kd-cat,.kd-epil,.kd-brash{
  --navy:#16335c;--primary:#2c5aa0;--primary2:#4a90e2;--accent:#13b6c9;
  --ink:#1f2733;--muted:#5b6577;--line:#e7edf4;--bg:#f5f9fd;--white:#fff;
  --ok:#0d7a5c;--warn:#b45309;
  --r:16px;--sh:0 6px 24px rgba(22,51,92,.07);--sh2:0 14px 38px rgba(22,51,92,.13);
  font-family:Inter,'Segoe UI',system-ui,Arial,sans-serif;color:var(--ink);line-height:1.65;
  -webkit-font-smoothing:antialiased;max-width:1180px;margin:0 auto;
}
.kd-cat *,.kd-epil *,.kd-brash *{box-sizing:border-box;}
.kd-cat h2,.kd-cat h3,.kd-epil h2,.kd-epil h3,.kd-brash h2,.kd-brash h3{color:var(--navy);line-height:1.25;margin:0;}
.kd-cat p,.kd-epil p,.kd-brash p{margin:0 0 14px;color:var(--muted);}
.kd-cat a,.kd-epil a,.kd-brash a{color:var(--primary);text-decoration:none;border-bottom:1px solid rgba(44,90,160,.3);transition:.2s;}
.kd-cat a:hover,.kd-epil a:hover,.kd-brash a:hover{color:var(--navy);border-color:var(--navy);}
.kd-cat section,.kd-epil section,.kd-brash section{padding:44px 22px;}
.kd-cat .lead,.kd-epil .lead,.kd-brash .lead{font-size:1.02rem;}
.kd-cat .lead-center,.kd-epil .lead-center,.kd-brash .lead-center{max-width:900px;margin:0 auto;text-align:center;}
.kd-cat .sec-bg,.kd-epil .sec-bg,.kd-brash .sec-bg{background:var(--bg);border-radius:22px;}

/* HERO */
.kd-cat .hero,.kd-epil .hero,.kd-brash .hero{background:linear-gradient(135deg,#eef5fc 0%,#f7fbff 60%,#fff 100%);
  border:1px solid var(--line);border-radius:22px;padding:48px 30px;text-align:center;margin:8px 0 0;}
.kd-cat .hero .tag,.kd-epil .hero .tag,.kd-brash .hero .tag{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;
  color:var(--primary);background:rgba(44,90,160,.08);padding:6px 14px;border-radius:999px;margin-bottom:18px;letter-spacing:.02em;}
.kd-cat .hero h1,.kd-cat .hero h2,.kd-epil .hero h1,.kd-epil .hero h2,.kd-brash .hero h1,.kd-brash .hero h2{
  font-size:2.1rem;font-weight:700;color:var(--navy);margin:0 0 14px;line-height:1.18;}
.kd-cat .hero .sub,.kd-epil .hero .sub,.kd-brash .hero .sub{font-size:1.08rem;color:var(--muted);max-width:820px;margin:0 auto 8px;}
.kd-cat .stats,.kd-epil .stats,.kd-brash .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
.kd-cat .stat,.kd-epil .stat,.kd-brash .stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 14px;box-shadow:var(--sh);}
.kd-cat .stat b,.kd-epil .stat b,.kd-brash .stat b{display:block;font-size:1.9rem;font-weight:700;
  background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.kd-cat .stat span,.kd-epil .stat span,.kd-brash .stat span{display:block;font-size:.84rem;color:var(--muted);margin-top:6px;}

/* HEADINGS */
.kd-cat .h-wrap,.kd-epil .h-wrap,.kd-brash .h-wrap{text-align:center;max-width:780px;margin:0 auto 30px;}
.kd-cat .h-wrap h2,.kd-epil .h-wrap h2,.kd-brash .h-wrap h2{font-size:1.7rem;font-weight:700;margin-bottom:10px;}
.kd-cat .h-wrap .desc,.kd-epil .h-wrap .desc,.kd-brash .h-wrap .desc{color:var(--muted);}

/* TABLE */
.kd-cat .tbl-wrap,.kd-epil .tbl-wrap,.kd-brash .tbl-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--sh);border:1px solid var(--line);}
.kd-cat table,.kd-epil table,.kd-brash table{width:100%;border-collapse:collapse;background:var(--white);min-width:640px;}
.kd-cat th,.kd-cat td,.kd-epil th,.kd-epil td,.kd-brash th,.kd-brash td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.94rem;}
.kd-cat thead th,.kd-epil thead th,.kd-brash thead th{background:var(--navy);color:#fff;font-weight:600;}
.kd-cat th:first-child,.kd-cat td:first-child,.kd-epil th:first-child,.kd-epil td:first-child,.kd-brash th:first-child,.kd-brash td:first-child{font-weight:600;color:var(--ink);}
.kd-cat tbody tr:nth-child(even),.kd-epil tbody tr:nth-child(even),.kd-brash tbody tr:nth-child(even){background:#f8fbfe;}
.kd-cat tbody tr:last-child td,.kd-epil tbody tr:last-child td,.kd-brash tbody tr:last-child td{border-bottom:none;}
.kd-cat .hl,.kd-epil .hl,.kd-brash .hl{color:var(--primary);font-weight:600;}

/* GRID & CARDS */
.kd-cat .grid,.kd-epil .grid,.kd-brash .grid{display:grid;gap:18px;}
.kd-cat .g2,.kd-epil .g2,.kd-brash .g2{grid-template-columns:repeat(2,1fr);}
.kd-cat .g3,.kd-epil .g3,.kd-brash .g3{grid-template-columns:repeat(3,1fr);}
.kd-cat .g-tech,.kd-epil .g-tech,.kd-brash .g-tech{grid-template-columns:repeat(5,1fr);align-items:stretch;}
.kd-cat .card,.kd-epil .card,.kd-brash .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;
  box-shadow:var(--sh);transition:transform .2s ease,box-shadow .2s ease;height:100%;display:flex;flex-direction:column;}
.kd-cat .card:hover,.kd-epil .card:hover,.kd-brash .card:hover{transform:translateY(-4px);box-shadow:var(--sh2);}
.kd-cat .card-ok,.kd-epil .card-ok,.kd-brash .card-ok{border-top:3px solid var(--ok);}
.kd-cat .card-warn,.kd-epil .card-warn,.kd-brash .card-warn{border-top:3px solid var(--warn);}
.kd-cat .card-link,.kd-epil .card-link,.kd-brash .card-link{display:flex;flex-direction:column;flex:1;height:100%;color:inherit;border:none;}
.kd-cat .card-link:hover,.kd-epil .card-link:hover,.kd-brash .card-link:hover{color:inherit;border:none;}
.kd-cat .ic,.kd-epil .ic,.kd-brash .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(44,90,160,.12),rgba(19,182,201,.14));color:var(--primary);}
.kd-cat .ic svg,.kd-epil .ic svg,.kd-brash .ic svg{width:24px;height:24px;}
.kd-cat .g-tech .card h3,.kd-epil .g-tech .card h3,.kd-brash .g-tech .card h3{font-size:1.05rem;font-weight:600;margin-bottom:8px;min-height:2.6em;line-height:1.3;}
.kd-cat .card h3,.kd-epil .card h3,.kd-brash .card h3{font-size:1.05rem;font-weight:600;margin-bottom:8px;}
.kd-cat .g-tech .card p,.kd-epil .g-tech .card p,.kd-brash .g-tech .card p{margin:0;font-size:.9rem;line-height:1.55;flex:1;}
.kd-cat .card p,.kd-epil .card p,.kd-brash .card p{margin:0;font-size:.9rem;line-height:1.55;flex:1;}
.kd-cat .g-tech .card .go,.kd-epil .g-tech .card .go,.kd-brash .g-tech .card .go{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:16px;font-size:.84rem;font-weight:600;color:var(--primary);border:none;}
.kd-cat .card .go,.kd-epil .card .go,.kd-brash .card .go{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:.84rem;font-weight:600;color:var(--primary);border:none;}

/* STEPS */
.kd-cat .steps,.kd-epil .steps,.kd-brash .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.kd-cat .step,.kd-epil .step,.kd-brash .step{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px 18px;box-shadow:var(--sh);}
.kd-cat .step .num,.kd-epil .step .num,.kd-brash .step .num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:700;font-size:.9rem;margin-bottom:12px;}
.kd-cat .step b,.kd-epil .step b,.kd-brash .step b{display:block;color:var(--ink);margin-bottom:6px;font-size:.95rem;}
.kd-cat .step span,.kd-epil .step span,.kd-brash .step span{color:var(--muted);font-size:.88rem;line-height:1.5;}

/* PILLS */
.kd-cat .pill-row,.kd-epil .pill-row,.kd-brash .pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px;}
.kd-cat .pill,.kd-epil .pill,.kd-brash .pill{font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:999px;background:rgba(44,90,160,.08);color:var(--primary);border:1px solid rgba(44,90,160,.12);}

/* CHECKS */
.kd-cat .checks,.kd-epil .checks,.kd-brash .checks{display:grid;gap:12px;max-width:860px;margin:0 auto;}
.kd-cat .chk,.kd-epil .chk,.kd-brash .chk{display:flex;gap:13px;align-items:flex-start;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;box-shadow:var(--sh);}
.kd-cat .chk svg,.kd-epil .chk svg,.kd-brash .chk svg{flex-shrink:0;width:22px;height:22px;color:var(--accent);margin-top:2px;}
.kd-cat .chk b,.kd-epil .chk b,.kd-brash .chk b{color:var(--ink);}
.kd-cat .chk span,.kd-epil .chk span,.kd-brash .chk span{color:var(--muted);}

/* NOTES */
.kd-cat .note,.kd-epil .note,.kd-brash .note{background:#fff8ec;border:1px solid #f3e2c0;border-left:4px solid #e0a33a;border-radius:12px;
  padding:16px 18px;color:#6b5526;font-size:.92rem;max-width:900px;margin:24px auto 0;}
.kd-cat .note-ok,.kd-epil .note-ok,.kd-brash .note-ok{background:#ecfdf5;border-color:#a7f3d0;border-left-color:var(--ok);color:#065f46;}
.kd-cat .note-warn,.kd-epil .note-warn,.kd-brash .note-warn{background:#fff7ed;border-color:#fed7aa;border-left-color:var(--warn);color:#7c2d12;}

/* FAQ */
.kd-cat .faq,.kd-epil .faq,.kd-brash .faq{max-width:880px;margin:0 auto;display:grid;gap:12px;}
.kd-cat details,.kd-epil details,.kd-brash details{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);overflow:hidden;}
.kd-cat summary,.kd-epil summary,.kd-brash summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:1.02rem;}
.kd-cat summary::-webkit-details-marker,.kd-epil summary::-webkit-details-marker,.kd-brash summary::-webkit-details-marker{display:none;}
.kd-cat summary .pl,.kd-epil summary .pl,.kd-brash summary .pl{flex-shrink:0;width:22px;height:22px;position:relative;}
.kd-cat summary .pl::before,.kd-cat summary .pl::after,.kd-epil summary .pl::before,.kd-epil summary .pl::after,.kd-brash summary .pl::before,.kd-brash summary .pl::after{
  content:"";position:absolute;background:var(--primary);border-radius:2px;}
.kd-cat summary .pl::before,.kd-epil summary .pl::before,.kd-brash summary .pl::before{top:10px;left:3px;right:3px;height:2px;}
.kd-cat summary .pl::after,.kd-epil summary .pl::after,.kd-brash summary .pl::after{left:10px;top:3px;bottom:3px;width:2px;transition:transform .25s;}
.kd-cat details[open] summary .pl::after,.kd-epil details[open] summary .pl::after,.kd-brash details[open] summary .pl::after{transform:scaleY(0);}
.kd-cat details .ans,.kd-epil details .ans,.kd-brash details .ans{padding:0 20px 18px;color:var(--muted);}

/* CTA */
.kd-cat .cta,.kd-epil .cta,.kd-brash .cta{background:linear-gradient(135deg,var(--navy),var(--primary));border-radius:22px;padding:44px 28px;text-align:center;color:#fff;}
.kd-cat .cta h2,.kd-epil .cta h2,.kd-brash .cta h2{color:#fff;font-size:1.6rem;margin-bottom:10px;}
.kd-cat .cta p,.kd-epil .cta p,.kd-brash .cta p{color:rgba(255,255,255,.86);max-width:620px;margin:0 auto 24px;}
.kd-cat .btn,.kd-epil .btn,.kd-brash .btn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--navy);
  font-weight:600;padding:15px 34px;border-radius:12px;border:none;font-size:1rem;transition:transform .2s,box-shadow .2s;}
.kd-cat .btn:hover,.kd-epil .btn:hover,.kd-brash .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22);color:var(--navy);border:none;}
.kd-cat .btn svg,.kd-epil .btn svg,.kd-brash .btn svg{width:18px;height:18px;}
.kd-cat :focus-visible,.kd-epil :focus-visible,.kd-brash :focus-visible{outline:3px solid var(--primary2);outline-offset:2px;border-radius:6px;}

@media(max-width:1100px){
  .kd-cat .g-tech,.kd-epil .g-tech,.kd-brash .g-tech{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .kd-cat .g2,.kd-cat .g3,.kd-cat .g-tech,.kd-cat .steps,.kd-cat .stats,
  .kd-epil .g2,.kd-epil .g3,.kd-epil .g-tech,.kd-epil .steps,.kd-epil .stats,
  .kd-brash .g2,.kd-brash .g3,.kd-brash .g-tech,.kd-brash .steps,.kd-brash .stats{grid-template-columns:1fr;}
  .kd-cat .hero h1,.kd-cat .hero h2,.kd-epil .hero h1,.kd-epil .hero h2,.kd-brash .hero h1,.kd-brash .hero h2{font-size:1.65rem;}
  .kd-cat section,.kd-epil section,.kd-brash section{padding:34px 16px;}
  .kd-cat .hero,.kd-epil .hero,.kd-brash .hero{padding:34px 18px;}
}
@media(prefers-reduced-motion:reduce){
  .kd-cat *,.kd-epil *,.kd-brash *{transition:none!important;}
}