@charset "UTF-8";
/* --------------TOKENS--------------
   Джерело значень — CSS донора https://canada-nationalcasino.ca/
   (:root у донора немає, значення зняті з правил; імена змінних — наші) */
:root {
  /* поверхні */
  --color-bg: #292526;
  --color-bg-deep: #231f20;
  --color-surface: #322e2f;
  --color-surface-2: #282526;
  --color-surface-3: #2a2829;
  /* лінії */
  --color-line: #4e4842;
  --color-line-soft: #6c645b;
  --color-line-hair: rgba(255, 255, 255, 0.1);
  /* акценти */
  --color-accent: #fec07e;
  --color-accent-hi: #fec882;
  --color-accent-lo: #ffa06d;
  --gradient-accent: linear-gradient(180deg, #fec882 0%, #ffa06d 100%);
  /* Ховер-сяйво кнопок. Було 20px / 0.9 — світло розпливалось по самій
     кнопці й з'їдало напис. Тепер вужче й майже вдвічі слабше. */
  --glow-accent: 0 0 12px 0 rgba(254, 192, 126, 0.5);
  /* ховер CTA у банерах — узятий із джерела фічі promo-banner__bg.
     Контраст тексту --color-ink: 12.7:1 на #b9fe82 і 12.0:1 на #6cffb8 */
  --gradient-cta-hover: linear-gradient(180deg, #b9fe82 0%, #6cffb8 100%);
  --glow-cta-hover: 0 0 20px 0 rgba(140, 255, 160, 0.55);
  /* текст */
  --color-white: #fff;
  --color-cream: #fffaf3;
  /* донорський приглушений #94897a дає лише 4.41:1 на --color-bg;
     освітлено до 5.34:1, відтінок збережено */
  --color-muted: #a39889;
  /* єдиний токен «текст на акцентній заливці» */
  --color-ink: #292526;
  /* геометрія */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --border-block: 2px solid var(--color-line);
  /* розкладка */
  --container: 1580px;
  --sidebar-width: 278px;
  --header-height: 80px;
  /* рух: у донора немає жодного @keyframes, лише transition */
  --transition: all 0.4s ease-in-out;
  --transition-fast: all 0.3s ease;
}

/* --------------BREAKPOINTS--------------
   Пороги зняті з media-CSS донора: 1580 / 1400 / 1300 / 1200 / 1025 / 850 / 768 / 650 / 550 / 450 */
/* --------------RESET-------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
small,
strong,
ul,
ol,
li,
table,
tbody,
thead,
tr,
th,
td,
article,
aside,
footer,
header,
nav,
section,
figure,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
figure,
figcaption,
footer,
header,
nav,
section,
main {
  display: block;
}

body {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  letter-spacing: normal;
  white-space: nowrap;
  text-transform: none;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

input,
button,
textarea,
select {
  outline: none;
}

a,
button,
a::before,
a::after,
button::before,
button::after,
a > *,
button > * {
  transition: var(--transition);
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------FONTS--------------
   Poppins — єдиний шрифт донора (і заголовки, і текст). Self-host, ../fonts/*.woff2 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --------------GLOBAL--------------
   Структура селекторів — з еталона ТЗ; значення кольорів, шрифтів,
   радіусів і відступів — з CSS донора canada-nationalcasino.ca */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--color-bg);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-white);
  text-align: left;
  min-height: 100vh;
  overflow-x: hidden;
  hyphens: none;
  overflow-wrap: break-word;
}
body.no-scroll {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ----------------Content---------------- */
.content,
.cover {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  /* колонка центрує елементи, тож короткий абзац стискався до ширини рядка
     і візуально ставав по центру — попри `text-align: left`. Розтягуємо
     абзаци на всю ширину, щоб підводки перед списками стояли рівно. */
}
.content > p,
.cover > p {
  width: 100%;
}

.content {
  margin-top: 20px;
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  background: var(--color-surface);
  border: var(--border-block);
  /* власного scroll-margin тут НЕМАЄ: відступ під фіксований хедер задає
     scroll-padding-top на <html>, і два правила складались — секція
     приземлялась на 192px замість 96 і лишала завеликий розрив */
}
@media screen and (max-width: 850px) {
  .content {
    padding: 15px;
  }
}
@media screen and (max-width: 450px) {
  .content {
    padding: 10px;
  }
}

.content > *,
.cover > * {
  display: block;
  position: relative;
}

/* ЄДИНИЙ механізм вертикального ритму всередині блоку — як у донора.
   Ані заголовки, ані абзаци власних margin не мають, батько gap не має. */
.content > * + *,
.article > * + * {
  margin-top: 16px;
}

/* CTA всередині контентної секції.
   Кнопка — це <a>, тож `.article a` вішав на неї підкреслення й білий колір
   текстового посилання. Скидаємо це і ставимо кнопку по лівому краю. */
.content > .first__button {
  align-self: flex-start;
  margin-top: 28px;
  color: var(--color-ink);
  text-decoration: none;
}

.content > .background + * {
  margin-top: 0;
}

.cover {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 1580px) {
  .cover {
    padding-left: calc(50% - (1580px - 40px) / 2);
    padding-right: calc(50% - (1580px - 40px) / 2);
  }
}

/* ----------------Main------------- */
.main {
  position: relative;
  padding: var(--header-height) 20px 0;
}
@media screen and (min-width: 1580px) {
  .main {
    padding-left: calc(50% - (1580px - 40px) / 2);
    padding-right: calc(50% - (1580px - 40px) / 2);
  }
}
@media screen and (max-width: 850px) {
  .main {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 450px) {
  .main {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.main__wrap {
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 1200px) {
  .main__wrap {
    flex-direction: column;
    align-items: stretch;
  }
}
.main__content {
  position: relative;
  overflow: hidden;
  flex: 1 1 calc(100% - var(--sidebar-width) - 10px);
  margin-left: var(--sidebar-width);
  padding-bottom: 0;
  min-width: 0;
}
@media screen and (max-width: 1200px) {
  .main__content {
    flex: 1 1 auto;
    width: 100%;
    margin-left: 0;
  }
}
.main {
  /* фіксована нижня смуга CTA — тільки на телефоні, як у донора */
}
.main__buttons {
  display: none;
}
@media screen and (max-width: 650px) {
  .main__buttons {
    background: rgba(41, 37, 38, 0.94);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 12px;
    border-top: 1px solid var(--color-line);
  }
}
@media screen and (max-width: 650px) {
  .main__buttons .first__button,
  .main__buttons .header__login {
    width: calc(50% - 4px);
    min-width: 0;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ---------------------HEADINGS--------------------- */
h1,
h2,
h3,
h4,
h5 {
  display: block;
  color: var(--color-accent);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  position: relative;
  width: 100%;
  margin: 0;
}

h1 {
  font-size: 32px;
  text-transform: uppercase;
}
@media screen and (max-width: 850px) {
  h1 {
    font-size: 30px;
    line-height: 1.2;
  }
}
@media screen and (max-width: 650px) {
  h1 {
    font-size: 26px;
    text-align: center;
  }
}
@media screen and (max-width: 450px) {
  h1 {
    font-size: clamp(19px, 5.5vw, 22px);
  }
}

h2 {
  font-size: 32px;
  text-align: center;
}
@media screen and (max-width: 850px) {
  h2 {
    font-size: 24px;
  }
}
@media screen and (max-width: 650px) {
  h2 {
    font-size: 22px;
  }
}
@media screen and (max-width: 450px) {
  h2 {
    font-size: 18px;
  }
}

h3 {
  font-size: 20px;
  line-height: 1.6;
}
@media screen and (max-width: 850px) {
  h3 {
    font-size: 18px;
  }
}
@media screen and (max-width: 450px) {
  h3 {
    font-size: 17px;
  }
}

h4 {
  font-weight: 800;
  font-size: 18px;
  line-height: 1.5;
}
@media screen and (max-width: 450px) {
  h4 {
    font-size: 16px;
  }
}

h5 {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}

/* орнамент обабіч центрованого h2 — наша реалізація донорського прийому */
.decor {
  position: relative;
  display: inline-block;
  padding: 0 96px;
  width: auto;
}
.decor::before, .decor::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80px;
  height: 24px;
  transform: translateY(-50%);
  background: url("../images/icons/heading-ornament.svg") no-repeat center/contain;
}
.decor::before {
  left: 0;
}
.decor::after {
  right: 0;
  transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width: 850px) {
  .decor {
    padding: 0 80px;
  }
  .decor::before, .decor::after {
    width: 70px;
  }
}
@media screen and (max-width: 650px) {
  .decor {
    padding: 0 60px;
  }
  .decor::before, .decor::after {
    width: 50px;
  }
}
@media screen and (max-width: 550px) {
  .decor {
    padding: 0 38px;
  }
  .decor::before, .decor::after {
    width: 30px;
  }
}

/* ---------------------ARTICLE TEXT--------------------- */
p {
  color: var(--color-white);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

.article {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  width: 100%;
  /* МАРКЕРИ — тільки для «голих» списків, що лежать безпосередньо в контентному блоці.
     Списки з власним класом (.cards, .steps, .pros, .help, .faq__list, .reviews__list)
     мають власні маркери; якщо не звузити цей селектор, він перебиває їх за
     специфічністю і крапки відлітають угору повз текст. */
}
.article > ul:not([class]) > li,
.article > ol:not([class]) > li {
  position: relative;
  padding-left: 24px;
}
.article > ul:not([class]) > li + li,
.article > ol:not([class]) > li + li {
  margin-top: 8px;
}
.article > ul:not([class]) > li::before,
.article > ol:not([class]) > li::before {
  display: inline-block;
  position: absolute;
  font: inherit;
  color: inherit;
  z-index: 1;
  top: 0;
  left: 8px;
}
.article > ul:not([class]) > li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: var(--color-accent);
  top: 9px;
  left: 4px;
  margin: auto;
}
.article > ol:not([class]) > li {
  counter-increment: nc-ol;
}
.article > ol:not([class]) > li::before {
  content: counter(nc-ol) ".";
  left: 0;
}
.article a {
  color: var(--color-white);
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
@media (hover: hover) {
  .article a:hover {
    text-shadow: 0 0.4px var(--color-accent), 0.4px 0 var(--color-accent);
  }
}
.article {
  /* CTA у контентній секції — по лівому краю. auto лише праворуч:
     у флексі auto-марджин забирає весь вільний простір на свій бік. */
}
.article > .first__button {
  margin-left: 0;
  margin-right: auto;
}

ul,
ol {
  text-align: left;
  width: 100%;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

small {
  font-size: 13px;
}

.muted {
  color: var(--color-muted);
}

/* ---------------------SPECIAL--------------------- */
.image img,
.background img {
  display: block;
  position: relative;
  margin: auto;
}

.background {
  display: block !important;
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.background img,
.background video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

/* декоративна підкладка контентної секції (archetype: overlay).
   Донор тримає такі фони приглушеними — текст лишається на рівні поверхні. */
.backdrop {
  /* Ілюстрація — це смуга під заголовком, а НЕ заливка всієї секції.
     Секції бувають до 3000px заввишки; при `inset: 0` кадр 16:9
     розтягувався `cover`-ом учетверо і показував із себе вузьку смужку.
     Фіксована висота + маска знизу тримають кадр у власних пропорціях. */
  height: clamp(300px, 30vw, 460px);
  bottom: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.backdrop img,
.backdrop .ph {
  opacity: 0.95;
}
.backdrop {
  /* scrim майже прозорий угорі, де стоїть заголовок, і щільнішає донизу,
     де починається основний текст. Межу тримає акцентний колір заголовка:
     #fec07e на композиті мусить лишатись вище 4.5:1. */
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(50, 46, 47, 0.28) 0%, rgba(50, 46, 47, 0.64) 62%, rgba(50, 46, 47, 0.9) 100%);
}
@media screen and (max-width: 850px) {
  .backdrop {
    height: clamp(220px, 42vw, 320px);
  }
  .backdrop img,
  .backdrop .ph {
    opacity: 0.8;
  }
}

/* плейсхолдер зображення фази 1: тримає точні пропорції майбутнього файлу */
.ph {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, rgba(254, 192, 126, 0.07) 0 12px, transparent 12px 24px), var(--color-surface-3);
  border: 1px dashed var(--color-line-soft);
}
.ph::after {
  content: attr(data-slot);
  display: block;
  padding: 10px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-muted);
  word-break: break-all;
}
.ph--16x9 {
  aspect-ratio: 16/9;
}
.ph--21x9 {
  aspect-ratio: 21/9;
}
.ph--4x3 {
  aspect-ratio: 4/3;
}
.ph--3x1 {
  aspect-ratio: 3/1;
}
.ph--3x4 {
  aspect-ratio: 3/4;
}
.ph--1x1 {
  aspect-ratio: 1/1;
}
.ph--fill {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* дрібні плейсхолдери (іконки сайдбара, мініатюри) — без підпису */
.sidebar__feature .ph::after,
.sidebar__app .ph::after {
  display: none;
}

/* білі картки платіжних методів — назва методу замість чужого товарного знаку */
.pay-ph {
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  color: #292526;
}

/* ілюстрація всередині контентної секції.
   `:where()` не додає специфічності, тому це правило лишається (0,1,1)
   і його спокійно перебивають медіа-шари нижче. */
.content img:not(:where(.icon, .logo, .flag, .pay)) {
  width: 100%;
  height: clamp(360px, 32vw, 480px);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
@media screen and (max-width: 850px) {
  .content img:not(:where(.icon, .logo, .flag, .pay)) {
    height: 300px;
  }
}
@media screen and (max-width: 768px) {
  .content img:not(:where(.icon, .logo, .flag, .pay)) {
    height: 220px;
  }
}

/* МЕДІА-ШАРИ (фон секції, фон банера, персонаж) заповнюють свій контейнер
   і під обмеження висоти вище не підпадають */
.content .background img,
.content .background video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  border-radius: 0;
}

/* Шар персонажа НЕ описуємо тут: його геометрію повністю тримає
   `blocks/_banner.scss`. Правило звідси мало вищу специфічність і мовчки
   перебивало розміри банера, через що `contain` стискав персонажа. */
.banner__figure img {
  border-radius: 0;
}

svg {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  line-height: 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------BUTTONS (4 типи)--------------
   Вигляд знято з донора: .button = gradient #fec882→#ffa06d, radius 6px,
   padding 13px 32px, 15px/700, БЕЗ uppercase, hover scale(1.02) + glow.
   Контраст: #4e4842 на #fec882 = 5.92:1, на #ffa06d = 4.51:1 — обидва ≥ 4.5 */
.download__button, .header__signup, .header__login, .first__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: var(--radius-sm);
  padding: 13px 32px;
  min-width: 200px;
  min-height: 48px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.47;
  text-align: center;
  white-space: nowrap;
  transition: var(--transition);
}

/* Рухомий блік для основних CTA. Він працює постійно, а не лише на hover. */
.first__button,
.header__login,
.header__signup {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.first__button::after,
.header__login::after,
.header__signup::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -50%;
  left: -70%;
  width: 38%;
  height: 200%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-180%) skewX(-20deg);
  animation: nc-cta-sheen 3.8s ease-in-out infinite;
}

@keyframes nc-cta-sheen {
  0%, 55% {
    transform: translateX(-180%) skewX(-20deg);
  }
  82%, 100% {
    transform: translateX(520%) skewX(-20deg);
  }
}
/* 1. КОНТЕНТ · ОСНОВНА — CTA у секціях, банерах і hero */
.first__button {
  background: var(--gradient-accent);
  color: var(--color-ink);
}
@media (hover: hover) {
  .first__button:hover {
    transform: scale(1.03);
    box-shadow: var(--glow-accent);
  }
}
@media screen and (max-width: 450px) {
  .first__button {
    min-width: 0;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 2. ХЕДЕР · ЛОГІН — другорядна, донорський .button.inverse */
.header__login {
  background: var(--color-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  min-width: 112px;
  min-height: 40px;
  padding: 7px 20px;
  font-size: 16px;
}
@media (hover: hover) {
  .header__login:hover {
    background: var(--color-accent);
    color: var(--color-ink);
    box-shadow: var(--glow-accent);
  }
}

/* 3. ХЕДЕР · РЕЄСТРАЦІЯ — головна */
.header__signup {
  background: var(--gradient-accent);
  color: var(--color-ink);
  min-width: 112px;
  min-height: 40px;
  padding: 8px 20px;
  font-size: 16px;
  margin-left: 8px;
}
@media (hover: hover) {
  .header__signup:hover {
    transform: scale(1.03);
    box-shadow: var(--glow-accent);
  }
}

/* 4. КОНТЕНТ · DOWNLOAD — тільки встановлення застосунку */
.download__button {
  display: flex;
  gap: 14px;
  padding: 14px 10px;
  min-width: 240px;
  max-width: 266px;
  min-height: 80px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  color: var(--color-white);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.71;
  white-space: normal;
  text-align: left;
}
.download__button .icon {
  flex: none;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.download__button span {
  min-width: 128px;
}
@media (hover: hover) {
  .download__button:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 12px 0 rgba(254, 192, 126, 0.45);
  }
}
@media screen and (max-width: 450px) {
  .download__button {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

.download__buttons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

/* --------------HEADER--------------
   Один ряд, фіксований. Ліворуч лого + nav (тільки сторінки),
   праворуч CTA-кнопки + статична позначка мови. Годинника у донора немає. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  /* рівно 80px: вертикальний паддінг не додається, висоту тримає сам хедер,
     а внутрішній паддінг nav-лінків лишається як зона кліку і не розпирає блок */
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0 20px;
}
@media screen and (min-width: 1580px) {
  .header {
    padding-left: calc(50% - (1580px - 40px) / 2);
    padding-right: calc(50% - (1580px - 40px) / 2);
  }
}
@media screen and (max-width: 850px) {
  .header {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 450px) {
  .header {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.header__logo {
  flex: 0 1 120px;
  min-width: 0;
  display: flex;
  align-items: center;
}
.header__logo img {
  display: block;
  width: 120px;
  height: 48px;
}
@media screen and (max-width: 1200px) {
  .header__logo {
    margin-right: auto;
  }
}
.header {
  /* nav стартує на лінії контентної колонки, а не впритул до лого */
}
.header__menu {
  margin: 0 auto 0 40px;
}
.header__menu ul {
  display: flex;
  align-items: center;
}
.header__menu li + li {
  position: relative;
  padding-left: 72px;
}
.header__menu li + li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  margin: auto;
  width: 40px;
  height: 16px;
  background: url("../images/icons/nav-divider.svg") no-repeat center/contain;
}
.header__menu a {
  display: block;
  padding: 24px 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-muted);
}
@media (hover: hover) {
  .header__menu a:hover {
    color: var(--color-white);
  }
}
.header__menu a[aria-current=page] {
  color: var(--color-accent);
}
@media screen and (max-width: 1200px) {
  .header__menu {
    margin-left: auto;
  }
}
.header__menu {
  /* ≤1025px — повноекранний оверлей під шапкою */
}
@media screen and (max-width: 1025px) {
  .header__menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-height));
    margin: 0;
    padding: 25px;
    background: var(--color-bg);
    z-index: 100;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }
  .header__menu.active {
    transform: translateX(0);
  }
  .header__menu ul {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .header__menu li + li {
    padding-left: 0;
  }
  .header__menu li + li::before {
    display: none;
  }
  .header__menu a {
    padding: 8px 0;
    font-size: 18px;
  }
}
.header {
  /* кнопки, що живуть усередині бургер-оверлею */
}
.header__menu-cta {
  display: none;
}
@media screen and (max-width: 1025px) {
  .header__menu-cta {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
  }
}
.header__actions {
  display: flex;
  align-items: center;
  flex: none;
}
@media screen and (max-width: 1025px) {
  .header__actions {
    display: none;
  }
}
.header__language {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  margin-left: 24px;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--color-white);
}
.header__language img,
.header__language .flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  max-width: 24px;
  border-radius: 100%;
  overflow: hidden;
  -o-object-fit: contain;
     object-fit: contain;
  margin-right: 8px;
  font-size: 18px;
  line-height: 1;
}
@media screen and (max-width: 1025px) {
  .header__language {
    margin-left: 16px;
  }
}

/* бургер */
.menu-button {
  display: none;
}
@media screen and (max-width: 1025px) {
  .menu-button {
    display: block;
    order: 1;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 10px;
    margin-left: 16px;
  }
  .menu-button svg {
    display: block;
    margin: auto;
  }
  .menu-button {
    /* Центр обертання заданий у координатах viewBox (20×16), а не у
       відсотках: відсоток у SVG рахується від viewBox, і смужки, кожна з
       власним центром, розліталися за межі значка — хрестик зникав. */
  }
  .menu-button rect {
    fill: var(--color-cream);
    transform-origin: 10px 8px;
    transition: var(--transition-fast);
  }
  .menu-button {
    /* Порядок функцій критичний: у CSS вони застосовуються справа наліво,
       тож `rotate() translateY()` спершу зсуває смужку в центр значка,
       а вже потім обертає навколо нього. Зворотний порядок обертав першим
       і смужки відлітали по діагоналі за межі viewBox. */
  }
}
@media screen and (max-width: 1025px) and (hover: hover) {
  .menu-button:hover rect {
    fill: var(--color-accent);
  }
}
@media screen and (max-width: 1025px) {
  .menu-button.active rect:nth-child(1) {
    transform: rotate(45deg) translateY(7px);
  }
  .menu-button.active rect:nth-child(2) {
    opacity: 0;
  }
  .menu-button.active rect:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px);
  }
}
@media screen and (max-width: 450px) {
  .menu-button {
    margin-left: 10px;
  }
}

/* --------------SIDEBAR--------------
   Порядок: 2 кнопки-фічі → меню з іконками → картка Application → Navigation (TOC).
   ≤1200px сайдбар стає статичним, декоративна частина ховається,
   лишається тільки згортний блок Navigation під hero. */
.sidebar {
  position: fixed;
  top: var(--header-height);
  left: 20px;
  z-index: 20;
  width: var(--sidebar-width);
  max-height: calc(100vh - var(--header-height) - 20px);
  overflow-y: auto;
  padding: 20px 0;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 1580px) {
  .sidebar {
    left: calc(50% - (1580px - 20px) / 2);
  }
}
@media screen and (max-width: 1200px) {
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin: 20px auto 0;
  }
}
.sidebar__wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (max-width: 1200px) {
  .sidebar__wrap {
    gap: 0;
  }
}
.sidebar {
  /* дві градієнтні кнопки-фічі, однакової висоти */
}
.sidebar__feature {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  width: 100%;
  padding: 16px 16px 16px 72px;
  /* колесо свідомо виходить за межі — кнопка його підрізає */
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--gradient-accent);
  color: var(--color-ink);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.07;
  text-align: left;
  /* тільки для плейсхолдерів фази 1: якщо лишити тут `> img`, це правило
     перебиває .sidebar__mission-icon за специфічністю і його розміри
     перестають діяти */
}
.sidebar__feature > .ph {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.sidebar__feature {
  /* м'яка пульсація світіння; друга кнопка зі зсувом фази,
     щоб вони не блимали в унісон */
  animation: nc-feature-glow 5s ease-in-out infinite;
}
.sidebar__feature:nth-of-type(2) {
  animation-delay: -2.5s;
}
@media (hover: hover) {
  .sidebar__feature:hover {
    /* під курсором пульсацію глушимо, щоб ховер читався чисто */
    animation: none;
    transform: scale(1.01);
    box-shadow: 0 0 10px 0 rgba(254, 192, 126, 0.9);
  }
}
.sidebar__feature {
  /* коли сайдбар складається, декоративні кнопки-фічі йдуть разом із ним —
     нижче 1200px лишається тільки блок Navigation */
}
@media screen and (max-width: 1200px) {
  .sidebar__feature {
    display: none;
  }
}
.sidebar {
  /* КОЛЕСО ФОРТУНИ — два шари: статична рамка з лампочками
     і диск, що безперервно обертається всередині неї.
     Проміжок між рамкою й диском розрахований із пропорцій вихідних файлів
     (рамка 64×68, диск 54×55, центр рамки на 36/68 по вертикалі). */
}
.sidebar__wheel {
  position: absolute;
  /* прив'язка до нижнього лівого кута, як у донора
     (`.sidebar__button-wheel img { left:0; bottom:0 }`) */
  left: -20px;
  bottom: -25px;
  top: auto;
  transform: none;
  /* пропорція вихідних файлів 64:68 збережена */
  width: 66px;
  height: 70px;
  flex: none;
}
.sidebar__wheel img {
  position: absolute;
  display: block;
}
.sidebar__wheel-disc {
  left: 7.8%;
  top: 13.2%;
  width: 84.4%;
  height: 80.9%;
  animation: nc-wheel-spin 14s linear infinite;
  transform-origin: 50% 50%;
}
.sidebar__wheel-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
@media (hover: hover) {
  .sidebar__feature:hover .sidebar__wheel-disc {
    animation-duration: 3.5s;
  }
}
.sidebar {
  /* іконка Missions */
}
.sidebar__mission-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: none;
}
.sidebar {
  /* декоративне меню — заглушки */
}
@media screen and (max-width: 1200px) {
  .sidebar__menu {
    display: none;
  }
}
.sidebar__menu::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: url("../images/icons/sidebar-divider.svg") no-repeat center/100% 100%;
  margin: 16px 0;
}
.sidebar__menu ul {
  background: var(--color-surface-3);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.sidebar__menu li + li {
  margin-top: 16px;
}
.sidebar__menu {
  /* фази рознесені по циклу — інакше все меню гойдається одним рухом */
}
.sidebar__menu li:nth-child(2) .icon {
  animation-delay: -0.75s;
}
.sidebar__menu li:nth-child(3) .icon {
  animation-delay: -1.5s;
}
.sidebar__menu li:nth-child(4) .icon {
  animation-delay: -2.25s;
}
.sidebar__menu li:nth-child(5) .icon {
  animation-delay: -3s;
}
.sidebar__menu li:nth-child(6) .icon {
  animation-delay: -3.75s;
}
.sidebar__menu a {
  position: relative;
  display: block;
  line-height: 1.47;
  color: var(--color-muted);
  padding: 2px 40px 2px 32px;
}
@media (hover: hover) {
  .sidebar__menu a:hover {
    color: var(--color-white);
    /* під курсором похитування лишається, але стає швидшим,
       ширшим і з підростанням */
  }
  .sidebar__menu a:hover .icon {
    color: var(--color-accent);
    animation-name: nc-icon-rock-hover;
    animation-duration: 1.1s;
  }
}
.sidebar__menu {
  /* іконки заливні, а не обведені: увесь колір у файлі зведено до
     currentColor, тож достатньо керувати властивістю `color` */
}
.sidebar__menu .icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
  color: var(--color-muted);
  transform-origin: 50% 50%;
  transition: color 0.3s ease;
  animation: nc-icon-rock 4.5s ease-in-out infinite;
}
.sidebar__menu small {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-width: 32px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  color: var(--color-ink);
  border-radius: 3px;
  padding: 1px 8px;
  background: var(--gradient-accent);
  font-weight: 700;
  font-size: 13px;
}
.sidebar {
  /* компактна горизонтальна картка застосунку.
     Геометрія і типографіка зняті з .application__button на nationalcasino.site:
     заливка #4e4842 світліша за решту сайдбара, рамка #6c645b, radius 6px,
     висота 82px. Правий відступ 92px тримає місце під телефон, який лежить
     абсолютом і тому не бере участі в потоці. */
}
.sidebar__app {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 82px;
  overflow: hidden;
  padding: 13px 92px 13px 24px;
  border: 1px solid var(--color-line-soft);
  border-radius: 6px;
  background: var(--color-line);
}
.sidebar__app div {
  display: flex;
  flex-direction: column;
}
.sidebar__app span:first-of-type {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.47;
  text-transform: capitalize;
  color: var(--color-white);
}
.sidebar__app {
  /* розмір і вага — як у референсі; колір інший: їхній #94897a дає на
     #4e4842 лише 2.63:1, #d4c5b1 дає 5.33:1 */
}
.sidebar__app span:last-of-type {
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  color: #d4c5b1;
  margin-top: 8px;
}
.sidebar__app {
  /* телефон стоїть на нижній грані картки і підрізається `overflow: hidden` —
     саме тому виглядає великим при висоті блока лише 82px */
}
.sidebar__app .ph,
.sidebar__app .sidebar__app-img {
  position: absolute;
  right: 24px;
  bottom: 0;
  width: 63px;
  height: auto;
  border-radius: 0;
}
@media (hover: hover) {
  .sidebar__app:hover {
    background: rgba(78, 72, 66, 0.5);
  }
}
@media screen and (max-width: 1200px) {
  .sidebar__app {
    display: none;
  }
}

/* --------------TOC «Navigation»-------------- */
.toc {
  width: 100%;
  /* панель має власну поверхню #322e2f — без неї список зливався
     з фоном сайдбара, і блок читався як «висячий» текст */
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* власного верхнього відступу немає: коли сайдбар складається, потрібні
     20px уже дає сам .sidebar, а два відступи разом давали 40px розриву */
}
.toc__button {
  position: relative;
  width: 100%;
  padding: 9px 58px 9px 24px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.47;
  text-transform: uppercase;
  color: var(--color-accent);
  text-align: left;
  white-space: normal;
  overflow: hidden;
  background: var(--color-line);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-sm);
}
.toc__button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: url("../images/icons/chevron.svg") no-repeat center/contain;
  /* асет дивиться ВГОРУ, тож перевернутий = згорнуто */
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.toc__button.active::after {
  transform: rotate(0deg);
}
@media (hover: hover) {
  .toc__button:hover {
    background: rgba(78, 72, 66, 0.5);
  }
}
.toc__list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.toc__list.expanded {
  max-height: 56vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.toc__list.expanded::-webkit-scrollbar {
  display: none;
}
.toc__list ul {
  padding: 16px;
}
.toc__list li + li {
  margin-top: 16px;
}
.toc__list {
  /* пункт — просто текст без плашки; активний стан дає підкреслення
     і акцентний колір. `skip-ink: none` тримає лінію суцільною під
     хвостиками літер, як у референсі. */
}
.toc__list a {
  display: block;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-muted);
}
@media (hover: hover) {
  .toc__list a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
}

/* єдиний @keyframes на сайті — обертання диска колеса фортуни.
   Імʼя під нашим префіксом `nc-`, вимикається у prefers-reduced-motion. */
@keyframes nc-wheel-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes nc-feature-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(254, 192, 126, 0);
  }
  50% {
    box-shadow: 0 0 20px 2px rgba(254, 192, 126, 0.5);
  }
}
/* похитування іконок меню: спокійне в стані спокою,
   швидше й ширше під курсором. translateY(-50%) у кожному кадрі
   обовʼязковий — на ньому тримається вертикальне центрування. */
