/* ============================================================
   SmartDocGen — ГЛАВНАЯ, СЕКЦИИ ПОСЛЕ ПЕРВОГО ЭКРАНА
   Продолжение языка hero: ink #0b0e13, янтарь, карточки 20px,
   ритм «светлая → белая → тёмная». Шапку и футер НЕ трогает.
   Тексты не меняются — только оформление существующей разметки.
   Подключается ОДНОЙ строкой; убирается так же (обратимо).
   ============================================================ */

:root{
  --s-ink:#0b0e13;
  --s-body:#4a5160;
  --s-muted:#616875;        /* ≥4.5:1 и на белом, и на светлом #eef2f8 */
  --s-line:rgba(16,24,40,.09);
  --s-light:#eef2f8;
  --s-am1:#FFD84D;
  --s-am2:#FFBE1A;
  --s-am-ink:#2b2100;
  --s-blue:#1363d4;
  --s-ok:#12a150;
  --s-bad:#e0483c;
  --s-ease:cubic-bezier(.2,.7,.3,1);
  --s-shadow:0 1px 2px rgba(16,24,40,.04), 0 16px 38px -24px rgba(16,24,40,.30);
  --s-shadow-hi:0 2px 4px rgba(16,24,40,.05), 0 28px 56px -26px rgba(16,24,40,.38);
  /* подложка иконки — переопределяется в каждой секции */
  --tile-bg:linear-gradient(135deg,rgba(19,99,212,.10),rgba(19,99,212,.04));
  --tile-bd:rgba(19,99,212,.20);
}

/* ============================================================
   ОБЩЕЕ ДЛЯ ВСЕХ СЕКЦИЙ
   ============================================================ */
section.sdgs{
  position:relative; isolation:isolate;
  background-image:none !important;
  background-color:#fff;
  padding:clamp(58px,6.2vw,96px) 20px !important;
  font-family:"Montserrat","Open Sans",system-ui,Arial,sans-serif;
  overflow:hidden;
}
section.sdgs.is-light{ background-color:var(--s-light); }
section.sdgs.is-dark{ background-color:var(--s-ink); }

.sdgs .container{ max-width:1180px; padding:0 24px; }

/* мягкая подсветка на тёмных секциях */
.sdgs.is-dark::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:-22%; width:min(1100px,120%); height:70%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 40%, rgba(19,99,212,.42), transparent 68%);
  filter:blur(50px);
}
.sdgs.is-dark .container{ position:relative; z-index:1; }

/* ---------- Заголовок секции ---------- */
.sdgs .heading{
  margin:0; color:var(--s-ink);
  font-family:"Montserrat",sans-serif; font-weight:700;
  font-size:clamp(25px,2.55vw,37px); line-height:1.18; letter-spacing:-.024em;
  text-align:center; text-wrap:balance;
  padding-bottom:19px; position:relative;
}
.sdgs .heading::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:64px; height:4px; border-radius:2px;
  background:linear-gradient(90deg,var(--s-am1),var(--s-am2));
  box-shadow:0 0 18px rgba(255,190,26,.55);
}
.sdgs.is-dark .heading{ color:#fff; }

/* лид под заголовком */
.sdgs .heading + .text-block-4{
  max-width:760px; margin:18px auto 0;
  color:var(--s-muted); font-family:"Open Sans",sans-serif;
  font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.6; text-align:center;
}
.sdgs.is-dark .heading + .text-block-4{ color:rgba(255,255,255,.68); }

/* завершающая строка секции («Узнали себя…», «Вывод: …») */
.sdgs .text-block-4{
  color:var(--s-muted); font-family:"Open Sans",sans-serif;
  font-size:15.5px; line-height:1.6; text-align:center;
}
/* закрывающая плашка секции — во всю ширину контейнера, без искусственных переносов */
.sdgs .grid-31 + .text-block-4,
.sdgs .grid-38 + .text-block-4{
  max-width:none; margin:38px 0 0;
  padding:20px 32px; border-radius:18px;
  background:linear-gradient(90deg, rgba(255,190,26,.17), rgba(255,190,26,.08));
  border:1px solid rgba(255,190,26,.34);
  color:#463f22; font-size:clamp(14.5px,1.25vw,17px); font-weight:600; line-height:1.5;
}

/* ---------- Универсальная карточка ---------- */
.sdgs .div-block-6{
  display:block; text-align:left;
  background:#fff; border:1px solid var(--s-line); border-radius:20px;
  padding:26px 24px 28px;
  box-shadow:var(--s-shadow);
  transition:transform .26s var(--s-ease), box-shadow .26s ease, border-color .26s ease;
}
.sdgs .div-block-6:hover{
  transform:translateY(-4px);
  box-shadow:var(--s-shadow-hi);
  border-color:rgba(255,190,26,.55);
}
/* плитка под иконку */
.sdgs .div-block-3{
  width:56px; height:56px; margin:0; flex:none;
  border-radius:17px;
  background:var(--tile-bg); border:1px solid var(--tile-bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 10px 20px -12px rgba(16,24,40,.35);
  display:flex; align-items:center; justify-content:center;
}
.sdgs .image-2{ width:28px; height:28px; }
.sdgs .div-block-3.centre{ margin:0 0 16px; }
.sdgs .image-2{ width:26px; height:26px; }
/* шапка карточки «плитка + заголовок» */
.sdgs .div-block-448{
  display:flex; align-items:center; justify-content:flex-start; gap:14px;
  margin-bottom:14px; align-self:auto;
}
.sdgs .text-block-2{
  color:var(--s-ink); font-family:"Montserrat",sans-serif;
  font-size:16.5px; font-weight:700; line-height:1.32; letter-spacing:-.01em;
}
.sdgs .text-block-2.dop1{ flex:1; margin:0; }
.sdgs .div-block-3.centre.cent + .text-block-2.dop1{ margin-bottom:11px; }
.sdgs .text-block-3{
  color:var(--s-body); font-family:"Open Sans",sans-serif;
  font-size:14.5px; font-style:normal; line-height:1.62;
}
/* строка «Пример: …» / «Результат: …» */
.sdgs .text-block-3.color1{
  margin-top:16px; padding:12px 15px;
  border-radius:0 12px 12px 0; border-left:3px solid var(--s-am2);
  background:rgba(255,190,26,.10);
  color:#4a4326; font-size:13.5px; font-weight:600; line-height:1.55;
}

/* ---------- Кнопка секции ---------- */
/* ЕДИНАЯ ШКАЛА КНОПОК. Было вразнобой: кегли 14/14.5/15.5/16.5,
   радиусы 13/14/16, высоты 48–58. Держим один размер на всю страницу. */
.sdgs .button.w-button,
.sdgs .button-2.w-button{
  margin-top:8px;
  font-size:15px !important; font-weight:700 !important;
  padding:17px 32px !important; border-radius:14px !important;
  line-height:1.25 !important;
}
/* в карточках тарифов кнопка на всю ширину — поля уже, кегль тот же */
.sdgs--pay .button._80.w-button{
  font-size:15px !important; font-weight:700 !important;
  padding:16px 20px !important; border-radius:14px !important;
}
.sdgs .text-block-268{
  color:var(--s-muted); margin-top:14px; font-size:11.5px; letter-spacing:.04em;
}
.sdgs.is-dark .text-block-268{ color:rgba(255,255,255,.55); }

/* Появление блоков при скролле. Классы навешивает JS — если он не отработал,
   контент виден как обычно (без скрытого состояния). */
.sdgs-rise{ opacity:0; transform:translateY(24px); }
.sdgs-rise.is-in{
  opacity:1; transform:none;
  transition:opacity .65s var(--s-ease), transform .65s var(--s-ease);
}
@media print{ .sdgs-rise{ opacity:1 !important; transform:none !important; } }

/* ============================================================
   1. «Вы теряете недели на рутинной работе» — боль

   ЭТАЛОН КАРТОЧКИ. На него равняются другие секции — не менять
   в отрыве от них. Точные значения:
     сетка ......... 2 колонки, gap 18px
     плита ......... linear-gradient(158deg,#151b26 0%,#0e131b 58%,#12111a 100%)
     рамка/радиус .. 1px rgba(255,255,255,.09) / 22px
     тень .......... 0 2px 4px rgba(11,14,19,.16), 0 26px 54px -28px rgba(11,14,19,.72)
     поля .......... 28px 30px 30px
     внутри ........ grid 46px|1fr, "ic title" / "body body",
                     column-gap 18px, row-gap 14px, align-items:center
     свечение ...... radial rgba(224,72,60,.34) → transparent 66%,
                     62%×150% из угла left:-14% top:-58%, opacity .85
     иконка ........ 46×46 БЕЗ подложки, фон прозрачный,
                     hue-rotate(152deg) saturate(1.22)
                     drop-shadow(0 7px 16px rgba(224,72,60,.55))
     заголовок ..... 18.5px/700, белый, letter-spacing -.014em, в строку с иконкой
     текст ......... 15.2px, line-height 1.65, rgba(255,255,255,.68), во всю ширину
   Внутри карточки НЕТ линеек, подписей, плашек и рамок — только воздух.
   ============================================================ */
.sdgs.sdgs--pain{ background-color:var(--s-light); }

/* атмосфера секции: тёплая тревожная подсветка за сеткой */
.sdgs--pain::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:6%; transform:translateX(-50%);
  width:min(1000px,110%); height:60%;
  background:radial-gradient(ellipse at 50% 50%, rgba(224,72,60,.13), transparent 68%);
  filter:blur(46px);
}
.sdgs--pain .container{ position:relative; z-index:1; }

/* 2 × 2 — карточкам хватает ширины, текст не рвётся на огрызки */
.sdgs--pain .grid-31{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px; margin:44px 0 0;
}

/* тёмная карточка-«происшествие» на светлой секции */
.sdgs--pain .div-block-6{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:46px minmax(0,1fr);
  grid-template-areas:"ic title" "body body";
  column-gap:18px; row-gap:14px; align-items:center;
  padding:28px 30px 30px;
  background:linear-gradient(158deg,#151b26 0%,#0e131b 58%,#12111a 100%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  box-shadow:0 2px 4px rgba(11,14,19,.16), 0 26px 54px -28px rgba(11,14,19,.72);
}
/* мягкое красное свечение из угла — вместо полоски сверху */
.sdgs--pain .div-block-6::before{
  content:""; position:absolute; left:-14%; top:-58%; width:62%; height:150%;
  background:radial-gradient(ellipse at 50% 50%, rgba(224,72,60,.34), transparent 66%);
  pointer-events:none; transition:opacity .28s ease; opacity:.85;
}
.sdgs--pain .div-block-6:hover{
  transform:translateY(-5px);
  border-color:rgba(224,72,60,.42);
  box-shadow:0 2px 4px rgba(11,14,19,.18), 0 34px 66px -28px rgba(11,14,19,.8),
             0 0 44px -14px rgba(224,72,60,.45);
}
.sdgs--pain .div-block-6:hover::before{ opacity:1; }

/* иконка: родной кружок icons8, перекрашенный в тревожный красный */
.sdgs--pain .div-block-3{
  grid-area:ic; position:relative; z-index:1;
  width:46px; height:46px; margin:0; padding:0;
  background:none; border:0; box-shadow:none; border-radius:0;
}
.sdgs--pain .image-2{
  width:46px; height:46px;
  filter:hue-rotate(152deg) saturate(1.22) drop-shadow(0 7px 16px rgba(224,72,60,.55));
}
.sdgs--pain .text-block-2.dop1{
  grid-area:title; position:relative; z-index:1; margin:0;
  color:#fff; font-size:clamp(16px,1.32vw,18.5px); font-weight:700;
  line-height:1.28; letter-spacing:-.014em; text-wrap:balance;
}
.sdgs--pain .text-block-3{
  grid-area:body; position:relative; z-index:1;
  color:rgba(255,255,255,.68); font-size:clamp(14px,1.08vw,15.2px); line-height:1.65;
}

/* ============================================================
   2. «Как SmartDocGen экономит вам недели» — решение
   ============================================================ */
.sdgs.sdgs--sol{ background-color:#fff; }
.sdgs--sol{ --tile-bg:linear-gradient(135deg,rgba(255,216,77,.24),rgba(255,190,26,.07)); --tile-bd:rgba(255,190,26,.36); }

/* тёплая подсветка — противоход тревожной красной в секции боли */
.sdgs--sol::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 66% 42% at 50% 20%, rgba(255,190,26,.15), transparent 72%);
}
.sdgs--sol .container{ position:relative; z-index:1; }

/* БЕНТО: первая карточка — «ядро продукта» на две колонки, остальные четыре в ряд.
   5 плиток без дыры в сетке и без монотонности одинаковых квадратов. */
.sdgs--sol .grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px; margin:44px 0 0;
}
.sdgs--sol .grid > div{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--s-line); border-radius:22px;
  padding:28px 26px 0;
  box-shadow:var(--s-shadow);
  transition:transform .26s var(--s-ease), box-shadow .26s ease, border-color .26s ease;
}
.sdgs--sol .grid > div:hover{
  transform:translateY(-4px); box-shadow:var(--s-shadow-hi); border-color:rgba(255,190,26,.55);
}
.sdgs--sol .div-block-2{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin:0 0 20px;
}
.sdgs--sol .div-block-4{ flex:1; min-width:0; width:100%; }
.sdgs--sol .div-block-4 .text-block-2{ display:block; margin-bottom:10px; }

