:root{
  --green:#0F6E56; --green-d:#08503F; --mint:#E1F5EE; --accent:#5DCAA5;
  --ink:#15201C; --muted:#5F6B66; --line:#E3EAE7; --bg:#FFFFFF; --bg-soft:#F6FAF8;
  --radius:14px; --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;               /* никакого горизонтального сдвига на мобильных */
  -webkit-tap-highlight-color:rgba(15,110,86,.12);
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}

/* ---------- шапка ---------- */
header{position:-webkit-sticky;position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand img{width:36px;height:36px;border-radius:10px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--muted);font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--green)}
/* кнопка в меню — правило .nav-links a перебивало белый цвет текста */
.nav-links a.btn{color:#fff}
.nav-links a.btn:hover{color:#fff}
.nav-links a.btn-ghost,.nav-links a.btn-ghost:hover{color:var(--green)}
.btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--green);color:#fff;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:11px;transition:.18s;white-space:nowrap;border:none;cursor:pointer}
.btn:hover{background:var(--green-d);transform:translateY(-1px)}
.btn-lg{padding:16px 30px;font-size:17px;border-radius:13px}
.btn-ghost{background:transparent;color:var(--green);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--mint);border-color:var(--accent)}
.burger{display:none;margin-left:auto;background:none;border:none;font-size:26px;color:var(--green);cursor:pointer}

