/* ==========================================================================
   LuckyPari Partners — affiliate landing
   Design: Figma "LuckyPari Partners" (main / 1440 · 1024 · 768 · 360)
   ========================================================================== */

/* ------------------------------ tokens ---------------------------------- */
:root {
  /* palette */
  --bg:            #141415;
  --bg-deep:       #0f0f10;
  --surface:       rgba(20, 20, 21, 0.4);
  --surface-solid: #141415;
  --border:        #36393d;
  --border-strong: #4a4e54;
  --text:          #f9f9f9;
  --text-2:        #eeefef;
  --text-3:        #f6f6f6;
  --accent:        #ffcd00;
  --accent-glow:   #ffce00;
  --accent-ink:    #141415;
  --error:         #c50000;

  --gold-card: linear-gradient(216deg,
      #ffd524 -14%, #ffcd00 -2%, #f1c00d 8%, #dcaa0b 18%, #c39207 28%,
      #b28306 38%, #9d7004 48%, #895d01 60%, #7d5100 70%, #593a00 86%, #342100 105%);
  --gold-cta: linear-gradient(256deg,
      #ffcd00 -8%, #e5b108 14%, #c39207 30%, #a2760a 45%,
      #7d5100 62%, #4d3100 84%, #2a1a00 105%);
  --gold-soft: linear-gradient(115.79deg,
      #141415 23.44%, #261b09 38.69%, #342100 50.01%, #472e00 58.75%,
      #593a00 67.07%, #5b3b00 80.73%, #7d5100 95.9%, #895d01 109.57%,
      #976a03 124.93%, #9d7004 137.2%, #b28306 149.93%, #cfa009 164.84%, #f1c00d 188.5%);

  /* geometry */
  --maxw:        1440px;
  --pad-x:       clamp(20px, 4vw, 40px);
  --section-py:  clamp(60px, 7.6vw, 110px);
  --gap:         clamp(12px, 1.4vw, 20px);
  --r-card:      20px;
  --r-pill:      100px;
  --blur:        blur(20.325px);

  /* fonts (локали с нелатинскими письменностями переопределяют их) */
  --font-display: 'Bebas Neue', 'Inter', sans-serif;
  --font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display-lh:   0.9;
  --display-tt:   uppercase;
  --display-ls:   0.01em;

  /* type */
  --fs-h1:       clamp(45px, 29.4px + 4.35vw, 92px);
  --fs-h2:       clamp(40px, 23.3px + 4.63vw, 90px);
  --fs-h3:       clamp(20px, 16.7px + 0.93vw, 30px);
  --fs-h4:       clamp(20px, 14px + 1.67vw, 38px);
  --fs-h5:       clamp(16px, 15.3px + 0.19vw, 18px);
  --fs-h6:       clamp(33px, 24px + 2.5vw, 60px);
  --fs-txt:      clamp(14px, 13.3px + 0.19vw, 16px);
  --fs-sub:      clamp(14px, 12px + 0.56vw, 20px);
  --fs-btn:      14px;
  --fs-nav:      14px;
}

/* ------------------------------ reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-txt);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
picture { display: block; }
.plan__art img,
.hero__coin img,
.cta-card__art img { width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

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

/* ------------------------------ typography ------------------------------ */
.h1, .h2, .h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--display-lh);
  text-transform: var(--display-tt);
  letter-spacing: var(--display-ls);
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h6 { font-size: var(--fs-h6); line-height: calc(var(--display-lh) + 0.1); }

.h3, .h4, .h5 {
  font-family: var(--font-text);
  font-weight: 500;
  text-transform: var(--display-tt);
}
.h3 { font-size: var(--fs-h3); line-height: 1.1; color: var(--text-2); }
.h4 { font-size: var(--fs-h4); line-height: 1.1; color: var(--text); }
.h5 { font-size: var(--fs-h5); line-height: 1.25; }

.txt   { font-size: var(--fs-txt); line-height: 1.25; color: var(--text-2); }
.txt-s { font-size: 14px; line-height: 1.25; color: var(--text); }

/* ------------------------------ layout ---------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.section { position: relative; padding-block: var(--section-py) 0; }
.section > .wrap { position: relative; z-index: 2; }

/* giraffe-spot patterns behind sections (Figma "Vector 1" / "Vector 2") */
.deco {
  position: absolute;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}
.deco--benefits { right: -178px; top: -230px; width: min(700px, 49vw); transform: rotate(19deg); }
.deco--faq      { left: max(-332px, -23vw); top: -411px; width: min(700px, 49vw); transform: rotate(147deg); }

/* soft golden glows behind sections (decorative) */
.glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}

/* ------------------------------ buttons --------------------------------- */
/* inline-block, а не inline-flex: стрелка должна идти в потоке текста.
   Во flex она отдельный элемент, и при переносе надписи на две строки текст
   ужимался влево от неё и переставал выглядеть отцентрованным (SD-4383). */
.btn {
  display: inline-block;
  text-align: center;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.18s ease, background-color 0.18s ease,
              color 0.18s ease, box-shadow 0.18s ease;
}
.btn svg { display: inline-block; vertical-align: -0.2em; margin-inline-start: 10px; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }

.btn--ghost { border: 1px solid var(--accent); color: var(--text); padding: 12px 23px; }

.tg {
  flex: none;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: transform 0.18s ease;
}

.btn--block { width: 100%; }

/* Ховеры — только там, где есть мышь. На тач-устройствах браузер оставляет
   :hover «залипшим» после тапа (кнопка Вход возвращалась жёлтой после back). */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #ffd936; transform: translateY(-1px); }
  .btn--ghost:hover { background: var(--accent); color: var(--accent-ink); }
  .tg:hover { transform: translateY(-1px) scale(1.04); }
  .nav__link:hover { color: var(--accent); opacity: 1; }
  .lang__item:hover { opacity: 1; color: var(--accent); }
  .footer__nav a:hover { color: var(--accent); opacity: 1; }
  .person__link:hover { color: var(--accent); }
}