/* «Пример: …» — подвал карточки во всю ширину, а не врезка сбоку.
   Сетка «иконка | текст»: строки центрируются по вертикали, поэтому короткий
   текст не липнет к верху растянутого подвала, а иконка держится первой строки. */
.sdgs--sol .grid > div > .text-block-3.color1{
  margin:auto -26px 0; padding:15px 26px 17px;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-content:center; align-items:start; gap:0 9px;
  border-radius:0; border-left:0;
  border-top:1px solid rgba(255,190,26,.28);
  background:linear-gradient(90deg, rgba(255,216,77,.15), rgba(255,190,26,.06));
  font-size:13.5px; line-height:1.55;
}
.sdgs--sol .grid > div > .text-block-3.color1::before{
  content:""; width:15px; height:15px; margin-top:3px;
  background:var(--s-am2);
  -webkit-mask:var(--sdg-spark) center/contain no-repeat;
          mask:var(--sdg-spark) center/contain no-repeat;
}

/* ---- Карточка-ядро: шире, крупнее, «Пример» вынесен в отдельную панель ---- */
.sdgs--sol .grid > div:first-child{
  grid-column:span 2;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  grid-template-areas:"content art" "example example";
  padding:0;
  background:linear-gradient(122deg,#fffdf3 0%,#fdfaf2 100%);
  border-color:rgba(255,190,26,.44);
}
.sdgs--sol .grid > div:first-child .div-block-2{
  grid-area:content; padding:34px 12px 30px 34px; margin:0; justify-content:center;
}
.sdgs--sol .grid > div:first-child .div-block-4{ flex:0 0 auto; }

/* иллюстрация — фоном псевдоэлемента, в край карточки; разметку не трогаем */
.sdgs--sol .grid > div:first-child::after{
  content:""; grid-area:art; align-self:stretch;
  min-height:260px; margin:0;
  background-color:#fdfaf2;
  background-image:url("/assets/img/sdg_docs_fan.jpg");
  background-image:image-set(url("/assets/img/sdg_docs_fan.webp") type("image/webp"),
                             url("/assets/img/sdg_docs_fan.jpg")  type("image/jpeg"));
  /* contain + фон точно в цвет картинки: поля сливаются, кадр не режется */
  background-repeat:no-repeat; background-position:center; background-size:contain;
  /* левый край растушёван — фото перетекает в подложку карточки без стыка и рамки */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 21%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 21%, #000 100%);
}
.sdgs--sol .grid > div:first-child .div-block-3{ width:60px; height:60px; border-radius:17px; }
.sdgs--sol .grid > div:first-child .image-2{ width:30px; height:30px; }
.sdgs--sol .grid > div:first-child .text-block-2{
  font-size:clamp(18px,1.6vw,22px); line-height:1.24; letter-spacing:-.018em; margin-bottom:12px;
}
.sdgs--sol .grid > div:first-child .div-block-4 .text-block-3{ font-size:15px; }
/* «Пример» карточки-ядра — подвал во всю ширину, как у остальных, но крупнее */
.sdgs--sol .grid > div:first-child > .text-block-3.color1{
  grid-area:example; margin:0; padding:17px 34px 19px;
  gap:0 11px;
  border-left:0; border-top:1px solid rgba(255,190,26,.3);
  background:linear-gradient(90deg, rgba(255,216,77,.2), rgba(255,190,26,.06));
  font-size:14.5px; line-height:1.55; font-weight:600;
}
.sdgs--sol .grid > div:first-child > .text-block-3.color1::before{
  width:17px; height:17px; margin-top:3px;
}

/* ---- Подвалы «Пример: …» выравниваем по всему ряду через subgrid:
       число строк гуляет от 1 до 4, фиксированная высота тут не годится.
       Без поддержки subgrid всё работает по-старому (подвал прижат к низу). ---- */
@supports (grid-template-rows: subgrid){
  /* row-gap родителя даёт интервал МЕЖДУ рядами карточек, а внутри карточки
     subgrid гасит его своим row-gap:0 — не зависит от числа колонок */
  .sdgs--sol .grid > div{
    grid-row:span 2;
    display:grid; grid-template-rows:subgrid; row-gap:0;
    align-content:stretch;
  }
  .sdgs--sol .grid > div > .div-block-2{ grid-row:1; }
  .sdgs--sol .grid > div > .text-block-3.color1{ grid-row:2; margin-top:0; }

  .sdgs--sol .grid > div:first-child{ grid-template-rows:subgrid; }
  .sdgs--sol .grid > div:first-child > .div-block-2{ grid-column:1; grid-row:1; }
  .sdgs--sol .grid > div:first-child::after{ grid-column:2; grid-row:1; }
  .sdgs--sol .grid > div:first-child > .text-block-3.color1{ grid-column:1 / -1; grid-row:2; }
}

/* ---- Призыв под сеткой: воздух и тонкий разделитель, без ещё одной плашки ---- */
.sdgs--sol .button.w-button{
  display:flex; width:fit-content; max-width:100%;
  margin:46px auto 0;
}
.sdgs--sol .text-block-268{
  margin-top:16px; text-align:center; text-transform:none;
  font-size:13px; letter-spacing:0; color:var(--s-muted);
}

:root{
  --sdg-chk-am:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD84D' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --sdg-chk-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2100' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --sdg-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8l1-8Z'/%3E%3C/svg%3E");
  --sdg-spark-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b2100'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8l1-8Z'/%3E%3C/svg%3E");
}

/* ============================================================
   3. «Программа проста как 2x2» — акцентная плашка
   ============================================================ */
.sdgs.sdgs--steps{ background-color:#fff; padding-top:0 !important; }
.sdgs--steps .div-block-185{
  position:relative; overflow:hidden;
  background-color:#0b0e13 !important;
  background-image:url("/assets/img/sdg_steps_bg.jpg") !important;
  background-image:image-set(url("/assets/img/sdg_steps_bg.webp") type("image/webp"),
                             url("/assets/img/sdg_steps_bg.jpg")  type("image/jpeg")) !important;
  background-size:cover !important; background-position:center !important;
  background-repeat:no-repeat !important;
  border-radius:26px; border:1px solid rgba(255,255,255,.08);
  padding:clamp(38px,4.4vw,58px) clamp(24px,4vw,56px) !important;
  box-shadow:0 34px 70px -34px rgba(11,14,19,.6);
}
/* затемняющая вуаль по центру: графика остаётся по краям, текст читается уверенно */
.sdgs--steps .div-block-185::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 62% 90% at 50% 50%,
             rgba(11,14,19,.80) 0%, rgba(11,14,19,.36) 62%, transparent 100%);
}
.sdgs--steps .div-block-185 > *{ position:relative; z-index:1; }
.sdgs--steps .text-block-10{
  color:#fff; font-size:clamp(21px,2.3vw,32px); font-weight:700;
  line-height:1.24; letter-spacing:-.022em; text-wrap:balance; max-width:30ch; margin:0 auto;
}
.sdgs--steps .text-block-11{
  color:rgba(255,255,255,.72); font-family:"Open Sans",sans-serif;
  font-size:clamp(14px,1.15vw,16.5px); line-height:1.6; margin:16px auto 0; max-width:640px;
}

