/* Raleway — самохостинг, снято с Google Fonts 15.09.2026.
   Подмножества: cyrillic и latin. Веса 400, 500, 600, 700. */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/raleway-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/raleway-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/raleway-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/raleway-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/raleway-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/raleway-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/raleway-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/raleway-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Mers Academy v4 — собрано из shell_head_v4 15.09.2026.
   Источник правды остаётся чанк shell_head_v4 (46): правим там, затем пересобираем файл.
   MODX не перезаписывает существующий файл — новая версия заливается под новым именем. */

/* ===== блок 1 ===== */
/* ============================================================
   MERS ACADEMY — дизайн-система по брендбуку
   Цвета: #FFFFFF · #00A8A8 · #1F2933 · #6B7280 · #0F2A44
   Шрифт: Raleway (заголовки — полужирный, текст — обычный)
   Фирменный элемент: электронный блок с дорожками платы
   ============================================================ */
:root {
  /* брендбук */
  --white:#FFFFFF;
  --teal:#00A8A8;
  --graphite:#1F2933;
  --grey:#6B7280;
  --navy:#0F2A44;
  /* производные — брендбук допускает подбор под задачу при сохранении контраста */
  --wash:#F7F9FA;
  --wash-2:#EDF3F3;
  --muted:#5F6875;
  --teal-ink:#00706F;
  --teal-soft:rgba(0,168,168,.10);
  --hair:#E4E9EC;
  --hair-dark:rgba(255,255,255,.14);

  --r:12px;
  --r-lg:20px;
  --r-pill:100px;
  --wrap:1120px;
  --pad:24px;

  --lift:0 1px 2px rgba(31,41,51,.04), 0 14px 34px -14px rgba(31,41,51,.16);
  --lift-hi:0 2px 4px rgba(31,41,51,.05), 0 26px 54px -20px rgba(31,41,51,.24);
  --lift-photo:0 40px 90px -46px rgba(15,42,68,.5), 0 4px 14px -6px rgba(15,42,68,.12);
  --lift-btn:0 10px 24px -12px rgba(15,42,68,.55), 0 2px 5px -2px rgba(15,42,68,.28);
  --lift-btn-hi:0 20px 38px -14px rgba(15,42,68,.55), 0 3px 8px -3px rgba(15,42,68,.3);

  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:"Raleway", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { overflow-x:hidden; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.7;
  color:var(--graphite);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; color:inherit; }
h1, h2, h3, h4 { margin:0; font-weight:700; line-height:1.15; letter-spacing:-.02em; }
p { margin:0; }
ul { margin:0; padding:0; list-style:none; }
:focus-visible { outline:3px solid var(--teal); outline-offset:3px; border-radius:4px; }

.skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy); color:#fff; padding:14px 20px; font-weight:600; border-radius:0 0 var(--r) 0; }
.skip:focus { left:0; top:0; }

.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); position:relative; z-index:1; }

/* ---------- типографика ---------- */
h1 { font-size:clamp(32px, 5.4vw, 58px); line-height:1.1; letter-spacing:-.028em; }
h2 { font-size:clamp(26px, 3.6vw, 40px); letter-spacing:-.024em; }
h3 { font-size:clamp(19px, 1.9vw, 21px); font-weight:600; line-height:1.35; letter-spacing:-.012em; }