/* ------------------------------ header ---------------------------------- */
.header {
  position: fixed;
  inset: 20px 0 auto;
  z-index: 60;
  padding-inline: var(--pad-x);
}
.header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 60px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--surface);
  border-radius: 101px;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: background-color 0.25s ease;
}
.header.is-stuck .header__inner { background: rgba(20, 20, 21, 0.78); }

.logo { flex: none; width: 137px; }
.logo img { width: 100%; height: auto; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 40px); margin-inline: auto; }
.nav__link {
  font-size: var(--fs-nav);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  opacity: 0.92;
  transition: color 0.18s ease, opacity 0.18s ease;
}
.header__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* language switcher */
.lang { position: relative; }
.lang__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  font-size: var(--fs-nav);
  font-weight: 600;
  color: var(--text);
}
.lang__flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.lang__btn svg { transition: transform 0.2s ease; }
.lang.is-open .lang__btn svg { transform: rotate(180deg); }

.lang__list {
  position: absolute;
  top: calc(100% + 18px);
  left: -12px;
  min-width: 100px;
  padding: 14px 0;
  display: none;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.lang.is-open .lang__list { display: flex; }
.lang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  font-size: var(--fs-nav);
  font-weight: 600;
  color: var(--text);
  opacity: 0.9;
}
.lang__item img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* burger */
.burger { display: none; width: 32px; height: 32px; margin-inline-start: auto; }
.burger img { width: 100%; height: 100%; }

/* mobile menu overlay */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  padding: 24px var(--pad-x) 40px;
  background: var(--surface-solid);
  overflow-y: auto;
}
.mmenu.is-open { display: flex; }
.mmenu__top { display: flex; align-items: center; justify-content: space-between; }
.mmenu__close { width: 32px; height: 32px; }
.mmenu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 48px 0 40px;
}
.mmenu__link { font-size: 18px; font-weight: 500; }
.mmenu__actions { display: flex; flex-direction: column; gap: 16px; }
.mmenu__lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 24px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-btn);
  font-weight: 700;
}
.mmenu__lang img { width: 24px; height: 24px; border-radius: 50%; }
.mmenu__lang svg { transition: transform 0.2s ease; }
.mmenu__lang[aria-expanded="true"] svg { transform: rotate(180deg); }
/* в макете языки раскрываются вертикальным списком под кнопкой, не строкой */
.mmenu__langlist {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding: 14px 0;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.mmenu__langlist.is-open { display: flex; }
.mmenu__langlist a { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.mmenu__langlist img { width: 22px; height: 22px; border-radius: 50%; }

/* ------------------------------ hero ------------------------------------ */
.hero {
  --art-h: clamp(570px, 73vw, 1050px);
  --art-pad-r: 0.1871;
  --art-pad-b: 0.1121;
  position: relative;
  min-height: 900px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(58% 62% at 70% 52%, rgba(255, 190, 60, 0.30) 0%, rgba(120, 78, 12, 0.34) 38%, rgba(20, 20, 21, 0) 72%),
    radial-gradient(120% 120% at 50% 30%, #2a1e0c 0%, #191712 45%, var(--bg) 78%);
}
.hero__art {
  /* asset is a square with a soft transparent halo around the character;
     --art-pad-* are the halo shares, so the giraffe's body — not the PNG box —
     lines up with the hero edges */
  position: absolute;
  right: calc(max(0px, 50% - 700px) - var(--art-h) * var(--art-pad-r));
  bottom: calc(var(--art-h) * var(--art-pad-b) * -1);
  z-index: 1;
  width: var(--art-h);
  height: var(--art-h);
  pointer-events: none;
  user-select: none;
}
.hero__art img { width: 100%; height: 100%; }
.hero__coin {
  position: absolute;
  right: max(-6px, calc(50% - 724px));
  bottom: clamp(202px, 20.1vw, 289px);
  z-index: 2;
  width: clamp(200px, 25vw, 360px);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(6deg); }
  50%      { transform: translateY(-14px) rotate(10deg); }
}

.hero__inner { position: relative; z-index: 3; padding-top: 80px; }
.hero__content { max-width: 797px; }
.hero__title { margin-bottom: 26px; }
.hero__sub { max-width: 797px; margin-bottom: 30px; font-size: var(--fs-sub); line-height: 1.25; color: var(--text-2); }
.hero__sub br { display: block; }

/* ------------------------------ ticker ---------------------------------- */
.ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  height: 60px;
  align-items: center;
  overflow: hidden;
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.ticker__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 20px;
  will-change: transform;
  animation: marquee var(--marquee-dur, 26s) linear infinite;
}
.ticker__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 20px;
}
.ticker__item {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--fs-txt);
  color: var(--text-2);
  white-space: nowrap;
}
.ticker__item::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--marquee-w, 50%) * -1)); }
}