/* ============================================================
   4. «Смотрите, как работает вживую» — видео (тёмная)
   ============================================================ */
/* Видео — главный герой секции: во всю ширину сверху, текст двумя колонками под ним */
.sdgs--video .grid-28{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,3vw,40px); margin-top:44px;
}
.sdgs--video .div-block-449{
  grid-area:auto !important; grid-column:1 !important; grid-row:1 !important;
  width:100%; max-width:1000px; margin:0 auto;   /* кадр 2.39:1 — во всю ширину давит */
}
.sdgs--video .div-block-5{
  grid-area:auto !important; grid-column:1 !important; grid-row:2 !important;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,3.6vw,54px); row-gap:0; align-content:start;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10);
  border-radius:22px; padding:28px clamp(24px,3vw,36px) 30px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
/* раскладка колонок: заголовки в один ряд, списки под ними, вывод — во всю ширину.
   Порядок детей в разметке: div(03:51), div(заголовок), ul, div(заголовок), ul, div(вывод) */
.sdgs--video .div-block-5 > div:nth-of-type(1){ grid-column:1 / -1; grid-row:1; }
.sdgs--video .div-block-5 > div:nth-of-type(2){ grid-column:1; grid-row:2; }
.sdgs--video .div-block-5 > ul:nth-of-type(1) { grid-column:1; grid-row:3; }
.sdgs--video .div-block-5 > div:nth-of-type(3){ grid-column:2; grid-row:2; }
.sdgs--video .div-block-5 > ul:nth-of-type(2) { grid-column:2; grid-row:3; }
.sdgs--video .div-block-5 > div:nth-of-type(4){
  grid-column:1 / -1; grid-row:4;
  margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.10);
}
.sdgs--video .div-block-465{
  grid-area:auto !important; grid-column:1 !important; grid-row:3 !important;
  display:flex; flex-direction:column; align-items:center;
  gap:12px; margin-top:6px;
}
.sdgs--video .text-block-5{
  justify-self:start;
  background:linear-gradient(135deg,var(--s-am1),var(--s-am2)); color:var(--s-am-ink);
  border-radius:999px; padding:6px 15px 6px 30px; margin:0 0 20px;
  position:relative;
  font-size:12px; font-weight:800; letter-spacing:.04em;
}
.sdgs--video .text-block-5::before{      /* значок «play» перед хронометражом */
  content:""; position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-left:8px solid var(--s-am-ink);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.sdgs--video .text-block-2{
  color:#fff; font-size:15.5px; padding-bottom:12px; margin-bottom:2px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.sdgs--video .list{
  list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px;
}
.sdgs--video .list li{
  position:relative; padding-left:29px;
  color:rgba(255,255,255,.82); font-family:"Open Sans",sans-serif;
  font-size:14px; line-height:1.55;
}
.sdgs--video .list li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px;
  border-radius:6px; background:rgba(255,190,26,.16); border:1px solid rgba(255,190,26,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD84D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}
/* второй список — нумерованный, оставляем цифры */
.sdgs--video .list.dop5{ counter-reset:sdgstep; }
.sdgs--video .list.dop5 li::before{
  counter-increment:sdgstep; content:counter(sdgstep);
  background-image:none; color:var(--s-am1);
  font-family:"Montserrat",sans-serif; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; top:2px;
}
.sdgs--video .text-block-192{
  color:rgba(255,255,255,.62); font-family:"Open Sans",sans-serif;
  font-size:13.5px; line-height:1.6;
}
.sdgs--video .div-block-465 .text-block-192{ text-align:center; }
.sdgs--video .video{
  border-radius:20px; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.85), 0 0 70px -30px rgba(19,99,212,.7);
}
.sdgs--video .div-block-451{ display:none; }

/* ============================================================
   5. «Почему N компаний выбрали» — преимущества
   ============================================================ */
.sdgs.sdgs--why{ background-color:var(--s-light); }
.sdgs--why{ --tile-bg:linear-gradient(135deg,rgba(255,216,77,.28),rgba(255,190,26,.08)); --tile-bd:rgba(255,190,26,.42); }

/* Не ещё одна россыпь карточек, а единый «лист характеристик»:
   одна плита, ячейки делятся волосяными линиями, теней у ячеек нет. */
.sdgs--why .grid-3{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0; margin-top:44px;
  background:#fff;
  border:1px solid var(--s-line); border-radius:24px; overflow:hidden;
  box-shadow:var(--s-shadow);
}
.sdgs--why .div-block-6{
  border:0; border-radius:0; box-shadow:none;
  padding:30px 28px 32px;
  border-right:1px solid var(--s-line);
  border-bottom:1px solid var(--s-line);
  transition:background-color .25s ease;
}
.sdgs--why .div-block-6:nth-child(3n){ border-right:0; }
.sdgs--why .div-block-6:nth-last-child(-n+3){ border-bottom:0; }
.sdgs--why .div-block-6:hover{
  transform:none; box-shadow:none; border-color:var(--s-line);
  background:#fffdf5;
}
/* иконка кружком — отличается от скруглённых плиток в соседних секциях */
.sdgs--why .div-block-3{
  width:50px; height:50px; border-radius:50%;
  box-shadow:0 8px 18px -10px rgba(255,190,26,.75);
}
.sdgs--why .div-block-448{
  gap:15px; margin-bottom:15px;
  /* прижимаем к верху: при центрировании ячейка с двухстрочным заголовком
     поднимала иконку выше соседей с однострочным */
  align-items:flex-start;
}
/* первую строку заголовка ставим по центру иконки: (50 − 21) / 2 */
.sdgs--why .text-block-2.dop1{ padding-top:14px; }
.sdgs--why .text-block-2{ font-size:16px; }

/* Число компаний — акцент маркером, а не янтарным текстом:
   #FFBE1A на светлом фоне даёт всего 1.48:1, читаться не будет. */
.sdgs--why #c{
  color:var(--s-ink);
  background:linear-gradient(180deg, transparent 56%, rgba(255,190,26,.5) 56%);
  padding:0 .1em; border-radius:3px;
}

/* ============================================================
   6. «Кому подходит» — сегменты
   ============================================================ */
/* Тёмная секция, но строгая: никаких фоновых сцен и свечений — реестр применимости.
   Шесть строк в одной плите, разделены волосяными линиями. */
.sdgs.sdgs--who{
  background-color:#0d1117;
  /* фон по теме продукта: настоящая стопка бумаг в низком ключе, без свечений.
     !important — базовое section.sdgs гасит background-image у всех секций */
  background-image:url("/assets/img/sdg_who_bg.jpg") !important;
  background-image:image-set(url("/assets/img/sdg_who_bg.webp") type("image/webp"),
                             url("/assets/img/sdg_who_bg.jpg")  type("image/jpeg")) !important;
  background-size:cover !important; background-position:center bottom !important;
  background-repeat:no-repeat !important;
}
.sdgs--who{ --tile-bg:rgba(255,255,255,.07); --tile-bd:rgba(255,255,255,.14); }
.sdgs--who .heading{ color:#fff; }
.sdgs--who .heading + .text-block-4{ color:rgba(255,255,255,.66); }
/* лёгкая вуаль: заголовок отбит от кадра, снизу бумага остаётся видна */
.sdgs--who::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,17,23,.86) 0%, rgba(13,17,23,.5) 46%, rgba(13,17,23,.18) 100%);
}
.sdgs--who .container{ position:relative; z-index:1; }

/* Карточка строится по ЭТАЛОНУ из секции «Вы теряете недели» (см. её шапку):
   та же плита, то же свечение из угла, голая иконка 46px и заголовок 18.5px в строку.
   Отличие только в содержимом: под шапкой список задач и строка результата. */
.sdgs--who .grid-38{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px; margin:44px 0 0;
  background:none; border:0; border-radius:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.sdgs--who .div-block-6{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "body" "result";
  row-gap:0; padding:28px 30px 30px;
  background:linear-gradient(158deg,#151b26 0%,#0e131b 58%,#12111a 100%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  box-shadow:0 2px 4px rgba(11,14,19,.16), 0 26px 54px -28px rgba(11,14,19,.72);
}
/* свечение — геометрия эталона, цвет секции (синий вместо тревожного красного) */
/* Тёплый акцент на холодной плите — та же формула, что даёт объём в «Боли».
   Синее свечение сливалось с сине-серым фоном карточки и выглядело плоско. */
.sdgs--who .div-block-6::before{
  content:""; position:absolute; left:-14%; top:-58%; width:62%; height:150%;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,176,20,.30), transparent 66%);
  pointer-events:none; opacity:.85; transition:opacity .28s ease;
}
.sdgs--who .div-block-6:hover{
  transform:translateY(-5px);
  border-color:rgba(255,190,26,.42);
  box-shadow:0 2px 4px rgba(11,14,19,.18), 0 34px 66px -28px rgba(11,14,19,.8),
             0 0 44px -16px rgba(255,190,26,.4);
}
.sdgs--who .div-block-6:hover::before{ opacity:1; }

