/* ===== Fitbox landing ===== */
:root {
  --bg: #FFFDF2;
  --card: #F4F3DF;
  --card-hero: #F4F3DF;
  --ring: #ECEBDA;
  --orange: #F47F30;
  --orange-soft: #F69256;
  --dark: #403F3D;
  --text: #7F7F74;
  --white: #FFFDF2;
  /* 1 пиксель макета: фрейм Figma 1452px. Всё, что задано в calc(N * --u),
     пропорционально тянется на любую ширину окна (и вверх, и вниз). */
  --u: calc(100vw / 1452);
  --radius-lg: max(24px, calc(48 * var(--u)));
  --radius-md: max(18px, calc(28 * var(--u)));
  --radius-sm: max(14px, calc(20 * var(--u)));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  /* Figma: Manrope SemiBold 16 / 130%, #7F7F74; ниже 1452 текст сжимается
     пропорционально, но не мельче 13px */
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 600;
  line-height: 1.3;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Фрейм макета — 1452px, карточка hero 1368px (поля по 42px) */
.container {
  margin: 0 auto;
  padding-left: calc(42 * var(--u));
  padding-right: calc(42 * var(--u));
}

/* ---- Typography ---- */
h1, .h2 {
  /* Figma: Bebas Neue Cyrillic Regular, 64 / 99% */
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--dark);
  line-height: 0.99;
}

h1 { font-size: calc(64 * var(--u)); letter-spacing: 0; }
.h2 { font-size: max(24px, calc(48 * var(--u))); line-height: 1.04; }
.h2--light { color: var(--white); }
.accent { color: var(--orange); }

h3 {
  font-weight: 800;
  color: var(--dark);
  font-size: max(19px, calc(30 * var(--u)));
  line-height: 1.2;
}

/* ---- Buttons ---- */
.btn {
  /* Figma: кнопка 50px высотой, радиус 1000, Manrope SemiBold 16 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: max(42px, calc(50 * var(--u)));
  font-weight: 600;
  font-size: max(13px, calc(16 * var(--u)));
  padding: 0 calc(34 * var(--u));
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--orange); color: var(--white); }
.btn--solid:hover { background: #e5701f; }
.btn--outline { border: 2px solid var(--orange); color: var(--orange); }
.btn--cream { background: var(--bg); color: var(--orange); }
.btn--lg { padding: 0 calc(44 * var(--u)); }
.header__actions .btn--solid { padding: 0 calc(44 * var(--u)); }

/* ---- Header ---- */
.header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(21 * var(--u));
  padding-bottom: calc(21 * var(--u));
}
/* Figma: лого 140×32 */
.logo img { height: max(24px, calc(32 * var(--u))); width: auto; }
.header__actions { display: flex; gap: calc(20 * var(--u)); }

/* ---- Hero ---- */
.hero { position: relative; margin-top: calc(16 * var(--u)); }

/* Ручка «пакета»: Figma Rectangle 25 — 266×162, радиус 81, обводка 50 внутрь.
   По рендеру макета торчит над карточкой на 81px (прорезь видна на 31px) */
.hero__handle {
  position: absolute;
  left: 50%;
  top: calc(-81 * var(--u));
  transform: translateX(-50%);
  width: calc(266 * var(--u));
  height: calc(162 * var(--u));
  box-sizing: border-box;
  border: calc(50 * var(--u)) solid var(--card-hero);
  border-radius: calc(81 * var(--u));
  z-index: 0;
}

.hero__card {
  position: relative;
  z-index: 1;
  background: var(--card-hero);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Кольцо ручки пакета на фоне: Ø1030, толщина 110, продолжение ручки сверху */
.hero__card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(32 * var(--u));
  margin-left: calc(-515 * var(--u));
  width: calc(1030 * var(--u));
  aspect-ratio: 1;
  box-sizing: border-box;
  border: calc(110 * var(--u)) solid var(--ring);
  border-radius: 50%;
  pointer-events: none;
}

/* Тыква и арбуз одним экспортом из макета — прижаты к низу карточки */
.hero__mascots {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr calc(318 * var(--u)) 1fr;
  gap: calc(24 * var(--u));
  align-items: start;
  padding: calc(44 * var(--u)) calc(68 * var(--u)) 0;
}

.hero__text { grid-column: 1; grid-row: 1; padding-bottom: calc(110 * var(--u)); }
/* Figma: блок 246px, отступ от H1 — 10px */
.hero__sub {
  margin: calc(10 * var(--u)) 0 calc(24 * var(--u));
  max-width: max(203px, calc(250 * var(--u)));
}