/* ------------------------------ cookie bar ------------------------------ */
.cookie {
  position: fixed;
  left: max(var(--pad-x), calc(50% - 680px));
  bottom: 24px;
  z-index: 70;
  max-width: 516px;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 30px;
  box-shadow: 0 4px 189px rgba(146, 78, 0, 0.29);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.cookie[hidden] { display: none; }
.cookie__text { font-size: var(--fs-txt); color: var(--text); }

/* ------------------------------ cards ----------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  overflow: hidden;
}

/* commission cards --------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.plan { min-height: 429px; padding: 30px; display: flex; flex-direction: column; }
.plan--gold { background: var(--gold-card); border-color: rgba(255, 205, 0, 0.35); }
.plan__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 25px; align-items: flex-start; }
.plan__title { white-space: pre-line; }
.plan__text { max-width: 260px; white-space: pre-line; }
.plan__art {
  position: absolute;
  left: 18.9%;
  top: 22.6%;
  z-index: 1;
  width: 131.8%;
  transform: rotate(7deg);
  pointer-events: none;
}
.plan--gold .plan__art { left: 20.2%; top: 24.5%; transform: none; }
.plan--gold .plan__title,
.plan--gold .plan__text { color: #fff; }

/* feature cards ------------------------------------------------------ */
.about__head {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 549px);
  gap: var(--gap);
  align-items: end;
  justify-content: space-between;
  margin-bottom: 42px;
}
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.feature { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.feature__icon { width: 50px; height: 37px; }
.feature__icon img { width: 100%; height: 100%; object-fit: contain; }

/* markets ------------------------------------------------------------ */
.markets__grid {
  display: grid;
  grid-template-columns: minmax(0, 690px) minmax(0, 620px);
  gap: 0;
  align-items: center;
  margin-block: 25px 0;
}
.markets__art { position: relative; width: 728px; max-width: 100%; margin-left: -32px; }
.markets__art img { width: 100%; height: auto; }
.markets__copy { display: flex; flex-direction: column; gap: 20px; align-self: start; margin-top: clamp(40px, 12vw, 173px); }

.stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: clamp(-148px, -10vw, -40px); }
.stat {
  min-height: 200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ------------------------------ faq ------------------------------------- */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 670px);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