/* шапка: голая иконка + заголовок в строку — как в эталоне */
.sdgs--who .div-block-448{
  grid-area:head; position:relative; z-index:1;
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
  gap:18px; margin:0 0 14px; padding:0; border:0;
}
.sdgs--who .div-block-3{
  display:flex; flex:none; align-self:center;
  width:46px; height:46px; border-radius:0;
  background:none; border:0; box-shadow:none;
  /* у иконки класс .centre, а .sdgs .div-block-3.centre даёт margin-bottom:16px —
     из-за него заголовок сидел на 8px ниже центра иконки */
  margin:0 !important;
}
/* Иконку красим маской: hue-rotate — линейная матрица, она обесцвечивает
   и даёт грязь (#6d402c вместо янтаря). Маска по альфе даёт точный цвет. */
.sdgs--who .image-2{ display:none; }
.sdgs--who .div-block-3{
  background:linear-gradient(135deg,var(--s-am1),var(--s-am2));
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
          mask-size:contain;         mask-repeat:no-repeat;         mask-position:center;
  filter:drop-shadow(0 7px 16px rgba(255,176,20,.5));
}
.sdgs--who .div-block-6:nth-child(1) .div-block-3{
  -webkit-mask-image:url("/assets/mirror/images/68e279d1cf184b318b8e0f3b_icons8-graduation-cap-100.png");
          mask-image:url("/assets/mirror/images/68e279d1cf184b318b8e0f3b_icons8-graduation-cap-100.png");
}
.sdgs--who .div-block-6:nth-child(2) .div-block-3{
  -webkit-mask-image:url("/assets/mirror/images/68e279d1c403862b9da61d78_icons8-bank-cards-100.png");
          mask-image:url("/assets/mirror/images/68e279d1c403862b9da61d78_icons8-bank-cards-100.png");
}
.sdgs--who .div-block-6:nth-child(3) .div-block-3{
  -webkit-mask-image:url("/assets/mirror/images/68e279d112fe57a39a46f8a0_icons8-training-100.png");
          mask-image:url("/assets/mirror/images/68e279d112fe57a39a46f8a0_icons8-training-100.png");
}
.sdgs--who .div-block-6:nth-child(4) .div-block-3{
  -webkit-mask-image:url("/assets/mirror/images/68e279d1a84a7e56f5065c6b_icons8-briefcase-100.png");
          mask-image:url("/assets/mirror/images/68e279d1a84a7e56f5065c6b_icons8-briefcase-100.png");
}
.sdgs--who .div-block-6:nth-child(5) .div-block-3{
  -webkit-mask-image:url("/assets/mirror/images/68e279d1ea10833e4214e17b_icons8-business-e-mail-100.png");
          mask-image:url("/assets/mirror/images/68e279d1ea10833e4214e17b_icons8-business-e-mail-100.png");
}
.sdgs--who .div-block-6:nth-child(6) .div-block-3{
  -webkit-mask-image:url("/assets/mirror/images/68e279d14c9b7703e54308bc_icons8-home-page-100.png");
          mask-image:url("/assets/mirror/images/68e279d14c9b7703e54308bc_icons8-home-page-100.png");
}

.sdgs--who .text-block-2.dop1{
  display:block; align-self:center; flex:1 1 auto; min-width:0;
  margin:0 !important; padding:0;
  color:#fff; font-size:clamp(16px,1.3vw,18.5px); font-weight:700;
  line-height:1.28; letter-spacing:-.014em;
}

