/* Убираем отступы браузера по умолчанию */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  background: #000; /* цвет по бокам, если экран шире картинки — подбери свой */
}

/* .page — внешняя рамка. На десктопе просто на всю ширину экрана.
   На мобильных — overflow: hidden обрезает всё, что вылезает за края
   (а вылезать оно будет специально, см. .canvas в медиа-запросе ниже). */
.page {
  width: 100%;
  overflow: hidden;
}

/* .canvas — сам дизайн целиком: фон + все кнопки/тексты внутри него.
   На десктопе — просто 100% ширины, ничего не меняется.
   На мобильных увеличивается и сдвигается как единое целое (см. медиа-запрос) —
   все дочерние элементы (кнопки, текст) в % от .canvas, поэтому
   двигаются/масштабируются вместе с ним, ничего пересчитывать не нужно. */
.canvas {
  position: relative;
  width: 100%;
  --txt-scale: 1; /* множитель размера текста — на мобильных станет больше (см. медиа-запрос) */
}

/* Картинка растягивается на всю ширину .canvas,
   высота считается автоматически — пропорции не ломаются */
.design {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Адаптив для телефонов ===== */
/* Обрезаем дизайн шириной 2046px до центральной полосы 984px
   (нашёл координаты сравнением с макетом: полоса начинается на 534px
   от левого края). Работает как "зум" — canvas становится шире экрана,
   а .page с overflow:hidden обрезает то, что вылезло за края. */
@media (max-width: 700px) {
  .canvas {
    width: 207.93%;        /* 2046 / 984 * 100% — во столько раз увеличиваем */
    margin-left: -54.27%;  /* 534 / 984 * 100% — сдвигаем влево, чтобы нужная полоса встала по центру экрана */
    /* Текст задан в vw (относительно экрана), а фон теперь "зумлен" в 2.0793 раза —
       без этой поправки текст визуально станет мельче фона. Компенсируем тем же множителем. */
    --txt-scale: 2.0793;
  }
}

/* Кнопки и анимация — position: absolute относительно .canvas,
   а координаты в процентах (%), а не в пикселях.
   Так они всегда останутся на нужном месте картинки,
   на любом размере экрана. */

/* Кнопки-видео — position: absolute относительно .page,
   координаты в процентах, посчитаны от холста 2046x4938.
   Ссылка <a> задаёт кликабельную область и размер,
   видео внутри просто заполняет её на 100%. */

.btn-video {
  position: absolute;
  display: block;
  cursor: pointer;
}

.btn-video img {
  width: 100%;
  height: 100%;
  display: block;
}

/* По умолчанию гифка спрятана, показывается только при клике через JS */
.btn-video .btn-gif {
  display: none;
}

/* HIRE — почта */
.btn-hire {
  top: 32.20%;
  left: 43.40%;
  width: 12.86%;
  height: 2.65%;
}

/* feedback — PDF с отзывами */
.btn-feedback {
  top: 48.12%;
  left: 42.23%;
  width: 16.37%;
  height: 3.99%;
}

/* portfolio — quipinny.com */
.btn-portfolio {
  top: 52.49%;
  left: 40.76%;
  width: 19.01%;
  height: 5.20%;
}

/* ===== Текстовые блоки ===== */
/* Координаты найдены сравнением с макетом (в процентах от холста 2046x4938).
   Размер шрифта задан в vw — так текст всегда масштабируется вместе
   с картинкой на любом экране (комментарий показывает исходный размер в px
   при ширине холста 2046px — если нужно крупнее/мельче, поменяй именно эти px
   и пересчитай: vw = px / 2046 * 100). */

.text-box {
  position: absolute;
  font-family: 'Silkscreen', monospace;
  font-weight: 700;
  color: #3a1414;
  text-align: center;
  box-sizing: border-box;
}

/* Блок "Why Work With Me" — между "Work with me!" и кнопкой HIRE.
   Высота поля всего ≈255px (в масштабе холста 2046px) — это жёсткий потолок
   для 7 строк текста (5 пунктов + Pricing + цена), размеры подобраны
   так, чтобы влезало без остатка. */
.text-why {
  top: 26.65%;
  left: 36.95%;
  width: 26.25%;
  height: 5.16%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3vw;
  padding: 0.4vw 0.5vw; /* небольшой отступ сверху/снизу — не липнет к соседним элементам */
}

.text-why .txt-title {
  font-weight: 700;
  font-size: calc(1.37vw * var(--txt-scale));  /* ≈28px */
  margin: 0;
  line-height: 1.25;
}

.text-why .txt-pricing {
  margin-top: 0.3vw;
}

.text-why .txt-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: calc(1.17vw * var(--txt-scale)); /* ≈24px */
  line-height: 1.25;
}

.text-why .txt-list li::before {
  content: "· ";
}

/* Переливающаяся градиентом цена — спокойнее, без резких перепадов цвета */
.text-why .txt-price {
  font-size: calc(1.56vw * var(--txt-scale)); /* ≈32px */
  margin: 0;
  line-height: 1.25;
  background: linear-gradient(90deg, #d4a24a, #f0c674, #d4a24a);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Блок текста внутри белой речевой облачки над кошкой.
   Поле ≈786x294px (масштаб холста 2046px) — размер шрифта подобран
   так, чтобы абзац заполнял поле, но не вылезал за края. */
.text-bubble {
  top: 64.16%;
  left: 31.08%;
  width: 38.42%;
  height: 5.95%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3vw 0.6vw;
}

.text-bubble p {
  margin: 0;
  font-size: calc(1.42vw * var(--txt-scale)); /* ≈29px */
  line-height: 1.3;
}