.acc { display: flex; flex-direction: column; gap: 10px; }
.acc__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: border-color 0.2s ease;
}
.acc__item.is-open { border-color: var(--accent); }
.acc__btn {
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: var(--text);
}
.acc__q { flex: 1; }
.acc__ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  transition: transform 0.25s ease;
}
.acc__item.is-open .acc__ico { transform: rotate(180deg); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { min-height: 0; overflow: hidden; }
.acc__a {
  padding: 0 24px 22px 26px;
  font-family: 'Clash Grotesk', var(--font-text);
  font-size: 16px;
  line-height: 1.25;
  color: var(--text-3);
  white-space: pre-line;
}

/* ------------------------------ contacts -------------------------------- */
.contacts__grid {
  display: grid;
  grid-template-columns: minmax(0, 667px) minmax(0, 532px);
  gap: clamp(20px, 1.6vw, 21px);
  align-items: stretch;
}
.cta-card {
  position: relative;
  min-height: 372px;
  padding: 30px;
  display: flex;
  align-items: center;
  border-radius: var(--r-card);
  background: var(--gold-cta);
  overflow: hidden;
}
.cta-card__body { position: relative; z-index: 2; max-width: 348px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.cta-card__text { color: #fff; }
.cta-card__art {
  position: absolute;
  right: -1.5%;
  bottom: -13px;
  z-index: 1;
  width: 68.8%;
  pointer-events: none;
}
.cta-card__art--mobile { display: none; }

.contacts__title { font-weight: 400; font-size: 18px; line-height: 1.1; text-transform: uppercase; margin-bottom: 20px; }
/* Две независимые колонки, а не сетка: в сетке строки выравниваются по
   высоте самой высокой ячейки, и «Азия» отрывалась от «Африки» (SD-4383). */
.regions { display: flex; align-items: flex-start; gap: clamp(40px, 10vw, 154px); }
.regions__col { flex: none; width: 189px; display: flex; flex-direction: column; gap: 15px; }
.region { display: flex; flex-direction: column; gap: 10px; }
.region__name { font-weight: 400; font-size: 18px; line-height: 1.1; text-transform: uppercase; color: var(--accent); }
.region__list { display: flex; flex-direction: column; gap: 15px; }
.person { display: flex; flex-direction: column; gap: 5px; font-size: 16px; font-weight: 500; }
.person__role { color: var(--text); }
.person__link { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }

/* ------------------------------ footer ---------------------------------- */
.footer { padding-block: var(--section-py) clamp(20px, 1.4vw, 20px); }
.footer__inner {
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.footer__top {
  display: grid;
  grid-template-columns: 41.9% 17.7% auto 1fr;
  gap: 30px 0;
  align-items: start;
}
.footer__brand { display: flex; flex-direction: column; gap: 24px; }
.footer__desc { max-width: 330px; font-size: 14px; line-height: 1.25; color: var(--text); }
.footer__nav { display: flex; flex-direction: column; gap: 5px; }
.footer__nav a {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  opacity: 0.92;
  overflow-wrap: break-word;   /* «ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ» не должна обрезаться */
}
.footer__actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.footer__hr { height: 1px; margin: 28px 0 18px; background: var(--border); border: 0; }
.footer__copy { font-size: 14px; color: var(--text); opacity: 0.85; }

/* Футер — планшет (макет 1024): лого, две колонки ссылок и кнопка приложения
   в одной строке, описание — под лого. display:contents вынимает лого и текст
   из .footer__brand, чтобы они стали самостоятельными элементами сетки. */
@media (min-width: 901px) and (max-width: 1100px) {
  .footer__top {
    grid-template-columns: minmax(137px, 1fr) minmax(0, max-content)
                           minmax(0, max-content) minmax(0, max-content);
    gap: 20px clamp(16px, 2.4vw, 30px);
  }
  .footer__brand { display: contents; }
  .footer__brand .logo { grid-row: 1; grid-column: 1; }
  .footer__desc { grid-row: 2; grid-column: 1 / span 2; max-width: 420px; }
  .footer__actions { grid-row: 1; grid-column: 4; justify-content: flex-end; }
}

/* Футер — телефон и узкий планшет (макет 360): лого, кнопка приложения с ТГ,
   две колонки ссылок, описание, копирайт. Колонки по min-content, иначе
   «ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ» не влезает и переносится по слогам. */
@media (max-width: 900px) {
  .footer__inner { padding: 20px; }
  /* колонка юридических ссылок шире: «ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ» —
     самое длинное слово на сайте, в равных колонках оно не встаёт */
  .footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 24px 12px;
  }
  .footer__brand { display: contents; }
  .footer__brand .logo { grid-column: 1 / -1; order: 1; }
  .footer__actions { grid-column: 1 / -1; order: 2; justify-content: flex-start; }
  .footer__nav { order: 3; min-width: 0; }
  .footer__nav a { font-size: 13px; }
  .footer__desc { grid-column: 1 / -1; order: 4; max-width: none; }
  /* Кнопка приложения и кружок телеграма — одной высоты. У кнопки высота
     зависела от числа строк: на 360px русская надпись переносилась и кнопка
     становилась выше кружка (SD-4383). */
  .footer__actions .btn--primary { flex: 1; }
  .footer__actions .btn {
    min-height: 44px;
    padding-block: 0;
    font-size: 13px;
    white-space: nowrap;
    line-height: 44px;
  }
  .footer__actions .tg { width: 44px; height: 44px; }
}

/* уже 400px две колонки ссылок не встают ни при каком размере шрифта —
   складываем их в одну, чтобы ничего не рвалось по слогам */
@media (max-width: 399px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------ 404 ------------------------------------- */
/* В макете 404 — это «обложка» 1600×900, отцентрованная по странице: внутри
   неё абсолютно стоят жираф и текстовый блок, всё лишнее обрезается. Поэтому
   .nf__stage — фиксированной высоты с overflow:hidden, а не поток. */
.nf {
  --nf-h:    clamp(688px, 62.5vw, 900px);   /* высота обложки, 900 при 1440 */
  --nf-top:  clamp(233px, 21.18vw, 305px);  /* верх текстового блока        */
  --nf-x:    clamp(0px, 6.6vw, 95px);       /* отступ текста от края сетки  */
  --nf-code: clamp(132px, 12.01vw, 173px);
  --nf-gap:  20px;
  position: relative;
}
.nf__stage { position: relative; height: var(--nf-h); overflow: hidden; }

/* Тёплое свечение за жирафом: в Figma это эллипс с градиентом, blur(150px)
   и mix-blend-mode:difference — на тёмном фоне даёт мягкую коричневую дымку */
.nf__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 83% at 50% 72%,
              #5d3414 0%, #542f11 22%, #4c2c12 42%, #3e2612 58%, #321d12 70%,
              #251a12 85%, rgba(20, 20, 21, 0) 100%);
}

.nf__art {
  position: absolute;
  z-index: 1;
  width: clamp(642px, 58.33vw, 840px);
  right: max(calc(50% - 745px), -1.74vw);
  top: clamp(120px, 10.9vw, 157px);
}
.nf__art img { width: 100%; height: auto; }

.nf__inner { position: absolute; left: 0; right: 0; top: 0; height: 100%; }
/* Весь блок по центру своей колонки — и на десктопе тоже (SD-4383):
   раньше «404» центрировался, а текст и кнопки шли по левому краю. */
.nf__content {
  position: absolute;
  z-index: 2;
  top: var(--nf-top);
  left: calc(var(--pad-x) + var(--nf-x));
  max-width: 464px;
  text-align: center;
}
/* «404» в макете отцентрован по текстовому блоку, а текст и кнопки — по левому краю */
.nf__code { font-size: var(--nf-code); line-height: 0.9; text-align: center; color: var(--text); }
.nf__text {
  margin-top: var(--nf-gap);
  max-width: 454px;
  font-size: 18px;
  line-height: 1.25;
  white-space: pre-line;
  color: var(--text-2);
}
.nf__actions { display: flex; justify-content: center; gap: var(--nf-gap); margin-top: var(--nf-gap); }

/* футер в макете начинается сразу за обложкой, без обычного отступа секции */
.nf + .footer { padding-block-start: 0; }

/* --------------------------- юридические страницы ----------------------- */
/* Макет: заголовок страницы на 140px от верха, ниже колонка разделов на всю
   ширину сетки. Разделы через 60px, внутри «h2 + 30px + абзацы через 16px». */
.lg {
  --lg-top: 140px;   /* верх заголовка страницы */
  --lg-gap: 30px;    /* заголовок → текст, h2 → абзацы */
  --lg-sec: 60px;    /* между разделами */
  padding-block: var(--lg-top) 0;
}
.lg__title {
  font-family: var(--font-text);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text);
}
.lg__body {
  display: flex;
  flex-direction: column;
  gap: var(--lg-sec);
  margin-top: var(--lg-gap);
}
.lg__sec { display: flex; flex-direction: column; gap: 16px; }
.lg__h2 {
  margin-bottom: calc(var(--lg-gap) - 16px);   /* до первого абзаца — 30px */
  font-family: var(--font-text);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text);
}
.lg__p {
  font-size: 16px;
  line-height: 1.25;
  color: var(--text);
  text-wrap: pretty;
}
.lg__p--b { font-weight: 700; }

/* Перечисления внутри юридических текстов. ul не делаем флексом: тогда li
   перестают быть list-item и маркеры пропадают. */
.lg__ul {
  margin: 0;
  padding-inline-start: 22px;
  list-style: disc;
}
.lg__ul li {
  font-size: 16px;
  line-height: 1.25;
  color: var(--text);
  text-wrap: pretty;
}
.lg__ul li + li { margin-top: 8px; }

/* Таблица определений в разделе TERMS AND DEFINITIONS.
   Сетка вместо флексов: колонка терминов подстраивается под самый длинный
   термин языка (fit-content), одинаковая для всех строк. При фиксированных
   97px русские и сингальские термины вылезали на текст определения. */
.lg__dl {
  display: grid;
  grid-template-columns: fit-content(240px) minmax(0, 1fr);
  gap: 16px 20px;
  margin: 0;
}
.lg__row { display: contents; }
.lg__dt {
  overflow-wrap: break-word;
  font-size: 16px;
  font-style: italic;
  line-height: 1.25;
  color: var(--text);
}
.lg__dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  color: var(--text);
}