.hero__phone {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
/* Мокап телефона в hero: геометрия снята с экспорта Mask group (302 шириной,
   безель 11, радиус 30, island 78×22 в 8px от верха экрана, белая обводка 1.5).
   Экран — screen-ration.png в высоком разрешении, поэтому резкий на любом зуме;
   низ обрезается краем карточки, как в макете. */
.phone-hero {
  width: calc(302 * var(--u));
  background: #101010;
  border-radius: calc(30 * var(--u));
  padding: calc(11 * var(--u));
  box-shadow: 0 0 0 max(1px, calc(1.5 * var(--u))) #FFFDF2;
  margin-top: calc(-7 * var(--u));
  /* полная высота мокапа ~628, видимая — до низа карточки; отрицательный
     нижний отступ не даёт телефону растянуть карточку */
  margin-bottom: calc(-200 * var(--u));
  position: relative;
  z-index: 2;
}
.phone-hero::after {
  content: "";
  position: absolute;
  top: calc(19 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(78 * var(--u));
  height: calc(22 * var(--u));
  border-radius: calc(11 * var(--u));
  background: #101010;
}
.phone-hero img { width: 100%; border-radius: calc(19 * var(--u)); display: block; }
/* Мобильные экспорты из макета (phone N page) — показываются только
   в мобильной раскладке, на десктопе выключены */
.phone-hero-mob, .step-mob, .save__photo-mob, .cta__visual-mob { display: none; }

.hero__features {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(19 * var(--u));
  margin-left: auto;
  padding-top: calc(16 * var(--u));
}
/* Figma (Group 335-337): высота 83, иконка Ø70 с полем 7, зазор 17, справа 38 */
.feature-pill {
  display: flex;
  align-items: center;
  gap: calc(17 * var(--u));
  background: var(--bg);
  border-radius: 999px;
  padding: calc(7 * var(--u)) calc(38 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u));
  color: var(--text);
}
.feature-pill__icon {
  flex: 0 0 max(44px, calc(66 * var(--u)));
  width: max(44px, calc(66 * var(--u)));
  height: max(44px, calc(66 * var(--u)));
  border-radius: 50%;
  border: 2px solid var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
}
.feature-pill__icon img { width: 78%; height: 78%; object-fit: contain; }

/* ---- Phone frame ---- */
/* Figma: рамка 8px, внешний радиус 46, island 78×22 на линии статус-бара */
.phone {
  background: #101010;
  border-radius: calc(46 * var(--u));
  padding: calc(8 * var(--u));
  position: relative;
  box-shadow: 0 16px 40px rgba(64, 63, 61, 0.15);
}
.phone::after {
  content: "";
  position: absolute;
  top: calc(16 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(78 * var(--u));
  height: calc(22 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #101010;
}
.phone img { border-radius: calc(38 * var(--u)); width: 100%; }
/* Figma (экспорты Group 355/358): корпус ~220 шириной, радиус угла 22, экран 14 */
.phone--sm { border-radius: calc(22 * var(--u)); padding: calc(8 * var(--u)); }
.phone--sm::after { width: calc(64 * var(--u)); height: calc(18 * var(--u)); top: calc(13 * var(--u)); }
.phone--sm img { border-radius: calc(14 * var(--u)); }

/* ---- Pain ---- */
/* Figma (2 page): контент секции не до краёв — поля по 160px от края фрейма
   1452. Тянутся вместе с экраном, но не дают тексту прилипнуть к краю. */
.pain {
  padding-top: calc(125 * var(--u));
  padding-left: max(18px, calc(160 * var(--u)));
  padding-right: max(18px, calc(160 * var(--u)));
}
.pain__title { text-align: center; margin: 0 auto calc(43 * var(--u)); }

/* Figma: колонки 316 / 434 / 316, зазор 24 */
.pain__grid {
  display: grid;
  grid-template-columns: 1fr 1.37fr 1fr;
  gap: calc(24 * var(--u));
  align-items: start;
}
.pain__col { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }

.pain-card {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: max(20px, calc(26 * var(--u))) max(22px, calc(28 * var(--u))) max(24px, calc(30 * var(--u)));
}
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(30px, calc(38 * var(--u)));
  height: max(30px, calc(38 * var(--u)));
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
  font-size: max(14px, calc(18 * var(--u)));
  margin-bottom: calc(16 * var(--u));
}
/* Figma (3 page): кружок шага Ø43 */
.num--lg {
  width: max(36px, calc(43 * var(--u)));
  height: max(36px, calc(43 * var(--u)));
  font-size: max(15px, calc(20 * var(--u)));
}

/* Figma: фото 434×442 — почти квадратное */
.pain__photo img {
  border-radius: var(--radius-sm);
  width: 100%;
  aspect-ratio: 434 / 442;
  object-fit: cover;
}

/* ---- How ---- */
/* Figma (3 page): оранжевая карточка 1368, паддинги 44 сверху/снизу,
   66 слева и 86 справа; заголовок Bebas 64, подзаголовок Manrope 20. */
.how { padding-top: calc(100 * var(--u)); }
.how__card {
  background: var(--orange);
  border-radius: var(--radius-lg);
  padding: calc(40 * var(--u)) calc(86 * var(--u)) calc(44 * var(--u)) calc(66 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1.32fr;
  gap: calc(30 * var(--u));
  align-items: start;
}
/* Заголовок в макете на 32px ниже верха кремовых карточек */
.how__intro { position: sticky; top: calc(48 * var(--u)); padding-top: calc(32 * var(--u)); }
.how__intro .h2 { font-size: max(30px, calc(64 * var(--u))); max-width: calc(373 * var(--u)); }
.how__intro p {
  color: var(--white);
  margin-top: calc(27 * var(--u));
  max-width: calc(322 * var(--u));
  font-size: max(14px, calc(20 * var(--u)));
  font-weight: 600;
}

.how__steps { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }

/* Figma (экспорт Group 355/358/360): карточка шага 696×328, кружок и текст
   от 36 слева / 40 сверху; телефон 223 в 59 от правого края, обрезан низом */
.step-card {
  background: var(--card);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 1fr calc(282 * var(--u));
  overflow: hidden;
  min-height: calc(328 * var(--u));
}
.step-card__body { padding: calc(40 * var(--u)) 0 calc(34 * var(--u)) calc(36 * var(--u)); }
.step-card__body .num--lg { margin-bottom: calc(70 * var(--u)); }
/* Figma: заголовок шага Manrope ExtraBold 28/120%, текст 16/130%;
   переносы строк как в макете — заголовок узкий, у 4-го шага шире */
.step-card__body h3 { font-size: max(18px, calc(28 * var(--u))); margin-bottom: calc(28 * var(--u)); max-width: calc(260 * var(--u)); }
.step-card__body p { max-width: calc(360 * var(--u)); }
.how__steps .step-card:last-child h3 { max-width: calc(350 * var(--u)); }
/* В 1-й карточке передний телефон заходит в текстовую колонку — текст уже */
.how__steps .step-card:first-child .step-card__body p { max-width: calc(260 * var(--u)); }

.step-card__media {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: calc(35 * var(--u)) calc(59 * var(--u)) 0 0;
}
/* Фоновое пятно позади телефона в каждой карточке шага (по актуальному
   макету): залитый круг Ø400, касается верха карточки, выступает за её
   правый и нижний края и обрезается ими */
.step-card__media::before {
  content: "";
  position: absolute;
  right: calc(-45 * var(--u));
  top: 0;
  width: calc(400 * var(--u));
  height: calc(400 * var(--u));
  background: var(--ring);
  border-radius: 50%;
}
.step-card__media .phone {
  width: calc(223 * var(--u));
  margin-bottom: calc(-180 * var(--u));
}
.step-card__media--duo { padding: calc(130 * var(--u)) 0 0; justify-content: flex-start; }
.step-card__media--duo .phone { width: calc(180 * var(--u)); }
.step-card__media--duo .phone--back {
  position: absolute;
  right: calc(54 * var(--u));
  top: calc(34 * var(--u));
  width: calc(190 * var(--u));
  z-index: 0;
  margin-bottom: 0;
}
.step-card__media--duo .phone:first-child { position: relative; z-index: 1; margin-left: calc(-94 * var(--u)); }

/* ---- Savings ---- */
/* Figma (4 page): контент секции с полями ~82 от края фрейма; фото 630×531
   слева, справа 2×2 карточки ~310×250, зазоры 20 (колонки) и 28 (ряды) */
.save {
  padding-top: calc(110 * var(--u));
  padding-left: max(18px, calc(82 * var(--u)));
  padding-right: max(18px, calc(82 * var(--u)));
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: calc(20 * var(--u));
  align-items: stretch;
}
.save__photo {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: calc(530 * var(--u));
}
.save__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Figma: заголовок Bebas 64, тёмный, в 26/42 от угла фото */
.save__photo .h2 {
  position: absolute;
  z-index: 1;
  top: calc(42 * var(--u));
  left: calc(26 * var(--u));
  font-size: max(30px, calc(64 * var(--u)));
  max-width: calc(420 * var(--u));
}

.save__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(28 * var(--u)) calc(20 * var(--u));
}
.save-card {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: max(18px, calc(22 * var(--u)));
}
/* Figma: иконка ~83, заголовок карточки Manrope ExtraBold 24/120% */
.save-card__icon { width: max(52px, calc(83 * var(--u))); height: max(52px, calc(83 * var(--u))); object-fit: contain; margin-bottom: calc(17 * var(--u)); }
.save-card h3 { font-size: max(18px, calc(24 * var(--u))); margin-bottom: calc(10 * var(--u)); }
.save-card p { font-size: max(12.5px, calc(16 * var(--u))); }

/* ---- Dishes ---- */
/* Figma (5 page): оранжевая лента 1440x755 с прямыми углами; сверху и снизу на неё
   наложены кремовые «волны» (скруглённые плашки), фон — дуга гигантского эллипса */
.dishes {
  position: relative;
  margin-top: calc(13 * var(--u));
  background:
    radial-gradient(calc(1034 * var(--u)) calc(1658 * var(--u)) at 50% calc(-1013 * var(--u)),
      transparent 93.35%, rgba(255, 253, 242, 0.18) 93.5%, rgba(255, 253, 242, 0.18) 99.85%, transparent 100%),
    var(--orange);
  overflow: hidden;
  /* по макету высота ленты 755: 192 сверху и 333 снизу минус браузерная высота строк без figma-трима */
  padding: calc(182 * var(--u)) calc(32 * var(--u)) calc(308 * var(--u));
}
.dishes::before,
.dishes::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--bg);
  z-index: 1;
  pointer-events: none;
}
.dishes::before {
  top: 0;
  height: max(40px, calc(95 * var(--u)));
  border-radius: 0 0 max(24px, calc(60 * var(--u))) max(24px, calc(60 * var(--u)));
}
.dishes::after {
  bottom: 0;
  height: max(26px, calc(60 * var(--u)));
  border-radius: max(24px, calc(60 * var(--u))) max(24px, calc(60 * var(--u))) 0 0;
}
.dishes__content {
  position: relative;
  z-index: 2;
  max-width: calc(560 * var(--u));
  margin: 0 auto;
  text-align: center;
}
/* Figma: заголовок Bebas 64/99% шириной 452, абзац Manrope SemiBold 20/130% шириной 524, белый 80% */
.dishes__content .h2 {
  font-size: max(30px, calc(64 * var(--u)));
  line-height: 0.99;
  max-width: calc(470 * var(--u));
  margin: 0 auto;
}
.dishes__content p {
  color: var(--white);
  opacity: 0.8;
  max-width: calc(524 * var(--u));
  margin: calc(30 * var(--u)) auto 0;
  font-size: max(14px, calc(20 * var(--u)));
  line-height: 1.3;
  font-weight: 600;
}
/* Мобильный макет (phone page 5) использует другой текст под заголовком */
.dishes__p--mob { display: none; }

