/* ============================================================
   android-mentor.ru — единый файл стилей
   Структура: шрифты → переменные → база → канвас зеро-секций →
   далее стили по секциям сверху вниз, затем юридические страницы.
   ============================================================ */

/* ===== Шрифты (локальные) ===== */

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

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

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Переменные ===== */

:root {
  --accent: #120b8f;          /* фирменный синий */
  --accent-hover: #0f0a6f;
  --bg-light: #e8eff4;        /* фон большинства секций */
  --bg-page: #f7f9fb;         /* светлый фон hero и карточек */
  --card: #fcfcfc;            /* фон карточек */
  --ink: #000000;
  --paper: #ffffff;
  --font-heading: 'Unbounded', Arial, sans-serif;
  --font-text: 'Unbounded', Arial, sans-serif;
  --z-header: 100;
  --z-cookie: 200;   /* как на проде: cookie-баннер ниже попапов */
  --z-popup: 300;
  /* --zoom выставляет js/main.js: ширина окна / ширина канваса */
}

/* ===== База ===== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-text);
  color: var(--ink);
  background-color: var(--bg-page); /* светлый фон виден вокруг карточки «О менторе» */
  overflow-x: clip;
}

img { display: block; border: 0; max-width: none; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Страница масштабируется зумом, как на исходном сайте (значения --zoom/--zoom-page
   ставит main.js): канвасные секции растянуты на окно на всех ширинах, обычные блоки
   (Q&A) — только на ширинах >1200. Мобильная шапка и cookie-баннер не масштабируются. */
.zoom-canvas { zoom: var(--zoom, 1); }
.zoom-page { zoom: var(--zoom-page, 1); }

/* Полосы-отступы между секциями: фиксированная высота на всех ширинах,
   не масштабируются. */
.spacer { background-color: var(--bg-light); }
.spacer--25 { height: 25px; }
.spacer--30 { height: 30px; }
.spacer--35 { height: 35px; }
.spacer--55 { height: 55px; }
.spacer--80 { height: 80px; }

/* ===== Канвас зеро-секций ===== */

/* Центрированная полоса фиксированной ширины, в координатах которой
   свёрстаны секции. Ширина меняется по брейкпоинтам. */
.canvas {
  position: relative;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}

@media (max-width: 1199px) { .canvas { width: 960px; } }
@media (max-width: 959px)  { .canvas { width: 640px; } }
@media (max-width: 639px)  { .canvas { width: 480px; } }
@media (max-width: 479px)  { .canvas { width: 320px; } }

/* ===== Секция: Шапка ===== */

/* --- Десктопная фиксированная шапка (окно >980px, канвас 1200/960) --- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: var(--z-header);
}

/* Белая пилюля под пунктами меню */
.header__bar {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 560px;
  height: 53px;
  border-radius: 100px;
  background-color: var(--paper);
  box-shadow: 0px 2px 20px 0px rgba(45, 73, 224, 0.1);
}

.header__nav {
  position: absolute;
  top: 25px;
  left: 29px;
  width: 543px;
  height: 40px;
}

.header__link {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 30px;
  background-color: var(--paper);
  color: #1c1c23;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}

.header__link:hover {
  background-color: var(--accent);
  color: var(--paper);
}

.header__link--about    { left: 0;     width: 100px; }
.header__link--services { left: 100px; width: 80px; }
.header__link--program  { left: 180px; width: 110px; }
.header__link--reviews  { left: 290px; width: 90px; }
.header__link--qa       { left: 380px; width: 63px; }
.header__link--contacts { left: 443px; width: 100px; }

.header__cta {
  position: absolute;
  top: 18px;
  left: 940px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 52px;
  border-radius: 40px;
  background-color: var(--paper);
  box-shadow: 0px 2px 20px 0px rgba(45, 73, 224, 0.1);
  color: #020202;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
}

.header__cta:hover {
  background-color: var(--accent);
  color: var(--paper);
}

/* Канвас 960 */
@media (max-width: 1199px) {
  .header__bar { left: 10px; }
  .header__nav { left: 19px; }
  .header__link--contacts { left: 440px; }
  .header__cta {
    top: 17px;
    left: 710px;
  }
}

/* --- Мобильная шапка с бургером (окно <=980px, обычная адаптивная вёрстка) --- */

.header-mobile {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: var(--z-header);
}

.header-mobile__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background-color: var(--accent);
}

.header-mobile__burger-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}

.header-mobile__burger-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--paper);
}

.header-mobile__burger-icon span:nth-child(1) { top: 0; }

.header-mobile__burger-icon span:nth-child(2) {
  top: 6px;
  left: 20%;
  width: 80%;
}

.header-mobile__burger-icon span:nth-child(3) { top: 12px; }

/* --- Попап мобильного меню (открывается классом .menu-popup--open) --- */

.menu-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-popup);
  display: none;
  background-color: rgba(10, 9, 29, 0.9);
}

.menu-popup--open { display: block; }

.menu-popup__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  padding: 42px 25px 25px;
  overflow-y: auto;
  background-color: var(--accent);
}

.menu-popup__close {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.menu-popup__close-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 20px;
}

.menu-popup__close-icon span {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--paper);
}

.menu-popup__close-icon span:nth-child(1) { transform: rotate(45deg); }
.menu-popup__close-icon span:nth-child(2) { transform: rotate(-45deg); }

.menu-popup__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-popup__link {
  display: inline-block;
  margin-bottom: 15px;
  color: var(--paper);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
}

.menu-popup__item:last-child .menu-popup__link { margin-bottom: 0; }

.menu-popup__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
}

.menu-popup__socials {
  display: flex;
  column-gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-popup__social-link {
  display: block;
  width: 30px;
  height: 30px;
}

.menu-popup__social-link svg { display: block; }

.menu-popup__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  margin-top: 29px;
  padding: 0 24px;
  border-radius: 30px;
  background-color: var(--paper);
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .menu-popup__cta { height: 50px; }
}

/* --- Переключение десктоп/мобайл: прод меняет шапку на границе 980/981 --- */

@media (max-width: 980px) {
  .header { display: none; }
}

@media (min-width: 981px) {
  .header-mobile,
  .menu-popup { display: none; }
}

/* ===== Секция: Hero ===== */

/* Первый экран. Высота — 100vh, но не меньше базовой высоты секции
   на брейкпоинте и не больше 1000px. Деление на --zoom компенсирует
   страничный zoom (см. base). Элементы центрированы по вертикали:
   top = 50% − половина базовой высоты + смещение элемента. */

.hero {
  position: relative;
  height: min(max(620px, calc(100vh / var(--zoom, 1))), 1000px);
  background-color: var(--bg-page);
  overflow: hidden;
}

/* Единственный h1 страницы. Внутренний span — table-cell ради
   vertical-align:middle в фиксированном боксе (важно на канвасе 640,
   где высота бокса 407px). */
.hero__lead {
  display: table;
  position: absolute;
  z-index: 3;
  top: calc(50% + 20px);   /* 50% − 310px + 330px */
  left: 20px;
  width: 424px;
  height: 119px;
  margin: 0;
  color: #0d0d10;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}

.hero__lead-text {
  display: table-cell;
  vertical-align: middle;
}

.hero__title-line {
  position: absolute;
  z-index: 3;
  left: 20px;
  width: 1161px;
  color: #0d0d10;
  font-family: var(--font-text);
  font-weight: 600;
  line-height: 1.55;
  text-transform: uppercase;
}

.hero__title-line--main {
  top: calc(50% - 205px);  /* 50% − 310px + 105px */
  font-size: 72px;
}

.hero__title-line--sub {
  top: calc(50% - 105px);  /* 50% − 310px + 205px */
  font-size: 56px;
}

.hero__badge {
  position: absolute;
  z-index: 3;
  top: calc(50% - 181px);  /* 50% − 310px + 129px */
  left: 686px;
  width: 300px;
  height: 64px;
  border-radius: 60px;
  object-fit: cover;
}

.hero__badge-outline {
  position: absolute;
  z-index: 3;
  top: calc(50% - 186px);  /* 50% − 310px + 124px */
  left: 681px;
  width: 310px;
  height: 74px;
  border: 2px solid #0c10cd;
  border-radius: 60px;
}

.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 3;
  top: calc(50% + 177px);  /* 50% − 310px + 487px */
  left: 20px;
  width: 360px;
  height: 55px;
  border-radius: 40px;
  background-color: var(--accent);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}

.hero__cta:hover { background-color: var(--accent-hover); }

.hero__laptop {
  position: absolute;
  z-index: 3;
  top: calc(50% + 33px);   /* 50% − 310px + 343px */
  left: 482px;
  width: 697px;
  height: 200px;
  border-radius: 30px;
  background-color: #719ed1;
  object-fit: cover;
}

@media (max-width: 1199px) {
  .hero__lead {
    top: calc(50% + 35px);  /* 50% − 310px + 345px */
    left: 10px;
  }

  .hero__title-line { left: 10px; }

  .hero__title-line--main {
    width: 623px;
    font-size: 68px;
  }

  .hero__title-line--sub {
    width: 944px;
    font-size: 45px;
  }

  .hero__badge { left: 645px; }

  .hero__badge-outline { left: 640px; }

  .hero__cta {
    top: calc(50% + 179px); /* 50% − 310px + 489px */
    left: 10px;
  }

  .hero__laptop {
    top: calc(50% + 35px);  /* 50% − 310px + 345px */
    left: 390px;
    width: 560px;
  }
}

@media (max-width: 959px) {
  .hero { height: min(max(553.99px, calc(100vh / var(--zoom, 1))), 1000px); }

  .hero__lead {
    top: calc(50% - 168.995px); /* 50% − 276.995px + 108px */
    width: 320px;
    height: 407px;
  }

  .hero__title-line--main {
    top: calc(50% - 191.995px); /* 50% − 276.995px + 85px */
    width: 620px;
    font-size: 50px;
  }

  .hero__title-line--sub {
    top: calc(50% - 111.995px); /* 50% − 276.995px + 165px */
    width: 621px;
    font-size: 30px;
  }

  .hero__badge {
    top: calc(50% - 169.995px); /* 50% − 276.995px + 107px */
    left: 471px;
    width: 156px;
    height: 42px;
  }

  .hero__badge-outline {
    top: calc(50% - 172.995px); /* 50% − 276.995px + 104px */
    left: 468px;
    width: 162px;
    height: 48px;
  }

  .hero__cta {
    top: calc(50% + 132.005px); /* 50% − 276.995px + 409px */
    width: 320px;
    height: 50px;
  }

  .hero__laptop {
    top: calc(50% - 15.995px);  /* 50% − 276.995px + 261px */
    left: 364px;
    width: 266px;
    height: 198px;
  }
}

@media (max-width: 639px) {
  .hero { height: min(max(753px, calc(100vh / var(--zoom, 1))), 1000px); }

  .hero__lead {
    top: calc(50% - 148.5px);   /* 50% − 376.5px + 228px */
    width: 435px;
    height: 119px;
  }

  .hero__title-line--main {
    top: calc(50% - 321.5px);   /* 50% − 376.5px + 55px */
    width: 458px;
  }

  .hero__title-line--sub {
    top: calc(50% - 241.5px);   /* 50% − 376.5px + 135px */
    width: 458px;
    font-size: 36px;
  }

  .hero__badge {
    top: calc(50% - 229.5px);   /* 50% − 376.5px + 147px */
    left: 341px;
    width: 126px;
    height: 34px;
  }

  .hero__badge-outline {
    top: calc(50% - 232.5px);   /* 50% − 376.5px + 144px */
    left: 338px;
    width: 133px;
    height: 40px;
  }

  .hero__cta { top: calc(50% - 29.5px); } /* 50% − 376.5px + 347px */

  .hero__laptop {
    top: calc(50% + 50.5px);    /* 50% − 376.5px + 427px */
    left: 10px;
    width: 462px;
    height: 189px;
  }
}

@media (max-width: 479px) {
  .hero { height: min(max(705px, calc(100vh / var(--zoom, 1))), 1000px); }

  .hero__lead {
    top: calc(50% - 117.5px);   /* 50% − 352.5px + 235px */
    width: 300px;
    font-size: 10px;
  }

  .hero__title-line--main {
    top: calc(50% - 284.5px);   /* 50% − 352.5px + 68px */
    left: 10px;
    width: 301px;
    font-size: 32px;
  }

  .hero__title-line--sub {
    top: calc(50% - 238.5px);   /* 50% − 352.5px + 114px */
    left: 9px;
    width: 302px;
    font-size: 26px;
  }

  .hero__badge {
    top: calc(50% - 149.5px);   /* 50% − 352.5px + 203px */
    left: 15px;
    width: 150px;
    height: 32px;
  }

  .hero__badge-outline {
    top: calc(50% - 153.5px);   /* 50% − 352.5px + 199px */
    left: 10px;
    width: 160px;
    height: 40px;
  }

  .hero__cta {
    top: calc(50% - 8.5px);     /* 50% − 352.5px + 344px */
    width: 300px;
  }

  .hero__laptop {
    top: calc(50% + 61.5px);    /* 50% − 352.5px + 414px */
    width: 300px;
    height: 205px;
  }
}