/* ------------------------------ reveal ---------------------------------- */
.reveal, .reveal-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in, .reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.24s; }

/* ==========================================================================
   tablet — ≤1100px
   ========================================================================== */
@media (max-width: 1100px) {
  .nav, .lang { display: none; }
  .burger { display: block; margin-inline-start: 0; }
  .header__actions { margin-inline-start: auto; }
  .header {  inset: 16px 0 auto; }
  .header__inner {
    height: 56px;
    padding: 0 4px;
    gap: 14px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .header.is-stuck .header__inner {
    padding: 0 16px;
    background: rgba(20, 20, 21, 0.86);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
  }

  .hero { min-height: 780px; }
  .hero { --art-h: clamp(530px, 75.5vw, 920px); }

  .plans { grid-template-columns: 1fr; }
  .plan { min-height: 272px; padding: 30px; }
  .plan__text { max-width: 420px; }
  /* в макете 1024/768/360 арт «спрятан» в правом нижнем углу карточки;
     логические inset-* сами зеркалятся в арабской локали */
  .plan__art,
  .plan--gold .plan__art {
    inset-inline: auto -4%;
    top: auto;
    bottom: -8%;
    width: min(30%, 170px);
    transform: none;
  }
  /* Кнопке оставляем место слева от арта: длинные надписи (ru, uz, pl)
     заезжали на картинку (SD-4383). Шрифт на ступень мельче и паддинги уже —
     иначе «ЗАРЕГИСТРИРОВАТЬСЯ» одним словом не влезает в отведённую ширину. */
  .plan .btn {
    max-width: 76%;
    white-space: normal;
    font-size: 12px;
    padding-inline: 16px;
  }

  .about__head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .features { grid-template-columns: repeat(2, 1fr); }

  /* minmax(0,…): иначе width:728px у картинки задаёт min-content трека
     и текст раздела уезжает за правый край экрана */
  .markets__grid { grid-template-columns: minmax(0, 1fr); }
  .markets__art { order: 2; max-width: min(620px, 100%); margin-inline: auto; }
  .markets__copy { order: 1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { min-height: 160px; }

  .faq__grid { grid-template-columns: 1fr; gap: 24px; }
  .deco--faq { left: -30%; top: 12%; width: 90%; }

  .contacts__grid { grid-template-columns: 1fr; }
  .cta-card { min-height: 0; padding-bottom: 0; align-items: stretch; }
  .cta-card__body { padding-bottom: 30px; }
  .cta-card__art { top: 0; bottom: auto; }

  /* Figma 1024: the regions become one wide row (959×162) where the two
     single-contact regions share a column — a balanced multi-column flow
     reproduces that and keeps working down to the phone widths */
  /* на планшете колонки распускаем: регионы идут общим потоком в 4 колонки */
  .regions { display: block; column-count: 4; column-gap: clamp(12px, 3vw, 44px); }
  .regions__col { display: contents; }
  .region { break-inside: avoid; margin-bottom: 15px; }

  /* 404: с 1024 макет становится симметричным — текст по центру, жираф под
     кнопками. Формулы линейно связывают опорные кадры 768 и 1024. */
  .nf {
    --nf-h: clamp(700px, calc(115.63vw - 188px), 996px);
    --nf-top: 130px;
    --nf-code: max(99px, calc(19.14vw - 48px));
    --nf-gap: 16px;
  }
  .nf__glow {
    background: radial-gradient(ellipse 52% 66% at 48% 80%,
                #5d3414 0%, #542f11 22%, #4c2c12 42%, #3e2612 58%, #321d12 70%,
                #251a12 85%, rgba(20, 20, 21, 0) 100%);
  }
  .nf__art {
    width: calc(84.375vw - 189px);
    top: calc(25.78vw + 106px);
    right: auto;
    left: 50%;
    transform: translateX(calc(-50% - 52px));
  }
  .nf__content {
    left: var(--pad-x);
    right: var(--pad-x);
    max-width: 728px;
    margin-inline: auto;
    text-align: center;
  }
  .nf__code { line-height: 0.69; }
  .nf__text { max-width: none; font-size: 14px; }

  /* юридические страницы: типографика на ступень меньше */
  .lg { --lg-top: 130px; }
  .lg__title { font-size: 30px; }
  .lg__h2 { font-size: 26px; }
  .lg__p, .lg__dt, .lg__dd, .lg__ul li { font-size: 14px; }
}

/* regions: fewer columns as the row narrows (Figma keeps 2 on phones) */
@media (max-width: 860px) { .regions { column-count: 3; } }
@media (max-width: 640px) {
  /* на телефоне снова две явные колонки — порядок как в макете, и строки
     не выравниваются между колонками */
  .regions {
    display: flex;
    column-count: initial;
    align-items: flex-start;
    gap: clamp(12px, 4vw, 24px);
  }
  .regions__col { display: flex; flex: 1 1 0; width: auto; min-width: 0; gap: 20px; }
  .region { margin-bottom: 0; }
  .person { font-size: 14px; }
  .region__list { gap: 12px; }
}

/* определения: на узких экранах термин встаёт над текстом */
@media (max-width: 640px) {
  .lg__row { flex-direction: column; gap: 4px; }
  .lg__dt { width: auto; }
}

/* ==========================================================================
   mobile — ≤768px (Figma switches the hero to a stacked layout at 768)
   ========================================================================== */
@media (max-width: 768px) {
  .header { inset: 12px 0 auto; }
  .header__inner {
    height: 56px;
    padding: 0 16px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .header.is-stuck .header__inner {
    background: rgba(20, 20, 21, 0.86);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
  }

  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-bottom: 0;
    text-align: center;
  }
  .hero__inner { order: 1; width: 100%; padding-top: 88px; }
  .hero__content { max-width: none; }
  .hero__sub { max-width: 520px; margin-inline: auto; }
  .hero__sub br { display: none; }
  .hero { --art-h: min(580px, 155vw); }
  .hero__art {
    order: 2;
    position: relative;
    right: auto;
    bottom: auto;
    width: var(--art-h);
    height: var(--art-h);
    margin: 8px 0 calc(var(--art-h) * var(--art-pad-b) * -1)
            calc((100% - var(--art-h)) / 2);
  }
  .hero__coin {
    left: calc(50% + var(--art-h) * 0.085);
    right: auto;
    bottom: calc(var(--art-h) * 0.361);
    z-index: 4;
    width: calc(var(--art-h) * 0.18);
  }
  .hero .btn { width: 100%; max-width: 360px; }

  .cookie {
    left: var(--pad-x);
    right: var(--pad-x);
    max-width: none;
    padding: 16px 20px;
    gap: 16px;
  }

  /* на узких экранах длинные надписи («ПРИСОЕДИНИТЬСЯ К LUCKYPARI PARTNERS»)
     переносим по словам — при nowrap их обрезало по краям кнопки */
  .btn { white-space: normal; text-align: center; text-wrap: balance; }

  .plan { padding: 20px; }
  .plan__body { gap: 20px; }
  .plan__text { max-width: 260px; }

  .features, .stats { grid-template-columns: 1fr; }
  .stat { min-height: 120px; gap: 24px; }

  /* 404: ниже 768 макет наоборот подрастает (обложка 700 → 771 к 480),
     а жираф становится крупнее относительно экрана */
  .nf {
    --nf-h: min(771px, calc(889px - 24.65vw));
    --nf-top: max(104px, calc(62px + 8.68vw));
  }
  .nf__art {
    width: max(417px, calc(347px + 14.58vw));
    top: min(369px, calc(478px - 22.74vw));
    transform: translateX(calc(-50% + min(0px, calc(79px - 16.84vw))));
  }
}

/* ==========================================================================
   small phones — ≤480px (Figma: only logo + burger in the header)
   ========================================================================== */
@media (max-width: 480px) {
  /* в шапке остаются только лого и бургер — бургер прижимаем к краю
     (в арабской локали logical-свойство само уводит его влево) */
  .header__actions { display: none; }
  .burger { margin-inline-start: auto; }

  /* Figma 320/480: the mascot switches to the wide crop and sits under the
     copy, spanning the whole card and flush with its bottom edge.
     768 keeps the horizontal card (372px tall in Figma), so this starts at 480. */
  .cta-card {
    flex-direction: column;
    align-items: stretch;
    padding: 20px 20px 0;
    /* в макете мобильная карточка залита сверху вниз: тёмный верх под текстом,
       насыщенный жёлтый низ под жирафом */
    background: linear-gradient(180deg,
        #141415 0%, #1d1508 10%, #2a1a00 20%, #3d2600 30%, #4d3100 40%,
        #6b4400 50%, #7d5100 58%, #a2760a 70%, #c39207 80%, #e5b108 90%, #ffcd00 100%);
  }
  .cta-card__body { order: 1; max-width: none; padding-bottom: 0; }
  .cta-card .btn { width: 100%; }
  .cta-card__art {
    order: 2;
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% + 40px);
    margin: 18px -20px 0;
  }
  .cta-card__art--desktop { display: none; }
  .cta-card__art--mobile { display: block; }

  /* 404: кнопки в столбик на всю ширину, свечение — широкое и плоское */
  .nf__code { line-height: 0.9; }
  .nf__actions { flex-direction: column; align-items: stretch; }
  .nf__actions .btn { width: 100%; }
  .nf__glow {
    background: radial-gradient(ellipse 150% 50% at 54% 54%,
                #5d3414 0%, #542f11 22%, #4c2c12 42%, #3e2612 58%, #321d12 70%,
                #251a12 85%, rgba(20, 20, 21, 0) 100%);
  }

  /* юридические страницы: в макете заголовок страницы на телефоне — 16px,
     мельче заголовков разделов; так и оставлено */
  .lg { --lg-top: 110px; --lg-gap: 16px; --lg-sec: 40px; }
  .lg__title { font-size: 16px; line-height: 1.25; }
  .lg__h2 { font-size: 20px; }
}

/* ==========================================================================
   RTL — арабская локаль (ассеты берутся из assets/img/rtl/)
   ========================================================================== */
/* RTL-ассет жирафа — другой кроп: свои доли прозрачных полей и размер */
[dir="rtl"] .hero {
  --art-h: clamp(480px, 56.7vw, 816px);
  --art-pad-r: 0.0965;
  --art-pad-b: 0.0006;
}

/* 404: композиция зеркалится — текст справа, жираф слева */
[dir="rtl"] .nf__art { right: auto; left: max(calc(50% - 745px), -1.74vw); }
[dir="rtl"] .nf__content {
  left: auto;
  right: calc(var(--pad-x) + var(--nf-x));
}
[dir="rtl"] .nf__glow {
  background: radial-gradient(ellipse 42% 83% at 50% 72%,
              #5d3414 0%, #542f11 22%, #4c2c12 42%, #3e2612 58%, #321d12 70%,
              #251a12 85%, rgba(20, 20, 21, 0) 100%);
}
@media (max-width: 1100px) {
  [dir="rtl"] .nf__art { left: 50%; transform: translateX(calc(-50% + 52px)); }
  [dir="rtl"] .nf__content { left: var(--pad-x); right: var(--pad-x); }
  [dir="rtl"] .nf__glow {
    background: radial-gradient(ellipse 52% 66% at 52% 80%,
                #5d3414 0%, #542f11 22%, #4c2c12 42%, #3e2612 58%, #321d12 70%,
                #251a12 85%, rgba(20, 20, 21, 0) 100%);
  }
}
@media (max-width: 768px) {
  [dir="rtl"] .nf__art {
    transform: translateX(calc(-50% - min(0px, calc(79px - 16.84vw))));
  }
}
@media (max-width: 480px) {
  [dir="rtl"] .nf__glow {
    background: radial-gradient(ellipse 150% 50% at 46% 54%,
                #5d3414 0%, #542f11 22%, #4c2c12 42%, #3e2612 58%, #321d12 70%,
                #251a12 85%, rgba(20, 20, 21, 0) 100%);
  }
}

[dir="rtl"] .btn svg,
[dir="rtl"] .person__link svg { transform: scaleX(-1); }
[dir="rtl"] .lang__list { left: auto; right: -12px; }
[dir="rtl"] .acc__btn { text-align: right; }

@media (min-width: 769px) {
  [dir="rtl"] .hero__art {
    right: auto;
    left: calc(max(0px, 50% - 700px) - var(--art-h) * var(--art-pad-r));
  }
  [dir="rtl"] .hero__coin { right: auto; left: max(-6px, calc(50% - 724px)); }
  [dir="rtl"] .plan__art { left: auto; right: 18.9%; }
  [dir="rtl"] .plan--gold .plan__art { left: auto; right: 20.2%; }
  [dir="rtl"] .cta-card__art { right: auto; left: -1.5%; }
  [dir="rtl"] .markets__art { margin-left: 0; margin-right: -32px; }
  [dir="rtl"] .deco--benefits { right: auto; left: -178px; transform: rotate(-19deg); }
  [dir="rtl"] .deco--faq { left: auto; right: max(-332px, -23vw); transform: rotate(-147deg); }
}

@media (max-width: 768px) {
  [dir="rtl"] .hero__coin { left: auto; right: calc(50% + var(--art-h) * 0.085); }
  [dir="rtl"] .hero__art {
    margin-left: 0;
    margin-right: calc((100% - var(--art-h)) / 2);
  }
}

/* ==========================================================================
   reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  .hero__coin { animation: none; }
}