/** Сторінка «Ціни» — макет MacBook Pro - 4 (1728×6919). */

.page--tsiny { position: relative; z-index: 0; }
.page--tsiny .page-hero { padding: 308px 0 0; min-height: 1104px; }
.page--tsiny .page-hero__media { display: none; }

/* Фон героя з макета: 1928×1446 зі зсувом -134 / -45, тягнеться під картки */
.tsiny-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.tsiny-bg__top { position: absolute; top: -6px; left: -25px; width: max(1800px, calc(100% + 25px)); height: 1350px; }
.tsiny-bg__top img { width: 100%; height: 100%; object-fit: cover; }
/* Затемнення героя, зняте з рендера макета покроково (карта альф):
   еліптичне «вікно світла» з центром ≈(1500, 650), темно зліва/зверху/знизу. */
.tsiny-bg__top::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Макет: фото ще читається під плитками «дизайн проєкт» (на y=1300 розкид 25…45)
       і згасає повністю близько 1400. Раніше ми гасили його вже на 1180, тому
       плашки лежали на рівному тлі й виглядали непрозорими. */
    linear-gradient(180deg, rgba(29, 29, 29, 0) 1120px, #1D1D1D 1400px),
    radial-gradient(ellipse 1300px 900px at 1500px 600px,
      rgba(29, 29, 29, 0) 0%,
      rgba(29, 29, 29, 0.18) 25%,
      rgba(29, 29, 29, 0.38) 40%,
      rgba(29, 29, 29, 0.68) 60%,
      rgba(29, 29, 29, 0.90) 80%,
      #1D1D1D 100%);
}

.page--tsiny .page-hero__title {
  max-width: 1341px;
  font-weight: 100;
  font-size: var(--fs-h1);
  line-height: 104.5px;
  text-transform: uppercase;
}
.page--tsiny .page-hero__text {
  margin-top: 66px;
  max-width: 715px;
  font-weight: 100;
  font-size: var(--fs-lg);
  line-height: 31.2px;
}
.page--tsiny .page-hero__cta { margin-top: 65px; }

/* ------------------------------------------------- Дизайн-проєкт */

.design-project { padding-top: 0; }

.design-project__grid {
  display: grid;
  grid-template-columns: repeat(2, 643px);
  gap: 77.8px;
  margin-top: 81px;
}

.dp-card {
  height: 254px;
  padding: 41.9px;
  background: rgba(0, 0, 0, 0.17);
  border-radius: var(--r);
}

.dp-card__title {
  font-weight: 100;
  font-size: 47.9px;
  line-height: 34px;
  text-transform: uppercase;
}

.dp-card__price {
  display: flex;
  align-items: center;
  gap: 16.8px;
  margin-top: 54px;
}

.dp-card__from {
  color: var(--accent);
  font-weight: 500;
  font-size: 23.9px;
  line-height: 17px;
  text-transform: uppercase;
}

.dp-card__value {
  display: inline-flex;
  align-items: center;
  height: 82px;
  padding: 0 24px;
  border: 1.2px solid var(--accent);
  border-radius: var(--r);
  color: var(--accent);
  font-weight: 500;
  font-size: 47.9px;
  line-height: 34px;
}

/* --------------------------------------------------- Каруселі пакетів */

.packages--page { padding-top: 263px; }
/* Відступи між каруселями в макеті різні */
.page--tsiny .packages--business { padding-top: 380px; }
.page--tsiny .packages--individual { padding-top: 424px; }
.packages--page .sec-head__arrows { margin-top: 16px; }
.packages--page .packages__track { margin-top: 65px; }
.page--tsiny .packages--business .packages__track { margin-top: 53px; }
.page--tsiny .packages--individual .packages__track { margin-top: 16px; }

/* ------------------------------------------------------------- Низ */

.page--tsiny .page-outro { padding-top: 327px; }
.page--tsiny .page-bottom-photo { margin-top: -131px; }


/* ---------------------------------------------------------------------
   Затемнювальні шари сторінки «Ціни» — 1:1 з Figma (frame MacBook Pro - 4).
   Шість розтяжок #1D1D1D зверху вниз плюс розмитий прямокутник під картками.
   Координати — від верху сторінки, як у макеті.
   --------------------------------------------------------------------- */
/* [7] і [2] у рендері макета не проявляються — фото під ними лишається світлим */
.veils--tsiny .veil--1,
.veils--tsiny .veil--3,
.veils--tsiny .veil--5 { display: none; }
.veils--tsiny .veil--2 { left: 7px;   top: -60px;  width: max(1754px, calc(100% - 7px)); height: 788px;
  background: linear-gradient(180deg, #1D1D1D 158px, rgba(29, 29, 29, 0.02) 551px); }
.veils--tsiny .veil--3 { left: -11px; top: 517px;  width: max(1754px, calc(100% + 11px)); height: 1054px;
  background: linear-gradient(180deg, #1D1D1D 211px, rgba(29, 29, 29, 0.02) 737px); }
.veils--tsiny .veil--4 { left: -12px; top: 3217px; width: max(1754px, calc(100% + 12px)); height: 979px;
  background: linear-gradient(180deg, #1D1D1D 538px, rgba(29, 29, 29, 0.76) 642px, rgba(29, 29, 29, 0.02) 943px); }
.veils--tsiny .veil--5 { left: 23px;  top: 2938px; width: 949px;  height: 1544px;
  background: linear-gradient(180deg, #1D1D1D 309px, rgba(29, 29, 29, 0.02) 1079px); }
.veils--tsiny .veil--6 { left: -2px;  top: 5528px; width: max(1754px, calc(100% + 2px)); height: 979px;
  background: linear-gradient(180deg, #1D1D1D 538px, rgba(29, 29, 29, 0.76) 642px, rgba(29, 29, 29, 0.02) 943px); }
/* Прямокутник #000@0.35 (2126×4408 з y=1683, blur 215≈σ107): лежить під
   картками, гасить фон між усіма секціями пакетів. Краї фейдяться на ~214px. */
.veils--tsiny .veil--7 {
  left: -209px;
  top: 1576px;
  width: max(2126px, calc(100% + 209px));
  height: 4622px;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.35) 214px,
    rgba(0, 0, 0, 0.35) calc(100% - 214px),
    rgba(0, 0, 0, 0) 100%);
}

/* Нижнє фото з макета: 1763×988 при x=-21 */
.page--tsiny .page-bottom-photo { left: -21px; width: max(1763px, calc(100% + 21px)); }


/* Макет «Цін»: стрілки на 1874 / 3276 / 4657, а картки одразу за ними —
   2015 / 3393 / 4778, тобто проміжок 65px. Загальне правило .packages давало
   ще 50px знизу, і кожен блок з'їжджав на 50 — до кінця сторінки набігало 150. */
.page--tsiny .packages .sec-head__arrows { margin-bottom: 0; }