/* Бесконечная лента блюд: две независимые колонки, в каждой два одинаковых набора
   едут вверх на высоту набора (--dishes-set). Колонки сдвинуты по фазе, чтобы
   слева и справа блюда шли в шахматном порядке, а не парами. */
.dishes { --dishes-set: calc(1260 * var(--u)); }
.dishes__flow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dishes__col {
  position: absolute;
  inset: 0;
}
.dishes__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(2 * var(--dishes-set));
  animation: dishes-flow 54s linear infinite;
  will-change: transform;
}
/* фазы подобраны так, чтобы при загрузке левая колонка стояла как в макете (5 page),
   а правая — со сдвигом на полшага вниз (асимметрия) */
.dishes__col--left .dishes__track { animation-delay: -47.4s; }
.dishes__col--right .dishes__track { animation-delay: -44s; }
.dishes__set {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--dishes-set);
}
.dishes__set:nth-child(2) { top: var(--dishes-set); }
@keyframes dishes-flow {
  to { transform: translateY(calc(-1 * var(--dishes-set))); }
}
@media (prefers-reduced-motion: reduce) {
  .dishes__track { animation: none; }
}

.dishes__img {
  position: absolute;
  object-fit: cover;
  /* у экспортов из макета скругление ~10px запечено в альфе — дублируем его CSS для всех фото */
  border-radius: max(5px, calc(10 * var(--u)));
}
/* Внутри набора фото идут каскадом с равным шагом и не пересекают его границы
   (иначе на стыке цикла будет скачок); стартовую раскладку задаёт animation-delay */