/* ===== Паспорт продукта (извлекаемый definition-блок, ai-seo §4.2) ===== */
.passport {
  background-color: var(--bg-page);
  padding: 8px 0 32px;
}

.passport__canvas {
  height: auto;
}

.passport__text {
  max-width: 860px;
  margin: 0;
  padding: 0 20px;
  color: #161821;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
}

.passport__text strong {
  font-weight: 600;
}

@media (max-width: 639px) {
  .passport__text {
    padding: 0 10px;
  }
}

/* ===== Секция: О менторе ===== */

.about {
  height: 620px;
}

/* Скруглённая «карточка»-подложка. Чуть выше секции — хвост уходит
   под фон следующей секции (как в исходном дизайне). */
.about__card {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 1200px;
  height: 720px;
  border-radius: 50px;
  background-color: var(--bg-light);
}

.about__photo {
  position: absolute;
  z-index: 2;
  top: 164px;
  left: 280px;
  width: 300px;
  height: 300px;
  border-radius: 24px;
  background-color: #719ed1;
  object-fit: cover;
  object-position: center center;
}

.about__title {
  position: absolute;
  z-index: 3;
  top: 57px;
  left: 20px;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-text);
  font-size: 60px;
  line-height: 1.55;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.about__name {
  position: absolute;
  z-index: 4;
  top: 164px;
  left: 20px;
  width: 200px;
  height: 82px;
  margin: 0;
  color: #161821;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 600;
  text-transform: uppercase;
}

/* Факты: иконка + текст (флекс-группы из экспорта, gap 12px) */
.about__fact {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  column-gap: 12px;
}

/* Факты выровнены по верху фотографии (правка владельца 10.06.2026:
   раньше колонка фактов начиналась на 417px ниже, под пустой зоной) */
.about__fact--experience {
  top: 164px;
  left: 651px;
  width: 529px;
  height: 50px;
  align-items: center;
}

.about__fact--income {
  top: 269px;
  left: 650px;
  width: 529px;
  height: 63px;
}

.about__fact--education {
  top: 391px;
  left: 650px;
  width: 534px;
  height: 63px;
}

.about__fact--offers {
  top: 515px;
  left: 650px;
  width: 530px;
  height: 84px;
}

.about__fact-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: var(--bg-page);
  box-shadow: 0 0 12px 0 rgba(18, 11, 143, 0.1);
  object-fit: cover;
  object-position: center center;
}

.about__fact-text {
  width: 100%;
  margin: 0;
  color: #0d0d10;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 400;
}

.about__fact--experience .about__fact-text {
  flex-shrink: 0;
  width: 390px;
  height: 42px;
}

@media (max-width: 1199px) {
  .about { height: 570px; }
  .about__card { width: 959px; height: 620px; }
  .about__photo { top: 165px; left: 210px; width: 260px; height: 260px; }
  .about__name { top: 166px; width: 189px; height: 72px; font-size: 27px; }
  .about__fact--experience { top: 165px; left: 501px; width: 426px; }
  .about__fact--income { top: 250px; left: 500px; width: 415px; height: 80px; }
  .about__fact--education { top: 365px; left: 500px; width: 433px; height: 60px; }
  .about__fact--offers { top: 460px; left: 500px; width: 423px; height: 100px; }
  .about__fact-text { flex-shrink: 0; font-size: 15px; }
  .about__fact--experience .about__fact-text { width: 337px; height: 40px; }
  .about__fact--income .about__fact-text { width: 338px; height: 80px; }
  .about__fact--education .about__fact-text { width: 340px; }
  .about__fact--offers .about__fact-text { width: 340px; }
}

@media (max-width: 959px) {
  .about { height: 700px; }
  .about__card { width: 639px; height: 750px; border-radius: 30px; }
  .about__photo { left: 20px; width: 230px; height: 230px; }
  .about__name { top: 159px; left: 276px; width: 165px; height: 64px; font-size: 24px; }
  /* факты — справа от фото, под именем */
  .about__fact--experience { top: 250px; left: 276px; width: 355px; height: 45px; }
  .about__fact--income { top: 325px; left: 275px; width: 356px; height: 72px; }
  .about__fact--education { top: 427px; left: 275px; width: 356px; height: 72px; }
  .about__fact--offers { top: 529px; left: 275px; width: 356px; height: 108px; }
  .about__fact-icon { width: 45px; height: 45px; }
  .about__fact-text { font-size: 14px; }
  .about__fact--experience .about__fact-text { width: 294px; height: 36px; }
  .about__fact--income .about__fact-text { width: 294px; height: 72px; }
  .about__fact--education .about__fact-text { width: 294px; height: 72px; }
  .about__fact--offers .about__fact-text { width: 294px; height: 108px; }
}

@media (max-width: 639px) {
  .about { height: 1090px; }
  .about__card { width: 479px; height: 1193px; }
  .about__title { font-size: 44px; }
  .about__photo { top: 155px; }
  .about__name { top: 148px; left: 266px; }
  .about__fact--experience { top: 711px; left: 21px; width: 398px; }
  .about__fact--income { top: 786px; left: 20px; width: 400px; }
  .about__fact--education { top: 888px; left: 20px; width: 400px; height: 54px; }
  .about__fact--offers { top: 972px; left: 20px; width: 391px; height: 90px; }
  .about__fact--experience .about__fact-text { width: 337px; height: 36px; }
  .about__fact--income .about__fact-text { width: 343px; height: 72px; }
  .about__fact--education .about__fact-text { width: 335px; height: 54px; }
  .about__fact--offers .about__fact-text { width: 334px; height: 90px; }
}

@media (max-width: 479px) {
  .about { height: 1170px; }
  .about__card { top: 76px; width: 320px; height: 1123px; border-radius: 20px; }
  .about__title { top: 106px; left: 10px; font-size: 38px; }
  .about__photo { top: 225px; left: 10px; width: 300px; height: 300px; }
  .about__name { top: 185px; left: 10px; width: auto; height: auto; white-space: nowrap; font-size: 22px; }
  .about__fact { column-gap: 8px; }
  .about__fact--experience { top: 770px; left: 11px; width: 300px; height: 36px; }
  .about__fact--income { top: 830px; left: 10px; width: 301px; height: 85px; }
  .about__fact--education { top: 939px; left: 10px; width: 301px; height: 68px; }
  .about__fact--offers { top: 1031px; left: 10px; width: 300px; height: 102px; }
  .about__fact-icon { width: 36px; height: 36px; }
  .about__fact-text { font-size: 13px; }
  .about__fact--experience .about__fact-text { width: 255px; height: 34px; }
  /* Прод центрирует 4 строки текста в боксе 85px (table-cell middle) —
     текст начинается на ~9px ниже верха группы. */
  .about__fact--income .about__fact-text { width: 257px; height: auto; margin-top: 9px; }
  .about__fact--education .about__fact-text { width: 256px; height: 68px; }
  .about__fact--offers .about__fact-text { width: 256px; height: 102px; }
}

/* Факт №4 расширен строкой про базу собеседований (ai-seo §4.7) — высота по
   контенту; override перебивает медиа-правила выше (специфичность равная,
   каскад по порядку). */
.about__fact--offers,
.about__fact--offers .about__fact-text {
  height: auto;
}

/* Подгонка высот карточки/секции под выросший факт №4 в двух бендах, где
   запаса не хватило (замер: 960–1199 факт вылезал на 18 канвас-px, <480 — на 12).
   min-width-скоуп, чтобы поздний каскад не перебил значения соседних бендов. */
@media (min-width: 960px) and (max-width: 1199px) {
  .about { height: 610px; }
  .about__card { height: 660px; }
}

@media (max-width: 479px) {
  .about { height: 1210px; }
  .about__card { height: 1160px; }
}

/* ===== Секция: Разбор собеседования на 450К (interview) ===== */

.interview {
  height: 574px;
  background-color: var(--bg-light);
}

/* Заголовок — две независимо позиционированные строки */

.interview__title {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-text);
  font-size: 58px;
  font-weight: 600;
  line-height: 1.55;
  text-transform: uppercase;
}

.interview__title-line {
  position: absolute;
  white-space: nowrap;
}

.interview__title-line--top {
  top: 4px;
  left: 106px;
  z-index: 4;
}

.interview__title-line--bottom {
  top: 79px;
  left: 435px;
  z-index: 3;
}

/* Видео: обложка + play, по клику JS вставляет iframe Kinescope */

.interview__video {
  position: absolute;
  top: 174px;
  left: 259px;
  z-index: 5;
  width: 661px;
  height: 365px;
  border-radius: 30px;
  overflow: hidden;
}

.interview__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interview__play {
  position: absolute;
  /* На проде иконка стоит на 2px выше центра видео (инлайновый svg
     в контейнере с базовой линией) — повторяем смещение. */
  top: calc(50% - 2px);
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
}

.interview__play-icon {
  display: block;
}

.interview__play-icon svg {
  display: block;
}

.interview__play:hover .interview__play-icon {
  transform: scale(1.2);
}

.interview__video--playing .interview__cover,
.interview__video--playing .interview__play {
  display: none;
}

.interview__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1199px) {
  .interview {
    height: 554px;
  }

  .interview__title {
    font-size: 48px;
  }

  .interview__title-line--top {
    left: 71px;
  }

  .interview__title-line--bottom {
    top: 69px;
    left: 344px;
  }

  .interview__video {
    top: 158px;
    left: 150px;
  }
}

@media (max-width: 959px) {
  .interview {
    height: 394px;
  }

  .interview__title {
    font-size: 36px;
  }

  .interview__title-line--top {
    top: 4px;
    left: 13px;
  }

  .interview__title-line--bottom {
    top: 54px;
    left: 218px;
  }

  .interview__video {
    top: 125px;
    left: 87px;
    width: 467px;
    height: 258px;
    border-radius: 24px;
  }
}

@media (max-width: 639px) {
  .interview {
    height: 384px;
  }

  .interview__title {
    font-size: 27px;
  }

  .interview__title-line--top {
    left: 10px;
  }

  .interview__title-line--bottom {
    top: 52px;
    left: 163px;
  }

  .interview__video {
    top: 109px;
    left: 11px;
    width: 460px;
    height: 250px;
  }
}

@media (max-width: 479px) {
  .interview {
    height: 334px;
  }

  .interview__title-line--top {
    top: 14px;
    left: 10px;
    width: 301px;
    height: 68px;
    font-size: 25px;
    line-height: 1.35;
    white-space: normal;
  }

  .interview__title-line--bottom {
    top: 82px;
    left: 94px;
    font-size: 38px;
  }

  .interview__video {
    top: 146px;
    left: 10px;
    width: 300px;
    height: 165px;
    border-radius: 20px;
  }
}

/* ===== Секция: Услуги / Программа (#services, якорь #program) =====
   Один десктопный зеро-блок (виден при ширине >640px) и два мобильных
   (заголовок+«Для кого» и лента роудмапа, видны при ширине ≤640px).
   Лента роудмапа — горизонтальная ручная прокрутка (.js-drag-scroll). */

.services {
  position: relative;
  background-color: var(--bg-light);
  font-family: var(--font-text);
}

/* Невидимый якорь #program: top/left по брейкпоинтам из экспорта */
.services__program-anchor {
  position: absolute;
  top: 684px;
  left: 777px;
  width: 0;
  height: 0;
}

/* --- Высоты блоков и переключение десктоп/мобайл --- */

/* Высота сокращена с 1680px: убрана пустая зона под лентой роудмапа
   (правка владельца 10.06.2026) */
.services__wide { height: 1180px; }

.services__intro-m,
.services__roadmap-m { display: none; }

.services__intro-m { height: 840px; }
.services__roadmap-m { height: 326px; }

/* --- Заголовок, подзаголовок, срок --- */