@keyframes nc-icon-rock {
  0%, 100% {
    transform: translateY(-50%) rotate(-7deg);
  }
  50% {
    transform: translateY(-50%) rotate(7deg);
  }
}
@keyframes nc-icon-rock-hover {
  0%, 100% {
    transform: translateY(-50%) rotate(-13deg) scale(1.12);
  }
  50% {
    transform: translateY(-50%) rotate(13deg) scale(1.12);
  }
}
/* --------------HERO / PRIME--------------
   Донор: min-height 450px, фон #2a2829, без рамки, контент по лівому краю
   і вертикально по центру, max-width 735px. Фон — реальний <img> з
   object-position:center top. На ≤1400px фон приглушується до .6, на ≤850 — знову 1. */
.prime {
  min-height: 450px;
  /* 20px згори — рівно стільки ж, скільки дає padding-top сайдбара,
     щоб hero і сайдбар починались на одній лінії під хедером */
  margin-top: 20px;
  border: none;
  background: var(--color-surface-3);
  align-items: flex-start;
  justify-content: center;
  /* Відступ саме тут, а не марджином на .prime__wrap: у флекс-колонці з
     `justify-content: center` марджин зверху з'їдався, коли текст переростав
     min-height. Фоновий шар абсолютний (inset: 0 рахується від padding-box),
     тож padding його не обрізає. */
  padding: 20px;
}
@media screen and (max-width: 850px) {
  .prime {
    min-height: 400px;
  }
}
.prime__background {
  z-index: 0;
  /* Кадр майже не глушимо: читабельність заголовка тримає власна
     підкладка .prime__wrap, а не затемнення фону.
     object-position живе окремим правилом нижче — тут воно не діяло
     через специфічність, див. коментар там. */
}
.prime__background img,
.prime__background video,
.prime__background .ph {
  opacity: 0.92;
}
@media screen and (max-width: 850px) {
  .prime__background img,
  .prime__background video,
  .prime__background .ph {
    opacity: 0.8;
  }
}
.prime__background {
  /* відео лежить у тому самому шарі, що й картинка: 21:9 обрізається
     по `cover` до висоти героя, тому перекодовувати кадр не потрібно */
}
.prime__background video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.prime__background {
  /* легкий рівномірний scrim — лише щоб зняти контрастні плями,
     а не щоб гасити картинку */
}
.prime__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 31, 32, 0.16) 0%, rgba(35, 31, 32, 0.26) 55%, rgba(35, 31, 32, 0.4) 100%);
}
.prime {
  /* контент героя ЦЕНТРОВАНИЙ */
}
@media screen and (max-width: 450px) {
  .prime {
    padding: 10px;
  }
}
.prime__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 880px;
  width: 100%;
  /* блок притиснутий ЛІВОРУЧ (у .prime стоїть align-items:flex-start),
     а текст центрований УСЕРЕДИНІ нього — саме так у джерела,
     тому права третина кадру лишається під персонажа */
  margin-right: auto;
  padding: 34px 28px;
  text-align: center;
  border-radius: var(--radius-lg);
}
.prime__wrap > * + * {
  margin-top: 16px;
}
@media screen and (max-width: 850px) {
  .prime__wrap {
    max-width: 755px;
    padding: 28px 24px;
    background: rgba(35, 31, 32, 0.68);
    backdrop-filter: blur(2px);
  }
}
@media screen and (max-width: 450px) {
  .prime__wrap {
    padding: 20px 16px;
  }
}
.prime {
  /* рейтинг — тільки текст, без зірок і картинок */
}
.prime__rating {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
}
.prime__rating-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-accent);
}
.prime__text {
  font-size: 20px;
  line-height: 1.5;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 850px) {
  .prime__text {
    font-size: 18px;
  }
}
@media screen and (max-width: 450px) {
  .prime__text {
    font-size: 16px;
  }
}
.prime {
  /* H1 в героєві несе .decor — орнамент обабіч, вертикально по центру
     багаторядкового заголовка */
}
.prime h1 {
  text-align: center;
}