.dishes__img--l1 { width: calc(172 * var(--u)); height: calc(172 * var(--u)); left: calc(55 * var(--u)); top: 0; }
.dishes__img--l2 { width: calc(209 * var(--u)); height: calc(140 * var(--u)); left: calc(208 * var(--u)); top: calc(223 * var(--u)); }
.dishes__img--l3 { width: calc(170 * var(--u)); height: calc(170 * var(--u)); left: calc(57 * var(--u)); top: calc(414 * var(--u)); }
.dishes__img--l4 { width: calc(200 * var(--u)); height: calc(150 * var(--u)); left: calc(190 * var(--u)); top: calc(635 * var(--u)); }
.dishes__img--l5 { width: calc(172 * var(--u)); height: calc(172 * var(--u)); left: calc(60 * var(--u)); top: calc(836 * var(--u)); }
.dishes__img--l6 { width: calc(200 * var(--u)); height: calc(150 * var(--u)); left: calc(195 * var(--u)); top: calc(1059 * var(--u)); }
.dishes__img--r1 { width: calc(179 * var(--u)); height: calc(179 * var(--u)); right: calc(70 * var(--u)); top: 0; }
.dishes__img--r2 { width: calc(200 * var(--u)); height: calc(150 * var(--u)); right: calc(218 * var(--u)); top: calc(231 * var(--u)); }
.dishes__img--r3 { width: calc(160 * var(--u)); height: calc(160 * var(--u)); right: calc(83 * var(--u)); top: calc(433 * var(--u)); }
.dishes__img--r4 { width: calc(205 * var(--u)); height: calc(137 * var(--u)); right: calc(200 * var(--u)); top: calc(645 * var(--u)); }
.dishes__img--r5 { width: calc(172 * var(--u)); height: calc(172 * var(--u)); right: calc(75 * var(--u)); top: calc(834 * var(--u)); }
.dishes__img--r6 { width: calc(200 * var(--u)); height: calc(150 * var(--u)); right: calc(210 * var(--u)); top: calc(1058 * var(--u)); }

/* ---- CTA ---- */
.cta { padding-top: calc(88 * var(--u)); padding-bottom: calc(40 * var(--u)); }
/* Figma (6 page): карточка не на всю ширину контейнера — 1078px по центру,
   заголовок Bebas 54 с отступом 46/42 от края карточки */
.cta__card {
  position: relative;
  background: var(--orange);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: calc(1078 * var(--u));
  margin: 0 auto;
  padding: calc(42 * var(--u)) 0 0 calc(46 * var(--u));
}
.cta__text { position: relative; z-index: 1; max-width: calc(480 * var(--u)); padding-bottom: calc(40 * var(--u)); }
.cta__text .h2 { font-size: max(26px, calc(54 * var(--u))); line-height: 0.99; max-width: calc(400 * var(--u)); }
.cta__text p { color: var(--white); opacity: 0.8; font-size: max(14px, calc(20 * var(--u))); font-weight: 600; margin: calc(36 * var(--u)) 0 calc(50 * var(--u)); max-width: calc(344 * var(--u)); }

/* Figma (6 page): правая часть карточки — цельный экспорт Mask group (круг + телефон + тыква),
   замаскированный границами карточки: тянем по высоте карточки, прижав к правому краю.
   Поверх нарисованных глаз тыквы JS кладёт следящие за курсором (координаты в data-eyes). */
.cta__visual {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 1440 / 839;
}
.cta__visual .mascot__body,
.cta__visual img { height: 100%; }

