/* ============================================================
   ЭХО МЕТКА — блог blog.echometka.ru · единые стили v1 (2026-10-08)
   Лёгкий чистый CSS, без JS и внешних шрифтов. Один файл на весь сайт.
   ============================================================ */
:root{--g:#00b974;--g2:#009e63;--dark:#10141f;--ink:#1c2230;--mut:#5c6675;
      --bg:#f4f6f8;--card:#ffffff;--line:#e4e9ef;--soft:#eef7f2}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
     font:17px/1.75 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--g2)}
img{max-width:100%;border-radius:10px}
.wrap{max-width:820px;margin:0 auto;padding:0 18px}

/* Шапка */
.top{background:var(--dark);color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
           min-height:56px;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
       font-weight:700;font-size:17px}
.brand img{width:28px;height:28px;border-radius:7px}
.brand small{font-weight:400;opacity:.75;font-size:13px}
.top nav a{color:#cfd6e4;text-decoration:none;font-size:14px;margin-left:14px}
.top nav a:hover{color:#fff}

/* Хлебные крошки */
.crumb{padding:16px 0 0;font-size:13.5px;color:var(--mut)}
.crumb a{color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--g2)}
main{padding:6px 0 34px}

/* Заголовки и текст */
h1{font-size:29px;line-height:1.25;margin:10px 0 8px;letter-spacing:-.3px}
.lead{font-size:18.5px;color:#333c4a;margin:0 0 18px}
h2{font-size:22px;line-height:1.35;margin:36px 0 12px;padding-left:12px;
   border-left:4px solid var(--g)}
h3{font-size:18.5px;margin:24px 0 8px}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:6px 0}
ol.steps li{margin:10px 0}

/* Инфо-блоки */
.note{background:var(--soft);border:1px solid #cfe9dc;border-radius:12px;
      padding:14px 16px;margin:18px 0}
.note b{color:var(--g2)}

/* Блок «где сделать: веб + приложение» */
.platform{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
@media(max-width:600px){.platform{grid-template-columns:1fr}}
.pl{background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:14px 16px}
.pl b{display:block;margin-bottom:4px}
.pl span{font-size:15px;color:var(--mut)}

/* Кнопки-призыв */
.cta{background:linear-gradient(180deg,#f0fbf6,#e4f6ee);border:1px solid #cdebd9;
     border-radius:14px;padding:16px 14px;margin:22px 0;text-align:center}
.cta p{font-size:15.5px;color:var(--mut);margin:0 0 4px}
.btn{display:inline-block;padding:11px 18px;border-radius:9px;text-decoration:none;
     font-weight:600;font-size:15.5px;margin:6px 6px 0}
.btn-p{background:var(--g);color:#fff}
.btn-p:hover{background:var(--g2)}
.btn-s{background:#fff;color:var(--g2);border:2px solid var(--g)}

/* FAQ */
.faq h3{margin:20px 0 4px}
.faq p{margin:0 0 12px}

/* «Читайте также» */
.rel{background:var(--card);border:1px solid var(--line);border-radius:12px;
     padding:14px 18px;margin:28px 0}
.rel b{display:block;margin-bottom:6px}
.rel a{display:block;padding:5px 0;text-decoration:none}
.rel a:hover{text-decoration:underline}

/* Подвал */
.foot{border-top:1px solid var(--line);margin-top:32px;padding:18px 0 34px;
      font-size:14px;color:var(--mut)}
.foot a{color:var(--g2);text-decoration:none}

/* Главная блога */
.hero{background:var(--dark);color:#fff;border-radius:0 0 18px 18px;
      padding:34px 0 30px;margin-bottom:26px}
.hero h1{color:#fff;font-size:31px;margin:6px 0 10px}
.hero p{color:#c7cfdc;font-size:18px;margin:0 0 16px;max-width:640px}
.hero .btn-p{background:var(--g)}
.cluster h2{margin-top:30px}
.cards{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0 6px}
.card{display:block;background:var(--card);border:1px solid var(--line);
      border-radius:12px;padding:13px 16px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--g)}
.card b{display:block}
.card span{font-size:14.5px;color:var(--mut)}
.soon{font-size:14.5px;color:var(--mut)}

/* Юридический дисклеймер (обязателен в каждой статье) */
.legal{border-top:1px solid var(--line);margin:26px 0 0;padding:14px 0 0;
       font-size:13px;line-height:1.6;color:var(--mut)}
.legal p{margin:0 0 8px}