.services__title {
  position: absolute;
  margin: 0;
  top: 50px;
  left: 20px;
  color: var(--accent);
  font-size: 60px;
  line-height: 1.55;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.services__subtitle {
  position: absolute;
  top: 159px;
  left: 20px;
  width: 661px;
  color: #161821;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 600;
  text-transform: uppercase;
}

.services__duration {
  position: absolute;
  margin: 0;
  top: 189px;
  left: 858px;
  width: 321px;
  color: #0d0d10;
  font-size: 16px;
  line-height: 1.3;
}

/* --- Карточка «Для кого» --- */

.services__audience-card {
  position: absolute;
  top: 336px;
  left: 20px;
  width: 1160px;
  height: 300px;
  border: 2px solid var(--accent);
  border-radius: 30px;
  background-color: var(--card);
}

.services__audience-title {
  position: absolute;
  margin: 0;
  top: 366px;
  left: 820px;
  color: #161821;
  font-size: 46px;
  line-height: 1.35;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.services__audience-arrow {
  position: absolute;
  top: 382px;
  left: 714px;
  width: 95px;
  height: auto;
  transform: rotate(351deg);
}

.services__audience-heading {
  position: absolute;
  margin: 0;
  color: #161821;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  text-transform: uppercase;
}

.services__audience-heading--dev { top: 504px; left: 170px; width: 360px; }
.services__audience-heading--it  { top: 504px; left: 762px; width: 300px; }

.services__audience-text {
  position: absolute;
  margin: 0;
  color: #161821;
  font-size: 14px;
  line-height: 1.3;
}

.services__audience-text--dev { top: 537px; left: 170px; width: 360px; }
.services__audience-text--it  { top: 537px; left: 762px; width: 300px; }

.services__numeral,
.services__slash {
  position: absolute;
  color: var(--accent);
  font-size: 100px;
  line-height: 1.55;
  font-weight: 300;
}

.services__numeral--1 { top: 451px; left: 70px; }
.services__numeral--2 { top: 451px; left: 632px; }
.services__slash--1   { top: 453px; left: 510px; }
.services__slash--2   { top: 453px; left: 1072px; }

/* --- Лента роудмапа (ручная прокрутка, видимая полоса прокрутки —
       правка владельца 10.06.2026) --- */

.services__track {
  position: absolute;
  top: 815px;
  left: 0;
  width: 100%;
  height: 264px; /* 244px карточки + место под полосу прокрутки */
  overflow-x: auto;
  overflow-y: hidden;
}

/* Постоянно видимая полоса прокрутки: в Chrome/Safari — через
   ::-webkit-scrollbar, в Firefox — через стандартные свойства */
.services__track::-webkit-scrollbar { height: 8px; }

.services__track::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 4px;
}

.services__track::-webkit-scrollbar-track {
  background-color: rgba(18, 11, 143, 0.12);
  border-radius: 4px;
  margin: 0 20px;
}

@supports not selector(::-webkit-scrollbar) {
  .services__track {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(18, 11, 143, 0.12);
  }
}

.services__cards {
  position: relative;
  width: 2461px;
  height: 100%;
}

.services__card {
  position: absolute;
  top: 0;
  height: 244px;
}

.services__card--1 { left: 15px;   width: 465px; }
.services__card--2 { left: 510px;  width: 466px; }
.services__card--3 { left: 1006px; width: 465px; }
.services__card--4 { left: 1501px; width: 465px; }
.services__card--5 { left: 1995px; width: 466px; }

.services__card-outline {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 464px;
  height: auto;
}

.services__card-outline path {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 2;
}

.services__card-badge {
  position: absolute;
  top: 0;
  width: 86px;
  height: 76px;
  border: 2px solid #100a9a;
  border-radius: 20px;
  background-color: var(--card);
}

.services__card--1 .services__card-badge { left: 379px; }
.services__card--2 .services__card-badge { left: 380px; }
.services__card--3 .services__card-badge { left: 379px; }
.services__card--4 .services__card-badge { left: 379px; }
.services__card--5 .services__card-badge { left: 380px; }

.services__card-num {
  position: absolute;
  top: 17px;
  color: var(--accent);
  text-align: center;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 600;
  white-space: nowrap;
}

.services__card--1 .services__card-num { left: 414px; }
.services__card--2 .services__card-num { left: 410px; }
.services__card--3 .services__card-num { left: 409px; }
.services__card--4 .services__card-num { left: 409px; }
.services__card--5 .services__card-num { left: 410px; }

.services__card-text {
  position: absolute;
  margin: 0;
  top: 91px;
  color: #161821;
  font-size: 16px;
  line-height: 1.3;
}

.services__wide .services__card--1 .services__card-text { left: 46px; width: 305px; }
.services__wide .services__card--2 .services__card-text { left: 47px; width: 302px; }
.services__wide .services__card--3 .services__card-text { left: 46px; width: 333px; }
.services__wide .services__card--4 .services__card-text { left: 46px; width: 308px; }
.services__wide .services__card--5 .services__card-text { left: 47px; width: 263px; }

/* --- Декор: 3D-иконка кода поверх ленты --- */

.services__decor-code {
  position: absolute;
  top: 946px;
  left: 382px;
  width: 198px;
  height: 198px;
  background-image: url('../img/services-code-3d.png');
  background-position: center center;
  background-size: cover;
  transform: rotate(326deg);
  pointer-events: none;
}

/* ============ Канвас 960 (окно 960–1199) ============ */

@media (max-width: 1199px) {
  .services__wide { height: 1110px; }

  .services__wide .services__title { left: 10px; }
  .services__wide .services__subtitle { left: 10px; width: 544px; font-size: 24px; }
  .services__wide .services__duration { top: 175px; left: 630px; }

  .services__wide .services__audience-card { top: 283px; left: 10px; width: 940px; height: 280px; }
  .services__wide .services__audience-title { top: 313px; left: 630px; }
  .services__wide .services__audience-arrow { top: 329px; left: 524px; }
  .services__wide .services__audience-heading--dev { top: 431px; left: 111px; width: 342px; line-height: 1.4; }
  .services__wide .services__audience-heading--it  { top: 431px; left: 588px; width: 288px; }
  .services__wide .services__audience-text--dev { top: 464px; left: 111px; width: 330px; }
  .services__wide .services__audience-text--it  { top: 464px; left: 588px; width: 265px; }
  .services__wide .services__numeral,
  .services__wide .services__slash { font-size: 75px; }
  .services__wide .services__numeral--1 { top: 399px; left: 41px; }
  .services__wide .services__numeral--2 { top: 399px; left: 492px; }
  .services__wide .services__slash--1   { top: 399px; left: 441px; }
  .services__wide .services__slash--2   { top: 399px; left: 876px; }

  .services__wide .services__track { top: 765px; }
  .services__wide .services__decor-code { top: 898px; left: 390px; width: 175px; height: 175px; }

  .services__program-anchor { top: 587px; left: 550px; }
}

/* ============ Канвас 640, десктопный блок (окно 641–959) ============ */

@media (max-width: 959px) {
  .services__wide { height: 1300px; }

  .services__wide .services__subtitle { width: 540px; }
  .services__wide .services__duration { top: 265px; left: 310px; }

  .services__wide .services__audience-card { top: 353px; width: 620px; height: 410px; }
  .services__wide .services__audience-title { top: 383px; left: 306px; }
  .services__wide .services__audience-arrow { top: 409px; left: 200px; transform: rotate(334deg); }
  .services__wide .services__audience-heading--dev { top: 511px; left: 119px; }
  .services__wide .services__audience-heading--it  { top: 631px; left: 149px; }
  .services__wide .services__audience-text--dev { top: 544px; left: 119px; }
  .services__wide .services__audience-text--it  { top: 664px; left: 149px; }
  .services__wide .services__numeral--1 { top: 479px; left: 42px; }
  .services__wide .services__numeral--2 { top: 599px; left: 42px; }
  .services__wide .services__slash--1   { top: 479px; left: 451px; }
  .services__wide .services__slash--2   { top: 599px; left: 451px; }

  .services__wide .services__track { top: 965px; }
  .services__wide .services__cards { width: 2417px; }
  .services__wide .services__card--1 { left: 10px; }
  .services__wide .services__card--2 { left: 495px; }
  .services__wide .services__card--3 { left: 981px; }
  .services__wide .services__card--4 { left: 1466px; }
  .services__wide .services__card--5 { left: 1951px; }
  .services__wide .services__decor-code { top: 1096px; left: 385px; }

  .services__program-anchor { top: 781px; left: 250px; }
}

/* ============ Окно ≤640: мобильные блоки (канвас 640) ============ */

@media (max-width: 640px) {
  .services__wide { display: none; }
  .services__intro-m,
  .services__roadmap-m { display: block; }

  .services__program-anchor { top: 761px; left: 133px; }

  /* Заголовок + «Для кого» (значения канваса 640) */
  .services__intro-m .services__title { left: 10px; }
  .services__intro-m .services__subtitle { left: 10px; width: 540px; font-size: 24px; }
  .services__intro-m .services__duration { top: 265px; left: 310px; }

  .services__intro-m .services__audience-card { top: 353px; left: 10px; width: 620px; height: 410px; }
  .services__intro-m .services__audience-title { top: 383px; left: 306px; }
  .services__intro-m .services__audience-arrow { top: 409px; left: 200px; transform: rotate(334deg); }
  .services__intro-m .services__audience-heading--dev { top: 511px; left: 119px; width: 342px; line-height: 1.4; }
  .services__intro-m .services__audience-heading--it  { top: 631px; left: 149px; width: 288px; }
  .services__intro-m .services__audience-text--dev { top: 544px; left: 119px; width: 330px; }
  .services__intro-m .services__audience-text--it  { top: 664px; left: 149px; width: 265px; }
  .services__intro-m .services__numeral,
  .services__intro-m .services__slash { font-size: 75px; }
  .services__intro-m .services__numeral--1 { top: 479px; left: 42px; }
  .services__intro-m .services__numeral--2 { top: 599px; left: 42px; }
  .services__intro-m .services__slash--1   { top: 479px; left: 451px; }
  .services__intro-m .services__slash--2   { top: 599px; left: 451px; }

  .services__roadmap-arrow {
    position: absolute;
    top: 790px;
    left: 510px;
    width: 107px;
    height: auto;
    transform: rotate(348deg);
  }

  /* Лента роудмапа */
  .services__roadmap-m .services__track { top: -1px; }
  .services__roadmap-m .services__cards { width: 2417px; }
  .services__roadmap-m .services__card--1 { left: 10px; }
  .services__roadmap-m .services__card--2 { left: 495px; }
  .services__roadmap-m .services__card--3 { left: 981px; }
  .services__roadmap-m .services__card--4 { left: 1466px; }
  .services__roadmap-m .services__card--5 { left: 1951px; }

  .services__roadmap-m .services__card--1 .services__card-text { left: 46px; width: 295px; }
  .services__roadmap-m .services__card--2 .services__card-text { left: 47px; width: 295px; }
  .services__roadmap-m .services__card--3 .services__card-text { left: 46px; width: 321px; }
  .services__roadmap-m .services__card--4 .services__card-text { left: 46px; width: 321px; }
  .services__roadmap-m .services__card--5 .services__card-text { left: 47px; width: 321px; }

  .services__roadmap-m .services__decor-code { top: 130px; left: 385px; width: 175px; height: 175px; }
}

/* ============ Канвас 480 (окно 480–639) ============ */

@media (max-width: 639px) {
  .services__intro-m { height: 810px; }
  .services__roadmap-m { height: 310px; }

  .services__program-anchor { top: 713px; left: 52px; }

  .services__intro-m .services__subtitle { top: 149px; width: 462px; font-size: 22px; }
  .services__intro-m .services__duration { top: 260px; left: 150px; }

  .services__intro-m .services__audience-card { width: 460px; height: 360px; border-radius: 24px; }
  .services__intro-m .services__audience-title { top: 383px; left: 189px; font-size: 40px; }
  .services__intro-m .services__audience-arrow { top: 407px; left: 100px; width: 79px; }
  .services__intro-m .services__audience-heading--dev { top: 498px; left: 102px; width: 312px; font-size: 15px; }
  .services__intro-m .services__audience-heading--it  { top: 596px; left: 119px; font-size: 15px; }
  .services__intro-m .services__audience-text--dev { top: 530px; left: 102px; }
  .services__intro-m .services__audience-text--it  { top: 627px; left: 119px; }
  .services__intro-m .services__numeral,
  .services__intro-m .services__slash { font-size: 55px; }
  .services__intro-m .services__numeral--1 { top: 480px; left: 39px; }
  .services__intro-m .services__numeral--2 { top: 578px; left: 40px; }
  .services__intro-m .services__slash--1   { top: 480px; left: 422px; }
  .services__intro-m .services__slash--2   { top: 578px; left: 422px; }

  .services__roadmap-arrow { top: 738px; left: 355px; }

  .services__roadmap-m .services__track { top: 0; height: 262px; }
  .services__roadmap-m .services__card { width: 460px; height: 241px; }
  .services__roadmap-m .services__card--1 { left: 14px; }
  .services__roadmap-m .services__card--2 { left: 501px; top: 1px; }
  .services__roadmap-m .services__card--3 { left: 986px; }
  .services__roadmap-m .services__card--4 { left: 1471px; }
  .services__roadmap-m .services__card--5 { left: 1957px; top: 1px; }

  .services__roadmap-m .services__card--1 .services__card-outline { width: 459px; }
  .services__roadmap-m .services__card--2 .services__card-outline { width: 458px; }
  .services__roadmap-m .services__card--3 .services__card-outline { width: 459px; }
  .services__roadmap-m .services__card--4 .services__card-outline { width: 459px; }
  .services__roadmap-m .services__card--5 .services__card-outline { width: 458px; }

  .services__roadmap-m .services__card-badge { left: 375px; width: 85px; height: 75px; }

  .services__roadmap-m .services__card--1 .services__card-num { left: 410px; }
  .services__roadmap-m .services__card--2 .services__card-num { left: 405px; }
  .services__roadmap-m .services__card--3 .services__card-num { left: 405px; }
  .services__roadmap-m .services__card--4 .services__card-num { left: 405px; }
  .services__roadmap-m .services__card--5 .services__card-num { left: 405px; }

  .services__roadmap-m .services__card-text { top: 90px; }
  .services__roadmap-m .services__card--1 .services__card-text { left: 45px; width: 292px; }
  .services__roadmap-m .services__card--2 .services__card-text { left: 46px; width: 291px; }
  .services__roadmap-m .services__card--3 .services__card-text { left: 46px; width: 318px; }
  .services__roadmap-m .services__card--4 .services__card-text { left: 46px; width: 318px; }
  .services__roadmap-m .services__card--5 .services__card-text { left: 46px; width: 317px; }

  .services__roadmap-m .services__decor-code { top: 128px; left: 405px; width: 142px; height: 142px; }
}

/* ============ Канвас 320 (окно <480) ============ */

@media (max-width: 479px) {
  .services__intro-m { height: 600px; }
  .services__roadmap-m { height: 217px; }

  .services__program-anchor { top: 467px; left: 13px; }

  .services__intro-m .services__title { top: 20px; font-size: 36px; }
  .services__intro-m .services__subtitle { top: 83px; width: 301px; font-size: 14px; }
  /* line-height 16px (не 1.3*12=15.6): Тильда на проде рендерит эти 12px-тексты
     с целочисленным интерлиньяжем 16px — иначе строки уезжают вверх до 2px. */
  .services__intro-m .services__duration { top: 150px; left: 13px; width: 259px; font-size: 12px; line-height: 16px; }

  .services__intro-m .services__audience-card { top: 218px; width: 300px; height: 325px; border-radius: 20px; }
  .services__intro-m .services__audience-title { top: 242px; left: 100px; font-size: 30px; }
  .services__intro-m .services__audience-arrow { top: 252px; left: 29px; width: 70px; }
  .services__intro-m .services__audience-heading--dev { top: 311px; left: 90px; width: 150px; font-size: 14px; }
  .services__intro-m .services__audience-heading--it  { top: 431px; left: 90px; width: 159px; font-size: 14px; }
  .services__intro-m .services__audience-text--dev { top: 357px; left: 90px; width: 182px; font-size: 12px; line-height: 16px; }
  .services__intro-m .services__audience-text--it  { top: 473px; left: 90px; width: 182px; font-size: 12px; line-height: 16px; }
  .services__intro-m .services__numeral,
  .services__intro-m .services__slash { font-size: 55px; }
  .services__intro-m .services__numeral--1 { top: 300px; left: 37px; }
  .services__intro-m .services__numeral--2 { top: 415px; left: 18px; }
  .services__intro-m .services__slash--1   { top: 300px; left: 277px; }
  .services__intro-m .services__slash--2   { top: 418px; left: 277px; }

  .services__roadmap-arrow { top: 559px; left: 222px; width: 88px; transform: rotate(349deg); }

  .services__roadmap-m .services__track { height: 178px; }
  .services__roadmap-m .services__cards { width: 1601px; }
  .services__roadmap-m .services__card { width: 300px; height: 158px; top: 0; }
  .services__roadmap-m .services__card--1 { left: 10px; }
  .services__roadmap-m .services__card--2 { left: 331px; }
  .services__roadmap-m .services__card--3 { left: 654px; }
  .services__roadmap-m .services__card--4 { left: 978px; }
  .services__roadmap-m .services__card--5 { left: 1301px; }

  .services__roadmap-m .services__card .services__card-outline { width: 300px; }

  .services__roadmap-m .services__card-badge { left: 244px; width: 56px; height: 49px; border-radius: 14px; }

  .services__roadmap-m .services__card-num { font-size: 22px; white-space: normal; }
  .services__roadmap-m .services__card--1 .services__card-num { top: 10px; left: 266px; white-space: nowrap; }
  .services__roadmap-m .services__card--2 .services__card-num { top: 10px; left: 258px; width: 27px; }
  .services__roadmap-m .services__card--3 .services__card-num { top: 10px; left: 258px; width: 27px; }
  .services__roadmap-m .services__card--4 .services__card-num { top: 11px; left: 257px; width: 28px; }
  .services__roadmap-m .services__card--5 .services__card-num { top: 11px; left: 259px; width: 26px; }

  .services__roadmap-m .services__card-text { top: 35px; font-size: 13px; line-height: 1.25; }
  .services__roadmap-m .services__card--1 .services__card-text { left: 30px; width: 191px; }
  .services__roadmap-m .services__card--2 .services__card-text { left: 31px; width: 191px; }
  .services__roadmap-m .services__card--3 .services__card-text { left: 30px; width: 220px; }
  .services__roadmap-m .services__card--4 .services__card-text { left: 30px; width: 206px; }
  .services__roadmap-m .services__card--5 .services__card-text { left: 31px; width: 190px; }

  .services__roadmap-m .services__decor-code { top: 88px; left: 270px; width: 92px; height: 93px; }
}

/* ===== Секция: Бонусы (perks) ===== */

.perks {
  height: 330px;
  background-color: var(--bg-light);
}

.perks__card {
  position: absolute;
  top: 27px;
  width: 360px;
  height: 270px;
  border-radius: 30px;
  background-color: var(--card);
  box-shadow: 0 0 24px 0 rgba(28, 24, 94, 0.1);
}

.perks__card--time { left: 20px; }
.perks__card--chat { left: 420px; }
.perks__card--content { left: 820px; }

.perks__icon {
  position: absolute;
  top: 50px;
  left: 30px;
  height: auto;
}

.perks__card--time .perks__icon { width: 50px; }
.perks__card--chat .perks__icon,
.perks__card--content .perks__icon { width: 57px; }

.perks__text {
  position: absolute;
  top: 122px;
  left: 30px;
  margin: 0;
  color: #161821;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.perks__card--time .perks__text { width: 296px; }
.perks__card--chat .perks__text { width: 295px; }
.perks__card--content .perks__text { width: 295px; }

@media (max-width: 1199px) {
  .perks { height: 300px; }

  .perks__card {
    top: 30px;
    width: 295px;
    height: 240px;
  }

  .perks__card--time { left: 20px; }
  .perks__card--chat { left: 332px; }
  .perks__card--content { left: 645px; }

  .perks__icon {
    top: 40px;
    left: 25px;
  }

  .perks__card--time .perks__icon { width: 45px; }
  .perks__card--chat .perks__icon,
  .perks__card--content .perks__icon { width: 49px; }

  .perks__text {
    left: 25px;
    font-size: 15px;
  }

  .perks__card--time .perks__text { top: 103px; width: 249px; }
  .perks__card--chat .perks__text { top: 101px; width: 251px; }
  .perks__card--content .perks__text { top: 101px; width: 244px; }
}

@media (max-width: 959px) {
  .perks { height: 680px; }

  .perks__card--time {
    top: 30px;
    left: 10px;
    width: 623px;
    height: 190px;
  }

  .perks__card--chat {
    top: 240px;
    left: 10px;
    width: 622px;
    height: 190px;
  }

  .perks__card--content {
    top: 450px;
    left: 10px;
    width: 620px;
    height: 200px;
  }

  /* top = начало первой строки: на проде текст центрирован в боксе
     фиксированной высоты (vertical-align:middle), поэтому top здесь
     чуть ниже верха бокса; значения замерены на проде */
  .perks__card--time .perks__text { top: 103.5px; width: 437px; }
  .perks__card--chat .perks__text { top: 101.4px; width: 437px; }
  .perks__card--content .perks__text { top: 101.65px; width: 456px; }
}

@media (max-width: 639px) {
  .perks { height: 689px; }

  .perks__card { border-radius: 24px; }

  .perks__card--time {
    top: 29px;
    width: 460px;
  }

  .perks__card--chat {
    top: 239px;
    width: 460px;
    height: 200px;
  }

  .perks__card--content {
    top: 459px;
    width: 460px;
  }

  .perks__card--time .perks__text { width: 400px; }
  .perks__card--chat .perks__text { top: 101.65px; width: 400px; }
  .perks__card--content .perks__text { width: 400px; }
}

@media (max-width: 479px) {
  .perks { height: 646px; }

  .perks__card { border-radius: 20px; }

  .perks__card--time {
    top: 25px;
    width: 300px;
    height: 170px;
  }

  .perks__card--chat {
    top: 213px;
    width: 300px;
    height: 184px;
  }

  .perks__card--content {
    top: 415px;
    width: 300px;
    height: 206px;
  }

  .perks__icon {
    top: 22px;
    left: 20px;
  }

  .perks__text { left: 20px; }

  .perks__card--time .perks__text { top: 91.5px; width: 254px; }
  .perks__card--chat .perks__text { top: 79.9px; width: 260px; }
  .perks__card--content .perks__text { top: 99.65px; width: 260px; }
}

/* ===== Секция: Стоимость ===== */

.pricing {
  position: relative;
  height: 530px;
  background-color: var(--bg-light);
}

.pricing__title {
  position: absolute;
  top: 50px;
  left: 20px;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-text);
  font-size: 60px;
  line-height: 1.55;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing__card {
  position: absolute;
  background-color: var(--card);
  border: 2px solid var(--accent);
  border-radius: 24px;
}

.pricing__card--novice {
  top: 153px;
  left: 20px;
  width: 570px;
  height: 250px;
}

.pricing__card--expert {
  top: 153px;
  left: 610px;
  width: 570px;
  height: 250px;
}

.pricing__card-title {
  position: absolute;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-text);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
}

.pricing__card-title--novice {
  top: 193px;
  left: 60px;
}

.pricing__card-title--expert {
  top: 193px;
  left: 650px;
}

.pricing__num {
  position: absolute;
  display: flex;
  align-items: center;
  color: var(--accent);
  font-family: var(--font-text);
  font-size: 34px;
  line-height: 1.3;
  font-weight: 500;
}

.pricing__num--novice {
  top: 238px;
  left: 60px;
  width: 40px;
  height: 46px;
}

.pricing__num--expert-1 {
  top: 259px;
  left: 651px;
  width: 40px;
  height: 46px;
}

.pricing__num--expert-2 {
  top: 319px;
  left: 650px;
  width: 40px;
  height: 46px;
}

.pricing__option {
  position: absolute;
  margin: 0;
  color: #161821;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
}

.pricing__option--novice {
  top: 242px;
  left: 106px;
  width: 370px;
}

.pricing__option--expert-1 {
  top: 263px;
  left: 697px;
  width: 370px;
}

.pricing__option--expert-2 {
  top: 323px;
  left: 696px;
  width: 370px;
}

.pricing__hint {
  position: absolute;
  top: 225px;
  left: 650px;
  width: 370px;
  margin: 0;
  color: #161821;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 400;
}

.pricing__note {
  position: absolute;
  top: 416px;
  left: 420px;
  width: 429px;
  margin: 0;
  color: #161821;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
}

.pricing__decor {
  position: absolute;
  top: 153px;
  left: 320px;
  width: 268px;
  height: auto;
  opacity: 0.15;
}

.pricing__cta {
  position: absolute;
  top: 452px;
  left: 420px;
  width: 360px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  background-color: var(--accent);
  border-radius: 40px;
}

.pricing__cta:hover {
  background-color: var(--accent-hover);
}

@media (max-width: 1199px) {
  .pricing { height: 546px; }
  .pricing__title { top: 37px; left: 10px; font-size: 58px; }
  .pricing__card--novice { top: 137px; left: 10px; width: 441px; height: 282px; }
  .pricing__card-title--novice { top: 182px; left: 50px; }
  .pricing__num--novice { top: 229px; left: 50px; width: 17px; height: 45px; }
  .pricing__option--novice { top: 231px; left: 85px; width: 279px; }
  .pricing__card--expert { top: 137px; left: 463px; width: 490px; height: 282px; }
  .pricing__card-title--expert {
    top: 182px;
    left: 503px;
    width: 391px;
    height: 50px;
    display: flex;
    align-items: center;
    line-height: 1.2;
    white-space: normal;
  }
  .pricing__hint { top: 242px; left: 503px; width: 399px; font-size: 14px; }
  .pricing__num--expert-1 { top: 274px; left: 508px; width: 17px; height: 45px; }
  .pricing__option--expert-1 { top: 279px; left: 543px; width: 279px; }
  .pricing__num--expert-2 { top: 331px; left: 503px; width: 28px; height: 45px; }
  .pricing__option--expert-2 { top: 336px; left: 547px; width: 370px; }
  .pricing__note { top: 437px; left: 283px; width: 399px; }
  .pricing__decor { top: 137px; left: 148px; width: 303px; }
  .pricing__cta { top: 470px; left: 283px; }
}

@media (max-width: 959px) {
  .pricing { height: 765px; }
  .pricing__card--novice { top: 142px; left: 9px; width: 620px; height: 190px; }
  .pricing__card-title--novice { top: 177px; left: 59px; font-size: 28px; }
  .pricing__num--novice { top: 241px; left: 59px; width: 17px; height: 44px; font-size: 30px; }
  .pricing__option--novice { top: 242px; left: 95px; width: 266px; }
  .pricing__card--expert { top: 346px; left: 10px; width: 620px; height: 290px; }
  .pricing__card-title--expert { top: 381px; left: 60px; width: 409px; height: 68px; font-size: 28px; }
  .pricing__hint { top: 459px; left: 60px; width: 385px; }
  .pricing__num--expert-1 { top: 489px; left: 60px; width: 17px; height: 44px; font-size: 30px; }
  .pricing__option--expert-1 { top: 490px; left: 97px; width: 266px; }
  .pricing__num--expert-2 { top: 549px; left: 60px; width: 28px; height: 44px; font-size: 30px; }
  .pricing__option--expert-2 { top: 550px; left: 102px; width: 382px; }
  .pricing__note { top: 650px; left: 150px; width: 385px; }
  .pricing__decor { top: 142px; left: 430px; width: 199px; transform: rotate(1deg); }
  .pricing__cta { top: 683px; left: 150px; }
}

@media (max-width: 639px) {
  .pricing { height: 691px; }
  .pricing__title { top: 20px; font-size: 44px; }
  .pricing__card--novice { top: 103px; left: 10px; width: 460px; height: 180px; border-radius: 20px; }
  .pricing__card-title--novice { top: 143px; left: 40px; font-size: 22px; }
  .pricing__num--novice { top: 196px; left: 40px; width: 17px; height: 46px; }
  .pricing__option--novice { top: 198px; left: 73px; width: 266px; }
  .pricing__card--expert { top: 296px; left: 10px; width: 460px; height: 275px; }
  .pricing__card-title--expert { top: 340px; left: 40px; width: 371px; height: 52px; font-size: 22px; }
  .pricing__hint { top: 403px; left: 40px; width: 398px; }
  .pricing__num--expert-1 { top: 436px; left: 40px; width: 17px; height: 46px; }
  .pricing__option--expert-1 { top: 438px; left: 73px; width: 266px; }
  .pricing__num--expert-2 { top: 492px; left: 40px; width: 28px; height: 46px; }
  .pricing__option--expert-2 { top: 496px; left: 84px; width: 363px; }
  .pricing__note { top: 579px; left: 49px; width: 398px; }
  .pricing__decor { top: 114px; left: 293px; width: 176px; }
  .pricing__cta { top: 613px; left: 62px; height: 50px; }
}

@media (max-width: 479px) {
  .pricing { height: 535px; }
  .pricing__title { top: 5px; left: 10px; font-size: 36px; }
  .pricing__card--novice { top: 73px; left: 10px; width: 302px; height: 130px; border-radius: 14px; }
  .pricing__card-title--novice { top: 101px; left: 35px; font-size: 16px; }
  .pricing__num--novice { top: 138px; left: 35px; width: auto; height: auto; font-size: 24px; white-space: nowrap; }
  .pricing__option--novice { top: 138px; left: 61px; width: 210px; font-size: 12px; }
  .pricing__card--expert { top: 211px; left: 10px; width: 302px; height: 219px; border-radius: 14px; }
  .pricing__card-title--expert { top: 236px; left: 35px; width: 250px; height: 38px; font-size: 16px; }
  .pricing__hint { top: 282px; left: 35px; width: auto; font-size: 12px; white-space: nowrap; }
  .pricing__num--expert-1 { top: 314px; left: 42px; width: auto; height: auto; font-size: 24px; white-space: nowrap; }
  .pricing__option--expert-1 { top: 313px; left: 70px; width: 210px; font-size: 12px; }
  .pricing__num--expert-2 { top: 354px; left: 38px; width: auto; height: auto; font-size: 24px; white-space: nowrap; }
  .pricing__option--expert-2 { top: 362px; left: 70px; width: 206px; font-size: 12px; }
  .pricing__note { top: 442px; left: 10px; width: auto; font-size: 11px; white-space: nowrap; }
  .pricing__decor { top: 73px; left: 177px; width: 133px; opacity: 0.1; }
  .pricing__cta { top: 465px; left: 10px; width: 300px; height: 48px; font-size: 13px; }
}

/* ===== Секция: Карьерные консультации / мок-собеседование ===== */

.consult {
  position: relative;
  height: 590px;
  background-color: var(--bg-light);
}

/* Карточка-подложка */
.consult__card {
  position: absolute;
  z-index: 3;
  top: 25px;
  left: 20px;
  width: 1160px;
  height: 540px;
  border-radius: 30px;
  background-color: var(--card);
  box-shadow: 0px 0px 24px 0px rgba(28, 24, 94, 0.1);
}

/* Заголовки услуг */
.consult__title {
  position: absolute;
  margin: 0;
  color: #161821;
  font-family: var(--font-text);
  font-size: 30px;
  line-height: 1.35;
  font-weight: 600;
  text-transform: uppercase;
}

.consult__title--mock {
  z-index: 7;
  top: 64px;
  left: 50px;
  width: 460px;
  height: 82px;
}

.consult__title--hour {
  z-index: 12;
  top: 328px;
  left: 50px;
  width: 460px;
  height: 82px;
}

/* Описания услуг */
.consult__text {
  position: absolute;
  margin: 0;
  color: #0d0d10;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 300;
}

.consult__text--mock {
  z-index: 6;
  top: 67px;
  left: 581px;
  width: 598px;
}

.consult__text--hour {
  z-index: 10;
  top: 328px;
  left: 580px;
  width: 597px;
}

/* Стоимость */
.consult__price {
  position: absolute;
  margin: 0;
  color: #161821;
  font-family: var(--font-text);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  text-transform: uppercase;
}

.consult__price--mock {
  z-index: 5;
  top: 240px;
  left: 50px;
  width: 460px;
  height: 27px;
}

.consult__price--hour {
  z-index: 11;
  top: 490px;
  left: 50px;
  width: 460px;
  height: 27px;
}

/* Примечание о зачёте мока (решение владельца 12.06.2026) */
.consult__note {
  position: absolute;
  margin: 0;
  color: #0d0d10;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 300;
}

.consult__note--mock {
  z-index: 5;
  top: 271px;
  left: 50px;
  width: 460px;
}

/* Разделительная линия */
.consult__divider {
  position: absolute;
  z-index: 8;
  top: 297px;
  left: 50px;
  width: 1100px;
  height: 1px;
  border-radius: 50px;
  background-color: var(--bg-light);
}

/* Фото-плашка */
.consult__photo {
  position: absolute;
  z-index: 13;
  top: 398px;
  left: 581px;
  width: 570px;
  height: 120px;
  border-radius: 18px;
  background-color: #719ed1;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 1199px) {
  .consult__card {
    left: 10px;
    width: 940px;
  }

  .consult__title {
    font-size: 24px;
  }

  .consult__title--mock {
    left: 40px;
    width: 373px;
    height: 64px;
  }

  .consult__title--hour {
    left: 40px;
    width: 375px;
    height: 64px;
  }

  .consult__text {
    font-size: 14px;
  }

  .consult__text--mock {
    left: 471px;
    width: 453px;
  }

  .consult__text--hour {
    left: 470px;
    width: 455px;
  }

  .consult__price--mock {
    left: 40px;
    width: 371px;
  }

  .consult__price--hour {
    left: 40px;
    width: 460px;
  }

  .consult__note--mock {
    top: 270px;
    left: 40px;
    width: 430px;
    font-size: 11.5px;
  }

  .consult__divider {
    left: 40px;
    width: 880px;
  }

  .consult__photo {
    left: 471px;
    width: 450px;
  }
}

@media (max-width: 959px) {
  .consult {
    height: 790px;
  }

  .consult__card {
    width: 620px;
    height: 740px;
  }

  .consult__title--mock {
    top: 65px;
  }

  .consult__title--hour {
    top: 428px;
  }

  .consult__text--mock {
    top: 149px;
    left: 40px;
    width: 541px;
  }

  .consult__text--hour {
    top: 512px;
    left: 40px;
  }

  .consult__price--mock {
    top: 349px;
  }

  .consult__price--hour {
    top: 568px;
  }

  .consult__note--mock {
    top: 379px;
    width: 541px;
    font-size: 12px;
  }

  .consult__divider {
    top: 401px;
    width: 560px;
  }

  .consult__photo {
    top: 615px;
    left: 40px;
    width: 560px;
  }
}

@media (max-width: 639px) {
  .consult {
    height: 837.99px;
  }

  .consult__card {
    top: 24px;
    width: 460px;
    height: 790px;
    border-radius: 20px;
  }

  .consult__title--mock {
    top: 54px;
  }

  .consult__title--hour {
    top: 466px;
  }

  .consult__text--mock {
    top: 136px;
    width: 398px;
  }

  .consult__text--hour {
    top: 548px;
    width: 373px;
  }

  .consult__price--mock {
    top: 388px;
  }

  .consult__price--hour {
    top: 620px;
    width: 372px;
  }

  .consult__note--mock {
    top: 419px;
    width: 398px;
    font-size: 11px;
  }

  .consult__divider {
    top: 460px;
    width: 400px;
  }

  .consult__photo {
    top: 664px;
    width: 400px;
  }
}

@media (max-width: 479px) {
  /* Нота о зачёте мока не влезает в исходный зазор 20px —
     блок «Часовая консультация» сдвинут вниз на 20px целиком */
  .consult {
    height: 794.99px;
  }

  .consult__card {
    top: 20px;
    left: 0;
    width: 319px;
    height: 755px;
  }

  .consult__title {
    font-size: 19px;
  }

  .consult__title--mock {
    top: 50px;
    left: 10px;
    width: 300px;
    height: auto;
  }

  .consult__title--hour {
    top: 455px;
    left: 10px;
    width: 298px;
    height: 52px;
  }

  .consult__text {
    font-size: 13px;
  }

  .consult__text--mock {
    top: 116px;
    left: 10px;
    width: 301px;
  }

  .consult__text--hour {
    top: 521px;
    left: 10px;
    width: 298px;
  }

  .consult__price {
    font-size: 19px;
    white-space: nowrap;
  }

  .consult__price--mock {
    top: 368px;
    left: 10px;
    width: auto;
    height: auto;
  }

  .consult__price--hour {
    top: 586px;
    left: 10px;
    width: auto;
    height: auto;
  }

  .consult__note--mock {
    top: 396px;
    left: 10px;
    width: 300px;
    font-size: 11px;
  }

  .consult__divider {
    top: 434px;
    left: 10px;
    width: 300px;
  }

  .consult__photo {
    top: 632px;
    left: 10px;
    width: 300px;
  }
}

/* ===== Секция: Отзывы (Офферы моих учеников) ===== */

.reviews {
  position: relative;
  background-color: var(--bg-light);
}

/* Высота ленты живёт на канвасе: ниже добавлен потоковый текстовый список
   офферов, поэтому секция тянется по контенту. */
.reviews__canvas {
  height: 450px; /* 420px из спека + 30px под строку проверяемости ников */
}

.reviews__title {
  position: absolute;
  top: 50px;
  left: 20px;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-text);
  font-size: 60px;
  font-weight: 600;
  line-height: 1.55;
  text-transform: uppercase;
  white-space: nowrap;
}