.eyebrow {
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal-ink); margin-bottom:18px;
}
.eyebrow::before { content:""; width:28px; height:1px; background:var(--teal); flex:none; }
.on-dark .eyebrow { color:#7FE0DF; }
.on-dark .eyebrow::before { background:#7FE0DF; }

.lead { font-size:clamp(17px, 1.6vw, 19px); line-height:1.65; color:var(--muted); max-width:60ch; }
.on-dark .lead { color:rgba(255,255,255,.76); }
.num { font-variant-numeric:tabular-nums; }

/* ---------- секции: воздух ---------- */
section { padding:clamp(72px, 9.5vw, 132px) 0; position:relative; }
.wash { background:var(--wash); }
.on-dark { background:var(--navy); color:var(--white); }
.on-dark h2, .on-dark h3 { color:var(--white); }

.sec-head { max-width:720px; margin-bottom:clamp(40px, 5vw, 64px); }
.sec-head p { margin-top:18px; }
.sec-head--mid { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head--mid .eyebrow { justify-content:center; }
.sec-head--mid .lead { margin-left:auto; margin-right:auto; }

/* ---------- фирменный элемент: плата ---------- */
.pcb { position:absolute; pointer-events:none; color:var(--teal); opacity:.16; z-index:0; }
.pcb circle { fill:currentColor; stroke:none; }
.on-dark .pcb { color:#7FE0DF; opacity:.14; }
.pcb--hero { top:-16%; right:-16%; width:min(900px, 106vw); opacity:.20; }
.pcb--band { bottom:-32%; left:-14%; width:520px; opacity:.10; }
.pcb--call { top:-24%; right:-16%; width:560px; }

/* ---------- кнопки: парящие ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 32px;
  border:1px solid transparent; border-radius:var(--r);
  font-weight:600; font-size:16px; letter-spacing:.005em;
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary { background:var(--navy); color:var(--white); box-shadow:var(--lift-btn); }
.btn--primary:hover { background:#16385A; transform:translateY(-3px); box-shadow:var(--lift-btn-hi); }
.btn--primary:active { transform:translateY(-1px); }
.btn--soft { background:var(--white); color:var(--navy); border-color:var(--hair); box-shadow:var(--lift); }
.btn--soft:hover { border-color:var(--teal); color:var(--teal-ink); transform:translateY(-3px); box-shadow:var(--lift-hi); }
.btn--ghost { background:transparent; color:var(--white); border-color:var(--hair-dark); }
.btn--ghost:hover { border-color:#7FE0DF; color:#7FE0DF; transform:translateY(-3px); }
.btn--light { background:var(--white); color:var(--navy); box-shadow:0 12px 30px -14px rgba(0,0,0,.6); }
.btn--light:hover { transform:translateY(-3px); box-shadow:0 22px 44px -16px rgba(0,0,0,.6); }
.btn--sm { min-height:44px; padding:0 22px; font-size:15px; border-radius:10px; }
.btn--wide { width:100%; }
.cta-row { display:flex; flex-wrap:wrap; gap:14px; }
.cta-row--auto .btn { flex:0 0 auto; }
@media (max-width:639px) {
  .cta-row:not(.cta-row--auto) .btn { flex:1 1 100%; }
}

/* ---------- тестовая полоса ---------- */
.tbar { background:var(--wash-2); color:var(--muted); font-size:13px; line-height:1.55; text-align:center; padding:11px 20px; }
.tbar b { color:var(--teal-ink); font-weight:600; }

/* ---------- шапка ---------- */
.hdr { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--hair); }
.hdr__in { display:flex; align-items:center; gap:22px; height:76px; }
.hdr__logo img { height:26px; width:auto; }
.hdr__nav { display:none; gap:6px; margin-left:16px; }
.hdr__nav a {
  font-size:15px; font-weight:500; color:var(--muted);
  padding:9px 16px; border-radius:var(--r-pill); white-space:nowrap; cursor:pointer;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.hdr__nav a:hover { color:var(--graphite); background:var(--wash); }
.hdr__nav a.is-on { background:var(--navy); color:var(--white); font-weight:600; }
.hdr__nav a.is-on:hover { background:var(--navy); color:var(--white); }

/* ---------- второй уровень ---------- */
.subnav { position:relative; border-top:1px solid var(--hair); background:rgba(255,255,255,.82); }
.subnav__in { position:relative; display:flex; align-items:center; gap:14px; min-height:58px; }
.subnav__in::after {
  content:""; position:absolute; right:0; top:1px; bottom:1px; width:44px;
  pointer-events:none; background:linear-gradient(90deg, rgba(247,249,250,0), #FBFCFC 70%);
}

/* чип текущего раздела — только мобильный и планшет */
.subnav__sec {
  flex:none; display:inline-flex; align-items:center; gap:9px;
  height:38px; padding:0 12px 0 16px;
  background:var(--navy); color:var(--white);
  border:0; border-radius:var(--r-pill);
  font-family:var(--sans); font-size:14.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  box-shadow:var(--lift-btn);
}
.subnav__sec svg { width:13px; height:13px; flex:none; transition:transform .24s var(--ease); }
.subnav__sec.is-open svg { transform:rotate(180deg); }
.subnav__menu {
  position:absolute; top:calc(100% + 10px); left:var(--pad); z-index:80;
  min-width:240px; padding:8px;
  background:var(--white); border-radius:var(--r-lg); box-shadow:var(--lift-hi);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.subnav__menu.is-open { opacity:1; visibility:visible; transform:none; }
.subnav__menu button {
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 14px; border:0; background:transparent; border-radius:10px;
  font-family:var(--sans); font-size:16px; font-weight:500; color:var(--graphite);
  text-align:left; cursor:pointer;
  transition:background-color .18s var(--ease);
}
.subnav__menu button:hover { background:var(--wash); }
.subnav__menu button.is-on { background:var(--wash); font-weight:600; }
.subnav__menu button.is-on::after { content:""; width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none; }
.subnav__row { display:none; align-items:center; gap:4px; flex:1; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.subnav__row::-webkit-scrollbar { display:none; }
.subnav__row.is-on { display:flex; }
.sub {
  position:relative; display:inline-flex; align-items:baseline; gap:7px;
  font-size:14.5px; font-weight:500; color:var(--muted);
  padding:18px 14px; white-space:nowrap; cursor:pointer;
  transition:color .2s var(--ease);
}
.sub:first-child { padding-left:0; }
.sub:hover { color:var(--graphite); }
.sub b { font-size:12px; font-weight:500; color:#9AA3AE; }
.sub em { font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-ink); background:var(--teal-soft); border-radius:var(--r-pill); padding:3px 8px; }
.sub.is-on { color:var(--graphite); font-weight:600; }
.sub.is-on::after { content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--teal); border-radius:2px 2px 0 0; }
.sub.is-on:first-child::after { left:0; }
    .sub--main { font-size:15px; font-weight:700; color:var(--graphite); }
    .subnav__div { flex:none; align-self:center; width:1px; height:18px; background:var(--hair); margin:0 6px 0 12px; }
    .sub.is-soon { color:#A8B0B8; cursor:default; }
    .sub.is-soon:hover { color:#A8B0B8; }
.subnav__find { display:none; align-items:center; gap:10px; flex:none; width:260px; height:40px; padding:0 14px; border:1px solid var(--hair); border-radius:10px; background:var(--white); color:#9AA3AE; }
.subnav__find svg { width:16px; height:16px; flex:none; }
.subnav__find input { border:0; background:transparent; outline:none; width:100%; font-size:14px; color:var(--graphite); }
.subnav__find input::placeholder { color:#9AA3AE; }
.hdr__tail { margin-left:auto; display:flex; align-items:center; gap:16px; }
.hdr__tel { display:none; font-size:15px; font-weight:600; color:var(--graphite); white-space:nowrap; }
.ico { width:42px; height:42px; flex:none; display:none; align-items:center; justify-content:center; border:1px solid var(--hair); border-radius:10px; color:var(--muted); background:var(--white); transition:color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.ico:hover { color:var(--teal-ink); border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--lift); }
.ico svg { width:19px; height:19px; fill:currentColor; }
.hdr .btn { display:none; }
.burger { margin-left:auto; width:46px; height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:var(--white); border:1px solid var(--hair); border-radius:10px; cursor:pointer; }
.burger span { display:block; width:20px; height:1.5px; background:var(--graphite); transition:transform .22s var(--ease), opacity .22s var(--ease); }
.burger.on span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity:0; }
.burger.on span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.drawer { position:fixed; inset:0 0 0 auto; width:min(88vw, 380px); z-index:70; background:var(--white); box-shadow:-30px 0 70px -30px rgba(31,41,51,.4); padding:100px 28px 40px; transform:translateX(100%); transition:transform .34s var(--ease); overflow-y:auto; }
.drawer.on { transform:translateX(0); }
.drawer a { display:block; padding:13px 0; font-size:17px; font-weight:500; color:var(--muted); }
.drawer__grp { padding:18px 0; border-bottom:1px solid var(--hair); }
.drawer__grp > b { display:block; font-size:19px; font-weight:700; color:var(--graphite); margin-bottom:4px; }
.drawer__grp.is-on > b { color:var(--teal-ink); }
.drawer__grp a b { font-size:12px; font-weight:500; color:#9AA3AE; margin-left:6px; }
.drawer__grp a em { font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-ink); margin-left:8px; }
.drawer .btn { margin-top:28px; }
.drawer__tel { color:var(--teal-ink) !important; }
.scrim { position:fixed; inset:0; z-index:65; background:rgba(15,42,68,.34); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
.scrim.on { opacity:1; visibility:visible; }

/* ---------- первый экран ---------- */
.hero { padding:clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); overflow:hidden; }
.hero__in { display:grid; gap:clamp(40px, 5vw, 68px); align-items:center; }
.hero h1 { margin-bottom:26px; }
.hero h1 em { font-style:normal; color:var(--teal-ink); }
.hero .lead { margin-bottom:36px; }
.hero__media { position:relative; }
.shot { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--lift-photo); }
.shot img { width:100%; aspect-ratio:4/5; max-height:540px; object-fit:cover; object-position:center 20%; }
.badge {
  position:absolute; left:-14px; bottom:34px;
  background:var(--white); color:var(--graphite);
  border-radius:var(--r); padding:16px 22px;
  box-shadow:var(--lift-hi); display:flex; align-items:center; gap:14px;
}
.badge b { display:block; font-size:23px; font-weight:700; line-height:1.1; }
.badge span { display:block; font-size:12.5px; color:var(--muted); line-height:1.35; }
.badge i { width:38px; height:38px; flex:none; border-radius:10px; background:var(--teal-soft); color:var(--teal-ink); display:flex; align-items:center; justify-content:center; }
.badge i svg { width:19px; height:19px; }

/* ---------- цифры ---------- */
.facts { display:grid; grid-template-columns:repeat(2, 1fr); gap:2px; background:var(--hair); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--lift); }
.facts li { background:var(--white); padding:30px 26px 32px; }
.facts b { display:block; font-size:clamp(28px, 3.2vw, 38px); font-weight:700; letter-spacing:-.03em; line-height:1.05; color:var(--navy); font-variant-numeric:tabular-nums; }
.facts span { display:block; margin-top:10px; font-size:14px; line-height:1.5; color:var(--muted); }

/* ---------- полоса-оффер ---------- */
.offer { background:var(--navy); color:var(--white); border-radius:var(--r-lg); padding:clamp(32px, 4vw, 52px); display:grid; gap:26px; align-items:center; position:relative; overflow:hidden; box-shadow:var(--lift-hi); }
.offer h3 { font-size:clamp(21px, 2.4vw, 27px); font-weight:700; }
.offer p { color:rgba(255,255,255,.76); margin-top:12px; font-size:16px; }

/* ---------- карточки ---------- */
.cards { display:grid; gap:24px; }
.card { background:var(--white); border-radius:var(--r-lg); padding:clamp(28px, 3vw, 38px); box-shadow:var(--lift); transition:transform .26s var(--ease), box-shadow .26s var(--ease); }
.card:hover { transform:translateY(-5px); box-shadow:var(--lift-hi); }
.card h3 { margin-bottom:12px; }
.card p { color:var(--muted); font-size:16px; line-height:1.65; }
.card__n { display:block; font-size:13px; font-weight:600; letter-spacing:.16em; color:var(--teal-ink); margin-bottom:16px; font-variant-numeric:tabular-nums; }
.ico-box { width:52px; height:52px; border-radius:14px; background:var(--teal-soft); color:var(--teal-ink); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.ico-box svg { width:24px; height:24px; }

.pills { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; justify-content:center; }
.pill { font-size:15px; color:var(--muted); background:var(--white); border-radius:var(--r-pill); padding:11px 22px; box-shadow:var(--lift); }

/* ---------- сомнения ---------- */
.qa { display:grid; gap:2px; background:var(--hair); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--lift); }
.qa li { background:var(--white); padding:clamp(26px, 3vw, 36px); }
.qa b { display:block; font-size:18px; font-weight:600; margin-bottom:12px; letter-spacing:-.01em; }
.qa b::before { content:"«"; color:var(--teal); }
.qa b::after { content:"»"; color:var(--teal); }
.qa p { color:var(--muted); font-size:16px; line-height:1.65; }

/* ---------- аккордеон ---------- */
.acc { border-top:1px solid var(--hair); }
.on-dark .acc { border-top-color:var(--hair-dark); }
.acc__i { border-bottom:1px solid var(--hair); }
.on-dark .acc__i { border-bottom-color:var(--hair-dark); }
.acc__h { width:100%; display:flex; align-items:center; gap:18px; text-align:left; background:transparent; border:0; cursor:pointer; padding:26px 0; color:inherit; transition:color .2s var(--ease); }
.acc__h:hover { color:var(--teal-ink); }
.acc__n { font-size:13px; font-weight:600; color:var(--teal-ink); flex:none; width:26px; font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.acc__t { font-size:clamp(17px, 1.9vw, 20px); font-weight:600; letter-spacing:-.014em; line-height:1.4; flex:1; }
.acc__lvl { font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-ink); background:var(--teal-soft); border-radius:var(--r-pill); padding:6px 14px; flex:none; }
.acc__x { flex:none; width:34px; height:34px; border-radius:50%; background:var(--wash); position:relative; transition:background-color .22s var(--ease); }
.acc__h:hover .acc__x { background:var(--teal-soft); }
.acc__x::before, .acc__x::after { content:""; position:absolute; top:50%; left:50%; width:13px; height:1.5px; background:var(--graphite); transform:translate(-50%,-50%); transition:transform .26s var(--ease), opacity .26s var(--ease); }
.acc__x::after { transform:translate(-50%,-50%) rotate(90deg); }
.acc__i.on .acc__x::after { transform:translate(-50%,-50%) rotate(0deg); opacity:0; }
.acc__b { display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s var(--ease); }
.acc__i.on .acc__b { grid-template-rows:1fr; }
.acc__c { overflow:hidden; }
.acc__c ul { padding:0 0 28px 44px; }
.acc__c li { position:relative; padding-left:22px; margin-bottom:11px; color:var(--muted); font-size:16px; }
.acc__c li::before { content:""; position:absolute; left:0; top:.66em; width:10px; height:1.5px; background:var(--teal); }
.acc__c p { padding:0 0 28px 0; color:var(--muted); font-size:16px; max-width:76ch; }

.filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.filt { font-size:14px; font-weight:600; padding:12px 22px; border:1px solid var(--hair); background:var(--white); color:var(--muted); border-radius:var(--r-pill); cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.filt:hover { color:var(--teal-ink); border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--lift); }
.filt.on { background:var(--navy); border-color:var(--navy); color:var(--white); box-shadow:var(--lift-btn); }

/* ---------- методика ---------- */
.grid4 { display:grid; gap:36px; }
.grid4 h3 { margin-bottom:12px; }
.grid4 p { color:var(--muted); font-size:16px; }
.grid4 > div { padding-top:26px; border-top:2px solid var(--teal); }

/* ---------- преподаватели ---------- */
.person { background:var(--white); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--lift); transition:transform .26s var(--ease), box-shadow .26s var(--ease); }
.person:hover { transform:translateY(-5px); box-shadow:var(--lift-hi); }
.person img { width:100%; aspect-ratio:4/5; object-fit:cover; filter:saturate(.85); }
.person__b { padding:30px clamp(24px,2.6vw,32px) 34px; }
.person__r { font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-ink); margin:10px 0 16px; }
.person p { color:var(--muted); font-size:16px; }
    .person__ph { width:100%; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; background:var(--teal-soft); color:var(--teal-ink); font-family:var(--sans); font-weight:700; font-size:clamp(38px,4vw,54px); letter-spacing:.04em; }

/* ---------- отзывы ---------- */
.vid { position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; background:var(--navy); box-shadow:var(--lift); transition:transform .26s var(--ease), box-shadow .26s var(--ease); }
.vid:hover { transform:translateY(-5px); box-shadow:var(--lift-hi); }
.vid img { width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.78; transition:opacity .3s var(--ease); }
.vid:hover img { opacity:.92; }
.vid__play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.vid__play span { width:70px; height:70px; border-radius:50%; background:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 40px -12px rgba(0,0,0,.55); transition:transform .26s var(--ease); }
.vid:hover .vid__play span { transform:scale(1.08); }
.vid__play svg { width:22px; height:22px; fill:var(--navy); margin-left:4px; }
.vid__c { position:absolute; left:0; right:0; bottom:0; padding:22px 26px; background:linear-gradient(transparent, rgba(15,42,68,.94)); color:var(--white); }
.vid__c b { display:block; font-size:16.5px; font-weight:600; }
.vid__c span { font-size:13.5px; color:rgba(255,255,255,.72); }

.quote { background:var(--white); border-radius:var(--r-lg); padding:clamp(30px, 3.4vw, 44px); box-shadow:var(--lift); }
.quote p { font-size:clamp(17px, 1.8vw, 20px); line-height:1.6; color:var(--graphite); }
.quote footer { margin-top:20px; font-size:14px; color:var(--muted); }

/* ---------- стоимость ---------- */
.price { display:grid; gap:2px; background:var(--hair); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--lift-hi); }
.price__l { background:var(--navy); color:var(--white); padding:clamp(32px, 4vw, 48px); position:relative; overflow:hidden; }
.price__ph { border:1px dashed rgba(255,255,255,.3); border-radius:var(--r); padding:30px 22px; text-align:center; margin:24px 0 24px; }
.price__ph b { display:block; font-size:clamp(28px, 4vw, 40px); font-weight:700; letter-spacing:.06em; color:#7FE0DF; }
.price__ph span { display:block; margin-top:10px; font-size:13.5px; color:rgba(255,255,255,.64); }
.price__r { background:var(--white); padding:clamp(32px, 4vw, 48px); }
.checks li { position:relative; padding-left:36px; margin-bottom:16px; font-size:16px; color:var(--muted); }
.checks li::before { content:""; position:absolute; left:0; top:.28em; width:22px; height:22px; border-radius:50%; background:var(--teal-soft); }
.checks li::after { content:""; position:absolute; left:7px; top:.66em; width:9px; height:5px; border-left:1.8px solid var(--teal-ink); border-bottom:1.8px solid var(--teal-ink); transform:rotate(-45deg); }
.on-dark .checks li { color:rgba(255,255,255,.8); }
.on-dark .checks li::before { background:rgba(127,224,223,.16); }
.on-dark .checks li::after { border-left-color:#7FE0DF; border-bottom-color:#7FE0DF; }

.gtee { display:grid; gap:26px; margin-top:32px; }
.gtee div { display:flex; gap:16px; align-items:flex-start; }
.gtee i { flex:none; width:44px; height:44px; border-radius:12px; background:var(--white); color:var(--teal-ink); display:flex; align-items:center; justify-content:center; box-shadow:var(--lift); }
.gtee i svg { width:21px; height:21px; }
.gtee b { display:block; font-size:16.5px; font-weight:600; margin-bottom:4px; }
.gtee p { font-size:15px; color:var(--muted); line-height:1.55; }

/* ---------- форма ---------- */
.form { display:grid; gap:18px; background:var(--white); border-radius:var(--r-lg); padding:clamp(28px, 3.4vw, 40px); box-shadow:0 30px 70px -34px rgba(0,0,0,.6); }
.field label { display:block; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.field input, .field select { width:100%; min-height:56px; padding:0 18px; background:var(--wash); border:1px solid var(--hair); border-radius:var(--r); color:var(--graphite); font-size:16px; transition:border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.field select { appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.field input::placeholder { color:#9AA3AE; }
.field input:focus, .field select:focus { border-color:var(--teal); outline:none; background:var(--white); box-shadow:0 0 0 4px rgba(0,168,168,.12); }
.consent { display:flex; gap:14px; align-items:flex-start; font-size:13.5px; color:var(--muted); line-height:1.55; }
.consent input { flex:none; width:22px; height:22px; margin-top:2px; accent-color:var(--teal); }
.formnote { display:none; font-size:14.5px; padding:16px 18px; border-radius:var(--r); background:var(--teal-soft); color:var(--teal-ink); }
.formnote.on { display:block; }
.contacts li { padding:20px 0; border-bottom:1px solid var(--hair-dark); }
.contacts b { display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#7FE0DF; margin-bottom:7px; }
.contacts a, .contacts span { font-size:19px; font-weight:600; color:var(--white); }

/* ---------- SEO-текст ---------- */
.seo h2 { font-size:clamp(22px, 2.6vw, 28px); margin-bottom:22px; }
.seo h3 { margin:36px 0 14px; }
.seo p { color:var(--muted); margin-bottom:18px; max-width:74ch; font-size:16.5px; }

/* ---------- подвал ---------- */
.ftr { background:var(--navy); color:rgba(255,255,255,.72); padding:72px 0 0; }
.ftr__g { display:grid; gap:40px; padding-bottom:52px; }
.ftr h4 { font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#7FE0DF; margin-bottom:20px; }
.ftr li { margin-bottom:12px; font-size:15.5px; }
.ftr a:hover { color:var(--white); }
.ftr__logo img { height:24px; filter:brightness(0) invert(1); opacity:.92; margin-bottom:20px; }
.ftr__bot { border-top:1px solid var(--hair-dark); padding:24px 0 96px; font-size:13.5px; color:rgba(255,255,255,.5); display:grid; gap:10px; }

/* ---------- липкая панель ---------- */
.mbar { position:fixed; left:0; right:0; bottom:0; z-index:55; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--hair); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); display:flex; gap:12px; transform:translateY(120%); transition:transform .34s var(--ease); box-shadow:0 -14px 34px -20px rgba(31,41,51,.4); }
.mbar.on { transform:translateY(0); }
.mbar .btn { flex:1; min-height:50px; }
.mbar .btn--soft { flex:0 0 50px; min-width:50px; padding:0; }
.mbar .btn--soft svg { width:20px; height:20px; }

/* ---------- появление ---------- */
.rv { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d, 0s); }
.rv.in { opacity:1; transform:none; }

/* ---------- адаптив ---------- */
@media (min-width:640px) {
  .cards--2, .cards--4 { grid-template-columns:repeat(2, 1fr); }
  .facts { grid-template-columns:repeat(4, 1fr); }
  .qa { grid-template-columns:repeat(2, 1fr); }
  .grid4 { grid-template-columns:repeat(2, 1fr); }
  .ftr__g { grid-template-columns:repeat(2, 1fr); }
  .ftr__bot { grid-template-columns:1fr auto; }
  .gtee { grid-template-columns:repeat(3, 1fr); }
}
@media (min-width:960px) {
  :root { --pad:40px; }
  .cards--3 { grid-template-columns:repeat(3, 1fr); }

  .cards--5 { grid-template-columns:repeat(6, 1fr); }
  .cards--5 > * { grid-column:span 2; }
  .cards--5 > *:nth-child(4) { grid-column:2 / span 2; }
  .hero__in { grid-template-columns:1.08fr .92fr; }
  .offer { grid-template-columns:1fr auto; }
  .price { grid-template-columns:.88fr 1.12fr; }
  .split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 5vw, 76px); align-items:center; }
  .split--form { grid-template-columns:.92fr 1.08fr; align-items:start; }
  .grid4 { grid-template-columns:repeat(4, 1fr); gap:32px; }
  .ftr__g { grid-template-columns:1.5fr 1fr 1fr 1.2fr; }
  .hdr__nav { display:flex; }
  .subnav__in.has-find .subnav__find { display:flex; }
  .subnav__sec, .subnav__menu { display:none; }
  .subnav__in::after { content:none; }
  .hdr__tel { display:block; }
  .ico { display:flex; }
  .hdr .btn { display:inline-flex; }
  .burger { display:none; }
  .mbar { display:none; }
  .form--2 { grid-template-columns:1fr 1fr; }
  .form--2 .field--full, .form--2 .consent, .form--2 .btn, .form--2 .formnote { grid-column:1 / -1; }
}
@media (max-width:1119px) {
  .hdr__nav { display:none; }
  .hdr__tel { display:none; }
  .ico { display:none; }
  .hdr .btn { display:none; }
  .burger { display:flex; }
  .mbar { display:flex; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv { opacity:1; transform:none; }
}

/* ===== ТАРИФЫ ===== */
.pricelead { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px; margin-top:26px; }
.pricelead b { font-size:clamp(26px, 3.4vw, 36px); font-weight:700; letter-spacing:-.02em; color:var(--navy); }
.pricelead span { font-size:14.5px; color:var(--muted); }
.pricelead em { font-style:normal; color:var(--teal-ink); font-weight:600; }
.tar { display:grid; gap:24px; margin-top:clamp(36px, 4vw, 54px); align-items:start; }
.tar__c { background:var(--white); border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(28px, 3vw, 38px); box-shadow:var(--lift); position:relative; transition:transform .26s var(--ease), box-shadow .26s var(--ease); }
.tar__c:hover { transform:translateY(-4px); box-shadow:var(--lift-hi); }
.tar__c--best { background:var(--navy); color:var(--white); border-color:transparent; box-shadow:var(--lift-hi); overflow:hidden; padding-top:calc(clamp(28px, 3vw, 38px) + 28px); }
.tar__c--best .pcb { opacity:.13; }
.tar__c--best > *:not(.pcb):not(.tar__tag) { position:relative; z-index:1; }
.tar__tag { position:absolute; top:0; left:0; right:0; z-index:2; text-align:center; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; background:var(--teal); color:#04312F; padding:9px 15px; }
.tar__n { font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-ink); }
.tar__c--best .tar__n { color:#7FE0DF; }
.tar__d { font-size:15.5px; line-height:1.55; color:var(--muted); margin-top:12px; min-height:48px; }
.tar__c--best .tar__d { color:rgba(255,255,255,.72); }
.tar__p { margin-top:22px; padding-top:22px; border-top:1px solid var(--hair); }
.tar__c--best .tar__p { border-top-color:var(--hair-dark); }
.tar__p b { display:block; font-size:clamp(27px, 3.2vw, 34px); font-weight:700; letter-spacing:-.022em; line-height:1.1; }
.tar__p b i { font-style:normal; font-size:.52em; font-weight:600; letter-spacing:0; color:var(--muted); }
.tar__c--best .tar__p b i { color:rgba(255,255,255,.7); }
.tar__p small { display:block; margin-top:9px; font-size:13.5px; color:var(--muted); }
.tar__c--best .tar__p small { color:rgba(255,255,255,.66); }
.tar__l { margin:22px 0 26px; }
.tar__l li { position:relative; padding-left:26px; margin-bottom:11px; font-size:15.5px; line-height:1.5; color:var(--muted); }
.tar__c--best .tar__l li { color:rgba(255,255,255,.84); }
.tar__l li::before { content:""; position:absolute; left:0; top:.52em; width:13px; height:7px; border-left:1.8px solid var(--teal-ink); border-bottom:1.8px solid var(--teal-ink); transform:rotate(-45deg); }
.tar__c--best .tar__l li::before { border-color:#7FE0DF; }
.mtx { margin-top:clamp(44px, 5vw, 68px); }
.mtx__s { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--lift); }
.mtx table { width:100%; border-collapse:collapse; min-width:560px; }
.mtx th, .mtx td { padding:15px 16px; text-align:center; border-bottom:1px solid var(--hair); font-size:15px; }
.mtx thead th { font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-ink); background:var(--wash-2); border-bottom:1px solid var(--hair); }
.mtx tbody tr:last-child td { border-bottom:0; }
.mtx th:first-child, .mtx td:first-child { text-align:left; width:44%; color:var(--graphite); font-weight:500; position:sticky; left:0; background:var(--white); }
.mtx thead th:first-child { background:var(--wash-2); }
.mtx tbody tr:hover td { background:var(--wash); }
.mtx tbody tr:hover td:first-child { background:var(--wash); }
.mtx .y { color:var(--teal-ink); font-weight:700; }
.mtx .n { color:#C3CBD2; }
.mtx .m { font-size:13.5px; font-weight:600; color:var(--graphite); }
.note { margin-top:22px; font-size:13.5px; line-height:1.6; color:var(--muted); }
@media (min-width:760px) {
  .tar { grid-template-columns:repeat(3, 1fr); gap:20px; }
  .tar__c--best { transform:translateY(-10px); }
  .tar__c--best:hover { transform:translateY(-14px); }
}

/* ===== блок 2 ===== */
/* RHYTHM-v4-TIGHT: плотнее вертикальный ритм, 14.09 */
section {
  padding: clamp(56px, 6.2vw, 88px) 0;
 }
.sec-head {
  margin-bottom: clamp(26px, 3vw, 38px);
 }
.hero {
  padding-bottom: clamp(48px, 5.5vw, 78px);
 }

/* ===== блок 3 ===== */
/* ON-DARK-BTN-FIX: кнопки на тёмной секции, 14.09 */
.on-dark .btn--primary {
  background:#7FE0DF; color:#0F2A44; box-shadow:none;
 }
.on-dark .btn--primary:hover {
  background:#9BE9E8; color:#0F2A44;
 }
.on-dark .btn--soft {
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.34);
 }
.on-dark .btn--soft:hover {
  background:rgba(255,255,255,.08); color:#fff;
 }
.on-dark .sec-sub {
  color:rgba(255,255,255,.76);
 }
.on-dark p, .on-dark li {
  color:rgba(255,255,255,.84);
 }
.on-dark a:not(.btn) {
  color:#7FE0DF;
 }
.on-dark .kpic {
  box-shadow:none;
 }

/* ===== блок 4 ===== */
/* SUBNAV-MOBILE-OFF: ниже 1120px первый уровень уже в бургере, */
/* второй ряд там показывался полосой на 200 из 1450 px — убираем. */
@media (max-width: 1119px) {
  .subnav {
    display: none;
  }
 }
/* текущая страница в мобильной шторке */
.drawer a.is-here {
  color: var(--teal-ink); font-weight: 600;
 }
.drawer a.is-here::before {
  content: ""; display: inline-block; width: 3px; height: 14px; background: var(--teal); border-radius: 2px; margin-right: 9px; vertical-align: -2px;
 }

/* ===== блок 5 ===== */
/* BCRUMB-GLOBAL: хлебные крошки на всех страницах */
.bcrumb {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; color:var(--muted); margin:0 0 20px;
 }
.bcrumb a {
  color:var(--muted); text-decoration:none;
 }
.bcrumb a:hover {
  color:var(--teal-ink);
 }
.bcrumb .sep {
  opacity:.45;
 }
.bcrumb > span {
  display:inline-flex; align-items:center;
 }
.bcrumb b {
  font-weight:500; color:var(--graphite);
 }
@media (max-width: 639px) {
  .bcrumb {
    font-size:12.5px; margin-bottom:16px;
  }
 }

/* ===== блок 6 ===== */
.ico--max svg {
  width: 28px; height: 18px;
 }

/* ===== блок 7 ===== */
/* B24-WIDGET-FIX: чат Bitrix24 (z-index 10150) ложился поверх шторки меню
   и липкой кнопки. Поднимаем свои слои выше, на телефоне сдвигаем пузырь
   выше нижней панели (её высота 74px + safe-area). */
.scrim {
  z-index: 10190;
 }
.drawer {
  z-index: 10200;
 }
.mbar {
  z-index: 10180;
 }

/* ===== блок 8 ===== */
/* LOGO-BRAND-v4: фирменный логотип из брендбука, словесная часть наследует color */
.blogo { display: block; height: 24px; width: auto; }
.hdr__logo { flex: 0 0 auto; display: flex; align-items: center; color: var(--navy); }
.hdr__in { gap: 16px; padding-left: 24px; padding-right: 24px; }
.hdr__tail { gap: 8px; }
.hdr__nav { gap: 2px; }
.ftr__logo { color: #fff; }
.ftr__logo .blogo { height: 30px; }
@media (max-width: 1119px) {
  .blogo { height: 24px; }
 }
@media (max-width: 399px) {
  .blogo { height: 21px; }
 }
/* CONTACT-IN-DRAWER: на телефоне контакты живут наверху шторки */
.drawer__cta { padding: 2px 0 18px; border-bottom: 1px solid var(--hair); margin-bottom: 14px; }
.drawer__cta > b { display: block; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.drawer__msg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.drawer__msg a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 4px; border: 1px solid var(--hair); border-radius: var(--r); font-size: 13px; color: var(--graphite); }
.drawer__msg a:hover { border-color: var(--teal); color: var(--teal-ink); }
.drawer__msg svg { width: 22px; height: 22px; }

/* ===== блок 9 ===== */
.drawer__cta .btn--primary { color: #fff; }
.drawer__msg a svg { flex: none; }
.drawer__msg a:last-child svg { width: auto; height: 14px; }

/* ===== блок 10 ===== */
/* CONTRAST-FIX-v4: тёмные блоки — серый текст на тёмно-синем не читался */
.vid, .vid b, .vid span, .vid p { color: #fff; }
.vid span, .vid p { color: rgba(255,255,255,.78); }
.drawer .btn--primary { color: #fff; }

/* ===== блок 11 ===== */
/* CONTRAST-FIX-v4-2: три места, где текст не добирал 4,5:1 */
/* 1. светлая бирюза из ON-DARK-BTN-FIX протекала на ссылки внутри белой формы */
.on-dark .form a { color: var(--teal-ink); }
/* 2. прочерк «нет» в таблице тарифов был почти невидим */
td.n { color: var(--grey) !important; }  /* !important: стиль страницы идёт ниже по документу */
/* 3. счётчики в меню и шторке */
.sub b, .drawer__grp a b { color: var(--grey); }
/* 4. чип «скоро» не добирал контраст */
.tag--soon { color: #4B5563 !important; }

/* ===== блок 12 ===== */
/* PATH-LIST-v4: блок «Как проходит обучение» в виде ol>li>b+span.
   Раньше стили лежали только в CSS отдельных страниц — на главной список выпадал в голый ol. */
ol.path { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); counter-reset: p; list-style: none; padding: 0; margin: 0; }
ol.path > li { counter-increment: p; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--lift); padding: 24px 22px 20px; }
ol.path > li::before { content: counter(p, decimal-leading-zero); display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--teal-ink); margin-bottom: 10px; }
ol.path > li > b { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; color: var(--graphite); text-transform: none; letter-spacing: 0; }
ol.path > li > span { display: block; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ===== ICONS-AND-MEDIA-v4 ===== */
.ic { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-box svg.ic { width: 24px; height: 24px; }
.ico-box--sm { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px; }
.ico-box--sm svg.ic { width: 21px; height: 21px; }
.on-dark .ico-box, .price__l .ico-box, .vid .ico-box { background: rgba(255,255,255,.12); color: #7FE0DF; }
.ico-row { display: flex; align-items: center; gap: 13px; margin: 0 0 14px; }
.ico-row .ico-box { margin: 0; }
.ico-row > b { font-size: 17px; font-weight: 700; line-height: 1.3; }
.ilist { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ilist li { display: flex; gap: 12px; align-items: flex-start; }
.ilist svg.ic { width: 21px; height: 21px; flex: none; margin-top: 2px; color: var(--teal-ink); }
.on-dark .ilist svg.ic { color: #7FE0DF; }

.secpic { position: relative; margin: 0 0 clamp(28px, 4vw, 44px); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift); background: var(--wash-2); }
.secpic img { display: block; width: 100%; aspect-ratio: 16/6; object-fit: cover; }
.secpic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 24px 16px; font-size: 13.5px; line-height: 1.5; color: #fff; background: linear-gradient(to top, rgba(15,42,68,.78), rgba(15,42,68,0)); }

.mediagrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 clamp(28px, 4vw, 44px); }
.mediagrid figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift); background: var(--white); }
.mediagrid img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--wash-2); }
.mediagrid figcaption { padding: 14px 18px 17px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.sidepic { display: grid; gap: clamp(24px, 3vw, 40px); align-items: center; grid-template-columns: 1fr; margin: 0 0 clamp(28px, 4vw, 44px); }
.sidepic figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-photo); }
.sidepic img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.sidepic__t > p { color: var(--muted); line-height: 1.7; margin: 0 0 14px; }

.thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; display: block; margin: 0 0 18px; background: var(--wash-2); }
.thumb--contain { object-fit: contain; padding: 16px; background: linear-gradient(160deg, #F2FAFA, #E7F2F2); }
.thumb--tall { aspect-ratio: 4/3; }

.strip { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 clamp(26px, 3.5vw, 40px); }
.strip figure { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--lift); background: linear-gradient(160deg, #F2FAFA, #E7F2F2); }
.strip img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: contain; padding: 12px; }
.strip figcaption { padding: 0 12px 13px; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; }

@media (min-width: 860px) {
  .sidepic { grid-template-columns: 1.02fr .98fr; }
  .sidepic--flip > figure { order: -1; }
}
@media (max-width: 639px) {
  .secpic img { aspect-ratio: 16/10; }
  .secpic figcaption { font-size: 12.5px; padding: 28px 16px 13px; }
}


/* ===== MAX-ICON-AND-PHONE-v4 ===== */
.drawer__msg a img { width: 22px; height: 22px; display: block; }
.ico img, .ico--max img { width: 20px; height: 20px; display: block; }

.drawer a.drawer__phone { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; min-height: 56px; padding: 11px 14px; border: 1px solid var(--hair); border-radius: var(--r); margin: 0 0 12px; color: var(--graphite); text-decoration: none; transition: border-color .2s var(--ease); }
.drawer a.drawer__phone svg.ic { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--teal-ink); }
.drawer a.drawer__phone b { font-size: 16.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.drawer a.drawer__phone span { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.drawer a.drawer__phone:hover, .drawer a.drawer__phone:focus-visible { border-color: var(--teal); }


/* ---- ВЕРХ СТРАНИЦЫ: ОДНА ВЫСОТА НА ВСЕХ ---- */
.hero { padding-top: clamp(38px, 3.4vw, 52px); }
main > section:first-of-type, body > section:first-of-type { padding-top: clamp(38px, 3.4vw, 52px); }
.bcrumb { margin: 0 0 16px; }
@media (max-width: 639px) {
  .hero { padding-top: 26px; }
  main > section:first-of-type, body > section:first-of-type { padding-top: 26px; }
  .bcrumb { margin: 0 0 13px; }
}
/* ---- ШТОРКА И ЛОГО НА МОБИЛЬНОМ ---- */
.drawer { padding: 18px 24px 40px; }
.drawer__close { display:grid; place-items:center; width:44px; height:44px; margin:0 -6px 12px auto; border:1px solid var(--hair); border-radius:12px; background:var(--white); color:var(--graphite); cursor:pointer; padding:0; }
.drawer__close svg { width:17px; height:17px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }
.drawer__close:hover, .drawer__close:focus-visible { border-color: var(--teal); }
@media (max-width: 400px) {
  .blogo { height: 17px; }
  .hdr__in { padding-left: 18px; padding-right: 18px; }
  .drawer { padding: 16px 20px 36px; }
}
@media (min-width: 401px) and (max-width: 1119px) {
  .blogo { height: 20px; }
}
/* ---- ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ: одна шкала ---- */
:root { --sec-pad: clamp(46px, 5.2vw, 78px); --sec-head-gap: clamp(22px, 2.2vw, 32px); --hero-pad: clamp(38px, 3.4vw, 52px); }
section { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
.hero { padding-top: var(--hero-pad); padding-bottom: var(--sec-pad); }
main > section:first-of-type, body > section:first-of-type { padding-top: var(--hero-pad); }
.sec-head { margin-bottom: var(--sec-head-gap); }
@media (max-width: 639px) {
  :root { --sec-pad: 42px; --sec-head-gap: 20px; --hero-pad: 26px; }
}

/* ==================================================
   МОБИЛЬНЫЕ ПРАВКИ 15.09.2026 — верстка блоков
   ================================================== */

/* 1. blockquote: браузерные поля 40px съедали ширину текста */
.quote { margin-left:0; margin-right:0; }

/* 2. .split был описан только от 960px; ниже — блок без зазора,
      текст упирался в фото вплотную */
@media (max-width:959px) {
  .split { display:grid; grid-template-columns:1fr; gap:28px; align-items:start; }
  .split--form { grid-template-columns:1fr; }
}

@media (max-width:639px) {
  /* 3. кнопки упирались в текст без отступа */
  .cta-row { margin-top:22px; }
  .cta-row:first-child { margin-top:0; }

  /* 4. аккордеон: бейдж тарифа выталкивал плюс за край экрана.
        Номер + тариф + плюс в строку, заголовок на всю ширину ниже */
  .acc__h { flex-wrap:wrap; gap:9px 10px; padding:18px 0; align-items:center; }
  .acc__n { order:1; width:auto; }
  .acc__lvl { order:2; font-size:10.5px; padding:4px 11px; letter-spacing:.1em; }
  .acc__x { order:3; margin-left:auto; width:30px; height:30px; }
  .acc__t { order:4; flex:0 0 100%; font-size:16.5px; line-height:1.35; }

  /* 5. карточка отзыва: из 390px под текст оставалось 202px */
  .quote { padding:22px 20px; }
  .quote p { font-size:16px; line-height:1.55; }
  .quote footer { margin-top:14px; }

  /* 6. таблица тарифов: 4 колонки, влезала одна */
  .mtx { position:relative; }
  .mtx::before { content:"Таблица прокручивается вбок \2192"; display:block; margin:0 0 10px; font-size:12.5px; color:var(--muted); }
  .mtx table { min-width:470px; }
  .mtx th, .mtx td { padding:11px 9px; font-size:13px; }
  .mtx thead th { font-size:10.5px; letter-spacing:.08em; }
  .mtx th:first-child, .mtx td:first-child { width:40%; font-size:12.5px; padding-right:8px; }
  .mtx__s { box-shadow:var(--lift), inset -20px 0 15px -15px rgba(10,22,34,.22); }
}

/* ---------- добор 15.09: кнопки, виджет Битрикс ---------- */

@media (max-width:639px) {
  /* длинный текст кнопки не переносился: white-space:nowrap давал 369px в блоке 338px */
  .btn { white-space:normal; min-width:0; padding:12px 20px; line-height:1.3; }
  .btn .ic, .btn svg { flex:0 0 auto; }
}

/* Виджет Битрикс24 на мобильном.
   Было: слева снизу, отступ 50px — пузырь стоял в зоне чтения.
   Промежуточно: сдвинут в правый угол на 12px — заехал ПОД липкую панель
   (.mbar высотой 75px, z-index 10180 против 10150 у виджета) и торчал огрызком.
   Сейчас: над панелью, ореол-пульс 110px убран — остаётся чистый кружок 56px. */
@media (max-width:1023px) {
  .b24-widget-button-wrapper.b24-widget-button-position-bottom-left,
  .b24-widget-button-wrapper.b24-widget-button-position-bottom-right {
    bottom:87px !important; right:8px !important; left:auto !important;
    z-index:10170 !important;
    /* 56px кружок в углу телефона — крупно; 84% даёт 47px, палец попадает */
    transform:scale(.84) !important; transform-origin:100% 100% !important;
  }
  .b24-widget-button-position-bottom-left .b24-widget-button-popup {
    left:auto !important; right:0 !important;
  }
  /* декоративный пульс вдвое шире кнопки и бледным кольцом лез на текст */
  .b24-widget-button-pulse, .b24-widget-button-inner-mask { display:none !important; }
  .ftr { padding-bottom:84px; }
}

/* хлебные крошки: текущая страница была жирнее ссылки — выравниваем вес,
   отличие остаётся только по цвету */
.bcrumb b { font-weight:400; }


/* ==================================================
   ВЕРТИКАЛЬНЫЙ РИТМ — 16.09.2026
   Глобальный сброс * { margin:0 } снял поля у всех абзацев.
   Дальше их возвращали точечно, и там, где забыли, текст
   прилипал к кнопке, к картинке, к логотипу. Это общий слой,
   а не заплатка на каждую страницу.
   ================================================== */

/* 1. соседние абзацы и списки в тексте */
main p + p, main p + ul, main ul + p,
main h1 + p, main h2 + p, main h3 + p, main h4 + p { margin-top:12px; }
main h1 + .lead, main h2 + .lead { margin-top:16px; }

/* 2. кнопка не стоит вплотную к тексту НА ЛЮБОЙ ШИРИНЕ.
      Раньше правило лежало внутри @media (max-width:639px)
      и на десктопе не работало вовсе. */
.cta-row { margin-top:22px; }
.cta-row:first-child { margin-top:0; }
.cta-row + figure, .cta-row + .secpic { margin-top:26px; }
.arthead .lead + .artmeta { margin-top:18px; }

/* 3. карточки в ряду одной высоты — кнопки на одной линии */
.cards > .card { display:flex; flex-direction:column; }
.cards > .card > .thumb { flex:0 0 auto; }
.cards > .card > p:has(> .btn) { margin-top:auto; padding-top:18px; }

/* 4. кнопка внутри текстового блока */
main p:has(> .btn) { margin-top:20px; }

/* 5. подвал: логотип и текст под ним шли вплотную */
.ftr__logo { margin-bottom:18px; }

/* 6. где зазор задаёт gap контейнера, поля не нужны */
.ecard p + p, .mbar p + p, .hdr p + p, .drawer p + p,
.cta-row p + p, .checks p + p { margin-top:0; }


/* ==================================================
   СТАТЬЯ v4 — 16.09.2026
   Перенесено из <style> ресурса 310 в общий файл, чтобы шаблон
   «Статья v4» не тащил инлайновый CSS (и не ловил капкан Fenom).
   ================================================== */

.artwrap { max-width:1180px; }
.bcrumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; color:var(--muted); margin:0 0 26px; }
.bcrumb a { color:var(--muted); }
.bcrumb a:hover { color:var(--teal-ink); }
.bcrumb span { opacity:.5; }
.arthead { max-width:820px; }
.arthead h1 { margin:12px 0 18px; }
.artmeta { display:flex; flex-wrap:wrap; gap:10px 20px; font-size:14.5px; color:var(--muted); margin:0 0 26px; }
.artmeta b { font-weight:600; color:var(--graphite); }
.artcols { display:grid; gap:clamp(28px,3.4vw,54px); grid-template-columns:1fr; align-items:start; }
@media (min-width:1000px) {
  .artcols { grid-template-columns:minmax(0,1fr) 282px; }
  .toc { position:sticky; top:96px; }
}
@media (max-width:999px) {
  .toc { order:-1; }
}
.toc { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--lift); padding:24px 24px 20px; }
.toc b { display:block; font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.toc ol { list-style:none; margin:0; padding:0; counter-reset:t; }
.toc li { counter-increment:t; margin-bottom:11px; }
.toc li:last-child { margin-bottom:0; }
.toc a { display:flex; gap:10px; font-size:15px; line-height:1.45; color:var(--graphite); }
.toc a::before { content:counter(t,decimal-leading-zero); flex:none; font-size:12px; font-weight:600; color:var(--teal-ink); padding-top:2px; }
.toc a:hover { color:var(--teal-ink); }
.art { max-width:74ch; font-size:17.5px; line-height:1.75; color:var(--graphite); }
.art p { margin:0 0 22px; }
.art h2 { font-size:clamp(22px,2.6vw,30px); line-height:1.25; margin:48px 0 18px; scroll-margin-top:96px; }
.art h3 { font-size:clamp(18px,2vw,22px); line-height:1.3; margin:34px 0 14px; }
.art ul, .art ol { margin:0 0 22px; padding-left:0; list-style:none; }
.art ol { counter-reset:n; }
.art li { position:relative; padding-left:26px; margin-bottom:12px; }
.art ul li::before { content:""; position:absolute; left:2px; top:.72em; width:11px; height:1.5px; background:var(--teal); }
.art ol li { counter-increment:n; }
.art ol li::before { content:counter(n) "."; position:absolute; left:0; top:0; font-weight:700; color:var(--teal-ink); font-size:15px; }
.art img { display:block; width:100%; height:auto; border-radius:var(--r-lg); box-shadow:var(--lift); margin:30px 0; }
.art blockquote { margin:30px 0; padding:24px clamp(20px,2.4vw,28px); background:var(--teal-soft); border-radius:var(--r-lg); font-size:17px; line-height:1.7; color:var(--graphite); }
.art blockquote p:last-child { margin-bottom:0; }
.art strong { font-weight:700; }
.art a { color:var(--teal-ink); text-decoration:underline; text-underline-offset:3px; }
.artcta { margin:44px 0 0; padding:clamp(26px,3vw,36px); background:var(--white); border-radius:var(--r-lg); box-shadow:var(--lift); }
.artcta h3 { font-size:clamp(19px,2.2vw,24px); margin:0 0 12px; }
.artcta p { color:var(--muted); margin:0 0 22px; }
.artauth { display:flex; align-items:center; gap:16px; margin-top:40px; padding-top:26px; border-top:1px solid var(--hair); }
.artauth img { width:58px; height:58px; border-radius:50%; object-fit:cover; flex:none; }
.artauth b { display:block; font-size:15.5px; }
.artauth span { display:block; font-size:14px; color:var(--muted); margin-top:3px; }


/* .anymark лежал в <style> отдельных страниц — на странице без него
   иконка растягивалась во всю ширину. Переносим в общий файл. */
.anymark { display:flex; align-items:flex-start; gap:10px; margin:18px 0 0; padding:12px 16px; border:1px solid var(--hair); border-radius:14px; background:var(--wash-2); font-size:14.5px; line-height:1.45; color:var(--muted); }
.anymark svg.ic { width:18px; height:18px; flex:0 0 auto; margin-top:1px; color:var(--teal-ink); }
.anymark b { color:var(--graphite); font-weight:700; }