/* ============================================================
   Cosmo Partners — вёрстка лендинга
   Все размеры сверены с Figma (см. комментарии вида «макет: …»).

   Брейкпоинты:
     ≥1201  — десктоп, при 1728 совпадает с макетом пиксель-в-пиксель
     901…1200 — компактный десктоп (переваги 2 колонки, модели 2×2)
     601…900  — планшет, одна колонка
     ≤600   — мобайл по фрейму iPhone 390×4827
   ============================================================ */

/* Cy Grotesk Std — коммерческий шрифт. Положите файлы в assets/fonts/. */
@font-face {
  font-family: 'Cy Grotesk Std';
  src: url('../assets/fonts/CyGroteskStd-GrandDemi.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

/* clip, а не hidden: hidden сделал бы html скролл-контейнером и сломал бы
   position:sticky у шапки. Одного overflow-x:hidden на body мало — страница
   всё равно уезжала вбок на ширину декоративного арта (трубки, космонавты). */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  position: relative;
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--white);
  background: var(--dark-blue);
  /* clip, а не hidden: hidden делает body скролл-контейнером, и position:sticky
     у шапки начинает считаться относительно него — шапка перестаёт липнуть.
     clip обрезает арт по горизонтали и скролл-контейнером не становится. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* height:auto обязателен: у картинок есть атрибуты width/height, и без него
   при заданной в CSS ширине высота берётся из атрибута и картинку растягивает */
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul,ol,dl,dd { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.container {
  width: 100%;
  max-width: calc(var(--container-w) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Заголовки ----------
   В макете у заголовков включён text-box-trim, поэтому высота блока равна
   капвысоте: 38 при кегле 52 = .731em. А строки между собой стоят на обычном
   leading Cy Grotesk 1.375em — мобильное «Ми завжди на зв'язку» это 59 при
   кегле 28, то есть 1.375 + .731. Одним line-height это не выразить: .731
   роняет вторую строку на первую. Поэтому нормальный leading + обрезка
   псевдоэлементами; display:table не даёт отрицательным отступам схлопнуться
   с соседями и уехать за пределы заголовка. */
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.375;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
}
.section-title::before,
.section-title::after { content: ""; display: table; }
.section-title::before { margin-bottom: -.322em; }   /* (1.375 − .731) / 2 */
.section-title::after  { margin-top: -.322em; }
.section-title--dark { color: var(--black); }
.br-mob { display: none; }              /* в макете перенос строки есть только на мобайле */

/* ---------- Кнопка ----------
   В макете это заливка #7E49F6 и три размытых SVG-пятна поверх.
   Состояния Default / hover / pressed отличаются только позициями пятен
   (компонент btn_стати партнером, 227:18628). */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-w);
  height: var(--btn-h);
  padding: 0 24px;
  overflow: hidden;
  border: var(--btn-border) solid var(--cyan);
  border-radius: var(--r-btn);
  background-color: var(--violet);
  box-shadow: var(--btn-glow);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
  transition: box-shadow .3s ease;
}
/* Пятна — отдельные слои: проценты от кнопки 408×106 из макета.
   background-position в процентах считается по другой формуле, поэтому элементы. */
.btn__blob {
  position: absolute;
  background: center / 100% 100% no-repeat;
  pointer-events: none;
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease;
}
/* viewBox каждого SVG больше ноды на радиус размытия (80/68/80), поэтому
   позиция сдвинута на него, а размер увеличен на два радиуса. Иначе пятно
   сжимается в габарит ноды и градиент выходит темнее и уже, чем в макете. */
.btn__blob--1 { background-image: url('../assets/img/btn-blob-1.svg'); left: 28.892%;  top: -76.009%;  width: 100.330%; height: 269.630%; }
.btn__blob--2 { background-image: url('../assets/img/btn-blob-2.svg'); left: -48.324%; top: -101.377%; width: 94.450%;  height: 246.996%; }
.btn__blob--3 { background-image: url('../assets/img/btn-blob-3.svg'); left: 62.115%;  top: -75.642%;  width: 75.329%;  height: 242.899%; }
.btn__label { position: relative; z-index: 1; }

.btn:hover  .btn__blob--2 { left: -36.660%; top: -59.972%; }             /* макет: Variant2 */
.btn:hover  .btn__blob--3 { left: 42.103%;  top: -117.519%; width: 81.863%; height: 242.453%; }
.btn:active .btn__blob--2 { left: -48.324%; top: -169.396%; width: 164.951%; height: 383.019%; }  /* макет: pressed */
.btn:active .btn__blob--3 { left: 62.115%;  top: -75.642%;  width: 75.329%;  height: 242.899%; }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- Логотип (макет: в хедере 222×62, мобайл 146×40) ---------- */
.logo { display: inline-flex; flex: none; }
.logo img { width: clamp(146px, 12.847vw, 222px); height: auto; }
.footer .logo img { width: clamp(146px, 22.685vw, 392px); }   /* макет: 392×108 */

/* ============================= HEADER ============================= */
/* макет: 1728×138, контент по центру по вертикали */
.header { position: sticky; top: 0; z-index: 40; }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.3vw, 40px);
  height: var(--header-h);
  padding-inline: var(--gutter);
  /* макет: заливка white 10%, радиус снизу 60, backdrop-blur 50 */
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border-radius: 0 0 60px 60px;
}
.header__nav {
  display: flex;
  gap: clamp(20px, 3.24vw, 56px);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.header__nav a { opacity: .92; transition: color .2s ease; }
.header__nav a:hover { color: var(--cyan); }

.header__auth {
  display: flex; align-items: center;
  gap: clamp(16px, 3.24vw, 56px);      /* макет: 56 */
  font-size: var(--fs-small);
  white-space: nowrap;
}
.header__login { color: var(--cyan); }

/* ============================= HERO ============================= */
/* макет: hero 101,116 · H1 y247 · пилюля y507 · кнопка y793 · космонавт 663,179 1124² */
.hero {
  position: relative;
  z-index: 1;                     /* ботинки космонавта лежат поверх «Переваг» */
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
}
/* Фон всей страницы — один вектор из макета: 8 размытых свечений + декор.
   Группа «bg» (220:16671) лежит в кадре в точке (-711,-309), размер 3204×5848. */
.page-bg {
  position: absolute; inset: 0;
  overflow: hidden;                 /* чтобы фон не увеличивал высоту страницы */
  z-index: -1;
  pointer-events: none;
}
.page-bg::before {
  content: "";
  position: absolute;
  top: calc(-309 * var(--k));
  left: calc(50% - 1575 * var(--k));
  width: calc(3204 * var(--k));
  height: calc(5848 * var(--k));
  background: url('../assets/img/page-bg.svg') center / 100% 100% no-repeat;
}
/* Свечения мобильного кадра — отдельные ноды, единой группы в макете нет.
   SVG больше самой ноды на радиус размытия, поэтому позиция сдвинута на него. */
.page-bg__glow { display: none; position: absolute; background: center / 100% 100% no-repeat; }
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
/* Звёзды: SVG на 20px больше ноды (поле под свечение), поэтому −10 к позиции.
   Макет: две копии слоя в hero (179:15432 и 179:15416). */
.hero__stars {
  position: absolute;
  width: calc(880.571 * var(--k));
  max-width: none;
  pointer-events: none;
}
.hero__stars--a { left: calc(50% - 354 * var(--k));   top: calc(159.1 * var(--k)); }
.hero__stars--b { left: calc(50% - 692.1 * var(--k)); top: calc(106 * var(--k)); }

/* Свечения секции «Моделі співпраці» (Ellipse 40 и 34 — они лежат в самой
   секции, а не в группе bg; SVG больше ноды на радиус размытия 100/400) */
.models__glow {
  position: absolute;
  background: center / 100% 100% no-repeat;
  pointer-events: none;
}
.models__glow--1 {
  background-image: url('../assets/img/glow-models-1.svg');
  left: calc(50% - 287 * var(--k)); top: calc(273 * var(--k));
  width: calc(484 * var(--k)); height: calc(274 * var(--k));
}
.models__glow--2 {
  background-image: url('../assets/img/glow-models-2.svg');
  left: calc(50% + 15 * var(--k)); top: calc(-551 * var(--k));
  width: calc(1421 * var(--k)); height: calc(1170 * var(--k));
}

/* Звёзды секции «Моделі співпраці» (stars 179:15500, кадр −191,1821.24) */
.models__stars {
  position: absolute;
  left: calc(50% - 1065 * var(--k));
  top: calc(125.24 * var(--k));
  width: calc(880.571 * var(--k));
  max-width: none;
  pointer-events: none;
}

/* Декор фона: экспорт группы «bg» (182:15793 десктоп / 227:18431 мобайл).
   Позиция — абсолютные координаты макета относительно центра кадра. */
.hero__deco { position: absolute; max-width: none; pointer-events: none; display: none; }

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1117fr) minmax(0, 411fr);
  padding-top: calc(109 * var(--k));   /* макет: H1 на 247 при хедере 138 */
  padding-bottom: calc(155 * var(--k));
}
.hero__content { display: flex; flex-direction: column; align-items: flex-start; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  text-transform: uppercase;
  color: var(--black);
}
.hero__title em { font-style: normal; color: var(--white); }