.reviews__subtitle {
  position: absolute;
  top: 159px;
  left: 20px;
  width: 560px;
  height: 41px;
  margin: 0;
  color: #161821;
  font-family: var(--font-text);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
}

.reviews__btn {
  position: absolute;
  top: 164px;
  left: 983px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 198px;
  height: 43px;
  border-radius: 30px;
  color: #161821;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  text-align: right;
  text-decoration: none;
}

.reviews__btn:hover {
  color: var(--accent);
}

/* Лента офферов: в спеке группа top:238px, height:140px; контейнер поднят на 24px
   и получил вертикальный padding 24px, чтобы overflow не резал тень карточек. */
.reviews__track {
  position: absolute;
  top: 214px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  column-gap: 40px;
  padding: 24px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.reviews__track::-webkit-scrollbar {
  display: none;
}

.reviews__card {
  flex: 0 0 auto;
  display: block;
  width: 260px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0px 0px 24px 0px rgba(28, 24, 94, 0.1);
}

/* Строка проверяемости под лентой (правка владельца, 11.06.2026) */
.reviews__proof {
  position: absolute;
  top: 400px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 20px;
  color: rgba(22, 24, 33, 0.75);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 1199px) {
  .reviews__canvas {
    height: 395px;
  }

  .reviews__title {
    top: 15px;
    left: 10px;
  }

  .reviews__subtitle {
    top: 127px;
    left: 10px;
    height: 38px;
    font-size: 28px;
  }

  .reviews__btn {
    top: 124px;
    left: 752px;
  }

  .reviews__track {
    top: 164px; /* 188px из спека - 24px */
    column-gap: 30px;
  }

  .reviews__proof {
    top: 356px;
  }
}

@media (max-width: 959px) {
  .reviews__canvas {
    height: 405px;
  }

  .reviews__title {
    top: 10px;
  }

  .reviews__subtitle {
    top: 106px;
    height: 32px;
    font-size: 24px;
  }

  .reviews__btn {
    top: 150px;
    left: 12px;
    justify-content: flex-start;
    text-align: left;
  }

  .reviews__track {
    top: 174px; /* 198px из спека - 24px */
    column-gap: 20px;
  }

  .reviews__proof {
    top: 366px;
  }
}

@media (max-width: 639px) {
  .reviews__canvas {
    height: 385px;
  }

  .reviews__title {
    top: -10px;
  }

  .reviews__subtitle {
    top: 79px;
    width: 446px;
  }

  .reviews__btn {
    top: 126px;
  }

  .reviews__track {
    top: 163px; /* 187px из спека - 24px */
  }

  .reviews__proof {
    top: 355px;
    font-size: 13px;
  }
}

@media (max-width: 479px) {
  .reviews__canvas {
    height: 365px;
  }

  .reviews__title {
    top: 0px;
    left: 10px;
    font-size: 40px;
  }

  .reviews__subtitle {
    top: 67px;
    left: 10px;
    width: 300px;
    height: 52px;
    font-size: 19px;
  }

  .reviews__btn {
    top: 131px;
    left: 10px;
    height: 38px;
  }

  .reviews__track {
    column-gap: 15px;
  }

  .reviews__card {
    width: 200px;
  }

  .reviews__proof {
    top: 318px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* ===== Текстовый список офферов под лентой (ai-seo §4.5): пруфы извлекаемым
   текстом, суммы — с самих креативов ленты. ===== */
.reviews__offers {
  height: auto;
  padding: 16px 20px 44px;
}

.reviews__offers-title {
  margin: 0 0 14px;
  color: #161821;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}

.reviews__offers-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 40px;
  color: rgba(22, 24, 33, 0.85);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 300;
  line-height: 2;
}

@media (max-width: 639px) {
  .reviews__offers {
    padding: 12px 10px 36px;
  }

  .reviews__offers-list {
    columns: 1;
  }
}

/* ===== Секция: CTA «Связаться» ===== */

.cta-contact {
  height: 130px;
  background-color: var(--bg-light);
}

.cta-contact__button {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 420px;
  width: 360px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  text-align: center;
  border-radius: 40px 40px 40px 40px;
  background-color: var(--accent);
}

.cta-contact__button:hover {
  background-color: var(--accent-hover);
}

@media (max-width: 1199px) {
  .cta-contact { height: 100px; }

  .cta-contact__button {
    top: 15px;
    left: 300px;
  }
}

@media (max-width: 959px) {
  .cta-contact__button { left: 140px; }
}

@media (max-width: 639px) {
  .cta-contact { height: 80px; }

  .cta-contact__button {
    top: 5px;
    left: 60px;
    height: 50px;
  }
}

@media (max-width: 479px) {
  .cta-contact { height: 70px; }

  .cta-contact__button {
    top: 5px;
    left: 10px;
    width: 300px;
  }
}

/* ===== Секция: Q&A — Ответы на вопросы ===== */

/* t1119-аккордеон. На проде это НЕ зеро-блок, но сторонний скрипт ANNEXX
   (ANX824 «зеро-адаптив», бенды 0-479/480-639/640-959/960-1199/1200+) вешает на
   #rec867149848 zoom = 0.99 × окно/канвас_бенда на ВСЕХ ширинах. Это зафиксировано
   в golden/prod-geometry.json на момент съёмки эталонов: 1.584@1920, 0.99@1200,
   1.01063@980, 0.99@640, 0.99@480, 1.11375@360 — и перепроверено живым замером.
   В сборке корень секции — .zoom-page (зум только >1200), поэтому ниже 1200 секция
   свёрстана обычным адаптивом, а прод-зум каждого бенда ЗАПЕЧЁН в статические px,
   выверенные на контрольных ширинах 980/640/480/360 (значение = тильдовское ×
   зум_прода на контрольной ширине). Между контрольными ширинами прод плавно
   подзумливается, мы — нет: принятый компромисс выбранной архитектуры.
   Границы медиа — как у живого t1119: колонки складываются при ≤960 (контейнер
   max-width 640), мелкие шрифты при ≤640, мобильный бенд при ≤479. */

.faq {
  background-color: var(--bg-light);
  padding: 30px 0;
}

/* Окно ≥1200 — канвас 1200, масштабирует .zoom-page (zoom = окно/1200, на 1200 = 1).
   Тильдовский контейнер 960 по центру; колонки 455.4 = 460 × 0.99 (прод-зум ANNEXX
   на 1200), боковые поля 135 ≈ 120 + 15 (внутренний сдвиг колонки) — сверено с
   эталоном: title x=134.7, list x=609.9, ширины 455.4. */
.faq__canvas {
  display: flex;
  align-items: flex-start;
  width: 1200px;
  margin: 0 auto;
  padding: 0 135px;
}

.faq__title {
  flex: 0 0 455px;
  width: 455px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.23;
}

.faq__list {
  flex: 0 0 455px;
  width: 455px;
  margin: 0 0 0 20px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #cfdbe3;
}

.faq__item {
  border-top: 1px solid #cfdbe3;
}

.faq__question {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 27px 50px 27px 0;
  border: none;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  /* На проде строка вопроса рендерится ровно 21px (сверено по кропам и высотам
     секции), хотя в экспорте line-height:1.35 — оставляем точное значение. */
  line-height: 21px;
}

.faq__question-text {
  display: inline-block;
}

.faq__icon {
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  stroke: var(--accent);
  fill: transparent;
}

.faq__icon-lines {
  transform-origin: center;
}

.faq__item--open .faq__icon-lines {
  transform: rotate(-45deg);
}

@media (hover: hover) {
  .faq__question:hover .faq__icon {
    stroke: #261ccd;
  }
}

.faq__question:focus-visible .faq__icon {
  stroke: #261ccd;
}

.faq__answer {
  display: none;
  padding-bottom: 40px;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
}

.faq__item--open .faq__answer {
  display: block;
}

.faq__answer ul {
  margin: 12px 0;
  padding-left: 20px;
  list-style: disc;
}

/* Окно >1200 (зумит .zoom-page): на проде медиазапросы t1119 видят реальную ширину
   окна, и сетка переключается на контейнер 1200 / колонки 555 (= 560 × 0.99).
   Повторяем — иначе на 1920 не совпадут ни ширины колонок, ни высота секции. */
@media (min-width: 1201px) {
  .faq__canvas {
    padding: 0 25px;
  }

  .faq__title {
    flex-basis: 555px;
    width: 555px;
    font-size: 42px;
  }

  .faq__list {
    flex-basis: 555px;
    width: 555px;
    margin-left: 40px;
  }
}

/* Окно 961–1199 (контроль на 980, прод-зум 0.99 × 980/960 = 1.010625): две колонки,
   контейнер 960 × 1.010625 = 970.2 по центру. Эталонные rect-ы на 980: контейнер
   x=4.9 w=970.2, колонки x=15 и x=500.1, w=464.9; заголовок 38.4/47.24;
   высоты пунктов 99.2/77.4/99.2/77.4/121, секция 535.9. */
@media (max-width: 1199px) {
  .faq {
    padding: 30.32px 0;
  }

  .faq__canvas {
    width: 970.2px;
    max-width: 100%;
    padding: 0 10.11px;
  }

  .faq__title {
    flex-basis: 464.89px;
    width: 464.89px;
    font-size: 38.4px;
    line-height: 47.24px;
  }

  .faq__list {
    flex-basis: 464.89px;
    width: 464.89px;
    margin-left: 20.21px;
  }

  .faq__question {
    padding: 27.29px 50.53px 27.29px 0;
    font-size: 16.17px;
    line-height: 21.83px;
  }

  .faq__icon {
    width: 40.43px;
    height: 40.43px;
  }

  .faq__answer {
    padding-bottom: 40.43px;
    font-size: 12.13px;
  }

  .faq__answer ul {
    margin: 12.13px 0;
    padding-left: 20.21px;
  }
}

/* Окно ≤960 (прод складывает колонки: контейнер max-width 640; зум на нижней
   границе бенда 0.99): столбик, контейнер 633.6 = 640 × 0.99 по центру,
   боковые поля колонок 19.8 = 20 × 0.99, аккордеон на 44.55 = 45 × 0.99 ниже
   заголовка. Сверено с прод-rect-ами на 960: title 37.62/46.27 (h=46.3),
   пункты 97.2/75.8/75.8/75.8/97.2, секция 573. */
@media (max-width: 960px) {
  .faq {
    padding: 29.7px 0;
  }

  .faq__canvas {
    display: block;
    width: 633.6px;
    padding: 0 19.8px;
  }

  .faq__title {
    width: auto;
    font-size: 37.62px;
    line-height: 46.27px;
  }

  .faq__list {
    width: auto;
    margin: 44.55px 0 0;
  }

  .faq__question {
    padding: 26.73px 49.5px 26.73px 0;
    font-size: 15.84px;
    line-height: 21.38px;
  }

  .faq__icon {
    width: 39.6px;
    height: 39.6px;
  }

  .faq__answer {
    padding-bottom: 39.6px;
    font-size: 11.88px;
    line-height: 1.45;
  }

  .faq__answer ul {
    margin: 11.88px 0;
    padding-left: 19.8px;
  }
}

/* Окно ≤640 (контроль на 640 и 480, прод-зум там ровно 0.99): мелкий заголовок
   29.7 = 30 × 0.99, паддинги вопроса 14.85/13.86 = 15/14 × 0.99. Эталонные rect-ы:
   на 640 — контейнер x=3.2 w=633.6, title x=23 h=36.5, пункты 72.5/51.1, секция 439.6;
   на 480 — контейнер во всю ширину, title x=19.8 w=440.4, пункты 72.5/51.1/72.5/51.1/93.8,
   секция 482.3. */
@media (max-width: 640px) {
  .faq__title {
    font-size: 29.7px;
    line-height: 36.53px;
  }

  .faq__question {
    padding-top: 14.85px;
    padding-bottom: 13.86px;
  }

  .faq__answer {
    padding-bottom: 24.75px;
  }
}

/* Окно ≤479 (контроль на 360, прод-зум 0.99 × 360/320 = 1.11375): все размеры
   тильдовского 320-бенда × 1.11375. Эталонные rect-ы на 360: контейнер во всю
   ширину, поля 22.3, title 33.4/41.1 (h=82.2), пункты 129.5/81.4/81.4/81.4/153.5,
   секция 727.3. */
@media (max-width: 479px) {
  .faq {
    padding: 33.41px 0;
  }

  .faq__canvas {
    width: auto;
    padding: 0 22.28px;
  }

  .faq__title {
    font-size: 33.41px;
    line-height: 41.1px;
  }

  .faq__list {
    margin-top: 50.12px;
  }

  .faq__question {
    padding: 16.71px 55.69px 15.59px 0;
    font-size: 17.82px;
    line-height: 24.06px;
  }

  .faq__icon {
    width: 44.55px;
    height: 44.55px;
  }

  .faq__answer {
    padding-bottom: 27.84px;
    font-size: 13.37px;
  }

  .faq__answer ul {
    margin: 13.37px 0;
    padding-left: 22.28px;
  }
}

/* ===== Строка свежести (ai-seo §4.7). flex-wrap обязателен: на десктопе
   канвас — flex из двух колонок, без переноса строка встала бы третьей. ===== */
.faq__canvas {
  flex-wrap: wrap;
}

.faq__updated {
  flex-basis: 100%;
  margin: 28px 0 0;
  color: rgba(22, 24, 33, 0.6);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
}

/* ===== Секция: CTA «Оставить заявку» ===== */

.cta-apply {
  height: 90px;
  background-color: var(--bg-light);
}

.cta-apply__button {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 420px;
  width: 360px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  text-align: center;
  border-radius: 40px 40px 40px 40px;
  background-color: var(--accent);
}

.cta-apply__button:hover {
  background-color: var(--accent-hover);
}

@media (max-width: 1199px) {
  .cta-apply { height: 80px; }

  .cta-apply__button {
    top: 15px;
    left: 300px;
  }
}

@media (max-width: 959px) {
  .cta-apply__button {
    top: 13px;
    left: 140px;
  }
}

@media (max-width: 639px) {
  .cta-apply { height: 59.99px; }

  .cta-apply__button {
    top: 5px;
    left: 60px;
    height: 50px;
  }
}

@media (max-width: 479px) {
  .cta-apply { height: 58.99px; }

  .cta-apply__button {
    top: 8px;
    left: 10px;
    width: 300px;
    height: 50px;
  }
}

/* ===== Секция: footer (контакты) ===== */
.footer {
  position: relative;
  box-sizing: content-box;
  height: 460px;
  padding-bottom: 15px;
  background-color: var(--bg-light);
}

/* Белые карточки-подложки */
.footer__card {
  position: absolute;
  background-color: var(--paper);
  border-radius: 30px;
  box-shadow: 0 0 30px 0 rgba(68, 64, 136, 0.1);
}
.footer__card--nav {
  top: 35px;
  left: 20px;
  width: 570px;
  height: 300px;
}
.footer__card--social {
  top: 34px;
  left: 610px;
  width: 570px;
  height: 300px;
}

/* Меню-навигация (flex-обёртка: 2 колонки до 639, 1 колонка ниже) */
.footer__nav {
  position: absolute;
  top: 85px;
  left: 80px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 95px;
  row-gap: 20px;
  align-items: flex-start;
  align-content: flex-start;
  width: 300px;
  height: 160px;
}
.footer__nav-link {
  display: flex;
  align-items: center;
  flex: none;
  height: 40px;
  color: #1c1c23;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  text-decoration: none;
}
.footer__nav-link:hover {
  color: var(--accent);
}
.footer__nav-link--about { width: 105px; }
.footer__nav-link--services { width: 80px; }
.footer__nav-link--program { width: 105px; }
.footer__nav-link--contacts { width: 100px; }
.footer__nav-link--reviews { width: 105px; }
.footer__nav-link--qa { width: 80px; }

/* YouTube / Telegram */
.footer__social {
  position: absolute;
  top: 85px;
  left: 670px;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  align-items: flex-start;
  width: 201px;
  height: 104px;
}
.footer__social-link {
  display: flex;
  align-items: center;
  flex: none;
  color: #1c1c23;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  text-decoration: none;
}
.footer__social-link:hover {
  color: var(--accent);
}
.footer__social-link--youtube {
  width: 200px;
  height: 41px;
}
.footer__social-link--telegram {
  width: 201px;
  height: 43px;
}
.footer__social-icon {
  position: relative;
  flex-shrink: 0;
}
.footer__social-icon--youtube {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}
.footer__social-icon--telegram {
  width: 16px;
  height: 16px;
  margin-right: 14px;
}
.footer__social-icon::before,
.footer__social-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.footer__social-icon::after {
  opacity: 0;
}
.footer__social-icon--youtube::before {
  background-image: url("../img/footer-youtube.png");
}
.footer__social-icon--youtube::after {
  background-image: url("../img/footer-youtube-hover.png");
}
.footer__social-icon--telegram::before {
  background-image: url("../img/footer-telegram.png");
}
.footer__social-icon--telegram::after {
  background-image: url("../img/footer-telegram-hover.png");
}
@media (min-width: 1200px) {
  .footer__social-link:hover .footer__social-icon::before {
    opacity: 0;
  }
  .footer__social-link:hover .footer__social-icon::after {
    opacity: 1;
  }
}

/* Реквизиты */
.footer__requisites {
  position: absolute;
  top: 247px;
  left: 670px;
  margin: 0;
  color: #161821;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 300;
  white-space: nowrap;
}

/* Юридические ссылки */
.footer__legal {
  position: absolute;
  color: #161821;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 300;
  white-space: nowrap;
  text-decoration: none;
}
.footer__legal--agreement {
  top: 427px;
  left: 843px;
}
.footer__legal--offer {
  top: 365px;
  left: 1056px;
}
.footer__legal--privacy {
  top: 395px;
  left: 943px;
}

/* Копирайт */
.footer__copyright {
  position: absolute;
  top: 365px;
  left: 20px;
  width: 290px;
  margin: 0;
  color: #161821;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 300;
}

@media (max-width: 1199px) {
  .footer {
    height: 406px;
  }
  .footer__card--nav {
    top: 41px;
    left: 10px;
    width: 466px;
    height: 260px;
  }
  .footer__card--social {
    top: 40px;
    left: 484px;
    width: 466px;
    height: 260px;
  }
  .footer__nav {
    top: 91px;
    left: 70px;
    column-gap: 75px;
    width: 290px;
  }
  .footer__nav-link--contacts { width: 88px; }
  .footer__nav-link--qa { width: 70px; }
  .footer__social {
    top: 91px;
    left: 551px;
  }
  .footer__requisites {
    top: 225px;
    left: 551px;
  }
  .footer__legal--agreement {
    top: 366px;
    left: 613px;
  }
  .footer__legal--offer {
    top: 312px;
    left: 823px;
  }
  .footer__legal--privacy {
    top: 338px;
    left: 710px;
  }
}

@media (max-width: 959px) {
  .footer {
    height: 476px;
  }
  .footer__card--nav {
    top: 19px;
    width: 620px;
  }
  .footer__card--social {
    display: none;
  }
  .footer__nav {
    top: 69px;
    column-gap: 55px;
  }
  .footer__social {
    top: 69px;
    left: 390px;
  }
  .footer__requisites {
    top: 384px;
    left: 10px;
  }
  .footer__legal {
    font-size: 14px;
  }
  .footer__legal--agreement {
    top: 324px;
    left: 10px;
  }
  .footer__legal--offer {
    top: 353px;
    left: 10px;
  }
  .footer__legal--privacy {
    top: 294px;
    left: 10px;
  }
  .footer__copyright {
    top: 430px;
    left: 10px;
    font-size: 14px;
  }
}

@media (max-width: 639px) {
  .footer {
    height: 814px;
  }
  .footer__card--nav {
    top: 0;
    left: 10px;
    width: 460px;
    height: 607px;
  }
  .footer__nav {
    row-gap: 24px;
    width: 160px;
    height: 360px;
  }
  .footer__nav-link {
    font-size: 16px;
  }
  .footer__nav-link--program { width: 116px; }
  .footer__nav-link--contacts { width: 95px; }
  .footer__social {
    top: 473px;
    left: 70px;
    row-gap: 24px;
    height: 108px;
  }
  .footer__social-link {
    font-size: 16px;
  }
  .footer__requisites {
    top: 725px;
    left: 10px;
  }
  .footer__legal--agreement {
    top: 630px;
  }
  .footer__legal--offer {
    top: 660px;
  }
  .footer__legal--privacy {
    top: 694px;
    white-space: normal;
  }
  .footer__copyright {
    top: 776px;
  }
}

@media (max-width: 479px) {
  .footer {
    height: 852px;
  }
  .footer__card--nav {
    width: 300px;
    height: 592px;
    border-radius: 20px;
  }
  .footer__nav {
    top: 64px;
    left: 40px;
  }
  .footer__social {
    top: 468px;
    left: 40px;
  }
  .footer__requisites {
    top: 756px;
    font-size: 14px;
  }
  .footer__legal--agreement {
    top: 638px;
    width: 300px;
    height: 38px;
    text-align: left;
    white-space: normal;
    line-height: 1.3;
  }
  .footer__legal--offer {
    top: 676px;
    width: 300px;
    height: 38px;
    text-align: left;
    white-space: normal;
    line-height: 1.3;
  }
  .footer__legal--privacy {
    top: 721px;
    white-space: nowrap;
  }
  .footer__copyright {
    top: 807px;
    width: auto;
    white-space: nowrap;
    font-size: 14px;
  }
}

/* ===== Секция: Попап «Офферы моих учеников» ===== */

/* Попап целиком живёт внутри зум-обёртки страницы, поэтому контент верстается
   в канвасных координатах. «Хром» попапа (отступ карточки от краёв окна,
   крестик, подложка) на проде НЕ масштабируется — его размеры делятся на
   var(--zoom), чтобы в любом окне получались те же физические пиксели. */

.offers-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-popup);
  display: none;
}

.offers-popup--open { display: block; }

/* Затемнение + размытие страницы под попапом */
.offers-popup__bg {
  position: absolute;
  inset: 0;
  background-color: rgba(25, 24, 30, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Прокручиваемый слой; клик по нему (мимо карточки) закрывает попап */
.offers-popup__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  cursor: pointer;
}

/* Высота канваса на базе — по нижней кромке карточки (4135), а не артборда
   (4120): на проде прокрутка попапа заканчивается в 65px после карточки. */
.offers-popup__canvas {
  height: 4135px;
  margin: calc(65px / var(--zoom, 1)) auto;
  cursor: default;
}

.offers-popup__close {
  position: absolute;
  top: calc(20px / var(--zoom, 1));
  right: calc(20px / var(--zoom, 1));
  width: calc(23px / var(--zoom, 1));
  height: calc(23px / var(--zoom, 1));
  color: var(--accent);
}

.offers-popup__close:hover { opacity: 0.7; }

.offers-popup__close-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* Светлая скруглённая карточка-подложка контента */
.offers-popup__card {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 4135px;
  border-radius: 50px;
  background-color: var(--bg-light);
}

.offers-popup__title { margin: 0; }

.offers-popup__title-main,
.offers-popup__title-sub {
  position: absolute;
  color: var(--accent);
  font-family: var(--font-text);
  font-weight: 600;
  line-height: 1.55;
  text-transform: uppercase;
  white-space: nowrap;
}

.offers-popup__title-main {
  top: 60px;
  left: 414px;
  font-size: 60px;
}

.offers-popup__title-sub {
  top: 132px;
  left: 395px;
  font-size: 36px;
}

/* Строка проверяемости ников под заголовком (правка владельца, 11.06.2026) */
.offers-popup__proof {
  position: absolute;
  top: 196px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 24px;
  color: rgba(22, 24, 33, 0.75);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}

/* Скриншоты офферов */
.offers-popup__shot {
  position: absolute;
  height: auto;
  border-radius: 16px;
}

/* Кнопки с telegram-никами учеников */
.offers-popup__tg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--bg-page);
  box-shadow: 0px 0px 24px -4px rgba(18, 11, 143, 0.1);
  color: var(--accent);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}