/* задачи: кегль и цвет абзаца из эталона, список в одну колонку — без переносов */
.sdgs--who .div-block-6 > .text-block-3:not(.color1){
  grid-area:body; position:relative; z-index:1; padding:0;
  color:rgba(255,255,255,.68); font-size:15.2px; line-height:1.65;
}
.sdgs--who .text-block-3 strong{
  display:block; margin-bottom:12px;
  color:rgba(255,255,255,.54); font-family:"Montserrat",sans-serif; font-size:10.5px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.sdgs--who .sdgs-tasks{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:9px;
}
.sdgs--who .sdgs-tasks li{ position:relative; padding-left:19px; }
.sdgs--who .sdgs-tasks li::before{
  content:""; position:absolute; left:0; top:.66em; width:6px; height:6px;
  border-radius:50%; background:var(--s-am2); box-shadow:0 0 10px rgba(255,190,26,.55);
}

/* результат: отбитая строка внизу карточки, без плашек и рамок */
.sdgs--who .div-block-6 > .text-block-3.color1{
  grid-area:result; position:relative; z-index:1; align-self:end;
  margin:20px 0 0; padding:17px 0 0 28px;
  border:0; border-top:1px solid rgba(255,255,255,.08); border-radius:0;
  background:none;
  color:#ffd98a; font-size:13.6px; font-weight:600; line-height:1.55;
}
.sdgs--who .div-block-6 > .text-block-3.color1::before{
  content:""; position:absolute; left:0; top:18px; width:17px; height:17px;
  background:var(--s-am2); border-radius:0; box-shadow:none;
  -webkit-mask:var(--sdg-chk-am) center/contain no-repeat;
          mask:var(--sdg-chk-am) center/contain no-repeat;
}

/* строки результата выравниваем по ряду: у карточек три строки содержимого */
@supports (grid-template-rows: subgrid){
  .sdgs--who .div-block-6{ grid-row:span 3; grid-template-rows:subgrid; row-gap:0; }
  .sdgs--who .div-block-448{ grid-row:1; }
  .sdgs--who .div-block-6 > .text-block-3:not(.color1){ grid-row:2; }
  .sdgs--who .div-block-6 > .text-block-3.color1{ grid-row:3; }
}

/* закрывающая плашка на тёмном фоне */
.sdgs--who .grid-38 + .text-block-4{
  background:linear-gradient(90deg, rgba(255,190,26,.17), rgba(255,190,26,.06));
  border-color:rgba(255,190,26,.32); color:#ffe6a3;
}

/* ============================================================
   7. Таблица сравнения
   ============================================================ */
.sdgs.sdgs--cmp{ background-color:var(--s-light); }
.sdgs--cmp .div-block-470{
  margin-top:42px; overflow-x:auto; overflow-y:hidden;
  border-radius:20px; box-shadow:var(--s-shadow);
  -webkit-overflow-scrolling:touch;
}
.sdgs--cmp .grid-35{
  min-width:940px; margin:0; border-radius:20px; overflow:hidden;
  background:#fff; box-shadow:none; border:1px solid var(--s-line);
  font-family:"Montserrat",sans-serif;
}
/* Каждая строка таблицы — отдельный грид, поэтому у 1fr колонки считаются
   заново для каждой строки и разъезжаются на длинных подписях.
   minmax(0,…) убирает автоматический минимум — колонки везде одинаковые. */
.sdgs--cmp .grid-36,
.sdgs--cmp .grid-37{
  grid-template-columns:minmax(0,1.55fr) repeat(4, minmax(0,1fr)) !important;
}
.sdgs--cmp .grid-36{
  background:var(--s-ink); color:#fff; border-radius:0;
  padding:17px 20px; font-size:13.5px; font-weight:700; letter-spacing:.01em;
}
.sdgs--cmp .grid-36 > div:nth-child(2){ color:var(--s-am1); }
.sdgs--cmp .grid-37{
  border-top:1px solid var(--s-line); padding:16px 20px;
  align-items:center; font-size:14px; color:var(--s-body);
}
.sdgs--cmp .grid-37:nth-of-type(even){ background:#fbfcfe; }
.sdgs--cmp .text-block-267{
  padding-left:0; color:var(--s-ink); font-weight:700; font-size:14px; text-align:left;
}
/* колонка SmartDocGen — подсвечена */
.sdgs--cmp .div-block-469{
  background:rgba(18,161,80,.10); margin:-16px 0; padding:16px 8px;
  color:#0d7a3c; font-weight:800; font-size:14.5px;
  border-left:1px solid rgba(18,161,80,.18); border-right:1px solid rgba(18,161,80,.18);
  align-self:stretch;
}
.sdgs--cmp .grid-37:last-child .div-block-469{ padding-bottom:20px; }
.sdgs--cmp .image-13{ width:18px; height:18px; max-width:18px; object-fit:contain; }
.sdgs--cmp .div-block-465{ margin-top:30px; gap:18px; }
.sdgs--cmp .div-block-465 .text-block-4{ max-width:760px; font-size:15.5px; color:var(--s-body); }
.sdgs--cmp .div-block-465 .text-block-4 strong{ color:var(--s-ink); }
/* тени-подсказки: видны, только пока таблицу есть куда прокручивать */
.sdgs--cmp .div-block-470{
  background:
    radial-gradient(farthest-side at 0 50%, rgba(16,24,40,.20), transparent) 0 0 / 16px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(16,24,40,.20), transparent) 100% 0 / 16px 100% no-repeat,
    linear-gradient(90deg, var(--s-light) 40%, rgba(238,242,248,0)) 0 0 / 34px 100% no-repeat,
    linear-gradient(90deg, rgba(238,242,248,0), var(--s-light) 60%) 100% 0 / 34px 100% no-repeat;
  background-attachment:scroll, scroll, local, local;
}

/* ============================================================
   8. Калькулятор (тёмная)
   ============================================================ */
.sdgs--calc .div-block-472{ margin-top:42px; }
/* во всю ширину контейнера, как было на старом сайте (там max-width:1200px) */
.sdgs--calc #sdg_root_cards_v1{ margin:0 auto; max-width:none; color:#fff; }
.sdgs--calc .sdgcard_box{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:24px; padding:clamp(18px,2.4vw,30px);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.sdgs--calc .sdgcard_panel{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:16px; padding:20px 22px; box-shadow:none;
}
.sdgs--calc .sdgcard_sectionTitle{
  color:rgba(255,255,255,.6); font-size:12px; font-weight:600;
  letter-spacing:.03em; margin-bottom:10px;
}
.sdgs--calc .sdgcard_label{ color:#fff; font-size:14.5px; font-weight:700; flex:0 0 190px; }
.sdgs--calc .sdgcard_range{ background:rgba(255,255,255,.16); height:6px; }
.sdgs--calc .sdgcard_range::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,var(--s-am1),var(--s-am2));
  box-shadow:0 3px 12px rgba(255,190,26,.7); cursor:pointer; border:0;
}
.sdgs--calc .sdgcard_range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; border:0;
  background:linear-gradient(135deg,var(--s-am1),var(--s-am2));
  box-shadow:0 3px 12px rgba(255,190,26,.7); cursor:pointer;
}
.sdgs--calc .sdgcard_range:focus-visible{ outline:2px solid var(--s-am1); outline-offset:4px; }
.sdgs--calc .sdgcard_val{
  color:var(--s-am1); font-weight:800; font-size:15px; min-width:86px;
}
.sdgs--calc .sdgcard_resultsWrap{
  display:grid; margin-top:20px; gap:12px;
  grid-template-columns:repeat(4,minmax(0,1fr));   /* 8 плиток = ровно 2 ряда */
}
.sdgs--calc .sdgcard_card{
  min-width:0; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.10);
  border-radius:15px; padding:15px 18px; box-shadow:none;
  transition:border-color .22s ease, background-color .22s ease, transform .22s var(--s-ease);
}
.sdgs--calc .sdgcard_card:hover{
  background:rgba(255,255,255,.09); border-color:rgba(255,190,26,.4); transform:translateY(-2px);
}
.sdgs--calc .sdgcard_cardLabel{ color:rgba(255,255,255,.62); font-size:13px; font-weight:600; }
.sdgs--calc .sdgcard_cardValue{ color:#fff; font-size:15.5px; font-weight:800; }
.sdgs--calc .sdgcard_green{ color:#4ade80; }
.sdgs--calc .sdgcard_red{ color:#fda4a0; }

/* ============================================================
   9. Тарифы
   ============================================================ */
.sdgs.sdgs--pay{ background-color:#fff; }
.sdgs--pay .grid-25{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px; margin-top:46px; align-items:stretch;
}
.sdgs--pay .div-block-441{
  position:relative; overflow:visible;
  background:#fff !important; background-image:none !important;
  border:1px solid var(--s-line); border-radius:22px;
  padding:30px 26px 28px !important; margin:0 !important;
  display:flex; flex-direction:column; justify-content:flex-start;
  box-shadow:var(--s-shadow);
  transition:transform .26s var(--s-ease), box-shadow .26s ease, border-color .26s ease;
}
.sdgs--pay .div-block-441:hover{ transform:translateY(-4px); box-shadow:var(--s-shadow-hi); }
/* выделенный тариф */
.sdgs--pay .div-block-441.baz{
  border:2px solid var(--s-am2);
  box-shadow:0 2px 6px rgba(16,24,40,.05), 0 34px 64px -28px rgba(255,190,26,.65);
}
.sdgs--pay .text-block-12{
  color:var(--s-ink); font-size:15px; font-weight:700; letter-spacing:-.005em;
}
.sdgs--pay .text-block-13{ color:var(--s-muted); font-size:12.5px; margin-top:5px; }
.sdgs--pay .text-block-15{
  color:var(--s-ink); font-size:clamp(32px,3.2vw,42px); font-weight:800;
  letter-spacing:-.03em; margin:14px 0 10px; line-height:1;
}
.sdgs--pay .text-block-13.bolt{
  background:rgba(18,161,80,.12); color:#0d7a3c; border:1px solid rgba(18,161,80,.24);
  border-radius:999px; padding:5px 13px; font-size:12px; font-weight:700; margin-top:0;
}
.sdgs--pay .text-block-14{
  color:var(--s-ink); font-size:13px; font-weight:700; margin:22px 0 10px;
  padding-top:20px; border-top:1px solid var(--s-line);
  letter-spacing:.03em; text-transform:uppercase;
}
.sdgs--pay .list-3{
  list-style:none; padding:0; margin:0; display:grid; gap:10px;
  align-content:start; flex:1;              /* кнопки трёх тарифов на одной линии */
}
.sdgs--pay .list-3 li{
  position:relative; padding-left:28px;
  color:var(--s-body); font-family:"Open Sans",sans-serif; font-size:13.5px; line-height:1.5;
}
.sdgs--pay .list-3 li::before{
  content:""; position:absolute; left:0; top:2px; width:18px; height:18px;
  border-radius:6px; background:rgba(255,190,26,.14); border:1px solid rgba(255,190,26,.36);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c99000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}
.sdgs--pay .button._80.w-button{
  width:100%; margin-top:24px;
  background:linear-gradient(135deg,var(--s-am1),var(--s-am2)) !important;
  color:var(--s-am-ink) !important; border:0 !important; border-radius:14px !important;
  padding:16px 20px !important; font-size:15px !important; font-weight:700 !important;
  box-shadow:0 12px 28px -12px rgba(255,190,26,.7), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.sdgs--pay .button._80.w-button:hover{
  transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:0 18px 38px -14px rgba(255,190,26,.8), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
/* бейдж «ХИТ» / «звёзды» — вместо косой красной ленты */
.sdgs--pay .text-block-86{
  position:absolute; inset:auto auto auto 50%;
  top:-13px; left:50%; transform:translateX(-50%);
  width:auto; height:auto; margin:0;
  padding:6px 16px; border-radius:999px;
  background:linear-gradient(135deg,var(--s-am1),var(--s-am2));
  color:var(--s-am-ink); font-size:12px; font-weight:800; line-height:1.2;
  letter-spacing:.06em; white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(255,190,26,.85);
}
.sdgs--pay .div-block-471{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--s-line);
  color:var(--s-muted); font-size:11.5px; gap:7px;
}
.sdgs--pay .text-block-179{ margin:44px 0 14px; color:var(--s-muted); font-size:13px; }
.sdgs .text-block-179:empty,.sdgs .rev008-date:empty{ display:none; }
.sdgs--pay .div-block-443{ margin-top:38px; gap:26px; filter:grayscale(1); opacity:.55; transition:filter .3s, opacity .3s; }
.sdgs--pay .div-block-443:hover{ filter:grayscale(0); opacity:1; }
/* width/height в разметке (против сдвигов) + ограничение только по высоте = растяжение.
   Снимаем обе жёсткие стороны, высоту ограничиваем max-height — пропорции считает браузер. */
.sdgs--pay .image-5{ width:auto; height:auto; max-height:26px; max-width:100%; object-fit:contain; }

/* ============================================================
   10. Отзывы
   ============================================================ */
.sdgs.sdgs--rev{ background-color:var(--s-light); }
.sdgs--rev .rev008-label-2{
  color:var(--s-muted); text-align:center; font-size:11.5px; letter-spacing:.07em;
  max-width:900px; margin:0 auto 20px; line-height:1.6;
}
.sdgs--rev .rev008-title__block-2{
  flex-direction:column; align-items:center; gap:26px; margin-bottom:36px;
}
.sdgs--rev .rev008-title__box-2{ width:100%; align-items:stretch; }
.sdgs--rev .rev008-title__box-2 > *{ width:100%; }
.sdgs--rev .heading.dop3{ margin-top:0; }
.sdgs--rev .rev008-slide-2{
  background:#fff; border:1px solid var(--s-line); border-radius:20px;
  padding:28px 30px; box-shadow:var(--s-shadow);
  transition:transform .26s var(--s-ease), box-shadow .26s ease, border-color .26s ease;
}
.sdgs--rev .swiper-slide{ height:auto; padding:6px 4px 22px; }
.sdgs--rev .rev008-slide-2:hover{
  transform:translateY(-4px); box-shadow:var(--s-shadow-hi); border-color:rgba(255,190,26,.5);
}
.sdgs--rev .rev008-slide__head{ align-items:center; margin-bottom:18px; }
.sdgs--rev .rev008-author__image{ width:46px; height:46px; border-radius:50%; }
.sdgs--rev .rev008-author__title{ color:var(--s-ink); font-size:14.5px; font-weight:700; }
/* height:auto обязателен: в разметке width/height проставлены (16×15) против сдвигов,
   и задание только ширины сплющивало звезду */
.sdgs--rev .rev008-reit__item{ width:15px; height:auto; }
.sdgs--rev .rev008-slide__title{
  color:var(--s-ink); font-size:16.5px; font-weight:700; line-height:1.32;
  letter-spacing:-.012em; margin-bottom:10px;
}
.sdgs--rev .text-block-186{
  color:var(--s-body); font-family:"Open Sans",sans-serif; font-size:14px; line-height:1.65;
}
.sdgs--rev .rev008-more{ margin-top:20px; padding-top:16px; border-top:1px solid var(--s-line); }
.sdgs--rev .rev008-about{
  position:relative; padding-left:16px; color:var(--s-muted); font-size:12.5px; font-weight:600;
}
.sdgs--rev .rev008-about::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--s-am2);
}
/* стрелки слайдера */
.sdgs--rev .rev008-prev,.sdgs--rev .rev008-next{
  width:46px; height:46px; border-radius:50%;
  transition:transform .22s var(--s-ease), background-color .22s ease, border-color .22s ease, color .22s ease;
}
.sdgs--rev .rev008-prev{ border:1px solid rgba(16,24,40,.16); background:#fff; color:var(--s-ink); }
.sdgs--rev .rev008-next{
  border:0; background:linear-gradient(135deg,var(--s-am1),var(--s-am2)); color:var(--s-am-ink);
  box-shadow:0 10px 24px -10px rgba(255,190,26,.8);
}
.sdgs--rev .rev008-prev:hover,.sdgs--rev .rev008-next:hover{ transform:translateY(-2px); }
.sdgs--rev .rev008-prev:hover{ border-color:var(--s-am2); color:var(--s-am2); }
.sdgs--rev .rev008-pagination .swiper-pagination-bullet{
  width:8px; height:8px; background:rgba(16,24,40,.18); opacity:1;
}
.sdgs--rev .rev008-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background:var(--s-am2); width:22px; border-radius:4px;
}

/* ============================================================
   11. FAQ
   ============================================================ */
.sdgs.sdgs--faq{ background-color:#fff; }
.sdgs--faq .dropwrapper{ max-width:none; margin:42px 0 0; gap:11px; }
.sdgs--faq .dropdown-toggle-2{
  background:#fff; border:1px solid var(--s-line); border-radius:15px;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
  padding:19px 22px; gap:18px;
  color:var(--s-ink); font-size:15px; font-weight:600; line-height:1.4;
  transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.sdgs--faq .dropdown-toggle-2:hover{
  border-color:rgba(255,190,26,.55); box-shadow:0 8px 22px -12px rgba(16,24,40,.28);
}
.sdgs--faq .dropdown-toggle-2.w--open{
  border-color:rgba(255,190,26,.6); border-bottom-left-radius:0; border-bottom-right-radius:0;
  background:#fffdf6;
}
/* В закрытом состоянии Webflow оставляет список высотой 1px — его боковые
   и нижняя рамки давали янтарную полоску под вопросом и «срезали» скругление.
   Поэтому рамку и фон включаем только когда список раскрыт (.w--open). */
.sdgs--faq .dropdown-list-2{
  background:none; border:0; border-radius:0 0 15px 15px;
  margin-top:0; padding-top:0;
}
.sdgs--faq .dropdown-list-2.w--open{
  background:#fffdf6; border:1px solid rgba(255,190,26,.6); border-top:0;
}
/* Поля переносим на вложенный блок: при grid-template-rows:0fr контент
   схлопывается, а padding самого элемента остаётся и даёт 26px «хвост». */
.sdgs--faq .div-block-181{
  color:var(--s-body); font-family:"Open Sans",sans-serif;
  font-size:14.5px; line-height:1.68; padding:0;
}
.sdgs--faq .div-block-181 > *{ padding:4px 22px 22px; }
.sdgs--faq .lottie-animation-14{ flex:none; }

/* ============================================================
   12. Финальный призыв (тёмная)
   ============================================================ */
/* Финальный CTA — точка принятия решения. Фон живёт В САМОМ БЛОКЕ:
   золотой рассвет снизу, взлетающие листы, тёмный центр под текст. */
.sdgs--final .div-block-185{
  position:relative; overflow:hidden;
  background-color:#080b11 !important;
  background-image:url("/assets/img/sdg_cta_bg.jpg") !important;
  background-image:image-set(url("/assets/img/sdg_cta_bg.webp") type("image/webp"),
                             url("/assets/img/sdg_cta_bg.jpg")  type("image/jpeg")) !important;
  background-size:cover !important; background-position:center bottom !important;
  background-repeat:no-repeat !important;
  border:1px solid rgba(255,190,26,.20); border-radius:28px;
  padding:clamp(44px,5.4vw,76px) clamp(24px,4vw,64px) clamp(40px,4.8vw,64px) !important;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85), 0 0 90px -50px rgba(255,190,26,.55);
}
/* вуаль: центр притемняем под текст, край оставляем живым */
.sdgs--final .div-block-185::before{
  content:""; position:absolute; inset:0;
  /* низ притемняем отдельно: на узком экране мелкий текст попадал
     на самую яркую золотую часть кадра и давал 3.84:1 */
  background:
    linear-gradient(180deg, transparent 52%, rgba(8,11,17,.62) 100%),
    radial-gradient(ellipse 78% 66% at 50% 42%,
             rgba(8,11,17,.86) 0%, rgba(8,11,17,.55) 58%, rgba(8,11,17,.12) 100%);
}
.sdgs--final .div-block-185 > *{ position:relative; z-index:1; }

.sdgs--final .text-block-10{
  color:#fff; font-size:clamp(25px,3vw,42px); font-weight:700;
  line-height:1.14; letter-spacing:-.028em; text-wrap:balance;
  max-width:20ch; margin:0 auto;
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.sdgs--final .text-block-11{ margin:0; }
.sdgs--final .sdgc-lead{
  color:rgba(255,255,255,.78); font-family:"Open Sans",sans-serif;
  font-size:clamp(15px,1.2vw,17.5px); line-height:1.7;
  margin:22px auto 0; max-width:660px; text-align:center;
}

/* три «Пока другие…» — в ряд карточками, это ядро аргумента */
.sdgs--final .sdgc-vs{
  list-style:none; margin:clamp(28px,3.2vw,42px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px; text-align:left;
}
.sdgs--final .sdgc-vs li{
  position:relative; padding:20px 20px 22px 52px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:rgba(255,255,255,.86); font-family:"Open Sans",sans-serif;
  font-size:14.4px; line-height:1.6;
}
.sdgs--final .sdgc-vs li::before{
  content:""; position:absolute; left:20px; top:21px; width:20px; height:20px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--s-am1),var(--s-am2));
  background-image:var(--sdg-chk-ink), linear-gradient(135deg,#FFD84D,#FFBE1A);
  background-size:12px, auto; background-position:center, center; background-repeat:no-repeat, no-repeat;
  box-shadow:0 5px 14px -4px rgba(255,190,26,.85);
}

/* кнопка — крупная, с бликом */
.sdgs--final .button-2.w-button{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  margin:clamp(30px,3.4vw,44px) auto 0;
  background:linear-gradient(135deg,var(--s-am1),var(--s-am2)) !important;
  color:var(--s-am-ink) !important; border:0 !important; border-radius:14px !important;
  padding:17px 36px !important; font-size:15px !important; font-weight:700 !important;
  letter-spacing:.2px;
  box-shadow:0 18px 42px -14px rgba(255,190,26,.9), inset 0 1px 0 rgba(255,255,255,.5) !important;
  transition:transform .22s var(--s-ease), box-shadow .22s ease, filter .22s ease;
}
.sdgs--final .button-2.w-button::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-18deg); animation:sdgs-shine 4.8s ease-in-out infinite;
}
.sdgs--final .button-2.w-button:hover{
  transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:0 26px 56px -16px rgba(255,190,26,1), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
@keyframes sdgs-shine{ 0%,62%{ left:-60% } 88%,100%{ left:120% } }

.sdgs--final .text-block-189{
  color:rgba(255,255,255,.66); font-size:13px; text-align:center; margin-top:12px;
}
.sdgs--final .text-block-189 + .text-block-189{ margin-top:5px; color:rgba(255,255,255,.72); }

/* плашки-гарантии под блоком */
.sdgs--final .div-block-466{ justify-content:center; gap:10px; margin-top:26px; }
.sdgs--final .div-block-467{
  position:relative; background:rgba(255,255,255,.06); color:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.12); border-radius:999px;
  padding:9px 16px 9px 34px; font-size:12.5px; font-weight:600;
  transition:border-color .22s ease, background-color .22s ease;
}
.sdgs--final .div-block-467::before{
  content:""; position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; background:var(--s-am1);
  -webkit-mask:var(--sdg-chk-am) center/contain no-repeat;
          mask:var(--sdg-chk-am) center/contain no-repeat;
}
.sdgs--final .div-block-467:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,190,26,.5); }

/* ============================================================
   СВОИ КОМПОНЕНТЫ ВМЕСТО WEBFLOW И SWIPER
   Раскрытие и прокрутка живут в /assets/js/ui.js.
   ============================================================ */

/* ---- Аккордеон FAQ ----
   Высота едет через grid-template-rows 0fr → 1fr: не нужно мерить
   пиксели, ничего не прыгает и нет инлайн-стилей от скрипта. */
.sdgs--faq .dropdown-toggle-2{ cursor:pointer; user-select:none; }
.sdgs--faq .icon,
.sdgs--faq .lottie-animation-14{ display:none !important; }

/* свой знак «плюс», который на раскрытии превращается в «минус» */
.sdgs--faq .dropdown-toggle-2::after{
  content:""; flex:none; width:22px; height:22px; margin-left:auto;
  border-radius:50%; border:1.5px solid rgba(255,190,26,.75);
  background-image:
    linear-gradient(var(--s-am2),var(--s-am2)),
    linear-gradient(var(--s-am2),var(--s-am2));
  background-size:10px 1.6px, 1.6px 10px;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  transition:transform .28s var(--s-ease), border-color .2s ease;
}
.sdgs--faq .dropdown-3.is-open .dropdown-toggle-2::after{
  transform:rotate(90deg);
  background-size:10px 1.6px, 0 0;      /* вертикальную палочку убираем — остаётся минус */
}
.sdgs--faq .dropdown-toggle-2:focus-visible{
  outline:2px solid var(--s-am2); outline-offset:3px;
}

.sdgs--faq .dropdown-list-2{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--s-ease);
}
.sdgs--faq .dropdown-3.is-open .dropdown-list-2{ grid-template-rows:1fr; }
.sdgs--faq .dropdown-list-2 > *{ overflow:hidden; min-height:0; }
/* рамку и фон включаем только у раскрытого — иначе под вопросом
   оставалась янтарная полоска и «срезалось» скругление */
