/* КомРА — основной стиль */
:root{
  --y:#f2e12e;      /* фирменный жёлтый */
  --y2:#e0cd12;     /* жёлтый темнее */
  --y3:#fbf3a6;     /* жёлтый светлый */
  --k:#141414;      /* чёрный */
  --g1:#c6c6c6;     /* серый фон шапки */
  --g2:#d9d9d9;
  --g3:#efefef;
  --g4:#f7f7f7;
  --t:#222;
  --t2:#555;
  --line:#1b1b1b;
  --w:1000px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--t);font:14px/1.55 Arial,Helvetica,sans-serif}
a{color:#111}
a:hover{color:#000;background:var(--y3)}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:Arial,Helvetica,sans-serif;color:#111;line-height:1.25}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}

/* ---------- Шапка ---------- */
.top{background:#fff;border-bottom:3px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;padding:6px 14px 6px 0;border-right:1px solid #cfcfcf}
.logo:hover{background:none}
.logo svg{width:44px;height:44px;flex:none}
.logo-txt{font:bold 25px/1 Georgia,"Times New Roman",serif;color:#111;letter-spacing:.5px;white-space:nowrap}
.logo-txt b{background:var(--k);color:var(--y);padding:1px 4px 2px;margin-left:1px;border-radius:2px}
.logo-sub{display:block;font:10px/1.2 Arial,sans-serif;color:#777;letter-spacing:.6px;text-transform:uppercase;margin-top:4px}
.top-mid{flex:1;font-size:13px;color:#222;display:flex;align-items:center;gap:10px}
.top-mid .badge{display:inline-block;font:bold 9px/1.1 Arial;color:#5a2d84;text-transform:uppercase;border-left:3px solid var(--y);padding-left:6px}
.top-mail{display:flex;align-items:center;gap:8px;font-size:14px;text-decoration:none;color:#222;padding-left:14px;border-left:1px solid #cfcfcf}
.top-mail .ico{width:34px;height:34px;border-radius:8px;background:#d5d5d5;display:flex;align-items:center;justify-content:center}
.top-mail .ico svg{width:20px;height:20px}

/* ---------- Меню ---------- */
.nav{background:var(--k)}
.nav .wrap{display:flex;align-items:stretch;padding:0 16px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.nav li{position:relative}
.nav a{display:block;color:#fff;text-decoration:none;font:bold 11px/1 Arial;text-transform:uppercase;letter-spacing:.4px;padding:13px 13px}
.nav a:hover,.nav li:hover>a{background:var(--y);color:#111}
.nav a.on{color:var(--y)}
.nav a.on:hover{color:#111}
.nav .sub{display:none;position:absolute;left:0;top:100%;min-width:250px;background:#fff;border:2px solid var(--k);border-top:3px solid var(--y);z-index:30;flex-direction:column}
.nav li:hover .sub{display:flex}
.nav .sub a{color:#111;text-transform:none;font:13px/1.2 Arial;padding:9px 12px;border-bottom:1px solid #e5e5e5;letter-spacing:0}
.nav .sub a:hover{background:var(--y)}
.burger{display:none;background:none;border:0;color:#fff;font:bold 12px Arial;text-transform:uppercase;padding:12px 0;cursor:pointer;letter-spacing:.5px}
.burger span{display:inline-block;width:18px;height:2px;background:var(--y);box-shadow:0 5px 0 var(--y),0 -5px 0 var(--y);vertical-align:middle;margin-right:8px}

/* ---------- Серый блок с точками ---------- */
.dots{background-color:var(--g1);background-image:radial-gradient(rgba(0,0,0,.13) 1px,transparent 1.3px);background-size:5px 5px}
.hero{border-bottom:5px solid var(--line)}
.hero .wrap{display:flex;align-items:center;gap:34px;padding-top:34px;padding-bottom:34px}
.hero-cube{flex:none;width:250px}
.hero-cube>svg{width:100%;height:auto;display:block}
.hero-body{flex:1}
.hero h1,.hero .h1{font-size:25px;margin:0 0 12px;text-align:center;font-weight:bold}
.hero .bar{height:3px;background:var(--line);margin:10px 0 12px}
.hero ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.5}
.hero p{margin:0 0 6px;font-size:15px}
.hero-btns{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Кнопки ---------- */
.btn{display:inline-block;background:var(--y);color:#111;border:2px solid var(--k);font:bold 12px/1 Arial;text-transform:uppercase;letter-spacing:.4px;padding:12px 20px;text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--k)}
.btn:hover{background:var(--k);color:var(--y)}
.btn.dark{background:var(--k);color:var(--y)}
.btn.dark:hover{background:var(--y);color:#111}
.btn.small{padding:8px 13px;font-size:11px;box-shadow:2px 2px 0 var(--k)}

/* ---------- Ленты-стрелки ---------- */
.chev{background:var(--y);clip-path:polygon(0 0,100% 0,100% 52%,50% 100%,0 52%);text-align:center;padding:9px 10px 30px;font:bold 11px/1.2 Arial;text-transform:uppercase;letter-spacing:.3px;color:#111}
.chev.big{font-size:16px;text-transform:none;letter-spacing:0;padding:10px 12px 34px}
.chev.wide{clip-path:polygon(0 0,100% 0,100% 50%,50% 100%,0 50%)}
.chev.dark{background:var(--k);color:var(--y)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:28px 0 20px}
.trio .item{text-align:center}
.trio .item p{margin:10px 6px 0;font-size:14px}
.trio .item a.more{display:inline-block;margin-top:8px;font-size:12px}
.ribbon-sec{padding:14px 0 6px}
.ribbon-sec .val{text-align:center;font:bold 16px Arial;margin:10px 0 18px}
.ribbon-sec .val a{color:#0000c8}

/* ---------- Секции ---------- */
.sec{padding:60px 0}
.sec.g{background:var(--g4);border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3}
.sec.dots{border-top:4px solid var(--line);border-bottom:4px solid var(--line)}
.sec.black{background:var(--k);color:#eee}
.sec.black h2,.sec.black h3{color:var(--y)}
.sec.yellow{background:var(--y);border-top:4px solid var(--line);border-bottom:4px solid var(--line)}
.sec-h{text-align:center;margin:0 0 8px;font-size:24px}
.sec-sub{text-align:center;color:var(--t2);max-width:700px;margin:0 auto 28px;font-size:15px}
.sec-h-line{width:90px;height:4px;background:var(--y);margin:0 auto 14px;border:1px solid var(--k)}
.sec.yellow .sec-h-line{background:var(--k)}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}

.card{background:#fff;border:1px solid #cfcfcf;border-top:4px solid var(--y);padding:18px 18px 16px;position:relative}
.card h3{margin:8px 0 8px;font-size:16px}
.card p{margin:0 0 8px;color:#333}
.card .ic{width:46px;height:46px;background:var(--y);border:2px solid var(--k);display:flex;align-items:center;justify-content:center}
.card .ic svg{width:26px;height:26px}
.card a.more{font-size:12px;font-weight:bold;text-transform:uppercase}
.card.k{background:var(--k);color:#ddd;border-color:#000}
.card.k h3{color:var(--y)}

.steps{counter-reset:st;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border:2px solid var(--k);padding:0 16px 16px;position:relative}
.step:before{counter-increment:st;content:counter(st);display:block;width:56px;margin:0 auto 10px;background:var(--y);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);font:bold 20px/1 Arial;text-align:center;padding:8px 0 18px;border:0}
.step h3{margin:0 0 6px;font-size:15px;text-align:center}
.step p{margin:0;font-size:13.5px;color:#333}

.price{background:#fff;border:2px solid var(--k);text-align:center;display:flex;flex-direction:column}
.price .chev{margin:-2px -2px 0}
.price .sum{font:bold 26px Arial;margin:12px 0 2px}
.price .sum small{font-size:13px;font-weight:normal;color:#666}
.price ul{list-style:none;margin:10px 0 16px;padding:0 18px;text-align:left;flex:1}
.price li{padding:6px 0 6px 20px;border-bottom:1px dashed #ccc;position:relative;font-size:13.5px}
.price li:before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;background:var(--y);border:1px solid var(--k)}
.price .btn{margin:0 18px 18px}

.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.tbl th{background:var(--k);color:var(--y);text-align:left;padding:10px;font-size:12px;text-transform:uppercase}
.tbl td{border-bottom:1px solid #ddd;padding:9px 10px;vertical-align:top}
.tbl tr:nth-child(even) td{background:#fafafa}

.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-left:2px solid var(--k);border-top:2px solid var(--k)}
.tile{border-right:2px solid var(--k);border-bottom:2px solid var(--k);padding:18px 12px;text-align:center;background:#fff;text-decoration:none;color:#111}
.tile:hover{background:var(--y)}
.tile svg{width:34px;height:34px;display:block;margin:0 auto 8px}
.tile b{display:block;font-size:13px}
.tile span{display:block;font-size:12px;color:#555;margin-top:4px}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{border:2px solid var(--k);background:#fff;padding:6px 12px;font:bold 12px Arial}
.chip:nth-child(3n){background:var(--y)}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.checks{list-style:none;margin:0;padding:0}
.checks li{padding:7px 0 7px 30px;position:relative}
.checks li:before{content:"";position:absolute;left:0;top:9px;width:16px;height:16px;background:var(--y);border:2px solid var(--k)}
.checks li:after{content:"";position:absolute;left:6px;top:11px;width:4px;height:8px;border:solid var(--k);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sec.black .checks li:before{border-color:var(--y)}

.seo-text{background:#fff;border:2px solid var(--k);padding:28px 34px;columns:2;column-gap:38px;font-size:14.5px}
.seo-text h3{column-span:all;margin-top:0;font-size:18px}
.seo-text p{margin:0 0 12px;break-inside:avoid-column}
.seo-text a{font-weight:bold;color:#000;border-bottom:2px solid var(--y);text-decoration:none}

.faq details{background:#fff;border:2px solid var(--k);margin-bottom:10px}
.faq summary{cursor:pointer;padding:13px 44px 13px 16px;font-weight:bold;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:0;bottom:0;width:40px;background:var(--y);border-left:2px solid var(--k);display:flex;align-items:center;justify-content:center;font-size:20px}
.faq details[open] summary:after{content:"–"}
.faq details>div{padding:0 16px 12px;color:#333}

.promo{display:flex;align-items:center;gap:30px}
.promo .pct{font:bold 70px/1 Arial;color:#111;white-space:nowrap}
.promo .pct small{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.5px}

/* ---------- Блог ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:#fff;border:1px solid #cfcfcf;display:flex;flex-direction:column}
.post .cover{display:block;border-bottom:3px solid var(--k);line-height:0}
.post .cover:hover{background:none;opacity:.92}
.post .cover>svg{width:100%;height:auto}
.post .pb{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.post .cat{font:bold 10px Arial;text-transform:uppercase;background:var(--y);align-self:flex-start;padding:3px 7px;border:1px solid var(--k);text-decoration:none}
.post h3{font-size:15.5px;margin:10px 0 8px}
.post h3 a{text-decoration:none}
.post p{margin:0 0 10px;font-size:13.5px;color:#444;flex:1}
.post .meta{font-size:12px;color:#777}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.cats a{border:2px solid var(--k);padding:6px 12px;font:bold 12px Arial;text-decoration:none;background:#fff}
.cats a.on,.cats a:hover{background:var(--y)}
.cats a i{font-style:normal;color:#777;font-weight:normal}
.pager{display:flex;gap:6px;justify-content:center;margin:32px 0 0;flex-wrap:wrap}
.pager a,.pager span{min-width:36px;text-align:center;border:2px solid var(--k);padding:7px 10px;font-weight:bold;text-decoration:none;background:#fff}
.pager span.on{background:var(--y)}

/* ---------- Внутренние страницы ---------- */
.phero{border-bottom:5px solid var(--line)}
.phero .wrap{display:flex;gap:26px;align-items:center;padding-top:22px;padding-bottom:24px}
.phero .pc{width:110px;flex:none}
.phero h1{margin:6px 0 8px;font-size:26px}
.phero .bar{height:3px;background:var(--line);margin:8px 0 10px;max-width:520px}
.phero .lead{font-size:15px;margin:0;max-width:760px}
.crumbs{font-size:12px;color:#333}
.crumbs a{color:#333}
.crumbs span{margin:0 5px;color:#777}
.layout{display:grid;grid-template-columns:1fr 280px;gap:34px;padding:34px 0 46px}
.layout.full{grid-template-columns:1fr}
.content{font-size:15px;line-height:1.65;min-width:0}
.content h2{font-size:21px;margin:34px 0 12px;padding:0 0 6px;border-bottom:3px solid var(--y)}
.content h2:first-child{margin-top:0}
.content h3{font-size:17px;margin:24px 0 8px}
.content p{margin:0 0 14px}
.content ul,.content ol{margin:0 0 16px;padding-left:24px}
.content li{margin-bottom:6px}
.content ul{list-style:none;padding-left:4px}
.content ul li{padding-left:22px;position:relative}
.content ul li:before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;background:var(--y);border:1px solid var(--k)}
.content ol li::marker{font-weight:bold}
.content blockquote{margin:18px 0;padding:14px 18px 14px 20px;background:var(--y3);border-left:6px solid var(--y2);font-style:normal}
.content blockquote p:last-child{margin:0}
.content table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:14px;display:block;overflow-x:auto}
.content table thead,.content table tbody{display:table;width:100%;table-layout:auto}
.content th{background:var(--k);color:var(--y);text-align:left;padding:9px 10px;font-size:12.5px}
.content td{border-bottom:1px solid #ddd;padding:8px 10px;vertical-align:top}
.content tr:nth-child(even) td{background:#fafafa}
.toc{border:2px solid var(--k);background:var(--g4);padding:14px 18px;margin:0 0 26px}
.toc b{display:block;margin-bottom:6px;text-transform:uppercase;font-size:12px}
.toc ol{margin:0;padding-left:20px;font-size:14px}
.toc li{margin:3px 0}
.art-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#555;margin:0 0 18px;align-items:center}
.art-cover{border:2px solid var(--k);margin:0 0 22px;line-height:0}
.art-cover>svg{width:100%;height:auto}

.side .box{margin-bottom:24px;border:2px solid var(--k);background:#fff}
.side .box .chev{margin:-2px -2px 0}
.side .box ul{list-style:none;margin:0;padding:6px 14px 12px}
.side .box li{border-bottom:1px dashed #ccc}
.side .box li:last-child{border:0}
.side .box li a{display:block;padding:8px 0;text-decoration:none;font-size:13.5px}
.side .box li a.on{font-weight:bold}
.side .box .in{padding:6px 14px 14px;font-size:13.5px}
.side .box.y{background:var(--y)}

.cta-band{padding:30px 0 34px}
.cta-band .inner{display:flex;gap:30px;align-items:center;justify-content:space-between}
.cta-band h2{margin:0 0 6px;font-size:22px}
.cta-band p{margin:0}

/* ---------- Формы ---------- */
.form{background:#fff;border:2px solid var(--k);padding:22px;box-shadow:6px 6px 0 var(--k)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label.f{display:block;font:bold 12px Arial;text-transform:uppercase;margin:0 0 5px}
.form input[type=text],.form input[type=email],.form select,.form textarea{width:100%;border:2px solid #9a9a9a;padding:10px;font:14px Arial;margin-bottom:14px;background:#fff;border-radius:0}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--k);background:#fffde8}
.form textarea{min-height:110px;resize:vertical}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;margin:2px 0 14px;color:#333}
.agree input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:#111;cursor:pointer}
.agree a{color:#111}
.form .note{font-size:12px;color:#666;margin:10px 0 0}
.form .ok{display:none;background:var(--y);border:2px solid var(--k);padding:12px;font-weight:bold;margin-top:12px}
.form .err{display:none;background:#ffe4e4;border:2px solid #b00;padding:10px;font-size:13px;margin-top:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Подвал ---------- */
.foot{background:var(--g2);border-top:4px solid var(--line);font-size:13px;color:#222}
.foot .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;gap:26px;padding:30px 0 22px}
.foot h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;border-bottom:3px solid var(--y);padding-bottom:6px;display:inline-block}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 6px}
.foot a{color:#222}
.soc{display:flex;gap:8px;margin-top:12px}
.soc span{width:34px;height:34px;background:var(--k);color:var(--y);display:flex;align-items:center;justify-content:center;font:bold 11px Arial;cursor:default}
.foot .bottom{border-top:1px solid #b5b5b5;padding:12px 0 14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- Cookie ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--k);color:#eee;border-top:4px solid var(--y);display:none}
.cookie .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.cookie p{margin:0;font-size:13px}
.cookie a{color:var(--y)}
.cookie a:hover{background:none}
.cookie.show{display:block}

.e404{text-align:center;padding:50px 0 60px}
.e404 .num{font:bold 120px/1 Arial;letter-spacing:6px}
.sitemap ul{columns:2}

/* ---------- Адаптив ---------- */
@media (max-width:900px){
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
  .seo-text{columns:1}
  .split{grid-template-columns:1fr}
}
@media (max-width:760px){
  .top-mid{display:none}
  .burger{display:block}
  .nav .wrap{flex-direction:column}
  .nav ul{display:none;flex-direction:column;padding-bottom:8px}
  .nav.open ul{display:flex}
  .nav .sub{position:static;display:flex;border:0;min-width:0;background:#222}
  .nav .sub a{color:#ddd;border-color:#333;padding-left:24px}
  .hero .wrap,.phero .wrap{flex-direction:column;text-align:center}
  .hero-cube{width:170px}
  .hero-btns{justify-content:center}
  .trio,.g2,.g3,.steps,.posts{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .promo{flex-direction:column;text-align:center}
  .cta-band .inner,.cookie .wrap{flex-direction:column;text-align:center}
  .seo-text{padding:20px 18px}
  .sitemap ul{columns:1}
  .top-mail .txt{display:none}
}
@media (max-width:480px){
  .g4,.g5,.tiles,.foot .cols{grid-template-columns:1fr}
  .logo-txt{font-size:21px}
  .e404 .num{font-size:80px}
}