.offers-popup__tg:hover {
  background-color: var(--accent);
  color: var(--bg-page);
}

/* Геометрия базового канваса 1200 */
.offers-popup__shot--sber    { top: 1606px; left: 701px; width: 420px; }
.offers-popup__shot--yandex  { top: 3070px; left: 700px; width: 483px; }
.offers-popup__shot--betboom { top: 3338px; left: 80px;  width: 445px; }
.offers-popup__shot--t-bank  { top: 893px;  left: 131px; width: 350px; }
.offers-popup__shot--gazprom { top: 1895px; left: 80px;  width: 550px; }
.offers-popup__shot--sense   { top: 2496px; left: 180px; width: 340px; }
.offers-popup__shot--beeline { top: 2116px; left: 720px; width: 300px; }
.offers-popup__shot--ozon    { top: 1382px; left: 120px; width: 363px; }
.offers-popup__shot--avito   { top: 1080px; left: 787px; width: 362px; }
.offers-popup__shot--alfa    { top: 3533px; left: 720px; width: 337px; }
.offers-popup__shot--okko    { top: 487px;  left: 662px; width: 320px; }
.offers-popup__shot--wb      { top: 234px;  left: 80px;  width: 440px; }

.offers-popup__tg--yandex  { top: 3292px; left: 664px; }
.offers-popup__tg--betboom { top: 3463px; left: 360px; }
.offers-popup__tg--t-bank  { top: 1064px; left: 71px; }
.offers-popup__tg--gazprom { top: 2153px; left: 441px; }
.offers-popup__tg--ozon    { top: 1537px; left: 301px; }
.offers-popup__tg--sber    { top: 1811px; left: 660px; }
.offers-popup__tg--avito   { top: 1391px; left: 720px; }
.offers-popup__tg--sense   { top: 2919px; left: 412px; }
.offers-popup__tg--beeline { top: 2426px; left: 900px; }
.offers-popup__tg--alfa    { top: 3904px; left: 963px; }
.offers-popup__tg--okko    { top: 632px;  left: 901px; }

