:root{
  --ink:#1c1c1c; --body:#666666; --hairline:#e8e8e8;
  --canvas:#ffffff; --canvas-soft:#f7f7f5;
  --yellow:#ffd600; --yellow-soft:#fff7cc; --red:#e31e24;
  /* цвета точки по линейкам (брендбук 02b): красный — бренд всегда, остальные — акцент продукта.
     Точка обязана быть темнее поля; белая и оранжевая запрещены; максимум 2 цвета точки на экране. */
  --dot-brand:#e31e24; --dot-arch:#1c1c1c; --dot-bitrix:#1b4fd8; --dot-dash:#0e7c3a;
  --dark:#1c1c1c; --on-dark:#ffffff; --on-dark-body:#b8b8b8; --dark-soft:#3a3a3a;
  --r-sm:6px; --r-md:10px;
  --sp-sm:8px; --sp-md:12px; --sp-lg:16px; --sp-2xl:24px; --sp-3xl:32px; --sp-5xl:48px; --sp-section:88px;
  --display:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,monospace;
  --shadow:0 1px 2px rgba(28,28,28,.05),0 10px 30px rgba(28,28,28,.07);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--display);font-size:16px;font-weight:400;line-height:1.45;color:var(--ink);background:var(--canvas)}
.container{max-width:1200px;margin:0 auto;padding:0 var(--sp-3xl)}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.55px;text-transform:uppercase;color:var(--body)}
h1{font-size:54px;font-weight:600;line-height:1.12;letter-spacing:-1.4px}
h2{font-size:36px;font-weight:600;line-height:1.18;letter-spacing:-.7px}
h3{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.2px}
.lead{font-size:18px;line-height:1.5;color:var(--body)}
section{padding:var(--sp-section) 0}
.soft{background:var(--canvas-soft)}
.btn{display:inline-block;font-family:var(--display);font-size:15px;font-weight:600;text-decoration:none;border-radius:var(--r-sm);padding:14px 28px;border:none;cursor:pointer;transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(.96)}
.btn:active{transform:translateY(1px)}
.btn-yellow{background:var(--yellow);color:#1c1c1c;box-shadow:0 2px 0 rgba(28,28,28,.12)}
.btn-dark{background:var(--dark);color:#fff}
.btn-outline{background:#fff;color:var(--ink);border:1px solid #d5d5d5}

/* NAV (v32: только шапка — body > nav; оглавления статей <nav class="…-toc"> больше не получают её стиль) */
body > nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline);padding:14px 0}
nav .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2xl)}
/* ЛОГОТИП (брендбук 26.07.2026): знак 28px + «БЮРО АГЕНТОВ» на IBM Plex Mono 600, трекинг +0.02em, gap 9px.
   Знак — инлайновый SVG-спрайт в разметке: жёлтое поле со скруглением 36%, круглая красная точка cx/cy 47 r 8,
   градиент 135° (#FFF07A→#FFA800 поле, #FF6152→#DA1626 точка). Фавикон и мелкие иконки — плоские цвета.
   Только логотип использует IBM Plex Mono; вся остальная типографика сайта — Inter + JetBrains Mono. */
.wordmark{font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;font-size:15px;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;
  display:flex;align-items:center;gap:9px}
.wordmark .mark{flex:0 0 28px;width:28px;height:28px;display:block}
.footer-grid .wordmark{display:inline-flex}
.nav-links{display:flex;gap:var(--sp-2xl);list-style:none}
.nav-links a{color:var(--ink);text-decoration:none;font-size:15px}
.nav-links a:hover{color:var(--red)}
nav .btn{padding:10px 20px;font-size:14px}
/* v32 (17.10.2026): пять разделов меню в одну строку помещаются от 1025 px; до 1024 px — меню под бургером */
@media(max-width:1024px){.nav-links{display:none}}