/* макет: 68 высота, r60, паддинги 7/20/6, гэп 40, градиент 11.059%→100% */
.pill-advertiser {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 2.31vw, 40px);
  height: clamp(34px, 3.935vw, 68px);
  margin-top: calc(44 * var(--k));
  padding-inline: clamp(12px, 1.157vw, 20px);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--pill-from) 11.059%, var(--pill-to) 100%);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  color: var(--dark-blue);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill-advertiser img { width: clamp(90px, 9.259vw, 160px); height: auto; }

.hero__cta { margin-top: calc(218 * var(--k)); }   /* макет: пилюля 575 → кнопка 793 */

.hero__art { position: relative; }
/* Космонавт: макет 1124² в точке 663,179 — правый край кадра 1787 (обрезается) */
.hero__astronaut {
  position: absolute;
  top: calc(-68 * var(--k));       /* макет: 179 при верхе колонки 247 */
  left: calc(-554 * var(--k));     /* макет: 663 при старте колонки 1217 */
  width: calc(1124 * var(--k));
  max-width: none;
}
.js-levitate { animation: levitate var(--t-levitate) ease-in-out infinite; }
@keyframes levitate {
  0%,100% { transform: translateY(-14px) rotate(-1deg); }
  50%     { transform: translateY(14px)  rotate(1deg); }
}

/* Карточка CPA: макет 274.039×159.611 в точке 1306,84 */
.chip-card {
  position: absolute;
  top: calc(-47 * var(--k));       /* макет: hero-локально 84 → кадр 200 */
  left: calc(190 * var(--k));      /* макет: hero-локально 1306 → кадр 1407 */
  width: calc(274.039 * var(--k));
  height: calc(159.611 * var(--k));
}
/* Форма, заливка и обводка — внутри chip-cpa-frame.svg.
   backdrop-filter из макета не воспроизводим: см. «Известное ограничение»
   в README. Прямоугольного слоя с размытием тут быть не должно — он вылезал
   серым прямоугольником поверх космонавта. */
.chip-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
/* макет: узор 197.4×125.8 со смещением 14/19 внутри карточки 274×160 */
.chip-card__dots {
  position: absolute;
  left: 5.1%; top: 11.9%;
  width: 72%; height: 78.8%;
}
.chip-card__title {
  position: absolute; left: 13.1%; top: 12%;
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--fs-h3); line-height: 1.2;
  color: var(--white);
}
.chip-card__sub {
  position: absolute; left: 13.1%; top: 44%;
  font-size: var(--fs-small); font-weight: 500; line-height: 1; color: var(--white);
}

/* ============================= ПЕРЕВАГИ ============================= */
/* макет: карточка 100,1054 · 1528×632 · r40 · паддинг 85/89 · список 1349.33×254.75 */
.benefits { position: relative; }
.benefits .container { position: relative; }

/* Переход по якорю из шапки: у «Переваг» и «Контактів» карточка начинается
   прямо с верхнего края секции, и без отступа она уезжала под липкую шапку
   вместе с заголовком. «Моделі» и hero не трогаем — их собственный отступ
   сверху и так больше высоты шапки. */
#about, #contacts { scroll-margin-top: calc(var(--header-h) + clamp(16px, 1.4vw, 24px)); }

/* Форма, заливка #7FF9FF 30% и градиентная обводка — вектор из макета
   (Rectangle 48, 175:11785). preserveAspectRatio=none, тянется точно. */