@media (max-width: 1199px) {
  .offers-popup__canvas { height: 4120px; }

  .offers-popup__card {
    width: 961px;
    height: 4120px;
  }

  .offers-popup__title-main { left: 294px; }

  .offers-popup__title-sub {
    top: 137px;
    left: 275px;
  }

  .offers-popup__proof {
    top: 198px;
    font-size: 13px;
  }

  .offers-popup__shot--sber    { top: 1575px; left: 473px; }
  .offers-popup__shot--yandex  { top: 3040px; left: 456px; }
  .offers-popup__shot--betboom { top: 3358px; left: 40px; }
  .offers-popup__shot--t-bank  { top: 822px;  left: 140px; }
  .offers-popup__shot--gazprom { top: 1912px; left: 70px; }
  .offers-popup__shot--sense   { top: 2562px; left: 70px; }
  .offers-popup__shot--beeline { top: 2265px; left: 490px; }
  .offers-popup__shot--ozon    { top: 1332px; left: 90px; }
  .offers-popup__shot--avito   { top: 1025px; left: 588px; }
  .offers-popup__shot--alfa    { top: 3552px; left: 550px; }
  .offers-popup__shot--okko    { top: 463px;  left: 570px; }
  .offers-popup__shot--wb      { top: 233px;  left: 30px; }

  .offers-popup__tg--yandex  { top: 3262px; left: 420px; }
  .offers-popup__tg--betboom { top: 3483px; left: 320px; }
  .offers-popup__tg--t-bank  { top: 977px;  left: 90px; }
  .offers-popup__tg--gazprom { top: 2169px; left: 430px; }
  .offers-popup__tg--ozon    { top: 1487px; left: 271px; }
  .offers-popup__tg--sber    { top: 1785px; left: 406px; }
  .offers-popup__tg--avito   { top: 1336px; left: 521px; }
  .offers-popup__tg--sense   { top: 2985px; left: 210px; }
  .offers-popup__tg--beeline { top: 2577px; left: 670px; }
  .offers-popup__tg--alfa    { top: 3925px; left: 720px; }
  .offers-popup__tg--okko    { top: 839px;  left: 730px; }
}