/* HERO */
.hero{padding:72px 0 var(--sp-section);background:linear-gradient(180deg,#fffdf2 0%,#ffffff 78%)}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-5xl);align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:var(--sp-2xl);box-shadow:var(--shadow)}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
.hero h1{margin-bottom:var(--sp-lg)}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.hero .lead{margin-bottom:var(--sp-3xl);max-width:500px}
.hero-cta{display:flex;gap:var(--sp-md);flex-wrap:wrap;margin-bottom:var(--sp-3xl)}
.hero-facts{display:flex;gap:var(--sp-3xl);flex-wrap:wrap}
.hero-fact .num{font-size:26px;font-weight:600;letter-spacing:-.4px}
.hero-fact .cap{font-size:13px;color:var(--body);margin-top:2px}
.hero-img{position:relative}
.hero-img img{width:100%;height:auto;display:block;border-radius:var(--r-md)}
@media(max-width:900px){.hero .container{grid-template-columns:1fr}.hero-img{order:-1;max-width:440px}}
/* короткая форма заявки в первом экране (добавлено 04.08.2026 после аудита Метрики:
   90 % визитов короче 30 секунд, до нижней формы почти никто не доскроллил) */
.hero-form{position:relative}
.hero-form form{margin:0;gap:var(--sp-sm)}
.hero-form .hf-title{font-size:21px;font-weight:600;letter-spacing:-.3px;color:var(--ink)}
.hero-form .hf-sub{font-size:14.5px;color:var(--body);margin-bottom:var(--sp-md)}
.hero-form .form-note{margin-top:2px}
@media(max-width:900px){.hero-form{max-width:520px;margin-top:var(--sp-2xl)}}


/* trust strip */
.trust-strip{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:18px 0;background:#fff}
.trust-strip .container{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.trust-item{font-size:14px;color:var(--body);display:flex;align-items:center;gap:8px}
.trust-item b{color:var(--ink);font-weight:600}
.trust-item .ok{color:#1a9a4a;font-weight:600}

/* CARDS */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
.card{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--sp-2xl);box-shadow:var(--shadow)}
.card .eyebrow{display:block;margin-bottom:var(--sp-md)}
.card h3{margin-bottom:var(--sp-sm)}
.card p{color:var(--body);font-size:15px}
.section-head{max-width:660px;margin-bottom:var(--sp-5xl)}
.section-head .eyebrow{display:block;margin-bottom:var(--sp-md)}
.section-head h2{margin-bottom:var(--sp-md)}

/* DEMO */
.demo-band .chat{max-width:840px;margin:0 auto;background:var(--dark);border-radius:var(--r-md);padding:var(--sp-2xl);font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--on-dark);box-shadow:0 20px 50px rgba(28,28,28,.18)}
.chat .q{color:var(--yellow);margin-bottom:6px}
.chat .a{color:var(--on-dark);white-space:pre-line;margin-bottom:18px}
.chat .a .hl{color:var(--yellow)}
.chat .cursor{display:inline-block;width:8px;height:15px;background:var(--yellow);vertical-align:text-bottom;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chat-tag{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--on-dark-body);margin-bottom:var(--sp-lg);display:flex;justify-content:space-between}

/* ABILITIES */
.grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
.ability .q-example,.kz-asks .q-example{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--yellow-soft);border:1px solid #f0e29a;border-radius:var(--r-sm);padding:7px 11px;margin-top:var(--sp-md);display:inline-block}

/* STEPS / PROCESS
   26.07.2026: блок «как проходит подключение» перевёрстан. Было — три карточки в ряд + жёлтая
   плашка-простыня на 820px по центру + штамп по центру: три разные оси выравнивания, ноль картинки,
   текст шага 02 дублировал плашку. Стало — две колонки на одной оси контейнера:
   слева вертикальный таймлайн шагов, справа иллюстрация + короткий чек-лист «что нужно от вас». */
.process{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--sp-3xl) 56px;align-items:start}
.process-flow{min-width:0}
.steps{position:relative}
.step{position:relative;padding:0 0 var(--sp-3xl) 52px}
.step:last-child{padding-bottom:0}
/* рельс таймлайна: отрезок от номера шага до номера следующего; у последнего шага его нет */
.step::before{content:"";position:absolute;left:15px;top:38px;bottom:4px;width:2px;background:var(--hairline)}
.step:last-child::before{display:none}
.step .num{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--yellow);
  color:var(--ink);font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:-.2px;
  display:flex;align-items:center;justify-content:center}
.step .n{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.55px;
  text-transform:uppercase;color:var(--body);padding-top:5px;margin-bottom:6px}
.step h3{margin-bottom:var(--sp-sm)}
.step p{color:var(--body);font-size:15px}
/* иллюстрация — правая колонка первой строки */
.process-aside{min-width:0}
.process-aside img{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid var(--hairline)}
/* чек-лист «что нужно от вас» — полосой во всю ширину под обеими колонками:
   вместо простыни на 820px по центру три коротких пункта в ряд */
.process-note{grid-column:1/-1;background:var(--yellow-soft);border:1px solid #f0e29a;
  border-radius:var(--r-md);padding:var(--sp-2xl) var(--sp-3xl)}
.process-note .eyebrow{display:block;color:var(--ink);margin-bottom:var(--sp-lg)}
.process-note p{font-size:15px;color:var(--body)}
.process-note p b{color:var(--ink)}
.req-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3xl)}
.req-list li{position:relative;padding:0 0 0 26px;font-size:15px;color:var(--body)}
.req-list li + li{border-left:1px solid #f0e29a;padding-left:calc(var(--sp-3xl) + 26px);margin-left:calc(-1 * var(--sp-3xl) / 2)}
.req-list li::before{content:"✓";position:absolute;left:2px;top:0;color:#1a9a4a;font-weight:700}
.req-list li + li::before{left:calc(var(--sp-3xl) + 2px)}
.req-list li b{color:var(--ink);font-weight:600}
.process-note .after{margin-top:var(--sp-2xl);padding-top:var(--sp-lg);border-top:1px solid #f0e29a;font-size:14.5px}
/* штамп по оси контейнера слева, а не по центру полосы */
.stamp{grid-column:1/-1;margin:var(--sp-sm) 0 0;width:max-content;font-family:var(--mono);font-size:13px;
  letter-spacing:2px;text-transform:uppercase;color:var(--red);border:2px solid var(--red);
  border-radius:var(--r-sm);padding:10px 22px;transform:rotate(-2deg)}

/* CONFIGS */
.badges{display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
.badge{border:1px solid var(--hairline);background:#fff;border-radius:999px;padding:9px 16px;font-size:14.5px;box-shadow:var(--shadow)}

/* SECURITY */
.security-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-5xl);align-items:center}
.security-img img{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}
.security-list{display:flex;flex-direction:column;gap:var(--sp-lg)}
.sec-item{display:flex;gap:14px;align-items:flex-start}
.sec-item .ic{flex:0 0 34px;height:34px;border-radius:9px;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink)}
.sec-item h3{margin-bottom:2px;font-size:17px}
.sec-item p{color:var(--body);font-size:15px}
@media(max-width:900px){.security-grid{grid-template-columns:1fr}}

/* PRICING */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg);align-items:stretch}
.tier{border:1px solid var(--hairline);background:#fff;border-radius:var(--r-md);padding:var(--sp-3xl);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.tier.featured{border:2px solid var(--ink);position:relative}
.tier.featured::before{content:"Флагман";position:absolute;top:-13px;left:24px;background:var(--yellow);border-radius:999px;padding:4px 14px;font-size:12.5px;font-weight:600}
.tier .eyebrow{display:block;margin-bottom:var(--sp-lg)}
.tier .price{font-size:36px;font-weight:600;letter-spacing:-.7px;margin-bottom:2px}
.tier .price small{display:block;font-size:14px;font-weight:400;letter-spacing:0;color:var(--body);margin-top:4px}
.tier ul{list-style:none;margin:var(--sp-2xl) 0;flex:1}
.tier li{font-size:14.5px;padding:8px 0 8px 26px;border-bottom:1px solid var(--hairline);position:relative}
.tier li::before{content:"✓";position:absolute;left:2px;color:#1a9a4a;font-weight:700}
.tier .btn{text-align:center}
.guarantee{margin-top:var(--sp-3xl);text-align:center;color:var(--body);font-size:15px}
/* таблица «сколько баз - столько стоит» */
.price-table{width:100%;border-collapse:collapse;margin:var(--sp-2xl) 0;flex:1}
.price-table td{font-size:14.5px;padding:9px 0;border-bottom:1px solid var(--hairline);color:var(--body)}
.price-table td:last-child{text-align:right;font-weight:600;color:var(--ink);white-space:nowrap}
.price-table tr:last-child td{border-bottom:none}
.tier-note{font-size:14px;color:var(--body);margin-bottom:var(--sp-lg);line-height:1.5}
.tier-note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px}

/* FAQ */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--hairline);padding:var(--sp-lg) 0}
.faq summary{font-size:17px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--sp-lg)}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--body)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:var(--sp-md);color:var(--body);font-size:15px;max-width:640px}

/* FORM */
.form-band{background:var(--yellow-soft)}
.form-band .container{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5xl);align-items:start}
form{display:flex;flex-direction:column;gap:var(--sp-md);background:#fff;border:1px solid #eadf9e;border-radius:var(--r-md);padding:var(--sp-3xl);box-shadow:var(--shadow)}
label{font-family:var(--mono);font-size:11px;letter-spacing:.55px;text-transform:uppercase;color:var(--body)}
input,select{background:#fff;border:1px solid #d5d5d5;border-radius:var(--r-sm);padding:12px 14px;font-family:var(--display);font-size:16px;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--ink)}
.form-note{font-size:13px;color:var(--body)}
.form-note a{color:var(--ink)}
.tg-alt{margin-top:var(--sp-2xl);font-size:15px;color:var(--body)}
.tg-alt a{color:var(--ink);font-weight:600}

/* FOOTER */
footer{padding:var(--sp-section) 0 var(--sp-3xl);border-top:1px solid var(--hairline)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.15fr 1.15fr;gap:var(--sp-3xl);margin-bottom:var(--sp-5xl)}
.footer-grid .eyebrow{display:block;margin-bottom:var(--sp-md)}
.footer-grid a{display:block;color:var(--ink);text-decoration:none;font-size:15px;padding:4px 0}
.footer-grid a:hover{color:var(--red)}
.requisites{font-size:13px;color:var(--body);line-height:1.6}

@media(max-width:900px){
  h1{font-size:36px;letter-spacing:-.9px}
  h2{font-size:28px}
  .form-band .container{grid-template-columns:1fr}
  .grid-3,.grid-6,.pricing,.pricing-duo{grid-template-columns:1fr}
  .process{grid-template-columns:1fr;gap:var(--sp-2xl)}
  .req-list{grid-template-columns:1fr;gap:0}
  .req-list li{padding:11px 0 11px 26px;border-bottom:1px solid #f0e29a}
  .req-list li:first-child{padding-top:0}
  .req-list li:last-child{border-bottom:none;padding-bottom:0}
  .req-list li + li{border-left:none;padding-left:26px;margin-left:0}
  .req-list li::before{top:12px}
  .req-list li:first-child::before{top:1px}
  .req-list li + li::before{left:2px}
  .footer-grid{grid-template-columns:1fr}
  section{padding:56px 0}
}
/* NAV active */
.nav-links a.active{font-weight:600;border-bottom:2px solid var(--yellow);padding-bottom:2px}

/* PROBLEMS BY ROLE */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg)}
.role-block{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--sp-3xl);box-shadow:var(--shadow)}
.role-tag{display:inline-block;background:var(--yellow);color:var(--ink);border-radius:999px;padding:6px 16px;font-size:13.5px;font-weight:600;margin-bottom:var(--sp-lg)}
.pain-list{list-style:none;margin-top:var(--sp-md)}
.pain-list li{padding:12px 0 12px 30px;border-bottom:1px solid var(--hairline);font-size:15px;color:var(--body);position:relative}
.pain-list li:last-child{border-bottom:none}
.pain-list li::before{content:"✕";position:absolute;left:4px;top:12px;color:var(--red);font-weight:700}
.pain-list li b{color:var(--ink)}