/* хлібні крихти всередині hero, вгорі */
.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-muted);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--color-line-soft);
}
.breadcrumb a {
  color: var(--color-muted);
}
@media (hover: hover) {
  .breadcrumb a:hover {
    color: var(--color-accent);
  }
}
.breadcrumb ul {
  justify-content: center;
}

/* --------------КАДРУВАННЯ ГЕРОЯ--------------
   У _globals.scss лежить `.content .background img` зі специфічністю (0,2,1).
   Правило всередині `.prime` мало (0,1,1) і не діяло взагалі — у DevTools
   воно було перекреслене, тож ані 70%, ані 78% ніколи не застосовувались.
   Дублюємо `.content`, щоб вага зрівнялась: blocks імпортуються після
   globals, тож при рівній вазі перемагає це правило.

   Значення підбирається під КОЖЕН кадр окремо — герої на сторінках різні,
   і персонаж у них стоїть на різній горизонталі. Задається змінною
   --hero-pos-tab прямо на .prime__background. */
.content .prime__background img,
.content .prime__background video,
.content .prime__background .ph {
  /* десктоп лишається таким, яким і рендерився досі */
  -o-object-position: var(--hero-pos, center top);
     object-position: var(--hero-pos, center top);
}
@media screen and (max-width: 850px) {
  .content .prime__background img,
  .content .prime__background video,
  .content .prime__background .ph {
    -o-object-position: var(--hero-pos-tab, center top);
       object-position: var(--hero-pos-tab, center top);
  }
}