/* ---------- герой ---------- */
.hero{padding:76px 0 64px;background:
  radial-gradient(900px 380px at 78% -8%, #EAF7F2 0%, transparent 62%),var(--bg)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--green);
  font-size:14px;font-weight:600;padding:7px 15px;border-radius:100px;margin-bottom:22px}
h1{font-size:52px;line-height:1.08;letter-spacing:-.035em;font-weight:800;margin-bottom:20px}
h1 em{font-style:normal;color:var(--green)}
.lead{font-size:19px;color:var(--muted);margin-bottom:30px;max-width:520px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:14px;color:var(--muted);margin-top:16px}
/* демонстрация в герое */
.demo{background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;padding:22px}
.demo-top{display:flex;align-items:center;gap:9px;padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.cmt{display:flex;gap:11px;padding:12px 14px;border-radius:12px;background:#fff;
  border:1px solid var(--line);margin-bottom:10px;font-size:14px;position:relative;transition:.4s}
.cmt .who{font-weight:600;font-size:13px;color:var(--ink);margin-bottom:2px}
.cmt .txt{color:var(--muted);font-size:14px}
.av{width:32px;height:32px;border-radius:50%;background:var(--mint);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.cmt.bad{border-color:#F5C9C2;background:#FEF6F4}
.cmt.gone{opacity:.28;text-decoration:line-through}
.tag{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:3px 9px;border-radius:100px;background:#FBE2DC;color:#9E3B22}
.cmt.ok .tag{background:var(--mint);color:var(--green)}

/* ---------- секции ---------- */
section{padding:74px 0}
.section-soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{color:var(--accent);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:12px}
h2{font-size:38px;line-height:1.16;letter-spacing:-.03em;font-weight:800;margin-bottom:14px}
.sub{font-size:18px;color:var(--muted);max-width:660px;margin-bottom:44px}
h3{font-size:19px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}

.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.2s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card p{color:var(--muted);font-size:15px}
.ico{width:46px;height:46px;border-radius:13px;background:var(--mint);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:16px}

/* шаги */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;padding-top:52px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;
  width:40px;height:40px;border-radius:12px;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.step p{color:var(--muted);font-size:15px}

/* тарифы */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column}
.price.hit{border:2px solid var(--green);box-shadow:0 12px 34px rgba(15,110,86,.09)}
.price .nm{font-weight:700;font-size:17px;margin-bottom:6px}
.price .amt{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:8px 0 2px}
.price .amt span{font-size:15px;font-weight:600;color:var(--muted)}
.price .per{font-size:14px;color:var(--muted);margin-bottom:18px}
.price ul{list-style:none;margin-bottom:20px;flex:1}
.price li{font-size:14.5px;color:var(--muted);padding:6px 0 6px 24px;position:relative}
.price li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.pill{display:inline-block;background:var(--mint);color:var(--green);font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:100px;margin-bottom:10px}

/* FAQ */
details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;margin-bottom:12px}
details[open]{border-color:var(--accent)}
summary{font-weight:600;font-size:16.5px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-size:24px;font-weight:400;line-height:1}
details[open] summary::after{content:"−"}
details p{color:var(--muted);font-size:15.5px;margin-top:12px}

/* статьи */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;transition:.2s}
.post:hover{border-color:var(--accent);transform:translateY(-2px)}
.post .dt{font-size:13px;color:var(--muted);margin-bottom:10px}
.post h3{font-size:17.5px;line-height:1.35;margin-bottom:10px}
.post p{color:var(--muted);font-size:14.5px;flex:1}
.post .more{color:var(--green);font-weight:600;font-size:14.5px;margin-top:14px}
.posts-covers .post{padding:0;overflow:hidden}
.posts-covers .post-cover{width:100%;aspect-ratio:1200/630;object-fit:cover;border-bottom:1px solid var(--line)}
.posts-covers .post .dt{margin:18px 20px 8px}
.posts-covers .post h3{margin:0 20px 10px}
.posts-covers .post p{margin:0 20px}
.posts-covers .post .more{margin:14px 20px 22px}

/* финальный призыв */
.cta{background:var(--green);color:#fff;border-radius:22px;padding:56px;text-align:center;
  background-image:radial-gradient(560px 220px at 50% 0%, rgba(93,202,165,.30), transparent 70%)}
.cta h2{color:#fff;margin-bottom:12px}
.cta p{color:#CFEAE0;font-size:18px;margin-bottom:26px}
.cta .btn{background:#fff;color:var(--green)}
.cta .btn:hover{background:var(--mint)}

footer{border-top:1px solid var(--line);padding:44px 0;color:var(--muted);font-size:14.5px}
.foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--green)}
.foot .sp{margin-left:auto}

/* ---------- адаптив ---------- */
@media(max-width:900px){
  .hero-grid,.g3,.g2,.steps,.prices,.posts{grid-template-columns:1fr}
  h1{font-size:38px}h2{font-size:30px}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:68px;left:0;right:0;background:#fff;
    flex-direction:column;padding:18px 24px;gap:16px;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .hero{padding:48px 0 40px}
  section{padding:52px 0}
  .cta{padding:38px 22px}
  .foot .sp{margin-left:0;width:100%}
}


/* ---------- кроссбраузерные правки ---------- */
.wrap{padding-left:max(24px, env(safe-area-inset-left));
      padding-right:max(24px, env(safe-area-inset-right))}
.grid,.posts,.prices,.steps,.hero-grid{min-width:0}
.card,.price,.post,.step,.demo{min-width:0}
img{height:auto}
.demo .txt{overflow-wrap:anywhere;word-break:break-word}
summary{-webkit-user-select:none;user-select:none}

/* планшеты */
@media(max-width:1024px) and (min-width:901px){
  .prices{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  h1{font-size:44px}
}

/* телефоны */
@media(max-width:600px){
  h1{font-size:32px;letter-spacing:-.02em}
  h2{font-size:26px}
  .lead{font-size:17px}
  .sub{font-size:16px;margin-bottom:30px}
  .btn-lg{padding:15px 22px;font-size:16px;width:100%}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .card{padding:22px}
  .cta{padding:32px 20px;border-radius:16px}
  .cta p{font-size:16px}
  .demo{padding:16px}
  .price .amt{font-size:30px}
  footer{padding:32px 0}
  .foot{flex-direction:column;align-items:flex-start;gap:10px}
}

/* уважаем настройку «уменьшить движение» */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* ---------- статьи ---------- */
.art-h1{font-size:40px;line-height:1.12;letter-spacing:-.03em;margin-bottom:18px}
.art-h2{font-size:28px;line-height:1.25;margin-top:38px;margin-bottom:12px}
@media(max-width:600px){
  .art-h1{font-size:28px;line-height:1.18;margin-bottom:14px}
  .art-h2{font-size:22px;margin-top:30px}
}

/* ---------- база знаний v7 ---------- */
.article{padding:54px 0 76px}
.article-wrap{max-width:860px}
.article h1{font-size:44px;max-width:820px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:24px}
.crumbs a{color:var(--green)}
.article-meta{font-size:14px;color:var(--muted);margin:-12px 0 26px}
.article-cover{width:100%;border-radius:20px;border:1px solid var(--line);margin:0 0 34px}
.article-content{font-size:17px;line-height:1.75}
.article-content h2{font-size:29px;margin:44px 0 14px;scroll-margin-top:90px}
.article-content h3{font-size:21px;margin:28px 0 8px}
.article-content p{color:#43524c;margin-bottom:18px}
.article-content ul,.article-content ol{margin:0 0 22px 25px;color:#43524c}
.article-content li{margin-bottom:9px;padding-left:4px}
.article-content a{color:var(--green);text-decoration:underline;text-decoration-color:#a9d9c8;text-underline-offset:3px}
.article-content figure{margin:34px 0}
.article-content figure img{border:1px solid var(--line);border-radius:18px;background:var(--bg-soft)}
.article-content figcaption{text-align:center;color:var(--muted);font-size:14px;margin-top:9px}
.article-content table{width:100%;border-collapse:collapse;margin:24px 0;display:table}
.article-content th,.article-content td{padding:13px 15px;border:1px solid var(--line);text-align:left;vertical-align:top}
.article-content th{background:var(--bg-soft);color:var(--ink)}
.note{border-left:4px solid var(--accent);background:var(--bg-soft);padding:18px 20px;border-radius:0 12px 12px 0;margin:24px 0;color:#43524c}
.sources{font-size:15px}
.related{padding:52px 0 32px}
.related h2{font-size:29px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:14px;padding:18px;transition:.2s}
.rel-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.rel-card b{line-height:1.35}
.rel-card span{font-size:14px;color:var(--muted)}
.posts-full{margin-top:42px}
.posts-full .post{padding:0;overflow:hidden}
.posts-full .post>a{display:flex;flex-direction:column;height:100%}
.posts-full .post img{aspect-ratio:1200/630;object-fit:cover;border-bottom:1px solid var(--line)}
.posts-full .post .tag{position:static;align-self:flex-start;margin:20px 22px 8px;background:var(--mint);color:var(--green)}
.posts-full .post h2{font-size:20px;line-height:1.32;margin:0 22px 10px}
.posts-full .post p{margin:0 22px 14px}
.posts-full .post .read{color:var(--green);font-size:14px;margin:0 22px 22px}
.brand.small{font-size:16px}
.brand.small img{width:28px;height:28px}

@media(max-width:900px){
  .related-grid{grid-template-columns:1fr}
  .article h1{font-size:36px}
  .article-content{font-size:16px}
}
@media(max-width:600px){
  .article{padding:36px 0 54px}
  .article h1{font-size:29px}
  .article-cover{border-radius:14px;margin-bottom:24px}
  .article-content h2{font-size:24px;margin-top:34px}
  .article-content table{display:block;overflow-x:auto;font-size:14px}
}