/* ==========================================================================
   Дрібні правки поверх стилів Weblium.
   Підключається після їхніх файлів, тому перекриває їх без !important
   там, де вистачає ваги селектора.
   ========================================================================== */

/* --- Мобільний: прибрати горизонтальний скрол ----------------------------
   Декоративні картинки в макеті ширші за екран (405px при 390px) і
   стирчать за правий край — сторінка їздить убік, і збоку видно смугу.
   В оригіналі це ховав рантайм платформи. Обрізаємо по краю вікна:
   декор і задумано виходить за межі, важливий вміст у нього не потрапляє. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Safari на iOS часто ігнорує overflow-x: hidden на body — сторінка все
   одно свайпається вбік. clip він виконує чесно, бо той не створює
   контейнер прокрутки взагалі. */
html {
  overflow-x: clip;
}

/* Списки слайдерів мусять обрізати доріжку навіть до того, як відпрацює
   скрипт: доріжка відгуків у розмітці ширша за екран у кілька разів. */
.slick-list {
  overflow: hidden;
}

/* Полотно вужче за екран, тож центруємо його — щоб поля були однакові
   з обох боків, а не тільки справа. */
@media (max-width: 767px) {
  .w-section__content,
  [class*="free-area-container"] {
    margin-inline: auto;
  }
}

/* --- FAQ: відрізнити питання від відповіді -------------------------------
   В оригіналі і питання, і відповідь набрані однаково — коли пункт
   розгорнутий, вони зливаються в суцільний абзац і незрозуміло, де
   закінчується запитання. Робимо питання важчим, відповідь — світлішою
   й трохи меншою. Кольори й шрифт лишаються бренду. */

.accordion__header_27Z .accordion__heading_2zT {
  font-weight: 800;
  letter-spacing: 0.005em;
}

[data-accordion-content] .ui-text,
[data-accordion-content] p {
  font-weight: 400;
  font-size: 0.94em;
  line-height: 1.55;
  opacity: 0.82;
}

/* Відступ між питанням і відповіддю, щоб вони не тулились одне до одного */
[data-accordion-content] > * {
  padding-top: 0.35em;
}

/* --- Обгортка, що тримає сторінку в межах екрана ---------------------------
   Safari на iOS не виконує overflow-x на html і body, тому весь вміст
   загорнутий у .sw-viewport — на звичайному блоці обрізання працює скрізь
   однаково. Ширина 100% прив'язує секції до екрана, а не до найширшого
   елемента сторінки, через який і з'являлась біла смуга збоку. */

.sw-viewport {
  width: 100%;
  max-width: 100%;
  /* Саме clip, а не hidden: hidden за специфікацією робить із блоку
     контейнер прокрутки (overflow-y автоматично стає auto), і на iOS це
     дає власні побічні ефекти. clip лише обрізає, нічого не створюючи. */
  overflow-x: clip;
}

/* --- Білі підкладки фону --------------------------------------------------
   У Weblium 22 фонові підкладки: 14 з картинкою і 8 просто кольорових.
   Кольорові мають інлайновий style="background:#FFFFFF" з позначкою
   data-role="placeholder" — їх замальовував рантайм платформи. Без нього
   там, де картинка не перекриває підкладку, світиться біла смуга.

   Прибираємо білу заливку саме з placeholder-ів (інші кольорові фони не
   чіпаємо), а тлу сторінки задаємо темний колір сайту — тоді будь-яка
   щілина зіллється з дизайном, а не блисне білим. */

html,
body,
.sw-viewport {
  background-color: #152120;
}

.background_3Pg[data-role="placeholder"] {
  background: transparent !important;
}

/* --- Заголовки розділів -----------------------------------------------
   У Weblium на сторінці не було жодного тега h1-h6: увесь текст, включно
   з назвами розділів, набраний як <p>. Пошуковик через це не бачить
   структури сторінки. Ми замінили теги в тих самих місцях, лишивши класи
   теми, — але браузер додає власні стилі для заголовків (жирність,
   збільшений розмір, зовнішні відступи), і сторінка б поїхала.

   :where() обнуляє вагу селектора. Такому правилу програє будь-який стиль
   теми, зате воно перебиває стандартні стилі браузера — рівно те, що
   потрібно: заголовок лишається схожим на звичайний абзац, яким і був. */
:where(.sw-h) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* --- Підвал головної ------------------------------------------------------
   Полотно Weblium не має жодного посилання вглиб сайту: із головної нікуди
   перейти. Підвал додано після полотна — він нічого не зсуває, бо блоки
   вище мають фіксовану висоту, і повторює оформлення текстових сторінок,
   щоб перехід між ними не виглядав переходом на інший сайт. */

.sw-foot {
  border-top: 1px solid rgba(40, 244, 227, 0.16);
  background: #0E1817;
  color: rgba(255, 255, 255, 0.62);
  font: 400 15px/1.65 'Inter', -apple-system, sans-serif;
  padding: 2.6rem clamp(1.2rem, 5vw, 3rem);
}

.sw-foot__in {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
  justify-content: space-between;
}

.sw-foot__col { max-width: 22rem; }
.sw-foot p { margin: 0 0 0.5rem; }

.sw-foot__name {
  font: 400 1.5rem/1 'Bebas Neue Cyrillic', 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
}

.sw-foot__h {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.sw-foot ul { list-style: none; margin: 0; padding: 0; }
.sw-foot li { margin-bottom: 0.42rem; }

.sw-foot a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sw-foot a:hover { color: #28F4E3; border-bottom-color: #28F4E3; }