/* APPS */
.apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-lg)}
.app-card{text-align:center}
.app-ic{font-size:34px;margin-bottom:10px}
.app-card h3{margin-bottom:6px}
.app-card p{color:var(--body);font-size:14px}
.apps-note{margin-top:var(--sp-3xl);text-align:center;color:var(--body);font-size:15px}

/* asterisk */
.asterisk{margin-top:var(--sp-lg);font-size:13.5px;color:var(--body);line-height:1.5}

/* solo pricing */
.pricing-solo{max-width:460px;margin:0 auto}
.pricing-solo .tier{width:100%}
.pricing-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg);max-width:840px;margin:0 auto;align-items:stretch}

/* products grid */
.products-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg)}
.product-card{text-decoration:none;color:var(--ink);display:block;transition:transform .12s}
.product-card:hover{transform:translateY(-2px)}
.product-card .more{display:inline-block;margin-top:14px;font-weight:600;color:var(--ink)}
.product-card:hover .more{color:var(--red)}

/* page hero variant (subpages) */
.page-hero{padding:64px 0 56px;background:linear-gradient(180deg,#fffdf2 0%,#ffffff 78%)}
.page-hero .lead{max-width:640px}

/* case cards */
.case-num{font-size:26px;font-weight:600;letter-spacing:-.4px;color:var(--ink)}
.case-cap{font-size:13px;color:var(--body)}

@media(max-width:900px){
  .roles,.apps-grid,.products-grid{grid-template-columns:1fr}
}

/* app cards with images */
.app-card{text-align:left;padding:0;overflow:hidden}
.app-card img{width:100%;height:auto;display:block;border-bottom:1px solid var(--hairline)}
.app-card .app-body{padding:18px 20px 20px}
.app-card h3{margin-bottom:6px;font-size:17px}

/* trust strip v2: крупные плашки */
.trust-strip{padding:26px 0 30px;background:#fff;border-top:none;border-bottom:1px solid var(--hairline)}
.trust-strip .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;align-items:stretch}
.trust-item{background:#fff;border:1px solid var(--hairline);border-radius:10px;padding:14px 16px;font-size:15px;line-height:1.35;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);color:var(--ink)}
.trust-item .ok{flex:0 0 28px;height:28px;background:var(--yellow);color:var(--ink);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.trust-item b{font-weight:600}

/* multibase accent section */
.multibase{background:var(--yellow-soft)}
.trust-item .t{flex:1}

/* legal pages */
.legal{max-width:800px;margin:0 auto;padding:56px 32px 88px}
.legal h1{font-size:32px;letter-spacing:-.6px;margin-bottom:8px}
.legal .updated{color:var(--body);font-size:14px;margin-bottom:40px}
.legal h2{font-size:20px;letter-spacing:-.2px;margin:36px 0 12px}
.legal p,.legal li{font-size:15.5px;line-height:1.65;color:#333;margin-bottom:10px}
.legal ul,.legal ol{padding-left:22px;margin-bottom:14px}
.legal .req{background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-md);padding:20px 24px;margin-top:24px;font-size:15px;line-height:1.7}

/* ===== БЛОГ / СТАТЬИ ===== */
.crumbs{font-size:13.5px;color:var(--body);margin-bottom:var(--sp-lg)}
.crumbs a{color:var(--body);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 6px;opacity:.5}

.post-head{padding:56px 0 8px;background:linear-gradient(180deg,#fffdf2 0%,#ffffff 90%)}
.post-head h1{font-size:42px;letter-spacing:-1.1px;max-width:820px;margin-bottom:var(--sp-lg)}
.post-meta{font-family:var(--mono);font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--body)}
.post-lead{font-size:20px;line-height:1.5;color:var(--body);max-width:760px;margin-top:var(--sp-2xl)}

.post{max-width:760px;padding:var(--sp-5xl) 0 var(--sp-section)}
.post h2{font-size:28px;letter-spacing:-.5px;margin:var(--sp-5xl) 0 var(--sp-lg)}
.post h3{font-size:19px;margin:var(--sp-3xl) 0 var(--sp-sm)}
.post p{font-size:17px;line-height:1.65;color:#333;margin-bottom:var(--sp-lg)}
.post ul,.post ol{margin:0 0 var(--sp-lg) 22px}
.post li{font-size:17px;line-height:1.6;color:#333;margin-bottom:8px}
.post b{color:var(--ink)}
.post a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.post a:hover{color:var(--red)}

figure{margin:var(--sp-3xl) 0}
figure img{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid var(--hairline)}
figcaption{font-size:13.5px;color:var(--body);margin-top:10px;line-height:1.5}

.callout{background:var(--yellow-soft);border:1px solid #f0e29a;border-radius:var(--r-md);
padding:var(--sp-2xl);margin:var(--sp-3xl) 0}
.callout p{margin-bottom:0;font-size:16px}
.callout .eyebrow{display:block;margin-bottom:8px}

.post-cta{border-top:1px solid var(--hairline);margin-top:var(--sp-5xl);padding-top:var(--sp-3xl)}
.post-cta h3{margin-bottom:var(--sp-sm)}
.post-cta p{margin-bottom:var(--sp-lg)}

/* список статей */
.post-list{display:flex;flex-direction:column;gap:var(--sp-lg);max-width:820px}
.post-card{display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--hairline);
border-radius:var(--r-md);padding:var(--sp-2xl) var(--sp-3xl);box-shadow:var(--shadow);transition:transform .12s}
.post-card:hover{transform:translateY(-2px)}
.post-card .eyebrow{display:block;margin-bottom:10px}
.post-card h2{font-size:22px;letter-spacing:-.3px;margin-bottom:8px}
.post-card p{color:var(--body);font-size:15.5px;line-height:1.5}
.post-card .more{display:inline-block;margin-top:12px;font-weight:600;font-size:15px}
.post-card:hover .more{color:var(--red)}

@media(max-width:900px){
  .post-head h1{font-size:30px;letter-spacing:-.7px}
  .post-lead{font-size:17px}
  .post h2{font-size:23px}
  .post p,.post li{font-size:16px}
}

/* ═══════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ВЁРСТКА
   Правила идут последними, чтобы переопределять всё выше.
   ═══════════════════════════════════════════════════════════ */

/* страница никогда не едет по горизонтали */
html,body{max-width:100%;overflow-x:hidden}
/* 16.10.2026: hidden делал body контейнером прокрутки, и липкая шапка и sticky-блоки не работали ни на одной странице.
   clip так же режет горизонтальный выезд, но прокрутку не создаёт; старые браузеры остаются на hidden. */
@supports (overflow-x:clip){html,body{overflow-x:clip}}



@media(max-width:640px){
  .container{padding:0 18px}

  /* шапка компактнее, чтобы логотип и кнопка не выдавливали страницу */
  .wordmark{font-size:15px;gap:8px}
  .wordmark .mark{flex:0 0 24px;width:24px;height:24px}
  nav .btn{padding:10px 15px;font-size:13px}

  /* типографика под узкий экран */
  h1{font-size:30px;letter-spacing:-.7px;line-height:1.14}
  h2{font-size:23px;letter-spacing:-.4px}
  h3{font-size:18px}
  .lead{font-size:16.5px}

  /* вертикальный ритм: было 88px между секциями - на телефоне это дыры */
  section{padding:46px 0}
  .hero{padding:34px 0 46px}
  .hero .lead{margin-bottom:var(--sp-2xl)}
  .hero-cta{gap:10px;margin-bottom:var(--sp-2xl)}
  .hero-cta .btn{width:100%;text-align:center}
  .hero-facts{gap:20px}
  .hero-fact .num{font-size:22px}
  .section-head{margin-bottom:var(--sp-3xl)}
  .hero-img{max-width:100%}

  /* карточки и плашки */
  .card,.role-block,.tier{padding:var(--sp-lg) var(--sp-2xl)}
  /* цены: две карточки в колонку. Правило обязано жить ЗДЕСЬ, а не в раннем медиазапросе -
     .pricing-duo объявлен ниже по файлу и перебивал бы его при равной специфичности. */
  .pricing-duo{grid-template-columns:1fr}
  .tier{padding:var(--sp-2xl)}
  /* таймлайн на телефоне: кружок меньше, текст ближе к рельсу */
  .step{padding:0 0 var(--sp-2xl) 42px}
  .step .num{width:28px;height:28px;font-size:11.5px}
  .step::before{left:13px;top:34px}
  .process-note{padding:var(--sp-lg)}
  .trust-strip{padding:16px 0 18px}
  .trust-strip .container{grid-template-columns:1fr;gap:8px}
  .trust-item{padding:12px 14px;font-size:14.5px}
  .badges{gap:7px}
  .badge{padding:8px 13px;font-size:13.5px}
  .stamp{font-size:11.5px;letter-spacing:1.4px;padding:9px 16px;margin-top:var(--sp-3xl)}

  /* форма заявки */
  form{padding:var(--sp-2xl) var(--sp-lg)}
  .form-band .container{gap:var(--sp-2xl)}
  input,select{font-size:16px}          /* 16px - иначе iOS зумит при фокусе */
  form .btn{width:100%;text-align:center}

  /* FAQ */
  .faq summary{font-size:16px}
  .faq details{padding:var(--sp-md) 0}

  /* подвал */
  footer{padding:46px 0 26px}
  .footer-grid{gap:var(--sp-2xl);margin-bottom:var(--sp-3xl)}

  /* ── СТАТЬИ ── */
  .post-head{padding:26px 0 2px}
  .post-head h1{font-size:26px;letter-spacing:-.5px}
  .post-lead{font-size:16.5px;margin-top:var(--sp-lg)}
  .post-meta{font-size:11px}
  .crumbs{font-size:12.5px;line-height:1.5}
  .post{padding:var(--sp-2xl) 0 46px}
  .post h2{font-size:21px;margin:var(--sp-3xl) 0 var(--sp-md)}
  .post h3{font-size:17.5px;margin:var(--sp-2xl) 0 6px}
  .post p,.post li{font-size:16.5px;line-height:1.6}
  .post ul,.post ol{margin-left:19px}
  .callout{padding:var(--sp-lg)}
  .callout p{font-size:15.5px}
  .post-cta{margin-top:var(--sp-3xl);padding-top:var(--sp-2xl)}
  .post-cta .btn{width:100%;text-align:center}
  .post-card{padding:var(--sp-lg) var(--sp-2xl)}
  .post-card h2{font-size:19px}
  .post-card p{font-size:15px}

  /* демо-скриншоты: во всю ширину экрана и кликабельны для увеличения,
     иначе таблицы внутри картинки на телефоне не прочитать */
  figure{margin:var(--sp-2xl) 0}
  .post figure,.container > figure{margin-left:-18px;margin-right:-18px}
  .post figure img,.container > figure img{border-radius:0;border-left:none;border-right:none}
  figcaption{font-size:13px;padding:0 18px}
  a.zoom{display:block}
  a.zoom::after{content:"нажмите, чтобы увеличить";display:block;font-size:12px;
    color:var(--body);margin-top:7px;padding:0 18px;font-family:var(--mono);
    letter-spacing:.3px;text-transform:uppercase}
}

@media(max-width:400px){
  h1{font-size:27px}
  .post-head h1{font-size:24px}
  nav .btn{padding:9px 12px;font-size:12.5px}
  .wordmark{font-size:14px}
}

/* ── доводка мобильной вёрстки по факту просмотра ── */
@media(max-width:640px){
  /* На телефоне сначала суть, потом иллюстрация: было order:-1,
     из-за чего первый экран занимала картинка, а заголовок уходил под него. */
  .hero .container{gap:var(--sp-2xl)}
  .hero-img{order:2;margin-top:var(--sp-sm)}
  .hero-img img{max-height:250px;object-fit:contain;object-position:left}

  /* цифры оффера - в одну строку тремя колонками, а не «2 + перенос» */
  .hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .hero-fact .num{font-size:19px;letter-spacing:-.3px}
  .hero-fact .cap{font-size:11.5px;line-height:1.3}

  /* крошки: скрываем название текущей страницы - оно и так в заголовке,
     а на узком экране занимало вторую строку */
  .crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

}

/* ═══ ФОТО В ШАПКЕ СТАТЬИ: картинка слева, текст справа ═══ */
.post-head.with-photo .container{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
gap:var(--sp-5xl);align-items:center}
.post-photo{margin:0;order:-1}
.post-photo img{width:100%;height:auto;display:block;border-radius:var(--r-md);
border:1px solid var(--hairline)}
.post-head.with-photo h1{font-size:36px;letter-spacing:-.9px}
.post-head.with-photo .post-lead{margin-top:var(--sp-lg);font-size:18px}

@media(max-width:900px){
  .post-head.with-photo .container{grid-template-columns:1fr;gap:var(--sp-2xl)}
  .post-head.with-photo h1{font-size:30px}
  .post-photo{max-width:420px}
}
@media(max-width:640px){
  .post-head.with-photo h1{font-size:26px}
  .post-photo{max-width:100%}
  .post-photo img{border-radius:var(--r-sm)}
}

/* текстовая часть шапки — одна ячейка сетки, иначе элементы разъезжаются */
.post-head.with-photo .post-head-text{min-width:0}
.post-head.with-photo{padding:44px 0 12px}
.post-head.with-photo .crumbs{margin-bottom:var(--sp-md)}
.post-head.with-photo .post-meta{margin-bottom:var(--sp-md)}
.post-head.with-photo h1{margin-bottom:0}
@media(max-width:640px){.post-head.with-photo{padding:22px 0 4px}}

/* ═══ КАРТОЧКА СТАТЬИ С ФОТО: картинка слева, текст справа ═══ */
.post-card{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
gap:var(--sp-2xl);align-items:center;padding:var(--sp-lg)}
.card-photo{margin:0;overflow:hidden;border-radius:var(--r-md);background:var(--canvas-soft)}
.card-photo img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.card-text{min-width:0;padding:var(--sp-sm) var(--sp-lg) var(--sp-sm) 0}
.post-card h2{font-size:21px}
.post-card .more{margin-top:10px}
.post-list{max-width:900px}

@media(max-width:760px){
  .post-card{grid-template-columns:1fr;gap:var(--sp-lg);padding:var(--sp-lg)}
  .card-photo img{aspect-ratio:16/9}
  .card-text{padding:0}
}

/* ai-band: плашка «подключим организацию к ИИ» */
.ai-band{background:var(--dark);color:var(--on-dark);padding:var(--sp-5xl) 0}
.ai-band .container{display:grid;grid-template-columns:1fr auto;gap:var(--sp-3xl);align-items:center}
.ai-band .eyebrow{display:block;color:var(--yellow);margin-bottom:10px}
.ai-band h2{font-size:27px;letter-spacing:-.5px;line-height:1.2;margin:0 0 10px;color:var(--on-dark)}
.ai-band p{color:var(--on-dark-body);font-size:16px;line-height:1.5;max-width:780px;margin:0}
.ai-band .btn{white-space:nowrap}
@media(max-width:900px){
  .ai-band{padding:var(--sp-3xl) 0}
  .ai-band .container{grid-template-columns:1fr;gap:var(--sp-2xl)}
  .ai-band h2{font-size:22px}
  .ai-band p{font-size:15.5px}
  .ai-band .btn{width:100%;text-align:center}
}

/* doc-list: вертикальный чек-лист в узкой колонке (req-list — только для полосы process-note) */
.doc-list{list-style:none;margin:0}
.doc-list li{position:relative;padding:11px 0 11px 28px;font-size:15.5px;color:var(--body);
  border-bottom:1px solid var(--hairline)}
.doc-list li:last-child{border-bottom:none}
.doc-list li::before{content:"✓";position:absolute;left:2px;top:11px;color:#1a9a4a;font-weight:700}
.doc-list li b{color:var(--ink);font-weight:600}

/* ============================================================
   v18 — выпадающее меню, бегущая полоса, мягкое появление
   ============================================================ */

/* выпадающий список в шапке */
.nav-links .has-sub{position:relative}
.nav-links .sub-toggle{font:inherit;font-size:15px;color:var(--body);background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.nav-links .sub-toggle::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .18s ease}
.nav-links .has-sub:hover .sub-toggle,.nav-links .sub-toggle:focus-visible{color:var(--ink)}
.nav-links .has-sub[data-open="true"] .sub-toggle::after{transform:rotate(-135deg) translateY(-1px)}
.nav-links .sub{position:absolute;top:calc(100% + 14px);left:-16px;min-width:232px;margin:0;padding:8px;list-style:none;
  background:#fff;border:1px solid var(--hairline);border-radius:14px;box-shadow:0 18px 40px -18px rgba(18,20,26,.28);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.nav-links .sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-links .has-sub:hover .sub,.nav-links .has-sub:focus-within .sub,.nav-links .has-sub[data-open="true"] .sub{
  opacity:1;visibility:visible;transform:translateY(0)}
.nav-links .sub li{display:block}
.nav-links .sub a{display:block;padding:9px 12px;border-radius:9px;font-size:15px;color:var(--body);white-space:nowrap}
.nav-links .sub a:hover{background:var(--yellow-soft);color:var(--ink)}

/* бегущая полоса */
.marquee{background:var(--dark);color:var(--on-dark);overflow:hidden;padding:16px 0;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.marquee-track{display:flex;width:max-content;animation:marquee-run 44s linear infinite}
.marquee-track span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.marquee-track span i{font-style:normal;color:var(--yellow);font-size:11px}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* мягкое появление блоков при скролле */
/* прячем только когда JS включён: без скриптов контент виден сразу (аудит 14.10) */
@media (scripting:enabled){
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:none}
}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}

/* карточка продукта на главной */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
.hub-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:var(--sp-2xl);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(18,20,26,.34);border-color:#d9d9d9}
.hub-card .eyebrow{display:block;margin-bottom:10px}
.hub-card h3{margin:0 0 10px}
.hub-card p{color:var(--body);font-size:15px;line-height:1.55;margin:0 0 18px}
.hub-card .how{margin-top:auto;font-size:15px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.hub-card .how::after{content:"→";transition:transform .2s ease}
.hub-card:hover .how::after{transform:translateX(4px)}
.hub-card.lead-card{background:var(--yellow-soft);border-color:#f0e2a8}

/* три ценности */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg);counter-reset:v}
.value{position:relative;padding-top:22px;border-top:2px solid var(--ink)}
.value .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;color:var(--body);display:block;margin-bottom:12px}
.value h3{margin:0 0 10px;font-size:21px;letter-spacing:-.3px}
.value p{margin:0;color:var(--body);font-size:15px;line-height:1.55}

@media (max-width:900px){
  .hub,.values{grid-template-columns:1fr}
}
@media (max-width:1024px){
  .nav-links .sub{position:static;display:contents;opacity:1;visibility:visible;
    transform:none;box-shadow:none;border:0;border-radius:0;padding:0;margin:0;
    min-width:0;background:none}
  .nav-links .sub a{padding:12px 0;border-radius:0;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* кредо: портрет + две цитаты («мы не заменяем людей») */
.creed{background:var(--canvas-soft);border-bottom:1px solid var(--hairline)}
.creed .container{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:var(--sp-5xl);align-items:center}
.creed-photo{position:relative;border-radius:var(--r-md);overflow:hidden;background:#ececeb}
.creed-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:28% center;aspect-ratio:4/3.4}
.creed-quote{margin:0}
.creed-quote .eyebrow{display:block;margin-bottom:18px}
.creed-quote p{font-size:26px;line-height:1.35;letter-spacing:-.4px;color:var(--ink);margin:0 0 18px;font-weight:500}
.creed-quote p + p{font-size:17px;line-height:1.55;letter-spacing:0;color:var(--body);font-weight:400;max-width:640px}
.creed-quote p b{background:linear-gradient(transparent 62%,var(--yellow) 62%);font-weight:500}
.creed-sign{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline)}
.creed-sign .who{font-size:15px;font-weight:500;color:var(--ink)}
.creed-sign .role{font-size:14px;color:var(--body)}
@media (max-width:900px){
  .creed .container{grid-template-columns:1fr;gap:var(--sp-3xl)}
  .creed-quote p{font-size:22px}
}

/* ── главная: компактный первый экран, чтобы лого, слоган и полоса влезали в один экран ── */
.hero--home{padding:38px 0 30px}
.hero--home .container{align-items:center}
.brandline{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--body);margin-bottom:18px}
.brandline b{color:var(--ink);font-weight:500}
.hero--home h1{font-size:52px;line-height:1.06;letter-spacing:-1.6px;margin-bottom:16px}
.hero--home .lead{font-size:18px;line-height:1.5;max-width:560px;margin-bottom:26px}
.hero--home .hero-form form{padding:26px}
@media (max-width:1100px){.hero--home h1{font-size:42px;letter-spacing:-1px}}

/* карточки продуктов: убираем «ссылочный» вид у кликабельной карточки */
.hub-card,.hub-card:hover,.hub-card:visited{text-decoration:none;color:var(--ink)}
.hub-card *{text-decoration:none}
.hub-card h3{color:var(--ink)}
.hub-card .how{color:var(--ink);text-decoration:none;border-bottom:0}

/* четыре ценности в ряд */
.values.values-4{grid-template-columns:repeat(4,1fr);gap:var(--sp-2xl)}
.values.values-4 .value h3{font-size:19px}
@media (max-width:1100px){.values.values-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.values.values-4{grid-template-columns:1fr}}

/* цитата внутри блока кредо */
.creed-quote .creed-cite{font-style:italic;font-size:17px;line-height:1.6;color:var(--body);
  padding-left:20px;border-left:2px solid var(--yellow);max-width:640px}

/* ── пиктограммы продуктов: линейные, с тихой постоянной анимацией и усилением на hover ── */
.hub-ic{display:block;width:44px;height:44px;margin-bottom:16px;color:var(--ink)}

/* 01 столбики отчёта — подрастают по очереди */
.ic-bars .b{transform-origin:bottom;animation:bar-grow 3.4s ease-in-out infinite}
.ic-bars .b2{animation-delay:.25s}.ic-bars .b3{animation-delay:.5s}
@keyframes bar-grow{0%,70%,100%{transform:scaleY(1)}35%{transform:scaleY(.55)}}
/* 02 чат — точки набора */
.ic-chat .d{animation:dot-blink 1.6s ease-in-out infinite}
.ic-chat .d2{animation-delay:.2s}.ic-chat .d3{animation-delay:.4s}
@keyframes dot-blink{0%,100%{opacity:.25}45%{opacity:1}}
/* 03 узлы — пульс связей */
.ic-nodes .n{animation:node-pulse 3s ease-in-out infinite}
.ic-nodes .n2{animation-delay:.4s}.ic-nodes .n3{animation-delay:.8s}
@keyframes node-pulse{0%,100%{opacity:.35}50%{opacity:1}}
/* 04 воронка — капля падает */
.ic-funnel .drop{animation:drop-fall 2.6s ease-in-out infinite}
@keyframes drop-fall{0%,60%{transform:translateY(0);opacity:0}70%{opacity:1}100%{transform:translateY(7px);opacity:0}}
/* 05 документ — галочка прорисовывается */
.ic-doc .tick{stroke-dasharray:14;stroke-dashoffset:14;animation:tick-draw 3.2s ease-in-out infinite}
@keyframes tick-draw{0%,15%{stroke-dashoffset:14}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}
/* 06 коробки — верхняя чуть покачивается */
.ic-box .top{transform-origin:center;animation:box-lift 3.6s ease-in-out infinite}
@keyframes box-lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.hub-card:hover .hub-ic{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .hub-ic *{animation:none!important}
  .ic-doc .tick{stroke-dashoffset:0}  /* без анимации галочка должна быть просто нарисована */
}

/* крупный демонстрационный терминал на главной */
.demo-band{background:var(--dark);color:var(--on-dark);padding:var(--sp-section) 0}
.demo-band .section-head h2{color:var(--on-dark)}
.demo-band .section-head .lead{color:var(--on-dark-body)}
.demo-band .section-head .eyebrow{color:var(--yellow)}
.demo-shell{max-width:900px;margin:0 auto;background:#141414;border:1px solid #2a2a2a;border-radius:14px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);overflow:hidden}
.demo-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #262626;background:#171717}
.demo-top i{width:10px;height:10px;border-radius:50%;background:#333;display:block}
.demo-top i:first-child{background:#e05c52}.demo-top i:nth-child(2){background:#e0b400}.demo-top i:nth-child(3){background:#2f9e50}
.demo-top span{margin-left:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6f6f6f}
.demo-body{padding:26px 26px 30px;font-family:var(--mono);font-size:14px;line-height:1.7;min-height:250px}
.demo-q{color:var(--yellow);margin-bottom:10px}
.demo-q::before{content:"› ";opacity:.6}
.demo-a{color:#e6e6e6;white-space:pre-line;margin:0}
.demo-a b{color:#fff;font-weight:500}
.demo-a .hl{color:var(--yellow)}
.demo-cursor{display:inline-block;width:8px;height:15px;background:var(--yellow);vertical-align:text-bottom;
  margin-left:2px;animation:blink 1.1s steps(1) infinite}
.demo-note{max-width:900px;margin:16px auto 0;font-size:13px;color:#7b7b7b;text-align:center}
@media (max-width:720px){.demo-body{font-size:12.5px;padding:20px}}

/* иллюстрация в разделе */
.illu-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:var(--sp-5xl);align-items:center}
.illu-split img{width:100%;height:auto;display:block}
@media (max-width:900px){.illu-split{grid-template-columns:1fr}}

/* знак бренда вместо иллюстрации в блоке кредо */
.creed-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  min-height:300px;padding:48px 24px;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md)}
.creed-mark svg{width:104px;height:104px;display:block}
.creed-mark span{font-family:var(--mono);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--body)}


/* ── бургер мобильного меню ── */
.nav-burger{flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:38px;padding:0 9px;margin:0;background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.nav-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
  transition:transform .2s ease,opacity .18s ease}
nav[data-nav-open="true"] .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav[data-nav-open="true"] .nav-burger span:nth-child(2){opacity:0}
nav[data-nav-open="true"] .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1025px){.nav-burger{display:none}}
@media (prefers-reduced-motion:reduce){.nav-burger span{transition:none}}

/* НАВИГАЦИЯ НА ТЕЛЕФОНЕ: бургер + выпадающая панель на всю ширину.
   Было - горизонтально прокручиваемая полоса, из-за неё подменю «Ещё»
   уезжало за правый край и оставляло пустое место под шапкой.
   С v32 панель работает до 1024 px (планшеты): на 901–1024 пять разделов и кнопка в строку не помещаются. */
@media(max-width:1024px){
  body > nav{padding:11px 0}
  nav .container{flex-wrap:nowrap;gap:10px}
  nav .btn{white-space:nowrap}
  .nav-burger{margin-left:-4px}
  .nav-burger{display:inline-flex;order:3;flex:0 0 auto}
  nav .btn{flex:0 1 auto;min-width:0;margin-left:auto}   /* кнопка у бургера справа, а не посередине шапки */
  .wordmark{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-links{position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;gap:0;width:auto;margin:0;padding:6px 18px 14px;
    list-style:none;background:#fff;border-bottom:1px solid var(--hairline);
    box-shadow:0 18px 40px -22px rgba(18,20,26,.35);
    max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  nav[data-nav-open="true"] .nav-links{display:flex}
  .nav-links li{flex:0 0 auto;width:100%}
  .nav-links a{font-size:16px;display:block;padding:12px 0;
    border-bottom:1px solid var(--hairline);white-space:normal}
  .nav-links li:last-child a{border-bottom:0}
  .nav-links a.active{font-weight:600;border-bottom:1px solid var(--hairline);
    padding-bottom:12px;color:var(--ink)}
  /* «Ещё» на телефоне не нужно - пункты подменю идут общим списком */
  .nav-links .sub-toggle{display:none}
  .nav-links .sub a{color:var(--ink)}
  .nav-links .has-sub{display:contents}
}

@media(max-width:400px){
  nav .btn{padding:9px 11px;font-size:12px}
  nav .container{gap:8px}
  .wordmark{font-size:13px;gap:7px}
  .wordmark .mark{flex:0 0 21px;width:21px;height:21px}
  .nav-burger{width:36px;padding:0 7px}
  nav .container{padding:0 13px}
}

/* РУЧНАЯ РУТИНА → АГЕНТ (страница «Бухгалтеру», 16.09.2026).
   Пять пар «сейчас руками / забирает агент»: слева картинка, в середине заголовок дела и
   как оно делается сейчас (красный крест), справа жёлтая плашка с тем, что делает агент. */
.swap-list{display:grid;gap:var(--sp-lg)}
.swap{display:grid;grid-template-columns:220px 1fr 1fr;gap:var(--sp-2xl);align-items:center;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--sp-2xl);box-shadow:var(--shadow)}
.swap img{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.swap h3{font-size:18px;margin-bottom:var(--sp-sm);color:var(--ink)}
.swap .tag{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.55px;text-transform:uppercase;margin-bottom:6px}
.swap .was{position:relative;padding-left:26px;font-size:15px;color:var(--body);line-height:1.5}
.swap .was .tag{color:var(--red)}
.swap .was::before{content:"✕";position:absolute;left:0;top:1px;color:var(--red);font-weight:700}
.swap .now{position:relative;padding:16px 18px 16px 44px;font-size:15px;color:var(--body);line-height:1.5;
  background:var(--yellow-soft);border:1px solid #f0e29a;border-radius:var(--r-sm)}
.swap .now .tag{color:var(--ink)}
.swap .now::before{content:"✓";position:absolute;left:16px;top:17px;color:#1a9a4a;font-weight:700}
.swap .now b,.swap .was b{color:var(--ink);font-weight:600}
@media(max-width:900px){
  .swap{grid-template-columns:1fr;gap:var(--sp-lg)}
  .swap img{max-width:280px}
}

/* ============================================================
   v23 — меню по ролям: 4 группы, в выпадашке название + пояснение
   ============================================================ */
.nav-links{align-items:center}
.nav-links .sub.sub-rich{min-width:330px;padding:10px}
.nav-links .sub-rich a{white-space:normal;padding:10px 12px}
.nav-links .sub-rich a b{display:block;font-weight:600;color:var(--ink);font-size:15px;line-height:1.3}
.nav-links .sub-rich a span{display:block;font-size:13px;color:var(--body);line-height:1.35;margin-top:2px}
.nav-links .sub-rich a.active{border-bottom:0;padding-bottom:10px;background:var(--yellow-soft)}
.nav-links .sub li.sub-head{display:none}
.nav-links .has-sub.is-current > .sub-toggle{color:var(--ink);font-weight:600}
.nav-links .nav-premium > .sub-toggle{color:var(--ink)}
.nav-links .nav-premium > .sub-toggle::before{content:"";width:7px;height:7px;border-radius:2px;background:#0d0e12;margin-right:2px}
.nav-links .nav-premium .sub{background:#0d0e12;border-color:#0d0e12}
.nav-links .nav-premium .sub a b{color:#fff}
.nav-links .nav-premium .sub a span{color:#9a9da6}
.nav-links .nav-premium .sub a:hover,.nav-links .nav-premium .sub a.active{background:rgba(255,255,255,.08)}
/* v32: подписи разделов и кнопка не переносятся; на 1025–1199 px — плотнее; выпадашка последнего раздела
   (.sub-end, «Разработка») открывается влево, иначе уходит за правый край; пункт .nav-panel-only («Контакты») —
   только в панели под бургером, на широком экране он в подвале */
.nav-links .sub-toggle,nav .btn{white-space:nowrap}
@media (min-width:1025px) and (max-width:1199px){
  nav .container{gap:16px}
  .nav-links{gap:16px}
  .nav-links > li > a,.nav-links .sub-toggle{font-size:14px}
  nav .btn{padding:9px 14px}
}
@media (min-width:1025px){
  .nav-links .sub-end .sub{left:auto;right:-16px}
  .nav-links .nav-panel-only{display:none}
}
@media (max-width:1024px){
  .nav-links .sub li.sub-head{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#DA1626;padding:16px 0 4px}
  .nav-links .sub-rich a span{display:none}
  .nav-links .sub-rich a b{font-weight:400;font-size:16px}
  .nav-links .nav-premium .sub{background:none}
  .nav-links .nav-premium .sub a b{color:var(--ink)}
}

/* ============================================================
   v25 — услуги на главной как журнальные развороты: 4 роли
   роль = заголовок с маркером, тезис = подзаголовок, услуги = панель
   ============================================================ */
.mag{padding:var(--sp-3xl) 0 0}
.spread{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:var(--sp-3xl) 64px;align-items:center;
  padding:64px 0;border-top:1px solid var(--hairline)}
.spread:first-of-type{border-top:0}
.spread.rev .spread-photo{order:-1}
.spread-num{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#DA1626;margin-bottom:var(--sp-md)}
.spread-num::before{content:"";width:28px;height:1px;background:#DA1626}
.spread-role{font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-1px;color:var(--ink);margin:0 0 var(--sp-lg)}
.spread-role em{font-style:normal;background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.spread-title{display:block;font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.3px;color:var(--ink);text-decoration:none;margin-bottom:var(--sp-md);text-wrap:balance}
.spread-title em{font-style:normal;color:#DA1626}
.spread-title:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:4px}
.spread-lead{font-size:15.5px;line-height:1.5;color:var(--body);margin-bottom:var(--sp-2xl);max-width:520px}
.spread-services{background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-md);padding:14px 20px 6px}
.spread-services > .eyebrow{display:flex;align-items:center;gap:8px;color:var(--ink);margin-bottom:4px}
.spread-services > .eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--yellow)}
.spread-list{list-style:none;margin:0;padding:0}
.spread-list a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;
  padding:12px 0;border-top:1px solid var(--hairline);text-decoration:none;color:var(--ink);transition:padding-left .18s ease}
.spread-list a b{font-weight:600;font-size:15.5px;line-height:1.3}
.spread-list a span{grid-column:1;font-size:13.5px;color:var(--body);line-height:1.4;margin-top:2px}
.spread-list a .p{grid-column:2;grid-row:1/3;font-family:var(--mono);font-size:12px;color:var(--body);white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.spread-list a .p::after{content:"→";color:var(--ink);transition:transform .18s ease}
.spread-list a:hover{padding-left:8px}
.spread-list a:hover b{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.spread-list a:hover .p::after{transform:translateX(4px)}
.spread-photo{display:block;position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--hairline);background:var(--canvas-soft)}
.spread-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.spread-photo.illu img{mix-blend-mode:multiply}
.spread-photo:hover img{transform:scale(1.025)}
.spread-photo figcaption{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;
  background:var(--yellow);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 12px;border-radius:6px}
.spread-photo figcaption::before{content:"";width:6px;height:6px;border-radius:50%;background:#DA1626}
/* тёмный разворот: корпоративный ИИ, во всю ширину */
.mag-dark{background:#0d0e12;margin-top:var(--sp-2xl)}
.mag-dark .spread{border-top:0;padding:80px 0}
.mag-dark .spread-num{color:#FFD600}
.mag-dark .spread-num::before{background:#FFD600}
.mag-dark .spread-num i{color:#9a9da6}
.mag-dark .spread-role{color:#fff}
.mag-dark .spread-role em{background:none;color:#FFD600}
.mag-dark .spread-title{color:#fff}
.mag-dark .spread-title em{color:#FFD600}
.mag-dark .spread-services{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.mag-dark .spread-services > .eyebrow{color:#fff}
.mag-dark .spread-lead{color:#b9bcc4}
.mag-dark .spread-list,.mag-dark .spread-list a{border-color:rgba(255,255,255,.14)}
.mag-dark .spread-list a{color:#fff}
.mag-dark .spread-list a span,.mag-dark .spread-list a .p{color:#9a9da6}
.mag-dark .spread-list a .p::after{color:#FFD600}
.mag-dark .spread-photo{border-color:rgba(255,255,255,.12);background:#16181d}
@media (max-width:980px){
  .spread{grid-template-columns:1fr;gap:var(--sp-2xl);padding:44px 0}
  .spread .spread-photo,.spread.rev .spread-photo{order:-1}
  .spread-role{font-size:32px}
  .spread-title{font-size:20px}
  .mag-dark .spread{padding:56px 0}
}
@media (max-width:640px){
  .spread-list a{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .spread-list a .p{grid-column:1;grid-row:3;margin-top:6px}
}

/* ═══════════════════════════════════════════════════════════
   АУДИТ САЙТА 14.10.2026 (impeccable + vercel + taste)
   ═══════════════════════════════════════════════════════════ */
/* A1: нижняя форма не шире экрана (был фикс только в 1c-kazahstan) */
@media(max-width:900px){
  .form-band .container{grid-template-columns:minmax(0,1fr)}
  .form-band form,.form-band .container>*{min-width:0}
  .form-band select{min-width:0;width:100%;max-width:100%}
  /* A2: штамп не раздвигает «Как проходит» */
  .process{grid-template-columns:minmax(0,1fr)}
  .stamp{width:auto;max-width:100%;white-space:normal;letter-spacing:1px}
}
/* A5: кнопка в статье блога не краснеет на жёлтом */
.post a.btn,.post a.btn:hover{color:var(--ink);text-decoration:none}
/* B10: подписи 12px, подписи полей чёрным */
.eyebrow,label{font-size:12px}
label{color:var(--ink)}
@media(max-width:640px){.hero-fact .cap,.step .num,.stamp{font-size:12px}}
/* C11: видимый фокус с клавиатуры */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ai-band a:focus-visible,.hero-dark a:focus-visible,.nav-premium a:focus-visible,.sym-res a:focus-visible{outline-color:var(--yellow)}
[id]{scroll-margin-top:84px}
h1,h2,h3{text-wrap:balance}
/* C12: ссылки в тексте в фирменном стиле, а не синие браузерные */
section p a:not(.btn),section li a:not(.btn),.asterisk a,.legal a,.cmp a,td a,th a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
section p a:not(.btn):hover,section li a:not(.btn):hover,.legal a:hover,.cmp a:hover{text-decoration-color:var(--ink)}
/* v32: карточки-ссылки «Смежные услуги» (.rel) и «Ещё» (.also) — не подчёркиваются целиком (правило выше их задевало) */
section .rel a:not(.btn),section .also li > a:not(.btn){text-decoration:none}
/* v32 (seo-consistency): единый блок в конце страниц услуг — «Смежные услуги» и «Статьи по теме». Разметка одна на всех страницах:
   <section class="rel-sec" aria-labelledby="rel-h"><div class="container"><h2 id="rel-h">Смежные услуги</h2>
     <ul class="rel"><li><a href="…"><b>Услуга</b><span>Подпись</span></a></li> …2–4…</ul>
     <div class="rel-arts"><h3 id="rel-arts-h">Статьи по теме</h3><ul aria-labelledby="rel-arts-h"><li><a href="blog/….html">Статья</a></li> …2–3…</ul></div>
   </div></section>
   Селекторы через .rel-sec специфичнее постраничных <style>, поэтому блок выглядит одинаково на всех страницах. */
.rel-sec{padding:56px 0 64px}
.rel-sec h2{font-size:26px;letter-spacing:-.4px;line-height:1.2;margin:0 0 18px}
.rel-sec .rel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.rel-sec .rel li{margin:0;padding:0}
.rel-sec .rel a{display:block;height:100%;padding:18px 20px;border:1px solid var(--hairline);border-radius:var(--r-md);color:var(--ink);background:#fff;text-decoration:none;transition:border-color .15s}
.rel-sec .rel a:hover{border-color:var(--ink)}
.rel-sec .rel a:hover > b{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.rel-sec .rel a > b{display:block;font-size:17px;font-weight:600;line-height:1.3;margin-bottom:6px;color:var(--ink)}
.rel-sec .rel a > span{display:block;font-size:15px;line-height:1.5;color:var(--body)}
.rel-sec .rel-arts{margin-top:32px}
.rel-sec .rel-arts h3{font-size:18px;letter-spacing:-.2px;line-height:1.3;margin:0 0 10px}
.rel-sec .rel-arts ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rel-sec .rel-arts li{font-size:16px;line-height:1.45;margin:0;padding:0}
@media(max-width:1100px){.rel-sec .rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rel-sec{padding:40px 0 48px}.rel-sec h2{font-size:22px}.rel-sec .rel{grid-template-columns:1fr;gap:10px}.rel-sec .rel a{padding:14px 16px}}
/* v32 (seo-consistency): хлебные крошки на страницах услуг — <div class="crumbs" role="navigation" aria-label="Хлебные крошки"> в начале первого экрана; на тёмном первом экране — светлые */
.hero-dark .crumbs,.hero-dark .crumbs a{color:rgba(255,255,255,.74)}
.hero-dark .crumbs a:hover{color:#fff}
/* v32: общие мелочи, которые страницы задавали инлайном */
.nw{white-space:nowrap}
body[data-market="int"] .ru-only{display:none!important}
body:not([data-market="int"]) .int-only{display:none!important}
/* C13: состояние «заявка получена» */
.lead-ok{display:flex;flex-direction:column;gap:10px;background:#fff;color:var(--ink);border:1px solid #eadf9e;border-radius:var(--r-md);padding:var(--sp-3xl);box-shadow:var(--shadow)}   /* color: в тёмном первом экране «Заявка у нас» было белым на белом */
.lead-ok b{font-size:20px;letter-spacing:-.2px}
.lead-ok p{color:var(--body);font-size:15px;margin:0}
.lead-ok a{color:var(--ink);font-weight:600}
.lead-ok .ok-mark{width:40px;height:40px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px}
/* C14: вопросы и ответы в две колонки */
.faq-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.faq-split .faq{max-width:none}
.faq-side{position:sticky;top:96px;margin-bottom:0}
.faq-side .btn{margin-top:var(--sp-lg)}
@media(max-width:860px){.faq-split{grid-template-columns:1fr;gap:24px}.faq-side{position:static}}
/* C15/контраст: зелёный текст темнее */
.cmp .yes,.chan-h span.ok{color:#127a38}
.legal h1{overflow-wrap:anywhere}
/* C15: список «Подходит» с галочками, а не с крестиками */
.fit-list li::before{content:"✓";color:#1a9a4a}

/* D16: свой первый экран у каждой страницы — фишка справа, короткая форма слева (14.10.2026) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-quick{background:none;border:0;box-shadow:none;padding:0;margin:var(--sp-2xl) 0 var(--sp-md);gap:8px;max-width:620px}
.hq-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;gap:8px}
.hq-row input{padding:13px 14px;min-width:0}
.hq-row .btn{white-space:nowrap}
/* v32: на 901–1180 px в три колонки не помещались подсказка телефона и длинная надпись на кнопке — имя и телефон
   в ряд, кнопка строкой ниже (страницы со своим правилом для .hero-quick .hq-row его сохраняют) */
@media (min-width:901px) and (max-width:1180px){.hq-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hq-row .btn{grid-column:1/-1}}
.hero-quick .form-note{font-size:12.5px}
.hero-more{display:inline-block;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--yellow);margin-bottom:var(--sp-2xl)}
.hero-more:hover{border-color:var(--ink)}
.hero-tg{margin-top:var(--sp-2xl);font-size:16px;padding:16px 26px}
.hero-or{font-size:14px;color:var(--body);margin:14px 0 -12px}
.hero-visual{margin:0;position:relative;align-self:center}
.hero-visual img{display:block;width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--hairline);box-shadow:0 24px 48px -24px rgba(28,28,28,.28);background:#fff}
.hero-visual img[src*="hero-moysklad"],.hero-visual img[src*="hero-bitrix24"]{border:0;box-shadow:none;background:none}
.hero-visual figcaption{position:absolute;left:14px;bottom:14px;margin:0;background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.3px;padding:7px 12px;border-radius:999px;max-width:calc(100% - 28px)}
.hero-dark .hero-more{color:#fff}
.hero-dark .hero-quick .form-note,.hero-dark .hero-or{color:#c9cbd1}
.hero-dark .hero-quick .form-note a{color:#fff}
.hero-dark .hero-visual img{border-color:#2a2c33}
@media(max-width:900px){
  .hero-visual{order:0;margin-top:var(--sp-lg)}
  .hq-row{grid-template-columns:1fr}
  .hero-quick{max-width:none}
}
/* D20: иллюстрации в карточках «Аварийной помощи» */
.card-ill{display:block;width:100%;height:130px;object-fit:contain;margin:0 0 var(--sp-lg)}
/* D18: компактный список вместо второй сетки карточек */
.compact-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.compact-list li{padding:18px 0 18px 28px;border-top:1px solid var(--hairline);position:relative}
.compact-list li::before{content:"✓";position:absolute;left:0;top:18px;color:#1a9a4a;font-weight:700}
.compact-list b{display:block;font-size:17px;font-weight:600;margin-bottom:4px;color:var(--ink)}
.compact-list span{display:block;font-size:15px;line-height:1.5;color:var(--body)}
.compact-list em{display:inline-block;margin-top:8px;font-style:normal;font-family:var(--mono);font-size:12px;background:var(--yellow-soft);border:1px solid #f0e29a;border-radius:6px;padding:3px 8px;color:var(--ink)}
@media(max-width:760px){.compact-list{grid-template-columns:1fr}}
.compact-list.compact-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.compact-list.compact-3{grid-template-columns:1fr}}
/* автозаполнение 14.10: телефон отдельным полем, Telegram необязательный */
label .opt{text-transform:none;letter-spacing:0;color:var(--body);font-family:var(--display);font-size:12px}