.benefits__card {
  position: relative;
  min-height: calc(632 * var(--k));                       /* макет: 1528×632 */
  padding: calc(85 * var(--k)) clamp(18px, 5.15vw, 89px) calc(130 * var(--k));
  background: url('../assets/img/benefits-card.svg') center / 100% 100% no-repeat;
}
.benefits__card > * { position: relative; }
.benefits .section-title { color: var(--black); }         /* макет: заголовок чёрный */
.benefits__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: calc(80 * var(--k));      /* макет: gap-x 80, gap-y 99 */
  row-gap: calc(99 * var(--k));
  margin-top: calc(68 * var(--k));      /* макет: gap между заголовком и списком */
}
/* Пилюля с кружком — вектор из макета (396.415×77.868, Asset 3) */
.benefit {
  position: relative;
  height: calc(77.868 * var(--k));
  background: url('../assets/img/benefit-pill.svg') center / 100% 100% no-repeat;
}
.benefit--offset { grid-column: 2; }
.benefit__num {
  position: absolute;
  left: .25%; top: 1.3%;
  width: 19.17%;                        /* макет: кружок 76 из 396.415 */
  height: 97.6%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(36 * var(--k));
  line-height: 1;
}
.benefit__text {
  position: absolute;
  left: 28.68%; right: 6.35%;
  top: 50%; translate: 0 -50%;
  font-size: calc(16 * var(--k));
  line-height: 1.3;
  color: var(--pure-white);            /* макет: #F1F0ED */
}
.benefit__text a {                   /* макет: #75FBFD */
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Плашка «Реєстрація за 15 сек»: макет 1,1564 · 553×124, уходит под край экрана */
.signup-timer {
  position: absolute;
  left: calc(50% - 50vw + 1px);
  bottom: -2px;
  display: flex;
  align-items: center;
  /* Ширина 553 = 96 + надпись 262 + гэп 75 + кружок 114 + 6.
     max-content с min-width даёт ровно 553 на Cy Grotesk и не роняет
     кружок за край, если подставился более широкий запасной шрифт. */
  width: max-content;
  min-width: calc(553 * var(--k));
  height: calc(124 * var(--k));
  padding: calc(4 * var(--k)) calc(6 * var(--k)) calc(4 * var(--k)) calc(96 * var(--k));
  gap: calc(75 * var(--k));
  background: linear-gradient(90deg, var(--pill-from) 11.059%, var(--pill-to) 100%);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--white);
  border-radius: 0 60px 60px 0;
  color: var(--black);
}
.signup-timer__label {
  font-family: var(--font-display);
  flex: none;
  font-weight: 600; font-size: calc(24 * var(--k)); line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Круг всегда прижат к правому краю плашки: если подставился запасной шрифт,
   надпись уже 262 из макета, и без auto-отступа круг уезжал влево. */
.signup-timer__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;      /* не stretch: иначе строки разъезжаются по кругу */
  flex: none;
  margin-left: auto;
  width: calc(114 * var(--k));
  aspect-ratio: 1;
  border-radius: calc(57 * var(--k));
  background: var(--black);
  color: var(--white);
  text-align: center;
}
/* Макет: текстовый блок «15 сек» — 43×56 по центру круга 114.
   56 = 30 × 1.2444 + 15 × 1.2444, поэтому одинаковый line-height на обеих строках. */
.signup-timer__circle b,
.signup-timer__circle i {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2444;
}
.signup-timer__circle b { font-size: calc(30 * var(--k)); }
.signup-timer__circle i { font-size: calc(15 * var(--k)); }

/* ============================= МОДЕЛІ СПІВПРАЦІ ============================= */
/* макет: заголовок 1893 · карточки 1999 (270×160, шаг 254) · кнопка 2279 · космонавт 961,1604 1500² */
.models { position: relative; padding-top: calc(207 * var(--k)); padding-bottom: calc(242 * var(--k)); overflow: hidden; }
.models__astronaut {
  position: absolute;
  top: calc(-82 * var(--k));
  left: 50%;
  margin-left: calc(97 * var(--k));      /* макет: 961 от левого края при центре 864 */
  width: calc(1500 * var(--k));
  max-width: none;
  pointer-events: none;
}
.models .container { position: relative; z-index: 1; }

.models__list {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(67 * var(--k));    /* макет: заголовок 1893 → карточки 1999 */
  margin-bottom: calc(120 * var(--k));
}
/* Карточки: формы и узоры точек — векторы из макета (270×160, CPA 274.039×160).
   Координаты внутри карточки взяты из метаданных фрейма. */
.model-card {
  position: relative;
  flex: none;
  width: calc(270 * var(--k));
  height: calc(160 * var(--k));
  margin-right: calc(-16 * var(--k));     /* шаг 254 при ширине 270 */
}
.model-card--cpa { width: calc(274.039 * var(--k)); }
/* Форма, заливка и обводка — внутри model-*-frame.svg, отдельного слоя
   с backdrop-filter быть не должно (см. .chip-card выше). */
.model-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.model-card__dots  { position: absolute; left: 8.903%; top: 78.78%; width: 73.106%; height: 14.375%; }
.model-card--cpa .model-card__dots { left: 5.109%; top: 12.01%; width: 72.03%; height: 78.83%; }
.model-card__name {
  position: absolute; left: 9.644%; top: 12.01%;
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(32 * var(--k)); line-height: 1.1875;
  white-space: nowrap;
}
.model-card--cpa .model-card__name { left: 13.137%; }
.model-card__desc {
  position: absolute; left: 13.348%; top: 43.89%;
  font-size: calc(16 * var(--k)); line-height: 1.1875;
  color: var(--white);
  white-space: nowrap;
}

/* ============================= КАПСУЛИ =============================
   «капсули падають з-під верхнього блоку на верх цього» (коментар дизайнера).
   В макете каждая капсула — квадрат 344.238 (мобайл 133.617), повёрнутый на
   свой угол; размер ноды в Figma это габарит уже повёрнутого квадрата,
   поэтому позиционируем по центру габарита. */
.capsules {
  position: relative;
  z-index: 0;                 /* макет: капсулы уходят ЗА следующую карточку */
  height: 0;
  pointer-events: none;
}
.capsule {
  position: absolute;
  width: calc(344.238 * var(--k));
  aspect-ratio: 1;
  background: center / contain no-repeat;
  /* --fall задаёт скролл-анимация, поэтому поворот идёт отдельным множителем */
  transform: translate(-50%, -50%) translateY(var(--fall, 0px)) rotate(var(--rot, 0deg));
  will-change: transform;
}
.capsule--t1 { left: calc(50% + 185.58 * var(--k)); top: calc(-91.47 * var(--k)); --rot: -40.1deg; background-image: url("../assets/img/capsule-1.webp"); }
.capsule--t2 { left: calc(50% + -392.52 * var(--k)); top: calc(-93.46 * var(--k)); --rot: 49.85deg; background-image: url("../assets/img/capsule-2.webp"); }
.capsule--t3 { left: calc(50% + 385.48 * var(--k)); top: calc(-93.46 * var(--k)); --rot: 129.3deg; background-image: url("../assets/img/capsule-2.webp"); }
.capsule--t4 { left: calc(50% + -27.70 * var(--k)); top: calc(-90.64 * var(--k)); --rot: 84.3deg; background-image: url("../assets/img/capsule-2.webp"); }
.capsule--b1 { left: calc(50% + 520.35 * var(--k)); top: calc(358.36 * var(--k)); --rot: -52.46deg; background-image: url("../assets/img/capsule-1.webp"); }
.capsule--b2 { left: calc(50% + 101.52 * var(--k)); top: calc(357.52 * var(--k)); --rot: -40.1deg; background-image: url("../assets/img/capsule-1.webp"); }
.capsule--b3 { left: calc(50% + -632.48 * var(--k)); top: calc(198.53 * var(--k)); --rot: -40.1deg; background-image: url("../assets/img/capsule-1.webp"); }
.capsule--b4 { left: calc(50% + -476.46 * var(--k)); top: calc(359.54 * var(--k)); --rot: 49.85deg; background-image: url("../assets/img/capsule-2.webp"); }
.capsule--b5 { left: calc(50% + -740.46 * var(--k)); top: calc(357.54 * var(--k)); --rot: 130.15deg; background-image: url("../assets/img/capsule-2.webp"); }
.capsule--b6 { left: calc(50% + 321.54 * var(--k)); top: calc(358.55 * var(--k)); --rot: 59.65deg; background-image: url("../assets/img/capsule-2.webp"); }
.capsule--b7 { left: calc(50% + -111.64 * var(--k)); top: calc(358.37 * var(--k)); --rot: 84.3deg; background-image: url("../assets/img/capsule-2.webp"); }
.capsule--b8 { left: calc(50% + 715.54 * var(--k)); top: calc(246.55 * var(--k)); --rot: 49.85deg; background-image: url("../assets/img/capsule-2.webp"); }