.sdgs--faq .dropdown-3.is-open .dropdown-list-2{
  background:#fffdf6; border:1px solid rgba(255,190,26,.6); border-top:0;
}
.sdgs--faq .dropdown-3.is-open .dropdown-toggle-2{
  border-color:rgba(255,190,26,.6);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  background:#fffdf6;
}

/* ---- Слайдер отзывов на нативной прокрутке ---- */
/* Высоту под текущий отзыв задаём ОБЁРТКЕ, а не самой дорожке: у дорожки
   overflow-x:auto, и тогда по спецификации вторая ось тоже становится auto —
   от фиксированной высоты внутри карточки появлялся вертикальный скролл. */
.sdgs--rev .rev008-slider{
  overflow:hidden;
  transition:height .32s var(--s-ease);
}
.sdgs--rev .swiper-wrapper{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc(50% - 10px);
  /* align-items:start — иначе колонки грида тянутся до самой высокой
     карточки и под коротким отзывом остаётсяпустое поле */
  align-items:start;
  gap:20px; margin:0; padding:4px 0 22px;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.sdgs--rev .swiper-wrapper::-webkit-scrollbar{ display:none; }
.sdgs--rev .swiper-slide{ scroll-snap-align:start; height:auto; padding:0; }
.sdgs--rev .rev008-prev[disabled],
.sdgs--rev .rev008-next[disabled]{ opacity:.35; pointer-events:none; }
.sdgs--rev .rev008-prev,.sdgs--rev .rev008-next{ cursor:pointer; }
/* точки строит ui.js */
.sdgs--rev .sdg-dot{ cursor:pointer; }
.sdgs--rev .sdg-dot:focus-visible{ outline:2px solid var(--s-am2); outline-offset:3px; }

@media (max-width:900px){
  .sdgs--rev .swiper-wrapper{ grid-auto-columns:100%; }
}
@media (prefers-reduced-motion:reduce){
  .sdgs--rev .rev008-slider{ transition:none; }
  .sdgs--faq .dropdown-list-2,
  .sdgs--faq .dropdown-toggle-2::after,
  .sdgs--rev .sdg-dot{ transition:none !important; }
  .sdgs--rev .swiper-wrapper{ scroll-behavior:auto; }
}

/* ============================================================
   ВОЛНИСТЫЕ ГРАНИЦЫ МЕЖДУ СЕКЦИЯМИ
   Та же кривая, что после первого экрана (.sdgh__wave), тот же приём:
   волна лежит внизу секции и залита цветом СЛЕДУЮЩЕЙ — стыка не видно.
   Разметка не нужна, всё на ::after.
   ============================================================ */
.sdgs--video::after,
.sdgs--why::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; z-index:2;
  height:clamp(52px,7vw,110px); pointer-events:none;
  background-repeat:no-repeat; background-position:center bottom; background-size:100% 100%;
}
/* видео (тёмная) → «Почему N компаний» (светлая #eef2f8) */
.sdgs--video::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 44C360 104 1080-16 1440 44v66H0z' fill='%23eef2f8'/%3E%3C/svg%3E");
}
/* «Почему N компаний» (светлая) → «Кому подходит» (тёмная #070a10) */
.sdgs--why::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 44C360 104 1080-16 1440 44v66H0z' fill='%230d1117'/%3E%3C/svg%3E");
}
/* Воздух над волной: волна занимает до 110px, плюс ~65px просвета, иначе
   контент садится на гребень. Селектор из двух классов — иначе базовое
   section.sdgs{padding:… !important} перебивает по специфичности. */