/* ---- Footer ---- */
.footer {
  position: relative;
  margin-top: calc(90 * var(--u));
  background: var(--card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: calc(40 * var(--u));
  padding-top: calc(72 * var(--u));
  padding-bottom: calc(300 * var(--u));
}
.footer .logo img { height: max(32px, calc(46 * var(--u))); }

.footer__nav { display: flex; flex-direction: column; gap: calc(22 * var(--u)); font-size: max(14px, calc(19 * var(--u))); color: var(--dark); }
.footer__nav a:hover { color: var(--orange); }

.footer__mail {
  font-size: max(20px, calc(30 * var(--u)));
  font-weight: 800;
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.footer__contact p { margin-top: calc(20 * var(--u)); font-size: max(12.5px, calc(16.5 * var(--u))); max-width: calc(430 * var(--u)); }

.footer__mascots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}
.footer__mascots-group { display: flex; align-items: flex-end; }
/* Figma (7 page): размеры и стартовые позиции маскотов; авокадо и перец
   приподняты — при первом появлении футера их мягко уложит гравитация */
.fm--avocado { width: calc(150 * var(--u)); margin-bottom: calc(120 * var(--u)); }
.fm--meat { width: calc(150 * var(--u)); margin-left: calc(-100 * var(--u)); margin-bottom: calc(28 * var(--u)); }
.fm--patisson { width: calc(135 * var(--u)); }
.fm--banana { width: calc(128 * var(--u)); }
.fm--watermelon { width: calc(157 * var(--u)); }
.fm--papaya { width: calc(173 * var(--u)); margin-bottom: calc(10 * var(--u)); margin-left: calc(-4 * var(--u)); }
.fm--eggplant { width: calc(140 * var(--u)); margin-left: calc(-8 * var(--u)); }
.fm--chili { width: calc(84 * var(--u)); margin-left: calc(-66 * var(--u)); margin-bottom: calc(174 * var(--u)); }

/* Фрукты в футере можно таскать (js/main.js); глазами следят все маскоты. */
.footer .fm {
  position: relative;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.footer .fm.dragging { cursor: grabbing; z-index: 60; }
/* Сжатие при толчках/отскоках — на общем контейнере картинки и глаз,
   чтобы глаза не отрывались от модельки. */
.footer .fm .mascot__body { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 50% 50%; }
.footer .fm.squash .mascot__body { transform: scale(.93); }

/* ВАЖНО: у .mascot нет своего position — у hero-маскотов он absolute,
   у фруктов футера и тыквы CTA relative задаётся их собственными классами. */
.mascot { display: block; }
.mascot__body { display: block; position: relative; }
.mascot img { width: 100%; display: block; -webkit-user-drag: none; }

.eye {
  position: absolute;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform .1s ease;
}
.eye.blink { transform: translate(-50%, -50%) scaleY(.08); }
.pupil {
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1f1f1f;
  transition: transform .09s linear;
}

/* Плавное появление секций при скролле (класс вешает js/main.js).
   Используем свойство translate, а не transform, чтобы не конфликтовать
   с transform у карточек и фото. */
.reveal { opacity: 0; translate: 0 30px; transition: opacity .7s ease, translate .7s cubic-bezier(.22, .61, .36, 1); }
.reveal.in { opacity: 1; translate: none; }

/* ================= Responsive =================
   Выше 820px раскладка масштабируется через --u сплошняком. Ниже — мобильная
   раскладка по макетам «phone N page»: фрейм 414px, размеры заданы в единицах
   --um = 100vw/414 и пропорционально тянутся под любую ширину телефона,
   сохраняя все поля и рамки макета. */
@media (max-width: 820px) {
  :root { --um: calc(100vw / 414); }

  body { font-size: calc(14 * var(--um)); }
  .h2 { font-size: calc(38 * var(--um)); line-height: 0.99; }
  h3 { font-size: calc(20 * var(--um)); }
  .btn { height: calc(50 * var(--um)); font-size: calc(16 * var(--um)); padding: 0 calc(32 * var(--um)); }
  .num { width: calc(26 * var(--um)); height: calc(26 * var(--um)); font-size: calc(14 * var(--um)); margin-bottom: calc(12 * var(--um)); }
  .num--lg { width: calc(30 * var(--um)); height: calc(30 * var(--um)); font-size: calc(15 * var(--um)); }
  /* Поля мобильного фрейма — 20 */
  .container { padding-left: calc(20 * var(--um)); padding-right: calc(20 * var(--um)); }

  /* Шапка по макету: лого 90×22, «Войти» 41px высотой, центры на одной оси */
  .header { padding-top: calc(13 * var(--um)); padding-bottom: calc(13 * var(--um)); }
  .header__actions { gap: calc(12 * var(--um)); }
  .header__actions .btn--solid { display: none; }
  .header .btn { height: calc(41 * var(--um)); font-size: calc(14 * var(--um)); padding: 0 calc(30 * var(--um)); }
  .logo img { height: calc(22 * var(--um)); }

  /* ---- Hero (phone 1 page) ---- */
  .hero { margin-top: 0; }
  /* Ручка «пакета» по актуальному Figma (скрин 22.08, фрейм 1:1): цельная
     плашка 129 шириной, торчит над карточкой на 56, верхние углы радиусом 48;
     прорезь 73 шириной с радиусом 20, её верх на 30 ниже верха ручки */
  .hero__handle {
    top: calc(-56 * var(--um));
    width: calc(129 * var(--um));
    height: calc(60 * var(--um));
    border: 0;
    background: var(--card-hero);
    border-radius: calc(48 * var(--um)) calc(48 * var(--um)) 0 0;
  }
  .hero__handle::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(30 * var(--um));
    width: calc(73 * var(--um));
    height: calc(30 * var(--um));
    background: var(--bg);
    border-radius: calc(20 * var(--um)) calc(20 * var(--um)) 0 0;
  }
  .hero__mascots { display: none; }

  /* В мобильном макете плашки-фичи лежат НИЖЕ карточки на светлом фоне,
     поэтому бежевый «пакет» рисуем на блоках текста и телефона, а сама
     .hero__card прозрачная. Низ карточки — кромка экспорта с маскотами. */
  .hero__card { background: transparent; overflow: visible; border-radius: 0; }
  .hero__card::before { display: none; }
  .hero__inner { display: block; padding: 0; text-align: center; }
  .hero__text { background: var(--card-hero); border-radius: calc(28 * var(--um)) calc(28 * var(--um)) 0 0; padding: calc(23 * var(--um)) calc(10 * var(--um)) 0; }
  /* Figma: Bebas 44/99, ширина 354 на фрейме 414 */
  /* Актуальный Figma (22.08): заголовок 40 — ложится в две строки */
  .hero__text h1 { font-size: calc(40 * var(--um)); }
  .hero__sub { font-size: calc(14 * var(--um)); max-width: calc(233 * var(--um)); margin: calc(8 * var(--um)) auto calc(12 * var(--um)); }
  .hero__text .btn { width: calc(226 * var(--um)); max-width: 100%; }

  .hero__phone {
    display: block;
    position: relative;
    background: url("../assets/hero-phone-mob.webp") no-repeat 0 calc(26 * var(--um)) / 100% auto, var(--card-hero);
    border-radius: 0 0 calc(28 * var(--um)) calc(28 * var(--um));
    overflow: hidden;
    padding-top: calc(36 * var(--um));
    height: calc(438 * var(--um));
    margin-top: 0;
  }
  /* Кольцо позади телефона — по актуальному Figma (скрин 22.08, фрейм 1:1):
     одно кольцо Ø504 с обводкой 98 по центру карточки, верх дуги на 40 ниже
     верха телефона (телефон в webp начинается на 40 ниже верха блока);
     дуги идут от краёв карточки до телефона, низ обрезается карточкой.
     ВАЖНО: box-sizing обязателен — глобальный `*` не матчит псевдоэлементы,
     без него обводка раздувает круг наружу и дуги уезжают. */
  .hero__phone::before {
    content: "";
    position: absolute;
    z-index: 0;
    box-sizing: border-box;
    left: calc(-65 * var(--um));
    top: calc(76 * var(--um));
    width: calc(504 * var(--um));
    height: calc(504 * var(--um));
    border: calc(98 * var(--um)) solid var(--ring);
    border-radius: 50%;
  }
  .hero__phone::after { content: none; }
  /* Телефон и залитый круг за ним — экспорт из Figma «Group 382» (3x, ровно
     ширина карточки 374 × 413, низ = низ карточки), фоном блока: верх экспорта
     на 26 ниже верха блока, чтобы верх телефона лёг на 244 от верха карточки.
     CSS-телефон и CSS-кольцо на мобилке выключены. */
  .phone-hero { display: none; }
  .hero__phone::before { display: none; }
  /* Маскоты — вырезанным из экспорта спрайтом поверх телефона; прижаты к
     низу карточки, низ спрайта на 15 ниже кромки и обрезается ею */
  .phone-hero-mob {
    display: block;
    position: absolute;
    left: 0;
    bottom: calc(-15 * var(--um));
    width: 100%;
    z-index: 3;
  }
  /* Низ «пакета» без reveal-анимации, чтобы карточка не разъезжалась при загрузке */
  .hero__phone.reveal { opacity: 1; translate: none; transition: none; }

  .hero__features { text-align: left; margin-top: calc(22 * var(--um)); align-items: stretch; gap: calc(16 * var(--um)); padding: 0; }
  /* Плашки в мобильном макете — бежевые на светлом фоне (инверсия десктопа) */
  .feature-pill { background: var(--card); gap: calc(17 * var(--um)); padding: calc(7 * var(--um)) calc(20 * var(--um)) calc(7 * var(--um)) calc(7 * var(--um)); font-size: calc(16 * var(--um)); }
  .feature-pill__icon { flex-basis: calc(66 * var(--um)); width: calc(66 * var(--um)); height: calc(66 * var(--um)); }
  .hero__features .feature-pill:last-child { font-size: calc(14 * var(--um)); }

  /* ---- Pain (phone 2 page) ---- */
  .pain { padding-top: calc(84 * var(--um)); padding-left: calc(20 * var(--um)); padding-right: calc(20 * var(--um)); }
  /* Figma: Bebas 38/99, слева */
  .pain__title { text-align: left; margin-bottom: calc(14 * var(--um)); }
  .pain__grid { grid-template-columns: 1fr; gap: calc(10 * var(--um)); }
  .pain__col { gap: calc(10 * var(--um)); }
  .pain-card { border-radius: calc(18 * var(--um)); padding: calc(16 * var(--um)); }
  .pain__photo { order: -1; margin-bottom: calc(16 * var(--um)); }
  /* Мобильная кадровка фото — 375×387 */
  .pain__photo img { aspect-ratio: 375 / 387; border-radius: calc(20 * var(--um)); }

  /* ---- How (phone page 3): оранжевая карточка на всю ширину ---- */
  .how { padding-top: calc(76 * var(--um)); padding-left: 0; padding-right: 0; }
  .how__card { display: block; border-radius: calc(36 * var(--um)); padding: calc(72 * var(--um)) calc(20 * var(--um)) calc(20 * var(--um)); }
  .how__intro { position: static; padding-top: 0; text-align: center; }
  .how__intro .h2 { font-size: calc(44 * var(--um)); max-width: calc(364 * var(--um)); margin: 0 auto; }
  .how__intro p { font-size: calc(20 * var(--um)); margin: calc(20 * var(--um)) auto 0; max-width: calc(322 * var(--um)); }
  .how__steps { margin-top: calc(40 * var(--um)); gap: calc(16 * var(--um)); }

  /* Карточка шага: кружок и заголовок в одну строку, текст под ними,
     телефоны — мобильными экспортами, обрезанными низом карточки */
  .step-card { display: block; min-height: 0; border-radius: calc(20 * var(--um)); }
  .step-card__body { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(20 * var(--um)); padding: calc(16 * var(--um)) calc(15 * var(--um)) 0; }
  .step-card__body .num--lg { margin-bottom: 0; }
  .step-card__body h3 { font-size: calc(20 * var(--um)); margin-bottom: 0; max-width: none; }
  .step-card__body p { grid-column: 1 / -1; margin-top: calc(14 * var(--um)); max-width: none; }
  .how__steps .step-card:last-child h3 { max-width: none; }
  .how__steps .step-card:first-child .step-card__body p { max-width: none; }
  .step-card__media { display: block; position: relative; padding: calc(20 * var(--um)) 0 0; }
  /* В мобильной версии карточки шагов без фоновых пятен */
  .step-card__media::before { display: none; }
  .step-card__media .phone { display: none; }
  .step-mob { display: block; margin: 0 auto; position: relative; z-index: 1; }
  .step-card__media--duo { padding-top: calc(20 * var(--um)); justify-content: center; }
  .step-card__media--duo .step-mob { width: calc(324 * var(--um)); }
  .how__steps .step-card:nth-child(2) .step-mob { width: calc(189 * var(--um)); }
  .how__steps .step-card:nth-child(3) .step-mob { width: calc(284 * var(--um)); }
  .how__steps .step-card:nth-child(4) .step-mob { width: calc(229 * var(--um)); }

  /* ---- Savings (phone page 4) ---- */
  .save { display: block; padding: calc(77 * var(--um)) calc(20 * var(--um)) 0; }
  .save__photo { min-height: 0; border-radius: calc(24 * var(--um)); }
  .save__photo .h2 { display: none; }
  .save__photo img { display: none; }
  /* Фото с заголовком — одним мобильным экспортом */
  .save__photo .save__photo-mob { display: block; position: static; width: 100%; height: auto; }
  .save__grid { grid-template-columns: 1fr; gap: calc(13 * var(--um)); margin-top: calc(14 * var(--um)); }
  /* Карточка экономии: иконка и заголовок в одну строку */
  .save-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(16 * var(--um)); padding: calc(16 * var(--um)); border-radius: calc(18 * var(--um)); }
  .save-card__icon { width: calc(62 * var(--um)); height: calc(62 * var(--um)); margin-bottom: 0; }
  .save-card h3 { font-size: calc(20 * var(--um)); margin-bottom: 0; }
  .save-card p { grid-column: 1 / -1; margin-top: calc(12 * var(--um)); font-size: calc(14 * var(--um)); }

  /* ---- Dishes (phone page 5): лента блюд плывёт слева направо ---- */
  .dishes {
    /* цикл ленты: 12 блюд (обе колонки макета) каскадом; пара
       квадрат(145) + прямоугольник(179) с зазорами 24 = 372, 6 пар = 2232 */
    --dishes-cycle: calc(2232 * var(--um));
    margin-top: calc(29 * var(--um));
    /* по макету: заголовок в 71 от верха оранжевого (40 — кремовая волна),
       высота оранжевой ленты ~530 */
    padding: calc(111 * var(--um)) calc(20 * var(--um)) calc(324 * var(--um));
    background-color: var(--orange);
    /* Vector 26 из макета — светлая дуга позади ленты */
    background-image: url("../assets/dishes-arc-mob.webp");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 50% calc(100% - 40 * var(--um));
  }
  .dishes::before { height: calc(40 * var(--um)); border-radius: 0 0 calc(24 * var(--um)) calc(24 * var(--um)); }
  .dishes::after { height: calc(26 * var(--um)); border-radius: calc(24 * var(--um)) calc(24 * var(--um)) 0 0; }
  .dishes__content { max-width: none; }
  .dishes__content .h2 { font-size: calc(44 * var(--um)); max-width: calc(364 * var(--um)); }
  .dishes__content p { font-size: calc(14 * var(--um)); max-width: calc(312 * var(--um)); margin-top: calc(16 * var(--um)); }
  .dishes__p--desktop { display: none; }
  .dishes__p--mob { display: block; }

  /* Одна горизонтальная лента: колонки макета совмещены в общий цикл
     --dishes-cycle (слоты 0–5 — левая, 6–11 — правая) и едут вправо */
  .dishes__flow { inset: auto 0 calc(107 * var(--um)) 0; height: calc(185 * var(--um)); }
  .dishes__col { position: absolute; inset: 0; }
  .dishes__track { position: absolute; inset: 0; height: auto; animation: dishes-flow-x 82s linear infinite; }
  /* фаза: при загрузке в кадре трио из макета — курица (слева, срез),
     лосось по центру, шакшука справа ниже */
  .dishes__col--left .dishes__track,
  .dishes__col--right .dishes__track { animation-delay: -79.8s; }
  .dishes__set { position: absolute; top: 0; left: 0; width: var(--dishes-cycle); height: 100%; }
  .dishes__set:nth-child(2) { top: 0; left: calc(-1 * var(--dishes-cycle)); }

  .dishes__img { border-radius: calc(10 * var(--um)); }
  .dishes__img--l1 { width: calc(145 * var(--um)); height: calc(145 * var(--um)); left: calc(0 * var(--um));    top: calc(12 * var(--um)); }
  .dishes__img--l2 { width: calc(179 * var(--um)); height: calc(116 * var(--um)); left: calc(169 * var(--um));  top: 0; }
  .dishes__img--l3 { width: calc(145 * var(--um)); height: calc(145 * var(--um)); left: calc(372 * var(--um));  top: calc(40 * var(--um)); }
  .dishes__img--l4 { width: calc(179 * var(--um)); height: calc(116 * var(--um)); left: calc(541 * var(--um));  top: calc(10 * var(--um)); }
  .dishes__img--l5 { width: calc(145 * var(--um)); height: calc(145 * var(--um)); left: calc(744 * var(--um));  top: calc(12 * var(--um)); }
  .dishes__img--l6 { width: calc(179 * var(--um)); height: calc(116 * var(--um)); left: calc(913 * var(--um));  top: 0; }
  .dishes__img--r1 { width: calc(145 * var(--um)); height: calc(145 * var(--um)); left: calc(1116 * var(--um)); right: auto; top: calc(40 * var(--um)); }
  .dishes__img--r2 { width: calc(179 * var(--um)); height: calc(116 * var(--um)); left: calc(1285 * var(--um)); right: auto; top: calc(10 * var(--um)); }
  .dishes__img--r3 { width: calc(145 * var(--um)); height: calc(145 * var(--um)); left: calc(1488 * var(--um)); right: auto; top: calc(12 * var(--um)); }
  .dishes__img--r4 { width: calc(179 * var(--um)); height: calc(116 * var(--um)); left: calc(1657 * var(--um)); right: auto; top: 0; }
  .dishes__img--r5 { width: calc(145 * var(--um)); height: calc(145 * var(--um)); left: calc(1860 * var(--um)); right: auto; top: calc(40 * var(--um)); }
  .dishes__img--r6 { width: calc(179 * var(--um)); height: calc(116 * var(--um)); left: calc(2029 * var(--um)); right: auto; top: calc(10 * var(--um)); }

  /* ---- CTA (phone page 6) ---- */
  .cta { padding-top: calc(30 * var(--um)); padding-bottom: calc(40 * var(--um)); }
  .cta__card { max-width: none; border-radius: calc(36 * var(--um)); padding: calc(26 * var(--um)) 0 0; text-align: left; }
  .cta__text { max-width: none; padding: 0 calc(16 * var(--um)); }
  .cta__text .h2 { font-size: calc(44 * var(--um)); max-width: calc(330 * var(--um)); }
  .cta__text p { font-size: calc(16 * var(--um)); margin: calc(20 * var(--um)) 0 calc(32 * var(--um)); max-width: calc(250 * var(--um)); }
  .cta__text .btn { width: 100%; }
  .cta__visual { display: none; }
  /* Телефон и тыква — одним мобильным экспортом, прижатым к низу карточки */
  .cta__visual-mob { display: block; width: 100%; margin-top: calc(39 * var(--um)); }

  /* ---- Footer (phone page 7) ---- */
  .footer {
    margin-top: 0;
    margin-bottom: calc(12 * var(--um));
    border-radius: calc(28 * var(--um));
    /* фрукты можно вытаскивать за пределы футера (физика в main.js) */
    overflow: visible;
  }
  .footer__inner { display: block; padding: calc(40 * var(--um)) calc(25 * var(--um)) calc(230 * var(--um)); }
  .footer .logo img { height: calc(43 * var(--um)); }
  .footer__nav { margin-top: calc(28 * var(--um)); gap: calc(14 * var(--um)); font-size: calc(16 * var(--um)); color: var(--text); }
  .footer__contact { margin-top: calc(32 * var(--um)); }
  .footer__mail { font-size: calc(22 * var(--um)); }
  .footer__contact p { margin-top: calc(16 * var(--um)); font-size: calc(14 * var(--um)); max-width: calc(330 * var(--um)); }

  /* Маскоты по макету — кучкой у нижнего края, с сильным перекрытием,
     чтобы вся компания уместилась в ширину экрана */
  .fm--avocado { width: calc(70 * var(--um)); margin-bottom: calc(90 * var(--um)); }
  .fm--meat { width: calc(110 * var(--um)); margin-left: calc(-52 * var(--um)); margin-bottom: calc(10 * var(--um)); }
  .fm--patisson { width: calc(92 * var(--um)); margin-left: calc(-44 * var(--um)); }
  .fm--banana { width: calc(74 * var(--um)); margin-left: calc(-40 * var(--um)); }
  .fm--watermelon { width: calc(118 * var(--um)); }
  .fm--papaya { width: calc(118 * var(--um)); margin-bottom: calc(6 * var(--um)); margin-left: calc(-68 * var(--um)); }
  .fm--eggplant { width: calc(84 * var(--um)); margin-left: calc(-60 * var(--um)); }
  .fm--chili { width: calc(62 * var(--um)); margin-left: calc(-58 * var(--um)); margin-bottom: calc(120 * var(--um)); }

  @keyframes dishes-flow-x {
    to { transform: translateX(var(--dishes-cycle)); }
  }
}