/* ============================= ПАРТНЕРИ ============================= */
/* макет: карточка 98,2627 · 1529×353 · заголовок +92/+80 · лента 1528×102, плитки 382×102 */
/* макет: bg rgba(127,249,255,.3), blur 25, белая рамка, радиус 60 */
.glass-card {
  position: relative;
  border-radius: var(--r-card);
  background: rgba(127,249,255,.3);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--white);
  overflow: hidden;
}

.partners__card { padding: calc(80 * var(--k)) 0 calc(76 * var(--k)); }
.partners__card .section-title { padding-inline: clamp(18px, 5.32vw, 92px); }

.marquee { margin-top: calc(55 * var(--k)); overflow: hidden; }   /* макет: заголовок 80 → лента 175 */
.marquee__track { display: flex; width: max-content; }
.marquee__track > * { flex: none; }
.js-marquee .marquee__track { animation: marquee var(--t-marquee) linear infinite; }
.js-marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* макет: плитка 382×102, у каждого лого свой размер (из паддингов плитки) */
.partner-tile {
  display: grid; place-items: center;
  width: calc(382 * var(--k));
  height: calc(102 * var(--k));
}
.partner-tile--dark  { background: var(--black); }
.partner-tile--light { background: var(--white); }
.partner-tile img { width: 100%; height: auto; }
.partner-tile--1 img { width: calc(198 * var(--k)); }      /* 382 − 2×92 */
.partner-tile--2 img { width: calc(240 * var(--k)); }      /* 382 − 2×71 */
.partner-tile--3 img { width: calc(116 * var(--k)); }      /* 382 − 2×133 */
.partner-tile--4 img { width: calc(175.189 * var(--k)); }  /* mask-size из макета */
/* «Про Інтернет Казино» и «Traffic Space» лежат в макете белыми (работают как
   маска под чёрную заливку) — на светлой плитке инвертируем их в чёрный */
.partner-tile--light .is-inverted { filter: invert(1); }

/* ============================= FAQ ============================= */
/* макет: карточка 98,2984 · 1531×872 · заголовок +90/+78 · аккордеон +90/+211, строки 116/гэп 12 */
.faq { position: relative; margin-top: 4px; }
.faq__card { padding: calc(77 * var(--k)) calc(92 * var(--k)) calc(162 * var(--k)) calc(89 * var(--k)); }
.faq__tubes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.faq__tubes--under { display: none; }             /* только мобайл, см. медиазапрос */
.faq__tube { position: absolute; width: calc(2756 * var(--k)); max-width: none; will-change: transform; }
.faq__tube--1 { left: calc(-366 * var(--k)); top: calc(45 * var(--k)); }
.faq__tube--2 { left: calc(-714 * var(--k)); top: calc(126 * var(--k)); }
/* «трубки було б добре якби рухались одна назустріч другій помалу» */
.js-tubes .faq__tube--1 { animation: tube-right var(--t-tubes) ease-in-out infinite alternate; }
.js-tubes .faq__tube--2 { animation: tube-left  var(--t-tubes) ease-in-out infinite alternate; }
@keyframes tube-right { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
@keyframes tube-left  { from { transform: translateX(70px); }  to { transform: translateX(-70px); } }

.faq .section-title, .faq .accordion { position: relative; z-index: 1; }

.accordion { display: grid; gap: var(--faq-row-gap); margin-top: calc(94 * var(--k)); }  /* макет: 78 → 211 */
.accordion__item {
  border-radius: var(--r-row);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  overflow: hidden;
}
.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.39vw, 24px);
  width: 100%;
  min-height: var(--faq-row-h);
  padding: calc(40 * var(--k));        /* макет: p-[40px] */
  text-align: left;
  color: var(--black);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
}
.accordion__icon {
  position: relative; flex: none;
  width: clamp(16px, 1.5vw, 26px);
  height: clamp(16px, 1.5vw, 26px);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute; inset: 50% 0 auto 0;
  height: 3px; margin-top: -1.5px;
  background: var(--black);
  transition: transform .3s ease;
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__head[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }

.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
/* Паддинг живёт на внутренней обёртке: на самом .accordion__body он бы
   не схлопывался вместе с 0fr и добавлял высоту закрытым пунктам.
   Цвет задан всегда — иначе при закрытии класс is-open снимается мгновенно
   и текст на кадр вспыхивает белым поверх светлой карточки. */
.accordion__body { overflow: hidden; min-height: 0; }
.accordion__inner {
  padding: 4px clamp(16px, 2.315vw, 40px) clamp(20px, 1.97vw, 34px);
  color: #1B2430;
}
.accordion__body h4 {
  margin: 22px 0 8px;
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--fs-small);
  text-transform: uppercase;
}
.accordion__body h4:first-child { margin-top: 0; }
.accordion__body p { font-size: var(--fs-small); line-height: 1.55; }
.accordion__body p + p,
.accordion__body ul + p { margin-top: 10px; }
.accordion__body ul {
  margin: 6px 0 0;
  padding-left: 1.3em;
  list-style: disc;                    /* глобально list-style снят, здесь нужен */
  font-size: var(--fs-small);
  line-height: 1.55;
}
.accordion__body ul li { margin-top: 2px; }
.accordion__body a { color: #2E6D74; text-decoration: underline; text-underline-offset: 2px; }

/* ============================= КОНТАКТИ ============================= */
/* макет: карточка 99,4336 · 1529×681 · r40 · заголовок +94/+91 · блоки на +183/+318 */
.contacts { margin-top: calc(480 * var(--k)); }
.contacts__card {
  position: relative;
  padding: calc(91 * var(--k)) clamp(20px, 5.44vw, 94px) calc(79 * var(--k));
  border-radius: var(--r-card);
  background: rgba(0,0,0,.7);            /* макет: bg-[rgba(0,0,0,0.7)] */
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--white);
}
.contacts__list {
  display: grid;
  grid-template-columns: minmax(0, 823fr) minmax(0, 706fr);
  row-gap: calc(55 * var(--k));
  margin-top: calc(53 * var(--k));    /* макет: заголовок 91 → блоки 183 */
}
.contacts__item--email { grid-column: 1; }
.contacts__item dt {
  font-size: var(--fs-body);          /* макет: Inter SemiBold 20, uppercase */
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--white);
}
.contacts__item dd { margin-top: calc(12 * var(--k)); }   /* макет: подпись 24, значение с y=36 */
.contacts__item dd a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.375;                 /* макет: высота значения 44 при 32px */
  text-decoration: underline;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.contacts__cta { display: flex; width: fit-content; margin: calc(96 * var(--k)) auto 0; }