.sdgs.sdgs--video, .sdgs.sdgs--why{ padding-bottom:clamp(120px,11.8vw,176px) !important; }
/* у «Кому подходит» волна приходит сверху — держим дистанцию до заголовка */
.sdgs.sdgs--who{ padding-top:clamp(74px,7.8vw,118px) !important; }

/* ============================================================
   МОБИЛЬНАЯ ДОВОДКА
   Найдено замером: точки слайдера 8×8 и ползунки высотой 6px —
   не попасть пальцем; часть подписей мельче 12px.
   ============================================================ */

/* Точки слайдера: кружок рисует псевдоэлемент, у кнопки — только область
   касания 40×40. Через background-clip не вышло: border-radius считается
   от внешнего бокса, и активная точка превращалась в жёлтый прямоугольник. */
.sdgs--rev .sdg-dot{
  position:relative; box-sizing:border-box;
  width:34px; height:40px; padding:0;
  background:none; border:0; border-radius:0;
}
.sdgs--rev .sdg-dot::before{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%;
  background:rgba(16,24,40,.22);
  transition:width .25s var(--s-ease), background-color .25s ease, border-radius .25s ease;
}
.sdgs--rev .sdg-dot.is-active::before{
  width:22px; border-radius:4px; background:var(--s-am2);
}
.sdgs--rev .rev008-pagination{ gap:0; }