/* --------------CARD--------------
   Універсальна внутрішня композиція донора: кожен змістовний список —
   не маркери, а картки (фон #282526, рамка 2px #4e4842, radius 12px).
   У донора це .frame; у нас — власне імʼя .card. */
.card,
li.card {
  position: relative;
  width: 100%;
  padding: 20px;
  background: var(--color-surface-2);
  border: var(--border-block);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card > *,
li.card > * {
  position: relative;
  z-index: 1;
}
.card > * + *,
li.card > * + * {
  margin-top: 16px;
}
.card > .background + *,
.card > .card__media + *,
li.card > .background + *,
li.card > .card__media + * {
  margin-top: 0;
}
@media screen and (max-width: 850px) {
  .card,
  li.card {
    padding: 15px;
  }
}
@media screen and (max-width: 450px) {
  .card,
  li.card {
    padding: 10px;
    align-items: center;
  }
}

/* персонаж збоку картки — донорський .frame__image */
.card__media {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  max-height: 100%;
  z-index: 0;
  border-radius: 0;
}
.card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left;
     object-position: left;
}
.card__media--left {
  right: auto;
  left: 0;
}
.card__media--left img {
  -o-object-position: right;
     object-position: right;
}
@media screen and (max-width: 1300px) {
  .card__media img {
    -o-object-position: 70%;
       object-position: 70%;
  }
}
@media screen and (max-width: 850px) {
  .card__media {
    width: auto;
    height: 100%;
    opacity: 0.4;
  }
  .card__media img {
    -o-object-position: center;
       object-position: center;
  }
}

.card__text {
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: auto;
}
.card__text > * + * {
  margin-top: 16px;
}
.card__text--right {
  margin-left: auto;
  margin-right: 0;
}
.card__text--60 {
  width: 60%;
}
.card__text--75 {
  width: 75%;
}
@media screen and (max-width: 850px) {
  .card__text {
    width: 100%;
  }
}
@media screen and (max-width: 450px) {
  .card__text {
    align-items: center;
    text-align: center;
  }
}

/* сітки карток — flex, без grid */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
.cards > li,
.cards > .card {
  flex: 1 1 calc((100% - 32px) / 3);
  min-width: 220px;
}
.cards--2 > li, .cards--2 > .card {
  flex: 1 1 calc((100% - 16px) / 2);
}
.cards--1 > li, .cards--1 > .card {
  flex: 1 1 100%;
}
@media screen and (max-width: 1300px) {
  .cards:not(.cards--1) > li, .cards:not(.cards--1) > .card {
    flex: 1 1 calc((100% - 16px) / 2);
  }
}
@media screen and (max-width: 650px) {
  .cards > li,
  .cards > .card {
    flex: 1 1 100%;
  }
}

/* компактний рядок-картка для списків без заголовка (донорський .frame у мініатюрі).
   Клас .card на <li> тут не ставиться, тому поверхню оголошуємо самі. */
.cards--row > li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--color-surface-2);
  border: var(--border-block);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
}
.cards--row > li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 100%;
  background: var(--color-accent);
}
.cards--row > li > * + * {
  margin-top: 0;
}
@media screen and (max-width: 450px) {
  .cards--row > li {
    padding: 10px 12px;
  }
}