@media (max-width: 959px) {
  .offers-popup__canvas { height: 4800px; }

  .offers-popup__card {
    width: 640px;
    height: 4800px;
    border-radius: 40px;
  }

  .offers-popup__title-main { left: 134px; }

  .offers-popup__title-sub { left: 115px; }

  .offers-popup__proof { top: 196px; }

  .offers-popup__shot--sber    { top: 1946px; left: 210px; }
  .offers-popup__shot--yandex  { top: 3652px; left: 137px; }
  .offers-popup__shot--betboom { top: 3972px; left: 40px; }
  .offers-popup__shot--t-bank  { top: 1041px; left: 90px; }
  .offers-popup__shot--gazprom { top: 2243px; left: 10px;  width: 540px; }
  .offers-popup__shot--sense   { top: 3108px; left: 50px;  width: 330px; }
  .offers-popup__shot--beeline { top: 2610px; left: 240px; width: 320px; }
  .offers-popup__shot--ozon    { top: 1692px; left: 70px; }
  .offers-popup__shot--avito   { top: 1276px; left: 215px; }
  .offers-popup__shot--alfa    { top: 4248px; left: 220px; width: 320px; }
  .offers-popup__shot--okko    { top: 500px;  left: 193px; width: 360px; }
  .offers-popup__shot--wb      { top: 232px;  left: 70px;  width: 400px; }

  .offers-popup__tg--yandex  { top: 3876px; left: 100px; }
  .offers-popup__tg--betboom { top: 4092px; left: 320px; }
  .offers-popup__tg--t-bank  { top: 1191px; left: 40px; }
  .offers-popup__tg--gazprom { top: 2523px; left: 250px; }
  .offers-popup__tg--ozon    { top: 1846px; left: 310px; }
  .offers-popup__tg--sber    { top: 2154px; left: 145px; }
  .offers-popup__tg--avito   { top: 1587px; left: 148px; }
  .offers-popup__tg--sense   { top: 3531px; left: 190px; }
  .offers-popup__tg--beeline { top: 2947px; left: 410px; }
  .offers-popup__tg--alfa    { top: 4610px; left: 400px; }
  .offers-popup__tg--okko    { top: 926px;  left: 384px; }
}