/* ползунки калькулятора: дорожка та же, но палец попадает */
.sdgs--calc .sdgcard_range{
  -webkit-appearance:none; appearance:none;
  height:40px; background:transparent; margin:0;
}
.sdgs--calc .sdgcard_range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px; background:rgba(255,255,255,.16);
}
.sdgs--calc .sdgcard_range::-moz-range-track{
  height:6px; border-radius:999px; background:rgba(255,255,255,.16);
}
.sdgs--calc .sdgcard_range::-webkit-slider-thumb{ margin-top:-7px; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1080px){
  .sdgs--final .sdgc-vs{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .sdgs--calc .sdgcard_resultsWrap{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sdgs--who .grid-38{ grid-template-columns:minmax(0,1fr); }
  /* бенто: ядро на всю ширину, остальные по две в ряд */
  .sdgs--sol .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sdgs--sol .grid > div:first-child{ grid-column:span 2; }
  /* .sdgs--who .grid-38 сюда не входит: реестр всегда в одну колонку */
  .sdgs--why .grid-3,
  .sdgs--pay .grid-25{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sdgs--why .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sdgs--why .div-block-6:nth-child(3n){ border-right:1px solid var(--s-line); }
  .sdgs--why .div-block-6:nth-child(2n){ border-right:0; }
  .sdgs--why .div-block-6:nth-last-child(-n+3){ border-bottom:1px solid var(--s-line); }
  .sdgs--why .div-block-6:nth-last-child(-n+2){ border-bottom:0; }
  .sdgs--pay .div-block-441.baz{ order:-1; }
}
@media (max-width:760px){
  /* Логотипы платёжных систем — широкие текстовые начертания: при читаемой
     высоте один занимает ~256px, в 320px три в ряд не встанут. Поэтому
     компактный центрированный столбик, а не рваная обёртка. */
  .sdgs--pay .div-block-443{
    flex-direction:column; flex-wrap:nowrap; gap:14px; margin-top:26px;
  }
  .sdgs--pay .image-5{ max-height:15px; width:auto; height:auto; }
  .sdgs--pay .text-block-179{ margin:30px 0 10px; }

  /* --- калькулятор: цифры результатов крупноваты для узкой плитки --- */
  .sdgs--calc .sdgcard_cardValue{ font-size:14px; }
  .sdgs--calc .sdgcard_cardLabel{ font-size:11.5px; }
  .sdgs--calc .sdgcard_card{ padding:12px 14px; gap:4px; }
  .sdgs--calc .sdgcard_val{ font-size:14px; min-width:70px; }

  /* Плашки-гарантии: по две в ряд сеткой. Флексом они шли по одной —
     каждая 167px при контейнере 296px. */
  .sdgs--final .div-block-466{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px; margin-top:22px;
  }
  .sdgs--final .div-block-467{
    width:100%; padding:9px 10px 9px 27px; font-size:11px; line-height:1.3;
    border-radius:12px; align-items:center;
  }
  .sdgs--final .div-block-467::before{ left:10px; width:12px; height:12px; }

  /* --- отзывы: карточка во всю ширину, шапка компактнее --- */
  .sdgs--rev .rev008-title__block-2{ gap:18px; margin-bottom:26px; }
  .sdgs--rev .rev008-slide-2{ padding:22px 20px; }
  /* шапка отзыва шла по центру, а текст слева — выравниваем по левому краю */
  .sdgs--rev .rev008-slide__head{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:16px;
  }
  .sdgs--rev .rev008-author__info{ gap:11px; }
  .sdgs--rev .rev008-reit__item{ width:13px; }
  .sdgs--rev .rev008-slide__title{ font-size:15.5px; }
  .sdgs--rev .text-block-186{ font-size:13.6px; line-height:1.6; }
  .sdgs--rev .rev008-author__image{ width:42px; height:42px; }
  .sdgs--rev .rev008-prev,.sdgs--rev .rev008-next{ width:42px; height:42px; }
  .sdgs--rev .sdg-dot{ width:26px; }

  /* подписи мельче 12px на мобильном плохо читаются */
  .sdgs--who .text-block-3 strong{ font-size:11.5px; }
  .sdgs--rev .rev008-label-2{ font-size:12px; }
  .sdgs--pay .div-block-471{ font-size:12px; }

  section.sdgs{ padding:clamp(44px,9vw,64px) 16px !important; }
  .sdgs .container{ padding:0 16px; }
  .sdgs--pain .grid-31{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .sdgs--pain .div-block-6{
    grid-template-columns:42px minmax(0,1fr);
    padding:22px 22px 24px; column-gap:15px; row-gap:12px;
  }
  .sdgs--pain .div-block-3,.sdgs--pain .image-2{ width:42px; height:42px; }
  .sdgs .grid-31 + .text-block-4,
  .sdgs .grid-38 + .text-block-4{ padding:17px 20px; margin-top:28px; }
  .sdgs--pay .grid-25{ grid-template-columns:minmax(0,1fr); gap:16px; }
  /* «Кому подходит»: одна колонка, задачи в один столбец */
  .sdgs--who .grid-38{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .sdgs--who .div-block-6{ padding:22px 20px 24px; }
  .sdgs--who .div-block-3, .sdgs--who .image-2{ width:42px; height:42px; }
  .sdgs--who .sdgs-tasks{ grid-template-columns:minmax(0,1fr); gap:9px; }
  .sdgs--who .div-block-6 > .text-block-3.color1{ padding:16px 0 0 28px; }
  .sdgs--why .grid-3{ grid-template-columns:minmax(0,1fr); }
  .sdgs--why .div-block-6{ padding:24px 22px 26px; border-right:0 !important; }
  .sdgs--why .div-block-6:not(:last-child){ border-bottom:1px solid var(--s-line) !important; }
  .sdgs--why .div-block-6:last-child{ border-bottom:0 !important; }
  /* видео: текст одной колонкой */
  .sdgs--video .div-block-5{ grid-template-columns:minmax(0,1fr); }
  .sdgs--video .div-block-5 > div:nth-of-type(1){ grid-column:1; grid-row:1 }
  .sdgs--video .div-block-5 > div:nth-of-type(2){ grid-column:1; grid-row:2 }
  .sdgs--video .div-block-5 > ul:nth-of-type(1) { grid-column:1; grid-row:3; margin-bottom:22px }
  .sdgs--video .div-block-5 > div:nth-of-type(3){ grid-column:1; grid-row:4 }
  .sdgs--video .div-block-5 > ul:nth-of-type(2) { grid-column:1; grid-row:5 }
  .sdgs--video .div-block-5 > div:nth-of-type(4){ grid-column:1; grid-row:6 }
  .sdgs .div-block-6{ padding:22px 20px 24px; }
  /* бенто схлопывается в одну колонку, ядро теряет внутреннее деление */
  .sdgs--sol .grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .sdgs--sol .grid > div{ grid-column:span 1 !important; padding:24px 22px 0; }
  /* у первой карточки на десктопе padding:0 (там своя внутренняя сетка) —
     на мобильном её надо вернуть, иначе текст встаёт вплотную к краю */
  .sdgs--sol .grid > div:first-child{
    display:flex; flex-direction:column; padding:24px 22px 0;
  }
  .sdgs--sol .grid > div:first-child .div-block-2{ order:1; padding:0; margin-bottom:20px; }
  /* порядок на узком: текст → иллюстрация → подвал с примером */
  .sdgs--sol .grid > div:first-child::after{
    order:2; min-height:176px; margin:2px -22px 0; align-self:stretch;
    border-left:0; border-top:0;
    /* полосой поперёк карточки жёсткие края бросались в глаза — растушёвываем */
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  }
  .sdgs--sol .grid > div > .text-block-3.color1{
    margin:auto -22px 0; padding:14px 22px 16px; border-left:0;
    border-top:1px solid rgba(255,190,26,.28);
  }
  .sdgs--sol .grid > div > .text-block-3.color1::before{ width:14px; height:14px; }
  .sdgs--sol .grid > div:first-child > .text-block-3.color1{
    order:3; margin:0 -22px; padding:14px 22px 16px;
    font-size:13.5px; font-weight:400; gap:0 9px;
    background:linear-gradient(90deg, rgba(255,216,77,.15), rgba(255,190,26,.06));
    border-left:0; border-top:1px solid rgba(255,190,26,.28);
  }
  .sdgs--sol .grid > div:first-child > .text-block-3.color1::before{ width:14px; height:14px; }
  .sdgs--sol .button.w-button{ margin-top:34px; width:100%; }
  /* на узком кадр сдвигаем к левой части — иначе видна только пустая темнота */
  .sdgs--steps .div-block-185{ background-position:26% center !important; }
  .sdgs--steps .div-block-185::before{
    background:radial-gradient(ellipse 88% 78% at 50% 50%,
               rgba(11,14,19,.86) 0%, rgba(11,14,19,.52) 66%, rgba(11,14,19,.2) 100%);
  }
  .sdgs--rev .rev008-slide-2{ padding:24px 22px; }
  .sdgs--faq .dropdown-toggle-2{ padding:16px 18px; font-size:14.5px; gap:14px; }
  .sdgs--faq .div-block-181{ padding:0; font-size:14px; }
  .sdgs--faq .div-block-181 > *{ padding:4px 18px 20px; }
  .sdgs--calc .sdgcard_label{ flex:0 0 auto; font-size:13.5px; }
  .sdgs--calc .sdgcard_line{ flex-wrap:wrap; }
  .sdgs--calc .sdgcard_control{ flex:1 1 100%; }
  .sdgs--final .sdgc-vs{ grid-template-columns:minmax(0,1fr); gap:11px; }
  .sdgs--final .button-2.w-button{ width:100%; padding:17px 24px !important; }
  .sdgs--calc .sdgcard_resultsWrap{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sdgs--cmp .grid-35{ min-width:760px; }
  .sdgs--pay .text-block-86{ top:-12px; }
}
@media (max-width:420px){
  .sdgs .heading{ padding-bottom:16px; }
  .sdgs--cmp .grid-35{ min-width:660px; font-size:13px; }
}

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sdgs *,.sdgs *::before,.sdgs *::after{ transition:none !important; animation:none !important; }
  .sdgs-rise{ opacity:1 !important; transform:none !important; }
  .sdgs .div-block-6:hover,
  .sdgs--sol .grid > div:hover,
  .sdgs--pay .div-block-441:hover,
  .sdgs--rev .rev008-slide-2:hover{ transform:none; }
}


/* ===================================================================
   ПОЛЕЗНЫЕ МАТЕРИАЛЫ (.sdgs--art)
   Внутренняя перелинковка с главной на статьи блога.
   =================================================================== */
/* базовое правило записано как section.sdgs (0,1,1) — модификатор обязан быть
   не слабее, иначе фон секции остаётся белым: .sdgs.sdgs--art = (0,2,0) */
.sdgs.sdgs--art{ background-color:var(--s-light); }
.sdgs--art .sart__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px; margin-top:38px;
}
.sdgs--art .sart__card{
  display:flex; flex-direction:column; gap:9px;
  background:#fff; border:1px solid var(--s-line); border-radius:18px;
  padding:24px 24px 20px; text-decoration:none;
  box-shadow:var(--s-shadow);
  transition:transform .26s var(--s-ease), box-shadow .26s ease, border-color .26s ease;
}
.sdgs--art .sart__card:hover{
  transform:translateY(-4px); box-shadow:var(--s-shadow-hi);
  border-color:rgba(19,99,212,.28);
}
.sdgs--art .sart__card:focus-visible{
  outline:3px solid var(--s-blue); outline-offset:3px;
}
.sdgs--art .sart__kick{
  align-self:flex-start;
  font-family:"Open Sans",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#7a5a00; background:linear-gradient(135deg,rgba(255,216,77,.30),rgba(255,190,26,.16));
  border:1px solid rgba(255,190,26,.45); border-radius:999px; padding:4px 11px;
}
.sdgs--art .sart__t{
  font-family:"Montserrat",sans-serif; font-weight:700;
  font-size:17px; line-height:1.32; letter-spacing:-.012em;
  color:var(--s-ink); margin-top:3px;
}
.sdgs--art .sart__d{
  font-family:"Open Sans",sans-serif; font-size:14.5px; line-height:1.58;
  color:var(--s-body); flex:1 1 auto;
}
.sdgs--art .sart__more{
  display:inline-flex; align-items:center; gap:7px; margin-top:5px;
  font-family:"Open Sans",sans-serif; font-size:14px; font-weight:700;
  color:var(--s-blue);
}
.sdgs--art .sart__more svg{ width:16px; height:16px; transition:transform .22s var(--s-ease); }
.sdgs--art .sart__card:hover .sart__more svg{ transform:translateX(4px); }

.sdgs--art .sart__foot{ text-align:center; margin-top:30px; }
.sdgs--art .sart__all{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:15.5px;
  color:var(--s-ink); text-decoration:none;
  background:linear-gradient(135deg,var(--s-am1),var(--s-am2));
  border-radius:999px; padding:14px 28px;
  box-shadow:0 10px 26px -14px rgba(255,190,26,.9);
  transition:transform .22s var(--s-ease), box-shadow .22s ease;
}
.sdgs--art .sart__all:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -14px rgba(255,190,26,1); }
.sdgs--art .sart__all:focus-visible{ outline:3px solid var(--s-ink); outline-offset:3px; }
.sdgs--art .sart__all svg{ width:17px; height:17px; }

@media (max-width:1023px){
  .sdgs--art .sart__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .sdgs--art .sart__grid{ grid-template-columns:1fr; gap:14px; }
  .sdgs--art .sart__card{ padding:20px 20px 17px; }
  .sdgs--art .sart__t{ font-size:16.5px; }
}
@media (prefers-reduced-motion:reduce){
  .sdgs--art .sart__card, .sdgs--art .sart__all, .sdgs--art .sart__more svg{ transition:none; }
  .sdgs--art .sart__card:hover, .sdgs--art .sart__all:hover{ transform:none; }
}