.contacts__socials {
  position: absolute;
  right: clamp(20px, 5.27vw, 91px);
  bottom: calc(82 * var(--k));
  display: flex; align-items: center;
  gap: calc(50 * var(--k));
}
.contacts__socials img { width: calc(60 * var(--k)); height: calc(60 * var(--k)); }

/* ============================= FOOTER ============================= */
/* макет: 99,5021 · 1529×195 · r40 */
.footer { margin-top: 4px; }
.footer__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3.47vw, 60px);
  min-height: calc(195 * var(--k));
  /* макет: 195 высота, паддинги 44/91/43/94 */
  padding: calc(44 * var(--k)) calc(91 * var(--k)) calc(43 * var(--k)) calc(94 * var(--k));
  border-radius: var(--r-card);
  background: rgba(0,0,0,.7);            /* макет: bg-[rgba(0,0,0,0.7)] */
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--white);
}
.footer__nav {
  display: flex;
  gap: clamp(18px, 2.315vw, 40px);      /* макет: 40 */
  font-size: var(--fs-small);
  white-space: nowrap;
}
.footer__copy { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
.footer__copy a { text-decoration: underline; }

/* Лого Affilka — под строкой с копирайтом, в той же колонке справа.
   Белый вариант логотипа (футер тёмный); приглушён до тона копирайта,
   при наведении — в полную яркость. Высоту футера не меняет: колонка
   ниже логотипа Cosmo Partners. */
.footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(8px, .81vw, 14px);
}
.footer__affilka { display: inline-flex; opacity: .72; transition: opacity .2s ease; }
.footer__affilka:hover,
.footer__affilka:focus-visible { opacity: 1; }
.footer__affilka img { width: clamp(68px, 5.44vw, 94px); }   /* 94×28 при 1728 */

/* ============================= МОБИЛЬНАЯ НАВИГАЦИЯ ============================= */
.mobile-nav { display: none; }


/* ============================= СТОРІНКА ПРАВИЛ ТА УМОВ ============================= */
/* Стеклянная карточка и тёмный текст в ней — те же, что у FAQ и «Партнерів».
   Ширина текстовой колонки ограничена: длинная строка юридического текста
   иначе уезжает за комфортные ~75 знаков. */
.legal { padding-top: calc(96 * var(--k)); padding-bottom: calc(120 * var(--k)); font-size: var(--fs-small); }
/* Колонка документа — по мере чтения (~75 знаков), а не во всю сетку лендинга:
   строка в 1300px для сплошного юридического текста нечитаема. Заголовок
   и карточка стоят в одном контейнере, поэтому их левые края совпадают. */
.legal .container { max-width: calc(75ch + 2 * clamp(20px, 5.44vw, 94px) + 2 * var(--gutter)); }
.legal__title { margin-bottom: calc(48 * var(--k)); }

/* Липкая шапка на лендинге едет по тёмному фону, здесь — по светлой карточке,
   и белые пункты меню на ней пропадают. Поэтому на этой странице у шапки
   своя тёмная подложка. */
.legal-page .header {
  background: rgba(1, 22, 35, .85);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}
/* Карточки лендинга стоят над свечениями фона, и полупрозрачный циан читается
   на них как светлое стекло. Страница правил длинная и уходит туда, где
   свечений нет: тот же фон стал бы тёмно-бирюзовым, а тёмный текст на нём
   пропал бы. Поэтому здесь светлая заливка из палитры — блюр и рамка те же. */
.legal__card {
  padding: calc(72 * var(--k)) clamp(20px, 5.44vw, 94px) calc(80 * var(--k));
  background: rgba(207, 220, 232, .9);          /* --glass-light-a */
  color: #1B2430;
}
.legal__body { max-width: 75ch; line-height: 1.6; }
.legal__body p + p { margin-top: 12px; }
.legal__body a { color: var(--hero-teal); text-decoration: underline; text-underline-offset: 2px; }
.legal__body a:hover { text-decoration-thickness: 2px; }
.legal__body a:focus-visible { outline: 2px solid var(--hero-teal); outline-offset: 2px; }

/* Абзац-предупреждение из документа: в PDF он выделен начертанием */
.legal__accent { margin-top: 16px; font-weight: 500; }

/* Содержание: простой столбец ссылок, без рамок и маркеров */
.legal__toc {
  display: grid;
  gap: 8px;
  margin-top: calc(40 * var(--k));
  padding-top: calc(28 * var(--k));
  border-top: 1px solid rgba(27,36,48,.18);
}
.legal__toc a { color: inherit; text-decoration: none; width: fit-content; transition: color .2s ease; }
.legal__toc a:hover { color: var(--hero-teal); }
.legal__toc a:focus-visible { outline: 2px solid var(--hero-teal); outline-offset: 2px; }

/* scroll-margin — чтобы липкая шапка не накрывала заголовок при переходе по якорю */
.legal__section { margin-top: calc(56 * var(--k)); scroll-margin-top: calc(var(--header-h) + 16px); }
.legal__section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  text-transform: uppercase;
}
.legal__section h3 {
  margin-top: 16px;
  font-weight: 600;
  font-size: var(--fs-small);
  color: rgba(27,36,48,.7);
}
.legal__defs { margin-top: 20px; }

/* Нумерация пунктов — счётчиками: в документе у раздела 1 номера вида 1.1,
   у остальных — сквозные. Префикс задаётся переменной --num. */
.legal__list {
  counter-reset: item;
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
/* Номер висит слева абсолютом, а не колонкой сетки: внутри пункта бывают
   вложенные абзацы и списки, и в сетке они разъезжались бы по колонкам. */
.legal__list > li {
  counter-increment: item;
  position: relative;
  padding-left: var(--num-w, 1.9em);
}
.legal__list > li::before {
  content: var(--num, "") counter(item) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hero-teal);
}
.legal__list--sub    { --num: "1."; --num-w: 2.9em; }
.legal__list--nested { --num: "2."; --num-w: 2.9em; gap: 12px; margin-top: 12px; }
.legal__list > li > p { margin-top: 10px; }

.legal__bullets {
  margin-top: 8px;
  padding-left: 1.3em;
  list-style: disc;                    /* глобально list-style снят, здесь нужен */
}
.legal__bullets li { margin-top: 4px; }

/* Формулы: моноширинные цифры и перенос по словам, чтобы длинная строка
   не распирала карточку на узком экране */
.legal__formula {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: rgba(27,36,48,.85);
}

/* ============================================================
   1200px и ниже — компактный десктоп
   ============================================================ */
@media (max-width: 1200px) {
  .benefits__list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .benefit--offset { grid-column: auto; }

  .models__astronaut {
    width: calc(1050 * var(--k));
    margin-left: calc(180 * var(--k));
    opacity: .8;
  }

  .contacts__list { grid-template-columns: minmax(0,1fr); row-gap: calc(40 * var(--k)); }
  .contacts__item--email { grid-column: auto; }
  .contacts__socials { position: static; margin-top: calc(40 * var(--k)); }
  .contacts__cta { margin-top: calc(48 * var(--k)); }
}