/* НУМЕРОВАНІ КРОКИ — картка-рядок із круглим номером 28×28 */
.steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  counter-reset: nc-step;
}
.steps > li {
  counter-increment: nc-step;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.steps > li::before {
  content: counter(nc-step);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--color-ink);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.steps strong {
  display: block;
  color: var(--color-accent);
}

/* Pros / Cons — дві колонки.
   Заголовок несе іконку ± (ті самі ромби, що у FAQ), маркери списку —
   дрібні ромби. Плюс/мінус розрізняємо позицією колонки, без зайвих класів. */
.pros {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
.pros > div {
  flex: 1 1 calc((100% - 16px) / 2);
  min-width: 260px;
  overflow: hidden;
  padding: 16px 0;
  background: var(--color-surface-3);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
}
.pros h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-accent);
}
.pros h3::before {
  content: "";
  flex: none;
  width: 42px;
  height: 42px;
  background: no-repeat center/contain;
}
.pros > div:first-child h3::before {
  background-image: url("../images/icons/plus.svg");
}
.pros > div:last-child h3::before {
  background-image: url("../images/icons/minus.svg");
}
.pros ul {
  padding: 16px 16px 16px 20px;
}
.pros li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
}
.pros li + li {
  margin-top: 12px;
}
.pros li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: rotate(-45deg);
}
@media screen and (max-width: 650px) {
  .pros > div {
    flex: 1 1 100%;
  }
}
@media screen and (max-width: 450px) {
  .pros h3 {
    font-size: 18px;
  }
  .pros h3::before {
    width: 34px;
    height: 34px;
  }
}

/* --------------КАРТКА З ПОРТРЕТОМ--------------
   Базова .card__media лежить абсолютом із `max-height: 100%`, тобто її висоту
   диктує довжина тексту. При двох абзацах панель стискалась до смужки 364×88…200
   і з кадру 3:4 лишалось 18–41% — голова персонажа виявлялась за обрізом.
   Тут медіа повертається в потік і тримає власні пропорції, а картка росте під неї. */
.card:has(> .card__media) {
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.card:has(> .card__media) > * + * {
  margin-top: 0;
}
.card:has(> .card__media) > .card__media {
  position: relative;
  order: 2;
  flex: 0 0 30%;
  width: auto;
  height: auto;
  max-height: 420px;
  aspect-ratio: 800/1071;
  opacity: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.card:has(> .card__media) > .card__media img {
  -o-object-position: center 28%;
     object-position: center 28%;
}
.card:has(> .card__media) > .card__text {
  order: 1;
  flex: 1 1 auto;
  width: auto;
  margin-right: 0;
}
.card:has(> .card__media) {
  /* на вузькому екрані картка складається: текст, під ним панель на всю ширину */
}
@media screen and (max-width: 850px) {
  .card:has(> .card__media) {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  .card:has(> .card__media) > .card__media {
    order: 2;
    flex: none;
    width: 100%;
    height: 240px;
    max-height: none;
    aspect-ratio: auto;
    /* Вертикальний зріз підбирається під кожен кадр окремо: у складеній
       картці видно смугу 240px, і в різних ілюстраціях обличчя стоїть на
       різній висоті. Значення задається змінною --crop прямо на .card__media,
       значення нижче — запасне для кадрів, які ще не підбирали. */
  }
  .card:has(> .card__media) > .card__media img {
    -o-object-position: center var(--crop, 11%);
       object-position: center var(--crop, 11%);
  }
  .card:has(> .card__media) > .card__text {
    order: 1;
    width: 100%;
  }
}

/* --------------КАРТКА БЕЗ ОФОРМЛЕННЯ, ФОТО ЛИШЕ НА ВУЗЬКОМУ ЕКРАНІ--------------
   На десктопі це просто текст на всю ширину секції: ні поверхні, ні рамки,
   ні ілюстрації — праворуч однаково лишалось порожнє поле. Ілюстрація
   зʼявляється тільки з ≤850px, де вона стає під текстом і працює як акцент.

   Специфічність: базові правила йдуть як `.card:has(> .card__media)` (0,2,0),
   тож модифікатор записаний як `.card.card--figure-tab` — та сама вага,
   але нижче в файлі, тому перемагає. */
.card.card--figure-tab {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  gap: 0;
}
.card.card--figure-tab > .card__media {
  display: none;
}
.card.card--figure-tab > .card__text {
  flex: 1 1 100%;
  width: 100%;
}
@media screen and (max-width: 850px) {
  .card.card--figure-tab {
    gap: 15px;
  }
  .card.card--figure-tab > .card__media {
    display: block;
  }
}

/* --------------СПИСОК-КАРТКИ--------------
   Донорський `ul.list`: кожен пункт — не маркер, а рядок-картка на
   напівпрозорій заливці з ромбом-орнаментом ліворуч. Значення зняті
   з nationalcasino.expert: заливка rgba(78,72,66,.5), radius 12px,
   min-height 56px, лівий відступ 68px під іконку 32×32, крок 20px. */
.list {
  width: 100%;
  max-width: none;
}
.list > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 12px 16px 12px 68px;
  background: rgba(78, 72, 66, 0.5);
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  /* ромб-орнамент: той самий асет, що між пунктами меню в шапці */
}
.list > li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: url("../images/icons/nav-divider.svg") no-repeat center/32px 32px;
}
.list > li {
  /* підказка на початку пункту («Minimum deposit.») — акцентним кольором,
     щоб відділялась від самої умови. #fec07e на заливці картки = 7.6:1 */
}
.list > li strong {
  display: block;
  color: var(--color-accent);
}
.list > li + li {
  margin-top: 16px;
}
.list {
  /* усередині двоколонкового .double ширину вже задає колонка */
}
.double__text .list {
  max-width: none;
}
@media screen and (max-width: 850px) {
  .list {
    max-width: none;
  }
  .list > li {
    min-height: 48px;
    padding: 10px 14px 10px 56px;
    font-size: 15px;
  }
  .list > li::before {
    left: 14px;
    width: 26px;
    height: 26px;
    background-size: 26px 26px;
  }
}
@media screen and (max-width: 450px) {
  .list > li {
    padding-left: 48px;
    font-size: 14px;
  }
  .list > li::before {
    left: 10px;
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
  }
}

/* --------------ДВІ КОЛОНКИ: ТЕКСТ + ПЕРСОНАЖ--------------
   Донорський `.double`: змістова колонка ліворуч, ілюстрація праворуч на
   всю висоту блока. Потрібна саме для того, щоб короткі пункти списку не
   лишали порожнє поле справа. */
.double {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}
.double__text {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.double__text > * + * {
  margin-top: 16px;
}
.double__image {
  position: relative;
  flex: 0 1 45%;
  max-width: 542px;
  border-radius: 8px;
  overflow: hidden;
}
.double__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 22%;
     object-position: center 22%;
  border-radius: 0;
}
.double {
  /* на планшеті колонки складаються: спершу текст, під ним ілюстрація */
}
@media screen and (max-width: 850px) {
  .double {
    flex-direction: column;
  }
  .double__text, .double__image {
    flex: none;
    width: 100%;
    max-width: none;
  }
  .double__image {
    height: 260px;
  }
}

/* --------------СПИСОК У ДВА СТОВПЦІ--------------
   Два-три коротких пункти в колонку лишають праворуч порожнє поле.
   Модифікатор розкладає їх 50/50 на всю ширину секції. */
.list--2 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: none;
}
.list--2 > li {
  width: calc((100% - 16px) / 2);
  /* базове правило .list > li + li дало б зайвий відступ у сітці */
}
.list--2 > li + li {
  margin-top: 0;
}
@media screen and (max-width: 650px) {
  .list--2 > li {
    width: 100%;
  }
}

/* --------------ТЕМАТИЧНИЙ ОБʼЄКТ БІЛЯ СПИСКУ--------------
   Обгортка створює локальну систему координат: список звільняє праву
   смугу, а прозорий WebP стоїть у ній абсолютом і не впливає на потік. */
.visual-list {
  position: relative;
  width: 100%;
  min-height: 260px;
  /* Висоту блока диктує предмет праворуч (він вищий за список), тож без
     цього список лягав під верхню межу, а вільне поле збиралось під ним.
     Колонка з `justify-content: center` ставить його навпроти предмета. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.visual-list > .list {
  position: relative;
  z-index: 2;
  max-width: 62%;
}
@media screen and (max-width: 850px) {
  .visual-list {
    min-height: 0;
  }
  .visual-list > .list {
    max-width: none;
  }
}

.section-figure {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 34%;
  max-width: 380px;
  height: 100%;
  max-height: 460px;
  pointer-events: none;
}
.section-figure img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  border-radius: 0;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.38));
}
.section-figure {
  /* На вузькому екрані предмет виходить з абсолютного шару в потік і стає
     під списком, по центру. Обгортка .visual-list — флекс-колонка, тож
     достатньо скинути абсолют і дати горизонтальні auto-марджини.
     Розміри тут задаються з !important-ефектом порядку: усі модифікатори
     (--large, --small, --promo-large) оголошені НИЖЧЕ, тому їхні tab-блоки
     теж перевизначені окремо. */
}
@media screen and (max-width: 850px) {
  .section-figure {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 240px;
    height: 200px;
    max-height: none;
    margin: 18px auto 0;
  }
}

/* Високий app-дисплей має більше внутрішнього прозорого поля, тому
   візуально потребує окремого масштабу без зміни колонки списку. */
.section-figure--large {
  width: 38%;
  max-width: 440px;
  height: 118%;
  max-height: 540px;
}
@media screen and (max-width: 850px) {
  .section-figure--large {
    right: auto;
    width: 100%;
    max-width: 240px;
    height: 200px;
    max-height: none;
  }
}

/* Компактний акцент для коротких списків: більше місця тексту,
   менший предмет і без штучного збільшення висоти блока. */
.visual-list--compact {
  min-height: 220px;
}
.visual-list--compact > .list {
  max-width: 72%;
}
@media screen and (max-width: 850px) {
  .visual-list--compact {
    min-height: 0;
  }
  .visual-list--compact > .list {
    max-width: none;
  }
}

.section-figure--small {
  right: 2%;
  width: 23%;
  max-width: 270px;
  height: 92%;
  max-height: 320px;
}
@media screen and (max-width: 850px) {
  .section-figure--small {
    right: auto;
    width: 100%;
    max-width: 240px;
    height: 200px;
    max-height: none;
  }
}

