/*
  Страница всегда помещается в один экран, без скролла.
  Все размеры — «пиксели макета», умноженные на --u.
  Горизонтальный экран: макет 1440×915, элементы стоят на своих координатах.
  Вертикальный экран: мобильный макет шириной 542, картинка тянется по высоте.
*/

:root {
  --ink: #1d1747;
  --muted: #8f87b8;
  --chip: #c4b5f8;
  --chip-hover: #b19ff3;
  --tg-1: #2aa9f3;
  --tg-2: #62cffc;
  --band: #c3b5fa;

  --vh: 100vh;
  --u: min(100vw / 1440, var(--vh) / 915);
  /* на широких экранах сцена растягивается по ширине (не больше 1800 «пикселей макета»),
     --ex — сколько добавилось к 1440 */
  --stage-w: min(100vw, 1800 * var(--u));
  --ex: calc(var(--stage-w) - 1440 * var(--u));
  /* рука и условия сдвигаются к картинке за счёт добавленной ширины */
  --shift: calc(var(--ex) * .4);
}
@supports (height: 100svh) {
  :root { --vh: 100svh; }
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Onest", system-ui, sans-serif;
  color: var(--ink);
  background: var(--band);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, figure { margin: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- страница ---------- */

.page {
  position: relative;
  isolation: isolate;
  height: var(--vh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 12% 8%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #f1edfe 0%, #e2dafd 45%, #d3c8fc 100%);
}

.stage {
  position: relative;
  width: var(--stage-w);
  height: calc(915 * var(--u));
}
.stage > * { position: absolute; }

/* ---------- логотип (title.png с прозрачными полями) ---------- */

.logo {
  --w: calc(100 * var(--u));
  display: block;
  position: relative;
  overflow: hidden;
  width: var(--w);
  height: calc(var(--w) / 2.8677);
}
.logo img {
  position: absolute;
  max-width: none;
  width: calc(var(--w) * 1.1883);
  height: auto;
  left: calc(var(--w) * -0.0911);
  top: calc(var(--w) / 2.8677 * -0.208);
}

/* ---------- шапка ---------- */

.header {
  left: calc(119 * var(--u));
  right: calc(117 * var(--u));
  top: 0;
  height: calc(63 * var(--u));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(123, 92, 245, .16);
}

.header__swap {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-weight: 600;
  font-size: calc(16 * var(--u));
  transform: translateX(calc(-30 * var(--u)));
  transition: opacity .2s;
}
.header__swap img { width: auto; height: calc(20 * var(--u)); }
.header__swap:hover { opacity: .7; }

.btn {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  width: calc(156 * var(--u));
  height: calc(35 * var(--u));
  border-radius: 999px;
  font-weight: 600;
  font-size: calc(15 * var(--u));
  color: #fff;
  transition: transform .2s, filter .2s;
}
.btn svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.btn--tg { background: linear-gradient(90deg, var(--tg-1), var(--tg-2)); }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ---------- рука с биркой ---------- */

.tag {
  z-index: 2;
  left: calc(-420 * var(--u) + var(--shift));
  top: calc(20 * var(--u));
  width: calc(1095 * var(--u));
  pointer-events: none;
}
.tag img {
  width: 100%;
  height: auto;
  /* рука уходит за край экрана — её конец растворяется */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0%, #000 34%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0%, #000 34%);
          mask-composite: intersect;
}

/* ---------- картинка с маскотом ---------- */

.media {
  right: calc(117 * var(--u));
  top: calc(100 * var(--u));
  width: calc(684 * var(--u) + var(--ex) * .45);
  height: calc(604 * var(--u));
  overflow: hidden;
  background: #0e1230;
  border-radius:
    calc(165 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) 0 /
    calc(215 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) 0;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* ---------- условия ---------- */

.rules {
  left: calc(129 * var(--u) + var(--shift));
  top: calc(385 * var(--u));
  width: calc(510 * var(--u));
}

.rules__title {
  font-weight: 500;
  font-size: calc(38 * var(--u));
  line-height: calc(44 * var(--u));
  margin-bottom: calc(14 * var(--u));
}

.rules__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(26 * var(--u));
}
.rules__list p {
  font-weight: 400;
  font-size: calc(25 * var(--u));
  line-height: calc(32 * var(--u));
  margin-bottom: calc(8 * var(--u));
}
.rules__list b { font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  height: calc(50 * var(--u));
  padding: 0 calc(19 * var(--u));
  border-radius: 999px;
  font-weight: 500;
  font-size: calc(19.5 * var(--u));
  color: #fff;
  background: var(--chip);
  transition: background .2s, transform .2s;
}
.chip svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.chip:hover { background: var(--chip-hover); transform: translateY(-1px); }
.chip--tg { background: linear-gradient(90deg, var(--tg-1), var(--tg-2)); }
.chip--tg:hover { background: linear-gradient(90deg, #1d9de9, #52c4f6); }

.rules__note {
  margin-top: calc(32 * var(--u));
  max-width: calc(500 * var(--u));
  font-weight: 400;
  font-size: calc(19 * var(--u));
  line-height: calc(23 * var(--u));
  color: var(--muted);
}

/* ---------- подвал и нижняя полоса ---------- */

.footer {
  left: calc(119 * var(--u));
  right: calc(117 * var(--u));
  top: calc(783 * var(--u));
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: calc(28 * var(--u));
}
/* полоса на всю ширину экрана и до самого низа */
.footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -100vw;
  right: -100vw;
  bottom: -100vh;
  background: var(--band);
}
.footer__license {
  text-align: right;
  font-size: calc(12.5 * var(--u));
  line-height: calc(13 * var(--u));
  color: #6d6597;
  padding-top: calc(5 * var(--u));
}

.palms { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.palm {
  position: absolute;
  bottom: 100%;
  color: #fff;
  opacity: .35;
}
.palm--1 { left: calc(-150 * var(--u)); width: calc(260 * var(--u)); margin-bottom: calc(-2 * var(--u)); }
.palm--2 { left: calc(370 * var(--u)); width: calc(230 * var(--u)); transform: scaleX(-1); }

/* ---------- вертикальный экран (телефон, планшет) ---------- */

@media (orientation: portrait) {
  :root { --u: min(100vw / 542, var(--vh) / 1150); }

  .stage {
    width: calc(542 * var(--u));
    height: var(--vh);
    display: flex;
    flex-direction: column;
  }
  .stage > * { position: relative; left: auto; right: auto; top: auto; bottom: auto; }

  .header {
    flex: none;
    margin: 0 calc(20 * var(--u));
    height: calc(72 * var(--u));
    grid-template-columns: auto 1fr auto;
  }
  .header__swap { justify-self: center; transform: none; font-size: calc(14 * var(--u)); gap: calc(5 * var(--u)); }
  .header__swap img { height: calc(16 * var(--u)); }
  .header .logo { --w: calc(80 * var(--u)); }
  .btn { width: calc(126 * var(--u)); height: calc(28 * var(--u)); font-size: calc(14 * var(--u)); }
  .btn svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

  .tag {
    flex: none;
    width: calc(795 * var(--u));
    margin: calc(-61 * var(--u)) 0 calc(-190 * var(--u)) calc(-274 * var(--u));
  }

  .media {
    flex: 1 1 auto;
    min-height: calc(160 * var(--u));
    width: auto;
    height: auto;
    margin: 0 calc(29 * var(--u));
    border-radius:
      calc(120 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)) /
      calc(180 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u));
  }
  .media img { object-position: 50% 45%; }

  .rules {
    flex: none;
    width: auto;
    margin-top: calc(18 * var(--u));
    text-align: center;
  }
  .rules__title { font-size: calc(30 * var(--u)); line-height: calc(36 * var(--u)); margin-bottom: calc(10 * var(--u)); }
  .rules__list { gap: calc(14 * var(--u)); }
  .rules__list p { font-size: calc(21 * var(--u)); line-height: calc(26 * var(--u)); margin-bottom: calc(10 * var(--u)); }
  .chips { justify-content: center; gap: calc(9 * var(--u)); }
  .chip { height: calc(44 * var(--u)); font-size: calc(17 * var(--u)); padding: 0 calc(17 * var(--u)); }
  .chip svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .rules__note {
    max-width: calc(340 * var(--u));
    margin: calc(22 * var(--u)) auto 0;
    font-size: calc(15.5 * var(--u));
    line-height: calc(18 * var(--u));
  }

  .footer {
    flex: none;
    margin-top: calc(40 * var(--u));
    padding: calc(28 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u));
    align-items: center;
  }
  .footer .logo { --w: calc(80 * var(--u)); }
  .footer__license { font-size: calc(10 * var(--u)); line-height: calc(11 * var(--u)); padding-top: 0; }

  .palm--1 { left: calc(-80 * var(--u)); width: calc(200 * var(--u)); }
  .palm--2 { left: auto; right: calc(-60 * var(--u)); width: calc(150 * var(--u)); }
}