/* ============================================================
   900px и ниже — планшет: одна колонка, арт уходит на фон
   ============================================================ */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0,1fr); }
  .hero__art {
    position: absolute; inset: 0;
    pointer-events: none;
  }
  /* 601–900 арт искусственно увеличен, поэтому там он уходит под секции.
     На мобайле (≤600) порядок как в макете — космонавт поверх «Переваг». */
  .hero { z-index: 0; }

  /* left обязателен: без сброса десктопный left перебивает right */
  .hero__astronaut {
    left: auto;
    right: -14vw;
    top: 10%;
    width: 84vw;
    opacity: .75;
  }
  .chip-card {
    left: auto;
    right: 3vw;
    top: 4%;
    width: 30vw;
    height: 17.477vw;              /* пропорция 274.039×159.611 */
  }

  .benefits__list { grid-template-columns: minmax(0,1fr); }
  .benefits__card { clip-path: none; padding-bottom: calc(150 * var(--k)); }

  .models__list { flex-wrap: wrap; gap: 12px; max-width: none; }
  .model-card, .model-card--cpa {
    width: calc(50% - 6px);
    height: auto;
    aspect-ratio: 270 / 160;              /* пропорция карточки из макета */
    margin-right: 0;
  }
  .models__astronaut { display: none; }
  .models__stars { left: calc(50% - 62vw); top: 6%; width: 100vw; }


  .footer__card { flex-wrap: wrap; }
  .footer__copy { white-space: normal; }
  .footer__meta { align-items: flex-start; }   /* колонка переносится под лого — выравниваем влево */
}

/* ============================================================
   600px и ниже — мобайл по фрейму iPhone 13 & 14 (390×4827)
   Арт позиционируется через --m: 1 при 390, ниже пропорционально.
   ============================================================ */