.section-figure--promo-large {
  right: -1%;
  width: 38%;
  max-width: 430px;
  height: 114%;
  max-height: 520px;
}
@media screen and (max-width: 850px) {
  .section-figure--promo-large {
    right: auto;
    width: 100%;
    max-width: 240px;
    height: 200px;
    max-height: none;
  }
}

/* --------------TABLES--------------
   З донора: обгортка radius 12 + border 2px #4e4842, фон #282526;
   thead суцільний #fec07e, th 18/700 колір #2a2829 (9.26:1);
   рядки — flex, розділювач 1px rgba(255,255,255,.1); чергування рядків відсутнє. */
.table-wrapper {
  width: 100%;
  border: var(--border-block);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  /* горизонтальний скрол для ВСІХ таблиць, а не лише для широких:
     колонки ніколи не стискаються нижче 600px, тож текст не розсипається
     на переноси по одному слову й таблиця не виглядає дрібною */
  overflow-x: auto;
  scrollbar-width: none;
}
.table-wrapper::-webkit-scrollbar {
  display: none;
}
.table-wrapper table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}
.table-wrapper tr {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0 20px;
}
@media screen and (max-width: 450px) {
  .table-wrapper tr {
    padding: 0 10px;
  }
}
.table-wrapper thead tr {
  min-height: 46px;
  align-items: center;
  background: var(--color-accent);
}
.table-wrapper tbody tr + tr {
  border-top: 1px solid var(--color-line-hair);
}
.table-wrapper tr > * {
  flex: 1 1 0%;
  text-align: left;
}
.table-wrapper tr > * + * {
  padding-left: 16px;
}
.table-wrapper th {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-surface-3);
  padding-top: 8px;
  padding-bottom: 8px;
}
@media screen and (max-width: 850px) {
  .table-wrapper th {
    font-size: 16px;
  }
}
.table-wrapper td {
  font-size: 16px;
  line-height: 1.35;
  padding-top: 12px;
  padding-bottom: 12px;
  color: var(--color-white);
}
@media screen and (max-width: 850px) {
  .table-wrapper td {
    font-size: 15px;
  }
}
.table-wrapper a {
  color: var(--color-white);
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
@media (hover: hover) {
  .table-wrapper a:hover {
    color: var(--color-accent);
  }
}
.table-wrapper {
  /* перша колонка — назва параметра */
}
.table-wrapper--facts tr > *:first-child {
  max-width: 280px;
}
@media screen and (max-width: 850px) {
  .table-wrapper--facts tr > *:first-child {
    max-width: 200px;
  }
}
.table-wrapper {
  /* таблиці на 5 колонок потребують більше за базові 600px */
}
.table-wrapper--wide table {
  min-width: 820px;
}

/* --------------BANNER (вставка)--------------
   Механіка взята зі сторінки промо-акцій бренду (promo-banner__bg):
   ТРИ шари — фонова сцена, вирізаний персонаж поверх неї, і напівпрозора
   панель із текстом та бейджем-мегафоном ліворуч.
   Оформлення (кольори, радіуси, шрифт, кнопка) — НАШЕ, з палітри донора. */
.banner {
  min-height: 360px;
  /* панель і персонаж — сусіди в одному рядку: персонаж стоїть ПІСЛЯ панелі
     з невеликим нахлестом на її праву рамку, як у джерела фічі */
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  border: none;
  padding: 20px;
  background: var(--color-surface-3);
}
@media screen and (max-width: 850px) {
  .banner {
    min-height: 320px;
  }
}
@media screen and (max-width: 650px) {
  .banner {
    min-height: 280px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
  }
}
.banner {
  /* шар 1 — сцена */
}
.banner__bg {
  z-index: 0;
}
.banner__bg img,
.banner__bg .ph {
  /* ken-burns: повільний наїзд туди-назад, оживляє статичний кадр без JS.
     `alternate` прибирає ривок на стику циклу. */
  transform-origin: 58% 38%;
  animation: nc-banner-zoom 24s ease-in-out infinite alternate;
  /* object-position живе окремим правилом у кінці файлу — тут воно
     не діяло через специфічність, див. коментар там */
}
.banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(91deg, rgba(35, 31, 32, 0.88) 0%, rgba(35, 31, 32, 0.5) 46%, rgba(35, 31, 32, 0.15) 72%, transparent 100%);
}
.banner {
  /* шар 2 — персонаж, вирізаний PNG; окремий елемент рядка після панелі */
}
.banner__figure {
  position: relative;
  z-index: 3;
  order: 2;
  flex: 0 0 380px;
  align-self: stretch;
  /* нахлест на праву рамку панелі — персонаж стоїть майже впритул до неї */
  margin-left: -70px;
  pointer-events: none;
  /* персонаж займає максимум, що влазить у колонку, і притиснутий до низу;
     нижній край свідомо йде за межу — `.content{overflow:hidden}` його зрізає,
     як у джерела фічі */
}
.banner__figure img,
.banner__figure .ph {
  position: absolute;
  left: 50%;
  /* Винесення за нижню межу навмисне мале. Розрахунок: колонка йде
     від 20px до 340px, тож при height = 320 + 28 і bottom = -14
     верх кадру лягає на 6px від краю банера — голови персонажів
     більше не зрізає, а телефон не втрачає нижню частину. */
  bottom: -14px;
  transform: translateX(-50%);
  width: 100%;
  max-width: none;
  height: calc(100% + 28px);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
}
@media screen and (max-width: 1300px) {
  .banner__figure {
    flex-basis: 320px;
  }
}
.banner__figure {
  /* ≤850px: персонаж їде ЗА панель і центрується по всьому банеру */
}
@media screen and (max-width: 850px) {
  .banner__figure {
    position: absolute;
    inset: 0;
    z-index: 1;
    flex: none;
    margin-left: 0;
    opacity: 0.6;
  }
  .banner__figure img,
  .banner__figure .ph {
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-position: center bottom;
       object-position: center bottom;
  }
}
.banner__figure {
  /* на телефоні персонаж лишається — тим самим шаром під панеллю,
     лише трохи глибше в тінь, щоб текст поверх нього не втрачав контраст */
}
@media screen and (max-width: 650px) {
  .banner__figure {
    opacity: 0.45;
  }
}
@media screen and (max-width: 450px) {
  .banner__figure {
    opacity: 0.38;
  }
}
.banner {
  /* шар 3 — панель */
}
.banner__info {
  position: relative;
  z-index: 2;
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: center;
  flex: 0 1 470px;
  max-width: 470px;
  width: 100%;
  margin-left: 20px;
  /* правий відступ більший за лівий: у зону нахлесту персонажа текст не заходить */
  padding: 22px 40px 22px 30px;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(58, 46, 36, 0.82) 0%, rgba(58, 46, 36, 0.42) 100%);
  backdrop-filter: blur(2px);
  color: var(--color-white);
  text-align: left;
  /* клікабельна саме панель (обробник у main.js), тому курсор-рука тільки тут */
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.banner__info > * + * {
  margin-top: 6px;
}
@media screen and (max-width: 850px) {
  .banner__info {
    margin-left: 0;
    background: linear-gradient(90deg, rgba(35, 31, 32, 0.9) 0%, rgba(35, 31, 32, 0.74) 100%);
  }
}
@media screen and (max-width: 650px) {
  .banner__info {
    flex: 1 1 auto;
    max-width: none;
    align-items: center;
    text-align: center;
  }
}
@media screen and (max-width: 450px) {
  .banner__info {
    padding: 16px 14px;
  }
}
.banner {
  /* бейдж-мегафон у верхньому лівому куті панелі.
     Форма — точний контур із джерела фічі (64×51). Окремим SVG-файлом:
     градієнт запечений усередині, тож жодних дублів id на 12 банерів. */
}
.banner__badge {
  position: absolute;
  top: 16px;
  left: -23px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 37px;
}
.banner__badge img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
@media screen and (max-width: 650px) {
  .banner__badge {
    position: static;
    margin-bottom: 4px;
  }
}
.banner__title {
  display: block;
  width: 100%;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-white);
  transition: color 0.3s ease;
}
@media screen and (max-width: 450px) {
  .banner__title {
    font-size: 15px;
  }
}
.banner__main {
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
  margin-top: 12px;
  transition: color 0.3s ease;
}
@media screen and (max-width: 850px) {
  .banner__main {
    font-size: 26px;
  }
}
@media screen and (max-width: 450px) {
  .banner__main {
    font-size: 22px;
  }
}
.banner__sub {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-white);
}
.banner__sub strong {
  color: var(--color-accent);
  font-weight: 700;
  text-transform: uppercase;
}
@media screen and (max-width: 450px) {
  .banner__sub {
    font-size: 14px;
  }
}
.banner__note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-muted);
}
.banner .first__button {
  margin-top: 18px;
  min-width: 168px;
  min-height: 42px;
  padding: 10px 26px;
  font-size: 14px;
}
.banner {
  /* ХОВЕР — тригер САМЕ на панелі: перефарбовуються тільки заголовок,
     сума й рамка. Кнопка при цьому НЕ реагує. */
}
@media (hover: hover) {
  .banner__info:hover {
    border-color: var(--color-accent-lo);
  }
  .banner__info:hover .banner__title,
  .banner__info:hover .banner__main {
    color: var(--color-accent);
  }
  .banner {
    /* зелений CTA — виключно під власним курсором.
       Текст на зеленому лишається темний (--color-ink) — 7.1:1, вище за AA. */
  }
  .banner .first__button:hover {
    background: var(--gradient-cta-hover);
    transform: scale(1.02);
    box-shadow: var(--glow-cta-hover);
  }
}

/* блок із двома кнопками сторів — окрема композиція донора */
.download {
  min-height: 252px;
  justify-content: center;
  align-items: flex-end;
  border: none;
  padding: 20px;
}
.download__bg {
  z-index: 0;
}
.download__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(35, 31, 32, 0.9) 0%, rgba(35, 31, 32, 0.5) 42%, transparent 72%);
}
@media screen and (max-width: 850px) {
  .download {
    align-items: center;
  }
}