@media (max-width: 639px) {
  .offers-popup__canvas { height: 4690px; }

  .offers-popup__card {
    width: 481px;
    height: 4690px;
    border-radius: 24px;
  }

  .offers-popup__title-main {
    left: 85px;
    font-size: 50px;
  }

  .offers-popup__title-sub {
    top: 131px;
    left: 69px;
    font-size: 30px;
  }

  .offers-popup__proof {
    top: 186px;
    font-size: 12px;
  }

  .offers-popup__shot--sber    { top: 1960px; left: 53px; }
  .offers-popup__shot--yandex  { top: 3592px; left: 70px; width: 400px; }
  .offers-popup__shot--betboom { top: 3878px; left: 10px; width: 420px; }
  .offers-popup__shot--t-bank  { top: 1037px; left: 120px; }
  .offers-popup__shot--gazprom { top: 2251px; left: 30px; width: 440px; }
  .offers-popup__shot--sense   { top: 3052px; left: 10px; }
  .offers-popup__shot--beeline { top: 2560px; left: 120px; }
  .offers-popup__shot--ozon    { top: 1710px; left: 30px; }
  .offers-popup__shot--avito   { top: 1284px; left: 63px; }
  .offers-popup__shot--alfa    { top: 4168px; left: 59px; }
  .offers-popup__shot--okko    { left: 40px; }
  .offers-popup__shot--wb      { left: 40px; }

  .offers-popup__tg--yandex  { top: 3791px; left: 119px; }
  .offers-popup__tg--betboom { top: 4072px; left: 108px; }
  .offers-popup__tg--t-bank  { top: 1203px; left: 105px; }
  .offers-popup__tg--gazprom { top: 2472px; left: 220px; }
  .offers-popup__tg--ozon    { top: 1862px; left: 240px; }
  .offers-popup__tg--sber    { top: 2165px; left: 40px; }
  .offers-popup__tg--avito   { top: 1618px; left: 19px; }
  .offers-popup__tg--sense   { top: 3466px; left: 178px; }
  .offers-popup__tg--beeline { top: 2816px; left: 239px; }
  .offers-popup__tg--alfa    { top: 4524px; left: 229px; }
  .offers-popup__tg--okko    { top: 924px;  left: 250px; }
}

@media (max-width: 479px) {
  /* Контент ниже заголовка сдвинут на +30px относительно эталона —
     освобождает место под строку проверяемости ников (11.06.2026). */
  .offers-popup__canvas { height: 4110px; }

  .offers-popup__card {
    width: 319px;
    height: 4110px;
    border-radius: 20px;
  }

  .offers-popup__title-main {
    top: 37px;
    left: 67px;
    font-size: 30px;
  }

  .offers-popup__title-sub {
    top: 78px;
    left: 24px;
    font-size: 24px;
  }

  .offers-popup__proof {
    top: 122px;
    padding: 0 14px;
    font-size: 11px;
  }

  .offers-popup__shot--sber    { top: 1680px; left: 10px; width: 300px; }
  .offers-popup__shot--yandex  { top: 3154px; left: 10px; width: 300px; }
  .offers-popup__shot--betboom { top: 3393px; left: 10px; width: 300px; }
  .offers-popup__shot--t-bank  { top: 847px;  left: 10px; width: 300px; }
  .offers-popup__shot--gazprom { top: 1914px; left: 10px; width: 300px; }
  .offers-popup__shot--sense   { top: 2646px; left: 10px; width: 300px; }
  .offers-popup__shot--beeline { top: 2158px; left: 10px; width: 300px; }
  .offers-popup__shot--ozon    { top: 1439px; left: 10px; width: 300px; }
  .offers-popup__shot--avito   { top: 1070px; left: 10px; width: 300px; }
  .offers-popup__shot--alfa    { top: 3613px; left: 9px;  width: 300px; }
  .offers-popup__shot--okko    { top: 394px;  left: 10px; width: 300px; }
  .offers-popup__shot--wb      { top: 168px;  left: 10px; width: 300px; }

  .offers-popup__tg--yandex  { top: 3309px; left: 52px; }
  .offers-popup__tg--betboom { top: 3530px; left: 54px; }
  .offers-popup__tg--t-bank  { top: 998px;  left: 50px; }
  .offers-popup__tg--gazprom { top: 2075px; left: 51px; }
  .offers-popup__tg--ozon    { top: 1600px; left: 51px; }
  .offers-popup__tg--sber    { top: 1828px; left: 48px; }
  .offers-popup__tg--avito   { top: 1358px; left: 48px; }
  .offers-popup__tg--sense   { top: 3075px; left: 43px; }
  .offers-popup__tg--beeline { top: 2560px; left: 48px; }
  .offers-popup__tg--alfa    { top: 4015px; left: 47px; }
  .offers-popup__tg--okko    { top: 782px;  left: 50px; }
}

/* ===== Секция: cookie-bar ===== */

/* Не зеро-блок: живёт вне .page и не зумится — обычная адаптивная вёрстка.
   На ширинах >980px — плашка 800px у правого нижнего угла,
   на ≤980px — полоса во всю ширину, прижатая к низу. */

.cookie-bar {
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: var(--z-cookie);
  display: flex;
  align-items: flex-end;
  width: 800px;
  padding: 15px 25px;
  background-color: var(--paper);
  border-radius: 5px;
  box-shadow: 0px 15px 30px -10px rgba(0, 11, 48, 0.2);
}

.cookie-bar--hidden { display: none; }

.cookie-bar__text {
  padding-right: 10px;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  text-align: left;
}

.cookie-bar__text a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

.cookie-bar__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  height: 30px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: var(--accent);
  color: var(--paper);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

@media (hover: hover) {
  .cookie-bar__ok:hover,
  .cookie-bar__ok:focus-visible {
    color: #111111;
    border-color: #111111;
    background-color: #e8e8e8;
  }
}

@media screen and (max-width: 980px) {
  .cookie-bar {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    border-radius: 0;
  }
}

@media screen and (max-width: 640px) {
  .cookie-bar__text { line-height: 1.45; }
}

@media screen and (max-width: 480px), (orientation: landscape) and (max-height: 480px) {
  .cookie-bar__text { font-size: 14px; }
}

/* ===== Отступы якорей под фиксированную шапку (из эталона) ===== */

#about { scroll-margin-top: calc(140px / var(--zoom, 1)); }
#services { scroll-margin-top: calc(140px / var(--zoom, 1)); }
#reviews { scroll-margin-top: calc(140px / var(--zoom, 1)); }
#QampA { scroll-margin-top: calc(175px / var(--zoom, 1)); }
#contacts { scroll-margin-top: calc(140px / var(--zoom, 1)); }

@media (max-width: 1199px) {
#about { scroll-margin-top: calc(100px / var(--zoom, 1)); }
#services { scroll-margin-top: calc(100px / var(--zoom, 1)); }
#reviews { scroll-margin-top: calc(100px / var(--zoom, 1)); }
#QampA { scroll-margin-top: calc(135px / var(--zoom, 1)); }
#contacts { scroll-margin-top: calc(100px / var(--zoom, 1)); }
}

@media (max-width: 959px) {
#about { scroll-margin-top: calc(110px / var(--zoom, 1)); }
#services { scroll-margin-top: calc(110px / var(--zoom, 1)); }
#reviews { scroll-margin-top: calc(110px / var(--zoom, 1)); }
#QampA { scroll-margin-top: calc(145px / var(--zoom, 1)); }
#contacts { scroll-margin-top: calc(110px / var(--zoom, 1)); }
}

@media (max-width: 639px) {
#about { scroll-margin-top: calc(75px / var(--zoom, 1)); }
#services { scroll-margin-top: calc(75px / var(--zoom, 1)); }
#reviews { scroll-margin-top: calc(75px / var(--zoom, 1)); }
#QampA { scroll-margin-top: calc(110px / var(--zoom, 1)); }
#contacts { scroll-margin-top: calc(75px / var(--zoom, 1)); }
}

@media (max-width: 479px) {
#about { scroll-margin-top: calc(75px / var(--zoom, 1)); }
#services { scroll-margin-top: calc(75px / var(--zoom, 1)); }
#reviews { scroll-margin-top: calc(75px / var(--zoom, 1)); }
#QampA { scroll-margin-top: calc(110px / var(--zoom, 1)); }
#contacts { scroll-margin-top: calc(75px / var(--zoom, 1)); }
}

/* ===== Юридические страницы (privacy, agreement, offer*) =====
   Не pixel-perfect по ТЗ — аккуратная простая типографика в духе прода:
   белый фон, Unbounded, контент ~940px по центру. */

.legal-page {
  background: var(--paper);
}

.legal {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 30px 100px;
  font-size: 18px;
  line-height: 1.55;
}

.legal__breadcrumbs {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 100px;
}

.legal__breadcrumbs a:hover {
  color: var(--accent);
}

.legal__breadcrumbs-sep {
  margin: 0 8px;
  font-weight: 400;
}

.legal__doc h1 {
  font-size: 36px;
  line-height: 1.23;
  font-weight: 700;
  text-align: center;
  margin: 0 0 120px;
}

.legal__doc h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 0;
}

.legal__doc p {
  margin: 16px 0;
}

.legal__doc ol,
.legal__doc ul {
  margin: 16px 0;
  padding-left: 28px;
}

.legal__doc a {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 639px) {
  .legal { font-size: 16px; padding: 24px 20px 60px; }
  .legal__breadcrumbs { margin-bottom: 48px; }
  .legal__doc h1 { font-size: 26px; margin-bottom: 56px; }
  .legal__doc h2 { font-size: 16px; }
}