@media (max-width: 600px) {
  /* --- header: макет 391×88, контент 16,24, лого 146×40, «Вхід» справа --- */
  .header__inner {
    gap: 12px;
    padding-inline: var(--gutter);
    border-radius: 0 0 calc(40 * var(--m)) calc(40 * var(--m));
  }
  .header__nav, .header__signup { display: none; }   /* в мобильном кадре только «Вхід» */
  .header__auth { margin-left: auto; font-size: calc(16 * var(--m)); }  /* макет: 34×19 → Inter 16 */
  .logo img { width: calc(146 * var(--m)); }

  /* --- hero: H1 y144, пилюля y316, космонавт -156,388 (703²), кнопка y788 --- */
  .hero { padding-bottom: 0; }
  .hero__inner {
    display: flex; flex-direction: column; align-items: stretch;
    padding-top: calc(56 * var(--m));            /* 88 + 56 = 144 */
    padding-bottom: calc(121 * var(--m));        /* кнопка 788+88 → переваги 997 */
  }
  .hero__content { display: contents; }
  .hero__title { order: 1; }
  .pill-advertiser {
    order: 2; align-self: flex-start;
    height: calc(34.28 * var(--m));
    margin-top: calc(18 * var(--m));             /* H1 низ 298 → пилюля 316 */
    margin-bottom: calc(438 * var(--m));         /* пилюля низ 350 → кнопка 788 */
    padding-inline: calc(12 * var(--m));
    gap: calc(12 * var(--m));
  }
  .pill-advertiser img { width: calc(96 * var(--m)); }
  .hero__cta { order: 4; margin-top: 0; }

  /* виртуальный фрейм 390px по центру — координаты арта берутся из макета как есть */
  .hero__art {
    position: absolute; top: 0; bottom: 0;
    left: 50%; width: calc(390 * var(--m));
    transform: translateX(-50%);
    z-index: 1; pointer-events: none;      /* над фоном, но под текстом и кнопкой */
  }
  .hero__title, .pill-advertiser, .hero__cta { position: relative; z-index: 2; }
  .hero { z-index: 1; }                  /* макет: hero выше «Переваг» */
  /* Фон мобильного кадра: шесть свечений из макета вместо десктопного вектора */
  .page-bg::before { display: none; }
  .page-bg__glow { display: block; }
  .page-bg__glow--1 { background-image: url('../assets/img/glow-mob-1.svg'); left: calc(50% - 618 * var(--m)); top: calc(-186 * var(--m)); width: calc(954 * var(--m));  height: calc(715 * var(--m)); }
  .page-bg__glow--2 { background-image: url('../assets/img/glow-mob-2.svg'); left: calc(50% - 85 * var(--m));  top: calc(70 * var(--m));   width: calc(780 * var(--m));  height: calc(770 * var(--m)); }
  .page-bg__glow--3 { background-image: url('../assets/img/glow-mob-3.svg'); left: calc(50% - 623 * var(--m)); top: calc(649 * var(--m));  width: calc(1657 * var(--m)); height: calc(1432 * var(--m)); }
  .page-bg__glow--4 { background-image: url('../assets/img/glow-mob-4.svg'); left: calc(50% - 222 * var(--m)); top: calc(2305 * var(--m)); width: calc(771 * var(--m));  height: calc(718 * var(--m)); }
  .page-bg__glow--5 { background-image: url('../assets/img/glow-mob-5.svg'); left: calc(50% - 573 * var(--m)); top: calc(2525 * var(--m)); width: calc(1343 * var(--m)); height: calc(1400 * var(--m)); }
  .page-bg__glow--6 { background-image: url('../assets/img/glow-mob-6.svg'); left: calc(50% - 685 * var(--m)); top: calc(3602 * var(--m)); width: calc(1484 * var(--m)); height: calc(1260 * var(--m)); }
  /* звёзды мобильного кадра: 220:18262 (две копии) и 220:18226 в «Моделях» */
  .hero__stars { width: calc(880.571 * var(--m)); }
  .hero__stars--a { left: calc(50% - 378 * var(--m)); top: calc(137.63 * var(--m)); }
  .hero__stars--b { left: calc(50% - 716 * var(--m)); top: calc(88.46 * var(--m)); }
  .models__stars {
    left: calc(50% - 199.53 * var(--m));
    top: calc(149.89 * var(--m));
    width: calc(595.62 * var(--m));
  }
  .hero__deco--mob {
    display: block;
    display: block;
    left: calc(50% - 257 * var(--m));     /* макет: x=-62 при центре кадра 195 */
    top: calc(365 * var(--m));
    width: calc(648.259 * var(--m));
  }
  /* В мобильном кадре порядок слоёв обратный десктопному: «плашка» (220:17762)
     лежит НИЖЕ космонавта (220:17847), он закрывает её нижнюю часть. */
  .hero__astronaut {
    position: absolute;
    z-index: 1;
    top: calc(300 * var(--m));                   /* 388 − 88 (хедер) */
    left: calc(-156 * var(--m));
    right: auto;
    width: calc(703 * var(--m));
    opacity: 1;
  }
  .chip-card {
    z-index: 0;
    top: calc(288 * var(--m));                   /* 376 − 88 */
    left: calc(213 * var(--m));
    right: auto;
    width: calc(164 * var(--m));
    height: calc(96 * var(--m));
  }
  .chip-card__title { left: 13%; top: 11%; }
  .chip-card__sub   { left: 13%; top: 47%; }

  /* --- переваги: карточка 18,997 · 370×783, список 311, шаг 101.09 --- */
  /* Ширина карточек в мобильном макете у каждой своя (370 / 360 / 362.78 / 390),
     общий контейнер 358 их не описывает — задаём каждой явно. */
  .benefits__card {
    width: calc(370 * var(--m));
    margin-left: calc(2 * var(--m));              /* макет: левый край 18, контейнер 16 */
    min-height: calc(783 * var(--m));             /* макет: карточка 370×783 */
    padding: calc(72 * var(--m)) calc(22 * var(--m)) calc(173.5 * var(--m));
    background-image: url('../assets/img/benefits-card-mobile.svg');
  }
  .benefits__list {
    grid-template-columns: minmax(0,1fr);
    row-gap: calc(40 * var(--m));
    margin-top: calc(52 * var(--m));
  }
  .benefit { height: calc(61.092 * var(--m)); }   /* макет: 311×61.092 */
  .benefit__num  { font-size: calc(28.241 * var(--m)); }
  .benefit__text { font-size: calc(12.552 * var(--m)); }

  /* --- плашка «Реєстрація за»: макет 0,1724 · 322×86 --- */
  .signup-timer {
    left: calc(50% - 50vw);
    bottom: calc(-30 * var(--m));
    width: max-content;
    min-width: calc(322 * var(--m));
    height: calc(86 * var(--m));
    padding: calc(3 * var(--m)) calc(4 * var(--m)) calc(3 * var(--m)) calc(24 * var(--m));
    gap: calc(30 * var(--m));
    border-radius: 0 calc(43 * var(--m)) calc(43 * var(--m)) 0;
  }
  .signup-timer__label { font-size: calc(17 * var(--m)); }
  .signup-timer__circle { width: calc(79.5 * var(--m)); border-radius: calc(40 * var(--m)); }
  .signup-timer__circle b { font-size: calc(21 * var(--m)); }
  .signup-timer__circle i { font-size: calc(10.5 * var(--m)); }

  /* --- моделі: заголовок 19,1938 (206×59, две строки), карточки 248×144 шаг 148 --- */
  .models { padding-top: calc(158 * var(--m)); padding-bottom: calc(190 * var(--m)); }
  /* Ellipse 40 и 34 есть только в десктопном кадре: в мобильном свечения
     этой секции не рисуются вовсе, между 1681 и 2545 фон чистый. */
  .models__glow { display: none; }
  .models__list { flex-direction: column; gap: calc(4 * var(--m)); margin-top: calc(40 * var(--m)); margin-bottom: calc(76 * var(--m)); }
  .model-card, .model-card--cpa {                /* макет: 248×144 */
    width: calc(248 * var(--m));
    height: calc(144 * var(--m));
    aspect-ratio: auto;
  }
  .model-card__name { font-size: calc(28 * var(--m)); }
  .model-card__desc { font-size: calc(12 * var(--m)); }

  /* второй космонавт: макет 85,2268 · 594² */
  .models__astronaut {
    display: block;
    top: calc(488 * var(--m));                       /* макет: y=2268 при верхе секции 1780 */
    bottom: auto;
    left: 50%; margin-left: calc(-110 * var(--m));   /* макет: x=85 при центре 195 */
    width: calc(594 * var(--m));
    opacity: 1;
  }

  /* --- капсули: верхній ряд 2845 (188²), нижній 3684 --- */
  /* мобильный кадр: свой размер и свои координаты капсул */
  .capsule { width: calc(133.617 * var(--m)); }
  .capsule--t1 { left: calc(50% + 73.50 * var(--m)); top: calc(-39.08 * var(--m)); --rot: -40.1deg; background-image: url("../assets/img/capsule-1.webp"); }
  .capsule--t2 { left: calc(50% + -150.87 * var(--m)); top: calc(-39.86 * var(--m)); --rot: 49.85deg; background-image: url("../assets/img/capsule-2.webp"); }
  .capsule--t3 { left: calc(50% + 151.13 * var(--m)); top: calc(-39.86 * var(--m)); --rot: 129.3deg; background-image: url("../assets/img/capsule-2.webp"); }
  .capsule--t4 { left: calc(50% + -9.26 * var(--m)); top: calc(-38.77 * var(--m)); --rot: 84.3deg; background-image: url("../assets/img/capsule-2.webp"); }
  .capsule--b1 { left: calc(50% + 13.14 * var(--m)); top: calc(145.14 * var(--m)); --rot: -40.1deg; background-image: url("../assets/img/capsule-1.webp"); }
  .capsule--b2 { left: calc(50% + -162.86 * var(--m)); top: calc(147.14 * var(--m)); --rot: 49.85deg; background-image: url("../assets/img/capsule-2.webp"); }
  .capsule--b3 { left: calc(50% + -84.86 * var(--m)); top: calc(148.14 * var(--m)); --rot: 49.85deg; background-image: url("../assets/img/capsule-2.webp"); }
  .capsule--b4 { left: calc(50% + 139.11 * var(--m)); top: calc(147.14 * var(--m)); --rot: 129.3deg; background-image: url("../assets/img/capsule-2.webp"); }
  .capsule--b5 { left: calc(50% + 68.13 * var(--m)); top: calc(92.11 * var(--m)); --rot: 84.3deg; background-image: url("../assets/img/capsule-2.webp"); }
  .capsule--b6 { left: calc(50% + -134.89 * var(--m)); top: calc(72.11 * var(--m)); --rot: 84.3deg; background-image: url("../assets/img/capsule-2.webp"); }
  .capsule--b7, .capsule--b8 { display: none; }

  /* --- партнери: карточка 358×262, плитки 208×56 --- */
  .partners__card { padding: calc(73 * var(--m)) 0 calc(73 * var(--m)); }
  .partners__card .section-title { padding-inline: calc(33 * var(--m)); }
  .marquee { margin-top: calc(38 * var(--m)); }
  .partner-tile { width: calc(208 * var(--m)); height: calc(56 * var(--m)); }
  .partner-tile--1 img { width: calc(107 * var(--m)); }
  .partner-tile--2 img { width: calc(131.7 * var(--m)); }
  .partner-tile--3 img { width: calc(62 * var(--m)); }
  .partner-tile--4 img { width: calc(96.2 * var(--m)); }

  /* --- FAQ: карточка 360×440, строки 51, гэп 10 --- */
  .faq { margin-top: calc(4 * var(--m)); }
  /* макет: карточка 16,3245 · 360×440, паддинги 72/22/72/23, строки 313 */
  .faq__card { width: calc(360 * var(--m)); padding: calc(72 * var(--m)) calc(22 * var(--m)) calc(72 * var(--m)) calc(23 * var(--m)); }
  .benefits .section-title { color: var(--black); }
  /* Трубки уходят под карточку и торчат за её правым краем: их размывает
     backdrop-filter карточки, а снаружи они видны в полную силу — как в макете.
     Координаты от левого края секции: tube-4 2 (−60,3432), tube-4 3 (−180,3424). */
  .faq__tubes--inside { display: none; }
  .faq__tubes--under  { display: block; inset: 0 auto auto 0; overflow: visible; }
  .faq__card { position: relative; z-index: 1; }
  .faq__tube { width: calc(907 * var(--m)); }
  .faq__tube--1 { left: calc(-60 * var(--m)); top: calc(187 * var(--m)); }
  .faq__tube--2 { left: calc(-180 * var(--m)); top: calc(179 * var(--m)); }
  .accordion { margin-top: calc(40 * var(--m)); }
  /* макет: строка 54.353, в двухстрочной паддинг 12.177, в однострочных 18.74 —
     то есть текст центрирован по высоте строки, поэтому вертикальный паддинг 12 */
  .accordion__head { padding: calc(12 * var(--m)) calc(16 * var(--m)); }
  .accordion__icon::before, .accordion__icon::after { height: 2px; margin-top: -1px; }

  /* --- контакти: карточка 14,3869 · 362.8×534.4 · паддинги 72/31/72/24 --- */
  /* padding, а не margin: margin схлопнулся бы с отступом футера сверху.
     132.05 — место под вынесенную кнопку: 40.6 отступ + 91.45 высота */
  .contacts { margin-top: calc(184 * var(--m)); padding-bottom: calc(132.05 * var(--m)); }
  /* макет: заголовок → контакты → соцсети, кнопка вынесена ПОД карточку */
  .contacts__card {
    position: relative;
    width: calc(362.78 * var(--m));
    margin-left: calc(-2 * var(--m));             /* макет: левый край 14 */
    display: flex; flex-direction: column;
    padding: calc(72 * var(--m)) calc(31 * var(--m)) calc(72 * var(--m)) calc(24 * var(--m));
  }
  .br-mob { display: inline; }                    /* макет: «Ми завжди / на зв'язку» */
  .contacts__card .section-title { order: 1; }
  .contacts__list    { order: 2; }
  .contacts__socials { order: 3; }
  .contacts__list { row-gap: calc(33 * var(--m)); margin-top: calc(40 * var(--m)); }
  .contacts__item--telegram { order: -1; }        /* на мобайлі Telegram перший */
  .contacts__item dt { line-height: 1.25; }       /* макет: подпись 15 при кегле 12 */
  .contacts__item dd { margin-top: calc(5.125 * var(--m)); }
  .contacts__socials { margin-top: calc(40 * var(--m)); gap: calc(50 * var(--m)); }
  .contacts__socials img { width: calc(35 * var(--m)); height: calc(35 * var(--m)); }
  /* Кнопка в макете стоит НИЖЕ карточки (20,4444 · 352×91.45), а не внутри,
     поэтому вынимаем её из потока — иначе фон карточки её накрывает. */
  .contacts__cta {
    position: absolute;
    left: 50%;
    top: calc(100% + 40.6 * var(--m));
    translate: -50% 0;
    width: calc(352 * var(--m));
    height: calc(91.45 * var(--m));
    margin: 0;
  }

  /* --- футер: макет 0,4576 · 390×251, во всю ширину экрана, r40 --- */
  .footer { margin-top: calc(41 * var(--m)); padding-bottom: calc(90 * var(--m)); }
  .footer .container { max-width: none; padding-inline: 0; }
  /* Сетка: слева лого Cosmo Partners сверху и Affilka снизу (на уровне
     последней ссылки), справа колонка ссылок на обе строки. */
  .footer__card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: calc(20 * var(--m));
    min-height: calc(251 * var(--m));
    /* макет: лого от 26.5, правый край ссылок 348.5 */
    padding: calc(72 * var(--m)) calc(41.5 * var(--m)) calc(72 * var(--m)) calc(26.5 * var(--m));
  }
  .footer__card > .logo { grid-column: 1; grid-row: 1; }
  .footer .logo img { width: calc(146 * var(--m)); }   /* макет: 146×40 */
  .footer__nav {
    grid-column: 2; grid-row: 1 / span 2; justify-self: end;
    flex-direction: column; align-items: flex-end;
    gap: calc(24 * var(--m));                          /* макет: gap 24, строки по 19 */
    margin: 0;
    font-size: calc(16 * var(--m));
    font-weight: 500;
    line-height: calc(19 * var(--m));
  }
  .footer__copy { display: none; }
  .footer__meta { grid-column: 1; grid-row: 2; align-self: end; align-items: flex-start; }
  .footer__affilka img { width: calc(74 * var(--m)); }

  /* --- липка нижня навігація: макет 20,4758 · 352×53 --- */
  .mobile-nav {
    position: fixed;
    left: 50%;
    translate: -50% 0;
    width: calc(352 * var(--m));          /* макет: 352×53 в точке x=20 */
    bottom: calc(16 * var(--m));
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12 * var(--m));
    height: calc(53 * var(--m));
    padding: calc(8 * var(--m)) calc(12 * var(--m));
    border-radius: calc(20 * var(--m));         /* макет: r20, не капсула */
    background: rgba(0,0,0,.5);
    border: 1px solid var(--white);
    /* макет: Inter Medium 16, у активного — та же сетка, что и у остальных */
    font-family: var(--font-text);
    font-weight: 500;
    font-size: calc(16 * var(--m));
    line-height: calc(19 * var(--m));
  }
  .mobile-nav a {
    padding: calc(8 * var(--m)) 0;
    white-space: nowrap;
  }
  .mobile-nav a.is-active {
    padding-inline: calc(16 * var(--m));
    border-radius: calc(12 * var(--m));
    background: linear-gradient(90deg, var(--pill-from) 11.059%, var(--pill-to) 100%);
    color: rgba(0,0,0,.5);                      /* макет: text-[rgba(0,0,0,0.5)] */
  }

  /* --- правила та умови: карточка во всю ширину контейнера --- */
  .legal { padding-top: calc(32 * var(--m)); padding-bottom: calc(56 * var(--m)); }
  .legal__title { margin-bottom: calc(24 * var(--m)); }
  .legal__card { padding: calc(32 * var(--m)) calc(20 * var(--m)) calc(40 * var(--m)); }
  /* 12 из мобильного фрейма слишком мелко для восьми страниц сплошного текста */
  .legal, .legal__body { font-size: calc(14 * var(--m)); line-height: 1.55; }
  .legal__toc { margin-top: calc(24 * var(--m)); padding-top: calc(20 * var(--m)); }
  .legal__section { margin-top: calc(32 * var(--m)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-levitate,
  .js-marquee .marquee__track,
  .js-tubes .faq__tube,
  .capsule { animation: none !important; transform: none !important; }
}