@keyframes nc-banner-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.09);
  }
}
/* --------------КАДРУВАННЯ ФОНУ БАНЕРА--------------
   Та сама пастка, що й у героя: у _globals.scss лежить
   `.content .background img` зі специфічністю (0,2,1), а правило всередині
   `.banner` мало (0,1,1) — тож `object-position` тут не діяв узагалі,
   у DevTools він показувався перекресленим. Дублюємо `.content`, щоб вага
   зрівнялась; blocks імпортуються після globals, тож перемагає це правило.

   Значення підбирається під КОЖЕН банер окремо через --banner-pos
   (десктоп) і --banner-pos-tab (≤850px) прямо на .banner__bg. */
.content .banner__bg img,
.content .banner__bg .ph {
  -o-object-position: var(--banner-pos, center top);
     object-position: var(--banner-pos, center top);
}
@media screen and (max-width: 850px) {
  .content .banner__bg img,
  .content .banner__bg .ph {
    -o-object-position: var(--banner-pos-tab, 100% center);
       object-position: var(--banner-pos-tab, 100% center);
  }
}

/* --------------ПРОМО-БЛОК ЗАСТОСУНКУ--------------
   Розміри взяті з довідкового блока: висота 350px, кнопка 268×56,
   значок 32×32, відступ між значком і написом 16px, між кнопками —
   clamp(20px, 15vw, 320px). Кольори НАШІ: акцентний градієнт і темний
   напис, а не червона заливка з жовтою рамкою. Значки чорні
   (currentColor підхоплює колір напису), а не білі як у джерелі. */
.content.app-promo {
  height: 350px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: none;
}
@media screen and (max-width: 850px) {
  .content.app-promo {
    height: auto;
    min-height: 280px;
    padding: 40px 20px;
  }
}
@media screen and (max-width: 450px) {
  .content.app-promo {
    padding: 30px 10px;
  }
}

.app-promo__bg {
  z-index: 0;
}
.app-promo__bg img {
  -o-object-position: center;
     object-position: center;
}
.app-promo__bg {
  /* затемнення тільки в центрі: по краях воно з'їдало б персонажів */
}
.app-promo__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 72% at 50% 50%, rgba(35, 31, 32, 0.72) 0%, rgba(35, 31, 32, 0.38) 62%, rgba(35, 31, 32, 0) 100%);
}
.app-promo__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 15vw, 320px);
  width: 100%;
}
@media screen and (max-width: 850px) {
  .app-promo__actions {
    flex-direction: column;
    gap: 18px;
  }
}
.app-promo__button {
  white-space: normal;
  line-height: 1.2;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 268px;
  min-width: 0;
  max-width: 100%;
  height: 56px;
  min-height: 0;
  padding: 12px 24px;
  /* базове правило .article > .first__button ставить auto-марджини —
     вони розштовхали б кнопки й зламали заданий gap */
  margin: 0;
}
.app-promo__button .icon {
  flex: none;
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* --------------КНОПКА МАГАЗИНУ В КОНТЕНТІ--------------
   Той самий вигляд, що й у промо-блоці: 268×56, значок 32×32 і 16px до
   напису. Використовується всередині секцій — по одній під платформу
   або парою, коли блок розповідає про застосунок загалом. */
/* `a.` обовʼязково: у globals лежить `.article a` (0,1,1), і простий
   `.store-button` (0,1,0) програвав би йому підкресленням */
a.store-button {
  color: var(--color-ink);
  text-decoration: none;
}

.store-button {
  /* `%nc-button-base` ставить `nowrap`; тут напис навмисно у два рядки,
     тож переносу треба дозволити спрацювати, а міжрядковий інтервал
     стиснути, щоб два рядки вклались у 56px */
  white-space: normal;
  line-height: 1.2;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 268px;
  min-width: 0;
  max-width: 100%;
  height: 56px;
  min-height: 0;
  padding: 12px 24px;
}
.store-button .icon {
  flex: none;
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* поодинока кнопка під списком кроків конкретної платформи */
.content > .store-button {
  align-self: flex-start;
  margin: 24px 0 0;
}

/* --------------FAQ--------------
   Донор: li фон #282526, рамка 2px #4e4842, radius 12, gap 16;
   заголовок 20px/700 uppercase акцентом, іконка ± праворуч, обертається. */
.faq__list {
  width: 100%;
}
.faq__list > li {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
  border: var(--border-block);
  border-radius: var(--radius);
}
.faq__list > li + li {
  margin-top: 16px;
}

.faq-item__title {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  cursor: pointer;
  margin-bottom: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  text-transform: uppercase;
  text-align: left;
  white-space: normal;
  color: var(--color-accent);
  padding: 14px 54px 14px 16px;
  transition: var(--transition-fast);
}
.faq-item__title::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: url("../images/icons/plus.svg") no-repeat center/contain;
  transition: transform 0.3s ease;
}
@media (hover: hover) {
  .faq-item__title:hover {
    text-shadow: 0 0.2px var(--color-accent), 0.2px 0 var(--color-accent);
  }
}
@media screen and (max-width: 850px) {
  .faq-item__title {
    font-size: 18px;
  }
}
@media screen and (max-width: 450px) {
  .faq-item__title {
    padding: 10px 46px 10px 10px;
    font-size: 16px;
  }
  .faq-item__title::after {
    top: 10px;
    width: 26px;
    height: 26px;
  }
}

.faq__item.active .faq-item__title::after {
  background-image: url("../images/icons/minus.svg");
}

.faq-item__desc {
  position: relative;
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item__desc::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 16px;
  width: calc(100% - 32px);
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.faq-item__desc > * + * {
  margin-top: 12px;
}
@media screen and (max-width: 450px) {
  .faq-item__desc {
    padding: 0 10px;
  }
}

.faq__item.active .faq-item__desc {
  max-height: 1500px;
  padding: 12px 16px;
}
@media screen and (max-width: 450px) {
  .faq__item.active .faq-item__desc {
    padding: 10px;
  }
}

/* --------------REVIEWS--------------
   Донор має СТАТИЧНУ сітку 2 колонки, а не карусель: li = calc((100% - 20px)/2),
   фон #282526, рамка 2px #4e4842, radius 12, padding 20. ≤768px — одна колонка. */
.reviews__list {
  width: 100%;
}
.reviews__list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: auto;
}
.reviews__list li {
  width: calc((100% - 20px) / 2);
  padding: 20px;
  overflow: hidden;
  background: var(--color-surface-2);
  border: var(--border-block);
  border-radius: var(--radius);
}
@media screen and (max-width: 768px) {
  .reviews__list li {
    width: 100%;
  }
}
@media screen and (max-width: 450px) {
  .reviews__list li {
    padding: 14px;
  }
}
.reviews__list > * + * {
  margin-top: 16px;
}

.reviews__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.reviews__rating {
  display: flex;
  align-items: center;
  gap: 5px;
}
.reviews__rating .icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
  fill: var(--color-accent);
}
.reviews__rating .icon--off {
  fill: var(--color-line);
}

.reviews__author {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent);
}

.reviews__geo {
  font-size: 13px;
  color: var(--color-muted);
}

.reviews__text {
  font-size: 14px;
  line-height: 1.6;
}

/* --------------CONCLUSION / EXPERT VERDICT-------------- */
.conclusion__row {
  display: flex;
  gap: 16px;
  width: 100%;
}
.conclusion__row > div:first-child {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
}
.conclusion__row > div:first-child > * + * {
  margin-top: 16px;
}
.conclusion__row > div:first-child p:last-child {
  font-weight: 700;
  font-style: italic;
  color: var(--color-accent);
}
.conclusion__row > div:last-child {
  flex: 1 1 40%;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: 300px;
}
.conclusion__row > div:last-child .ph,
.conclusion__row > div:last-child img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 20%;
     object-position: center 20%;
}
@media screen and (max-width: 850px) {
  .conclusion__row {
    flex-direction: column;
  }
  .conclusion__row > div:last-child {
    min-height: 260px;
  }
}

/* таблиця експертних оцінок + підсумковий бал */
.rating__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 14px 20px;
  background: var(--color-surface-2);
  border: var(--border-block);
  border-radius: var(--radius);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
}
.rating__total strong {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-accent);
  text-transform: none;
}

/* видима дата останньої перевірки */
.updated {
  font-size: 13px;
  color: var(--color-muted);
}
.updated time {
  color: var(--color-white);
}

/* --------------ПРОСТІ СТОРІНКИ--------------
   responsible-gaming, privacy, terms, cookie-policy, 404.
   Ті самі токени, вужча колонка, без сайдбара. */
/* Службові сторінки йдуть без сайдбара, тому і контент, і футер
   вирівнюються по ОДНІЙ центрованій колонці 1000px. Інакше вузька колонка
   ліворуч і розтягнутий на всю ширину футер виглядають перекошено. */
.page .main,
.page .footer {
  padding-left: max(20px, 50% - 500px);
  padding-right: max(20px, 50% - 500px);
}
.page .main__content {
  margin-left: 0;
  flex: 1 1 100%;
  max-width: none;
}
.page .footer::before,
.page .footer::after {
  left: max(20px, 50% - 500px);
  right: max(20px, 50% - 500px);
}
.page h2 {
  text-align: left;
}
@media screen and (max-width: 850px) {
  .page .main,
  .page .footer {
    padding-left: max(15px, 50% - 500px);
    padding-right: max(15px, 50% - 500px);
  }
  .page .footer::before,
  .page .footer::after {
    left: max(15px, 50% - 500px);
    right: max(15px, 50% - 500px);
  }
}
@media screen and (max-width: 450px) {
  .page .main,
  .page .footer {
    padding-left: max(10px, 50% - 500px);
    padding-right: max(10px, 50% - 500px);
  }
  .page .footer::before,
  .page .footer::after {
    left: max(10px, 50% - 500px);
    right: max(10px, 50% - 500px);
  }
}

/* картки місцевих служб допомоги */
.help {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
.help > li {
  flex: 1 1 calc((100% - 32px) / 3);
  min-width: 240px;
  padding: 16px;
  background: var(--color-surface-2);
  border: var(--border-block);
  border-radius: var(--radius);
}
.help > li strong {
  display: block;
  color: var(--color-accent);
  font-size: 16px;
  line-height: 1.4;
}
.help > li span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-muted);
}
.help > li a {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-white);
  text-decoration: underline;
}
@media (hover: hover) {
  .help > li a:hover {
    color: var(--color-accent);
  }
}
@media screen and (max-width: 1300px) {
  .help > li {
    flex: 1 1 calc((100% - 16px) / 2);
  }
}
@media screen and (max-width: 650px) {
  .help > li {
    flex: 1 1 100%;
  }
}

/* блок 404 — текст ліворуч, персонаж праворуч; кнопки компактні */
.notfound {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 560px;
  /* без картки-поверхні: блок лежить просто на фоні сторінки */
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.notfound__text {
  flex: 1 1 auto;
  max-width: 560px;
  text-align: center;
}
.notfound__head > * + *, .notfound__body > * + * {
  margin-top: 16px;
}
.notfound__body {
  margin-top: 16px;
}
.notfound__figure {
  flex: 0 0 500px;
  align-self: flex-end;
}
.notfound__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  border-radius: 0;
  /* асет вирізаний під нижню грань банера, тож низ у нього рівно
     обтятий — без картки-підкладки цей зріз впадав би в око */
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
}
.notfound strong {
  display: block;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-accent);
}
.notfound h1 {
  text-align: center;
}
.notfound p {
  text-align: center;
}
.notfound ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: auto;
}
.notfound {
  /* компактні кнопки: базовий CTA завеликий для службової сторінки */
}
.notfound .first__button,
.notfound .header__login {
  min-width: 0;
  min-height: 38px;
  padding: 8px 18px;
  font-size: 14px;
}
.notfound {
  /* ≤850px персонаж стає ПІД заголовок, а текст із кнопками — під нього.
     `display: contents` виводить обгортку з дерева боксів, і всі три блоки
     стають прямими флекс-елементами секції, тож `order` починає діяти. */
}
@media screen and (max-width: 850px) {
  .notfound {
    flex-direction: column;
  }
  .notfound__text {
    display: contents;
  }
  .notfound__head {
    order: 1;
  }
  .notfound__figure {
    order: 2;
    flex: none;
    width: 340px;
    margin-top: 8px;
    /* у рядку flex-end означав «низ», у колонці — правий край,
       тож для вертикальної розкладки повертаємо центр */
    align-self: center;
  }
  .notfound__body {
    order: 3;
    max-width: 560px;
    margin-top: 8px;
    text-align: center;
  }
}
@media screen and (max-width: 650px) {
  .notfound strong {
    font-size: 68px;
  }
  .notfound__figure {
    width: 260px;
  }
}

/* --------------ЗАВАНТАЖУВАЛЬНИЙ ЕКРАН--------------
   Правила ТЗ, які тут виконуються дослівно:
   · сторінка рендериться ПОВНІСТЮ видимою — контент ніколи не ховається;
   · оверлей створює скрипт і кладе ПОВЕРХ; на <body> вішається клас, що
     робить рівно одне — блокує прокрутку;
   · при prefers-reduced-motion оверлей не створюється взагалі;
   · жодного інлайн-скрипта в <head> і жодного `opacity:0` на контенті. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(60% 55% at 50% 45%, rgba(254, 192, 126, 0.09) 0%, transparent 70%), var(--color-bg);
  opacity: 1;
  transition: opacity 0.45s ease;
}
.loader.is-hiding {
  opacity: 0;
}
.loader img {
  display: block;
  width: 96px;
  height: 96px;
}
@media screen and (max-width: 650px) {
  .loader img {
    width: 76px;
    height: 76px;
  }
}
.loader {
  /* смуга прогресу вгорі — механіка з лоадер-шела бренду (їхній `l16`):
     два акцентні відрізки по 60% ширини пробігають темною доріжкою.
     Імʼя keyframes під нашим префіксом, тривалість підігнана під
     тривалість переходу між сторінками. */
}
.loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: no-repeat linear-gradient(var(--color-accent-hi) 0 0), no-repeat linear-gradient(var(--color-accent-hi) 0 0), var(--color-bg-deep);
  background-size: 60% 100%;
  animation: nc-loader-bar 1.4s infinite;
}

@keyframes nc-loader-bar {
  0% {
    background-position: -150% 0, -150% 0;
  }
  66% {
    background-position: 250% 0, -150% 0;
  }
  100% {
    background-position: 250% 0, 250% 0;
  }
}
/* блокування прокрутки поки оверлей на екрані — і БІЛЬШЕ НІЧОГО */
body.is-loading {
  overflow: hidden;
  overscroll-behavior: none;
}

/* --------------SCROLL TO TOP-------------- */
.arrow-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 100%;
  background: var(--gradient-accent);
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.arrow-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.arrow-top .icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 2.4;
}
@media (hover: hover) {
  .arrow-top:hover {
    transform: scale(1.05);
  }
}
@media screen and (max-width: 850px) {
  .arrow-top {
    right: 15px;
  }
}
@media screen and (max-width: 650px) {
  .arrow-top {
    bottom: 80px;
  }
}
@media screen and (max-width: 450px) {
  .arrow-top {
    right: 10px;
  }
}

/* --------------COOKIE BANNER--------------
   Non-essential cookies вмикаються лише після явної згоди. */
.cookie {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--color-surface-2);
  border: var(--border-block);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
}
.cookie.visible {
  display: flex;
}
.cookie p {
  flex: 1 1 420px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
}
.cookie p a {
  color: var(--color-accent);
  text-decoration: underline;
}
.cookie__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie .first__button,
.cookie .header__login {
  min-width: 140px;
  min-height: 42px;
  padding: 10px 20px;
  font-size: 14px;
}
@media screen and (max-width: 650px) {
  .cookie {
    left: 10px;
    right: 10px;
    bottom: 78px;
    padding: 14px;
  }
  .cookie__actions {
    width: 100%;
  }
  .cookie .first__button,
  .cookie .header__login {
    flex: 1 1 auto;
  }
}

/* --------------FOOTER--------------
   Зверху вниз: чипи країн → орнамент-розділювач → картка з рядом інфо-лінків →
   ряд платіжних логотипів → низ: 19+ бейдж, дисклеймер, копірайт.
   Значення (радіуси, кольори, розміри платіжок 144×80) — з CSS донора. */
.footer {
  position: relative;
  margin-top: 30px;
  margin-bottom: 40px;
  padding: 60px 20px 60px calc(var(--sidebar-width) + 20px);
}
@media screen and (min-width: 1580px) {
  .footer {
    padding-left: calc(50% - (1580px - 298px - 298px) / 2);
    padding-right: calc(50% - (1580px - 40px) / 2);
  }
}
@media screen and (max-width: 1200px) {
  .footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 850px) {
  .footer {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 450px) {
  .footer {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.footer {
  /* орнаментальні лінії згори й знизу */
}
.footer::before, .footer::after {
  content: "";
  position: absolute;
  left: calc(var(--sidebar-width) + 20px);
  right: 20px;
  height: 40px;
  background: url("../images/icons/footer-divider.svg") no-repeat center/contain;
}
@media screen and (max-width: 1200px) {
  .footer::before, .footer::after {
    left: 20px;
  }
}
@media screen and (max-width: 850px) {
  .footer::before, .footer::after {
    left: 15px;
    right: 15px;
  }
}
.footer::before {
  top: 0;
}
.footer::after {
  bottom: 0;
}
.footer__countries {
  width: 100%;
  margin-bottom: 20px;
}
.footer__countries ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__countries a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-surface-2);
  border: 1px solid var(--color-line-hair);
  border-radius: var(--radius);
}
@media (hover: hover) {
  .footer__countries a:hover {
    background: rgba(42, 40, 41, 0.5);
    box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.14);
  }
}
.footer__countries .flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  max-width: 24px;
  border-radius: 100%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 8px;
  font-size: 18px;
  line-height: 1;
}
.footer__wrapper {
  width: 100%;
  background: var(--color-surface-2);
  padding: 32px 10px 14px;
  border: var(--border-block);
  border-radius: var(--radius);
}
.footer__menu {
  margin-bottom: 32px;
}
.footer__menu ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: -2px 0;
}
.footer__menu li {
  position: relative;
  margin: 2px 0;
}
.footer__menu li + li {
  padding-left: 35px;
}
.footer__menu li + li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  display: block;
  width: 3px;
  height: 22px;
  border-radius: 50px;
  background: var(--color-accent);
}
.footer__menu a {
  font-weight: 400;
  /* у джерела розмір не задано взагалі — успадковується 15px від body */
  font-size: 15px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--color-muted);
}
@media (hover: hover) {
  .footer__menu a:hover {
    color: var(--color-white);
  }
}
.footer__payments {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.footer__payments li {
  flex: 0 1 144px;
  height: 80px;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.footer__payments .pay {
  max-width: 100px;
  max-height: 44px;
  width: auto;
  height: auto;
  transition: transform 0.4s ease;
}
@media (hover: hover) {
  .footer__payments li:hover .pay {
    transform: scale(1.05);
  }
}
@media screen and (max-width: 650px) {
  .footer__payments li {
    flex: 0 1 104px;
    height: 60px;
  }
}
.footer__age {
  width: 100%;
  text-align: center;
  margin-top: 32px;
}
.footer__age::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(254, 192, 126, 0) 0%, rgba(254, 192, 126, 0.6) 50%, rgba(254, 192, 126, 0) 100%);
  margin-bottom: 24px;
}
.footer__age span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100%;
  background: var(--gradient-accent);
  color: var(--color-ink);
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 0 14px 0 rgba(254, 192, 126, 0.35);
}
.footer__text {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.47;
  text-align: center;
  color: var(--color-muted);
  margin-top: 32px;
}
.footer__text p + p {
  margin-top: 24px;
}
.footer__text strong {
  color: var(--color-white);
  font-weight: 700;
}
.footer__text a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* --------------REDUCED MOTION--------------
   Обовʼязковий вимикач руху. Стоїть у кінці, щоб перебивати все вище. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}/*# sourceMappingURL=styles.css.map */